feat(web): introduce dark shadcn discovery interface

README.md

@@ -9,6 +9,7 @@ Tech Library is a modular, source-backed reference for modern web, app, and syst
 - immutable revisions, publication pointers, rollback, and claim-level provenance
 - integrated editorial workspace with secure session and CSRF protection
 - Danish/English UI and content selection without translating source code or established technical terms
+- dark-first discovery interface built from local shadcn/ui primitives and Radix accessibility foundations
 - simple reader registration/login with private topic favorites
 - idempotent monitoring of official sources with a daily scheduler and manual trigger
 - installable React/Vite PWA, Fastify API, SQLite/Drizzle data layer, and independent worker
@@ -44,7 +45,7 @@ The Compose stack listens on host port `8000` by default. Copy `.env.example` to
 ## Repository structure
 
 ```text
-apps/web       React, Vite, Radix UI, TanStack Query, Zustand, PWA
+apps/web       React, Vite, shadcn/ui + Radix, TanStack Query, Zustand, PWA
 apps/api       Fastify REST API, editorial policy, authentication
 apps/worker    Official-source monitoring and structured findings
 packages/contracts  Shared Zod schemas and public TypeScript types

apps/web/components.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "aliases": {
+    "components": "@/ui",
+    "utils": "@/lib/utils",
+    "ui": "@/ui/components"
+  }
+}

apps/web/package.json

@@ -4,15 +4,19 @@
   "type": "module",
   "scripts": { "dev": "vite", "build": "tsc -b && vite build", "typecheck": "tsc -b --pretty false", "test": "vitest run src" },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-tabs": "^1.1.13",
     "@tanstack/react-query": "^5.87.1",
     "@tech-library/contracts": "*",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "lucide-react": "^0.544.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router-dom": "^7.9.1",
+    "tailwind-merge": "^3.3.1",
     "zustand": "^5.0.8"
   },
   "devDependencies": {

apps/web/src/features/library/LibraryPage.tsx

@@ -1,58 +1,27 @@
-import { useDeferredValue, useState } from 'react';
+import { useDeferredValue, useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { ArrowUpRight, Search, SlidersHorizontal, X } from 'lucide-react';
+import { ArrowRight, Dices, Search, SlidersHorizontal, X } from 'lucide-react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { api, userApi } from '../../lib/api';
 import { useUiStore } from '../../store/ui';
 import { useText } from '../../store/preferences';
+import { Badge } from '../../ui/components/badge';
+import { Button } from '../../ui/components/button';
+import { Input } from '../../ui/components/input';
 
+const accents = ['violet', 'cyan', 'amber', 'lime', 'rose'];
 export function LibraryPage({ favoritesOnly = false }: { favoritesOnly?: boolean }) {
-  const { language, t } = useText();
+  const { language, t } = useText(); const navigate = useNavigate(); const [query, setQuery] = useState(''); const search = useDeferredValue(query); const { domain, type, setDomain, setType, clear } = useUiStore();
-  const [query, setQuery] = useState('');
+  const params = new URLSearchParams({ pageSize: '50', lang: language }); if (search) params.set('q', search); if (domain) params.set('domain', domain); if (type) params.set('type', type);
-  const search = useDeferredValue(query);
-  const { domain, type, setDomain, setType, clear } = useUiStore();
-  const params = new URLSearchParams({ pageSize: '50' });
-  if (search) params.set('q', search);
-  if (domain) params.set('domain', domain);
-  if (type) params.set('type', type);
-  params.set('lang', language);
   const topics = useQuery({ queryKey: ['topics', language, search, domain, type], queryFn: () => api.topics(params), enabled: !favoritesOnly });
-  const favorites = useQuery({ queryKey: ['favorites', language], queryFn: () => userApi.favorites(language), enabled: favoritesOnly });
+  const favorites = useQuery({ queryKey: ['favorites', language], queryFn: () => userApi.favorites(language), enabled: favoritesOnly }); const facets = useQuery({ queryKey: ['facets'], queryFn: api.facets });
-  const facets = useQuery({ queryKey: ['facets'], queryFn: api.facets });
+  const items = useMemo(() => favoritesOnly ? (favorites.data ?? []) : (topics.data?.items ?? []), [favoritesOnly, favorites.data, topics.data]); const total = favoritesOnly ? items.length : (topics.data?.total ?? 0); const loading = favoritesOnly ? favorites.isLoading : topics.isLoading; const failed = favoritesOnly ? favorites.isError : topics.isError;
-  const items = favoritesOnly ? (favorites.data ?? []) : (topics.data?.items ?? []); const total = favoritesOnly ? items.length : (topics.data?.total ?? 0); const loading = favoritesOnly ? favorites.isLoading : topics.isLoading; const failed = favoritesOnly ? favorites.isError : topics.isError;
+  const surprise = () => { if (items.length) navigate(`/emne/${items[Math.floor(Math.random() * items.length)].slug}`); };
-
+  return <div className="library-page"><header className="discovery-header"><div><Badge>{t.sourceLibrary}</Badge><h1>{favoritesOnly ? t.favorites : <>{t.headline} <span>{t.headlineAccent}</span></>}</h1><p>{t.intro}</p></div>{!favoritesOnly && <Button variant="outline" onClick={surprise} disabled={!items.length}><Dices/>{language === 'da' ? 'Overrask mig' : 'Surprise me'}</Button>}</header>
-  return <>
+    <div className="discovery-tools"><label className="searchbox"><Search/><span className="sr-only">Search</span><Input value={query} onChange={(event) => setQuery(event.target.value)} placeholder={t.search}/></label><span className="result-count">{total} {t.results}</span></div>
-    <section className="hero">
+    <section className="library-layout"><aside className="filters" aria-label="Filtre"><div className="filter-title"><span><SlidersHorizontal/>{t.filters}</span>{(domain || type) && <Button variant="ghost" size="sm" onClick={clear}><X/>{t.reset}</Button>}</div><FilterGroup title={t.domain} value={domain} items={facets.data?.domains ?? []} onChange={setDomain}/><FilterGroup title={t.type} value={type} items={facets.data?.types ?? []} onChange={setType}/></aside>
-      <div className="eyebrow"><span></span>{t.sourceLibrary}</div>
+      <div className="catalog"><div className="catalog-header"><div><p className="kicker">{domain || (favoritesOnly ? t.favorites : t.library)}</p><h2>{favoritesOnly ? t.favorites : domain || t.allTopics}</h2></div></div>{loading && <div className="state-card">{t.loading}</div>}{failed && <div className="state-card error">Library unavailable.</div>}<div className="topic-grid">{items.map((topic, index) => <Link className={`topic-card accent-${accents[index % accents.length]}`} to={`/emne/${topic.slug}`} key={topic.id} style={{ '--delay': `${Math.min(index, 12) * 25}ms` } as React.CSSProperties}><div className="card-top"><Badge>{labelType(topic.type)}</Badge><span className="card-arrow"><ArrowRight/></span></div><div className="topic-symbol" aria-hidden="true">{topic.title.slice(0, 2).toUpperCase()}</div><h3>{topic.title}</h3><p>{topic.summary}</p><div className="tag-row">{topic.domains.map((value) => <span key={value}>{value}</span>)}</div></Link>)}</div>{items.length === 0 && !loading && <div className="state-card">{favoritesOnly ? t.noFavorites : t.noResults}</div>}</div>
-      <h1>{favoritesOnly ? t.favorites : t.headline}<br/><em>{favoritesOnly ? '' : t.headlineAccent}</em></h1>
+    </section></div>;
-      <p>{t.intro}</p>
-      <label className="searchbox"><Search aria-hidden="true"/><span className="sr-only">Search</span><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder={t.search}/><kbd>⌘ K</kbd></label>
-      <div className="hero-meta"><span>{total || '—'} {t.curated}</span><span>•</span><span>{t.official}</span><span>•</span><span>{t.verified}</span></div>
-    </section>
-
-    <section className="library-layout">
-      <aside className="filters" aria-label="Filtre">
-        <div className="filter-title"><span><SlidersHorizontal size={16}/>{t.filters}</span>{(domain || type) && <button onClick={clear}><X size={14}/>{t.reset}</button>}</div>
-        <FilterGroup title={t.domain} value={domain} items={facets.data?.domains ?? []} onChange={setDomain}/>
-        <FilterGroup title={t.type} value={type} items={facets.data?.types ?? []} onChange={setType}/>
-      </aside>
-      <div className="catalog">
-        <div className="catalog-header"><div><p className="kicker">{t.library}</p><h2>{favoritesOnly ? t.favorites : domain || t.allTopics}</h2></div><span>{total} {t.results}</span></div>
-        {loading && <div className="state-card">{t.loading}</div>}
-        {failed && <div className="state-card error">Library unavailable.</div>}
-        <div className="topic-grid">{items.map((topic, index) => <Link className="topic-card" to={`/emne/${topic.slug}`} key={topic.id} style={{ '--delay': `${Math.min(index, 12) * 25}ms` } as React.CSSProperties}>
-          <div className="card-top"><span className="type-badge">{labelType(topic.type)}</span><ArrowUpRight size={18}/></div>
-          <h3>{topic.title}</h3><p>{topic.summary}</p>
-          <div className="tag-row">{topic.domains.map((value) => <span key={value}>{value}</span>)}</div>
-          <div className="verified">Verificeret {new Date(topic.verifiedAt).toLocaleDateString('da-DK')}</div>
-        </Link>)}</div>
-        {items.length === 0 && !loading && <div className="state-card">{favoritesOnly ? t.noFavorites : t.noResults}</div>}
-      </div>
-    </section>
-  </>;
-}
-
-function FilterGroup({ title, items, value, onChange }: { title: string; items: Array<{ value: string; count: number }>; value: string; onChange(value: string): void }) {
-  return <fieldset><legend>{title}</legend>{items.map((item) => <label key={item.value}><input type="radio" name={title} checked={value === item.value} onChange={() => onChange(value === item.value ? '' : item.value)}/><span>{labelType(item.value)}</span><small>{item.count}</small></label>)}</fieldset>;
 }
+function FilterGroup({ title, items, value, onChange }: { title: string; items: Array<{ value: string; count: number }>; value: string; onChange(value: string): void }) { return <fieldset><legend>{title}</legend>{items.map((item) => <label key={item.value}><input type="radio" name={title} checked={value === item.value} onChange={() => onChange(value === item.value ? '' : item.value)}/><span>{labelType(item.value)}</span><small>{item.count}</small></label>)}</fieldset>; }
 const labelType = (value: string) => ({ technology: 'Teknologi', framework: 'Framework', library: 'Bibliotek', language: 'Sprog', runtime: 'Runtime', tool: 'Værktøj', platform: 'Platform', standard: 'Standard', practice: 'Praksis', architecture: 'Arkitektur' }[value] ?? value);

apps/web/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/** Shared by the shadcn-style primitives so consumers can safely compose classes. */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

apps/web/src/store/preferences.ts

@@ -6,7 +6,7 @@ interface Preferences { language: Language; setLanguage(language: Language): voi
 export const usePreferences = create<Preferences>()(persist((set) => ({ language: 'da', setLanguage: (language) => set({ language }) }), { name: 'tech-library-preferences' }));
 
 const messages = {
-  da: { library: 'Bibliotek', favorites: 'Favoritter', editorial: 'Redaktion', login: 'Log ind', logout: 'Log ud', register: 'Opret konto', username: 'Brugernavn', password: 'Adgangskode', sourceLibrary: 'Et levende teknisk opslagsværk', headline: 'Forstå teknologien.', headlineAccent: 'Se hele sammenhængen.', intro: 'Kurateret viden om moderne web-, app- og systemudvikling — fra første begreb til arkitekturbeslutning. Hvert udsagn føres tilbage til sin kilde.', search: 'Søg efter React, databaser, sikkerhed…', curated: 'kuraterede emner', official: 'Officielle primærkilder', verified: 'Verificeret', filters: 'Filtrér', reset: 'Nulstil', domain: 'Fagområde', type: 'Type', version: 'Version', revision: 'Revision', allTopics: 'Alle emner', results: 'resultater', loading: 'Henter biblioteket…', noResults: 'Ingen emner matcher din søgning.', sources: 'Kilder', overview: 'Overblik', depth: 'Fordybelse', favorite: 'Føj til favoritter', unfavorite: 'Fjern fra favoritter', loginHint: 'Log ind for at gemme favoritter.', accountTitle: 'Din Tech Library-konto', noFavorites: 'Du har endnu ingen favoritter.', footer: 'Levende viden. Dokumenterede kilder.' },
+  da: { library: 'Bibliotek', favorites: 'Favoritter', editorial: 'Redaktion', login: 'Log ind', logout: 'Log ud', register: 'Opret konto', username: 'Brugernavn', password: 'Adgangskode', sourceLibrary: 'Et levende teknisk opslagsværk', headline: 'Forstå teknologien.', headlineAccent: 'Se hele sammenhængen.', intro: 'Kurateret viden om moderne web-, app- og systemudvikling — fra første begreb til arkitekturbeslutning. Hvert udsagn føres tilbage til sin kilde.', search: 'Søg efter React, databaser, sikkerhed…', verified: 'Verificeret', filters: 'Filtrér', reset: 'Nulstil', domain: 'Fagområde', type: 'Type', version: 'Version', revision: 'Revision', allTopics: 'Alle emner', results: 'resultater', loading: 'Henter biblioteket…', noResults: 'Ingen emner matcher din søgning.', sources: 'Kilder', overview: 'Overblik', depth: 'Fordybelse', favorite: 'Føj til favoritter', unfavorite: 'Fjern fra favoritter', loginHint: 'Log ind for at gemme favoritter.', accountTitle: 'Din Tech Library-konto', noFavorites: 'Du har endnu ingen favoritter.' },
-  en: { library: 'Library', favorites: 'Favorites', editorial: 'Editorial', login: 'Log in', logout: 'Log out', register: 'Create account', username: 'Username', password: 'Password', sourceLibrary: 'A living technical reference', headline: 'Understand the technology.', headlineAccent: 'See the whole picture.', intro: 'Curated knowledge about modern web, app, and systems development — from first concepts to architecture decisions. Every claim traces back to its source.', search: 'Search for React, databases, security…', curated: 'curated topics', official: 'Official primary sources', verified: 'Verified', filters: 'Filter', reset: 'Reset', domain: 'Domain', type: 'Type', version: 'Version', revision: 'Revision', allTopics: 'All topics', results: 'results', loading: 'Loading the library…', noResults: 'No topics match your search.', sources: 'Sources', overview: 'Overview', depth: 'In depth', favorite: 'Add to favorites', unfavorite: 'Remove from favorites', loginHint: 'Log in to save favorites.', accountTitle: 'Your Tech Library account', noFavorites: 'You do not have any favorites yet.', footer: 'Living knowledge. Documented sources.' }
+  en: { library: 'Library', favorites: 'Favorites', editorial: 'Editorial', login: 'Log in', logout: 'Log out', register: 'Create account', username: 'Username', password: 'Password', sourceLibrary: 'A living technical reference', headline: 'Understand the technology.', headlineAccent: 'See the whole picture.', intro: 'Curated knowledge about modern web, app, and systems development — from first concepts to architecture decisions. Every claim traces back to its source.', search: 'Search for React, databases, security…', verified: 'Verified', filters: 'Filter', reset: 'Reset', domain: 'Domain', type: 'Type', version: 'Version', revision: 'Revision', allTopics: 'All topics', results: 'results', loading: 'Loading the library…', noResults: 'No topics match your search.', sources: 'Sources', overview: 'Overview', depth: 'In depth', favorite: 'Add to favorites', unfavorite: 'Remove from favorites', loginHint: 'Log in to save favorites.', accountTitle: 'Your Tech Library account', noFavorites: 'You do not have any favorites yet.' }
 } as const;
 export const useText = () => { const language = usePreferences((state) => state.language); return { language, t: messages[language] }; };

apps/web/src/styles.css

@@ -1,12 +1,10 @@
-@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@1,6..72,500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
 
-:root{font-family:Manrope,system-ui,sans-serif;color:#17201c;background:#f3f1e9;font-synthesis:none;--ink:#111714;--muted:#68716c;--line:#d8d7ce;--paper:#faf9f4;--acid:#d8ff58;--coral:#f7734f;--green:#264c3b}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,textarea,select{font:inherit}button,a{transition:.2s ease}a{color:inherit}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
+:root{font-family:'Space Grotesk',system-ui,sans-serif;color:#edf2ff;background:#070910;font-synthesis:none;--bg:#070910;--panel:#0d111b;--panel-2:#121827;--panel-3:#181f30;--text:#edf2ff;--muted:#8d99ad;--line:#232c40;--violet:#9b87f5;--cyan:#38d9f5;--lime:#a3e635;--rose:#fb7185;--amber:#fbbf24}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 80% -10%,#20184c 0,transparent 32%),var(--bg)}button,input,textarea,select{font:inherit}button,a{transition:.18s ease}a{color:inherit}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
-.app-shell{min-height:100vh}.topbar{height:72px;padding:0 clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(243,241,233,.9);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;font-weight:750}.brand-mark{background:var(--ink);color:var(--acid);width:34px;height:34px;display:grid;place-items:center;font:500 13px DM Mono;border-radius:4px}.topbar nav{display:flex;gap:8px}.topbar nav a{display:flex;align-items:center;gap:7px;text-decoration:none;padding:9px 13px;border-radius:5px;color:var(--muted);font-size:14px}.topbar nav a.active,.topbar nav a:hover{background:#e5e4dc;color:var(--ink)}footer{border-top:1px solid var(--line);padding:28px clamp(20px,5vw,72px);display:flex;justify-content:space-between;color:var(--muted);font-size:13px}footer a{display:flex;gap:7px;text-decoration:none}
+.app-shell{min-height:100vh;display:grid;grid-template-columns:232px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;background:#090c14e8;backdrop-filter:blur(20px);z-index:20}.brand{display:flex;align-items:center;gap:11px;padding:4px 8px;color:var(--text);font-weight:700;text-decoration:none;letter-spacing:-.02em}.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#080a10;background:linear-gradient(135deg,var(--violet),var(--cyan));box-shadow:0 0 28px #9b87f544}.brand-mark svg{width:17px}.sidebar nav{display:grid;gap:5px;margin-top:42px}.sidebar nav a,.source-link{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--muted);padding:11px 12px;border-radius:9px;font-size:14px}.sidebar nav a svg,.source-link svg,.account-button svg{width:17px}.sidebar nav a:hover,.sidebar nav a.active{color:var(--text);background:var(--panel-3)}.sidebar nav a.active{box-shadow:inset 2px 0 var(--violet)}.sidebar-bottom{margin-top:auto;display:grid;gap:6px}.language-switch{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;background:var(--panel);border:1px solid var(--line);border-radius:9px}.language-switch button{border:0;background:transparent;color:var(--muted);padding:7px;border-radius:6px;font:11px DM Mono;cursor:pointer}.language-switch button.active{background:var(--panel-3);color:var(--text)}.account-button{width:100%;justify-content:flex-start!important}.mobile-topbar{display:none}.app-main{min-width:0}
-.language-switch{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}.language-switch button{border:0;background:transparent;padding:8px 7px;font:10px DM Mono;cursor:pointer}.language-switch button.active{background:var(--ink);color:var(--acid)}.account-button{display:flex;align-items:center;gap:7px;border:0;background:transparent;padding:9px 10px;color:var(--muted);cursor:pointer}.dialog-overlay{position:fixed;inset:0;background:#101713aa;backdrop-filter:blur(4px);z-index:40}.account-dialog{position:fixed;z-index:41;left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,calc(100vw - 32px));background:var(--paper);padding:34px;border:1px solid var(--line);box-shadow:0 24px 80px #0005}.account-dialog h2{font-size:28px;margin:0 0 8px}.account-dialog>p{color:var(--muted);font-size:13px;line-height:1.5}.account-dialog form{display:grid;gap:14px;margin-top:24px}.account-dialog label{display:grid;gap:6px;font-size:12px;font-weight:600}.account-dialog input{padding:12px;border:1px solid var(--line)}.dialog-close{position:absolute;right:14px;top:14px;border:0;background:none;cursor:pointer}.dialog-close svg{width:18px}.mode-switch{border:0;background:none;color:var(--green);padding:14px 0 0;cursor:pointer}.favorite-button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:transparent;padding:10px 14px;cursor:pointer}.favorite-button.active{background:#fde3dc;border-color:var(--coral);color:#9b2f1d}.favorite-button svg{width:17px}.favorite-button.active svg{fill:currentColor}.login-hint{font-size:12px!important}
+.ui-button{border:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border-radius:9px;font-weight:600}.ui-button svg{width:17px;height:17px}.ui-button-md{padding:10px 15px}.ui-button-sm{padding:7px 9px;font-size:12px}.ui-button-icon{width:38px;height:38px}.ui-button-default{background:var(--violet);color:#0b0914}.ui-button-default:hover{background:#ad9cf8;box-shadow:0 0 24px #9b87f533}.ui-button-secondary{background:var(--panel-3);color:var(--text)}.ui-button-ghost{background:transparent;color:var(--muted)}.ui-button-ghost:hover{background:var(--panel-3);color:var(--text)}.ui-button-outline{border:1px solid var(--line);color:var(--text);background:#10152099}.ui-button-outline:hover{border-color:var(--violet);background:#18172a}.ui-button:disabled{opacity:.45;cursor:not-allowed}.ui-input{width:100%;border:1px solid var(--line);background:#090d16;color:var(--text);padding:11px 13px;border-radius:8px;outline:none}.ui-input:focus{border-color:var(--violet);box-shadow:0 0 0 3px #9b87f51f}.ui-badge{display:inline-flex;align-items:center;width:max-content;border:1px solid #353052;background:#171528;color:#b9abfa;border-radius:99px;padding:5px 9px;font:500 10px DM Mono;text-transform:uppercase;letter-spacing:.07em}.ui-card{background:var(--panel);border:1px solid var(--line);border-radius:12px}.dialog-overlay{position:fixed;inset:0;background:#03050bd4;backdrop-filter:blur(8px);z-index:40}.dialog-content{position:fixed;z-index:41;left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,calc(100vw - 32px));background:var(--panel);padding:30px;border:1px solid var(--line);border-radius:15px;box-shadow:0 30px 100px #000c}.dialog-title{font-size:26px;margin:0 0 7px}.dialog-description{color:var(--muted);font-size:13px;line-height:1.55}.dialog-content form{display:grid;gap:14px;margin-top:24px}.dialog-content label{display:grid;gap:7px;font-size:12px}.dialog-close{position:absolute;right:12px;top:12px;border:0;background:transparent;color:var(--muted);cursor:pointer}.dialog-close svg{width:18px}.mode-switch{margin-top:10px}.form-error{color:var(--rose)}
-.hero{background:var(--ink);color:#fff;padding:clamp(62px,9vw,120px) clamp(20px,8vw,120px) 74px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:420px;height:420px;border:1px solid #35433c;border-radius:50%;right:-80px;top:-160px;box-shadow:0 0 0 65px #17201c,0 0 0 66px #35433c,0 0 0 135px #17201c,0 0 0 136px #35433c;opacity:.7}.eyebrow{display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.13em;font:500 11px DM Mono;color:#aab5af}.eyebrow span{width:23px;height:2px;background:var(--acid)}.hero h1,.topic-hero h1{font-size:clamp(44px,6vw,82px);line-height:.96;letter-spacing:-.055em;margin:26px 0 25px;max-width:850px}.hero h1 em{font-family:Newsreader,serif;font-weight:500;color:var(--acid)}.hero>p{font-size:clamp(16px,2vw,20px);line-height:1.65;color:#b7c0bb;max-width:710px}.searchbox{display:flex;align-items:center;max-width:760px;margin-top:42px;background:#fff;color:var(--ink);border-radius:6px;padding:0 17px;position:relative;z-index:2;box-shadow:0 12px 35px #0004}.searchbox input{width:100%;border:0;outline:0;padding:19px 14px;background:transparent;font-size:16px}.searchbox kbd{font:12px DM Mono;color:#7c837f;border:1px solid var(--line);padding:4px 7px;border-radius:4px;white-space:nowrap}.hero-meta{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px;color:#8d9b94;font:11px DM Mono;text-transform:uppercase;letter-spacing:.05em}
+.library-page{max-width:1600px;margin:auto;padding:clamp(34px,5vw,72px)}.discovery-header{display:flex;justify-content:space-between;align-items:end;gap:40px;padding-bottom:42px}.discovery-header h1{font-size:clamp(42px,5.5vw,76px);line-height:.98;letter-spacing:-.06em;margin:20px 0 18px;max-width:850px}.discovery-header h1 span{color:transparent;background:linear-gradient(90deg,var(--violet),var(--cyan));background-clip:text}.discovery-header p{max-width:670px;color:var(--muted);font-size:16px;line-height:1.65;margin:0}.discovery-tools{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;padding:14px 0;background:#070910e8;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.searchbox{display:flex;align-items:center;gap:8px;width:min(680px,100%)}.searchbox>svg{margin-left:13px;margin-right:-43px;z-index:1;color:var(--muted);width:18px}.searchbox .ui-input{padding-left:43px;background:var(--panel);height:46px}.result-count{margin-left:auto;color:var(--muted);font:11px DM Mono;white-space:nowrap}.library-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:42px;padding-top:38px}.filter-title{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--line);font-size:13px}.filter-title>span{display:flex;align-items:center;gap:8px}.filter-title svg{width:15px}.filters fieldset{border:0;padding:19px 0;margin:0;border-bottom:1px solid var(--line)}.filters legend,.kicker{font:500 10px DM Mono;text-transform:uppercase;letter-spacing:.1em;color:#707c92;margin-bottom:10px}.filters label{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:3px;padding:7px 0;font-size:12px;color:var(--muted);cursor:pointer}.filters label:hover{color:var(--text)}.filters input{appearance:none;width:13px;height:13px;border:1px solid #4b5870;border-radius:50%;margin:0}.filters input:checked{border:4px solid var(--violet)}.filters small{font:10px DM Mono}.catalog-header{margin-bottom:20px}.catalog-header h2{font-size:27px;letter-spacing:-.035em;margin:0}.kicker{color:var(--violet);margin:0 0 7px}.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.topic-card{--accent:var(--violet);position:relative;overflow:hidden;min-height:290px;padding:20px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 8%,var(--panel)) 0,var(--panel) 42%);display:flex;flex-direction:column;text-decoration:none;animation:rise .4s both;animation-delay:var(--delay)}.topic-card:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;top:-105px;right:-75px;background:var(--accent);filter:blur(35px);opacity:.2}.topic-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 18px 48px #0006}.accent-cyan{--accent:var(--cyan)}.accent-amber{--accent:var(--amber)}.accent-lime{--accent:var(--lime)}.accent-rose{--accent:var(--rose)}.card-top{display:flex;align-items:center;justify-content:space-between}.card-arrow{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--muted)}.card-arrow svg{width:14px}.topic-card:hover .card-arrow{color:#080a10;background:var(--accent);border-color:var(--accent);transform:rotate(-35deg)}.topic-symbol{color:var(--accent);font:500 12px DM Mono;margin:34px 0 8px}.topic-card h3{font-size:21px;letter-spacing:-.035em;margin:0 0 9px}.topic-card>p{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0}.tag-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:20px}.tag-row span{font:9px DM Mono;color:#78859b;border:1px solid var(--line);padding:4px 6px;border-radius:4px}.state-card,.page-state{padding:52px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:12px}.error{color:var(--rose)}@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
-.library-layout{display:grid;grid-template-columns:230px 1fr;gap:55px;padding:58px clamp(20px,5vw,72px) 100px;max-width:1500px;margin:auto}.filter-title{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}.filter-title span,.filter-title button{display:flex;align-items:center;gap:7px}.filter-title button{border:0;background:none;font-size:11px;color:var(--muted);cursor:pointer}.filters fieldset{border:0;padding:22px 0 3px;margin:0;border-bottom:1px solid var(--line)}.filters legend{text-transform:uppercase;font:500 10px DM Mono;letter-spacing:.1em;margin-bottom:13px}.filters label{display:grid;grid-template-columns:19px 1fr auto;align-items:center;font-size:13px;padding:7px 0;cursor:pointer}.filters input{appearance:none;width:14px;height:14px;border:1px solid #a6aaa7;border-radius:3px;margin:0}.filters input:checked{border:4px solid var(--ink);background:var(--acid)}.filters small{color:#929790}.catalog-header{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.kicker{text-transform:uppercase;letter-spacing:.12em;font:500 10px DM Mono;color:var(--coral);margin:0 0 8px}.catalog-header h2{font-size:32px;letter-spacing:-.035em;margin:0}.catalog-header>span{font:11px DM Mono;color:var(--muted)}.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.topic-card{background:var(--paper);border:1px solid var(--line);padding:22px;min-height:250px;text-decoration:none;display:flex;flex-direction:column;border-radius:4px;animation:rise .45s both;animation-delay:var(--delay)}.topic-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px #25312916;border-color:#a8aea9}.card-top{display:flex;justify-content:space-between}.type-badge{font:500 10px DM Mono;text-transform:uppercase;color:var(--green);background:#e4eee7;padding:5px 7px;border-radius:3px}.topic-card h3{font-size:21px;letter-spacing:-.025em;margin:23px 0 9px}.topic-card p{font-size:13px;line-height:1.55;color:var(--muted);margin:0}.tag-row{margin-top:auto;display:flex;gap:5px;padding-top:18px}.tag-row span{font:10px DM Mono;background:#ebeae3;padding:4px 6px}.verified{font:9px DM Mono;color:#9b9d98;text-transform:uppercase;margin-top:12px}.state-card,.page-state{padding:55px;text-align:center;background:var(--paper);border:1px solid var(--line)}.state-card.error,.form-error{color:#a02e20}@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
+.topic-page,.admin-page{max-width:1180px;margin:auto;padding:50px 36px 100px}.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;text-decoration:none}.topic-hero{display:grid;grid-template-columns:1fr 270px;gap:60px;padding:60px 0 42px;border-bottom:1px solid var(--line)}.eyebrow{display:flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:.1em;font:10px DM Mono;color:var(--violet)}.eyebrow span{width:20px;height:1px;background:var(--violet)}.topic-hero h1{font-size:clamp(48px,7vw,78px);letter-spacing:-.06em;margin:18px 0}.topic-hero>div>p{font-size:17px;line-height:1.65;color:var(--muted)}.topic-hero dl{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px}.topic-hero dl div{padding:10px 0;border-bottom:1px solid var(--line)}.topic-hero dl div:last-child{border:0}.topic-hero dt{font:9px DM Mono;text-transform:uppercase;color:#6f7a8e;margin-bottom:5px}.topic-hero dd{margin:0;font-size:13px}.favorite-button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);padding:10px 13px;cursor:pointer}.favorite-button.active{color:var(--rose);border-color:#fb718566}.favorite-button svg{width:17px}.favorite-button.active svg{fill:currentColor}.login-hint{font-size:12px!important}.ui-tabs-list,.topic-tabs [role=tablist],.admin-tabs>[role=tablist]{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 38px;padding-top:8px}.ui-tabs-trigger,.topic-tabs [role=tab],.admin-tabs [role=tab]{border:0;background:none;padding:17px 18px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent}.ui-tabs-trigger[data-state=active],.topic-tabs [data-state=active],.admin-tabs [data-state=active]{color:var(--text);border-color:var(--violet)}.topic-tabs [role=tab] span{background:var(--panel-3);border-radius:9px;padding:1px 6px;font-size:10px}.prose-grid{display:grid;grid-template-columns:1fr 300px;gap:60px}.prose{max-width:760px}.prose h2,.sources h2{font-size:24px;letter-spacing:-.03em;margin:40px 0 12px}.prose .lead,.prose p,.prose li,.info-card li{line-height:1.75;color:#aab4c6}.prose pre{overflow:auto;background:#05070c;color:var(--cyan);padding:20px;border:1px solid var(--line);border-radius:10px}.info-card{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:20px;margin-bottom:12px}.info-title{display:flex;align-items:center;gap:8px}.info-title svg{width:17px;color:var(--violet)}.source-intro{display:flex;gap:14px}.source-card{display:flex;justify-content:space-between;text-decoration:none;padding:22px;border:1px solid var(--line);background:var(--panel);border-radius:10px;margin-bottom:9px}.source-card:hover{border-color:var(--violet)}.source-card span,.source-card small{font:10px DM Mono;color:var(--violet)}.source-card h3{margin:8px 0}.source-card p{font-size:12px;color:var(--muted)}.source-card small{display:flex;gap:6px;margin:5px 0}
-.topic-page{max-width:1180px;margin:auto;padding:50px 30px 100px}.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;text-decoration:none}.topic-hero{display:grid;grid-template-columns:1fr 280px;gap:60px;padding:70px 0 50px;border-bottom:1px solid var(--line)}.topic-hero h1{font-size:70px;margin:18px 0;color:var(--ink)}.topic-hero>div>p{font-size:19px;line-height:1.65;color:var(--muted);max-width:730px}.topic-hero dl{margin:0;background:var(--ink);color:white;padding:25px}.topic-hero dl div{padding:12px 0;border-bottom:1px solid #334039}.topic-hero dt{font:9px DM Mono;text-transform:uppercase;color:#8fa097;margin-bottom:6px}.topic-hero dd{margin:0;font-size:13px}.topic-tabs [role=tablist],.admin-tabs>[role=tablist]{display:flex;border-bottom:1px solid var(--line);margin:0 0 40px}.topic-tabs [role=tab],.admin-tabs [role=tab]{border:0;background:none;padding:20px 22px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent}.topic-tabs [data-state=active],.admin-tabs [data-state=active]{color:var(--ink);border-color:var(--coral)}.topic-tabs [role=tab] span{background:var(--ink);color:white;border-radius:10px;padding:1px 6px;font-size:10px}.prose-grid{display:grid;grid-template-columns:1fr 320px;gap:70px}.prose{max-width:760px}.prose h2,.sources h2{font-size:25px;letter-spacing:-.025em;margin:42px 0 13px}.prose .lead,.prose p{line-height:1.8;color:#4f5a54}.prose ul,.info-card ul{padding-left:20px;line-height:1.7;color:#4f5a54}.prose li{margin:7px 0}.prose pre{overflow:auto;background:var(--ink);color:#d8ff58;padding:22px;border-radius:4px}.info-card{background:#e8e9df;padding:24px;margin-bottom:16px}.info-title{display:flex;align-items:center;gap:9px}.info-title svg{width:18px}.info-title h3{font-size:15px}.info-card li{font-size:13px;margin:8px 0}.source-intro{display:flex;gap:15px;align-items:flex-start;margin-bottom:25px}.source-intro svg{background:var(--acid);padding:9px;width:42px;height:42px}.source-intro h2{margin:0}.source-intro p{color:var(--muted)}.source-card{display:flex;justify-content:space-between;text-decoration:none;padding:24px;border:1px solid var(--line);background:var(--paper);margin-bottom:10px}.source-card span{font:10px DM Mono;text-transform:uppercase;color:var(--coral)}.source-card h3{margin:8px 0}.source-card p{font-size:12px;color:var(--muted)}.source-card small{display:flex;align-items:center;gap:6px;color:var(--green)}
+.admin-login{min-height:100vh;display:grid;place-items:center;padding:40px}.login-panel,.editor-form{width:min(880px,100%);background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:34px}.login-panel{max-width:440px}.admin-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:10px;color:#090b11;background:var(--violet)}.login-panel form,.editor-form{display:grid;gap:15px;margin-top:25px}.login-panel label,.editor-form label{display:grid;gap:7px;font-size:12px}.login-panel input,.editor-form input,.editor-form textarea,.editor-form select,.revision-manager input{border:1px solid var(--line);background:#090d16;color:var(--text);padding:11px;border-radius:8px}.primary-button,.secondary-button,.finding-actions button{border:0;border-radius:8px;padding:11px 14px;cursor:pointer}.primary-button{background:var(--violet)}.secondary-button{background:var(--panel-3);color:var(--text)}.admin-page>header{display:flex;justify-content:space-between;align-items:end}.admin-page h1{font-size:46px;letter-spacing:-.05em}.admin-page header p,.editor-heading p,.finding p{color:var(--muted)}.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:35px 0}.admin-stats>div,.finding{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:18px}.admin-stats>div{display:flex;gap:12px}.admin-stats span{display:grid;font-size:11px;color:var(--muted)}.finding{display:flex;justify-content:space-between;gap:25px;margin-bottom:9px}.finding-actions{display:flex;align-items:center;gap:7px}.finding-actions .approve{background:#245c42;color:white}.status{font:10px DM Mono;text-transform:uppercase;padding:4px 7px;background:var(--panel-3)}.status.pending{color:var(--amber)}.status.approved{color:var(--lime)}.status.rejected{color:var(--rose)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-success{color:var(--lime)}.revision-manager>form{display:flex;align-items:end;gap:10px}.revision-row small{color:var(--muted)}
-.admin-login{min-height:calc(100vh - 145px);display:grid;place-items:center;padding:40px}.login-panel{width:min(450px,100%);background:var(--paper);border:1px solid var(--line);padding:40px}.admin-icon{display:grid;place-items:center;background:var(--ink);color:var(--acid);width:50px;height:50px;margin-bottom:28px}.login-panel h1{font-size:35px;letter-spacing:-.04em;margin:5px 0}.login-panel>p{color:var(--muted);line-height:1.6}.login-panel form,.editor-form{display:grid;gap:16px;margin-top:28px}.login-panel label,.editor-form label{display:grid;gap:7px;font-size:12px;font-weight:600}.login-panel input,.editor-form input,.editor-form textarea,.editor-form select{border:1px solid #bec1bb;background:#fff;padding:12px;outline:0;border-radius:3px}.login-panel input:focus,.editor-form input:focus,.editor-form textarea:focus,.editor-form select:focus{border-color:var(--green);box-shadow:0 0 0 3px #264c3b18}.primary-button,.secondary-button,.finding-actions button{border:0;display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:12px 16px;cursor:pointer;border-radius:3px}.primary-button{background:var(--ink);color:white}.primary-button:hover{background:var(--green)}.admin-page{max-width:1250px;margin:auto;padding:60px 30px 100px}.admin-page>header{display:flex;justify-content:space-between;align-items:end}.admin-page h1{font-size:48px;letter-spacing:-.05em;margin:4px 0}.admin-page header p{color:var(--muted)}.secondary-button{background:#e2e3db}.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:40px 0}.admin-stats>div{display:flex;gap:14px;align-items:center;border:1px solid var(--line);background:var(--paper);padding:20px}.admin-stats svg{color:var(--coral)}.admin-stats span{display:grid;font-size:11px;color:var(--muted)}.admin-stats strong{font-size:19px;color:var(--ink)}.finding{display:flex;justify-content:space-between;gap:30px;background:var(--paper);border:1px solid var(--line);padding:24px;margin-bottom:10px}.finding h3{margin:10px 0 5px}.finding p{font-size:13px;color:var(--muted);max-width:700px}.finding a{font-size:12px;color:var(--green)}.status{font:10px DM Mono;text-transform:uppercase;padding:4px 7px;background:#e6e6df}.status.pending{background:#fff0be}.status.approved{background:#dcebd8}.status.rejected{background:#f5d9d2}.finding-actions{display:flex;align-items:center;gap:8px}.finding-actions button{font-size:12px}.finding-actions svg{width:14px}.finding-actions .approve{background:var(--green);color:white}.empty-state{text-align:center;padding:60px}.empty-state>svg{background:var(--acid);padding:12px;width:52px;height:52px}.editor-form{max-width:920px;background:var(--paper);border:1px solid var(--line);padding:30px}.editor-heading{display:flex;gap:14px}.editor-heading h2{margin:0}.editor-heading p{margin:5px 0;color:var(--muted)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.form-success{background:#dcebd8;padding:12px;color:#24502f}
+@media(max-width:1100px){.topic-grid{grid-template-columns:repeat(2,1fr)}.prose-grid{grid-template-columns:1fr}.topic-hero{grid-template-columns:1fr}.admin-stats{grid-template-columns:1fr}}
-.revision-manager>form{display:flex;align-items:end;gap:10px;margin-bottom:24px}.revision-manager>form label{display:grid;gap:6px;font-size:12px;font-weight:600}.revision-manager input{min-width:280px;border:1px solid #bec1bb;background:#fff;padding:11px}.revision-row small{color:var(--muted);font:10px DM Mono}
+@media(max-width:760px){.app-shell{display:block}.sidebar{display:none}.mobile-topbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#090c14e8;backdrop-filter:blur(16px);z-index:30}.mobile-topbar nav{display:flex;gap:8px}.mobile-topbar nav a{display:grid;place-items:center;color:var(--muted);width:36px;height:36px}.mobile-topbar nav svg{width:18px}.library-page{padding:34px 18px}.discovery-header{align-items:flex-start;flex-direction:column;padding-bottom:25px}.discovery-header h1{font-size:44px}.discovery-tools{top:64px}.library-layout{grid-template-columns:1fr;padding-top:28px}.filters{display:none}.topic-grid{grid-template-columns:1fr}.topic-card{min-height:260px}.topic-page,.admin-page{padding:30px 18px 70px}.topic-hero{padding-top:40px}.topic-hero dl{display:grid;grid-template-columns:1fr 1fr}.admin-page>header,.finding{align-items:flex-start;flex-direction:column}.form-grid{grid-template-columns:1fr}}
-@media(max-width:1000px){.topic-grid{grid-template-columns:repeat(2,1fr)}.prose-grid{grid-template-columns:1fr}.topic-hero{grid-template-columns:1fr}.topic-hero dl{display:grid;grid-template-columns:1fr 1fr}.admin-stats{grid-template-columns:1fr}}
-@media(max-width:700px){.topbar{height:62px}.topbar nav a{font-size:0}.topbar nav a svg{width:20px;height:20px}.hero{padding-top:60px}.hero:after{opacity:.3}.library-layout{grid-template-columns:1fr;padding-top:30px}.filters{display:none}.topic-grid{grid-template-columns:1fr}.topic-card{min-height:220px}.topic-page{padding:30px 18px 70px}.topic-hero{padding-top:45px}.topic-hero h1{font-size:48px}.topic-tabs [role=tab]{padding:16px 10px;font-size:12px}.admin-page{padding:35px 18px}.admin-page>header,.finding{align-items:flex-start;flex-direction:column}.finding-actions{width:100%}.form-grid{grid-template-columns:1fr}footer{gap:15px;flex-direction:column}}

apps/web/src/ui/AppLayout.tsx

@@ -1,20 +1,26 @@
-import * as Dialog from '@radix-ui/react-dialog';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { BookOpen, Github, Heart, LogIn, LogOut, ShieldCheck, UserRound, X } from 'lucide-react';
+import { BookOpen, Compass, Github, Heart, LogIn, LogOut, ShieldCheck, UserRound } from 'lucide-react';
 import { useState } from 'react';
 import { Link, NavLink, Outlet } from 'react-router-dom';
 import { userApi } from '../lib/api';
 import { usePreferences, useText } from '../store/preferences';
+import { Button } from './components/button';
+import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from './components/dialog';
+import { Input } from './components/input';
 
 export function AppLayout() {
   const { language, t } = useText(); const setLanguage = usePreferences((state) => state.setLanguage); const client = useQueryClient();
   const session = useQuery({ queryKey: ['user-session'], queryFn: userApi.me, retry: false });
   const logout = useMutation({ mutationFn: () => userApi.logout(session.data!.csrfToken), onSuccess: () => { client.setQueryData(['user-session'], null); client.invalidateQueries({ queryKey: ['topics'] }); } });
-  return <div className="app-shell"><header className="topbar"><Link className="brand" to="/"><span className="brand-mark">TL</span><span>Tech Library</span></Link><nav aria-label="Primary navigation"><NavLink to="/" end><BookOpen size={17}/>{t.library}</NavLink>{session.data && <NavLink to="/favoritter"><Heart size={17}/>{t.favorites}</NavLink>}<NavLink to="/admin"><ShieldCheck size={17}/>{t.editorial}</NavLink><div className="language-switch"><button className={language === 'da' ? 'active' : ''} onClick={() => setLanguage('da')}>DA</button><button className={language === 'en' ? 'active' : ''} onClick={() => setLanguage('en')}>EN</button></div>{session.data ? <button className="account-button" onClick={() => logout.mutate()} title={t.logout}><LogOut size={17}/><span>{session.data.username}</span></button> : <AccountDialog/>}</nav></header><main><Outlet /></main><footer><span>{t.footer}</span><a href="https://git.p20.dev/christian/TechLibrary" target="_blank" rel="noreferrer"><Github size={16}/>Source</a></footer></div>;
+  return <div className="app-shell"><aside className="sidebar">
+    <Link className="brand" to="/"><span className="brand-mark"><BookOpen/></span><span>Tech Library</span></Link>
+    <nav aria-label="Primary navigation"><NavLink to="/" end><Compass/>{t.library}</NavLink>{session.data && <NavLink to="/favoritter"><Heart/>{t.favorites}</NavLink>}<NavLink to="/admin"><ShieldCheck/>{t.editorial}</NavLink></nav>
+    <div className="sidebar-bottom"><div className="language-switch"><button className={language === 'da' ? 'active' : ''} onClick={() => setLanguage('da')}>DA</button><button className={language === 'en' ? 'active' : ''} onClick={() => setLanguage('en')}>EN</button></div>{session.data ? <Button variant="ghost" className="account-button" onClick={() => logout.mutate()} title={t.logout}><LogOut/><span>{session.data.username}</span></Button> : <AccountDialog/>}<a className="source-link" href="https://git.p20.dev/christian/TechLibrary" target="_blank" rel="noreferrer"><Github/>Source</a></div>
+  </aside><header className="mobile-topbar"><Link className="brand" to="/"><span className="brand-mark"><BookOpen/></span><span>Tech Library</span></Link><nav>{/* Mobile navigation stays deliberately compact. */}<NavLink to="/"><Compass/></NavLink><NavLink to="/admin"><ShieldCheck/></NavLink></nav></header><main className="app-main"><Outlet/></main></div>;
 }
 
 function AccountDialog() {
   const { t } = useText(); const client = useQueryClient(); const [open, setOpen] = useState(false); const [mode, setMode] = useState<'login' | 'register'>('login'); const [error, setError] = useState('');
   const authenticate = useMutation({ mutationFn: ({ username, password }: { username: string; password: string }) => userApi.authenticate(mode, username, password), onSuccess: (data) => { client.setQueryData(['user-session'], data); client.invalidateQueries({ queryKey: ['topics'] }); setOpen(false); }, onError: (reason) => setError(reason instanceof Error ? reason.message : 'Authentication failed') });
-  return <Dialog.Root open={open} onOpenChange={setOpen}><Dialog.Trigger asChild><button className="account-button"><UserRound size={17}/><span>{t.login}</span></button></Dialog.Trigger><Dialog.Portal><Dialog.Overlay className="dialog-overlay"/><Dialog.Content className="account-dialog"><Dialog.Close className="dialog-close"><X/></Dialog.Close><Dialog.Title>{t.accountTitle}</Dialog.Title><Dialog.Description>{mode === 'login' ? t.loginHint : '3–32 characters. Password: minimum 8 characters.'}</Dialog.Description><form onSubmit={(event) => { event.preventDefault(); setError(''); const data = new FormData(event.currentTarget); authenticate.mutate({ username: String(data.get('username')), password: String(data.get('password')) }); }}><label>{t.username}<input name="username" autoComplete="username" required/></label><label>{t.password}<input name="password" type="password" autoComplete={mode === 'login' ? 'current-password' : 'new-password'} minLength={8} required/></label>{error && <p className="form-error">{error}</p>}<button className="primary-button" disabled={authenticate.isPending}><LogIn/>{mode === 'login' ? t.login : t.register}</button></form><button className="mode-switch" onClick={() => { setMode(mode === 'login' ? 'register' : 'login'); setError(''); }}>{mode === 'login' ? t.register : t.login}</button></Dialog.Content></Dialog.Portal></Dialog.Root>;
+  return <Dialog open={open} onOpenChange={setOpen}><DialogTrigger asChild><Button variant="ghost" className="account-button"><UserRound/><span>{t.login}</span></Button></DialogTrigger><DialogContent><DialogTitle>{t.accountTitle}</DialogTitle><DialogDescription>{mode === 'login' ? t.loginHint : '3–32 characters. Password: minimum 8 characters.'}</DialogDescription><form onSubmit={(event) => { event.preventDefault(); setError(''); const data = new FormData(event.currentTarget); authenticate.mutate({ username: String(data.get('username')), password: String(data.get('password')) }); }}><label>{t.username}<Input name="username" autoComplete="username" required/></label><label>{t.password}<Input name="password" type="password" autoComplete={mode === 'login' ? 'current-password' : 'new-password'} minLength={8} required/></label>{error && <p className="form-error">{error}</p>}<Button disabled={authenticate.isPending}><LogIn/>{mode === 'login' ? t.login : t.register}</Button></form><Button variant="ghost" className="mode-switch" onClick={() => { setMode(mode === 'login' ? 'register' : 'login'); setError(''); }}>{mode === 'login' ? t.register : t.login}</Button></DialogContent></Dialog>;
 }

apps/web/src/ui/components/badge.tsx

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+import { cn } from '../../lib/utils';
+
+export function Badge({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn('ui-badge', className)} {...props}/>;
+}

apps/web/src/ui/components/button.tsx

@@ -0,0 +1,14 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ButtonHTMLAttributes } from 'react';
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva('ui-button', {
+  variants: { variant: { default: 'ui-button-default', secondary: 'ui-button-secondary', ghost: 'ui-button-ghost', outline: 'ui-button-outline' }, size: { default: 'ui-button-md', sm: 'ui-button-sm', icon: 'ui-button-icon' } },
+  defaultVariants: { variant: 'default', size: 'default' },
+});
+
+export function Button({ className, variant, size, asChild = false, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & { asChild?: boolean }) {
+  const Component = asChild ? Slot : 'button';
+  return <Component className={cn(buttonVariants({ variant, size }), className)} {...props}/>;
+}

apps/web/src/ui/components/card.tsx

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+import { cn } from '../../lib/utils';
+
+export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn('ui-card', className)} {...props}/>; }
+export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn('ui-card-header', className)} {...props}/>; }
+export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn('ui-card-content', className)} {...props}/>; }

apps/web/src/ui/components/dialog.tsx

@@ -0,0 +1,12 @@
+import * as Primitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import type { ComponentProps } from 'react';
+import { cn } from '../../lib/utils';
+
+export const Dialog = Primitive.Root;
+export const DialogTrigger = Primitive.Trigger;
+export function DialogContent({ className, children, ...props }: ComponentProps<typeof Primitive.Content>) {
+  return <Primitive.Portal><Primitive.Overlay className="dialog-overlay"/><Primitive.Content className={cn('dialog-content', className)} {...props}>{children}<Primitive.Close className="dialog-close" aria-label="Close"><X/></Primitive.Close></Primitive.Content></Primitive.Portal>;
+}
+export function DialogTitle({ className, ...props }: ComponentProps<typeof Primitive.Title>) { return <Primitive.Title className={cn('dialog-title', className)} {...props}/>; }
+export function DialogDescription({ className, ...props }: ComponentProps<typeof Primitive.Description>) { return <Primitive.Description className={cn('dialog-description', className)} {...props}/>; }

apps/web/src/ui/components/input.tsx

@@ -0,0 +1,6 @@
+import type { InputHTMLAttributes } from 'react';
+import { cn } from '../../lib/utils';
+
+export function Input({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) {
+  return <input className={cn('ui-input', className)} {...props}/>;
+}

apps/web/src/ui/components/tabs.tsx

@@ -0,0 +1,8 @@
+import * as Primitive from '@radix-ui/react-tabs';
+import type { ComponentProps } from 'react';
+import { cn } from '../../lib/utils';
+
+export const Tabs = Primitive.Root;
+export function TabsList({ className, ...props }: ComponentProps<typeof Primitive.List>) { return <Primitive.List className={cn('ui-tabs-list', className)} {...props}/>; }
+export function TabsTrigger({ className, ...props }: ComponentProps<typeof Primitive.Trigger>) { return <Primitive.Trigger className={cn('ui-tabs-trigger', className)} {...props}/>; }
+export function TabsContent({ className, ...props }: ComponentProps<typeof Primitive.Content>) { return <Primitive.Content className={cn('ui-tabs-content', className)} {...props}/>; }

docs/architecture.md

@@ -11,7 +11,7 @@ React/Vite PWA ──REST──> Fastify API ──> SQLite
 
 ## Boundaries
 
-- `apps/web` owns Danish presentation, routing, query caching, and local UI state.
+- `apps/web` owns bilingual presentation, routing, query caching, and local UI state. Its component boundary uses local shadcn/ui primitives over Radix; feature modules do not depend directly on styling implementation details.
 - `apps/api` owns authentication, authorization, publication rules, and versioned REST resources.
 - `apps/worker` owns official-source collection, normalization, fingerprinting, and findings.
 - `packages/contracts` owns runtime validation and shared public types.

package-lock.json

@@ -47,13 +47,17 @@
       "dependencies": {
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tabs": "^1.1.13",
         "@tanstack/react-query": "^5.87.1",
         "@tech-library/contracts": "*",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "lucide-react": "^0.544.0",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "react-router-dom": "^7.9.1",
+        "tailwind-merge": "^3.3.1",
         "zustand": "^5.0.8"
       },
       "devDependencies": {
@@ -4709,6 +4713,18 @@
       "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
       "license": "ISC"
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -4724,6 +4740,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -8647,6 +8672,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.7.0.tgz",
+      "integrity": "sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tar-fs": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.5.tgz",