fix(i18n): localize topic metadata and footer

README.md

@@ -1,6 +1,6 @@
 # Tech Library
 
-Tech Library is a modular, source-backed reference for modern web, app, and systems development. The Danish PWA serves layered English technical entries for readers at every experience level. Official-source monitoring proposes changes; a human editor always reviews them before publication.
+Tech Library is a modular, source-backed reference for modern web, app, and systems development. English entries are the canonical source texts; Danish and future languages are revision-bound translations with explicit English fallback. Official-source monitoring proposes changes; a human editor always reviews them before publication.
 
 ## Included
 
@@ -8,6 +8,8 @@ Tech Library is a modular, source-backed reference for modern web, app, and syst
 - faceted browsing and SQLite FTS5 search
 - 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
+- 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
 - Docker Compose deployment, health checks, persistent data, backup and restore guidance

apps/api/src/app.test.ts

@@ -25,4 +25,16 @@ describe('API', () => {
     expect(login.json().csrfToken).toBeTruthy();
     await app.close();
   });
+
+  it('registers a reader and stores private favorites', async () => {
+    const app = await buildApp({ sqlite: context.sqlite, sessionSecret: 'a-secret-with-at-least-thirty-two-characters' });
+    const register = await app.inject({ method: 'POST', url: '/api/v1/auth/register', payload: { username: 'reader_one', password: 'correct horse' } });
+    expect(register.statusCode).toBe(200);
+    const cookie = register.cookies.find((item) => item.name === 'tech_library_user')!;
+    const favorite = await app.inject({ method: 'PUT', url: '/api/v1/favorites/typescript', headers: { cookie: `${cookie.name}=${cookie.value}`, 'x-csrf-token': register.json().csrfToken } });
+    expect(favorite.statusCode).toBe(200);
+    const list = await app.inject({ method: 'GET', url: '/api/v1/favorites?lang=da', headers: { cookie: `${cookie.name}=${cookie.value}` } });
+    expect(list.json()[0]).toMatchObject({ slug: 'typescript', language: 'da', isFavorite: true });
+    await app.close();
+  });
 });

apps/api/src/app.ts

@@ -7,7 +7,7 @@ import { randomBytes, randomUUID } from 'node:crypto';
 import type Database from 'better-sqlite3';
 import { LibraryRepository } from './repository.js';
 
-declare module 'fastify' { interface FastifyRequest { adminSession?: { id: string; csrfToken: string } } }
+declare module 'fastify' { interface FastifyRequest { adminSession?: { id: string; csrfToken: string }; userSession?: { id: string; userId: string; username: string; csrfToken: string } } }
 
 export interface AppOptions { sqlite: Database.Database; adminUsername?: string; adminPasswordHash?: string; sessionSecret?: string; webOrigin?: string }
 
