feat: add "any card" option to sd filter

Author: jessebofill

src/components/changes-needed/FilterErrorOptions.tsx

@@ -8,7 +8,7 @@ import {
   showModal
 } from "decky-frontend-lib";
 import { VFC, Fragment, useState, useContext } from "react";
-import { FilterType, TabFilterSettings } from "../filters/Filters";
+import { FilterType, SdCardParamType, TabFilterSettings } from "../filters/Filters";
 import { FixMergeFilterModal } from "../modals/FixMergeFilterModal";
 import { ErrorPanelTabNameContext } from "../../state/ErrorPanelNameContext";
 import { DestructiveModal } from '../generic/DestructiveModal';
@@ -163,12 +163,17 @@ const SDCardFilterErrorOption: VFC<FilterErrorOptionsProps<'sd card'>> = ({ isMe
   const dropdownOptions: DropdownOption[] = [
     {
       label: "Inserted Card",
-      data: undefined,
+      data: SdCardParamType.INSTALLED,
     },
     {
       label: "Specific Card",
       options: cardsAndGames.map(([card]) => { return { label: card.name || card.uid, data: card.uid } })
-    }];
+    },
+    {
+      label: "Any Card",
+      data: SdCardParamType.ANY
+    }
+  ];
 
   function onChange({data}: SingleDropdownOption) {
     const updatedFilter = { ...filter };
@@ -178,7 +183,7 @@ const SDCardFilterErrorOption: VFC<FilterErrorOptionsProps<'sd card'>> = ({ isMe
 
   return (
     <Field
-      label="Selected Collection"
+      label="Selected Card"
       description={
         <div className="filter-entry">
           <Focusable style={{
@@ -189,8 +194,8 @@ const SDCardFilterErrorOption: VFC<FilterErrorOptionsProps<'sd card'>> = ({ isMe
             <Focusable style={{
               width: "calc(100% - 55px)"
             }}>
-              <Dropdown rgOptions={dropdownOptions} selectedOption={filter.params.card} onChange={onChange} />
-            </Focusable>
+              <Dropdown rgOptions={dropdownOptions} selectedOption={filter.params.card ?? SdCardParamType.INSTALLED} onChange={onChange} />
+              </Focusable>                                                        {/*  ^ back compat for undefined as installed card */}
             <Focusable style={{
               marginLeft: "10px",
               width: "45px"

src/components/filters/FilterOptions.tsx

@@ -17,7 +17,7 @@ import { IoGameController, IoGrid } from "react-icons/io5";
 import { BsWindow } from "react-icons/bs";
 import { IconType } from "react-icons/lib";
 
-import { FilterType, ReviewScoreType, TabFilterSettings, ThresholdCondition, TimeUnit, compatCategoryToLabel } from "./Filters";
+import { FilterType, ReviewScoreType, SdCardParamType, TabFilterSettings, ThresholdCondition, TimeUnit, compatCategoryToLabel } from "./Filters";
 import { TabMasterContextProvider, useTabMasterContext } from "../../state/TabMasterContext";
 import { ModeMultiSelect } from "../multi-selects/ModeMultiSelect";
 import { EditMergeFilterModal } from "../modals/EditMergeFilterModal";
@@ -963,12 +963,17 @@ const SDCardFilterOptions: VFC<FilterOptionsProps<'sd card'>> = ({ index, setCon
   const dropdownOptions: DropdownOption[] = [
     {
       label: "Inserted Card",
-      data: undefined,
+      data: SdCardParamType.INSTALLED,
     },
     {
       label: "Specific Card",
       options: cardsAndGames.map(([card]) => { return { label: card.name || card.uid, data: card.uid } })
-    }];
+    },
+    {
+      label: "Any Card",
+      data: SdCardParamType.ANY
+    }
+  ];
 
   function onChange({data}: SingleDropdownOption) {
     const updatedFilter = { ...filter };
@@ -981,8 +986,8 @@ const SDCardFilterOptions: VFC<FilterOptionsProps<'sd card'>> = ({ index, setCon
   return (
     <Field
       label="Micro SD Card"
-      description={<Dropdown rgOptions={dropdownOptions} selectedOption={filter.params.card} onChange={onChange} disabled={!isMicroSDeckInstalled} />}
-    />
+      description={<Dropdown rgOptions={dropdownOptions} selectedOption={filter.params.card ?? SdCardParamType.INSTALLED} onChange={onChange} disabled={!isMicroSDeckInstalled} />}
+    />                                                                                    //^ back compat for undefined as installed card
   );
 };
 

src/components/filters/FilterPreview.tsx

@@ -1,5 +1,5 @@
 import { Fragment, VFC, createElement } from "react";
-import { FilterIcons, FilterType, TabFilterSettings, compatCategoryToLabel } from "./Filters";
+import { FilterIcons, FilterType, SdCardParamType, TabFilterSettings, compatCategoryToLabel } from "./Filters";
 import { dateToLabel } from '../generic/DatePickers';
 import { capitalizeEachWord } from '../../lib/Utils';
 import { MicroSDeckInterop } from '../../lib/controllers/MicroSDeckInterop';
@@ -146,9 +146,19 @@ const AchievementsFilterPreview: VFC<FilterPreviewProps<'achievements'>> = ({ fi
 };
 
 const SDCardFilterPreview: VFC<FilterPreviewProps<'sd card'>> = ({ filter }) => {
-  const isInsertCard = !filter.params.card;
-  const card = (MicroSDeckInterop.isInstallOk() && window.MicroSDeck?.CardsAndGames.find(([card]) => card.uid === filter.params.card)?.[0].name) || filter.params.card;
-  return <FilterPreviewGeneric filter={filter} displayData={isInsertCard ? 'Inserted Card' : card} isInverted={filter.inverted} />;
+  let label: string;
+  switch (filter.params.card) {
+          case SdCardParamType.ANY:
+            label = "Any";
+            break;
+          case SdCardParamType.INSTALLED:
+          case undefined:
+            label = "Inserted";
+            break;
+          default:
+            label = (MicroSDeckInterop.isInstallOk() && window.MicroSDeck?.CardsAndGames.find(([card]) => card.uid === filter.params.card)?.[0].name) || filter.params.card;
+        }
+  return <FilterPreviewGeneric filter={filter} displayData={label} isInverted={filter.inverted} />;
 }
 
 /**

src/components/filters/Filters.tsx

@@ -10,13 +10,19 @@ import { FaAward, FaBan, FaCalendarDays, FaCloudArrowDown, FaCompactDisc, FaList
 import { BsClockHistory, BsRegex } from "react-icons/bs";
 import { LuCombine } from "react-icons/lu";
 import { LogController } from "../../lib/controllers/LogController";
+import { CardAndGames } from '@cebbinghaus/microsdeck';
 
 export type FilterType = 'collection' | 'installed' | 'regex' | 'friends' | 'tags' | 'whitelist' | 'blacklist' | 'merge' | 'platform' | 'deck compatibility' | 'review score' | 'time played' | 'size on disk' | 'release date' | 'purchase date' | 'last played' | 'family sharing' | 'demo' | 'streamable' | 'steam features' | 'achievements' | 'sd card';
 
 export type TimeUnit = 'minutes' | 'hours' | 'days';
 export type ThresholdCondition = 'above' | 'below';
 export type ReviewScoreType = 'metacritic' | 'steampercent';
 
+export enum SdCardParamType {
+  INSTALLED = 0,
+  ANY
+};
+
 type CollectionFilterParams = {
   id: SteamCollection['id'],
   /**
@@ -56,7 +62,7 @@ type AchievementsFilterParams = {
   thresholdType: "count" | "percent",
   condition: ThresholdCondition
 }
-type SdCardParams = { card: undefined | string }; //use undefined for currently inserted card
+type SdCardParams = { card: SdCardParamType | string | undefined }; //inserted card/ any card/ card uid (undefined value is legacy)
 
 // appOverview.rt_purchased_time
 
@@ -120,7 +126,7 @@ export const FilterDefaultParams: { [key in FilterType]: FilterParams<key> } = {
   "streamable": { isStreamable: true },
   "steam features": { features: [], mode: 'and' },
   "achievements": { threshold: 10, thresholdType: "percent", condition: 'above' },
-  "sd card": { card: undefined }
+  "sd card": { card: SdCardParamType.INSTALLED }
 }
 
 /**
@@ -372,7 +378,7 @@ export function validateFilter(filter: TabFilterSettings<FilterType>): Validatio
       const cardFilter = filter as TabFilterSettings<'sd card'>;
 
       let passed = true;
-      if (MicroSDeckInterop.isInstallOk() && window.MicroSDeck!.Enabled && cardFilter.params.card) {
+      if (MicroSDeckInterop.isInstallOk() && window.MicroSDeck!.Enabled && typeof cardFilter.params.card === 'string') {
         const cardsAndGames = window.MicroSDeck!.CardsAndGames || [];
 
         if (!cardsAndGames.find(([card]) => cardFilter.params.card === card.uid)) {
@@ -620,11 +626,20 @@ export class Filter {
       }
     },
     'sd card': (params: FilterParams<'sd card'>, appOverview: SteamAppOverview) => {
-      const card = params.card === undefined ? window.MicroSDeck?.CurrentCardAndGames : window.MicroSDeck?.CardsAndGames?.find(([card]) => card.uid == params.card);
-
+      const isOnCard = (card: CardAndGames) => !!card[1].find((game) => +game.uid == appOverview.appid);
+      let card: CardAndGames | undefined;
+      switch (params.card) {
+        case SdCardParamType.ANY:
+          return window.MicroSDeck?.CardsAndGames?.find(isOnCard);
+        case SdCardParamType.INSTALLED:
+        case undefined:
+          card = window.MicroSDeck?.CurrentCardAndGames;
+          break;
+        default:
+          card = window.MicroSDeck?.CardsAndGames?.find(([card]) => card.uid == params.card);
+      }
       if (!card) return false;
-
-      return !!card[1].find((game) => +game.uid == appOverview.appid);
+      return isOnCard(card);
     }
   };