filter for portable crew monitor (#8050)

just adds as earch bar to the portable crew monitor ![AxAAfSK0jUA7N6Cx@2x](https://github.com/user-attachments/assets/84e9b4a1-aae5-4e65-8573-db914cb25b92) :cl: ui: added a search bar to the portable crew monitor /:cl:
cmss13-devs · Jan 9, 2025 · 1443d86 · 1443d86
1 parent b089b04
commit 1443d86
Showing 1 changed file with 45 additions and 22 deletions.
diff --git a/tgui/packages/tgui/interfaces/Radar.tsx b/tgui/packages/tgui/interfaces/Radar.tsx
@@ -1,8 +1,17 @@
 import { BooleanLike, classes } from 'common/react';
+import { useState } from 'react';
 
 import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
-import { Button, Icon, Image, NoticeBox, Section, Stack } from '../components';
+import {
+  Button,
+  Icon,
+  Image,
+  Input,
+  NoticeBox,
+  Section,
+  Stack,
+} from '../components';
 import { Window } from '../layouts';
 
 type Data = {
@@ -68,8 +77,17 @@ const ObjectDisplay = (props) => {
   const { act, data } = useBackend<Data>();
   const { object = [], scanning, selected } = data;
 
+  const [filter, setFilter] = useState('');
+
   return (
-    <Section>
+    <Section
+      buttons={
+        <Input
+          placeholder="Search..."
+          onInput={(_, val) => setFilter(val.toLowerCase())}
+        />
+      }
+    >
       <Button
         icon="redo-alt"
         color="blue"
@@ -80,26 +98,31 @@ const ObjectDisplay = (props) => {
       </Button>
       {!object.length && !scanning && <div>No trackable signals found</div>}
       {!scanning &&
-        object.map((object) => (
-          <div
-            key={object.dev}
-            title={object.name}
-            className={classes([
-              'Button',
-              'Button--fluid',
-              'Button--color--transparent',
-              'Button--ellipsis',
-              object.ref === selected && 'Button--selected',
-            ])}
-            onClick={() => {
-              act('selecttarget', {
-                ref: object.ref,
-              });
-            }}
-          >
-            {object.name}
-          </div>
-        ))}
+        object
+          .filter(
+            (val) =>
+              filter.length <= 0 || val.name.toLowerCase().includes(filter),
+          )
+          .map((object) => (
+            <div
+              key={object.dev}
+              title={object.name}
+              className={classes([
+                'Button',
+                'Button--fluid',
+                'Button--color--transparent',
+                'Button--ellipsis',
+                object.ref === selected && 'Button--selected',
+              ])}
+              onClick={() => {
+                act('selecttarget', {
+                  ref: object.ref,
+                });
+              }}
+            >
+              {object.name}
+            </div>
+          ))}
     </Section>
   );
 };