1 files changed, 39 insertions, 0 deletions
diff --git a/src/components/FlatpakNowPlayingTab.tsx b/src/components/FlatpakNowPlayingTab.tsx
new file mode 100644
index 0000000..9e5a0db
--- /dev/null
+++ b/src/components/FlatpakNowPlayingTab.tsx
@@ -0,0 +1,39 @@
+import { Field, Focusable, PanelSection, PanelSectionRow } from "@decky/ui";
+import type { FlatpakApp, LsfgConfig, WorkaroundState } from "../api/lsfgApi";
+import { ConfigurationSection } from "./ConfigurationSection";
+import { FlatpakWorkaroundsSection } from "./FlatpakWorkaroundsSection";
+import { FpsMultiplierControl } from "./FpsMultiplierControl";
+
+interface Props {
+  app: FlatpakApp;
+  busy: boolean;
+  onConfigChange: (appId: string, config: LsfgConfig) => Promise<boolean>;
+  onWorkaroundChange: (appId: string, state: WorkaroundState) => Promise<boolean>;
+}
+
+export function FlatpakNowPlayingTab({ app, busy, onConfigChange, onWorkaroundChange }: Props) {
+  if (!app.config) return null;
+  const changeConfig = async (
+    field: keyof LsfgConfig,
+    value: boolean | number | string | string[],
+  ) => {
+    await onConfigChange(app.app_id, { ...app.config!, [field]: value });
+  };
+
+  return (
+    <Focusable>
+      <PanelSection title="Now Playing">
+        <PanelSectionRow>
+          <Field label={app.app_name} description={`Flatpak · ${app.app_id}`} />
+        </PanelSectionRow>
+      </PanelSection>
+      <FpsMultiplierControl config={app.config} onConfigChange={changeConfig} />
+      <ConfigurationSection config={app.config} onConfigChange={changeConfig} />
+      <FlatpakWorkaroundsSection
+        state={app.workarounds}
+        disabled={busy}
+        onChange={(state) => onWorkaroundChange(app.app_id, state)}
+      />
+    </Focusable>
+  );
+}