Remove uploading css functionality. Themes are hard-coded. Change the code

webapp/src/components/NavMenu.tsx

@@ -1,11 +1,10 @@
 import { useEffect, useState } from 'react'
 import type { Stats } from '../lib/api'
-import { cssContentUrl, sendTestAlertNotification, type ColorScheme, type CssEntry } from '../lib/api'
+import { sendTestAlertNotification } from '../lib/api'
 import { useSettingsPanel } from '../lib/useSettingsPanel'
 import { useDocsNav, type DocsTarget } from '../lib/docsNav'
 import { DocsPanel } from './Docs'
 import { HelpIcon } from './HelpIcon'
-import { BUILTIN_THEMES, downloadThemeFile, generateThemeCss, parseThemeCss } from '../lib/themes'
 import ottylIcon from '../assets/ottyl-icon.svg'
 
 type PanelName = 'settings' | 'docs' | null
@@ -18,27 +17,9 @@ const PANEL_TITLES: Record<Exclude<PanelName, null>, string> = {
 /** Mirrors the backend's `profile::DEFAULT_PROFILE_NAME` — always exists, can't be deleted. */
 const DEFAULT_PROFILE_NAME = 'Default'
 
-const COLOR_SCHEMES: ColorScheme[] = [
-  'system',
-  'light',
-  'dark',
-  'red',
-  'green',
-  'blue',
-  'yellow',
-  'pink',
-  'orange',
-  'light_green',
-  'light_red',
-  'light_blue',
-  'light_yellow',
-  'light_pink',
-  'light_orange',
-]
-
-/** Display label for a `ColorScheme`: underscores become spaces so `capitalize` (which titles each word) renders e.g. "light_green" as "Light Green". */
-function schemeLabel(scheme: ColorScheme): string {
-  return scheme.replace(/_/g, ' ')
+/** Display label for a theme name: underscores become spaces so `capitalize` (which titles each word) renders e.g. "light_green" as "Light Green". */
+function themeLabel(theme: string): string {
+  return theme.replace(/_/g, ' ')
 }
 
 /** Ticket 073: plain `Xms` under a second (this stat is normally near-zero, so that's the common case), a humantime-style `Xs`/`Xm` above it — mirrors the backend's own humantime-duration inputs (see `Docs.tsx`'s window-parsing note) without pulling in a full duration-formatting library for one stat. */
@@ -213,10 +194,6 @@ function PresetsDropdown({ panel }: { panel: ReturnType<typeof useSettingsPanel>
 
 function SettingsPanel({ panel }: { panel: ReturnType<typeof useSettingsPanel> }) {
   const [maxLogsInput, setMaxLogsInput] = useState('')
-  const [cssFilename, setCssFilename] = useState('')
-  const [cssContent, setCssContent] = useState('')
-  const [cssUploadError, setCssUploadError] = useState<string | null>(null)
-  const [cssLinkUrl, setCssLinkUrl] = useState('')
   const [ntfyTopicInput, setNtfyTopicInput] = useState('')
   const [ntfyServerInput, setNtfyServerInput] = useState('')
   const [ntfyTestError, setNtfyTestError] = useState<string | null>(null)
@@ -272,198 +249,43 @@ function SettingsPanel({ panel }: { panel: ReturnType<typeof useSettingsPanel> }
     panel.setMaxLogs(Math.floor(parsed))
   }
 
-  async function handleCssFileChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0]
-    if (!file) return
-    setCssFilename(file.name)
-    setCssContent(await file.text())
-    setCssUploadError(null)
-  }
-
-  // Every imported/linked stylesheet is always a selectable style, listed alongside the built-in
-  // colour schemes (ticket 020/047), so it's always validated against the canonical `--c-*`
-  // variable set before it's sent — that's a floor, not a ceiling: the stylesheet is free to also
-  // carry rules for any other selector, up to and including a full layout redesign.
-  async function handleCssImport(e: React.FormEvent) {
-    e.preventDefault()
-    setCssUploadError(null)
-    if (!cssFilename.trim() || !cssContent.trim()) return
-    const { missing } = parseThemeCss(cssContent)
-    if (missing.length > 0) {
-      setCssUploadError(`Missing variable${missing.length > 1 ? 's' : ''}: ${missing.join(', ')}`)
-      return
-    }
-    await panel.importCssEntry(cssFilename.trim(), cssContent)
-    setCssFilename('')
-    setCssContent('')
-  }
-
-  async function handleCssLink(e: React.FormEvent) {
-    e.preventDefault()
-    if (!cssLinkUrl.trim()) return
-    await panel.linkCssEntry(cssLinkUrl.trim())
-    setCssLinkUrl('')
-  }
-
-  function downloadBuiltinTheme(name: string) {
-    const vars = BUILTIN_THEMES[name]
-    if (!vars) return
-    downloadThemeFile(`${name}.css`, generateThemeCss(vars))
-  }
-
-  async function downloadCssEntry(entry: CssEntry) {
-    if (entry.kind === 'imported') {
-      const res = await fetch(cssContentUrl(entry.id))
-      const text = await res.text()
-      downloadThemeFile(entry.filename ?? `${entry.id}.css`, text)
-    } else if (entry.path_or_url) {
-      window.open(entry.path_or_url, '_blank', 'noopener')
-    }
-  }
-
   return (
     <div className="flex flex-col gap-5 text-sm text-text-secondary">
       <section>
         <div className="mb-2 flex items-center gap-1.5">
-          <h3 className="text-xs font-semibold uppercase tracking-wide text-text-subtle">Style</h3>
+          <h3 className="text-xs font-semibold uppercase tracking-wide text-text-subtle">Theme</h3>
           <span className="text-[11px] text-text-faint">
-            one list of interchangeable styles — a built-in palette or your own imported/linked stylesheet. Any of
-            them can be a simple colour swap or a full layout redesign; only one is active at a time.
+            each theme is a complete stylesheet (colours, spacing, fonts, sizes, ...); only one is active at a time.
+            To add your own, drop a `.css` file in `themes/` and rebuild.
           </span>
         </div>
-        <div className="mb-3 flex flex-wrap gap-1">
-          {COLOR_SCHEMES.map((scheme) => (
-            <div key={scheme} className="flex items-center">
-              <button
-                type="button"
-                onClick={() => panel.setColorScheme(scheme)}
-                className={`rounded-l border px-2 py-1 text-xs capitalize ${
-                  !panel.activeCustomTheme && panel.settings?.color_scheme === scheme
-                    ? 'border-border-strong bg-surface-2 text-text'
-                    : 'border-border-soft text-text-muted hover:bg-surface-2'
-                }`}
-              >
-                {schemeLabel(scheme)}
-              </button>
-              {scheme !== 'system' && (
-                <button
-                  type="button"
-                  onClick={() => downloadBuiltinTheme(scheme)}
-                  className="rounded-r border border-l-0 border-border-soft px-1.5 py-1 text-xs text-text-faint hover:bg-surface-2 hover:text-text"
-                  aria-label={`Download ${schemeLabel(scheme)} theme`}
-                  title="Download as .css"
-                >
-                  ↓
-                </button>
-              )}
-            </div>
+        <div className="flex flex-wrap gap-1">
+          <button
+            type="button"
+            onClick={() => panel.setTheme('system')}
+            className={`rounded border px-2 py-1 text-xs capitalize ${
+              panel.settings?.theme === 'system'
+                ? 'border-border-strong bg-surface-2 text-text'
+                : 'border-border-soft text-text-muted hover:bg-surface-2'
+            }`}
+          >
+            System
+          </button>
+          {panel.themes.map((theme) => (
+            <button
+              key={theme}
+              type="button"
+              onClick={() => panel.setTheme(theme)}
+              className={`rounded border px-2 py-1 text-xs capitalize ${
+                panel.settings?.theme === theme
+                  ? 'border-border-strong bg-surface-2 text-text'
+                  : 'border-border-soft text-text-muted hover:bg-surface-2'
+              }`}
+            >
+              {themeLabel(theme)}
+            </button>
           ))}
         </div>
-
-        {panel.cssEntries.length === 0 ? (
-          <div className="mb-2 text-xs text-text-faint">No styles imported or linked yet.</div>
-        ) : (
-          <ul className="mb-2 flex flex-col gap-1">
-            {panel.cssEntries.map((entry) => (
-              <li
-                key={entry.id}
-                className="flex items-center justify-between rounded border border-border px-2 py-1 text-xs"
-              >
-                <div className="min-w-0 flex-1">
-                  <button
-                    type="button"
-                    onClick={() => panel.setCustomTheme(entry.id)}
-                    className={`block w-full truncate text-left capitalize ${
-                      panel.activeCustomTheme?.id === entry.id ? 'text-text' : 'text-text-muted hover:text-text'
-                    }`}
-                  >
-                    {entry.filename ?? entry.path_or_url}
-                  </button>
-                  <div className="text-[10px] uppercase text-text-faint">{entry.kind}</div>
-                </div>
-                <div className="ml-2 flex shrink-0 items-center gap-1">
-                  <button
-                    type="button"
-                    onClick={() => downloadCssEntry(entry)}
-                    className="rounded px-1.5 text-text-subtle hover:bg-surface-2 hover:text-text"
-                    aria-label={`Download ${entry.filename ?? entry.path_or_url}`}
-                    title="Download as .css"
-                  >
-                    ↓
-                  </button>
-                  {entry.kind === 'imported' ? (
-                    <button
-                      type="button"
-                      onClick={() => panel.removeCssEntry(entry.id)}
-                      className="rounded px-1.5 text-text-subtle hover:bg-surface-2 hover:text-danger-text"
-                      aria-label={`Delete ${entry.filename}`}
-                    >
-                      delete
-                    </button>
-                  ) : (
-                    <span className="text-text-faintest" title="Linked CSS isn't deletable here">
-                      —
-                    </span>
-                  )}
-                </div>
-              </li>
-            ))}
-          </ul>
-        )}
-
-        <p className="mb-2 text-[11px] text-text-faint">
-          Add your own style below — a stylesheet, uploaded or linked by URL/path. It must at least define every{' '}
-          <code>--c-*</code> variable the built-ins do, but nothing stops it from also targeting any other selector
-          in the app (layout, spacing, fonts, anything) — it isn't limited to palette overrides.
-        </p>
-
-        <form onSubmit={handleCssImport} className="flex flex-col gap-2">
-          <input
-            type="file"
-            accept=".css,text/css"
-            onChange={handleCssFileChange}
-            className="text-xs text-text-muted file:mr-2 file:rounded file:border file:border-border-soft file:bg-surface-2 file:px-2 file:py-1 file:text-text"
-          />
-          <input
-            type="text"
-            placeholder="enter name"
-            value={cssFilename}
-            onChange={(e) => setCssFilename(e.target.value)}
-            className="rounded border border-border-soft bg-surface-1 px-2 py-1 text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
-          />
-          <textarea
-            placeholder="Paste CSS content here"
-            value={cssContent}
-            onChange={(e) => setCssContent(e.target.value)}
-            rows={4}
-            className="resize-y rounded border border-border-soft bg-surface-1 px-2 py-1 font-mono text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
-          />
-          {cssUploadError && <div className="text-xs text-danger-text-strong">{cssUploadError}</div>}
-          <button
-            type="submit"
-            className="rounded border border-border-soft px-2 py-1 text-xs text-text hover:bg-surface-2"
-          >
-            Import
-          </button>
-        </form>
-
-        <form onSubmit={handleCssLink} className="mt-2 flex flex-col gap-2">
-          <input
-            type="text"
-            placeholder="https://example.com/style.css"
-            value={cssLinkUrl}
-            onChange={(e) => setCssLinkUrl(e.target.value)}
-            className="min-w-0 flex-1 rounded border border-border-soft bg-surface-1 px-2 py-1 text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
-          />
-          <div className="flex items-center gap-2">
-            <button
-              type="submit"
-              className="shrink-0 rounded border border-border-soft px-2 py-1 text-xs text-text hover:bg-surface-2"
-            >
-              Link
-            </button>
-          </div>
-        </form>
       </section>
 
       <section>