Make imported/linked CSS always a full theme replacement (ticket 020)

Removes the "Use as theme" checkbox/is_theme distinction from
NavMenu.tsx's CSS import and link forms — every imported/linked
stylesheet is now always validated against the canonical --c-*
variable set and becomes a selectable theme, same as today's
is_theme:true path. Drops is_theme entirely from the backend
(CssEntry, ImportCssRequest, LinkCssRequest, CssEntryDto) and from
the frontend CssEntry type; an existing settings.json with a stored
is_theme:false entry still deserializes fine (the field is simply
unknown/ignored) and that entry becomes selectable like any other,
so no migration step is needed. Also drops the now-dead
always-on-overlay CSS injection path from useSettingsPanel.ts, and
changes the CSS filename placeholder from "name.css" to "enter name".

Implemented directly against main rather than merging the dispatched
worktree branch for this ticket, since that branch's base predated
ticket 012 (the custom-themes/imported-CSS consolidation) and its
NavMenu structure no longer matched current main.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o

webapp/src/lib/useSettingsPanel.ts

@@ -17,9 +17,6 @@ import {
   type Settings,
 } from './api'
 
-// `data-*` marker used to find/remove previously-injected CSS tags on re-apply.
-const INJECTED_CSS_ATTR = 'data-ottyl-css-id'
-
 // `data-*` marker for the single injected `<link>` for the active custom theme, if any.
 const INJECTED_THEME_ATTR = 'data-ottyl-theme-css-id'
 
@@ -40,21 +37,9 @@ function applyColorScheme(colorScheme: ColorScheme, customThemeActive: boolean)
   root.dataset.colorScheme = colorScheme
 }
 
-// Injects a `<link>` per CSS entry, replacing any this hook previously injected. Only non-theme entries are applied unconditionally; theme entries are applied separately, only while selected — see `applyCustomThemeCss`.
-function applyCssEntries(entries: CssEntry[]) {
-  document.querySelectorAll(`link[${INJECTED_CSS_ATTR}]`).forEach((el) => el.remove())
-  for (const entry of entries) {
-    const href = entry.kind === 'imported' ? cssContentUrl(entry.id) : entry.path_or_url
-    if (!href) continue
-    const link = document.createElement('link')
-    link.rel = 'stylesheet'
-    link.href = href
-    link.setAttribute(INJECTED_CSS_ATTR, entry.id)
-    document.head.appendChild(link)
-  }
-}
-
-// Same injection mechanism as `applyCssEntries`, kept separate since this one is conditional on `settings.custom_theme_id`; `entry` null just removes any previously-injected tag.
+// Injects a `<link>` for the active custom theme entry, if any (ticket 020: every CSS entry is
+// always a selectable theme now, so this is the only injection path — there's no more
+// always-on-overlay mode). `entry` null just removes any previously-injected tag.
 function applyCustomThemeCss(entry: CssEntry | null) {
   document.querySelectorAll(`link[${INJECTED_THEME_ATTR}]`).forEach((el) => el.remove())
   if (!entry) return
@@ -99,17 +84,13 @@ export function useSettingsPanel() {
   }, [refreshSettings, refreshCss, refreshProfiles])
 
   const activeCustomTheme = settings?.custom_theme_id
-    ? cssEntries.find((entry) => entry.is_theme && entry.id === settings.custom_theme_id) ?? null
+    ? cssEntries.find((entry) => entry.id === settings.custom_theme_id) ?? null
     : null
 
   useEffect(() => {
     if (settings) applyColorScheme(settings.color_scheme, activeCustomTheme !== null)
   }, [settings, activeCustomTheme])
 
-  useEffect(() => {
-    applyCssEntries(cssEntries.filter((entry) => !entry.is_theme))
-  }, [cssEntries])
-
   useEffect(() => {
     applyCustomThemeCss(activeCustomTheme)
   }, [activeCustomTheme])
@@ -162,22 +143,20 @@ export function useSettingsPanel() {
     [guarded],
   )
 
-  // One entry point for both "configured/imported CSS" and "custom themes" —
-  // `isTheme` is the only thing distinguishing them (ticket 012), so there's
-  // no separate theme-only import path.
+  // Every entry is always a selectable theme (ticket 020), so there's a single import path.
   const importCssEntry = useCallback(
-    (filename: string, content: string, isTheme = false) =>
+    (filename: string, content: string) =>
       guarded(async () => {
-        await importCss(filename, content, isTheme)
+        await importCss(filename, content)
         await refreshCss()
       })(),
     [guarded, refreshCss],
   )
 
   const linkCssEntry = useCallback(
-    (pathOrUrl: string, isTheme = false) =>
+    (pathOrUrl: string) =>
       guarded(async () => {
-        await linkCss(pathOrUrl, isTheme)
+        await linkCss(pathOrUrl)
         await refreshCss()
       })(),
     [guarded, refreshCss],