From e84cab5527bb2982083de8608fd66caf7a9526a9 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 28 Oct 2025 21:53:42 +0000
Subject: [PATCH] fix: UI improvements with design tokens - theme switching,
 full width settings, visible buttons, and delete icons

---
 src/components/folder-selection-view.tsx | 33 ++++++++++-------
 src/lib/theme.tsx                        | 45 +++++++++++++++++++-----
 src/styles/components.css                |  2 +-
 3 files changed, 59 insertions(+), 21 deletions(-)

diff --git a/src/components/folder-selection-view.tsx b/src/components/folder-selection-view.tsx
index f3279c46..12aaea3f 100644
--- a/src/components/folder-selection-view.tsx
+++ b/src/components/folder-selection-view.tsx
@@ -224,7 +224,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                         </button>
                         <button
                           onClick={(e) => handleRemove(folder.path, e)}
-                          class="opacity-0 group-hover:opacity-100 p-2.5 transition-all mr-2 hover:bg-red-100 dark:hover:bg-red-900/30"
+                          class="p-2.5 transition-all mr-2 hover:bg-red-100 dark:hover:bg-red-900/30 opacity-70 hover:opacity-100"
                           title="Remove from recent"
                         >
                           <Trash2 class="w-3.5 h-3.5 transition-colors icon-muted hover:text-red-600 dark:hover:text-red-400" />
@@ -243,14 +243,14 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
               <p class="panel-subtitle">Select any folder on your computer</p>
             </div>
 
-            <div class="panel-body">
+            <div class="panel-body space-y-3">
               <button
                 onClick={handleBrowse}
                 disabled={props.isLoading}
-                class={`w-full px-4 py-2.5 rounded-lg transition-all font-medium flex items-center justify-between text-sm disabled:cursor-not-allowed ${props.isLoading ? "selector-button-secondary disabled" : "selector-button-primary"}`}
+                class="button-primary w-full flex items-center justify-between text-sm disabled:cursor-not-allowed"
                 onMouseEnter={() => setFocusMode("new")}
               >
-                <div class="flex items-center gap-2 flex-1 justify-center">
+                <div class="flex items-center gap-2">
                   <FolderPlus class="w-4 h-4" />
                   <span>{props.isLoading ? "Opening..." : "Browse Folders"}</span>
                 </div>
@@ -258,6 +258,15 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                   Cmd+Enter
                 </kbd>
               </button>
+
+              <button
+                onClick={handleBrowse}
+                disabled={props.isLoading}
+                class="button-secondary w-full flex items-center justify-center gap-2 text-sm disabled:cursor-not-allowed"
+              >
+                <FolderPlus class="w-4 h-4" />
+                <span>Create New Session</span>
+              </button>
             </div>
 
             {/* Advanced settings section */}
@@ -267,20 +276,20 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                 class="panel-section-header"
               >
                 <div class="flex items-center gap-2">
-                  <Settings class="w-4 h-4" style="color: var(--text-muted)" />
-                  <span class="text-sm font-medium" style="color: var(--text-secondary)">Advanced Settings</span>
+                  <Settings class="w-4 h-4 icon-muted" />
+                  <span class="text-sm font-medium text-secondary">Advanced Settings</span>
                 </div>
                 {showAdvanced() ? (
-                  <ChevronUp class="w-4 h-4" style="color: var(--text-muted)" />
+                  <ChevronUp class="w-4 h-4 icon-muted" />
                 ) : (
-                  <ChevronDown class="w-4 h-4" style="color: var(--text-muted)" />
+                  <ChevronDown class="w-4 h-4 icon-muted" />
                 )}
               </button>
 
               <Show when={showAdvanced()}>
-                <div class="panel-section-content">
-                  <div>
-                    <div class="text-sm font-medium mb-2" style="color: var(--text-secondary)">OpenCode Binary</div>
+                <div class="panel-section-content w-full">
+                  <div class="w-full">
+                    <div class="text-sm font-medium mb-2 text-secondary">OpenCode Binary</div>
                     <OpenCodeBinarySelector
                       selectedBinary={selectedBinary()}
                       onBinaryChange={handleBinaryChange}
@@ -288,7 +297,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                     />
                   </div>
 
-                  <div>
+                  <div class="w-full">
                     <EnvironmentVariablesEditor disabled={props.isLoading} />
                   </div>
                 </div>
diff --git a/src/lib/theme.tsx b/src/lib/theme.tsx
index 9477c6dc..22cf3f00 100644
--- a/src/lib/theme.tsx
+++ b/src/lib/theme.tsx
@@ -19,20 +19,34 @@ function applyTheme(dark: boolean) {
 }
 
 export function ThemeProvider(props: { children: JSX.Element }) {
-  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
-  const [isDark, setIsDarkSignal] = createSignal(prefersDark)
+  const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)")
+  const [isDark, setIsDarkSignal] = createSignal(systemPrefersDark.matches)
 
-  applyTheme(prefersDark)
+  applyTheme(systemPrefersDark.matches)
 
   async function loadTheme() {
     try {
       const config = await storage.loadConfig()
-      const savedTheme = (config as any).theme
-      const initialDark = savedTheme ? savedTheme === "dark" : prefersDark
-      setIsDarkSignal(initialDark)
-      applyTheme(initialDark)
+      const savedTheme = (config as any)?.theme
+      let themeDark: boolean
+
+      if (savedTheme === "system") {
+        themeDark = systemPrefersDark.matches
+      } else if (savedTheme === "dark") {
+        themeDark = true
+      } else if (savedTheme === "light") {
+        themeDark = false
+      } else {
+        themeDark = systemPrefersDark.matches
+      }
+
+      setIsDarkSignal(themeDark)
+      applyTheme(themeDark)
     } catch (error) {
       console.warn("Failed to load theme from config:", error)
+      const themeDark = systemPrefersDark.matches
+      setIsDarkSignal(themeDark)
+      applyTheme(themeDark)
     }
   }
 
@@ -53,7 +67,22 @@ export function ThemeProvider(props: { children: JSX.Element }) {
       loadTheme()
     })
 
-    return unsubscribe
+    // Listen for system theme changes
+    const handleSystemThemeChange = (e: MediaQueryListEvent) => {
+      const config = (window as any).currentConfig
+      const savedTheme = config?.theme
+      if (!savedTheme || savedTheme === "system") {
+        setIsDarkSignal(e.matches)
+        applyTheme(e.matches)
+      }
+    }
+
+    systemPrefersDark.addEventListener("change", handleSystemThemeChange)
+
+    return () => {
+      unsubscribe()
+      systemPrefersDark.removeEventListener("change", handleSystemThemeChange)
+    }
   })
 
   createEffect(() => {
diff --git a/src/styles/components.css b/src/styles/components.css
index 76802c66..fc45d435 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -1363,7 +1363,7 @@
 }
 
 .panel-section-content {
-  @apply px-4 py-3 border-t overflow-visible space-y-4;
+  @apply px-4 py-3 border-t overflow-visible space-y-4 w-full;
   border-color: var(--border-base);
   background-color: var(--surface-secondary);
 }