From 170d183fdafc1ec1a686c006fd6a2431c1f30c71 Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Sun, 6 Sep 2026 19:06:52 -0400
Subject: refactor: align secondary tabs with Decky UI

---
 src/components/ConfigFileTab.tsx      | 42 ++++++++++++------------
 src/components/FlatpaksTab.tsx        | 37 +++++++++------------
 src/components/InstallationButton.tsx | 43 +++++-------------------
 src/components/SetupTab.tsx           |  1 -
 src/components/StatusDisplay.tsx      | 61 +++++++----------------------------
 5 files changed, 57 insertions(+), 127 deletions(-)

(limited to 'src')

diff --git a/src/components/ConfigFileTab.tsx b/src/components/ConfigFileTab.tsx
index 60c5c7e..e3cc09d 100644
--- a/src/components/ConfigFileTab.tsx
+++ b/src/components/ConfigFileTab.tsx
@@ -1,19 +1,11 @@
 import { useEffect, useState } from "react";
-import { Field, Focusable, PanelSection, PanelSectionRow, Spinner } from "@decky/ui";
+import { Field, PanelSection, PanelSectionRow, Spinner } from "@decky/ui";
 import { getConfigFileContent, FileContentResult } from "../api/lsfgApi";
 import t from "../i18n/i18n";
 
 export function ConfigFileTab() {
   const [result, setResult] = useState<FileContentResult | null>(null);
 
-  const copy = async (content: string) => {
-    try {
-      await navigator.clipboard.writeText(content);
-    } catch {
-      // Clipboard access is unavailable in some Deck UI contexts.
-    }
-  };
-
   useEffect(() => {
     getConfigFileContent().then(setResult).catch((error) => {
       setResult({ success: false, error: String(error) });
@@ -23,24 +15,32 @@ export function ConfigFileTab() {
   if (!result) {
     return (
       <PanelSection title={t("NERD_CONFIG_FILE", "Configuration File")}>
-        <PanelSectionRow><Spinner /></PanelSectionRow>
+        <PanelSectionRow>
+          <Spinner />
+        </PanelSectionRow>
       </PanelSection>
     );
   }
 
   return (
     <PanelSection title={t("NERD_CONFIG_FILE", "Configuration File")}>
-      <PanelSectionRow>
-        <Field label={result.path || t("NERD_CONFIG_FILE", "Configuration File")} description={result.error || "Tap the file to copy it."}>
-          {result.success && result.content && (
-            <Focusable onActivate={() => void copy(result.content || "")}>
-              <pre style={{ maxHeight: "420px", overflow: "auto", whiteSpace: "pre-wrap", fontSize: "12px" }}>
-                {result.content}
-              </pre>
-            </Focusable>
-          )}
-        </Field>
-      </PanelSectionRow>
+      {result.error && (
+        <PanelSectionRow>
+          <Field label="Error" description={result.error} />
+        </PanelSectionRow>
+      )}
+      {result.success && result.content && (
+        <>
+          <PanelSectionRow>
+            <Field label="Config file" description={result.path} />
+          </PanelSectionRow>
+          <PanelSectionRow>
+            <pre style={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>
+              {result.content}
+            </pre>
+          </PanelSectionRow>
+        </>
+      )}
     </PanelSection>
   );
 }
diff --git a/src/components/FlatpaksTab.tsx b/src/components/FlatpaksTab.tsx
index dc73858..b4d5e4d 100644
--- a/src/components/FlatpaksTab.tsx
+++ b/src/components/FlatpaksTab.tsx
@@ -1,15 +1,12 @@
 import { useEffect, useState } from "react";
 import {
-  ButtonItem,
   ConfirmModal,
   Field,
   PanelSection,
   PanelSectionRow,
-  Spinner,
-  Toggle,
+  ToggleField,
   showModal,
 } from "@decky/ui";
-import { FaCheck, FaCog, FaDownload, FaTimes, FaTrash } from "react-icons/fa";
 import {
   checkFlatpakExtensionStatus,
   FlatpakApp,
@@ -40,15 +37,13 @@ interface RuntimeRowProps {
 function RuntimeRow({ version, installed, busy, onAction }: RuntimeRowProps) {
   return (
     <PanelSectionRow>
-      <Field
+      <ToggleField
         label={`Runtime ${version}`}
-        description={installed ? t("FLATPAK_INSTALLED", "Installed") : t("FLATPAK_NOT_INSTALLED", "Not installed")}
-        icon={installed ? <FaCheck style={{ color: "green" }} /> : <FaTimes style={{ color: "red" }} />}
-      >
-        <ButtonItem layout="below" onClick={onAction} disabled={busy}>
-          {busy ? <Spinner /> : installed ? <><FaTrash /> {t("FLATPAK_UNINSTALL_BTN", "Uninstall")}</> : <><FaDownload /> {t("FLATPAK_INSTALL_BTN", "Install")}</>}
-        </ButtonItem>
-      </Field>
+        description={busy ? "Updating..." : installed ? t("FLATPAK_INSTALLED", "Installed") : t("FLATPAK_NOT_INSTALLED", "Not installed")}
+        checked={installed}
+        onChange={() => onAction()}
+        disabled={busy}
+      />
     </PanelSectionRow>
   );
 }
@@ -70,13 +65,13 @@ function AppRow({ app, busy, onToggle }: AppRowProps) {
 
   return (
     <PanelSectionRow>
-      <Field
+      <ToggleField
         label={app.app_name || app.app_id}
         description={`${app.app_id} - ${status}`}
-        icon={<FaCog style={{ color: configured ? "green" : partial ? "orange" : "red" }} />}
-      >
-        <Toggle value={configured} onChange={onToggle} disabled={busy} />
-      </Field>
+        checked={configured}
+        onChange={onToggle}
+        disabled={busy}
+      />
     </PanelSectionRow>
   );
 }
@@ -162,13 +157,13 @@ export function FlatpaksTab() {
   };
 
   if (loading) {
-    return <PanelSection title={t("FLATPAK_MODAL_TITLE", "Flatpak Extensions")}><PanelSectionRow><Spinner /></PanelSectionRow></PanelSection>;
+    return <PanelSection title="Runtimes" spinner />;
   }
 
   return (
     <>
-      <PanelSection title={t("FLATPAK_RUNTIME_INSTALLER", "Runtime Extension Installer")}>
-        {error && <PanelSectionRow><Field label={t("FLATPAK_OPERATION_ERROR", "Operation failed")} description={error} icon={<FaTimes style={{ color: "red" }} />} /></PanelSectionRow>}
+      <PanelSection title="Runtimes">
+        {error && <PanelSectionRow><Field label={t("FLATPAK_OPERATION_ERROR", "Operation failed")} description={error} /></PanelSectionRow>}
         {extensionStatus?.success ? runtimeVersions.map(({ version, key }) => (
           <RuntimeRow
             key={version}
@@ -180,7 +175,7 @@ export function FlatpaksTab() {
         )) : <PanelSectionRow><Field label={t("FLATPAK_ERROR", "Error")} description={extensionStatus?.error || error || t("FLATPAK_ERROR_STATUS", "Failed to check extension status")} /></PanelSectionRow>}
       </PanelSection>
 
-      <PanelSection title={t("FLATPAK_APPS_TITLE", "Flatpak Applications")}>
+      <PanelSection title="Applications">
         {apps?.success ? apps.apps.length ? apps.apps.map((app) => (
           <AppRow
             key={app.app_id}
diff --git a/src/components/InstallationButton.tsx b/src/components/InstallationButton.tsx
index 7f0ac96..1bf10ac 100644
--- a/src/components/InstallationButton.tsx
+++ b/src/components/InstallationButton.tsx
@@ -1,5 +1,4 @@
 import { ButtonItem, PanelSectionRow } from "@decky/ui";
-import { FaDownload, FaTrash } from "react-icons/fa";
 import t from '../i18n/i18n';
 
 interface InstallationButtonProps {
@@ -17,39 +16,13 @@ export function InstallationButton({
   onInstall,
   onUninstall
 }: InstallationButtonProps) {
-  const renderButtonContent = () => {
-    if (isInstalling) {
-      return (
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          <div>{t('INSTALL_INSTALLING', 'Installing...')}</div>
-        </div>
-      );
-    }
-
-    if (isUninstalling) {
-      return (
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          <div>{t('INSTALL_UNINSTALLING', 'Uninstalling...')}</div>
-        </div>
-      );
-    }
-
-    if (isInstalled) {
-      return (
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          <FaTrash />
-          <div>{t('INSTALL_UNINSTALL_BTN', 'Uninstall LSFG-VK')}</div>
-        </div>
-      );
-    }
-
-    return (
-      <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-        <FaDownload />
-        <div>{t('INSTALL_INSTALL_BTN', 'Install LSFG-VK')}</div>
-      </div>
-    );
-  };
+  const label = isInstalling
+    ? t('INSTALL_INSTALLING', 'Installing...')
+    : isUninstalling
+      ? t('INSTALL_UNINSTALLING', 'Uninstalling...')
+      : isInstalled
+        ? t('INSTALL_UNINSTALL_BTN', 'Uninstall LSFG-VK')
+        : t('INSTALL_INSTALL_BTN', 'Install LSFG-VK');
 
   return (
     <PanelSectionRow>
@@ -58,7 +31,7 @@ export function InstallationButton({
         onClick={isInstalled ? onUninstall : onInstall}
         disabled={isInstalling || isUninstalling}
       >
-        {renderButtonContent()}
+        {label}
       </ButtonItem>
     </PanelSectionRow>
   );
diff --git a/src/components/SetupTab.tsx b/src/components/SetupTab.tsx
index 34106ed..98d6e78 100644
--- a/src/components/SetupTab.tsx
+++ b/src/components/SetupTab.tsx
@@ -29,7 +29,6 @@ export function SetupTab({
   return (
     <PanelSection title="Setup">
       <StatusDisplay
-        isInstalled={isInstalled}
         installationStatus={installationStatus}
         losslessScalingInstalled={losslessScalingInstalled}
         losslessScalingStatus={losslessScalingStatus}
diff --git a/src/components/StatusDisplay.tsx b/src/components/StatusDisplay.tsx
index 767e5fc..b1a98e5 100644
--- a/src/components/StatusDisplay.tsx
+++ b/src/components/StatusDisplay.tsx
@@ -1,8 +1,7 @@
-import { PanelSectionRow } from "@decky/ui";
+import { Field, PanelSectionRow } from "@decky/ui";
 import type { SteamBranchStatus } from "../api/lsfgApi";
 
 interface StatusDisplayProps {
-  isInstalled: boolean;
   installationStatus: string;
   losslessScalingInstalled: boolean;
   losslessScalingStatus: string;
@@ -10,7 +9,6 @@ interface StatusDisplayProps {
 }
 
 export function StatusDisplay({
-  isInstalled,
   installationStatus,
   losslessScalingInstalled,
   losslessScalingStatus,
@@ -21,56 +19,21 @@ export function StatusDisplay({
   return (
     <>
       <PanelSectionRow>
-        <div style={{ marginBottom: "8px", fontSize: "14px" }}>
-          <div
-            style={{
-              color: losslessScalingAppInstalled ? "#4CAF50" : "#F44336",
-              fontWeight: "600",
-              marginBottom: "6px",
-              display: "flex",
-              alignItems: "center",
-              gap: "6px"
-            }}
-          >
-            {losslessScalingAppInstalled ? "Lossless Scaling Installed" : "Lossless Scaling Not Installed"}
-          </div>
-          {!losslessScalingAppInstalled && losslessScalingStatus && (
-            <div style={{ color: "#B8B8B8", fontSize: "12px", margin: "0 0 6px 22px" }}>
-              {losslessScalingStatus}
-            </div>
-          )}
-          <div
-            style={{
-              color: isInstalled ? "#4CAF50" : "#FF9800",
-              fontWeight: "600",
-              display: "flex",
-              alignItems: "center",
-              gap: "6px"
-            }}
-          >
-            {installationStatus}
-          </div>
-        </div>
+        <Field
+          label="Lossless Scaling"
+          description={losslessScalingAppInstalled ? "Installed" : losslessScalingStatus || "Not installed"}
+        />
+      </PanelSectionRow>
+      <PanelSectionRow>
+        <Field label="LSFG-VK" description={installationStatus} />
       </PanelSectionRow>
 
       {steamBranchStatus?.installed && (
         <PanelSectionRow>
-          <div style={{ width: "100%" }}>
-            <div
-              style={{
-                color: steamBranchStatus.needs_switch ? "#FF9800" : "#4CAF50",
-                fontSize: "12px",
-                margin: "0 0 6px 22px"
-              }}
-            >
-              Steam branch: {steamBranchStatus.current_branch || "public"}
-              {steamBranchStatus.needs_switch && (
-                <div style={{ color: "#B8B8B8", marginTop: "3px" }}>
-                  {steamBranchStatus.message}
-                </div>
-              )}
-            </div>
-          </div>
+          <Field
+            label="Steam branch"
+            description={`${steamBranchStatus.current_branch || "public"}${steamBranchStatus.needs_switch ? ` - ${steamBranchStatus.message}` : ""}`}
+          />
         </PanelSectionRow>
       )}
     </>
-- 
cgit v1.2.3