+ )
+}
diff --git a/server/ui/src/api.ts b/server/ui/src/api.ts
new file mode 100644
index 0000000..6752acf
--- /dev/null
+++ b/server/ui/src/api.ts
@@ -0,0 +1,162 @@
+// Der EINZIGE Ort, an dem fetch steht.
+//
+// Und die Stelle, an der der Fivemanage-Anlauf gescheitert ist: dessen
+// http-util.ts warf jeden Fehlschlag als `new Error(…)`, die Hooks prüften auf
+// `instanceof ApiError` — und damit wurde jeder Fehler lautlos verschluckt.
+// Deshalb gibt es hier genau eine Fehlerklasse, und `request` wirft
+// ausschließlich diese. Wer sie fängt, hat immer einen Text zum Anzeigen.
+
+export class ApiError extends Error {
+ readonly status: number
+
+ constructor(message: string, status: number) {
+ super(message)
+ this.name = 'ApiError'
+ this.status = status
+ }
+}
+
+/** Kein Netz, kein Server, DNS tot — alles, was nie beim Dienst ankam. */
+export class NetworkError extends ApiError {
+ constructor(message: string) {
+ super(message, 0)
+ this.name = 'NetworkError'
+ }
+}
+
+async function request(path: string, init: RequestInit = {}): Promise {
+ let response: Response
+ try {
+ response = await fetch(path, {
+ // Das Sitzungs-Cookie ist httpOnly; ohne diese Zeile schickt der
+ // Browser es nicht mit, und jede Antwort wäre 401.
+ credentials: 'same-origin',
+ ...init,
+ headers: {
+ ...(init.body ? { 'content-type': 'application/json' } : {}),
+ ...init.headers,
+ },
+ })
+ } catch (err) {
+ // fetch wirft nur, wenn die Anfrage gar nicht stattgefunden hat. Das
+ // ist ein anderer Fall als "der Dienst sagt nein", und er verdient
+ // einen anderen Satz.
+ throw new NetworkError(
+ `Der Dienst ist nicht erreichbar (${err instanceof Error ? err.message : 'unbekannt'})`,
+ )
+ }
+
+ const text = await response.text()
+ let data: unknown = null
+ if (text) {
+ try {
+ data = JSON.parse(text)
+ } catch {
+ // Der Dienst antwortet auf allen API-Wegen mit JSON. Kommt hier
+ // etwas anderes an, ist der Proxy davor oder die Sitzung schuld —
+ // dann steht der Anfang der Antwort in der Meldung, statt dass
+ // "unerwarteter Fehler" auf dem Bildschirm steht.
+ if (!response.ok) {
+ throw new ApiError(
+ `HTTP ${response.status}: ${text.slice(0, 140)}`,
+ response.status,
+ )
+ }
+ throw new ApiError('Die Antwort war kein JSON', response.status)
+ }
+ }
+
+ if (!response.ok) {
+ const message =
+ data && typeof data === 'object' && typeof (data as any).error === 'string'
+ ? (data as any).error
+ : `HTTP ${response.status}`
+ throw new ApiError(message, response.status)
+ }
+
+ return data as T
+}
+
+const get = (path: string) => request(path)
+const post = (path: string, body?: unknown) =>
+ request(path, { method: 'POST', body: body === undefined ? undefined : JSON.stringify(body) })
+const del = (path: string) => request(path, { method: 'DELETE' })
+
+// -- Die Formen, die der Dienst wirklich liefert -------------------------------
+//
+// Abgeschrieben aus routes/dash.ts, nicht erfunden. Wo der Server
+// Datenbankspalten durchreicht, heißen sie hier genauso (can_delete,
+// created_at) — ein hübscherer Name auf halbem Weg wäre eine Übersetzung, die
+// beim nächsten Feld vergessen wird.
+
+export type User = { id: number; username: string }
+
+export type MediaItem = {
+ id: number
+ path: string
+ size: number
+ sha256: string
+ mime: string
+ token_id: number | null
+ created_at: number
+ updated_at: number
+ url: string
+}
+
+export type MediaPage = {
+ total: number
+ limit: number
+ offset: number
+ items: MediaItem[]
+}
+
+export type Stats = {
+ files: number
+ bytes: number
+ tokens: number
+ folders: { folder: string; files: number; bytes: number }[]
+ publicUrl: string
+}
+
+export type TokenRow = {
+ id: number
+ name: string
+ prefix: string
+ can_delete: number
+ created_at: number
+ last_used_at: number | null
+}
+
+/** Der Klartext kommt genau einmal — beim Anlegen. Danach steht nur noch der
+ * Hash in der Datenbank, und auch der Dienst kann ihn nicht mehr zeigen. */
+export type NewToken = {
+ id: number
+ name: string
+ prefix: string
+ canDelete: boolean
+ token: string
+}
+
+export const api = {
+ login: (username: string, password: string) =>
+ post<{ user: User }>('/api/dash/auth/login', { username, password }),
+ logout: () => post<{ ok: true }>('/api/dash/auth/logout'),
+ me: () => get<{ user: User }>('/api/dash/auth/me'),
+ changePassword: (current: string, next: string) =>
+ post<{ ok: true }>('/api/dash/auth/password', { current, next }),
+
+ media: (query: string, limit: number, offset: number) =>
+ get(
+ `/api/dash/media?query=${encodeURIComponent(query)}&limit=${limit}&offset=${offset}`,
+ ),
+ deleteMedia: (id: number) => del<{ deleted: string }>(`/api/dash/media/${id}`),
+ deleteMediaBulk: (ids: number[]) =>
+ post<{ deleted: string[]; count: number }>('/api/dash/media/delete', { ids }),
+
+ stats: () => get('/api/dash/stats'),
+
+ tokens: () => get<{ items: TokenRow[] }>('/api/dash/tokens'),
+ createToken: (name: string, prefix: string, canDelete: boolean) =>
+ post('/api/dash/tokens', { name, prefix, canDelete }),
+ deleteToken: (id: number) => del<{ ok: true }>(`/api/dash/tokens/${id}`),
+}
diff --git a/server/ui/src/components/Bausteine.tsx b/server/ui/src/components/Bausteine.tsx
new file mode 100644
index 0000000..32e27e0
--- /dev/null
+++ b/server/ui/src/components/Bausteine.tsx
@@ -0,0 +1,190 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import { Loader2 } from 'lucide-react'
+
+// -- Knopf ---------------------------------------------------------------------
+
+type KnopfArt = 'haupt' | 'still' | 'gefahr'
+
+const arten: Record = {
+ haupt: 'bg-akzent text-grund hover:bg-akzent/85 border-akzent',
+ still: 'bg-flaeche-hoch text-schrift hover:bg-rand border-rand',
+ gefahr: 'bg-schlecht/15 text-schlecht hover:bg-schlecht/25 border-schlecht/40',
+}
+
+/** Ein Knopf, der beim Arbeiten aussieht, als arbeite er.
+ *
+ * `wartet` sperrt ihn und zeigt den Kreisel. Ohne das ist der zweite Klick
+ * einen Wimpernschlag später eine zweite Anfrage — bei "Organisation anlegen"
+ * war genau das der Weg zu neunzehn gleichnamigen Einträgen. */
+export function Knopf({
+ art = 'still',
+ wartet = false,
+ kind,
+ className = '',
+ disabled,
+ ...rest
+}: {
+ art?: KnopfArt
+ wartet?: boolean
+ kind?: ReactNode
+} & React.ButtonHTMLAttributes) {
+ return (
+
+ )
+}
+
+// -- Eingabefeld ---------------------------------------------------------------
+
+export function Feld({
+ label,
+ hinweis,
+ className = '',
+ ...rest
+}: { label?: string; hinweis?: string } & React.InputHTMLAttributes) {
+ return (
+
+ )
+}
+
+// -- Karte ---------------------------------------------------------------------
+
+export function Karte({
+ titel,
+ rechts,
+ children,
+}: {
+ titel?: string
+ rechts?: ReactNode
+ children: ReactNode
+}) {
+ return (
+
+ {(titel || rechts) && (
+
+
{titel}
+ {rechts}
+
+ )}
+
{children}
+
+ )
+}
+
+// -- Nachfrage vor dem Löschen -------------------------------------------------
+
+/** Ein Dialog, der sagt, WAS gelöscht wird — nicht "Sind Sie sicher?".
+ *
+ * Löschen ist die einzige Stelle hier, die sich nicht rückgängig machen
+ * lässt: die Datei ist danach von der Platte weg, und es gibt keine
+ * Sicherung, aus der sie zurückkäme. */
+export function Nachfrage({
+ offen,
+ titel,
+ text,
+ bestaetigung,
+ wartet,
+ onJa,
+ onNein,
+}: {
+ offen: boolean
+ titel: string
+ text: ReactNode
+ bestaetigung: string
+ wartet?: boolean
+ onJa: () => void
+ onNein: () => void
+}) {
+ // Escape schließt. Ein Dialog, aus dem man nur mit der Maus herauskommt,
+ // ist ein Dialog, den man versehentlich bestätigt.
+ useEffect(() => {
+ if (!offen) return
+ const ab = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') onNein()
+ }
+ window.addEventListener('keydown', ab)
+ return () => window.removeEventListener('keydown', ab)
+ }, [offen, onNein])
+
+ if (!offen) return null
+
+ return (
+
+ Dateien liegen darunter unter /f/. Diese
+ Adresse steht nirgends in der Datenbank — sie wird bei jeder Antwort aus{' '}
+ PUBLIC_URL gebaut, ein Umzug ist deshalb
+ eine geänderte Variable.
+
+ )}
+
+
+ {/* Der Klartext — genau einmal.
+ Deshalb ein Dialog, den man bewusst schließen muss, und kein
+ Zettel, der nach vier Sekunden verschwindet. */}
+ {frisch && (
+
+
+
+
+ Token „{frisch.name}" angelegt
+
+
+
+
+
+
+ Dies ist das einzige Mal, dass der Token im Klartext zu sehen
+ ist. Danach steht nur noch sein Hash in der Datenbank — auch
+ der Dienst kann ihn nicht mehr zeigen.
+
+
+ „{weg?.name}" wird sofort ungültig. Was ihn benutzt — etwa der
+ Fotostudio — bekommt ab dann 401 und lädt nichts mehr hoch.
+
+
Hochgeladene Dateien bleiben.
+
+ }
+ />
+
+ )
+}
diff --git a/server/ui/src/store.ts b/server/ui/src/store.ts
new file mode 100644
index 0000000..53eafbf
--- /dev/null
+++ b/server/ui/src/store.ts
@@ -0,0 +1,102 @@
+import { create } from 'zustand'
+import { api, ApiError, type User } from './api'
+
+// -- Rückmeldungen -------------------------------------------------------------
+//
+// DIE EINE REGEL: jeder Knopf gibt Rückmeldung, auch der erfolgreiche. Deshalb
+// steht die Meldungsliste hier im Laden und nicht in irgendeiner Seite — sie
+// gehört zu jeder von ihnen.
+
+export type NoteKind = 'ok' | 'fehler' | 'hinweis'
+export type Note = { id: number; kind: NoteKind; text: string }
+
+let nextNoteId = 1
+
+type State = {
+ user: User | null
+ /** Solange true, weiß noch niemand, ob eine Sitzung besteht — in dieser
+ * Zeit darf weder das Anmeldeformular noch das Dashboard aufblitzen. */
+ checking: boolean
+ notes: Note[]
+
+ checkSession: () => Promise
+ login: (username: string, password: string) => Promise
+ logout: () => Promise
+
+ note: (kind: NoteKind, text: string) => void
+ dismiss: (id: number) => void
+}
+
+export const useStore = create((set, get) => ({
+ user: null,
+ checking: true,
+ notes: [],
+
+ async checkSession() {
+ try {
+ const { user } = await api.me()
+ set({ user, checking: false })
+ } catch (err) {
+ // 401 ist hier kein Fehler, sondern die Antwort "noch nicht
+ // angemeldet". Alles andere ist einer und wird gesagt.
+ if (err instanceof ApiError && err.status === 401) {
+ set({ user: null, checking: false })
+ return
+ }
+ set({ user: null, checking: false })
+ get().note('fehler', err instanceof Error ? err.message : 'Unbekannter Fehler')
+ }
+ },
+
+ async login(username, password) {
+ const { user } = await api.login(username, password)
+ set({ user })
+ get().note('ok', `Angemeldet als ${user.username}.`)
+ },
+
+ async logout() {
+ await api.logout()
+ set({ user: null })
+ // Die Erfolgsmeldung kommt hier NICHT: der Aufrufer geht über `run`,
+ // und der meldet. Beides hieße zwei Zettel für einen Klick.
+ },
+
+ note(kind, text) {
+ const id = nextNoteId++
+ set((s) => ({ notes: [...s.notes, { id, kind, text }] }))
+ // Fehler bleiben stehen, bis jemand sie wegklickt. Ein Fehler, der von
+ // allein verschwindet, ist ein Fehler, den niemand gelesen hat.
+ if (kind !== 'fehler') {
+ setTimeout(() => get().dismiss(id), 4000)
+ }
+ },
+
+ dismiss(id) {
+ set((s) => ({ notes: s.notes.filter((n) => n.id !== id) }))
+ },
+}))
+
+/** Eine Aktion ausführen und IMMER etwas dazu sagen.
+ *
+ * Der Erfolgstext wird mitgegeben, der Fehlertext kommt vom Dienst. Wer
+ * darüber geht, kann keinen stillen Knopf bauen — und genau darum geht es. */
+export async function run(
+ action: () => Promise,
+ erfolg: string | ((result: T) => string),
+): Promise {
+ const { note } = useStore.getState()
+ try {
+ const result = await action()
+ note('ok', typeof erfolg === 'function' ? erfolg(result) : erfolg)
+ return result
+ } catch (err) {
+ note('fehler', err instanceof Error ? err.message : 'Unbekannter Fehler')
+ // Eine abgelaufene Sitzung ist kein gewöhnlicher Fehler: sie führt
+ // zurück aufs Anmeldeformular, statt jeden weiteren Knopf mit
+ // "nicht angemeldet" zu quittieren.
+ if (err instanceof ApiError && err.status === 401) {
+ useStore.setState({ user: null })
+ }
+ return null
+ }
+}
diff --git a/server/ui/tsconfig.json b/server/ui/tsconfig.json
new file mode 100644
index 0000000..81bd339
--- /dev/null
+++ b/server/ui/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ // EIN tsconfig, kein Composite-Projekt. Das spart die tsbuildinfo-Dateien
+ // und die Frage, warum vite.config.js plötzlich neben vite.config.ts liegt.
+ "compilerOptions": {
+ "target": "ES2022",
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "jsx": "react-jsx",
+ "types": ["vite/client"],
+
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "verbatimModuleSyntax": true,
+
+ "skipLibCheck": true,
+ "isolatedModules": true,
+ "noEmit": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/server/ui/vite.config.ts b/server/ui/vite.config.ts
new file mode 100644
index 0000000..251dd68
--- /dev/null
+++ b/server/ui/vite.config.ts
@@ -0,0 +1,35 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwind from '@tailwindcss/vite'
+
+// @vitejs/plugin-react ist auf ^4 festgenagelt, und das ist kein Zufall: die 6
+// verlangt Vite ^8. Vite 5 bleibt (so steht es in der ROADMAP), und die 4 ist
+// die letzte Fassung, die dazu passt — nachgesehen in den peerDependencies,
+// nicht geraten.
+export default defineConfig({
+ plugins: [react(), tailwind()],
+
+ build: {
+ // Der Dienst liefert die gebaute Oberflaeche aus ../web aus; der Pfad
+ // steht in index.ts als `new URL('../web/', import.meta.url)`,
+ // ausgehend von dist/. Wer das hier aendert, aendert ihn dort mit.
+ outDir: '../web',
+ emptyOutDir: true,
+ },
+
+ server: {
+ // Im Entwicklungsbetrieb laeuft die Oberflaeche unter
+ // http://localhost:5173 und der Dienst im Container auf 9101. Ohne
+ // diesen Umweg gaebe es zwei Ursprunge und das Sitzungs-Cookie kaeme
+ // nie an.
+ //
+ // Dass das ueberhaupt geht, liegt an einer Ausnahme: der Container
+ // setzt das Cookie mit `Secure`, und ein Browser nimmt so eines ueber
+ // http NUR auf localhost an. Hier hilft die Ausnahme — beim Pruefen
+ // einer LAN-Adresse fuehrt genau sie in die Irre (siehe ROADMAP).
+ proxy: {
+ '/api': { target: 'http://127.0.0.1:9101' },
+ '/f': { target: 'http://127.0.0.1:9101' },
+ },
+ },
+})