handle edge cases on flatpaks and ordering

4 files changed, 24 insertions, 44 deletions

diff --git a/src/components/CollapsibleItemGroup.tsx b/src/components/CollapsibleItemGroup.tsx
index a66a8ba..037b34f 100644
--- a/src/components/CollapsibleItemGroup.tsx
+++ b/src/components/CollapsibleItemGroup.tsx
@@ -1,5 +1,5 @@
 import { ButtonItem, Field, PanelSectionRow } from "@decky/ui";
-import { type RefObject } from "react";
+import { useEffect, useState, type RefObject } from "react";
 import { RiArrowDownSFill, RiArrowUpSFill } from "react-icons/ri";
 
 export interface CollapsibleItem {
@@ -25,6 +25,24 @@ export const collapsibleItemGroupStyles = `
   }
 `;
 
+export function usePersistentCollapsed(key: string) {
+  const [collapsed, setCollapsed] = useState(() => {
+    try {
+      return localStorage.getItem(key) !== "false";
+    } catch {
+      return true;
+    }
+  });
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(key, String(collapsed));
+    } catch {}
+  }, [collapsed, key]);
+
+  return [collapsed, () => setCollapsed((value) => !value)] as const;
+}
+
 interface Props {
   title: string;
   items: CollapsibleItem[];
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index dc8c54f..422eec8 100644
--- a/src/components/Content.tsx
+++ b/src/components/Content.tsx
@@ -86,7 +86,7 @@ export function Content() {
   const hasNowPlaying = Boolean(nowPlayingTarget);
   const runningWorkload = nowPlayingTarget
     ? nowPlayingTarget.kind === "flatpak"
-      ? `flatpak:${nowPlayingTarget.app.app_id}`
+      ? `flatpak:${nowPlayingTarget.app.app_id}:${nowPlayingTarget.launcher?.appid ?? ""}`
       : `steam:${nowPlayingTarget.game.appid}`
     : null;
 
diff --git a/src/components/FlatpakTab.tsx b/src/components/FlatpakTab.tsx
index b46eb28..0b20da0 100644
--- a/src/components/FlatpakTab.tsx
+++ b/src/components/FlatpakTab.tsx
@@ -1,8 +1,8 @@
 import { ButtonItem, DialogButton, Field, Focusable, PanelSection, PanelSectionRow, gamepadDialogClasses } from "@decky/ui";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { FaArrowLeft } from "react-icons/fa";
 import type { FlatpakApp, LsfgConfig, WorkaroundState } from "../api/lsfgApi";
-import { CollapsibleItemGroup, collapsibleItemGroupStyles } from "./CollapsibleItemGroup";
+import { CollapsibleItemGroup, collapsibleItemGroupStyles, usePersistentCollapsed } from "./CollapsibleItemGroup";
 import { ConfigurationSection } from "./ConfigurationSection";
 import { FlatpakWorkaroundsSection } from "./FlatpakWorkaroundsSection";
 import { FpsMultiplierControl } from "./FpsMultiplierControl";
@@ -23,24 +23,6 @@ interface Props {
 const ENABLED_COLLAPSED_KEY = "lsfg-flatpak-enabled-collapsed-v2";
 const AVAILABLE_COLLAPSED_KEY = "lsfg-flatpak-available-collapsed-v2";
 
-function usePersistentCollapsed(key: string) {
-  const [collapsed, setCollapsed] = useState(() => {
-    try {
-      return localStorage.getItem(key) !== "false";
-    } catch {
-      return true;
-    }
-  });
-
-  useEffect(() => {
-    try {
-      localStorage.setItem(key, String(collapsed));
-    } catch {}
-  }, [collapsed, key]);
-
-  return [collapsed, () => setCollapsed((value) => !value)] as const;
-}
-
 export function FlatpakTab({
   apps,
   runningApp,
@@ -60,7 +42,6 @@ export function FlatpakTab({
   const close = useCallback(() => setSelectedAppId(null), []);
   const [enabledCollapsed, toggleEnabled] = usePersistentCollapsed(ENABLED_COLLAPSED_KEY);
   const [availableCollapsed, toggleAvailable] = usePersistentCollapsed(AVAILABLE_COLLAPSED_KEY);
-  const enabledToggleRef = useRef<HTMLDivElement>(null);
 
   const enabledApps = useMemo(
     () => apps.filter((app) => app.enabled).sort((a, b) => a.app_name.localeCompare(b.app_name)),
@@ -90,7 +71,6 @@ export function FlatpakTab({
           collapsed={enabledCollapsed}
           onToggle={toggleEnabled}
           onSelect={setSelectedAppId}
-          toggleRef={enabledToggleRef}
         />
         <CollapsibleItemGroup
           title="Available"
diff --git a/src/components/GameConfigurationSelector.tsx b/src/components/GameConfigurationSelector.tsx
index ee87423..2c683ae 100644
--- a/src/components/GameConfigurationSelector.tsx
+++ b/src/components/GameConfigurationSelector.tsx
@@ -1,7 +1,7 @@
 import { ButtonItem, ConfirmModal, Field, PanelSectionRow, showModal } from "@decky/ui";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { GameTarget } from "../hooks/useGameConfiguration";
-import { CollapsibleItemGroup, collapsibleItemGroupStyles } from "./CollapsibleItemGroup";
+import { CollapsibleItemGroup, collapsibleItemGroupStyles, usePersistentCollapsed } from "./CollapsibleItemGroup";
 
 interface Props {
   targets: GameTarget[];
@@ -16,24 +16,6 @@ interface Props {
 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(() => {
-    try {
-      return localStorage.getItem(key) !== "false";
-    } catch {
-      return true;
-    }
-  });
-
-  useEffect(() => {
-    try {
-      localStorage.setItem(key, String(collapsed));
-    } catch {}
-  }, [collapsed, key]);
-
-  return [collapsed, () => setCollapsed((value) => !value)] as const;
-}
-
 function targetDescription(game: GameTarget): string {
   return game.nonSteam ? "Non-Steam" : "Steam";
 }