feat: make ui suck less, frfr

1 files changed, 48 insertions, 19 deletions

diff --git a/src/components/GameConfigurationSelector.tsx b/src/components/GameConfigurationSelector.tsx
index a231477..fcdd0aa 100644
--- a/src/components/GameConfigurationSelector.tsx
+++ b/src/components/GameConfigurationSelector.tsx
@@ -1,29 +1,58 @@
-import { Dropdown, DropdownOption, PanelSectionRow, ButtonItem } from "@decky/ui";
+import { ButtonItem, Field, PanelSectionRow } from "@decky/ui";
 import { GameTarget } from "../hooks/useGameConfiguration";
 
 interface Props {
   targets: GameTarget[];
   runningGame: GameTarget | null;
-  selectedAppId: string;
   onSelect: (appid: string) => void;
-  onReset: () => Promise<void>;
   onResetAll: () => Promise<void>;
 }
 
-export function GameConfigurationSelector({ targets, runningGame, selectedAppId, onSelect, onReset, onResetAll }: Props) {
-  const options: DropdownOption[] = [
-    { data: "", label: runningGame ? `Default (editing template) · ${runningGame.name}` : "Default" },
-    ...targets.map((target) => ({ data: target.appid, label: `${target.nonSteam ? "Non-Steam · " : ""}${target.name} · ${target.appid}` })),
-  ];
-  return <>
-    <PanelSectionRow>
-      <Dropdown rgOptions={options} selectedOption={selectedAppId} onChange={(option) => onSelect(String(option.data))} />
-    </PanelSectionRow>
-    <PanelSectionRow>
-      <ButtonItem layout="below" onClick={() => void onReset()} disabled={!selectedAppId}>Reset selected game</ButtonItem>
-    </PanelSectionRow>
-    <PanelSectionRow>
-      <ButtonItem layout="below" onClick={() => void onResetAll()} disabled={!targets.some((target) => target.configured)}>Reset all game profiles</ButtonItem>
-    </PanelSectionRow>
-  </>;
+const profileDescription = (target: GameTarget, running: boolean, active: boolean) => [
+  running ? "Now playing" : "",
+  target.nonSteam ? "Non-Steam" : "Steam",
+  target.configured
+    ? active ? "Profile active" : "Profile saved · applies next launch"
+    : "Not configured · changes apply next launch",
+].filter(Boolean).join(" · ");
+
+export function GameConfigurationSelector({ targets, runningGame, onSelect, onResetAll }: Props) {
+  const games = [...targets].sort((a, b) => {
+    if (a.appid === runningGame?.appid) return -1;
+    if (b.appid === runningGame?.appid) return 1;
+    return a.name.localeCompare(b.name);
+  });
+
+  return (
+    <>
+      {games.length === 0 && (
+        <PanelSectionRow>
+          <Field label="No installed games" description="Steam has not reported any eligible games" />
+        </PanelSectionRow>
+      )}
+      {games.map((game) => (
+        <PanelSectionRow key={game.appid}>
+          <Field
+            label={game.name}
+            description={profileDescription(
+              game,
+              game.appid === runningGame?.appid,
+              game.appid === runningGame?.appid ? runningGame.configured : game.configured,
+            )}
+            onActivate={() => onSelect(game.appid)}
+            highlightOnFocus
+          />
+        </PanelSectionRow>
+      ))}
+      <PanelSectionRow>
+        <ButtonItem
+          layout="below"
+          onClick={() => void onResetAll()}
+          disabled={!targets.some((target) => target.configured)}
+        >
+          Remove all profiles
+        </ButtonItem>
+      </PanelSectionRow>
+    </>
+  );
 }