Merge branch 'worktree-agent-a6820222665a87090'
# Conflicts: # webapp/src/lib/api.ts
This commit is contained in:
Hugh Kaznowski
@@ -1,30 +1,276 @@
|
||||
import { useState } from 'react'
|
||||
import type { Stats } from '../lib/api'
|
||||
import type { ColorScheme } from '../lib/api'
|
||||
import { useSettingsPanel } from '../lib/useSettingsPanel'
|
||||
|
||||
type PanelName = 'settings' | 'presets' | null
|
||||
|
||||
const COLOR_SCHEMES: ColorScheme[] = ['light', 'dark', 'system']
|
||||
|
||||
export function NavMenu({ stats }: { stats: Stats | null }) {
|
||||
const [openPanel, setOpenPanel] = useState<PanelName>(null)
|
||||
const panel = useSettingsPanel()
|
||||
|
||||
function togglePanel(name: PanelName) {
|
||||
setOpenPanel((current) => (current === name ? null : name))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-48 shrink-0 flex-col justify-between border-r border-neutral-800 p-3">
|
||||
<div>
|
||||
<div className="mb-4 text-lg font-semibold text-neutral-100">ottyl</div>
|
||||
<nav className="flex flex-col gap-1 text-sm text-neutral-400">
|
||||
<span className="rounded bg-neutral-800 px-2 py-1 text-neutral-100">Dashboard</span>
|
||||
<span className="cursor-not-allowed px-2 py-1 opacity-50" title="Coming soon">
|
||||
Presets
|
||||
</span>
|
||||
<span className="cursor-not-allowed px-2 py-1 opacity-50" title="Coming soon">
|
||||
Settings
|
||||
</span>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="text-xs text-neutral-500">
|
||||
{stats ? (
|
||||
<>
|
||||
<div>{stats.log_count} logs</div>
|
||||
<div>seq {stats.first_sequence ?? 0}–{stats.last_sequence ?? 0}</div>
|
||||
</>
|
||||
) : (
|
||||
<div>connecting…</div>
|
||||
)}
|
||||
<div className="flex h-full">
|
||||
<div className="flex h-full w-48 shrink-0 flex-col justify-between border-r border-neutral-800 p-3">
|
||||
<div>
|
||||
<div className="mb-4 text-lg font-semibold text-neutral-100">ottyl</div>
|
||||
<nav className="flex flex-col gap-1 text-sm text-neutral-400">
|
||||
<span className="rounded bg-neutral-800 px-2 py-1 text-neutral-100">Dashboard</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => togglePanel('presets')}
|
||||
className={`rounded px-2 py-1 text-left hover:bg-neutral-800 ${
|
||||
openPanel === 'presets' ? 'bg-neutral-800 text-neutral-100' : ''
|
||||
}`}
|
||||
>
|
||||
Presets
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => togglePanel('settings')}
|
||||
className={`rounded px-2 py-1 text-left hover:bg-neutral-800 ${
|
||||
openPanel === 'settings' ? 'bg-neutral-800 text-neutral-100' : ''
|
||||
}`}
|
||||
>
|
||||
Settings
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="text-xs text-neutral-500">
|
||||
{stats ? (
|
||||
<>
|
||||
<div>{stats.log_count} logs</div>
|
||||
<div>
|
||||
seq {stats.first_sequence ?? 0}–{stats.last_sequence ?? 0}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div>connecting…</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{openPanel && (
|
||||
<div className="fixed inset-y-0 left-48 z-20 flex w-80 flex-col overflow-y-auto border-r border-neutral-800 bg-neutral-900 p-4 shadow-xl">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h2 className="text-sm font-semibold text-neutral-100">
|
||||
{openPanel === 'settings' ? 'Settings' : 'Presets'}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpenPanel(null)}
|
||||
className="rounded px-1.5 text-neutral-500 hover:bg-neutral-800 hover:text-neutral-200"
|
||||
aria-label="Close panel"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
{panel.error && (
|
||||
<div className="mb-3 rounded border border-red-900 bg-red-950/50 px-2 py-1 text-xs text-red-300">
|
||||
{panel.error}
|
||||
</div>
|
||||
)}
|
||||
{openPanel === 'settings' ? <SettingsPanel panel={panel} /> : <PresetsPanel panel={panel} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SettingsPanel({ panel }: { panel: ReturnType<typeof useSettingsPanel> }) {
|
||||
const [filename, setFilename] = useState('')
|
||||
const [content, setContent] = useState('')
|
||||
|
||||
async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = e.target.files?.[0]
|
||||
if (!file) return
|
||||
setFilename(file.name)
|
||||
setContent(await file.text())
|
||||
}
|
||||
|
||||
async function handleImport(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!filename.trim() || !content.trim()) return
|
||||
await panel.importCssEntry(filename.trim(), content)
|
||||
setFilename('')
|
||||
setContent('')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-5 text-sm text-neutral-300">
|
||||
<section>
|
||||
<h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">Colour scheme</h3>
|
||||
<div className="flex gap-1">
|
||||
{COLOR_SCHEMES.map((scheme) => (
|
||||
<button
|
||||
key={scheme}
|
||||
type="button"
|
||||
onClick={() => panel.setColorScheme(scheme)}
|
||||
className={`flex-1 rounded border px-2 py-1 text-xs capitalize ${
|
||||
panel.settings?.color_scheme === scheme
|
||||
? 'border-neutral-400 bg-neutral-800 text-neutral-100'
|
||||
: 'border-neutral-700 text-neutral-400 hover:bg-neutral-800'
|
||||
}`}
|
||||
>
|
||||
{scheme}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-1 text-[11px] text-neutral-600">
|
||||
"Light" only recolours the base page for now — most components still use fixed dark colours.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">Import CSS</h3>
|
||||
<form onSubmit={handleImport} className="flex flex-col gap-2">
|
||||
<input
|
||||
type="file"
|
||||
accept=".css,text/css"
|
||||
onChange={handleFileChange}
|
||||
className="text-xs text-neutral-400 file:mr-2 file:rounded file:border file:border-neutral-700 file:bg-neutral-800 file:px-2 file:py-1 file:text-neutral-200"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="filename.css"
|
||||
value={filename}
|
||||
onChange={(e) => setFilename(e.target.value)}
|
||||
className="rounded border border-neutral-700 bg-neutral-900 px-2 py-1 text-xs text-neutral-100 placeholder:text-neutral-500 focus:border-neutral-500 focus:outline-none"
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Paste CSS content here"
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
rows={4}
|
||||
className="resize-y rounded border border-neutral-700 bg-neutral-900 px-2 py-1 font-mono text-xs text-neutral-100 placeholder:text-neutral-500 focus:border-neutral-500 focus:outline-none"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded border border-neutral-700 px-2 py-1 text-xs text-neutral-200 hover:bg-neutral-800"
|
||||
>
|
||||
Import
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">Configured CSS</h3>
|
||||
{panel.cssEntries.length === 0 ? (
|
||||
<div className="text-xs text-neutral-600">No CSS configured.</div>
|
||||
) : (
|
||||
<ul className="flex flex-col gap-1">
|
||||
{panel.cssEntries.map((entry) => (
|
||||
<li
|
||||
key={entry.id}
|
||||
className="flex items-center justify-between rounded border border-neutral-800 px-2 py-1 text-xs"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-neutral-200">{entry.filename ?? entry.path_or_url}</div>
|
||||
<div className="text-[10px] uppercase text-neutral-600">{entry.kind}</div>
|
||||
</div>
|
||||
{entry.kind === 'imported' ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => panel.removeCssEntry(entry.id)}
|
||||
className="ml-2 shrink-0 rounded px-1.5 text-neutral-500 hover:bg-neutral-800 hover:text-red-400"
|
||||
aria-label={`Delete ${entry.filename}`}
|
||||
>
|
||||
delete
|
||||
</button>
|
||||
) : (
|
||||
<span className="ml-2 shrink-0 text-neutral-700" title="Linked CSS isn't deletable here">
|
||||
—
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PresetsPanel({ panel }: { panel: ReturnType<typeof useSettingsPanel> }) {
|
||||
const [newName, setNewName] = useState('')
|
||||
|
||||
async function handleCreate(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!newName.trim()) return
|
||||
await panel.addProfile(newName.trim())
|
||||
setNewName('')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 text-sm text-neutral-300">
|
||||
<form onSubmit={handleCreate} className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="new profile name"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
className="flex-1 rounded border border-neutral-700 bg-neutral-900 px-2 py-1 text-xs text-neutral-100 placeholder:text-neutral-500 focus:border-neutral-500 focus:outline-none"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded border border-neutral-700 px-2 py-1 text-xs text-neutral-200 hover:bg-neutral-800"
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{panel.profiles.length === 0 ? (
|
||||
<div className="text-xs text-neutral-600">No profiles yet.</div>
|
||||
) : (
|
||||
<ul className="flex flex-col gap-1">
|
||||
{panel.profiles.map((profile) => {
|
||||
const isActive = panel.settings?.active_profile === profile.name
|
||||
return (
|
||||
<li
|
||||
key={profile.name}
|
||||
className={`rounded border px-2 py-1.5 text-xs ${
|
||||
isActive ? 'border-neutral-500 bg-neutral-800' : 'border-neutral-800'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => !isActive && panel.switchProfile(profile.name)}
|
||||
disabled={isActive}
|
||||
className={`truncate text-left font-medium ${
|
||||
isActive ? 'cursor-default text-neutral-100' : 'text-neutral-200 hover:underline'
|
||||
}`}
|
||||
title={isActive ? 'Active profile' : `Switch to ${profile.name}`}
|
||||
>
|
||||
{profile.name}
|
||||
{isActive && <span className="ml-1 text-[10px] uppercase text-neutral-400">active</span>}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => panel.removeProfile(profile.name)}
|
||||
className="ml-2 shrink-0 rounded px-1.5 text-neutral-500 hover:bg-neutral-800 hover:text-red-400"
|
||||
aria-label={`Delete ${profile.name}`}
|
||||
>
|
||||
delete
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-1 text-[10px] text-neutral-500">
|
||||
{profile.param_count} params · {profile.metric_count} metrics · {profile.dashboard_count} dashboards
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
<p className="text-[11px] text-neutral-600">
|
||||
Switching profiles hot-swaps the running engine's declared params/metrics immediately — no restart needed.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user