diff --git a/README.md b/README.md index 97d2ce9..306bd18 100644 --- a/README.md +++ b/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 diff --git a/apps/web/src/features/library/LibraryPage.tsx b/apps/web/src/features/library/LibraryPage.tsx index 8225a40..47606d4 100644 --- a/apps/web/src/features/library/LibraryPage.tsx +++ b/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 <>
-
Et levende teknisk opslagsværk
-

Forstå teknologien.
Se hele sammenhængen.

-

Kurateret viden om moderne web-, app- og systemudvikling — fra første begreb til arkitekturbeslutning. Hvert udsagn føres tilbage til sin kilde.

- -
{topics.data?.total ?? '—'} kuraterede emner•Officielle primærkilder•Løbende verificeret
+
{t.sourceLibrary}
+

{favoritesOnly ? t.favorites : t.headline}
{favoritesOnly ? '' : t.headlineAccent}

+

{t.intro}

+ +
{total || '—'} {t.curated}•{t.official}•{t.verified}
-

Biblioteket

{domain || 'Alle emner'}

{topics.data?.total ?? 0} resultater
- {topics.isLoading &&
Henter biblioteket…
} - {topics.isError &&
Biblioteket kunne ikke hentes. Kontrollér forbindelsen og prøv igen.
} -
{topics.data?.items.map((topic, index) => +

{t.library}

{favoritesOnly ? t.favorites : domain || t.allTopics}

{total} {t.results}
+ {loading &&
{t.loading}
} + {failed &&
Library unavailable.
} +
{items.map((topic, index) =>
{labelType(topic.type)}

{topic.title}

{topic.summary}

{topic.domains.map((value) => {value})}
Verificeret {new Date(topic.verifiedAt).toLocaleDateString('da-DK')}
)}
- {topics.data?.items.length === 0 &&
Ingen emner matcher din søgning.
} + {items.length === 0 && !loading &&
{favoritesOnly ? t.noFavorites : t.noResults}
}
; diff --git a/apps/web/src/features/topic/TopicPage.tsx b/apps/web/src/features/topic/TopicPage.tsx index 3054f56..973523a 100644 --- a/apps/web/src/features/topic/TopicPage.tsx +++ b/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 { ArrowLeft, CheckCircle2, ExternalLink, GitBranch, Shield, Sparkles } from 'lucide-react'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +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
Henter emne…
; if (isError || !topic) return
Emnet blev ikke fundet. Tilbage til biblioteket
; const content = topic.content; return
- Bibliotek + {t.library}
-
{topic.domains.join(' · ')}

{topic.title}

{topic.summary}

+
{topic.domains.join(' · ')}

{topic.title}

{topic.summary}

{session.data ? :

{t.loginHint}

}
Type
{topic.type}
Version
{topic.currentVersion ?? 'Living standard'}
Revision
#{topic.revisionNumber}
Verificeret
{new Date(topic.verifiedAt).toLocaleDateString('da-DK')}
- OverblikFordybelseKilder {topic.sources.length} + {t.overview}{t.depth}{t.sources} {topic.sources.length} -

What is {topic.title}?

{content.introduction}

Core concepts

Typical use cases

- +

{language === 'da' ? `Hvad er ${topic.title}?` : `What is ${topic.title}?`}

{content.introduction}

{language === 'da' ? 'Centrale begreber' : 'Core concepts'}

{language === 'da' ? 'Typiske anvendelser' : 'Typical use cases'}

+

Compatibility

{content.compatibility}

Requirements

When not to use it

Security notes

{content.examples.map((example) =>

{example.title}

{example.code}
)}

Provenance

Every source is attached to this exact revision and records what it supports.

{topic.sources.map((source) =>
{source.type.replace('_', ' ')}

{source.title}

{source.publisher} · verified {new Date(source.verifiedAt).toLocaleDateString('da-DK')}

{source.claims.map((claim) => {claim})}
)}
diff --git a/apps/web/src/lib/api.ts b/apps/web/src/lib/api.ts index 45d9a14..08181a2 100644 --- a/apps/web/src/lib/api.ts +++ b/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 (pending: Response | Promise): Promise => { const response = await pending; @@ -7,8 +7,8 @@ const json = async (pending: Response | Promise): Promise => { }; export const api = { - topics: (params: URLSearchParams) => json>(fetch(`/api/v1/topics?${params}`)), - topic: (slug: string) => json(fetch(`/api/v1/topics/${slug}`)), + topics: (params: URLSearchParams) => json>(fetch(`/api/v1/topics?${params}`, { credentials: 'include' })), + topic: (slug: string, language: Language) => json(fetch(`/api/v1/topics/${slug}?lang=${language}`, { credentials: 'include' })), revisions: (slug: string) => json>(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>(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(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 } })) +}; diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx index b5b9765..a527a08 100644 --- a/apps/web/src/main.tsx +++ b/apps/web/src/main.tsx @@ -11,6 +11,7 @@ import './styles.css'; const router = createBrowserRouter([{ path: '/', element: , children: [ { index: true, element: }, { path: 'emne/:slug', element: }, + { path: 'favoritter', element: }, { path: 'admin', element: } ]}]); const client = new QueryClient({ defaultOptions: { queries: { staleTime: 60_000, retry: 1 } } }); diff --git a/apps/web/src/store/preferences.ts b/apps/web/src/store/preferences.ts new file mode 100644 index 0000000..d860d1a --- /dev/null +++ b/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()(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: 'Løbende verificeret', filters: 'Filtrér', reset: 'Nulstil', domain: 'Fagområde', type: 'Type', 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: 'Continuously verified', filters: 'Filter', reset: 'Reset', domain: 'Domain', type: 'Type', 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] }; }; diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css index c25a552..d2a4932 100644 --- a/apps/web/src/styles.css +++ b/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)} diff --git a/apps/web/src/ui/AppLayout.tsx b/apps/web/src/ui/AppLayout.tsx index 8a56bf6..b757379 100644 --- a/apps/web/src/ui/AppLayout.tsx +++ b/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
-
- TLTech Library - -
-
-
Levende viden. Dokumenterede kilder.Kildekode
-
; + 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
TLTech Library
Living knowledge. Documented sources.Source
; +} + +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 {t.accountTitle}{mode === 'login' ? t.loginHint : '3–32 characters. Password: minimum 8 characters.'}
{ event.preventDefault(); setError(''); const data = new FormData(event.currentTarget); authenticate.mutate({ username: String(data.get('username')), password: String(data.get('password')) }); }}>{error &&

{error}

}
; } diff --git a/docs/architecture.md b/docs/architecture.md index efbb393..0a8e70b 100644 --- a/docs/architecture.md +++ b/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.