1 files changed, 6 insertions, 23 deletions

diff --git a/src/components/FlatpakTab.tsx b/src/components/FlatpakTab.tsx
index 31bfc2d..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";
@@ -20,23 +20,8 @@ interface Props {
   onWorkaroundChange: (appId: string, state: WorkaroundState) => Promise<boolean>;
 }
 
-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;
-}
+const ENABLED_COLLAPSED_KEY = "lsfg-flatpak-enabled-collapsed-v2";
+const AVAILABLE_COLLAPSED_KEY = "lsfg-flatpak-available-collapsed-v2";
 
 export function FlatpakTab({
   apps,
@@ -55,9 +40,8 @@ export function FlatpakTab({
     [apps, selectedAppId],
   );
   const close = useCallback(() => setSelectedAppId(null), []);
-  const [enabledCollapsed, toggleEnabled] = usePersistentCollapsed("lsfg-flatpak-enabled-collapsed-v1");
-  const [availableCollapsed, toggleAvailable] = usePersistentCollapsed("lsfg-flatpak-available-collapsed-v1");
-  const enabledToggleRef = useRef<HTMLDivElement>(null);
+  const [enabledCollapsed, toggleEnabled] = usePersistentCollapsed(ENABLED_COLLAPSED_KEY);
+  const [availableCollapsed, toggleAvailable] = usePersistentCollapsed(AVAILABLE_COLLAPSED_KEY);
 
   const enabledApps = useMemo(
     () => apps.filter((app) => app.enabled).sort((a, b) => a.app_name.localeCompare(b.app_name)),
@@ -87,7 +71,6 @@ export function FlatpakTab({
           collapsed={enabledCollapsed}
           onToggle={toggleEnabled}
           onSelect={setSelectedAppId}
-          toggleRef={enabledToggleRef}
         />
         <CollapsibleItemGroup
           title="Available"