From 4eef57862186cb69ef2d0ac213a2d4883f5ffde0 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Wed, 7 May 2025 22:52:17 -0400
Subject: [PATCH] reorganize panes

---
 .../AudioSettingsPane.tsx}                    | 71 ++-------------
 .../src/lib/panes/MiscSettingsPane.tsx        | 89 +++++++++++++++++++
 .../settings-modal/src/lib/settings-modal.tsx | 20 +++--
 3 files changed, 109 insertions(+), 71 deletions(-)
 rename frontend/libs/components/settings-modal/src/lib/{MiscSettingsPane.tsx => panes/AudioSettingsPane.tsx} (68%)
 create mode 100644 frontend/libs/components/settings-modal/src/lib/panes/MiscSettingsPane.tsx

diff --git a/frontend/libs/components/settings-modal/src/lib/MiscSettingsPane.tsx b/frontend/libs/components/settings-modal/src/lib/panes/AudioSettingsPane.tsx
similarity index 68%
rename from frontend/libs/components/settings-modal/src/lib/MiscSettingsPane.tsx
rename to frontend/libs/components/settings-modal/src/lib/panes/AudioSettingsPane.tsx
index 5481759d07..d44f0529e5 100644
--- a/frontend/libs/components/settings-modal/src/lib/MiscSettingsPane.tsx
+++ b/frontend/libs/components/settings-modal/src/lib/panes/AudioSettingsPane.tsx
@@ -1,10 +1,9 @@
 import { useEffect, useState } from "react";
-import { SoundRegistry, SoundEffect } from "@storyteller/soundboard";
+import { SoundRegistry } from "@storyteller/soundboard";
 import { Button } from "@storyteller/ui-button";
 import { Input } from "@storyteller/ui-input";
-import { AppPreferencesPayload, CustomDirectory, GetAppPreferences, SystemDirectory } from "@storyteller/tauri-api";
+import { AppPreferencesPayload, GetAppPreferences } from "@storyteller/tauri-api";
 import { PreferenceName, UpdateAppPreferences } from "@storyteller/tauri-api";
-import { open } from '@tauri-apps/plugin-dialog';
 import { Select, SelectValue } from "@storyteller/ui-select";
 
 // TODO: This is maintained in two places. Here and InstallSounds.
@@ -17,10 +16,10 @@ const SOUND_OPTIONS = [
   { value: "crumble", label: "Crumble" },
 ];
 
