Auto-Observe!

tgui/packages/tgui/interfaces/Orbit.js

@@ -1,10 +1,10 @@
 import { createSearch } from 'common/string';
+import { multiline } from 'common/string';
 import { resolveAsset } from '../assets';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Flex, Icon, Input, Section } from '../components';
+import { Box, Button, Divider, Flex, Icon, Input, Section } from '../components';
 import { Window } from '../layouts';
 
-const PATTERN_DESCRIPTOR = / \[(?:ghost|dead)\]$/;
 const PATTERN_NUMBER = / \(([0-9]+)\)$/;
 
 const searchFor = searchText => createSearch(searchText, thing => thing.name);
@@ -43,7 +43,7 @@ const BasicSection = (props, context) => {
       {things.map(thing => (
         <Button
           key={thing.name}
-          content={thing.name.replace(PATTERN_DESCRIPTOR, "")}
+          content={thing.name}
           onClick={() => act("orbit", {
             ref: thing.ref,
           })} />
@@ -82,6 +82,7 @@ export const Orbit = (props, context) => {
   const {
     alive,
     antagonists,
+	auto_observe,
     dead,
     ghosts,
     misc,
@@ -139,6 +140,27 @@ export const Orbit = (props, context) => {
                 value={searchText}
                 onInput={(_, value) => setSearchText(value)}
                 onEnter={(_, value) => orbitMostRelevant(value)} />
+            </Flex.Item>
+			<Flex.Item>
+              <Divider vertical />
+            </Flex.Item>
+            <Flex.Item>
+              <Button
+                inline
+                color="transparent"
+                tooltip={multiline`Toggle Auto-Observe. When active, you'll
+                see the UI / full inventory of whoever you're orbiting. Neat!`}
+                tooltipPosition="bottom-left"
+                selected={auto_observe}
+                icon={auto_observe ? "toggle-on" : "toggle-off"}
+                onClick={() => act("toggle_observe")} />
+              <Button
+                inline
+                color="transparent"
+                tooltip="Refresh"
+                tooltipPosition="bottom-left"
+                icon="sync-alt"
+                onClick={() => act("refresh")} />
             </Flex.Item>
           </Flex>
         </Section>
@@ -161,7 +183,7 @@ export const Orbit = (props, context) => {
           </Section>
         )}
 
-        <Section title="Alive">
+        <Section title={`Alive - (${alive.length})`}>
           {alive
             .filter(searchFor(searchText))
             .sort(compareNumberedText)
@@ -174,7 +196,7 @@ export const Orbit = (props, context) => {
         </Section>
 
         <BasicSection
-          title="Ghosts"
+          <Section title={`Ghosts - (${ghosts.length})`}>
           source={ghosts}
           searchText={searchText}
         />