1 files changed, 12 insertions, 73 deletions

diff --git a/src/components/GameConfigurationSelector.tsx b/src/components/GameConfigurationSelector.tsx
index 1f0bc73..ee87423 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, type RefObject } from "react";
-import { RiArrowDownSFill, RiArrowUpSFill } from "react-icons/ri";
+import { useEffect, useRef, useState } from "react";
 import { GameTarget } from "../hooks/useGameConfiguration";
+import { CollapsibleItemGroup, collapsibleItemGroupStyles } from "./CollapsibleItemGroup";
 
 interface Props {
   targets: GameTarget[];
@@ -38,57 +38,6 @@ function targetDescription(game: GameTarget): string {
   return game.nonSteam ? "Non-Steam" : "Steam";
 }
 
-function GameGroup({
-  title,
-  games,
-  collapsed,
-  onToggle,
-  onSelect,
-  toggleRef,
-}: {
-  title: string;
-  games: GameTarget[];
-  collapsed: boolean;
-  onToggle: () => void;
-  onSelect: (appid: string) => void;
-  toggleRef?: RefObject<HTMLDivElement>;
-}) {
-  if (games.length === 0) return null;
-
-  return (
-    <>
-      <PanelSectionRow>
-        <Field label={title + " (" + games.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 && games.map((game) => (
-        <PanelSectionRow key={game.appid}>
-          <Field
-            label={game.name}
-            description={targetDescription(game)}
-            onActivate={() => onSelect(game.appid)}
-            highlightOnFocus
-          />
-        </PanelSectionRow>
-      ))}
-    </>
-  );
-}
-
 export function GameConfigurationSelector({
   targets,
   runningGame,
@@ -105,6 +54,11 @@ export function GameConfigurationSelector({
   });
   const enabledGames = sortGames(targets.filter((game) => game.configured));
   const availableGames = sortGames(targets.filter((game) => !game.configured));
+  const toItem = (game: GameTarget) => ({
+    id: game.appid,
+    label: game.name,
+    description: targetDescription(game),
+  });
   const [enabledCollapsed, toggleEnabled] = usePersistentCollapsed(ENABLED_COLLAPSED_KEY);
   const [availableCollapsed, toggleAvailable] = usePersistentCollapsed(AVAILABLE_COLLAPSED_KEY);
   const enabledToggleRef = useRef<HTMLDivElement>(null);
@@ -146,39 +100,24 @@ export function GameConfigurationSelector({
   return (
     <>
       <style>
-        {`
-          .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;
-          }
-        `}
+        {collapsibleItemGroupStyles}
       </style>
       {targets.length === 0 && (
         <PanelSectionRow>
           <Field label="No installed games" description="Steam has not reported any eligible games" />
         </PanelSectionRow>
       )}
-      <GameGroup
+      <CollapsibleItemGroup
         title="Enabled"
-        games={enabledGames}
+        items={enabledGames.map(toItem)}
         collapsed={enabledCollapsed}
         onToggle={toggleEnabled}
         onSelect={onSelect}
         toggleRef={enabledToggleRef}
       />
-      <GameGroup
+      <CollapsibleItemGroup
         title="Available"
-        games={availableGames}
+        items={availableGames.map(toItem)}
         collapsed={availableCollapsed}
         onToggle={toggleAvailable}
         onSelect={onSelect}