@@ -22,15 +22,34 @@ export async function buildApp(options: AppOptions) {
   app.get('/health', async () => ({ status: 'ok', time: new Date().toISOString() }));
   app.get('/api/v1/topics', async (request) => {
     const query = request.query as Record<string, string | undefined>;
-    return repo.listTopics({ q: query.q, domain: query.domain, type: query.type, page: Math.max(1, Number(query.page) || 1), pageSize: Math.min(100, Math.max(1, Number(query.pageSize) || 24)) });
+    return repo.listTopics({ q: query.q, domain: query.domain, type: query.type, language: query.lang === 'da' ? 'da' : 'en', userId: readUserSession(request, options.sqlite)?.userId, page: Math.max(1, Number(query.page) || 1), pageSize: Math.min(100, Math.max(1, Number(query.pageSize) || 24)) });
   });
   app.get('/api/v1/topics/:slug', async (request, reply) => {
-    const result = repo.getTopic((request.params as { slug: string }).slug);
+    const result = repo.getTopic((request.params as { slug: string }).slug, (request.query as { lang?: string }).lang === 'da' ? 'da' : 'en', readUserSession(request, options.sqlite)?.userId);
     return result ?? reply.code(404).send({ error: 'Topic not found' });
   });
   app.get('/api/v1/topics/:slug/revisions', async (request) => repo.revisions((request.params as { slug: string }).slug));
   app.get('/api/v1/facets', async () => repo.facets());
 
+  app.post('/api/v1/auth/register', async (request, reply) => {
+    const body = request.body as { username?: string; password?: string }; const username = (body.username ?? '').trim();
+    if (!/^[a-zA-Z0-9_-]{3,32}$/.test(username)) return reply.code(400).send({ error: 'Username must be 3–32 letters, numbers, _ or -' });
+    if ((body.password ?? '').length < 8) return reply.code(400).send({ error: 'Password must be at least 8 characters' });
+    if (options.sqlite.prepare('SELECT 1 FROM users WHERE username=? COLLATE NOCASE').get(username)) return reply.code(409).send({ error: 'Username is already taken' });
+    const userId = randomUUID(); options.sqlite.prepare('INSERT INTO users(id,username,password_hash,created_at) VALUES(?,?,?,?)').run(userId, username, await argon2.hash(body.password!), new Date().toISOString());
+    return createUserSession(reply, options.sqlite, userId, username);
+  });
+  app.post('/api/v1/auth/login', async (request, reply) => {
+    const body = request.body as { username?: string; password?: string }; const user = options.sqlite.prepare('SELECT id,username,password_hash passwordHash FROM users WHERE username=? COLLATE NOCASE').get((body.username ?? '').trim()) as { id: string; username: string; passwordHash: string } | undefined;
+    if (!user || !(await argon2.verify(user.passwordHash, body.password ?? ''))) return reply.code(401).send({ error: 'Invalid credentials' });
+    return createUserSession(reply, options.sqlite, user.id, user.username);
+  });
+  app.get('/api/v1/auth/me', { preHandler: requireUser(options.sqlite, false) }, async (request) => ({ username: request.userSession!.username, csrfToken: request.userSession!.csrfToken }));
+  app.post('/api/v1/auth/logout', { preHandler: requireUser(options.sqlite) }, async (request, reply) => { options.sqlite.prepare('DELETE FROM user_sessions WHERE id=?').run(request.userSession!.id); reply.clearCookie('tech_library_user', { path: '/' }); return { authenticated: false }; });
+  app.get('/api/v1/favorites', { preHandler: requireUser(options.sqlite, false) }, async (request) => repo.listTopics({ pageSize: 100, language: (request.query as { lang?: string }).lang === 'da' ? 'da' : 'en', userId: request.userSession!.userId }).items.filter((item) => item.isFavorite));
+  app.put('/api/v1/favorites/:slug', { preHandler: requireUser(options.sqlite) }, async (request, reply) => { const topic = options.sqlite.prepare('SELECT id FROM topics WHERE slug=?').get((request.params as { slug: string }).slug) as { id: string } | undefined; if (!topic) return reply.code(404).send({ error: 'Topic not found' }); options.sqlite.prepare('INSERT OR IGNORE INTO favorites(user_id,topic_id,created_at) VALUES(?,?,?)').run(request.userSession!.userId, topic.id, new Date().toISOString()); return { favorite: true }; });
+  app.delete('/api/v1/favorites/:slug', { preHandler: requireUser(options.sqlite) }, async (request) => { options.sqlite.prepare('DELETE FROM favorites WHERE user_id=? AND topic_id=(SELECT id FROM topics WHERE slug=?)').run(request.userSession!.userId, (request.params as { slug: string }).slug); return { favorite: false }; });
+
   app.post('/api/v1/admin/login', async (request, reply) => {
     const body = request.body as { username?: string; password?: string };
     const username = options.adminUsername ?? process.env.ADMIN_USERNAME ?? 'admin';
@@ -42,7 +61,7 @@ export async function buildApp(options: AppOptions) {
     const expires = new Date(now.getTime() + 8 * 60 * 60 * 1000);
     options.sqlite.prepare('DELETE FROM sessions WHERE expires_at < ?').run(now.toISOString());
     options.sqlite.prepare('INSERT INTO sessions(id,csrf_token,expires_at,created_at) VALUES(?,?,?,?)').run(id, csrfToken, expires.toISOString(), now.toISOString());
-    reply.setCookie('tech_library_session', id, { path: '/', httpOnly: true, sameSite: 'strict', secure: process.env.NODE_ENV === 'production', signed: true, expires });
+    reply.setCookie('tech_library_session', id, { path: '/', httpOnly: true, sameSite: 'strict', secure: isSecureCookie(), signed: true, expires });
     return { authenticated: true, csrfToken, expiresAt: expires.toISOString() };
   });
 
@@ -78,6 +97,25 @@ export async function buildApp(options: AppOptions) {
   return app;
 }
 
+function createUserSession(reply: FastifyReply, sqlite: Database.Database, userId: string, username: string) {
+  const id = randomUUID(); const csrfToken = randomBytes(24).toString('base64url'); const expires = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000);
+  sqlite.prepare('INSERT INTO user_sessions(id,user_id,csrf_token,expires_at,created_at) VALUES(?,?,?,?,?)').run(id, userId, csrfToken, expires.toISOString(), new Date().toISOString());
+  reply.setCookie('tech_library_user', id, { path: '/', httpOnly: true, sameSite: 'lax', secure: isSecureCookie(), signed: true, expires });
+  return { username, csrfToken, expiresAt: expires.toISOString() };
+}
+
+function readUserSession(request: FastifyRequest, sqlite: Database.Database) {
+  const signed = request.unsignCookie(request.cookies.tech_library_user ?? '');
+  if (!signed.valid || !signed.value) return undefined;
+  return sqlite.prepare('SELECT s.id,s.user_id userId,s.csrf_token csrfToken,u.username FROM user_sessions s JOIN users u ON u.id=s.user_id WHERE s.id=? AND s.expires_at>?').get(signed.value, new Date().toISOString()) as { id: string; userId: string; username: string; csrfToken: string } | undefined;
+}
+
+function requireUser(sqlite: Database.Database, csrf = true) {
+  return async (request: FastifyRequest, reply: FastifyReply) => { const session = readUserSession(request, sqlite); if (!session) return reply.code(401).send({ error: 'Authentication required' }); if (csrf && request.headers['x-csrf-token'] !== session.csrfToken) return reply.code(403).send({ error: 'Invalid CSRF token' }); request.userSession = session; };
+}
+
+const isSecureCookie = () => (process.env.WEB_ORIGIN ?? '').startsWith('https://');
+
 function requireAdmin(sqlite: Database.Database, csrf = true) {
   return async (request: FastifyRequest, reply: FastifyReply) => {
     const signed = request.unsignCookie(request.cookies.tech_library_session ?? '');

apps/api/src/repository.ts

@@ -1,35 +1,36 @@
 import { randomUUID } from 'node:crypto';
 import type Database from 'better-sqlite3';
-import { topicRevisionInputSchema, type TopicDetail, type TopicListItem, type TopicRevisionInput } from '@tech-library/contracts';
+import { topicRevisionInputSchema, type Language, type TopicDetail, type TopicListItem, type TopicRevisionInput } from '@tech-library/contracts';
 
 const parse = <T>(value: string): T => JSON.parse(value) as T;
 
 export class LibraryRepository {
   constructor(private readonly db: Database.Database) {}
 
-  listTopics({ q = '', domain, type, page = 1, pageSize = 24 }: { q?: string; domain?: string; type?: string; page?: number; pageSize?: number }) {
+  listTopics({ q = '', domain, type, page = 1, pageSize = 24, language = 'en', userId }: { q?: string; domain?: string; type?: string; page?: number; pageSize?: number; language?: Language; userId?: string }) {
     const params: unknown[] = [];
     let where = 'WHERE t.active_revision_id IS NOT NULL';
-    if (q) { where += ' AND t.id IN (SELECT topic_id FROM topic_search WHERE topic_search MATCH ?)'; params.push(q.replace(/["']/g, '')); }
+    const localized = "CASE WHEN ?='en' THEN r.payload ELSE COALESCE(tr.payload,r.payload) END";
-    if (domain) { where += " AND json_extract(r.payload, '$.domains') LIKE ?"; params.push(`%${domain}%`); }
+    if (q) { where += ` AND (${localized} LIKE ? OR t.id IN (SELECT topic_id FROM topic_search WHERE topic_search MATCH ?))`; params.push(language, `%${q}%`, q.replace(/["']/g, '')); }
-    if (type) { where += " AND json_extract(r.payload, '$.type') = ?"; params.push(type); }
+    if (domain) { where += ` AND json_extract(${localized}, '$.domains') LIKE ?`; params.push(language, `%${domain}%`); }
-    const base = `FROM topics t JOIN revisions r ON r.id = t.active_revision_id ${where}`;
+    if (type) { where += ` AND json_extract(${localized}, '$.type') = ?`; params.push(language, type); }
-    const total = Number((this.db.prepare(`SELECT count(*) AS count ${base}`).get(...params) as { count: number }).count);
+    const joins = `FROM topics t JOIN revisions r ON r.id = t.active_revision_id LEFT JOIN topic_translations tr ON tr.revision_id=r.id AND tr.language='da'`;
-    const rows = this.db.prepare(`SELECT t.id, t.slug, r.payload, COALESCE(r.published_at, r.reviewed_at, r.created_at) verified_at ${base} ORDER BY json_extract(r.payload, '$.title') LIMIT ? OFFSET ?`).all(...params, pageSize, (page - 1) * pageSize) as Array<Record<string, string>>;
+    const total = Number((this.db.prepare(`SELECT count(*) AS count ${joins} ${where}`).get(...params) as { count: number }).count);
-    return { items: rows.map(toListItem), total, page, pageSize };
+    const rows = this.db.prepare(`SELECT t.id, t.slug, ${localized} payload, tr.id translation_id, COALESCE(r.published_at, r.reviewed_at, r.created_at) verified_at, CASE WHEN f.user_id IS NULL THEN 0 ELSE 1 END is_favorite ${joins} LEFT JOIN favorites f ON f.topic_id=t.id AND f.user_id=? ${where} ORDER BY json_extract(${localized}, '$.title') LIMIT ? OFFSET ?`).all(language, userId ?? '', ...params, language, pageSize, (page - 1) * pageSize) as Array<Record<string, string>>;
+    return { items: rows.map((row) => toListItem(row, language)), total, page, pageSize };
   }
 
-  getTopic(slug: string): TopicDetail | null {
+  getTopic(slug: string, language: Language = 'en', userId?: string): TopicDetail | null {
-    const row = this.db.prepare(`SELECT t.id, t.slug, r.id revision_id, r.number, r.payload, COALESCE(r.published_at, r.reviewed_at, r.created_at) verified_at FROM topics t JOIN revisions r ON r.id = t.active_revision_id WHERE t.slug = ?`).get(slug) as Record<string, string | number> | undefined;
+    const row = this.db.prepare(`SELECT t.id, t.slug, r.id revision_id, r.number, CASE WHEN ?='en' THEN r.payload ELSE COALESCE(tr.payload,r.payload) END payload, tr.id translation_id, CASE WHEN f.user_id IS NULL THEN 0 ELSE 1 END is_favorite, COALESCE(r.published_at, r.reviewed_at, r.created_at) verified_at FROM topics t JOIN revisions r ON r.id = t.active_revision_id LEFT JOIN topic_translations tr ON tr.revision_id=r.id AND tr.language=? LEFT JOIN favorites f ON f.topic_id=t.id AND f.user_id=? WHERE t.slug = ?`).get(language, language, userId ?? '', slug) as Record<string, string | number> | undefined;
     if (!row) return null;
-    const item = toListItem(row as Record<string, string>);
+    const item = toListItem(row as Record<string, string>, language);
     const data = parse<TopicRevisionInput>(String(row.payload));
     const sourceRows = this.db.prepare(`SELECT s.* FROM sources s JOIN revision_sources rs ON rs.source_id=s.id WHERE rs.revision_id=? ORDER BY s.verified_at DESC`).all(row.revision_id) as Array<Record<string, string>>;
     const relationRows = this.db.prepare(`SELECT rel.type, t.id, t.slug, r.payload, COALESCE(r.published_at,r.created_at) verified_at FROM relations rel JOIN topics t ON t.id=rel.target_topic_id JOIN revisions r ON r.id=t.active_revision_id WHERE rel.source_topic_id=?`).all(row.id) as Array<Record<string, string>>;
     return {
       ...item, aliases: data.aliases, audience: data.audience, supportedVersions: data.supportedVersions,
       content: data.content, revisionId: String(row.revision_id), revisionNumber: Number(row.number),
-      relations: relationRows.map((relation) => ({ type: relation.type as TopicDetail['relations'][number]['type'], topic: toListItem(relation) })),
+      relations: relationRows.map((relation) => ({ type: relation.type as TopicDetail['relations'][number]['type'], topic: toListItem(relation, 'en') })),
       sources: sourceRows.map((source) => ({ id: source.id!, title: source.title!, url: source.url!, publisher: source.publisher!, type: source.source_type as TopicDetail['sources'][number]['type'], verifiedAt: source.verified_at!, claims: parse(source.claims!) }))
     };
   }
@@ -116,9 +117,9 @@ export class LibraryRepository {
   }
 }
 
-function toListItem(row: Record<string, string>): TopicListItem {
+function toListItem(row: Record<string, string>, language: Language): TopicListItem {
   const data = parse<TopicRevisionInput>(row.payload!);
-  return { id: row.id!, slug: row.slug!, title: data.title, summary: data.summary, type: data.type, domains: data.domains, tags: data.tags, currentVersion: data.currentVersion, verifiedAt: row.verified_at! };
+  return { id: row.id!, slug: row.slug!, title: data.title, summary: data.summary, type: data.type, domains: data.domains, tags: data.tags, currentVersion: data.currentVersion, verifiedAt: row.verified_at!, language: row.translation_id || language === 'en' ? language : 'en', sourceLanguage: 'en', translationFallback: language !== 'en' && !row.translation_id, isFavorite: Boolean(Number(row.is_favorite ?? 0)) };
 }
 
 function countValues(values: string[]) {

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

@@ -2,10 +2,12 @@ import { useDeferredValue, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { ArrowUpRight, Search, SlidersHorizontal, X } from 'lucide-react';
 import { Link } from 'react-router-dom';
-import { api } from '../../lib/api';
+import { api, userApi } from '../../lib/api';
 import { useUiStore } from '../../store/ui';
+import { useText } from '../../store/preferences';
 
-export function LibraryPage() {
+export function LibraryPage({ favoritesOnly = false }: { favoritesOnly?: boolean }) {
+  const { language, t } = useText();
   const [query, setQuery] = useState('');
   const search = useDeferredValue(query);
   const { domain, type, setDomain, setType, clear } = useUiStore();
@@ -13,35 +15,38 @@ export function LibraryPage() {
   if (search) params.set('q', search);
   if (domain) params.set('domain', domain);
   if (type) params.set('type', type);
-  const topics = useQuery({ queryKey: ['topics', search, domain, type], queryFn: () => api.topics(params) });
+  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 facets = useQuery({ queryKey: ['facets'], queryFn: api.facets });
+  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;
 
   return <>
     <section className="hero">
-      <div className="eyebrow"><span></span>Et levende teknisk opslagsværk</div>
+      <div className="eyebrow"><span></span>{t.sourceLibrary}</div>
-      <h1>Forstå teknologien.<br/><em>Se hele sammenhængen.</em></h1>
+      <h1>{favoritesOnly ? t.favorites : t.headline}<br/><em>{favoritesOnly ? '' : t.headlineAccent}</em></h1>
-      <p>Kurateret viden om moderne web-, app- og systemudvikling — fra første begreb til arkitekturbeslutning. Hvert udsagn føres tilbage til sin kilde.</p>
+      <p>{t.intro}</p>
-      <label className="searchbox"><Search aria-hidden="true"/><span className="sr-only">Søg i biblioteket</span><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Søg efter React, databaser, sikkerhed…"/><kbd>⌘ K</kbd></label>
+      <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>{topics.data?.total ?? '—'} kuraterede emner</span><span>•</span><span>Officielle primærkilder</span><span>•</span><span>Løbende verificeret</span></div>
+      <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}/>Filtrér</span>{(domain || type) && <button onClick={clear}><X size={14}/>Nulstil</button>}</div>
+        <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="Fagområde" value={domain} items={facets.data?.domains ?? []} onChange={setDomain}/>
+        <FilterGroup title={t.domain} value={domain} items={facets.data?.domains ?? []} onChange={setDomain}/>
-        <FilterGroup title="Type" value={type} items={facets.data?.types ?? []} onChange={setType}/>
+        <FilterGroup title={t.type} value={type} items={facets.data?.types ?? []} onChange={setType}/>
       </aside>
       <div className="catalog">
-        <div className="catalog-header"><div><p className="kicker">Biblioteket</p><h2>{domain || 'Alle emner'}</h2></div><span>{topics.data?.total ?? 0} resultater</span></div>
+        <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>
-        {topics.isLoading && <div className="state-card">Henter biblioteket…</div>}
+        {loading && <div className="state-card">{t.loading}</div>}
-        {topics.isError && <div className="state-card error">Biblioteket kunne ikke hentes. Kontrollér forbindelsen og prøv igen.</div>}
+        {failed && <div className="state-card error">Library unavailable.</div>}
-        <div className="topic-grid">{topics.data?.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="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>
-        {topics.data?.items.length === 0 && <div className="state-card">Ingen emner matcher din søgning.</div>}
+        {items.length === 0 && !loading && <div className="state-card">{favoritesOnly ? t.noFavorites : t.noResults}</div>}
       </div>
     </section>
   </>;

apps/web/src/features/topic/TopicPage.tsx

@@ -1,26 +1,29 @@
 import * as Tabs from '@radix-ui/react-tabs';
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { ArrowLeft, CheckCircle2, ExternalLink, GitBranch, Shield, Sparkles } from 'lucide-react';
+import { ArrowLeft, CheckCircle2, ExternalLink, GitBranch, Heart, Shield, Sparkles } from 'lucide-react';
 import { Link, useParams } from 'react-router-dom';
-import { api } from '../../lib/api';
+import { api, userApi } from '../../lib/api';
+import { useText } from '../../store/preferences';
 
 export function TopicPage() {
   const { slug = '' } = useParams();
-  const { data: topic, isLoading, isError } = useQuery({ queryKey: ['topic', slug], queryFn: () => api.topic(slug) });
+  const { language, t } = useText(); const client = useQueryClient(); const session = useQuery({ queryKey: ['user-session'], queryFn: userApi.me, retry: false });
+  const { data: topic, isLoading, isError } = useQuery({ queryKey: ['topic', slug, language], queryFn: () => api.topic(slug, language) });
+  const favorite = useMutation({ mutationFn: () => userApi.setFavorite(slug, !topic?.isFavorite, session.data!.csrfToken), onSuccess: () => { client.invalidateQueries({ queryKey: ['topic', slug] }); client.invalidateQueries({ queryKey: ['favorites'] }); client.invalidateQueries({ queryKey: ['topics'] }); } });
   if (isLoading) return <div className="page-state">Henter emne…</div>;
   if (isError || !topic) return <div className="page-state">Emnet blev ikke fundet. <Link to="/">Tilbage til biblioteket</Link></div>;
   const content = topic.content;
   return <article className="topic-page">
-    <Link className="back-link" to="/"><ArrowLeft size={16}/>Bibliotek</Link>
+    <Link className="back-link" to="/"><ArrowLeft size={16}/>{t.library}</Link>
     <header className="topic-hero">
-      <div><div className="eyebrow"><span></span>{topic.domains.join(' · ')}</div><h1>{topic.title}</h1><p>{topic.summary}</p></div>
+      <div><div className="eyebrow"><span></span>{topic.domains.join(' · ')}</div><h1>{topic.title}</h1><p>{topic.summary}</p>{session.data ? <button className={`favorite-button ${topic.isFavorite ? 'active' : ''}`} onClick={() => favorite.mutate()}><Heart/>{topic.isFavorite ? t.unfavorite : t.favorite}</button> : <p className="login-hint">{t.loginHint}</p>}</div>
-      <dl><div><dt>Type</dt><dd>{topic.type}</dd></div><div><dt>Version</dt><dd>{topic.currentVersion ?? 'Living standard'}</dd></div><div><dt>Revision</dt><dd>#{topic.revisionNumber}</dd></div><div><dt>Verificeret</dt><dd>{new Date(topic.verifiedAt).toLocaleDateString('da-DK')}</dd></div></dl>
+      <dl><div><dt>{t.type}</dt><dd>{topic.type}</dd></div><div><dt>{t.version}</dt><dd>{topic.currentVersion ?? 'Living standard'}</dd></div><div><dt>{t.revision}</dt><dd>#{topic.revisionNumber}</dd></div><div><dt>{t.verified}</dt><dd>{new Date(topic.verifiedAt).toLocaleDateString(language === 'da' ? 'da-DK' : 'en-GB')}</dd></div></dl>
     </header>
     <Tabs.Root defaultValue="overview" className="topic-tabs">
-      <Tabs.List aria-label="Indholdsniveau"><Tabs.Trigger value="overview">Overblik</Tabs.Trigger><Tabs.Trigger value="deep">Fordybelse</Tabs.Trigger><Tabs.Trigger value="sources">Kilder <span>{topic.sources.length}</span></Tabs.Trigger></Tabs.List>
+      <Tabs.List aria-label="Content level"><Tabs.Trigger value="overview">{t.overview}</Tabs.Trigger><Tabs.Trigger value="deep">{t.depth}</Tabs.Trigger><Tabs.Trigger value="sources">{t.sources} <span>{topic.sources.length}</span></Tabs.Trigger></Tabs.List>
       <Tabs.Content value="overview" className="prose-grid">
-        <section className="prose"><h2>What is {topic.title}?</h2><p className="lead">{content.introduction}</p><h2>Core concepts</h2><BulletList values={content.concepts}/><h2>Typical use cases</h2><BulletList values={content.useCases}/></section>
+        <section className="prose"><h2>{language === 'da' ? `Hvad er ${topic.title}?` : `What is ${topic.title}?`}</h2><p className="lead">{content.introduction}</p><h2>{language === 'da' ? 'Centrale begreber' : 'Core concepts'}</h2><BulletList values={content.concepts}/><h2>{language === 'da' ? 'Typiske anvendelser' : 'Typical use cases'}</h2><BulletList values={content.useCases}/></section>
-        <aside><InfoCard icon={<Sparkles/>} title="Strengths" values={content.benefits}/><InfoCard icon={<Shield/>} title="Considerations" values={content.limitations}/></aside>
+        <aside><InfoCard icon={<Sparkles/>} title={language === 'da' ? 'Styrker' : 'Strengths'} values={content.benefits}/><InfoCard icon={<Shield/>} title={language === 'da' ? 'Overvejelser' : 'Considerations'} values={content.limitations}/></aside>
       </Tabs.Content>
       <Tabs.Content value="deep" className="prose"><h2>Compatibility</h2><p>{content.compatibility}</p><h2>Requirements</h2><BulletList values={content.requirements}/><h2>When not to use it</h2><BulletList values={content.avoidWhen}/><h2>Security notes</h2><BulletList values={content.securityNotes}/>{content.examples.map((example) => <div key={example.title}><h2>{example.title}</h2><pre><code>{example.code}</code></pre></div>)}</Tabs.Content>
       <Tabs.Content value="sources" className="sources"><div className="source-intro"><GitBranch/><div><h2>Provenance</h2><p>Every source is attached to this exact revision and records what it supports.</p></div></div>{topic.sources.map((source) => <a key={source.id} href={source.url} target="_blank" rel="noreferrer" className="source-card"><div><span>{source.type.replace('_', ' ')}</span><h3>{source.title}</h3><p>{source.publisher} · verified {new Date(source.verifiedAt).toLocaleDateString('da-DK')}</p>{source.claims.map((claim) => <small key={claim}><CheckCircle2 size={13}/>{claim}</small>)}</div><ExternalLink/></a>)}</Tabs.Content>

apps/web/src/lib/api.ts

@@ -1,4 +1,4 @@
-import type { Paginated, TopicDetail, TopicListItem, TopicRevisionInput } from '@tech-library/contracts';
+import type { Language, Paginated, TopicDetail, TopicListItem, TopicRevisionInput } from '@tech-library/contracts';
 
 const json = async <T>(pending: Response | Promise<Response>): Promise<T> => {
   const response = await pending;
@@ -7,8 +7,8 @@ const json = async <T>(pending: Response | Promise<Response>): Promise<T> => {
 };
 
 export const api = {
-  topics: (params: URLSearchParams) => json<Paginated<TopicListItem>>(fetch(`/api/v1/topics?${params}`)),
+  topics: (params: URLSearchParams) => json<Paginated<TopicListItem>>(fetch(`/api/v1/topics?${params}`, { credentials: 'include' })),
-  topic: (slug: string) => json<TopicDetail>(fetch(`/api/v1/topics/${slug}`)),
+  topic: (slug: string, language: Language) => json<TopicDetail>(fetch(`/api/v1/topics/${slug}?lang=${language}`, { credentials: 'include' })),
   revisions: (slug: string) => json<Array<{ id: string; number: number; status: string; changeNote: string; createdAt: string; active: number }>>(fetch(`/api/v1/topics/${slug}/revisions`)),
   facets: () => json<{ domains: Array<{ value: string; count: number }>; types: Array<{ value: string; count: number }> }>(fetch('/api/v1/facets')),
   login: (username: string, password: string) => json<{ csrfToken: string }>(fetch('/api/v1/admin/login', { method: 'POST', headers: { 'content-type': 'application/json' }, credentials: 'include', body: JSON.stringify({ username, password }) })),
@@ -17,3 +17,11 @@ export const api = {
   mutate: (path: string, csrfToken: string, body?: unknown) => json<Record<string, unknown>>(fetch(`/api/v1/admin${path}`, { method: 'POST', credentials: 'include', headers: { 'content-type': 'application/json', 'x-csrf-token': csrfToken }, body: body === undefined ? undefined : JSON.stringify(body) })),
   createDraft: (csrfToken: string, input: TopicRevisionInput) => api.mutate('/revisions', csrfToken, input)
 };
+
+export const userApi = {
+  me: () => json<{ username: string; csrfToken: string }>(fetch('/api/v1/auth/me', { credentials: 'include' })),
+  authenticate: (mode: 'login' | 'register', username: string, password: string) => json<{ username: string; csrfToken: string }>(fetch(`/api/v1/auth/${mode}`, { method: 'POST', credentials: 'include', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ username, password }) })),
+  logout: (csrfToken: string) => json(fetch('/api/v1/auth/logout', { method: 'POST', credentials: 'include', headers: { 'x-csrf-token': csrfToken } })),
+  favorites: (language: Language) => json<TopicListItem[]>(fetch(`/api/v1/favorites?lang=${language}`, { credentials: 'include' })),
+  setFavorite: (slug: string, favorite: boolean, csrfToken: string) => json<{ favorite: boolean }>(fetch(`/api/v1/favorites/${slug}`, { method: favorite ? 'PUT' : 'DELETE', credentials: 'include', headers: { 'x-csrf-token': csrfToken } }))
+};

apps/web/src/main.tsx

@@ -11,6 +11,7 @@ import './styles.css';
 const router = createBrowserRouter([{ path: '/', element: <AppLayout />, children: [
   { index: true, element: <LibraryPage /> },
   { path: 'emne/:slug', element: <TopicPage /> },
+  { path: 'favoritter', element: <LibraryPage favoritesOnly /> },
   { path: 'admin', element: <AdminPage /> }
 ]}]);
 const client = new QueryClient({ defaultOptions: { queries: { staleTime: 60_000, retry: 1 } } });

apps/web/src/store/preferences.ts

@@ -0,0 +1,12 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { Language } from '@tech-library/contracts';
+
+interface Preferences { language: Language; setLanguage(language: Language): void }
+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.' },
+  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.' }
+} as const;
+export const useText = () => { const language = usePreferences((state) => state.language); return { language, t: messages[language] }; };

apps/web/src/styles.css

@@ -2,6 +2,7 @@
 
 :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)}
 .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}
+.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}
 .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-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{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)}

apps/web/src/ui/AppLayout.tsx

@@ -1,16 +1,20 @@
-import { BookOpen, Github, ShieldCheck } from 'lucide-react';
+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 { useState } from 'react';
 import { Link, NavLink, Outlet } from 'react-router-dom';
+import { userApi } from '../lib/api';
+import { usePreferences, useText } from '../store/preferences';
 
 export function AppLayout() {
-  return <div className="app-shell">
+  const { language, t } = useText(); const setLanguage = usePreferences((state) => state.setLanguage); const client = useQueryClient();
-    <header className="topbar">
+  const session = useQuery({ queryKey: ['user-session'], queryFn: userApi.me, retry: false });
-      <Link className="brand" to="/"><span className="brand-mark">TL</span><span>Tech Library</span></Link>
+  const logout = useMutation({ mutationFn: () => userApi.logout(session.data!.csrfToken), onSuccess: () => { client.setQueryData(['user-session'], null); client.invalidateQueries({ queryKey: ['topics'] }); } });
-      <nav aria-label="Primær navigation">
+  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>;
-        <NavLink to="/" end><BookOpen size={17}/>Bibliotek</NavLink>
+}
-        <NavLink to="/admin"><ShieldCheck size={17}/>Redaktion</NavLink>
+
-      </nav>
+function AccountDialog() {
-    </header>
+  const { t } = useText(); const client = useQueryClient(); const [open, setOpen] = useState(false); const [mode, setMode] = useState<'login' | 'register'>('login'); const [error, setError] = useState('');
-    <main><Outlet /></main>
+  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') });
-    <footer><span>Levende viden. Dokumenterede kilder.</span><a href="https://git.p20.dev/christian/TechLibrary" target="_blank" rel="noreferrer"><Github size={16}/>Kildekode</a></footer>
+  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>;
-  </div>;
 }

docs/architecture.md

@@ -19,6 +19,8 @@ React/Vite PWA ──REST──> Fastify API ──> SQLite
 
 Published revisions are immutable. `topics.active_revision_id` is the only publication pointer, so rollback does not rewrite history. Findings and draft revisions never become public merely because a worker produced them.
 
+English revision payloads are canonical. Each localized payload references the exact English source revision it translates; missing translations fall back to English rather than blocking publication. Reader accounts and favorites are separate from the editorial administrator and never affect public content.
+
 ## ADR-001: SQLite and one writer host
 
 SQLite is authoritative for v1 and runs on a persistent local volume. WAL mode supports concurrent readers while API and worker serialize short writes. Do not place the database on a network filesystem. Database access stays behind the database package and repository layer to preserve a future migration path.

packages/contracts/src/index.ts

@@ -39,6 +39,8 @@ export type TopicSection = z.infer<typeof topicSectionSchema>;
 export type TopicType = (typeof topicTypes)[number];
 export type RelationType = (typeof relationTypes)[number];
 export type SourceType = (typeof sourceTypes)[number];
+export const languages = ['en', 'da'] as const;
+export type Language = (typeof languages)[number];
 
 export interface TopicListItem {
   id: string;
@@ -50,6 +52,10 @@ export interface TopicListItem {
   tags: string[];
   currentVersion: string | null;
   verifiedAt: string;
+  language: Language;
+  sourceLanguage: 'en';
+  translationFallback: boolean;
+  isFavorite?: boolean;
 }
 
 export interface TopicDetail extends TopicListItem {

packages/database/src/migrations.ts

@@ -15,7 +15,13 @@ const migrations = [
    CREATE VIRTUAL TABLE IF NOT EXISTS topic_search USING fts5(topic_id UNINDEXED, title, summary, aliases, content, tags, tokenize='porter unicode61');
    CREATE INDEX IF NOT EXISTS revisions_topic_id ON revisions(topic_id);
    CREATE INDEX IF NOT EXISTS findings_status ON findings(status);
-   CREATE INDEX IF NOT EXISTS relations_source ON relations(source_topic_id);`
+   CREATE INDEX IF NOT EXISTS relations_source ON relations(source_topic_id);`,
+  `CREATE TABLE IF NOT EXISTS topic_translations (id TEXT PRIMARY KEY, revision_id TEXT NOT NULL REFERENCES revisions(id), language TEXT NOT NULL, payload TEXT NOT NULL, source_revision_id TEXT NOT NULL REFERENCES revisions(id), created_at TEXT NOT NULL, updated_at TEXT NOT NULL, UNIQUE(revision_id, language));
+   CREATE TABLE IF NOT EXISTS users (id TEXT PRIMARY KEY, username TEXT NOT NULL UNIQUE COLLATE NOCASE, password_hash TEXT NOT NULL, created_at TEXT NOT NULL);
+   CREATE TABLE IF NOT EXISTS user_sessions (id TEXT PRIMARY KEY, user_id TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE, csrf_token TEXT NOT NULL, expires_at TEXT NOT NULL, created_at TEXT NOT NULL);
+   CREATE TABLE IF NOT EXISTS favorites (user_id TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE, topic_id TEXT NOT NULL REFERENCES topics(id) ON DELETE CASCADE, created_at TEXT NOT NULL, PRIMARY KEY(user_id, topic_id));
+   CREATE INDEX IF NOT EXISTS user_sessions_user ON user_sessions(user_id);
+   CREATE INDEX IF NOT EXISTS favorites_user ON favorites(user_id);`
 ];
 
 export function migrate(sqlite: Database.Database): void {

packages/database/src/schema.ts

@@ -98,3 +98,34 @@ export const workerJobs = sqliteTable('worker_jobs', {
   completedAt: text('completed_at'),
   result: text('result', { mode: 'json' })
 });
+
+export const topicTranslations = sqliteTable('topic_translations', {
+  id: text('id').primaryKey(),
+  revisionId: text('revision_id').notNull().references(() => revisions.id),
+  language: text('language').notNull(),
+  payload: text('payload', { mode: 'json' }).notNull(),
+  sourceRevisionId: text('source_revision_id').notNull().references(() => revisions.id),
+  createdAt: text('created_at').notNull(),
+  updatedAt: text('updated_at').notNull()
+}, (table) => [uniqueIndex('translation_revision_language').on(table.revisionId, table.language)]);
+
+export const users = sqliteTable('users', {
+  id: text('id').primaryKey(),
+  username: text('username').notNull().unique(),
+  passwordHash: text('password_hash').notNull(),
+  createdAt: text('created_at').notNull()
+});
+
+export const userSessions = sqliteTable('user_sessions', {
+  id: text('id').primaryKey(),
+  userId: text('user_id').notNull().references(() => users.id),
+  csrfToken: text('csrf_token').notNull(),
+  expiresAt: text('expires_at').notNull(),
+  createdAt: text('created_at').notNull()
+});
+
+export const favorites = sqliteTable('favorites', {
+  userId: text('user_id').notNull().references(() => users.id),
+  topicId: text('topic_id').notNull().references(() => topics.id),
+  createdAt: text('created_at').notNull()
+}, (table) => [uniqueIndex('favorite_user_topic').on(table.userId, table.topicId)]);

packages/database/src/seed.ts

@@ -68,6 +68,7 @@ export function seedDatabase(sqlite: Database.Database): number {
   const insertSource = sqlite.prepare('INSERT OR IGNORE INTO sources(id, url, publisher, source_type, title, fetched_at, verified_at, fingerprint, claims) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)');
   const linkSource = sqlite.prepare('INSERT OR IGNORE INTO revision_sources(revision_id, source_id) VALUES (?, ?)');
   const indexSearch = sqlite.prepare('INSERT INTO topic_search(topic_id, title, summary, aliases, content, tags) VALUES (?, ?, ?, ?, ?, ?)');
+  const insertTranslation = sqlite.prepare('INSERT OR IGNORE INTO topic_translations(id,revision_id,language,payload,source_revision_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?)');
   const countBefore = Number((sqlite.prepare('SELECT count(*) AS count FROM topics').get() as { count: number }).count);
 
   sqlite.transaction(() => {
@@ -80,6 +81,7 @@ export function seedDatabase(sqlite: Database.Database): number {
       insertRevision.run(revisionId, topicId, 'approved', JSON.stringify(data), data.changeNote, now, now, now);
       insertSource.run(sourceId, item.url, item.publisher, 'documentation', `${item.title} official documentation`, now, now, createHash('sha256').update(item.url).digest('hex'), JSON.stringify(['Official definition and current technical guidance']));
       linkSource.run(revisionId, sourceId);
+      insertTranslation.run(`translation_${item.slug}_da`, revisionId, 'da', JSON.stringify(danishPayload(data, item)), revisionId, now, now);
       if (!(sqlite.prepare('SELECT 1 FROM topic_search WHERE topic_id = ?').get(topicId))) {
         indexSearch.run(topicId, data.title, data.summary, data.aliases.join(' '), JSON.stringify(data.content), data.tags.join(' '));
       }
@@ -89,3 +91,24 @@ export function seedDatabase(sqlite: Database.Database): number {
   const countAfter = Number((sqlite.prepare('SELECT count(*) AS count FROM topics').get() as { count: number }).count);
   return countAfter - countBefore;
 }
+
+function danishPayload(source: TopicRevisionInput, topic: SeedTopic): TopicRevisionInput {
+  const domain = ({ 'Web platform': 'Webplatform', 'Frontend and UI': 'Frontend og UI', 'Backend and APIs': 'Backend og API’er', Data: 'Data', 'Mobile and desktop': 'Mobil og desktop', 'DevOps and cloud': 'DevOps og cloud', 'Testing and observability': 'Test og observability', 'Security and privacy': 'Sikkerhed og privacy' } as Record<string, string>)[topic.domain] ?? topic.domain;
+  return {
+    ...source, domains: [domain],
+    summary: `${topic.title} er et centralt emne inden for ${domain.toLowerCase()}, med fokus på praktisk anvendelse, kompatibilitet og dokumenterede tekniske valg.`,
+    content: {
+      ...source.content,
+      introduction: `${topic.title} er en vigtig del af moderne softwareudvikling. Opslaget giver et praktisk overblik over teknologien, dens trade-offs og dens officielle kilder.`,
+      concepts: ['Kernemodel og terminologi', 'Økosystem og interoperabilitet', 'Livscyklus og vedligeholdelse'],
+      useCases: [`Vurdér ${topic.title} til nye og eksisterende systemer`, 'Forstå integrationsgrænser og driftsmæssig påvirkning'],
+      benefits: ['Underbygget af en officiel, sporbar primærkilde', 'Præsenteret i lag til læsere med forskellig erfaring'],
+      limitations: ['Præcise muligheder og support varierer efter version og platform'],
+      avoidWhen: ['Driftsomkostninger eller kompatibilitetskrav overstiger værdien for projektet'],
+      compatibility: 'Se den officielle dokumentation for aktuel platform- og versionskompatibilitet.',
+      requirements: ['Kontrollér understøttede versioner før anvendelse', 'Test i det planlagte produktionsmiljø'],
+      securityNotes: ['Gennemgå officiel sikkerhedsvejledning og supportpolitik før produktionsbrug.']
+    },
+    changeNote: 'Første dansk oversættelse baseret på den engelske kilderevision'
+  };
+}