Refresh UI (#117)v0.11.2

* initial visual refinement

* rm dupe status pops

* hide other menus if uninstalled opti

* bump ver

* fix ver bump

1 files changed, 29 insertions, 29 deletions

diff --git a/src/components/FGModInstallerSection.tsx b/src/components/FGModInstallerSection.tsx
index f9f905e..1e347c0 100644
--- a/src/components/FGModInstallerSection.tsx
+++ b/src/components/FGModInstallerSection.tsx
@@ -1,30 +1,20 @@
 import { useState, useEffect } from "react";
 import { PanelSection, PanelSectionRow, ButtonItem } from "@decky/ui";
-import { checkFGModPath, runInstallFGMod, runUninstallFGMod } from "../api";
-import { ResultDisplay, OperationResult } from "./ResultDisplay";
-import { createAutoCleanupTimer, safeAsyncOperation } from "../utils";
-import { TIMEOUTS, MESSAGES } from "../utils/constants";
+import { runInstallFGMod, runUninstallFGMod } from "../api";
+import { OperationResult } from "./ResultDisplay";
+import { createAutoCleanupTimer } from "../utils";
+import { TIMEOUTS, MESSAGES, STYLES } from "../utils/constants";
 
-export function FGModInstallerSection() {
+interface FGModInstallerSectionProps {
+  pathExists: boolean | null;
+  setPathExists: (exists: boolean | null) => void;
+}
+
+export function FGModInstallerSection({ pathExists, setPathExists }: FGModInstallerSectionProps) {
   const [installing, setInstalling] = useState(false);
   const [uninstalling, setUninstalling] = useState(false);
   const [installResult, setInstallResult] = useState<OperationResult | null>(null);
   const [uninstallResult, setUninstallResult] = useState<OperationResult | null>(null);
-  const [pathExists, setPathExists] = useState<boolean | null>(null);
-
-  useEffect(() => {
-    const checkPath = async () => {
-      const result = await safeAsyncOperation(
-        async () => await checkFGModPath(),
-        'useEffect -> checkPath'
-      );
-      if (result) setPathExists(result.exists);
-    };
-    
-    checkPath(); // Initial check
-    const intervalId = setInterval(checkPath, TIMEOUTS.pathCheck); // Check every 3 seconds
-    return () => clearInterval(intervalId); // Cleanup interval on component unmount
-  }, []);
 
   useEffect(() => {
     if (installResult) {
@@ -45,6 +35,9 @@ export function FGModInstallerSection() {
       setInstalling(true);
       const result = await runInstallFGMod();
       setInstallResult(result);
+      if (result.status === "success") {
+        setPathExists(true);
+      }
     } catch (e) {
       console.error(e);
     } finally {
@@ -57,6 +50,9 @@ export function FGModInstallerSection() {
       setUninstalling(true);
       const result = await runUninstallFGMod();
       setUninstallResult(result);
+      if (result.status === "success") {
+        setPathExists(false);
+      }
     } catch (e) {
       console.error(e);
     } finally {
@@ -68,7 +64,7 @@ export function FGModInstallerSection() {
     <PanelSection>
       {pathExists !== null ? (
         <PanelSectionRow>
-          <div style={{ color: pathExists ? "green" : "red" }}>
+          <div style={pathExists ? STYLES.statusInstalled : STYLES.statusNotInstalled}>
             {pathExists ? MESSAGES.modInstalled : MESSAGES.modNotInstalled}
           </div>
         </PanelSectionRow>
@@ -90,14 +86,18 @@ export function FGModInstallerSection() {
         </PanelSectionRow>
       ) : null}
       
-      <ResultDisplay result={installResult} />
-      <ResultDisplay result={uninstallResult} />
-      
-      <PanelSectionRow>
-        <div>
-          {MESSAGES.instructionText}
-        </div>
-      </PanelSectionRow>
+      {pathExists === true ? (
+        <PanelSectionRow>
+          <div style={STYLES.instructionCard}>
+            <div style={{ fontWeight: 'bold', marginBottom: '8px', color: 'var(--decky-accent-text)' }}>
+              {MESSAGES.instructionTitle}
+            </div>
+            <div style={{ whiteSpace: 'pre-line' }}>
+              {MESSAGES.instructionText}
+            </div>
+          </div>
+        </PanelSectionRow>
+      ) : null}
     </PanelSection>
   );
 }