From d2bfdafa92f3d31cc5392bf8a5a1f1df5c2358ce Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Fri, 11 Sep 2026 09:05:14 -0400
Subject: flatpak correctness, ui alignment, tests

---
 src/components/CollapsibleItemGroup.tsx | 79 +++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 src/components/CollapsibleItemGroup.tsx

(limited to 'src/components/CollapsibleItemGroup.tsx')

diff --git a/src/components/CollapsibleItemGroup.tsx b/src/components/CollapsibleItemGroup.tsx
new file mode 100644
index 0000000..a66a8ba
--- /dev/null
+++ b/src/components/CollapsibleItemGroup.tsx
@@ -0,0 +1,79 @@
+import { ButtonItem, Field, PanelSectionRow } from "@decky/ui";
+import { type RefObject } from "react";
+import { RiArrowDownSFill, RiArrowUpSFill } from "react-icons/ri";
+
+export interface CollapsibleItem {
+  id: string;
+  label: string;
+  description: string;
+}
+
+export const collapsibleItemGroupStyles = `
+  .LSFG_GameGroupCollapseButton_Container > div > div > div > button,
+  .LSFG_GameGroupCollapseButton_Container > div > div > div > div > button {
+    height: 24px !important;
+    min-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;
+  }
+`;
+
+interface Props {
+  title: string;
+  items: CollapsibleItem[];
+  collapsed: boolean;
+  onToggle: () => void;
+  onSelect: (id: string) => void;
+  toggleRef?: RefObject<HTMLDivElement>;
+}
+
+export function CollapsibleItemGroup({
+  title,
+  items,
+  collapsed,
+  onToggle,
+  onSelect,
+  toggleRef,
+}: Props) {
+  if (items.length === 0) return null;
+
+  return (
+    <>
+      <PanelSectionRow>
+        <Field label={`${title} (${items.length})`} bottomSeparator="none" />
+      </PanelSectionRow>
+      <PanelSectionRow>
+        <div
+          ref={toggleRef}
+          className="LSFG_GameGroupCollapseButton_Container"
+          style={{ marginTop: "-2px", marginBottom: "4px" }}
+        >
+          <ButtonItem
+            layout="below"
+            bottomSeparator={collapsed ? "standard" : "none"}
+            onClick={onToggle}
+          >
+            {collapsed ? <RiArrowDownSFill /> : <RiArrowUpSFill />}
+          </ButtonItem>
+        </div>
+      </PanelSectionRow>
+      {!collapsed && items.map((item) => (
+        <PanelSectionRow key={item.id}>
+          <Field
+            label={item.label}
+            description={item.description}
+            onActivate={() => onSelect(item.id)}
+            highlightOnFocus
+          />
+        </PanelSectionRow>
+      ))}
+    </>
+  );
+}
-- 
cgit v1.2.3


From a8388009b2ba141caafe7f2e35f7029d93e7811f Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Fri, 11 Sep 2026 09:38:35 -0400
Subject: handle edge cases on flatpaks and ordering

---
 src/components/CollapsibleItemGroup.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

(limited to 'src/components/CollapsibleItemGroup.tsx')

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[];
-- 
cgit v1.2.3


From 0be6ccdd1a8ecfe386281451cf4c49d052f6dda4 Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Fri, 11 Sep 2026 10:13:22 -0400
Subject: move inline styping

---
 src/components/CollapsibleItemGroup.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'src/components/CollapsibleItemGroup.tsx')

diff --git a/src/components/CollapsibleItemGroup.tsx b/src/components/CollapsibleItemGroup.tsx
index 037b34f..29fe945 100644
--- a/src/components/CollapsibleItemGroup.tsx
+++ b/src/components/CollapsibleItemGroup.tsx
@@ -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;
@@ -71,7 +76,6 @@ export function CollapsibleItemGroup({
         <div
           ref={toggleRef}
           className="LSFG_GameGroupCollapseButton_Container"
-          style={{ marginTop: "-2px", marginBottom: "4px" }}
         >
           <ButtonItem
             layout="below"
-- 
cgit v1.2.3