salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: UI improvements with design tokens - theme switching, full width settings, visible buttons, and delete icons

Browse Source
This commit is contained in:
Shantur Rathore
2025-10-28 21:53:42 +00:00
parent b7b626ba4c
commit e84cab5527
3 changed files with 59 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/folder-selection-view.tsx
View File

@@ -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>

45
src/lib/theme.tsx
View File

@@ -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(() => {

2
src/styles/components.css
View File

@@ -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);
}