wip(app): settings

1 files changed, 63 insertions, 0 deletions

diff --git a/packages/app/src/components/settings-general.tsx b/packages/app/src/components/settings-general.tsx
index e9965b0fa..52672d01f 100644
--- a/packages/app/src/components/settings-general.tsx
+++ b/packages/app/src/components/settings-general.tsx
@@ -3,6 +3,7 @@ import { Select } from "@opencode-ai/ui/select"
 import { Switch } from "@opencode-ai/ui/switch"
 import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme"
 import { useSettings } from "@/context/settings"
+import { playSound, SOUND_OPTIONS } from "@/utils/sound"
 
 export const SettingsGeneral: Component = () => {
   const theme = useTheme()
@@ -20,11 +21,20 @@ export const SettingsGeneral: Component = () => {
 
   const fontOptions = [
     { value: "ibm-plex-mono", label: "IBM Plex Mono" },
+    { value: "cascadia-code", label: "Cascadia Code" },
     { value: "fira-code", label: "Fira Code" },
+    { value: "hack", label: "Hack" },
+    { value: "inconsolata", label: "Inconsolata" },
+    { value: "intel-one-mono", label: "Intel One Mono" },
     { value: "jetbrains-mono", label: "JetBrains Mono" },
+    { value: "meslo-lgs", label: "Meslo LGS" },
+    { value: "roboto-mono", label: "Roboto Mono" },
     { value: "source-code-pro", label: "Source Code Pro" },
+    { value: "ubuntu-mono", label: "Ubuntu Mono" },
   ]
 
+  const soundOptions = [...SOUND_OPTIONS]
+
   return (
     <div class="flex flex-col h-full overflow-y-auto no-scrollbar">
       <div class="flex flex-col gap-8 p-8 max-w-[720px]">
@@ -110,6 +120,59 @@ export const SettingsGeneral: Component = () => {
             />
           </SettingsRow>
         </div>
+
+        {/* Sound effects Section */}
+        <div class="flex flex-col gap-1">
+          <h3 class="text-14-medium text-text-strong pb-2">Sound effects</h3>
+
+          <SettingsRow title="Agent" description="Play sound when the agent is complete or needs attention">
+            <Select
+              options={soundOptions}
+              current={soundOptions.find((o) => o.id === settings.sounds.agent())}
+              value={(o) => o.id}
+              label={(o) => o.label}
+              onSelect={(option) => {
+                if (!option) return
+                settings.sounds.setAgent(option.id)
+                playSound(option.src)
+              }}
+              variant="secondary"
+              size="small"
+            />
+          </SettingsRow>
+
+          <SettingsRow title="Permissions" description="Play sound when a permission is required">
+            <Select
+              options={soundOptions}
+              current={soundOptions.find((o) => o.id === settings.sounds.permissions())}
+              value={(o) => o.id}
+              label={(o) => o.label}
+              onSelect={(option) => {
+                if (!option) return
+                settings.sounds.setPermissions(option.id)
+                playSound(option.src)
+              }}
+              variant="secondary"
+              size="small"
+            />
+          </SettingsRow>
+
+          <SettingsRow title="Errors" description="Play sound when an error occurs">
+            <Select
+              options={soundOptions}
+              current={soundOptions.find((o) => o.id === settings.sounds.errors())}
+              value={(o) => o.id}
+              label={(o) => o.label}
+              onSelect={(option) => {
+                if (!option) return
+                settings.sounds.setErrors(option.id)
+                playSound(option.src)
+              }}
+              variant="secondary"
+              size="small"
+            />
+          </SettingsRow>
+        </div>
       </div>
     </div>
   )