From 6671a5c51fef98c07369f5e5be5ce498a317e868 Mon Sep 17 00:00:00 2001
From: Kurt Himebauch <136133082+xXJSONDeruloXx@users.noreply.github.com>
Date: Thu, 10 Sep 2026 16:31:58 -0400
Subject: feat: add flatpak profiles tab

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

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

diff --git a/src/components/FlatpakTab.tsx b/src/components/FlatpakTab.tsx
new file mode 100644
index 0000000..6392d59
--- /dev/null
+++ b/src/components/FlatpakTab.tsx
@@ -0,0 +1,178 @@
+import { ButtonItem, DialogButton, Field, Focusable, PanelSection, PanelSectionRow, gamepadDialogClasses } from "@decky/ui";
+import { useCallback, useMemo, useState } from "react";
+import { FaArrowLeft } from "react-icons/fa";
+import type { FlatpakApp, LsfgConfig, WorkaroundState } from "../api/lsfgApi";
+import { ConfigurationSection } from "./ConfigurationSection";
+import { FlatpakWorkaroundsSection } from "./FlatpakWorkaroundsSection";
+import { FpsMultiplierControl } from "./FpsMultiplierControl";
+import { ProfileDetails } from "./ProfileDetails";
+
+interface Props {
+  apps: FlatpakApp[];
+  runningApp: FlatpakApp | null;
+  loading: boolean;
+  busyAppId: string;
+  onRefresh: () => Promise<void>;
+  onEnable: (appId: string) => Promise<boolean>;
+  onRemove: (appId: string) => Promise<boolean>;
+  onConfigChange: (appId: string, config: LsfgConfig) => Promise<boolean>;
+  onWorkaroundChange: (appId: string, state: WorkaroundState) => Promise<boolean>;
+}
+
+export function FlatpakTab({
+  apps,
+  runningApp,
+  loading,
+  busyAppId,
+  onRefresh,
+  onEnable,
+  onRemove,
+  onConfigChange,
+  onWorkaroundChange,
+}: Props) {
+  const [selectedAppId, setSelectedAppId] = useState<string | null>(null);
+  const selected = useMemo(
+    () => selectedAppId ? apps.find((app) => app.app_id === selectedAppId) || null : null,
+    [apps, selectedAppId],
+  );
+  const close = useCallback(() => setSelectedAppId(null), []);
+
+  if (!selectedAppId) {
+    return (
+      <PanelSection title="Flatpak">
+        <PanelSectionRow>
+          <Field
+            label="Flatpak applications"
+            description="Enable LSFG-VK directly for a Flatpak. Steam shortcuts and launcher scripts are not modified."
+          />
+        </PanelSectionRow>
+        {apps.map((app) => {
+          const status = app.enabled
+            ? app.app_id === runningApp?.app_id ? "Enabled · Running" : "Enabled"
+            : app.prepared && !app.owned ? "Prepared externally" : "Available";
+          return (
+            <PanelSectionRow key={app.app_id}>
+              <Field
+                label={app.app_name}
+                description={`${app.app_id} · ${status}`}
+                onActivate={() => setSelectedAppId(app.app_id)}
+                highlightOnFocus
+              />
+            </PanelSectionRow>
+          );
+        })}
+        {apps.length === 0 && !loading && (
+          <PanelSectionRow>
+            <Field label="No Flatpak applications found" />
+          </PanelSectionRow>
+        )}
+        <PanelSectionRow>
+          <ButtonItem layout="below" disabled={loading || Boolean(busyAppId)} onClick={() => void onRefresh()}>
+            {loading ? "Refreshing..." : "Refresh Flatpaks"}
+          </ButtonItem>
+        </PanelSectionRow>
+      </PanelSection>
+    );
+  }
+
+  if (!selected) {
+    return (
+      <PanelSection title="Flatpak">
+        <PanelSectionRow>
+          <ButtonItem layout="below" onClick={close}>Back</ButtonItem>
+        </PanelSectionRow>
+        <PanelSectionRow>
+          <Field label="Flatpak application is no longer installed" />
+        </PanelSectionRow>
+      </PanelSection>
+    );
+  }
+
+  const busy = busyAppId === selected.app_id;
+  const config = selected.config;
+  const external = selected.prepared && !selected.owned;
+  const profileDescription = [
+    selected.app_id,
+    selected.runtime_branch ? `runtime ${selected.runtime_branch}` : null,
+    selected.enabled ? `profile ${selected.profile}` : null,
+    selected.app_id === runningApp?.app_id ? "Running" : null,
+  ].filter(Boolean).join(" · ");
+
+  const changeConfig = async (
+    field: keyof LsfgConfig,
+    value: boolean | number | string | string[],
+  ) => {
+    if (!config) return;
+    await onConfigChange(selected.app_id, { ...config, [field]: value });
+  };
+
+  return (
+    <Focusable onCancelButton={close}>
+      <PanelSection>
+        <PanelSectionRow>
+          <div style={{ display: "flex", alignItems: "center", width: "100%" }}>
+            <Focusable noFocusRing style={{ flex: "none" }}>
+              <DialogButton
+                aria-label="Back to Flatpaks"
+                onClick={close}
+                style={{
+                  width: "48px",
+                  minWidth: "48px",
+                  height: "24px",
+                  minHeight: "24px",
+                  padding: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <FaArrowLeft />
+              </DialogButton>
+            </Focusable>
+            <div
+              className={gamepadDialogClasses.FieldLabel}
+              style={{ flex: 1, minWidth: 0, marginLeft: "8px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+            >
+              {selected.app_name}
+            </div>
+          </div>
+        </PanelSectionRow>
+      </PanelSection>
+      {!selected.enabled && (
+        <PanelSection>
+          <PanelSectionRow>
+            <ButtonItem
+              layout="below"
+              disabled={busy || external || Boolean(selected.error)}
+              onClick={() => void onEnable(selected.app_id)}
+            >
+              {busy ? "Enabling..." : external ? "Prepared externally" : "Enable LSFG-VK"}
+            </ButtonItem>
+          </PanelSectionRow>
+          {selected.error && (
+            <PanelSectionRow>
+              <Field label="Unavailable" description={selected.error} />
+            </PanelSectionRow>
+          )}
+        </PanelSection>
+      )}
+      {selected.enabled && config && (
+        <>
+          <FpsMultiplierControl config={config} onConfigChange={changeConfig} />
+          <ConfigurationSection config={config} onConfigChange={changeConfig} />
+          <FlatpakWorkaroundsSection
+            state={selected.workarounds}
+            disabled={busy}
+            onChange={(state) => onWorkaroundChange(selected.app_id, state)}
+          />
+          <PanelSectionRow>
+            <ButtonItem layout="below" disabled={busy} onClick={() => void onRemove(selected.app_id)}>
+              {busy ? "Removing..." : "Remove Flatpak profile"}
+            </ButtonItem>
+          </PanelSectionRow>
+        </>
+      )}
+      <ProfileDetails description={profileDescription} />
+    </Focusable>
+  );
+}
-- 
cgit v1.2.3


From 904e2e6131071c3b132d3148947b613c2830b1bb Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Thu, 10 Sep 2026 20:49:05 -0400
Subject: fix; correct flatpak extension sources

---
 src/components/FlatpakTab.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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

diff --git a/src/components/FlatpakTab.tsx b/src/components/FlatpakTab.tsx
index 6392d59..c5e27f5 100644
--- a/src/components/FlatpakTab.tsx
+++ b/src/components/FlatpakTab.tsx
@@ -40,12 +40,12 @@ export function FlatpakTab({
   if (!selectedAppId) {
     return (
       <PanelSection title="Flatpak">
-        <PanelSectionRow>
+        {/* <PanelSectionRow>
           <Field
             label="Flatpak applications"
             description="Enable LSFG-VK directly for a Flatpak. Steam shortcuts and launcher scripts are not modified."
           />
-        </PanelSectionRow>
+        </PanelSectionRow> */}
         {apps.map((app) => {
           const status = app.enabled
             ? app.app_id === runningApp?.app_id ? "Enabled · Running" : "Enabled"
-- 
cgit v1.2.3


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/FlatpakTab.tsx | 79 +++++++++++++++++++++++++++++++------------
 1 file changed, 57 insertions(+), 22 deletions(-)

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

diff --git a/src/components/FlatpakTab.tsx b/src/components/FlatpakTab.tsx
index c5e27f5..31bfc2d 100644
--- a/src/components/FlatpakTab.tsx
+++ b/src/components/FlatpakTab.tsx
@@ -1,7 +1,8 @@
 import { ButtonItem, DialogButton, Field, Focusable, PanelSection, PanelSectionRow, gamepadDialogClasses } from "@decky/ui";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FaArrowLeft } from "react-icons/fa";
 import type { FlatpakApp, LsfgConfig, WorkaroundState } from "../api/lsfgApi";
+import { CollapsibleItemGroup, collapsibleItemGroupStyles } from "./CollapsibleItemGroup";
 import { ConfigurationSection } from "./ConfigurationSection";
 import { FlatpakWorkaroundsSection } from "./FlatpakWorkaroundsSection";
 import { FpsMultiplierControl } from "./FpsMultiplierControl";
@@ -19,6 +20,24 @@ interface Props {
   onWorkaroundChange: (appId: string, state: WorkaroundState) => Promise<boolean>;
 }
 
+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;
+}
+
 export function FlatpakTab({
   apps,
   runningApp,
@@ -36,31 +55,47 @@ export function FlatpakTab({
     [apps, selectedAppId],
   );
   const close = useCallback(() => setSelectedAppId(null), []);
+  const [enabledCollapsed, toggleEnabled] = usePersistentCollapsed("lsfg-flatpak-enabled-collapsed-v1");
+  const [availableCollapsed, toggleAvailable] = usePersistentCollapsed("lsfg-flatpak-available-collapsed-v1");
+  const enabledToggleRef = useRef<HTMLDivElement>(null);
+
+  const enabledApps = useMemo(
+    () => apps.filter((app) => app.enabled).sort((a, b) => a.app_name.localeCompare(b.app_name)),
+    [apps],
+  );
+  const availableApps = useMemo(
+    () => apps.filter((app) => !app.enabled).sort((a, b) => a.app_name.localeCompare(b.app_name)),
+    [apps],
+  );
+  const itemFor = (app: FlatpakApp) => ({
+    id: app.app_id,
+    label: app.app_name,
+    description: `${app.app_id} · ${app.prepared && !app.owned ? "Prepared externally" : "Available"}`,
+  });
 
   if (!selectedAppId) {
     return (
       <PanelSection title="Flatpak">
-        {/* <PanelSectionRow>
-          <Field
-            label="Flatpak applications"
-            description="Enable LSFG-VK directly for a Flatpak. Steam shortcuts and launcher scripts are not modified."
-          />
-        </PanelSectionRow> */}
-        {apps.map((app) => {
-          const status = app.enabled
-            ? app.app_id === runningApp?.app_id ? "Enabled · Running" : "Enabled"
-            : app.prepared && !app.owned ? "Prepared externally" : "Available";
-          return (
-            <PanelSectionRow key={app.app_id}>
-              <Field
-                label={app.app_name}
-                description={`${app.app_id} · ${status}`}
-                onActivate={() => setSelectedAppId(app.app_id)}
-                highlightOnFocus
-              />
-            </PanelSectionRow>
-          );
-        })}
+        <style>{collapsibleItemGroupStyles}</style>
+        <CollapsibleItemGroup
+          title="Enabled"
+          items={enabledApps.map((app) => ({
+            id: app.app_id,
+            label: app.app_name,
+            description: `${app.app_id}${app.app_id === runningApp?.app_id ? " · Running" : ""}`,
+          }))}
+          collapsed={enabledCollapsed}
+          onToggle={toggleEnabled}
+          onSelect={setSelectedAppId}
+          toggleRef={enabledToggleRef}
+        />
+        <CollapsibleItemGroup
+          title="Available"
+          items={availableApps.map(itemFor)}
+          collapsed={availableCollapsed}
+          onToggle={toggleAvailable}
+          onSelect={setSelectedAppId}
+        />
         {apps.length === 0 && !loading && (
           <PanelSectionRow>
             <Field label="No Flatpak applications found" />
-- 
cgit v1.2.3


From 9138886fd5315eb0e8c6a4a549a9d44f93ba3cde Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Fri, 11 Sep 2026 09:30:30 -0400
Subject: consistent tab collapsed toggles on flatpak

---
 src/components/FlatpakTab.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

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

diff --git a/src/components/FlatpakTab.tsx b/src/components/FlatpakTab.tsx
index 31bfc2d..b46eb28 100644
--- a/src/components/FlatpakTab.tsx
+++ b/src/components/FlatpakTab.tsx
@@ -20,6 +20,9 @@ interface Props {
   onWorkaroundChange: (appId: string, state: WorkaroundState) => Promise<boolean>;
 }
 
+const ENABLED_COLLAPSED_KEY = "lsfg-flatpak-enabled-collapsed-v2";
+const AVAILABLE_COLLAPSED_KEY = "lsfg-flatpak-available-collapsed-v2";
+
 function usePersistentCollapsed(key: string) {
   const [collapsed, setCollapsed] = useState(() => {
     try {
@@ -55,8 +58,8 @@ export function FlatpakTab({
     [apps, selectedAppId],
   );
   const close = useCallback(() => setSelectedAppId(null), []);
-  const [enabledCollapsed, toggleEnabled] = usePersistentCollapsed("lsfg-flatpak-enabled-collapsed-v1");
-  const [availableCollapsed, toggleAvailable] = usePersistentCollapsed("lsfg-flatpak-available-collapsed-v1");
+  const [enabledCollapsed, toggleEnabled] = usePersistentCollapsed(ENABLED_COLLAPSED_KEY);
+  const [availableCollapsed, toggleAvailable] = usePersistentCollapsed(AVAILABLE_COLLAPSED_KEY);
   const enabledToggleRef = useRef<HTMLDivElement>(null);
 
   const enabledApps = useMemo(
-- 
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/FlatpakTab.tsx | 24 ++----------------------
 1 file changed, 2 insertions(+), 22 deletions(-)

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

diff --git a/src/components/FlatpakTab.tsx b/src/components/FlatpakTab.tsx
index b46eb28..0b20da0 100644
--- a/src/components/FlatpakTab.tsx
+++ b/src/components/FlatpakTab.tsx
@@ -1,8 +1,8 @@
 import { ButtonItem, DialogButton, Field, Focusable, PanelSection, PanelSectionRow, gamepadDialogClasses } from "@decky/ui";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { FaArrowLeft } from "react-icons/fa";
 import type { FlatpakApp, LsfgConfig, WorkaroundState } from "../api/lsfgApi";
-import { CollapsibleItemGroup, collapsibleItemGroupStyles } from "./CollapsibleItemGroup";
+import { CollapsibleItemGroup, collapsibleItemGroupStyles, usePersistentCollapsed } from "./CollapsibleItemGroup";
 import { ConfigurationSection } from "./ConfigurationSection";
 import { FlatpakWorkaroundsSection } from "./FlatpakWorkaroundsSection";
 import { FpsMultiplierControl } from "./FpsMultiplierControl";
@@ -23,24 +23,6 @@ interface Props {
 const ENABLED_COLLAPSED_KEY = "lsfg-flatpak-enabled-collapsed-v2";
 const AVAILABLE_COLLAPSED_KEY = "lsfg-flatpak-available-collapsed-v2";
 
-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;
-}
-
 export function FlatpakTab({
   apps,
   runningApp,
@@ -60,7 +42,6 @@ export function FlatpakTab({
   const close = useCallback(() => setSelectedAppId(null), []);
   const [enabledCollapsed, toggleEnabled] = usePersistentCollapsed(ENABLED_COLLAPSED_KEY);
   const [availableCollapsed, toggleAvailable] = usePersistentCollapsed(AVAILABLE_COLLAPSED_KEY);
-  const enabledToggleRef = useRef<HTMLDivElement>(null);
 
   const enabledApps = useMemo(
     () => apps.filter((app) => app.enabled).sort((a, b) => a.app_name.localeCompare(b.app_name)),
@@ -90,7 +71,6 @@ export function FlatpakTab({
           collapsed={enabledCollapsed}
           onToggle={toggleEnabled}
           onSelect={setSelectedAppId}
-          toggleRef={enabledToggleRef}
         />
         <CollapsibleItemGroup
           title="Available"
-- 
cgit v1.2.3


From 4d14bc1086a1ba05acd01d7466749ff3cffba75f Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Fri, 11 Sep 2026 12:58:16 -0400
Subject: enable all and disable all for flatpak

---
 src/components/FlatpakTab.tsx | 53 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 52 insertions(+), 1 deletion(-)

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

diff --git a/src/components/FlatpakTab.tsx b/src/components/FlatpakTab.tsx
index 0b20da0..35721f6 100644
--- a/src/components/FlatpakTab.tsx
+++ b/src/components/FlatpakTab.tsx
@@ -1,4 +1,4 @@
-import { ButtonItem, DialogButton, Field, Focusable, PanelSection, PanelSectionRow, gamepadDialogClasses } from "@decky/ui";
+import { ButtonItem, ConfirmModal, DialogButton, Field, Focusable, PanelSection, PanelSectionRow, gamepadDialogClasses, showModal } from "@decky/ui";
 import { useCallback, useMemo, useState } from "react";
 import { FaArrowLeft } from "react-icons/fa";
 import type { FlatpakApp, LsfgConfig, WorkaroundState } from "../api/lsfgApi";
@@ -15,7 +15,9 @@ interface Props {
   busyAppId: string;
   onRefresh: () => Promise<void>;
   onEnable: (appId: string) => Promise<boolean>;
+  onEnableAll: () => Promise<void>;
   onRemove: (appId: string) => Promise<boolean>;
+  onRemoveAll: () => Promise<void>;
   onConfigChange: (appId: string, config: LsfgConfig) => Promise<boolean>;
   onWorkaroundChange: (appId: string, state: WorkaroundState) => Promise<boolean>;
 }
@@ -30,7 +32,9 @@ export function FlatpakTab({
   busyAppId,
   onRefresh,
   onEnable,
+  onEnableAll,
   onRemove,
+  onRemoveAll,
   onConfigChange,
   onWorkaroundChange,
 }: Props) {
@@ -51,6 +55,33 @@ export function FlatpakTab({
     () => apps.filter((app) => !app.enabled).sort((a, b) => a.app_name.localeCompare(b.app_name)),
     [apps],
   );
+  const enableableApps = useMemo(
+    () => availableApps.filter((app) => !(app.prepared && !app.owned) && !app.error),
+    [availableApps],
+  );
+  const confirmEnableAll = () => {
+    showModal(
+      <ConfirmModal
+        strTitle="Enable all available Flatpaks?"
+        strDescription="Create individual LSFG-VK profiles for every Flatpak app this plugin can manage. Apps prepared externally or unavailable will be skipped."
+        strOKButtonText="Enable all"
+        strCancelButtonText="Cancel"
+        onOK={() => void onEnableAll()}
+        onCancel={() => {}}
+      />,
+    );
+  };
+  const confirmRemoveAll = () => {
+    showModal(
+      <ConfirmModal
+        strTitle="Remove all Flatpak profiles?"
+        strOKButtonText="Remove all"
+        strCancelButtonText="Cancel"
+        onOK={() => void onRemoveAll()}
+        onCancel={() => {}}
+      />,
+    );
+  };
   const itemFor = (app: FlatpakApp) => ({
     id: app.app_id,
     label: app.app_name,
@@ -79,6 +110,26 @@ export function FlatpakTab({
           onToggle={toggleAvailable}
           onSelect={setSelectedAppId}
         />
+        {enableableApps.length > 0 && (
+          <PanelSectionRow>
+            <ButtonItem
+              layout="below"
+              disabled={loading || Boolean(busyAppId)}
+              onClick={confirmEnableAll}
+            >
+              Enable all available Flatpaks
+            </ButtonItem>
+          </PanelSectionRow>
+        )}
+        <PanelSectionRow>
+          <ButtonItem
+            layout="below"
+            disabled={loading || Boolean(busyAppId) || enabledApps.length === 0}
+            onClick={confirmRemoveAll}
+          >
+            Remove all profiles
+          </ButtonItem>
+        </PanelSectionRow>
         {apps.length === 0 && !loading && (
           <PanelSectionRow>
             <Field label="No Flatpak applications found" />
-- 
cgit v1.2.3