1 files changed, 91 insertions, 132 deletions
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index bdb3a04..de8f996 100644
--- a/src/components/Content.tsx
+++ b/src/components/Content.tsx
@@ -1,20 +1,22 @@
-import { useEffect } from "react";
-import { PanelSection, showModal, ButtonItem, PanelSectionRow } from "@decky/ui";
-import { useInstallationStatus } from "../hooks/useLsfgHooks";
+import { Tabs } from "@decky/ui";
+import { useEffect, useState } from "react";
+import { FaFileAlt, FaGamepad, FaLayerGroup, FaTools } from "react-icons/fa";
+import { ConfigurationData } from "../config/configSchema";
+import { tabStyles } from "../styles";
 import { useGameConfiguration } from "../hooks/useGameConfiguration";
 import { useInstallationActions } from "../hooks/useInstallationActions";
-import { StatusDisplay } from "./StatusDisplay";
-import { InstallationButton } from "./InstallationButton";
-import { ConfigurationSection } from "./ConfigurationSection";
-import { GameConfigurationSelector } from "./GameConfigurationSelector";
-import { UsageInstructions } from "./UsageInstructions";
-import { SmartClipboardButton } from "./SmartClipboardButton";
-import { FgmodClipboardButton } from "./FgmodClipboardButton";
-import { FpsMultiplierControl } from "./FpsMultiplierControl";
-import { NerdStuffModal } from "./NerdStuffModal";
-import { FlatpaksModal } from "./FlatpaksModal";
-import { ConfigurationData } from "../config/configSchema";
-import t from '../i18n/i18n';
+import { useInstallationStatus } from "../hooks/useLsfgHooks";
+import { ConfigFileTab } from "./ConfigFileTab";
+import { ConfigurationTab } from "./ConfigurationTab";
+import { FlatpaksTab } from "./FlatpaksTab";
+import { SetupTab } from "./SetupTab";
+
+const tabIcons = {
+  configuration: <FaGamepad size={18} />,
+  flatpak: <FaLayerGroup size={18} />,
+  configFile: <FaFileAlt size={18} />,
+  setup: <FaTools size={18} />,
+};
 
 export function Content() {
   const {
@@ -25,141 +27,98 @@ export function Content() {
     losslessScalingInstalled,
     losslessScalingStatus,
     steamBranchStatus,
-    checkInstallation
+    checkInstallation,
   } = useInstallationStatus();
-
-  const { config, targets, runningGame, selectedAppId, setSelectedAppId, save, resetSelected, resetAll, reload } = useGameConfiguration();
-
+  const {
+    config,
+    targets,
+    runningGame,
+    selectedAppId,
+    setSelectedAppId,
+    save,
+    resetSelected,
+    resetAll,
+    reload,
+  } = useGameConfiguration();
   const { isInstalling, isUninstalling, handleInstall, handleUninstall } = useInstallationActions();
+  const [tab, setTab] = useState("Setup");
+  const setupComplete =
+    isInstalled &&
+    losslessScalingInstalled &&
+    steamBranchStatus?.success === true &&
+    steamBranchStatus.installed &&
+    !steamBranchStatus.needs_switch;
+
+  useEffect(() => {
+    setTab(setupComplete ? "Configuration" : "Setup");
+  }, [setupComplete]);
 
   useEffect(() => {
     if (isInstalled) void reload();
   }, [isInstalled, reload]);
 
-  const handleConfigChange = async (fieldName: keyof ConfigurationData, value: boolean | number | string | string[]) => {
+  const handleConfigChange = async (
+    fieldName: keyof ConfigurationData,
+    value: boolean | number | string | string[],
+  ) => {
     await save({ ...config, [fieldName]: value });
   };
 
   const onInstall = () => {
-    handleInstall(setIsInstalled, setInstallationStatus, reload, checkInstallation);
+    void handleInstall(setIsInstalled, setInstallationStatus, reload, checkInstallation);
   };
 
   const onUninstall = () => {
-    handleUninstall(setIsInstalled, setInstallationStatus, checkInstallation);
+    void handleUninstall(setIsInstalled, setInstallationStatus, checkInstallation);
   };
 
-  const handleShowNerdStuff = () => {
-    showModal(<NerdStuffModal />);
-  };
+  const setupContent = (
+    <SetupTab
+      isInstalled={isInstalled}
+      installationStatus={installationStatus}
+      losslessScalingInstalled={losslessScalingInstalled}
+      losslessScalingStatus={losslessScalingStatus}
+      steamBranchStatus={steamBranchStatus}
+      isInstalling={isInstalling}
+      isUninstalling={isUninstalling}
+      onInstall={onInstall}
+      onUninstall={onUninstall}
+    />
+  );
 
-  const handleShowFlatpaks = () => {
-    showModal(<FlatpaksModal />);
-  };
+  const tabs = setupComplete
+    ? [
+        {
+          id: "Configuration",
+          title: tabIcons.configuration,
+          content: (
+            <ConfigurationTab
+              config={config}
+              targets={targets}
+              runningGame={runningGame}
+              selectedAppId={selectedAppId}
+              onSelect={setSelectedAppId}
+              onConfigChange={handleConfigChange}
+              onReset={resetSelected}
+              onResetAll={resetAll}
+            />
+          ),
+        },
+        { id: "Flatpak", title: tabIcons.flatpak, content: <FlatpaksTab /> },
+        { id: "ConfigFile", title: tabIcons.configFile, content: <ConfigFileTab /> },
+        { id: "Setup", title: tabIcons.setup, content: setupContent },
+      ]
+    : [
+        { id: "Setup", title: tabIcons.setup, content: setupContent },
+      ];
 
   return (
-    <PanelSection>
-      {!isInstalled && (
-        <>
-          <InstallationButton
-            isInstalled={isInstalled}
-            isInstalling={isInstalling}
-            isUninstalling={isUninstalling}
-            onInstall={onInstall}
-            onUninstall={onUninstall}
-          />
-
-          <StatusDisplay
-            isInstalled={isInstalled}
-            installationStatus={installationStatus}
-            losslessScalingInstalled={losslessScalingInstalled}
-            losslessScalingStatus={losslessScalingStatus}
-            steamBranchStatus={steamBranchStatus}
-          />
-        </>
-      )}
-
-      {isInstalled && (
-        <>
-          <PanelSectionRow>
-            <div
-              style={{
-                fontSize: "14px",
-                fontWeight: "bold",
-                marginTop: "8px",
-                marginBottom: "6px",
-                borderBottom: "1px solid rgba(255, 255, 255, 0.2)",
-                paddingBottom: "3px",
-                color: "white"
-              }}
-            >
-              {t('CONTENT_FPS_MULTIPLIER', 'FPS Multiplier')}
-            </div>
-          </PanelSectionRow>
-
-          <FpsMultiplierControl
-            config={config}
-            onConfigChange={handleConfigChange}
-          />
-        </>
-      )}
-
-      {isInstalled && (
-        <GameConfigurationSelector targets={targets} runningGame={runningGame} selectedAppId={selectedAppId} onSelect={setSelectedAppId} onReset={resetSelected} onResetAll={resetAll} />
-      )}
-
-      {isInstalled && (
-        <ConfigurationSection
-          config={config}
-          onConfigChange={handleConfigChange}
-        />
-      )}
-
-      {isInstalled && (
-        <>
-          <SmartClipboardButton />
-          <FgmodClipboardButton />
-        </>
-      )}
-
-      <UsageInstructions />
-
-      <PanelSectionRow>
-        <ButtonItem
-          layout="below"
-          onClick={handleShowNerdStuff}
-        >
-          {t('CONTENT_NERD_STUFF', 'Nerd Stuff')}
-        </ButtonItem>
-      </PanelSectionRow>
-
-      <PanelSectionRow>
-        <ButtonItem
-          layout="below"
-          onClick={handleShowFlatpaks}
-        >
-          {t('CONTENT_FLATPAK_SETUP', 'Flatpak Setup')}
-        </ButtonItem>
-      </PanelSectionRow>
-
-      {isInstalled && (
-        <>
-          <StatusDisplay
-            isInstalled={isInstalled}
-            installationStatus={installationStatus}
-            losslessScalingInstalled={losslessScalingInstalled}
-            losslessScalingStatus={losslessScalingStatus}
-            steamBranchStatus={steamBranchStatus}
-          />
-
-          <InstallationButton
-            isInstalled={isInstalled}
-            isInstalling={isInstalling}
-            isUninstalling={isUninstalling}
-            onInstall={onInstall}
-            onUninstall={onUninstall}
-          />
-        </>
-      )}
-    </PanelSection>
+    <div
+      className="lsfg-vk-tabs"
+      style={{ height: "95%", width: "300px", position: "fixed", marginTop: "-12px", overflow: "hidden" }}
+    >
+      <style>{tabStyles}</style>
+      <Tabs activeTab={tab} onShowTab={setTab} tabs={tabs} />
+    </div>
   );
 }