# 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.