Adds a searchbar to the Traitor uplink (#20230)

* searching traitor uplink

* remove unused variable

* sirryan review

code/game/objects/items/devices/uplinks.dm

@@ -64,7 +64,13 @@ GLOBAL_LIST_EMPTY(world_uplinks)
 			if(I.job && I.job.len)
 				if(!(I.job.Find(job)) && uplink_type != UPLINK_TYPE_ADMIN)
 					continue
-			cats[cats.len]["items"] += list(list("name" = sanitize(I.name), "desc" = sanitize(I.description()),"cost" = I.cost, "hijack_only" = I.hijack_only, "obj_path" = I.reference, "refundable" = I.refundable))
+			cats[cats.len]["items"] += list(list(
+				"name" = sanitize(I.name),
+				"desc" = sanitize(I.description()),
+				"cost" = I.cost,
+				"hijack_only" = I.hijack_only,
+				"obj_path" = I.reference,
+				"refundable" = I.refundable))
 			uplink_items[I.reference] = I
 
 	uplink_cats = cats

tgui/packages/tgui/interfaces/Uplink.js

@@ -23,6 +23,7 @@ export const Uplink = (props, context) => {
   const { act, data } = useBackend(context);
 
   const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
+  const [searchText, setSearchText] = useLocalState(context, "searchText", "");
 
   return (
     <Window theme="syndicate">
@@ -32,7 +33,10 @@ export const Uplink = (props, context) => {
           <Tabs.Tab
             key="PurchasePage"
             selected={tabIndex === 0}
-            onClick={() => setTabIndex(0)}
+            onClick={() => {
+                setTabIndex(0);
+                setSearchText("");
+                }}
             icon="shopping-cart"
           >
             Purchase Equipment
@@ -40,7 +44,10 @@ export const Uplink = (props, context) => {
           <Tabs.Tab
             key="ExploitableInfo"
             selected={tabIndex === 1}
-            onClick={() => setTabIndex(1)}
+            onClick={() => {
+              setTabIndex(1);
+              setSearchText("");
+              }}
             icon="user"
           >
             Exploitable Information
@@ -64,11 +71,38 @@ const ItemsPage = (_properties, context) => {
   const { act, data } = useBackend(context);
   const { crystals, cats } = data;
   // Default to first
-  const [uplinkCat, setUplinkCat] = useLocalState(
+  const [uplinkItems, setUplinkItems] = useLocalState(
     context,
-    'uplinkTab',
-    cats[0]
+    'uplinkItems',
+    cats[0].items
   );
+
+  const [searchText, setSearchText] = useLocalState(context, "searchText", "");
+  const SelectEquipment = (cat, searchText = "") => {
+    const EquipmentSearch = createSearch(searchText, item => {
+      let is_hijack = item.hijack_only === 1 ? "|" + "hijack" : ""
+      return (
+        item.name +
+        '|' +
+        item.desc +
+        '|' +
+        item.cost + "tc" +
+        is_hijack);
+    });
+    return flow([
+      filter(item => item?.name), // Make sure it has a name
+      searchText && filter(EquipmentSearch), // Search for anything
+      sortBy(item => item?.name), // Sort by name
+    ])(cat);
+  };
+  const handleSearch = (value) => {
+    if(value === "") {
+      return setUplinkItems(cats[0].items);
+    }
+    setSearchText(value);
+    setUplinkItems(SelectEquipment(cats.map(category => category.items).flat(), value));
+  };
+
   return (
     <Section
       title={'Current Balance: ' + crystals + 'TC'}
@@ -87,14 +121,26 @@ const ItemsPage = (_properties, context) => {
         </Fragment>
       }
     >
+      <Input
+        fluid
+        mb={1.5}
+        placeholder="Search Equipment"
+        onInput={(e, value) => {
+          handleSearch(value);
+        }}
+        value={searchText}
+      />
       <Flex>
         <FlexItem>
           <Tabs vertical>
             {cats.map((c) => (
               <Tabs.Tab
                 key={c}
-                selected={c === uplinkCat}
-                onClick={() => setUplinkCat(c)}
+                selected={searchText !== "" ? false : c.items === uplinkItems}
+                onClick={() => {
+                  setUplinkItems(c.items);
+                  setSearchText("");
+                  }}
               >
                 {c.cat}
               </Tabs.Tab>
@@ -102,7 +148,7 @@ const ItemsPage = (_properties, context) => {
           </Tabs>
         </FlexItem>
         <Flex.Item grow={1} basis={0}>
-          {uplinkCat.items.map((i) => (
+          {uplinkItems.map((i) => (
             <Section
               key={decodeHtmlEntities(i.name)}
               title={decodeHtmlEntities(i.name)}