1 files changed, 85 insertions, 8 deletions
diff --git a/src/components/NowPlayingTab.tsx b/src/components/NowPlayingTab.tsx
index 188c56a..5bce5c4 100644
--- a/src/components/NowPlayingTab.tsx
+++ b/src/components/NowPlayingTab.tsx
@@ -1,4 +1,5 @@
-import { Field, Focusable, PanelSection, PanelSectionRow } from "@decky/ui";
+import { ButtonItem, Field, Focusable, PanelSection, PanelSectionRow } from "@decky/ui";
+import { useState } from "react";
 import { ConfigurationData } from "../config/configSchema";
 import { GameTarget } from "../hooks/useGameConfiguration";
 import { GameConfigurationControls } from "./GameConfigurationControls";
@@ -6,20 +7,96 @@ import { GameConfigurationControls } from "./GameConfigurationControls";
 interface Props {
   game: GameTarget;
   config: ConfigurationData;
-  onConfigChange: (fieldName: keyof ConfigurationData, value: boolean | number | string | string[]) => Promise<void>;
+  onConfigChange: (
+    fieldName: keyof ConfigurationData,
+    value: boolean | number | string | string[],
+  ) => Promise<void>;
+  onEnable: (appid: string) => Promise<boolean>;
+  onRepair: (appid: string) => Promise<boolean>;
 }
 
-export function NowPlayingTab({ game, config, onConfigChange }: Props) {
+function targetDescription(game: GameTarget): string {
+  if (game.transport.kind === "flatpak") return "Non-Steam · Flatpak";
+  return game.nonSteam ? "Non-Steam" : "Steam";
+}
+
+export function NowPlayingTab({
+  game,
+  config,
+  onConfigChange,
+  onEnable,
+  onRepair,
+}: Props) {
+  const [busy, setBusy] = useState(false);
+  const supportNeedsRepair =
+    game.configured &&
+    game.transport.kind === "flatpak" &&
+    game.flatpakSupport?.support_status !== "ready";
+
+  const handleEnable = async () => {
+    if (busy) return;
+    setBusy(true);
+    try {
+      await onEnable(game.appid);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleRepair = async () => {
+    if (busy) return;
+    setBusy(true);
+    try {
+      await onRepair(game.appid);
+    } finally {
+      setBusy(false);
+    }
+  };
+
   return (
     <Focusable>
-      <PanelSection>
+      <PanelSection title="Now Playing">
         <PanelSectionRow>
-          <Field
-            label={game.name}
-          />
+          <Field label={game.name} description={targetDescription(game)} />
         </PanelSectionRow>
       </PanelSection>
-      <GameConfigurationControls config={config} onConfigChange={onConfigChange} showWorkarounds={false} />
+      {!game.configured && (
+        <PanelSection>
+          <PanelSectionRow>
+            <Field
+              label="LSFG-VK is available"
+              description="This target is not enabled yet. Create its AppID profile before the next launch."
+            />
+          </PanelSectionRow>
+          <PanelSectionRow>
+            <ButtonItem layout="below" disabled={busy} onClick={() => void handleEnable()}>
+              {busy ? "Enabling..." : "Enable LSFG-VK"}
+            </ButtonItem>
+          </PanelSectionRow>
+        </PanelSection>
+      )}
+      {game.configured && supportNeedsRepair && (
+        <PanelSection>
+          <PanelSectionRow>
+            <Field
+              label="Flatpak support needs repair"
+              description={game.flatpakSupport?.error || "The target runtime extension is not ready."}
+            />
+          </PanelSectionRow>
+          <PanelSectionRow>
+            <ButtonItem layout="below" disabled={busy} onClick={() => void handleRepair()}>
+              {busy ? "Repairing..." : "Repair Flatpak support"}
+            </ButtonItem>
+          </PanelSectionRow>
+        </PanelSection>
+      )}
+      {game.configured && (
+        <GameConfigurationControls
+          config={config}
+          onConfigChange={onConfigChange}
+          showWorkarounds={false}
+        />
+      )}
     </Focusable>
   );
 }