1 files changed, 24 insertions, 2 deletions
diff --git a/src/components/CollapsibleItemGroup.tsx b/src/components/CollapsibleItemGroup.tsx
index a66a8ba..29fe945 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 {
@@ -9,6 +9,11 @@ export interface CollapsibleItem {
 }
 
 export const collapsibleItemGroupStyles = `
+  .LSFG_GameGroupCollapseButton_Container {
+    margin-top: -2px;
+    margin-bottom: 4px;
+  }
+
   .LSFG_GameGroupCollapseButton_Container > div > div > div > button,
   .LSFG_GameGroupCollapseButton_Container > div > div > div > div > button {
     height: 24px !important;
@@ -25,6 +30,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[];
@@ -53,7 +76,6 @@ export function CollapsibleItemGroup({
         <div
           ref={toggleRef}
           className="LSFG_GameGroupCollapseButton_Container"
-          style={{ marginTop: "-2px", marginBottom: "4px" }}
         >
           <ButtonItem
             layout="below"