feat: collections now use list search

src/components/filters/FilterOptions.tsx

@@ -14,7 +14,7 @@ import { FaTag, FaTags, FaUser, FaCompactDisc, FaListCheck, FaSteam } from "reac
 import { FaUserFriends, FaQuestionCircle } from "react-icons/fa";
 import { MdApps } from "react-icons/md";
 import { IoGameController } from "react-icons/io5";
-import { BsWindow } from "react-icons/bs";
+import { BsCollectionFill, BsWindow } from "react-icons/bs";
 import { IconType } from "react-icons/lib";
 
 import { FilterType, ReviewScoreType, TabFilterSettings, ThresholdCondition, TimeUnit, compatCategoryToLabel } from "./Filters";
@@ -29,6 +29,7 @@ import { IncludeCategories } from "../../lib/Utils";
 import { Slider } from '../generic/Slider';
 import { STEAM_FEATURES_ID_MAP, STEAM_FEATURES_TO_RENDER } from "./SteamFeatures";
 import { MicroSDeckInterop } from '../../lib/controllers/MicroSDeckInterop';
+import { ListSearchDropdown } from "../modals/ListSearchModal";
 
 type FilterOptionsProps<T extends FilterType> = {
   index: number,
@@ -55,11 +56,31 @@ function getAppIconType(entry: any): IconType {
   }
 }
 
