Initial Commit

2026-10-03 20:07:49 +02:00
commit a1346c98b1
427 changed files with 59320 additions and 0 deletions
@@ -0,0 +1,101 @@
+# BRETT
+
+Ein Imageboard-artiges Upload- und Diskussions-Tool, gebaut mit **Nuxt 4** und **shadcn-vue**. Nutzer können Dateien oder URLs hochladen, in Threads kommentieren, mit Discord-artigen Reactions antworten und aus über einem Dutzend Themes wählen.
+
+## Features
+
+- **Uploads:** Drag & Drop (Seiten-Dropzone + Upload-Popover), Datei- oder URL-Upload, Thumbnails für Bilder, eingebetteter Plyr-Videoplayer, YouTube-Embeds und Link-Preview-Cards
+- **Threads & Kommentare:** Jeder Upload ist ein Thread mit Kommentarfunktion, Discord-Style-Reactions (Toggle, Zähler, Tooltips) und Live-Updates per WebSocket
+- **Auth & Rollen:** Session-Cookie-Login (30 Tage), der erste registrierte Nutzer wird automatisch Admin; Admin-Panel mit Rollenverwaltung und **pro Rolle konfigurierbaren Berechtigungen** (`admin.access`, `roles.manage`, `users.manage`, `comment.delete`, `upload.delete`) — die `admin`-Rolle darf immer alles
+- **Favoriten & Notifications:** Uploads favorisieren, Benachrichtigungs-Glocke mit Live-Events
+- **Themes:** 15+ Themes (Standard, Discord, Cyberpunk, Spring, Terminal, Infoseer, Homebrew, Florense, Kawi Green, Clo.nz, Clawmorphism, Realmorphism, Amber, Neo, Neo Pink, Neo Mint), umgeschaltet über `data-theme` auf `<html>`, persistiert per Cookie
+- **Layouts:** Umschaltbares Bento-/Uniform-Grid für die Upload-Übersicht
+
+## Tech-Stack
+
+| Bereich | Technologie |
+|---|---|
+| Framework | Nuxt 4 / Nitro, Vue 3 (`<script setup>` + TS) |
+| UI | shadcn-vue (`shadcn-nuxt`), Reka UI, Tailwind CSS v4, Lucide-Icons, vue-sonner |
+| Datenbank | MariaDB 11 + Drizzle ORM |
+| Realtime | Nitro WebSocket (`crossws`) |
+| Medien | `@nuxt/image`, Plyr |
+| State | Nuxt `useState`-Composables, VueUse |
+
+## Projektstruktur
+
+```
+app/
+  assets/css/tailwind.css   # Tailwind v4 Entry + alle Theme-Token ([data-theme="…"])
+  components/               # App-Komponenten (Header, Dropzone, Tiles, Comments, …)
+    ui/                     # shadcn-vue Basis-Komponenten
+  composables/              # useAuth, useTheme, useLiveComments, useCommentReactions, …
+  layouts/ middleware/ plugins/ pages/
+    index.vue               # Upload-Grid / Startseite
+    thread/[id].vue         # Thread-Detailseite mit Kommentaren
+    admin.vue user/[id].vue settings.vue login.vue register.vue
+server/
+  api/                      # Nitro-Endpoints (auth, uploads, comments, notifications, admin, …)
+  db/schema.ts              # Drizzle-Schema (users, sessions, uploads, comments,
+                            #   comment_reactions, favorites, link_previews,
+                            #   notifications, roles, user_roles)
+  db/migrations/            # Generierte SQL-Migrationen
+  plugins/migrate.ts        # Führt Migrationen beim Server-Start aus (Dev)
+  routes/_ws.ts             # WebSocket-Route für Live-Events
+  utils/                    # auth, db, roles, uploads, notifications, linkPreview
+scripts/migrate.ts          # Manueller Migrations-Runner (npm run db:migrate)
+shared/utils/               # Gemeinsame Utilities (Client & Server)
+public/uploads/             # Upload-Ziel (gitignored)
+docker-compose.yml          # MariaDB-Container
+```
+
+## Setup
+
+**Voraussetzungen:** Node.js ≥ 20, Docker (für die mitgelieferte MariaDB) oder eine eigene MySQL/MariaDB-Instanz.
+
+```bash
+# 1. Datenbank starten
+docker compose up -d
+
+# 2. Umgebung konfigurieren
+cp .env.example .env   # enthält DATABASE_URL, passt zum Docker-Setup
+
+# 3. Abhängigkeiten installieren
+npm install
+
+# 4. ffmpeg-Binary nachinstallieren (wird für Sprachnachrichten → MP3 gebraucht;
+#    der Download läuft über das postinstall-Skript von ffmpeg-static, das je
+#    nach npm-Konfiguration ggf. geblockt ist)
+node node_modules/ffmpeg-static/install.js
+
+# 5. Dev-Server starten (Migrationen laufen automatisch)
+npm run dev
+```
+
+Die App läuft auf <http://localhost:3000>. Der **erste registrierte Account erhält automatisch die Admin-Rolle** und kann danach im Admin-Panel weitere Rollen (`moderator`, …) anlegen und vergeben.
+
+### Ohne Docker
+
+Eigene MariaDB/MySQL-Instanz bereitstellen und `DATABASE_URL` in `.env` anpassen:
+
+```
+DATABASE_URL=mysql://user:pass@host:3306/datenbank
+```
+
+## NPM-Scripts
+
+| Befehl | Zweck |
+|---|---|
+| `npm run dev` | Dev-Server mit HMR, Auto-Migrationen |
+| `npm run build` | Production-Build |
+| `npm run preview` | Build lokal ausführen |
+| `npm run db:generate` | Neue Drizzle-Migration aus Schema-Änderung erzeugen |
+| `npm run db:migrate` | Migrationen manuell anwenden |
+| `npm run db:studio` | Drizzle Studio (DB-GUI) |
+
+## Entwicklung
+
+- **Schema ändern:** `server/db/schema.ts` anpassen → `npm run db:generate` → Migration committen. Im Dev-Betrieb wendet `server/plugins/migrate.ts` sie beim Start automatisch an.
+- **Neues Theme hinzufügen:** `[data-theme="…"]`-Block mit den CSS-Variablen in `app/assets/css/tailwind.css` anlegen, den Namen in der `ThemeName`-Union in `app/composables/useTheme.ts` ergänzen und einen Eintrag in `app/components/ThemeSelector.vue` hinzufügen. Themes können auch die `shadow-*`-Tokens überschreiben (Glow-, Offset- oder Flach-Schatten) sowie `font-sans`/`font-heading`/`font-mono`; `--font-logo` bleibt bewusst theme-unabhängig.
+- **Konventionen:** Semantische Tokens statt hartcodierter Farben (`primary`, `accent`, `muted` …), `rounded-md`/`rounded-sm` skalieren über `--radius` mit dem Theme. Details stehen in `AGENTS.md`.
+- **Health-Check:** `GET /api/health` meldet den DB-Verbindungsstatus.