refactor: unify flatpak targets with steam profiles

1 files changed, 22 insertions, 79 deletions

diff --git a/src/components/GameConfigurationSelector.tsx b/src/components/GameConfigurationSelector.tsx
index df0c3e9..2a92c67 100644
--- a/src/components/GameConfigurationSelector.tsx
+++ b/src/components/GameConfigurationSelector.tsx
@@ -7,14 +7,13 @@ interface Props {
   targets: GameTarget[];
   runningGame: GameTarget | null;
   onSelect: (appid: string) => void;
-  onEnableAll: () => Promise<void>;
   onResetAll: () => Promise<void>;
   focusConfiguredToggle?: boolean;
   onConfiguredToggleFocused?: () => void;
 }
 
-const CONFIGURED_COLLAPSED_KEY = "lsfg-configured-games-collapsed-v3";
-const AVAILABLE_COLLAPSED_KEY = "lsfg-available-games-collapsed-v2";
+const ENABLED_COLLAPSED_KEY = "lsfg-enabled-games-collapsed-v4";
+const AVAILABLE_COLLAPSED_KEY = "lsfg-available-games-collapsed-v3";
 
 function usePersistentCollapsed(key: string) {
   const [collapsed, setCollapsed] = useState(() => {
@@ -36,6 +35,11 @@ function usePersistentCollapsed(key: string) {
   return [collapsed, () => setCollapsed((value) => !value)] as const;
 }
 
+function targetDescription(game: GameTarget): string {
+  if (game.transport.kind === "flatpak") return "Non-Steam · Flatpak";
+  return game.nonSteam ? "Non-Steam" : "Steam";
+}
+
 function GameGroup({
   title,
   games,
@@ -56,7 +60,7 @@ function GameGroup({
   return (
     <>
       <PanelSectionRow>
-        <Field label={`${title} (${games.length})`} bottomSeparator="none" />
+        <Field label={title + " (" + games.length + ")"} bottomSeparator="none" />
       </PanelSectionRow>
       <PanelSectionRow>
         <div
@@ -69,11 +73,7 @@ function GameGroup({
             bottomSeparator={collapsed ? "standard" : "none"}
             onClick={onToggle}
           >
-            {collapsed ? (
-              <RiArrowDownSFill />
-            ) : (
-              <RiArrowUpSFill />
-            )}
+            {collapsed ? <RiArrowDownSFill /> : <RiArrowUpSFill />}
           </ButtonItem>
         </div>
       </PanelSectionRow>
@@ -81,7 +81,7 @@ function GameGroup({
         <PanelSectionRow key={game.appid}>
           <Field
             label={game.name}
-            description={game.nonSteam ? "Non-Steam" : "Steam"}
+            description={targetDescription(game)}
             onActivate={() => onSelect(game.appid)}
             highlightOnFocus
           />
@@ -95,7 +95,6 @@ export function GameConfigurationSelector({
   targets,
   runningGame,
   onSelect,
-  onEnableAll,
   onResetAll,
   focusConfiguredToggle = false,
   onConfiguredToggleFocused,
@@ -105,26 +104,20 @@ export function GameConfigurationSelector({
     if (b.appid === runningGame?.appid) return 1;
     return a.name.localeCompare(b.name);
   });
-  const configuredGames = sortGames(targets.filter((game) => game.configured));
+  const enabledGames = sortGames(targets.filter((game) => game.configured));
   const availableGames = sortGames(targets.filter((game) => !game.configured));
-  const configuredSteamGames = configuredGames.filter((game) => !game.nonSteam);
-  const configuredNonSteamGames = configuredGames.filter((game) => game.nonSteam);
-  const availableSteamGames = availableGames.filter((game) => !game.nonSteam);
-  const availableNonSteamGames = availableGames.filter((game) => game.nonSteam);
-  const [configuredCollapsed, toggleConfigured] = usePersistentCollapsed(CONFIGURED_COLLAPSED_KEY);
-  const [configuredNonSteamCollapsed, toggleConfiguredNonSteam] = usePersistentCollapsed(`${CONFIGURED_COLLAPSED_KEY}-non-steam`);
+  const [enabledCollapsed, toggleEnabled] = usePersistentCollapsed(ENABLED_COLLAPSED_KEY);
   const [availableCollapsed, toggleAvailable] = usePersistentCollapsed(AVAILABLE_COLLAPSED_KEY);
-  const [availableNonSteamCollapsed, toggleAvailableNonSteam] = usePersistentCollapsed(`${AVAILABLE_COLLAPSED_KEY}-non-steam`);
-  const configuredToggleRef = useRef<HTMLDivElement>(null);
+  const enabledToggleRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!focusConfiguredToggle) return;
     const frame = requestAnimationFrame(() => {
-      configuredToggleRef.current?.querySelector<HTMLElement>('[role="button"], button')?.focus();
+      enabledToggleRef.current?.querySelector<HTMLElement>('[role="button"], button')?.focus();
       onConfiguredToggleFocused?.();
     });
     return () => cancelAnimationFrame(frame);
-  }, [configuredGames.length, focusConfiguredToggle, onConfiguredToggleFocused]);
+  }, [enabledGames.length, focusConfiguredToggle, onConfiguredToggleFocused]);
 
   const confirmResetAll = () => {
     showModal(
@@ -137,79 +130,29 @@ export function GameConfigurationSelector({
       />,
     );
   };
-  const confirmEnableAll = () => {
-    showModal(
-      <ConfirmModal
-        strTitle="Enable all available games?"
-        strDescription="Create individual LSFG-VK profiles for every available game using the plugin defaults."
-        strOKButtonText="Enable all"
-        strCancelButtonText="Cancel"
-        onOK={() => void onEnableAll()}
-        onCancel={() => {}}
-      />,
-    );
-  };
 
   return (
     <>
-      <style>
-        {`
-          .LSFG_GameGroupCollapseButton_Container > div > div > div > button,
-          .LSFG_GameGroupCollapseButton_Container > div > div > div > div > button {
-            height: 24px !important;
-            padding: 0 !important;
-            display: flex !important;
-            align-items: center !important;
-            justify-content: center !important;
-          }
-
-          .LSFG_GameGroupCollapseButton_Container svg {
-            display: block;
-            margin: 0;
-          }
-        `}
-      </style>
       {targets.length === 0 && (
         <PanelSectionRow>
           <Field label="No installed games" description="Steam has not reported any eligible games" />
         </PanelSectionRow>
       )}
       <GameGroup
-        title="LSFG-VK Enabled"
-        games={configuredSteamGames}
-        collapsed={configuredCollapsed}
-        onToggle={toggleConfigured}
+        title="Enabled"
+        games={enabledGames}
+        collapsed={enabledCollapsed}
+        onToggle={toggleEnabled}
         onSelect={onSelect}
-        toggleRef={configuredToggleRef}
+        toggleRef={enabledToggleRef}
       />
       <GameGroup
-        title="LSFG-VK Enabled (Non-Steam)"
-        games={configuredNonSteamGames}
-        collapsed={configuredNonSteamCollapsed}
-        onToggle={toggleConfiguredNonSteam}
-        onSelect={onSelect}
-      />
-      <GameGroup
-        title="Available games"
-        games={availableSteamGames}
+        title="Available"
+        games={availableGames}
         collapsed={availableCollapsed}
         onToggle={toggleAvailable}
         onSelect={onSelect}
       />
-      <GameGroup
-        title="Available games (Non-Steam)"
-        games={availableNonSteamGames}
-        collapsed={availableNonSteamCollapsed}
-        onToggle={toggleAvailableNonSteam}
-        onSelect={onSelect}
-      />
-      {availableGames.length > 0 && (
-        <PanelSectionRow>
-          <ButtonItem layout="below" onClick={confirmEnableAll}>
-            Enable all available games
-          </ButtonItem>
-        </PanelSectionRow>
-      )}
       <PanelSectionRow>
         <ButtonItem
           layout="below"