-interface MiscSettingsPaneProps {
+interface AudioSettingsPaneProps {
 }
 
-export const MiscSettingsPane = (args: MiscSettingsPaneProps) => {
+export const AudioSettingsPane = (args: AudioSettingsPaneProps) => {
   const [preferences, setPreferences] = useState<AppPreferencesPayload|undefined>(undefined);
 
   useEffect(() => {
@@ -33,16 +32,11 @@ export const MiscSettingsPane = (args: MiscSettingsPaneProps) => {
   }, []);
 
 
-  // NB: This might be a complex type.
-  const outerDownloadObject = preferences?.preferred_download_directory || {};
-  const downloadDirectory = ("custom" in outerDownloadObject) ? outerDownloadObject.custom as string : "";
-  const currentDownloadLabel = ("system" in outerDownloadObject) ? "System Download Directory" : downloadDirectory;
-
   const playSounds = preferences?.play_sounds || false;
 
-  const successSound = orNone(preferences?.generation_success_sound); // ? preferences?.generation_success_sound : "none";
-  const failureSound = orNone(preferences?.generation_failure_sound); // ? preferences?.generation_failure_sound : "none";
-  const enqueueSound = orNone(preferences?.generation_enqueue_sound); // ? preferences?.generation_enqueue_sound : "none";
+  const successSound = orNone(preferences?.generation_success_sound);
+  const failureSound = orNone(preferences?.generation_failure_sound);
+  const enqueueSound = orNone(preferences?.generation_enqueue_sound);
 
   const reloadPreferences = async () => {
     const prefs = await GetAppPreferences();
@@ -59,34 +53,6 @@ export const MiscSettingsPane = (args: MiscSettingsPaneProps) => {
     await reloadPreferences();
   }
 
-  const openDirectoryPicker = async () => {
-    let directory = await open({
-      multiple: false,
-      directory: true,
-      defaultPath: downloadDirectory || undefined,
-    });
-    if (directory === null) {
-      return; // User dismissed the dialog choice
-    }
-    await UpdateAppPreferences({
-      preference: PreferenceName.PreferredDownloadDirectory, 
-      value: {
-        custom: directory
-      } as CustomDirectory,
-    });
-    await reloadPreferences();
-  }
-
-  const clearDirectory = async () => {
-    await UpdateAppPreferences({
-      preference: PreferenceName.PreferredDownloadDirectory, 
-      value: {
-        system: "downloads" 
-      } as SystemDirectory,
-    });
-    await reloadPreferences();
-  }
-
   const setSuccessSound = async (val: string) => {
     let sendVal = val === "none" ? undefined : val;
     await UpdateAppPreferences({
@@ -125,29 +91,6 @@ export const MiscSettingsPane = (args: MiscSettingsPaneProps) => {
 
   return (<>
     <div className="space-y-4">
-      <div>
-        <label htmlFor="download-path" className="mb-2 block">
-          Default Download Directory
-        </label>
-        This is where downloads are placed after downloading.
-        The current path is <pre>{currentDownloadLabel}</pre>
-
-        <Button 
-          variant="primary" 
-          className="py-1"
-          onClick={openDirectoryPicker}
-        >
-            Choose Directory
-        </Button>
-        <Button 
-          variant="secondary" 
-          className="py-1"
-          onClick={clearDirectory}
-        >
-            Use Default
-        </Button>
-      </div>
-
       <div>
         <label htmlFor="play-sounds" className="mb-2 block">
           Play Notification Sounds for Events?
diff --git a/frontend/libs/components/settings-modal/src/lib/panes/MiscSettingsPane.tsx b/frontend/libs/components/settings-modal/src/lib/panes/MiscSettingsPane.tsx
new file mode 100644
index 0000000000..b9f54b5893
--- /dev/null
+++ b/frontend/libs/components/settings-modal/src/lib/panes/MiscSettingsPane.tsx
@@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+import { Button } from "@storyteller/ui-button";
+import { AppPreferencesPayload, CustomDirectory, GetAppPreferences, SystemDirectory } from "@storyteller/tauri-api";
+import { PreferenceName, UpdateAppPreferences } from "@storyteller/tauri-api";
+import { open } from '@tauri-apps/plugin-dialog';
+
+interface MiscSettingsPaneProps {
+}
+
+export const MiscSettingsPane = (args: MiscSettingsPaneProps) => {
+  const [preferences, setPreferences] = useState<AppPreferencesPayload|undefined>(undefined);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const prefs = await GetAppPreferences();
+      console.log("prefs", prefs)
+      setPreferences(prefs.preferences);
+    }
+    fetchData();
+  }, []);
+
+
+  // NB: This might be a complex type.
+  const outerDownloadObject = preferences?.preferred_download_directory || {};
+  const downloadDirectory = ("custom" in outerDownloadObject) ? outerDownloadObject.custom as string : "";
+  const currentDownloadLabel = ("system" in outerDownloadObject) ? "System Download Directory" : downloadDirectory;
+
+  const reloadPreferences = async () => {
+    const prefs = await GetAppPreferences();
+    console.log("prefs", prefs)
+    setPreferences(prefs.preferences);
+  }
+
+  const openDirectoryPicker = async () => {
+    let directory = await open({
+      multiple: false,
+      directory: true,
+      defaultPath: downloadDirectory || undefined,
+    });
+    if (directory === null) {
+      return; // User dismissed the dialog choice
+    }
+    await UpdateAppPreferences({
+      preference: PreferenceName.PreferredDownloadDirectory, 
+      value: {
+        custom: directory
+      } as CustomDirectory,
+    });
+    await reloadPreferences();
+  }
+
+  const clearDirectory = async () => {
+    await UpdateAppPreferences({
+      preference: PreferenceName.PreferredDownloadDirectory, 
+      value: {
+        system: "downloads" 
+      } as SystemDirectory,
+    });
+    await reloadPreferences();
+  }
+
+  return (<>
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="download-path" className="mb-2 block">
+          Default Download Directory
+        </label>
+        This is where downloads are placed after downloading.
+        The current path is <pre>{currentDownloadLabel}</pre>
+
+        <Button 
+          variant="primary" 
+          className="py-1"
+          onClick={openDirectoryPicker}
+        >
+            Choose Directory
+        </Button>
+        <Button 
+          variant="secondary" 
+          className="py-1"
+          onClick={clearDirectory}
+        >
+            Use Default
+        </Button>
+      </div>
+
+    </div>
+  </>)
+}
diff --git a/frontend/libs/components/settings-modal/src/lib/settings-modal.tsx b/frontend/libs/components/settings-modal/src/lib/settings-modal.tsx
index bb55f7e297..9c6e4a364b 100644
--- a/frontend/libs/components/settings-modal/src/lib/settings-modal.tsx
+++ b/frontend/libs/components/settings-modal/src/lib/settings-modal.tsx
@@ -7,11 +7,13 @@ import {
   faVideo,
   faImage,
   faCog,
+  faVolumeHigh,
 } from "@fortawesome/pro-solid-svg-icons";
 import { twMerge } from "tailwind-merge";
 import { Input } from "@storyteller/ui-input";
 import { Select, SelectValue } from "@storyteller/ui-select";
-import { MiscSettingsPane } from "./MiscSettingsPane";
+import { MiscSettingsPane } from "./panes/MiscSettingsPane";
+import { AudioSettingsPane } from "./panes/AudioSettingsPane";
 
 interface SettingsModalProps {
   isOpen: boolean;
@@ -24,7 +26,7 @@ interface AccountInfo {
   credits: number;
 }
 
-type SettingsSection = "misc" | "accounts" | "video" | "image";
+type SettingsSection = "misc" | "audio" | "accounts" | "video" | "image";
 
 export const SettingsModal = ({ isOpen, onClose }: SettingsModalProps) => {
   const [accountInfo] = useState<AccountInfo>({
@@ -42,6 +44,7 @@ export const SettingsModal = ({ isOpen, onClose }: SettingsModalProps) => {
   const [humanVideoProvider, setHumanVideoProvider] = useState("artcraft");
 
   const sections = [
+    { id: "audio" as const, label: "Audio", icon: faVolumeHigh },
     { id: "misc" as const, label: "Misc", icon: faCog },
     { id: "accounts" as const, label: "Accounts", icon: faUser },
     { id: "video" as const, label: "Video", icon: faVideo },
@@ -50,6 +53,14 @@ export const SettingsModal = ({ isOpen, onClose }: SettingsModalProps) => {
 
   const renderContent = () => {
     switch (selectedSection) {
+      case "audio":
+        return (
+          <AudioSettingsPane />
+        );
+      case "misc":
+        return (
+          <MiscSettingsPane />
+        );
       case "accounts":
         return (
           <div className="space-y-4">
@@ -162,11 +173,6 @@ export const SettingsModal = ({ isOpen, onClose }: SettingsModalProps) => {
             <button className="text-blue-600">Various Image Settings (TODO)...</button>
           </div>
         );
-
-      case "misc":
-        return (
-          <MiscSettingsPane />
-        );
     }
   };