+
+/**
+ * Gets an entry icon for a collection based on if its user made.
+ * @param entry The collection entry.
+ * @returns The icon for the collection.
+ */
+function getCollectionIcon(entry: any): IconType {
+  const collection = collectionStore.userCollections.find((collection: SteamCollection) => collection.id === entry.data);
+  if (collection?.bIsEditable) {
+    return FaUser;
+  } else {
+    return FaSteam;
+  }
+}
+
 /**
  * The options for a collection filter.
  */
 const CollectionFilterOptions: VFC<FilterOptionsProps<'collection'>> = ({ index, setContainingGroupFilters, filter, containingGroupFilters }) => {
-  const collectionDropdownOptions: DropdownOption[] = collectionStore.userCollections.map((collection: { displayName: string; id: string; }) => { return { label: collection.displayName, data: collection.id }; });
+  const collectionDropdownOptions: SingleDropdownOption[] = collectionStore.userCollections.map((collection: SteamCollection) => {
+    return {
+      label: collection.displayName,
+      data: collection.id
+    };
+  });
 
   function onChange(data: SingleDropdownOption) {
     const updatedFilter = { ...filter };
@@ -73,7 +94,16 @@ const CollectionFilterOptions: VFC<FilterOptionsProps<'collection'>> = ({ index,
   return (
     <Field
       label="Selected Collection"
-      description={<Dropdown rgOptions={collectionDropdownOptions} selectedOption={filter.params.id} onChange={onChange} />}
+      description={
+        <ListSearchDropdown
+          entryLabel="Collections"
+          rgOptions={collectionDropdownOptions}
+          selectedOption={filter.params.id}
+          onChange={onChange}
+          TriggerIcon={BsCollectionFill}
+          determineEntryIcon={getCollectionIcon}
+        />
+      }
     />
   );
 };

src/components/filters/Filters.tsx

@@ -75,7 +75,7 @@ type FilterFunction = (params: FilterParams<FilterType>, appOverview: SteamAppOv
  * Checking and settings defaults in component is unnecessary
  */
 export const FilterDefaultParams: { [key in FilterType]: FilterParams<key> } = {
-  "collection": { id: "", name: "" },
+  "collection": { id: "favorite", name: "Favorites" },
   "installed": { installed: true },
   "regex": { regex: "" },
   "friends": { friends: [], mode: 'and' },

src/components/modals/EditTabModal.tsx

@@ -10,7 +10,7 @@ import {
   showModal
 } from "decky-frontend-lib";
 import { useState, VFC, useEffect, Fragment } from "react";
-import { FilterType, TabFilterSettings, isValidParams } from "../filters/Filters";
+import { FilterDefaultParams, FilterType, TabFilterSettings, isValidParams } from "../filters/Filters";
 import { PythonInterop } from "../../lib/controllers/PythonInterop";
 import { TabMasterContextProvider } from "../../state/TabMasterContext";
 import { TabMasterManager } from "../../state/TabMasterManager";
@@ -99,7 +99,7 @@ export const EditTabModal: VFC<EditTabModalProps> = ({ closeModal, onConfirm, ta
     updatedFilters.push({
       type: "collection",
       inverted: false,
-      params: { id: "", name: "" }
+      params: FilterDefaultParams.collection
     });
     setTopLevelFilters(updatedFilters);
   }

src/components/modals/ListSearchModal.tsx

@@ -117,7 +117,7 @@ export const ListSearchModal: VFC<ListSearchModalProps> = ({ rgOptions: list, en
   );
 };
 
-export type ListSearchTrigger = {
+export type ListSearchTriggerProps = {
   entryLabel: string,
   labelOverride: string,
   options: SingleDropdownOption[],
@@ -127,7 +127,7 @@ export type ListSearchTrigger = {
   disabled: boolean
 }
 
-export function ListSearchTrigger({ entryLabel, labelOverride, options, onChange, TriggerIcon, determineEntryIcon, disabled }: ListSearchTrigger) {
+export function ListSearchTrigger({ entryLabel, labelOverride, options, onChange, TriggerIcon, determineEntryIcon, disabled }: ListSearchTriggerProps) {
   const ModalWrapper: VFC<BaseModalProps> = ({ onSelectOption, rgOptions, closeModal }: BaseModalProps) => {
     return <ListSearchModal entryLabel={entryLabel} rgOptions={rgOptions!} onSelectOption={onSelectOption} determineEntryIcon={determineEntryIcon} closeModal={closeModal} />
   }
@@ -143,3 +143,34 @@ export function ListSearchTrigger({ entryLabel, labelOverride, options, onChange
     />
   );
 }
+
+export type ListSearchDropdownProps = {
+  entryLabel: string,
+  rgOptions: SingleDropdownOption[],
+  selectedOption: any,
+  onChange: (option: SingleDropdownOption) => void,
+  TriggerIcon: IconType,
+  determineEntryIcon: (entry?: any) => IconType,
+  disabled?: boolean
+}
+
+export function ListSearchDropdown({ entryLabel, rgOptions, selectedOption, onChange, TriggerIcon, determineEntryIcon, disabled }: ListSearchDropdownProps) {
+  const [selected, setSelected] = useState<SingleDropdownOption>(rgOptions.find((option: SingleDropdownOption) => option.data === selectedOption)!);
+
+  function onChangeWrapper(data: SingleDropdownOption) {
+    setSelected(data);
+    onChange(data);
+  }
+
+  return (
+    <ListSearchTrigger
+      entryLabel={entryLabel}
+      options={rgOptions}
+      onChange={onChangeWrapper}
+      labelOverride={selected.label as string}
+      disabled={disabled ?? false}
+      TriggerIcon={TriggerIcon}
+      determineEntryIcon={determineEntryIcon}
+    />
+  );
+}

src/components/multi-selects/ModeMultiSelect.tsx

@@ -90,7 +90,7 @@ export const ModeMultiSelect:VFC<ModeMultiSelectProps> = ({ options, selected, f
                   labelOverride={dropdownSelected.label!}
                   disabled={available.length == 0 || (!!maxOptions && selected.length == maxOptions)}
                   TriggerIcon={TriggerIcon}
-                  determineEntryIcon={(entry) => { return determineEntryIcon ? determineEntryIcon(entry) : EntryIcon}}
+                  determineEntryIcon={(entry) => { return (determineEntryIcon ? determineEntryIcon(entry) : EntryIcon) as IconType }}
                 />
               </Focusable>
               <Focusable style={{