Brooklyn Nicholson
75adf7d603
Remove the outer card chrome (border/bg/shadow/rounded) wrapping each appearance section so they're flat headings + option grids instead of boxes nested inside boxes, matching the other settings pages.
226 lines
8.9 KiB
TypeScript
226 lines
8.9 KiB
TypeScript
import { useStore } from '@nanostores/react'
|
|
import type { ReactNode } from 'react'
|
|
|
|
import { triggerHaptic } from '@/lib/haptics'
|
|
import { Check } from '@/lib/icons'
|
|
import { cn } from '@/lib/utils'
|
|
import { $toolViewMode, setToolViewMode } from '@/store/tool-view'
|
|
import { useTheme } from '@/themes/context'
|
|
import { BUILTIN_THEMES } from '@/themes/presets'
|
|
|
|
import { MODE_OPTIONS } from './constants'
|
|
import { prettyName } from './helpers'
|
|
import { Pill, SettingsContent } from './primitives'
|
|
|
|
function ThemePreview({ name }: { name: string }) {
|
|
const t = BUILTIN_THEMES[name]
|
|
|
|
if (!t) {
|
|
return null
|
|
}
|
|
|
|
const c = t.colors
|
|
|
|
return (
|
|
<div
|
|
className="h-20 overflow-hidden rounded-xl border shadow-xs"
|
|
style={{ backgroundColor: c.background, borderColor: c.border }}
|
|
>
|
|
<div className="flex h-full">
|
|
<div
|
|
className="w-12 border-r"
|
|
style={{
|
|
backgroundColor: c.sidebarBackground ?? c.muted,
|
|
borderColor: c.sidebarBorder ?? c.border
|
|
}}
|
|
/>
|
|
<div className="flex flex-1 flex-col gap-2 p-3">
|
|
<div className="h-2.5 w-16 rounded-full" style={{ backgroundColor: c.foreground }} />
|
|
<div className="h-2 w-24 rounded-full" style={{ backgroundColor: c.mutedForeground }} />
|
|
<div className="mt-auto flex justify-end">
|
|
<div
|
|
className="h-5 w-16 rounded-full border"
|
|
style={{
|
|
backgroundColor: c.userBubble ?? c.muted,
|
|
borderColor: c.userBubbleBorder ?? c.border
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function SectionHead({ title, description, pill }: { title: string; description: string; pill?: ReactNode }) {
|
|
return (
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<div className="text-[length:var(--conversation-text-font-size)] font-medium">{title}</div>
|
|
<div className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
|
|
{description}
|
|
</div>
|
|
</div>
|
|
{pill}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function AppearanceSettings() {
|
|
const { themeName, mode, availableThemes, setTheme, setMode } = useTheme()
|
|
const toolViewMode = useStore($toolViewMode)
|
|
const activeTheme = availableThemes.find(t => t.name === themeName)
|
|
|
|
return (
|
|
<SettingsContent>
|
|
<div className="grid gap-8">
|
|
<p className="max-w-2xl text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
|
|
These are desktop-only display preferences. Mode controls brightness; theme controls the accent palette and
|
|
chat surface styling.
|
|
</p>
|
|
|
|
<section className="grid gap-3">
|
|
<SectionHead
|
|
description="Pick a fixed mode or let Hermes follow your system setting."
|
|
pill={<Pill>{prettyName(mode)}</Pill>}
|
|
title="Color Mode"
|
|
/>
|
|
<div className="grid gap-2 sm:grid-cols-3">
|
|
{MODE_OPTIONS.map(({ id, label, description, icon: Icon }) => {
|
|
const active = mode === id
|
|
|
|
return (
|
|
<button
|
|
className={cn(
|
|
'group rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2.5 text-left transition hover:bg-(--chrome-action-hover)',
|
|
active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
|
|
)}
|
|
key={id}
|
|
onClick={() => {
|
|
triggerHaptic('crisp')
|
|
setMode(id)
|
|
}}
|
|
type="button"
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<span className="flex size-9 items-center justify-center rounded-lg bg-muted text-foreground transition group-hover:bg-background">
|
|
<Icon className="size-4" />
|
|
</span>
|
|
{active && (
|
|
<span className="grid size-5 place-items-center rounded-full bg-primary text-primary-foreground">
|
|
<Check className="size-3.5" />
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="mt-2 text-[length:var(--conversation-text-font-size)] font-medium">{label}</div>
|
|
<div className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
|
|
{description}
|
|
</div>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid gap-3">
|
|
<SectionHead
|
|
description="Product hides raw tool payloads; Technical shows full input/output."
|
|
pill={<Pill>{toolViewMode === 'technical' ? 'Technical' : 'Product'}</Pill>}
|
|
title="Tool Call Display"
|
|
/>
|
|
<div className="grid gap-2 sm:grid-cols-2">
|
|
{(
|
|
[
|
|
{
|
|
id: 'product',
|
|
label: 'Product',
|
|
description: 'Human-friendly tool activity with concise summaries.'
|
|
},
|
|
{
|
|
id: 'technical',
|
|
label: 'Technical',
|
|
description: 'Include raw tool args/results and low-level details.'
|
|
}
|
|
] as const
|
|
).map(option => {
|
|
const active = toolViewMode === option.id
|
|
|
|
return (
|
|
<button
|
|
className={cn(
|
|
'group rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2.5 text-left transition hover:bg-(--chrome-action-hover)',
|
|
active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
|
|
)}
|
|
key={option.id}
|
|
onClick={() => {
|
|
triggerHaptic('selection')
|
|
setToolViewMode(option.id)
|
|
}}
|
|
type="button"
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="text-[length:var(--conversation-text-font-size)] font-medium">{option.label}</div>
|
|
{active && (
|
|
<span className="grid size-5 place-items-center rounded-full bg-primary text-primary-foreground">
|
|
<Check className="size-3.5" />
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
|
|
{option.description}
|
|
</div>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid gap-3">
|
|
<SectionHead
|
|
description="Desktop palettes only. The selected mode is applied on top."
|
|
pill={activeTheme ? <Pill>{activeTheme.label}</Pill> : undefined}
|
|
title="Theme"
|
|
/>
|
|
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
|
{availableThemes.map(theme => {
|
|
const active = themeName === theme.name
|
|
|
|
return (
|
|
<button
|
|
className={cn(
|
|
'rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2 text-left transition hover:bg-(--chrome-action-hover)',
|
|
active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
|
|
)}
|
|
key={theme.name}
|
|
onClick={() => {
|
|
triggerHaptic('crisp')
|
|
setTheme(theme.name)
|
|
}}
|
|
type="button"
|
|
>
|
|
<ThemePreview name={theme.name} />
|
|
<div className="mt-3 flex items-start justify-between gap-3 px-1">
|
|
<div className="min-w-0">
|
|
<div className="truncate text-[length:var(--conversation-text-font-size)] font-medium">
|
|
{theme.label}
|
|
</div>
|
|
<div className="mt-0.5 line-clamp-2 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
|
|
{theme.description}
|
|
</div>
|
|
</div>
|
|
{active && (
|
|
<span className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-primary text-primary-foreground">
|
|
<Check className="size-3.5" />
|
|
</span>
|
|
)}
|
|
</div>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</SettingsContent>
|
|
)
|
|
}
|