From 0b5e71fe916e92ef9ecf7de91ca43371c4bd6d25 Mon Sep 17 00:00:00 2001
From: Kurt Himebauch <136133082+xXJSONDeruloXx@users.noreply.github.com>
Date: Tue, 29 Jul 2025 07:53:45 -0700
Subject: wording and layout tweaks (#125)

* wording and layout tweaks

* red in remove button

* reorganize frontend components

* fix ld preload permissions issue for decky 3.1.10

* bump ver
---
 src/components/ClipboardCommands.tsx     |  23 +++++
 src/components/DocumentationButton.tsx   |  41 ---------
 src/components/FGModInstallerSection.tsx | 139 -------------------------------
 src/components/InstallationStatus.tsx    |  28 +++++++
 src/components/InstructionCard.tsx       |  23 +++++
 src/components/OptiScalerControls.tsx    |  92 ++++++++++++++++++++
 src/components/OptiScalerHeader.tsx      |  30 +++++++
 src/components/OptiScalerWiki.tsx        |  28 +++++++
 src/components/README.md                 |  55 ++++++++++++
 src/components/UninstallButton.tsx       |  29 +++++++
 src/components/index.ts                  |  10 +++
 11 files changed, 318 insertions(+), 180 deletions(-)
 create mode 100644 src/components/ClipboardCommands.tsx
 delete mode 100644 src/components/DocumentationButton.tsx
 delete mode 100644 src/components/FGModInstallerSection.tsx
 create mode 100644 src/components/InstallationStatus.tsx
 create mode 100644 src/components/InstructionCard.tsx
 create mode 100644 src/components/OptiScalerControls.tsx
 create mode 100644 src/components/OptiScalerHeader.tsx
 create mode 100644 src/components/OptiScalerWiki.tsx
 create mode 100644 src/components/README.md
 create mode 100644 src/components/UninstallButton.tsx
 create mode 100644 src/components/index.ts

(limited to 'src/components')

diff --git a/src/components/ClipboardCommands.tsx b/src/components/ClipboardCommands.tsx
new file mode 100644
index 0000000..5a6f38f
--- /dev/null
+++ b/src/components/ClipboardCommands.tsx
@@ -0,0 +1,23 @@
+import { SmartClipboardButton } from "./SmartClipboardButton";
+
+interface ClipboardCommandsProps {
+  pathExists: boolean | null;
+}
+
+export function ClipboardCommands({ pathExists }: ClipboardCommandsProps) {
+  if (pathExists !== true) return null;
+
+  return (
+    <>
+      <SmartClipboardButton 
+        command="~/fgmod/fgmod %command%"
+        buttonText="Copy Patch Command"
+      />
+      
+      <SmartClipboardButton 
+        command="~/fgmod/fgmod-uninstaller.sh %command%"
+        buttonText="Copy Unpatch Command"
+      />
+    </>
+  );
+}
diff --git a/src/components/DocumentationButton.tsx b/src/components/DocumentationButton.tsx
deleted file mode 100644
index 7069bc2..0000000
--- a/src/components/DocumentationButton.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { PanelSection, PanelSectionRow, ButtonItem } from "@decky/ui";
-import { FaClipboard, FaBook } from "react-icons/fa";
-
-export function DocumentationButton() {
-  const handleDocClick = () => {
-    window.open("https://github.com/xXJSONDeruloXx/Decky-Framegen/wiki", "_blank");
-  };
-
-  const handleOptiScalerClick = () => {
-    window.open("https://github.com/optiscaler/OptiScaler/wiki", "_blank");
-  };
-
-  return (
-    <PanelSection>
-      {/* 
-      <PanelSectionRow>
-        <ButtonItem
-          layout="below"
-          onClick={handleDocClick}
-        >
-          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-            <FaClipboard />
-            <div>Copy Launch Command</div>
-          </div>
-        </ButtonItem>
-      </PanelSectionRow>
-      */}
-      <PanelSectionRow>
-        <ButtonItem
-          layout="below"
-          onClick={handleOptiScalerClick}
-        >
-          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-            <FaBook />
-            <div>OptiScaler Wiki</div>
-          </div>
-        </ButtonItem>
-      </PanelSectionRow>
-    </PanelSection>
-  );
-}
diff --git a/src/components/FGModInstallerSection.tsx b/src/components/FGModInstallerSection.tsx
deleted file mode 100644
index b82e749..0000000
--- a/src/components/FGModInstallerSection.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { useState, useEffect } from "react";
-import { PanelSection, PanelSectionRow, ButtonItem } from "@decky/ui";
-import { runInstallFGMod, runUninstallFGMod } from "../api";
-import { OperationResult } from "./ResultDisplay";
-import { SmartClipboardButton } from "./SmartClipboardButton";
-import { createAutoCleanupTimer } from "../utils";
-import { TIMEOUTS, MESSAGES, STYLES } from "../utils/constants";
-import optiScalerImage from "../../assets/optiscaler.png";
-
-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);
-
-  useEffect(() => {
-    if (installResult) {
-      return createAutoCleanupTimer(() => setInstallResult(null), TIMEOUTS.resultDisplay);
-    }
-    return () => {}; // Ensure a cleanup function is always returned
-  }, [installResult]);
-
-  useEffect(() => {
-    if (uninstallResult) {
-      return createAutoCleanupTimer(() => setUninstallResult(null), TIMEOUTS.resultDisplay);
-    }
-    return () => {}; // Ensure a cleanup function is always returned
-  }, [uninstallResult]);
-
-  const handleInstallClick = async () => {
-    try {
-      setInstalling(true);
-      const result = await runInstallFGMod();
-      setInstallResult(result);
-      if (result.status === "success") {
-        setPathExists(true);
-      }
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setInstalling(false);
-    }
-  };
-
-  const handleUninstallClick = async () => {
-    try {
-      setUninstalling(true);
-      const result = await runUninstallFGMod();
-      setUninstallResult(result);
-      if (result.status === "success") {
-        setPathExists(false);
-      }
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setUninstalling(false);
-    }
-  };
-
-  return (
-    <PanelSection>
-      {pathExists === false ? (
-        <PanelSectionRow>
-          <div style={STYLES.statusNotInstalled}>
-            {MESSAGES.modNotInstalled}
-          </div>
-        </PanelSectionRow>
-      ) : null}
-      
-      {pathExists === false ? (
-        <PanelSectionRow>
-          <ButtonItem layout="below" onClick={handleInstallClick} disabled={installing}>
-            {installing ? MESSAGES.installing : MESSAGES.installButton}
-          </ButtonItem>
-        </PanelSectionRow>
-      ) : null}
-      
-      {pathExists === true ? (
-        <PanelSectionRow>
-          <ButtonItem layout="below" onClick={handleUninstallClick} disabled={uninstalling}>
-            {uninstalling ? MESSAGES.uninstalling : MESSAGES.uninstallButton}
-          </ButtonItem>
-        </PanelSectionRow>
-      ) : null}
-      
-      {pathExists === true ? (
-        <PanelSectionRow>
-          <div style={{ 
-            display: 'flex', 
-            justifyContent: 'center', 
-            marginBottom: '16px' 
-          }}>
-            <img 
-              src={optiScalerImage} 
-              alt="OptiScaler" 
-              style={{ 
-                maxWidth: '100%', 
-                height: 'auto',
-                borderRadius: '8px'
-              }} 
-            />
-          </div>
-        </PanelSectionRow>
-      ) : null}
-      
-      {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}
-      
-      {pathExists === true ? (
-        <SmartClipboardButton 
-          command="~/fgmod/fgmod %command%"
-          buttonText="Copy Patch Command"
-        />
-      ) : null}
-      
-      {pathExists === true ? (
-        <SmartClipboardButton 
-          command="~/fgmod/fgmod-uninstaller.sh %command%"
-          buttonText="Copy Unpatch Command"
-        />
-      ) : null}
-    </PanelSection>
-  );
-}
diff --git a/src/components/InstallationStatus.tsx b/src/components/InstallationStatus.tsx
new file mode 100644
index 0000000..713b5e1
--- /dev/null
+++ b/src/components/InstallationStatus.tsx
@@ -0,0 +1,28 @@
+import { PanelSectionRow, ButtonItem } from "@decky/ui";
+import { MESSAGES, STYLES } from "../utils/constants";
+
+interface InstallationStatusProps {
+  pathExists: boolean | null;
+  installing: boolean;
+  onInstallClick: () => void;
+}
+
+export function InstallationStatus({ pathExists, installing, onInstallClick }: InstallationStatusProps) {
+  if (pathExists !== false) return null;
+
+  return (
+    <>
+      <PanelSectionRow>
+        <div style={STYLES.statusNotInstalled}>
+          {MESSAGES.modNotInstalled}
+        </div>
+      </PanelSectionRow>
+      
+      <PanelSectionRow>
+        <ButtonItem layout="below" onClick={onInstallClick} disabled={installing}>
+          {installing ? MESSAGES.installing : MESSAGES.installButton}
+        </ButtonItem>
+      </PanelSectionRow>
+    </>
+  );
+}
diff --git a/src/components/InstructionCard.tsx b/src/components/InstructionCard.tsx
new file mode 100644
index 0000000..fdf6755
--- /dev/null
+++ b/src/components/InstructionCard.tsx
@@ -0,0 +1,23 @@
+import { PanelSectionRow } from "@decky/ui";
+import { MESSAGES, STYLES } from "../utils/constants";
+
+interface InstructionCardProps {
+  pathExists: boolean | null;
+}
+
+export function InstructionCard({ pathExists }: InstructionCardProps) {
+  if (pathExists !== true) return null;
+
+  return (
+    <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>
+  );
+}
diff --git a/src/components/OptiScalerControls.tsx b/src/components/OptiScalerControls.tsx
new file mode 100644
index 0000000..7b2db0e
--- /dev/null
+++ b/src/components/OptiScalerControls.tsx
@@ -0,0 +1,92 @@
+import { useState, useEffect } from "react";
+import { PanelSection } from "@decky/ui";
+import { runInstallFGMod, runUninstallFGMod } from "../api";
+import { OperationResult } from "./ResultDisplay";
+import { createAutoCleanupTimer } from "../utils";
+import { TIMEOUTS } from "../utils/constants";
+import { InstallationStatus } from "./InstallationStatus";
+import { OptiScalerHeader } from "./OptiScalerHeader";
+import { ClipboardCommands } from "./ClipboardCommands";
+import { InstructionCard } from "./InstructionCard";
+import { OptiScalerWiki } from "./OptiScalerWiki";
+import { UninstallButton } from "./UninstallButton";
+
+interface OptiScalerControlsProps {
+  pathExists: boolean | null;
+  setPathExists: (exists: boolean | null) => void;
+}
+
+export function OptiScalerControls({ pathExists, setPathExists }: OptiScalerControlsProps) {
+  const [installing, setInstalling] = useState(false);
+  const [uninstalling, setUninstalling] = useState(false);
+  const [installResult, setInstallResult] = useState<OperationResult | null>(null);
+  const [uninstallResult, setUninstallResult] = useState<OperationResult | null>(null);
+
+  useEffect(() => {
+    if (installResult) {
+      return createAutoCleanupTimer(() => setInstallResult(null), TIMEOUTS.resultDisplay);
+    }
+    return () => {}; // Ensure a cleanup function is always returned
+  }, [installResult]);
+
+  useEffect(() => {
+    if (uninstallResult) {
+      return createAutoCleanupTimer(() => setUninstallResult(null), TIMEOUTS.resultDisplay);
+    }
+    return () => {}; // Ensure a cleanup function is always returned
+  }, [uninstallResult]);
+
+  const handleInstallClick = async () => {
+    try {
+      setInstalling(true);
+      const result = await runInstallFGMod();
+      setInstallResult(result);
+      if (result.status === "success") {
+        setPathExists(true);
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setInstalling(false);
+    }
+  };
+
+  const handleUninstallClick = async () => {
+    try {
+      setUninstalling(true);
+      const result = await runUninstallFGMod();
+      setUninstallResult(result);
+      if (result.status === "success") {
+        setPathExists(false);
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setUninstalling(false);
+    }
+  };
+
+  return (
+    <PanelSection>
+      <InstallationStatus 
+        pathExists={pathExists}
+        installing={installing}
+        onInstallClick={handleInstallClick}
+      />
+      
+      <OptiScalerHeader pathExists={pathExists} />
+      
+      <ClipboardCommands pathExists={pathExists} />
+      
+      <InstructionCard pathExists={pathExists} />
+      
+      <OptiScalerWiki pathExists={pathExists} />
+      
+      <UninstallButton 
+        pathExists={pathExists}
+        uninstalling={uninstalling}
+        onUninstallClick={handleUninstallClick}
+      />
+    </PanelSection>
+  );
+}
diff --git a/src/components/OptiScalerHeader.tsx b/src/components/OptiScalerHeader.tsx
new file mode 100644
index 0000000..27dc501
--- /dev/null
+++ b/src/components/OptiScalerHeader.tsx
@@ -0,0 +1,30 @@
+import { PanelSectionRow } from "@decky/ui";
+import optiScalerImage from "../../assets/optiscaler.png";
+
+interface OptiScalerHeaderProps {
+  pathExists: boolean | null;
+}
+
+export function OptiScalerHeader({ pathExists }: OptiScalerHeaderProps) {
+  if (pathExists !== true) return null;
+
+  return (
+    <PanelSectionRow>
+      <div style={{ 
+        display: 'flex', 
+        justifyContent: 'center', 
+        marginBottom: '16px' 
+      }}>
+        <img 
+          src={optiScalerImage} 
+          alt="OptiScaler" 
+          style={{ 
+            maxWidth: '100%', 
+            height: 'auto',
+            borderRadius: '8px'
+          }} 
+        />
+      </div>
+    </PanelSectionRow>
+  );
+}
diff --git a/src/components/OptiScalerWiki.tsx b/src/components/OptiScalerWiki.tsx
new file mode 100644
index 0000000..f8545f9
--- /dev/null
+++ b/src/components/OptiScalerWiki.tsx
@@ -0,0 +1,28 @@
+import { PanelSectionRow, ButtonItem } from "@decky/ui";
+import { FaBook } from "react-icons/fa";
+
+interface OptiScalerWikiProps {
+  pathExists: boolean | null;
+}
+
+export function OptiScalerWiki({ pathExists }: OptiScalerWikiProps) {
+  if (pathExists !== true) return null;
+
+  const handleWikiClick = () => {
+    window.open("https://github.com/optiscaler/OptiScaler/wiki", "_blank");
+  };
+
+  return (
+    <PanelSectionRow>
+      <ButtonItem
+        layout="below"
+        onClick={handleWikiClick}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          <FaBook />
+          <div>OptiScaler Wiki</div>
+        </div>
+      </ButtonItem>
+    </PanelSectionRow>
+  );
+}
diff --git a/src/components/README.md b/src/components/README.md
new file mode 100644
index 0000000..19c50a7
--- /dev/null
+++ b/src/components/README.md
@@ -0,0 +1,55 @@
+# Components Structure
+
+This directory contains the organized component structure for the Decky Framegen plugin.
+
+## Component Hierarchy
+
+### Main Orchestrator
+- **`OptiScalerControls.tsx`** - Main component that orchestrates all OptiScaler functionality and state management
+
+### Sub-components (Logical Sections)
+- **`InstallationStatus.tsx`** - Shows installation status and setup button when mod is not installed
+- **`OptiScalerHeader.tsx`** - Displays the OptiScaler logo/image when installed
+- **`ClipboardCommands.tsx`** - Contains the patch/unpatch command copy buttons
+- **`InstructionCard.tsx`** - Shows usage instructions and help text
+- **`OptiScalerWiki.tsx`** - Wiki documentation button
+- **`UninstallButton.tsx`** - Red remove/uninstall button
+
+### Utility Components
+- **`SmartClipboardButton.tsx`** - Reusable clipboard copy button component
+- **`ResultDisplay.tsx`** - Display component for operation results
+
+### Other Components
+- **`InstalledGamesSection.tsx`** - Games section component (currently commented out)
+
+## State Management
+
+All state is managed in the main `OptiScalerControls` component:
+- `pathExists` - Whether the mod is installed
+- `installing` - Installation progress state
+- `uninstalling` - Uninstallation progress state
+- `installResult` - Result of installation operation
+- `uninstallResult` - Result of uninstallation operation
+
+## Component Flow
+
+1. **Not Installed State**: Shows `InstallationStatus` with setup button
+2. **Installed State**: Shows all components in order:
+   - OptiScaler header image
+   - Clipboard command buttons
+   - Instruction card
+   - Wiki button
+   - Uninstall button (red)
+
+## Benefits of This Structure
+
+- **Separation of Concerns**: Each component has a single responsibility
+- **Reusability**: Components can be easily reused or rearranged
+- **Maintainability**: Easier to find and modify specific functionality
+- **Testability**: Smaller components are easier to test
+- **State Management**: Centralized state in the orchestrator component
+- **Clean Imports**: Barrel exports through `index.ts` for cleaner imports
+
+## Clean Architecture
+
+All legacy components have been removed and replaced with this organized structure. The codebase is now clean and follows modern React patterns.
diff --git a/src/components/UninstallButton.tsx b/src/components/UninstallButton.tsx
new file mode 100644
index 0000000..1f55548
--- /dev/null
+++ b/src/components/UninstallButton.tsx
@@ -0,0 +1,29 @@
+import { PanelSectionRow, ButtonItem } from "@decky/ui";
+import { MESSAGES } from "../utils/constants";
+
+interface UninstallButtonProps {
+  pathExists: boolean | null;
+  uninstalling: boolean;
+  onUninstallClick: () => void;
+}
+
+export function UninstallButton({ pathExists, uninstalling, onUninstallClick }: UninstallButtonProps) {
+  if (pathExists !== true) return null;
+
+  return (
+    <PanelSectionRow>
+      <ButtonItem 
+        layout="below" 
+        onClick={onUninstallClick} 
+        disabled={uninstalling}
+      >
+        <div style={{ 
+          color: '#ef4444',
+          fontWeight: 'bold'
+        }}>
+          {uninstalling ? MESSAGES.uninstalling : MESSAGES.uninstallButton}
+        </div>
+      </ButtonItem>
+    </PanelSectionRow>
+  );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..3f67341
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,10 @@
+// Component exports for cleaner imports
+export { OptiScalerControls } from './OptiScalerControls';
+export { InstallationStatus } from './InstallationStatus';
+export { OptiScalerHeader } from './OptiScalerHeader';
+export { ClipboardCommands } from './ClipboardCommands';
+export { InstructionCard } from './InstructionCard';
+export { OptiScalerWiki } from './OptiScalerWiki';
+export { UninstallButton } from './UninstallButton';
+export { SmartClipboardButton } from './SmartClipboardButton';
+export { ResultDisplay } from './ResultDisplay';
-- 
cgit v1.2.3