Compare commits
15
Commits
v0.1.0
..
dd0956ec71
@@ -0,0 +1,40 @@
|
|||||||
|
# ─────────────────────────────────────────────────────────────
|
||||||
|
# Nebula – Beispielkonfiguration
|
||||||
|
# Kopieren nach ".env" und Werte anpassen.
|
||||||
|
# (Die .env wird sowohl von Next.js als auch von docker compose gelesen.)
|
||||||
|
# ─────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
# ── Datenbank ────────────────────────────────────────────────
|
||||||
|
# Standalone-Betrieb: App laeuft lokal, Postgres via "docker compose up -d db"
|
||||||
|
# oder als nativ installierter Dienst.
|
||||||
|
DATABASE_URL="postgresql://nebula:nebula@localhost:5432/nebula?schema=public"
|
||||||
|
|
||||||
|
# Im Docker-Vollbetrieb (--profile full) setzt compose DATABASE_URL selbst
|
||||||
|
# auf den Service-Hostnamen "db" – der Wert oben wird dann nicht verwendet.
|
||||||
|
|
||||||
|
# Zugangsdaten des Postgres-Containers aus docker-compose.yml
|
||||||
|
POSTGRES_USER="nebula"
|
||||||
|
POSTGRES_PASSWORD="nebula"
|
||||||
|
POSTGRES_DB="nebula"
|
||||||
|
# Host-Port, unter dem die Datenbank erreichbar ist
|
||||||
|
POSTGRES_PORT="5432"
|
||||||
|
|
||||||
|
# ── Sicherheit ───────────────────────────────────────────────
|
||||||
|
# Schluessel zur Verschluesselung der Git-Access-Tokens (AES-256-GCM).
|
||||||
|
# Erzeugen mit: openssl rand -base64 32
|
||||||
|
# oder: node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"
|
||||||
|
# oder: npm run setup (legt die .env inkl. Schluessel an)
|
||||||
|
# WICHTIG: Wird der Wert nachtraeglich geaendert, sind gespeicherte Tokens
|
||||||
|
# nicht mehr entschluesselbar und muessen neu hinterlegt werden.
|
||||||
|
APP_SECRET="bitte-aendern-mindestens-32-zeichen-langer-zufallswert"
|
||||||
|
|
||||||
|
# ── App ──────────────────────────────────────────────────────
|
||||||
|
# Port innerhalb des Containers bzw. im Standalone-Betrieb
|
||||||
|
PORT="3000"
|
||||||
|
# Host-Port-Mapping fuer den App-Container (--profile full)
|
||||||
|
APP_PORT="3000"
|
||||||
|
# Host-Port fuer Adminer (--profile tools)
|
||||||
|
ADMINER_PORT="8080"
|
||||||
|
|
||||||
|
# Timeout fuer Git-API-Aufrufe in Millisekunden
|
||||||
|
GIT_API_TIMEOUT_MS="15000"
|
||||||
+72
@@ -0,0 +1,72 @@
|
|||||||
|
# syntax=docker/dockerfile:1
|
||||||
|
|
||||||
|
# ─────────────────────────────────────────────────────────────
|
||||||
|
# Nebula – Produktions-Image (Next.js standalone + Prisma)
|
||||||
|
# Build: docker compose --profile full build
|
||||||
|
# Start: docker compose --profile full up -d
|
||||||
|
# ─────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
FROM node:22-alpine AS base
|
||||||
|
# openssl wird von den Prisma-Engines benoetigt, libc6-compat von Next.js.
|
||||||
|
RUN apk add --no-cache libc6-compat openssl
|
||||||
|
WORKDIR /app
|
||||||
|
ENV NEXT_TELEMETRY_DISABLED=1
|
||||||
|
|
||||||
|
|
||||||
|
# ── Abhaengigkeiten ──────────────────────────────────────────
|
||||||
|
FROM base AS deps
|
||||||
|
COPY package.json package-lock.json* ./
|
||||||
|
# prisma/ wird schon hier gebraucht, weil "postinstall" prisma generate ausfuehrt.
|
||||||
|
COPY prisma ./prisma
|
||||||
|
RUN if [ -f package-lock.json ]; then npm ci; else npm install; fi
|
||||||
|
|
||||||
|
|
||||||
|
# ── Build ────────────────────────────────────────────────────
|
||||||
|
FROM base AS builder
|
||||||
|
COPY --from=deps /app/node_modules ./node_modules
|
||||||
|
COPY . .
|
||||||
|
# Zur Build-Zeit wird keine echte Datenbank kontaktiert (alle Seiten sind
|
||||||
|
# dynamisch), Prisma verlangt die Variable aber beim Generieren.
|
||||||
|
ENV DATABASE_URL="postgresql://build:build@127.0.0.1:5432/build?schema=public"
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
|
||||||
|
# ── Laufzeit ─────────────────────────────────────────────────
|
||||||
|
FROM base AS runner
|
||||||
|
ENV NODE_ENV=production
|
||||||
|
ENV PORT=3000
|
||||||
|
ENV HOSTNAME=0.0.0.0
|
||||||
|
|
||||||
|
RUN addgroup -g 1001 -S nodejs && adduser -S nextjs -u 1001
|
||||||
|
|
||||||
|
# Prisma-CLI fuer "migrate deploy" beim Containerstart. Sie bekommt eine
|
||||||
|
# eigene, minimale Installation unter /opt: aus dem Builder laesst sie sich
|
||||||
|
# nicht herausloesen, weil @prisma/config einen ganzen Abhaengigkeitsbaum
|
||||||
|
# nachzieht (effect, c12, …). Die Version wird aus dem Builder uebernommen,
|
||||||
|
# damit CLI und generierter Client nicht auseinanderlaufen.
|
||||||
|
COPY --from=builder /app/node_modules/prisma/package.json /tmp/prisma-cli.json
|
||||||
|
RUN npm install --prefix /opt/prisma-cli --no-save --no-audit --no-fund \
|
||||||
|
"prisma@$(node -p "require('/tmp/prisma-cli.json').version")" \
|
||||||
|
&& rm -f /tmp/prisma-cli.json \
|
||||||
|
&& npm cache clean --force
|
||||||
|
|
||||||
|
COPY --from=builder /app/public ./public
|
||||||
|
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||||
|
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||||
|
|
||||||
|
# Query-Engine und Schema fuer die Laufzeit bzw. die Migration.
|
||||||
|
COPY --from=builder --chown=nextjs:nodejs /app/node_modules/@prisma ./node_modules/@prisma
|
||||||
|
COPY --from=builder --chown=nextjs:nodejs /app/node_modules/.prisma ./node_modules/.prisma
|
||||||
|
COPY --from=builder --chown=nextjs:nodejs /app/prisma ./prisma
|
||||||
|
|
||||||
|
COPY docker/entrypoint.sh /usr/local/bin/entrypoint.sh
|
||||||
|
RUN chmod +x /usr/local/bin/entrypoint.sh
|
||||||
|
|
||||||
|
USER nextjs
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
|
HEALTHCHECK --interval=30s --timeout=5s --start-period=40s --retries=3 \
|
||||||
|
CMD wget -q --spider http://127.0.0.1:3000/api/health || exit 1
|
||||||
|
|
||||||
|
ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]
|
||||||
|
CMD ["node", "server.js"]
|
||||||
+207
@@ -0,0 +1,207 @@
|
|||||||
|
# Funktionsübersicht
|
||||||
|
|
||||||
|
Vollständige Auflistung dessen, was Nebula kann — gegliedert nach Bereichen.
|
||||||
|
Für Installation und Betrieb siehe [README.md](README.md).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Projekte
|
||||||
|
|
||||||
|
### 1.1 Anlegen und Verwalten
|
||||||
|
|
||||||
|
- **Idee genügt.** Ein Projekt braucht nur einen Namen. Alles Weitere — Beschreibung,
|
||||||
|
Repository, Tags — lässt sich jederzeit nachtragen. Neue Projekte starten deshalb
|
||||||
|
standardmäßig im Status *Idee*.
|
||||||
|
- **Bearbeiten** über einen Dialog, der auf dem Dashboard und der Projektseite
|
||||||
|
identisch funktioniert.
|
||||||
|
- **Löschen** mit Rückfrage; zugehörige Notizen und der Repo-Snapshot verschwinden mit
|
||||||
|
(Fremdschlüssel mit `ON DELETE CASCADE`).
|
||||||
|
- **Slug** wird automatisch aus dem Namen erzeugt (umlautfest) und bei Namenskollision
|
||||||
|
durchnummeriert.
|
||||||
|
|
||||||
|
### 1.2 Felder
|
||||||
|
|
||||||
|
| Feld | Beschreibung |
|
||||||
|
| --- | --- |
|
||||||
|
| Name | Pflichtfeld |
|
||||||
|
| Kurzbeschreibung | Ein Satz für die Karte im Board |
|
||||||
|
| Beschreibung | Ausführliche Ideenskizze, Zeilenumbrüche bleiben erhalten |
|
||||||
|
| Status | Idee · In Planung · Offen · In Entwicklung · Fertig · Archiviert |
|
||||||
|
| Priorität | Niedrig · Normal · Hoch · Kritisch |
|
||||||
|
| Fortschritt | 0–100 %, per Regler |
|
||||||
|
| Akzentfarbe | Sechs Farbverläufe, prägen Karte und Detailseite |
|
||||||
|
| Tags | Kommagetrennt, bis zu 12 Stück, kleingeschrieben und dedupliziert |
|
||||||
|
| Favorit | Anpinnen — Favoriten stehen im Board immer oben |
|
||||||
|
| Git-Verbindung | Optionale Zuordnung zu einem Git-System |
|
||||||
|
| Repository | URL sowie Owner/Name (werden aus der URL abgeleitet) |
|
||||||
|
|
||||||
|
### 1.3 Status
|
||||||
|
|
||||||
|
Sechs Zustände, jeder mit eigener Farbe und Erklärung im Auswahlmenü:
|
||||||
|
|
||||||
|
| Status | Bedeutung |
|
||||||
|
| --- | --- |
|
||||||
|
| **Idee** | Noch ein Gedanke — nichts gebaut, nichts entschieden |
|
||||||
|
| **In Planung** | Scope, Stack und Schnitt werden festgelegt |
|
||||||
|
| **Offen** | Startklar, liegt aber gerade still |
|
||||||
|
| **In Entwicklung** | Wird aktiv gebaut |
|
||||||
|
| **Fertig** | Ausgeliefert und abgeschlossen |
|
||||||
|
| **Archiviert** | Ruht — bleibt erhalten, ist im Board aber ausgeblendet |
|
||||||
|
|
||||||
|
Der Status ist **direkt auf der Projektkarte** umschaltbar, ohne den Detailbereich zu
|
||||||
|
öffnen. Die Änderung wird optimistisch angezeigt und bei einem Fehler zurückgerollt.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Dashboard
|
||||||
|
|
||||||
|
- **Kennzahlen** oben: Anzahl Projekte mit Ø-Fortschritt, offene Ideen, aktive
|
||||||
|
Entwicklungen, fertige Projekte, verknüpfte Repositories.
|
||||||
|
- **Volltextsuche** über Name, Kurzbeschreibung, Beschreibung, Tags und Repo-Pfad.
|
||||||
|
- **Statusfilter** als Chips mit Trefferzähler, mehrere gleichzeitig kombinierbar.
|
||||||
|
- **Sortierung** nach zuletzt geändert, Anlagedatum, Name, Fortschritt oder Priorität —
|
||||||
|
Favoriten bleiben stets oben.
|
||||||
|
- **Zwei Ansichten**: freies Raster oder nach Status gruppierte Abschnitte.
|
||||||
|
- **Archiv** ist standardmäßig ausgeblendet und per Schalter einblendbar.
|
||||||
|
- **Leerzustände** mit direktem Einstieg statt einer leeren Fläche.
|
||||||
|
|
||||||
|
### Projektkarte auf einen Blick
|
||||||
|
|
||||||
|
Name und Favoritenstern · Kurzbeschreibung · Fortschrittsbalken · Provider-Badge ·
|
||||||
|
Default-Branch samt Anzahl weiterer Branches · letzter Tag · Alter des letzten Commits ·
|
||||||
|
Anzahl Notizen · Warnung bei Sync-Fehler · Tags · Statusauswahl · Priorität.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Notizen
|
||||||
|
|
||||||
|
- **Beliebig viele Notizen pro Projekt**, mit optionalem Titel und mehrzeiligem Text.
|
||||||
|
- **Anpinnen** — angepinnte Notizen stehen oben und sind farblich hervorgehoben.
|
||||||
|
- **Bearbeiten und Löschen** direkt in der Liste; Löschen fragt nach.
|
||||||
|
- **Zeitstempel**: Anlagedatum immer, „bearbeitet vor …" nur bei echter Änderung.
|
||||||
|
- Zeilenumbrüche und Einrückungen bleiben erhalten — Checklisten und Code-Schnipsel
|
||||||
|
überleben das Speichern.
|
||||||
|
- Eine neue Notiz aktualisiert die Änderungszeit des Projekts, damit die Sortierung
|
||||||
|
„zuletzt geändert" die tatsächliche Aktivität abbildet.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Git-Anbindung
|
||||||
|
|
||||||
|
### 4.1 Unterstützte Systeme
|
||||||
|
|
||||||
|
| System | API | Authentifizierung | Besonderheit |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| **GitHub** | REST v3 | `Authorization: Bearer` | github.com und GitHub Enterprise (`/api/v3`) |
|
||||||
|
| **GitLab** | API v4 | `PRIVATE-TOKEN` | gitlab.com und Self-Hosted, verschachtelte Gruppen |
|
||||||
|
| **Gitea / Forgejo** | API v1 | `Authorization: token` | beliebige eigene Instanz |
|
||||||
|
|
||||||
|
Mehrere Verbindungen desselben Typs sind möglich — etwa privates GitHub und
|
||||||
|
Firmen-Gitea nebeneinander.
|
||||||
|
|
||||||
|
### 4.2 Verbindungen verwalten
|
||||||
|
|
||||||
|
- Anlegen mit Anzeigename, System, Basis-URL und Access Token.
|
||||||
|
- **Verbindungstest** auf Knopfdruck: prüft Erreichbarkeit und Token, zeigt den erkannten
|
||||||
|
Benutzer und bei Gitea zusätzlich die Serverversion. Ergebnis und Zeitpunkt werden
|
||||||
|
gespeichert und in der Karte angezeigt.
|
||||||
|
- **Token-Verwaltung**: verschlüsselt gespeichert, in der UI nur als Hinweis (`ghp_…9f3a`)
|
||||||
|
sichtbar. Beim Bearbeiten bedeutet ein leeres Feld „unverändert lassen".
|
||||||
|
- **Repository-Auswahl**: Nebula listet alle Repos, auf die der Token Zugriff hat, mit
|
||||||
|
Suchfeld. Ein Klick übernimmt URL, Owner, Name und — falls noch leer — Projektname und
|
||||||
|
Kurzbeschreibung.
|
||||||
|
- **Löschen** trennt nur die Verknüpfung; die Projekte selbst bleiben erhalten.
|
||||||
|
|
||||||
|
### 4.3 Was beim Sync geholt wird
|
||||||
|
|
||||||
|
| Bereich | Details |
|
||||||
|
| --- | --- |
|
||||||
|
| Repository | Voller Pfad, Beschreibung, Default-Branch, Sichtbarkeit, Größe, letzte Aktivität |
|
||||||
|
| Kennzahlen | Stars, Forks, offene Issues, offene Pull-/Merge-Requests |
|
||||||
|
| Branches | bis zu 50, mit SHA, Default-Markierung, Schutzstatus und (wo die API es liefert) letztem Commit |
|
||||||
|
| Tags | bis zu 25, mit SHA, Nachricht und Datum |
|
||||||
|
| Commits | die letzten 15, mit Kurz-SHA, Nachricht, Autor, Datum und Link |
|
||||||
|
| Releases | bis zu 10, inklusive Pre-Release- und Draft-Kennzeichnung |
|
||||||
|
| Sprachen | Verteilung als Balken mit Prozentwerten |
|
||||||
|
|
||||||
|
- **Snapshot-Prinzip**: Alle Daten werden in der Datenbank abgelegt. Das Dashboard bleibt
|
||||||
|
ohne Netzverbindung oder bei erreichtem Rate-Limit vollständig nutzbar.
|
||||||
|
- **URL-Erkennung** für `https://…`, `git@host:owner/repo.git` und GitLab-Weboberflächen-URLs
|
||||||
|
mit `/-/tree/…`; verschachtelte Gruppenpfade bleiben erhalten.
|
||||||
|
- **Ohne Token** funktionieren öffentliche Repositories, mit deutlich strengerem Rate-Limit.
|
||||||
|
- **Fehler landen am Projekt** statt in einer Fehlerseite: die Karte zeigt „Sync-Fehler",
|
||||||
|
die Projektseite die genaue Meldung. Typische HTTP-Codes werden in Klartext übersetzt
|
||||||
|
(401 Token, 403 Scopes/Rate-Limit, 404 Pfad, 408 Timeout).
|
||||||
|
- **Zeitlimit** pro Aufruf über `GIT_API_TIMEOUT_MS` einstellbar; die Teilabfragen laufen
|
||||||
|
parallel, eine fehlschlagende Liste bricht den restlichen Sync nicht ab.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Oberfläche
|
||||||
|
|
||||||
|
- **Dark Glassmorphism**: milchige Glasflächen, driftende Nebel im Hintergrund, feines
|
||||||
|
Raster, Neon-Akzente pro Projektfarbe.
|
||||||
|
- **Animationen**: gestaffelt einblendende Karten, Hover-Lift mit Farbverlaufsrand,
|
||||||
|
animierte Fortschrittsbalken.
|
||||||
|
- **Responsiv** von Handy bis Ultrawide (bis zu vier Kartenspalten).
|
||||||
|
- **Barrierearm**: durchgehende ARIA-Labels, Escape schließt Dialoge, sichtbarer
|
||||||
|
Fokusring, `prefers-reduced-motion` schaltet Animationen ab.
|
||||||
|
- **Deutschsprachig**, Datums- und Zahlenformate in `de-DE` mit fester Zeitzone
|
||||||
|
Europe/Berlin, damit Server- und Browser-Darstellung übereinstimmen.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. Daten und Technik
|
||||||
|
|
||||||
|
### 6.1 Datenmodell
|
||||||
|
|
||||||
|
| Tabelle | Inhalt |
|
||||||
|
| --- | --- |
|
||||||
|
| `Project` | Projektstammdaten, Status, Fortschritt, Repo-Verknüpfung |
|
||||||
|
| `Note` | Notizen (n:1 zu Projekt, Cascade-Delete) |
|
||||||
|
| `GitConnection` | Git-Systeme inkl. verschlüsseltem Token |
|
||||||
|
| `RepoSnapshot` | Zwischengespeicherter Repo-Stand (1:1 zu Projekt) |
|
||||||
|
|
||||||
|
Listen wie Branches oder Commits liegen als `JSONB`, damit providerspezifische Felder
|
||||||
|
nicht verloren gehen. Indizes auf Status, Verbindung und Änderungsdatum.
|
||||||
|
|
||||||
|
### 6.2 Sicherheit
|
||||||
|
|
||||||
|
- Access Tokens verschlüsselt mit **AES-256-GCM**, Schlüssel per **scrypt** aus
|
||||||
|
`APP_SECRET` abgeleitet, Chiffrat versioniert (`v1.<iv>.<tag>.<data>`).
|
||||||
|
- Tokens werden nie an den Browser gesendet — alle API-Antworten nutzen eine Feldauswahl
|
||||||
|
ohne `tokenCipher`.
|
||||||
|
- **Zod-Validierung** jeder Eingabe an der API-Grenze mit Feldfehlern für die UI.
|
||||||
|
- Prisma arbeitet ausschließlich mit parametrisierten Abfragen.
|
||||||
|
|
||||||
|
### 6.3 Betrieb
|
||||||
|
|
||||||
|
- **Zwei gleichwertige Betriebsarten**: Standalone (Node-Prozess, beliebige PostgreSQL)
|
||||||
|
oder komplett in Docker — dieselbe Codebasis, dieselbe `.env`.
|
||||||
|
- **Docker-Compose-Profile**: `db` läuft immer, `--profile full` startet zusätzlich die
|
||||||
|
App, `--profile tools` bringt Adminer als DB-Oberfläche mit.
|
||||||
|
- **Automatische Migration** beim Containerstart, inklusive Warteschleife auf die
|
||||||
|
Datenbank.
|
||||||
|
- **Healthchecks**: `pg_isready` für Postgres, `/api/health` für die App.
|
||||||
|
- **Setup-Skript** erzeugt die `.env` samt zufälligem `APP_SECRET`.
|
||||||
|
- **Seed-Daten** auf Wunsch, idempotent — mehrfaches Ausführen legt nichts doppelt an.
|
||||||
|
|
||||||
|
### 6.4 API
|
||||||
|
|
||||||
|
Zehn REST-Endpunkte für Projekte, Notizen, Verbindungen, Sync, Repo-Listen und Health.
|
||||||
|
Alles, was die Oberfläche kann, ist damit auch scriptbar. Übersicht in der
|
||||||
|
[README](README.md#api).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. Ideen für später
|
||||||
|
|
||||||
|
Bewusst nicht umgesetzt, aber vorgemerkt:
|
||||||
|
|
||||||
|
- Kanban-Board mit Drag & Drop zwischen den Statusspalten
|
||||||
|
- Webhooks, damit Pushes den Snapshot ohne Knopfdruck aktualisieren
|
||||||
|
- Markdown-Rendering in Beschreibung und Notizen
|
||||||
|
- Volltextsuche über Notizen hinweg
|
||||||
|
- Export eines Projekts als Markdown
|
||||||
|
- Automatischer Sync im Hintergrund (Intervall pro Verbindung)
|
||||||
|
- Mehrbenutzerbetrieb mit Login
|
||||||
@@ -0,0 +1,252 @@
|
|||||||
|
<div align="center">
|
||||||
|
|
||||||
|
# ✦ Nebula
|
||||||
|
|
||||||
|
**Das Kontrollzentrum für deine Vibe-Coding Projekte.**
|
||||||
|
|
||||||
|
Ideen festhalten · Status pflegen · Notizen sammeln · Git-Repos live im Blick
|
||||||
|
|
||||||
|
<sub>Next.js 15 · TypeScript · Tailwind CSS 4 · Prisma · PostgreSQL · Docker</sub>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Was ist Nebula?
|
||||||
|
|
||||||
|
Vibe Coding produziert schnell viele halbfertige Projekte: ein Repo hier, eine Idee dort,
|
||||||
|
irgendwo eine Notiz in einer Textdatei. Nebula bündelt das an einem Ort.
|
||||||
|
|
||||||
|
Jedes Projekt bekommt einen **Status** (von der rohen Idee bis „Fertig"), beliebig viele
|
||||||
|
**Notizen** und optional ein **verknüpftes Repository**. Nebula holt sich von dort per API
|
||||||
|
Branches, Tags, Commits, Releases und offene Issues/PRs — egal ob **GitHub**, **GitLab**
|
||||||
|
oder eine selbst gehostete **Gitea**-Instanz.
|
||||||
|
|
||||||
|
Alle Daten liegen in **deiner lokalen PostgreSQL**. Es gibt keinen Cloud-Dienst dahinter,
|
||||||
|
Access Tokens werden verschlüsselt abgelegt.
|
||||||
|
|
||||||
|
Eine vollständige Auflistung aller Funktionen steht in **[FEATURES.md](FEATURES.md)**.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Schnellstart
|
||||||
|
|
||||||
|
Zwei Betriebsarten, dieselbe Codebasis. Beide brauchen zuerst eine `.env`:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
node scripts/setup.mjs # legt .env an und erzeugt ein zufälliges APP_SECRET
|
||||||
|
```
|
||||||
|
|
||||||
|
> Ohne Node zur Hand? Einfach `.env.example` nach `.env` kopieren und `APP_SECRET` von Hand
|
||||||
|
> auf einen langen Zufallswert setzen.
|
||||||
|
|
||||||
|
### Variante A — Standalone (empfohlen zum Entwickeln)
|
||||||
|
|
||||||
|
Die App läuft nativ auf dem Rechner, nur PostgreSQL kommt aus dem Container:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker compose up -d db # Postgres 17 auf localhost:5432
|
||||||
|
npm install
|
||||||
|
npm run db:migrate # Schema anlegen
|
||||||
|
npm run db:seed # optional: drei Beispielprojekte
|
||||||
|
npm run dev # → http://localhost:3000
|
||||||
|
```
|
||||||
|
|
||||||
|
Für den Produktivbetrieb ohne Docker:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
npm start # → http://localhost:3000
|
||||||
|
```
|
||||||
|
|
||||||
|
### Variante B — Alles in Docker
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker compose --profile full up -d --build # → http://localhost:3000
|
||||||
|
```
|
||||||
|
|
||||||
|
Der App-Container spielt beim Start automatisch die Migrationen ein und wartet dabei auf
|
||||||
|
die Datenbank. Logs mitlesen:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker compose --profile full logs -f app
|
||||||
|
```
|
||||||
|
|
||||||
|
Stoppen:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker compose --profile full down # Container weg, Daten bleiben
|
||||||
|
docker compose --profile full down -v # inkl. Datenbank-Volume
|
||||||
|
```
|
||||||
|
|
||||||
|
### Variante C — Eigene, bereits laufende PostgreSQL
|
||||||
|
|
||||||
|
Docker wird gar nicht gebraucht. In der `.env` nur den Connection-String setzen:
|
||||||
|
|
||||||
|
```env
|
||||||
|
DATABASE_URL="postgresql://benutzer:passwort@dbhost:5432/nebula?schema=public"
|
||||||
|
```
|
||||||
|
|
||||||
|
Dann `npm install && npm run db:migrate && npm run dev`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Voraussetzungen
|
||||||
|
|
||||||
|
| Variante | Benötigt |
|
||||||
|
| --- | --- |
|
||||||
|
| Standalone | Node.js ≥ 20.11, npm, PostgreSQL ≥ 14 (lokal oder via Docker) |
|
||||||
|
| Docker | Docker Engine ≥ 24 mit Compose v2 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Konfiguration
|
||||||
|
|
||||||
|
Alle Variablen sind in [`.env.example`](.env.example) dokumentiert.
|
||||||
|
|
||||||
|
| Variable | Bedeutung | Default |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `DATABASE_URL` | PostgreSQL-Verbindung (Prisma) | `postgresql://nebula:nebula@localhost:5432/nebula` |
|
||||||
|
| `APP_SECRET` | Schlüssel für die Token-Verschlüsselung (AES-256-GCM) | — **unbedingt setzen** |
|
||||||
|
| `PORT` | Port der Anwendung | `3000` |
|
||||||
|
| `APP_PORT` | Host-Port-Mapping des App-Containers | `3000` |
|
||||||
|
| `POSTGRES_USER` / `POSTGRES_PASSWORD` / `POSTGRES_DB` | Zugangsdaten des DB-Containers | `nebula` |
|
||||||
|
| `POSTGRES_PORT` | Host-Port der Datenbank | `5432` |
|
||||||
|
| `ADMINER_PORT` | Host-Port von Adminer (`--profile tools`) | `8080` |
|
||||||
|
| `GIT_API_TIMEOUT_MS` | Timeout für Git-API-Aufrufe | `15000` |
|
||||||
|
|
||||||
|
> **`APP_SECRET` nachträglich ändern** macht bereits gespeicherte Git-Tokens unlesbar.
|
||||||
|
> Sie müssen dann in den Verbindungen neu hinterlegt werden — die restlichen Daten bleiben
|
||||||
|
> unberührt.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Git-Verbindung einrichten
|
||||||
|
|
||||||
|
1. Im Git-System einen **Personal Access Token** mit Leserechten erzeugen:
|
||||||
|
|
||||||
|
| System | Scopes |
|
||||||
|
| --- | --- |
|
||||||
|
| GitHub | Fine-grained Token: *Contents: Read*, *Metadata: Read*, *Issues: Read*, *Pull requests: Read* |
|
||||||
|
| GitLab | `read_api` (alternativ `read_repository`) |
|
||||||
|
| Gitea / Forgejo | `repository:read`, `issue:read`, `user:read` |
|
||||||
|
|
||||||
|
2. In Nebula unter **Git-Verbindungen → Verbindung hinzufügen** eintragen:
|
||||||
|
System wählen, Basis-URL (z. B. `https://git.meine-firma.de`, ohne `/api`) und Token.
|
||||||
|
3. Mit **Testen** prüfen — Nebula meldet den erkannten Benutzer zurück.
|
||||||
|
4. Beim Anlegen oder Bearbeiten eines Projekts die Verbindung auswählen und über
|
||||||
|
**Repos laden** das Repository aussuchen (oder die URL direkt eintippen).
|
||||||
|
5. Auf der Projektseite **Jetzt synchronisieren** — Branches, Tags, Commits und Releases
|
||||||
|
werden geholt und als Snapshot gespeichert.
|
||||||
|
|
||||||
|
Der Snapshot bleibt in der Datenbank, das Dashboard funktioniert also auch offline.
|
||||||
|
Ohne Token gehen nur öffentliche Repositories, mit strengem Rate-Limit.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Projektstruktur
|
||||||
|
|
||||||
|
```
|
||||||
|
nebula/
|
||||||
|
├── docker/entrypoint.sh Migrationen + Serverstart im Container
|
||||||
|
├── docker-compose.yml db (immer) · app (--profile full) · adminer (--profile tools)
|
||||||
|
├── Dockerfile Multi-Stage-Build auf Basis des Next-Standalone-Outputs
|
||||||
|
├── prisma/
|
||||||
|
│ ├── schema.prisma Datenmodell
|
||||||
|
│ ├── migrations/ versionierte SQL-Migrationen
|
||||||
|
│ └── seed.ts Beispieldaten
|
||||||
|
├── scripts/setup.mjs .env erzeugen inkl. APP_SECRET
|
||||||
|
└── src/
|
||||||
|
├── app/
|
||||||
|
│ ├── page.tsx Dashboard (Board, Filter, Kennzahlen)
|
||||||
|
│ ├── projects/[id]/ Projektdetail: Beschreibung, Notizen, Git
|
||||||
|
│ ├── connections/ Verwaltung der Git-Verbindungen
|
||||||
|
│ └── api/ REST-Endpunkte (Projekte, Notizen, Verbindungen, Sync)
|
||||||
|
├── components/ UI-Komponenten (Board, Karten, Panels, Dialoge)
|
||||||
|
├── lib/
|
||||||
|
│ ├── crypto.ts AES-256-GCM für Access Tokens
|
||||||
|
│ ├── db.ts Prisma-Client
|
||||||
|
│ ├── git/ Provider-Adapter: github.ts · gitlab.ts · gitea.ts
|
||||||
|
│ ├── sync.ts Repo-Snapshot holen und speichern
|
||||||
|
│ └── validation.ts Zod-Schemas für alle Eingaben
|
||||||
|
└── types/ gemeinsame Typen für Server und Client
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## npm-Skripte
|
||||||
|
|
||||||
|
| Skript | Zweck |
|
||||||
|
| --- | --- |
|
||||||
|
| `npm run dev` | Entwicklungsserver mit Hot Reload |
|
||||||
|
| `npm run build` / `npm start` | Produktionsbuild und -start (ohne Docker) |
|
||||||
|
| `npm run setup` | `.env` anlegen inkl. generiertem `APP_SECRET` |
|
||||||
|
| `npm run db:migrate` | Migrationen einspielen (`prisma migrate deploy`) |
|
||||||
|
| `npm run db:migrate:dev` | Neue Migration aus Schemaänderungen erzeugen |
|
||||||
|
| `npm run db:seed` | Beispielprojekte anlegen |
|
||||||
|
| `npm run db:studio` | Prisma Studio öffnen |
|
||||||
|
| `npm run db:reset` | Datenbank zurücksetzen (**löscht alles**) |
|
||||||
|
| `npm run typecheck` | TypeScript prüfen |
|
||||||
|
| `npm run docker:db` | Nur die Datenbank starten |
|
||||||
|
| `npm run docker:up` / `docker:down` | Kompletten Stack starten / stoppen |
|
||||||
|
| `npm run docker:tools` | Adminer auf `http://localhost:8080` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
Alle Endpunkte liefern und erwarten JSON.
|
||||||
|
|
||||||
|
| Methode | Pfad | Zweck |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `GET` | `/api/health` | Status inkl. Datenbankverbindung (Docker-Healthcheck) |
|
||||||
|
| `GET` `POST` | `/api/projects` | Projekte auflisten / anlegen |
|
||||||
|
| `GET` `PATCH` `DELETE` | `/api/projects/:id` | Projekt lesen / ändern / löschen |
|
||||||
|
| `POST` | `/api/projects/:id/sync` | Repo-Daten vom Git-System holen |
|
||||||
|
| `GET` `POST` | `/api/projects/:id/notes` | Notizen des Projekts |
|
||||||
|
| `PATCH` `DELETE` | `/api/notes/:id` | Notiz ändern / löschen |
|
||||||
|
| `GET` `POST` | `/api/connections` | Git-Verbindungen |
|
||||||
|
| `PATCH` `DELETE` | `/api/connections/:id` | Verbindung ändern / löschen |
|
||||||
|
| `POST` | `/api/connections/:id/check` | Verbindung und Token testen |
|
||||||
|
| `GET` | `/api/connections/:id/repos` | Zugängliche Repositories auflisten |
|
||||||
|
|
||||||
|
Beispiel — Idee per Kommandozeile anlegen:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl -X POST http://localhost:3000/api/projects \
|
||||||
|
-H "Content-Type: application/json" \
|
||||||
|
-d '{"name":"Neue Idee","status":"IDEA","tags":["experiment"]}'
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Sicherheitshinweise
|
||||||
|
|
||||||
|
- Nebula hat **keine Benutzerverwaltung** und ist für den Betrieb im eigenen Netz gedacht.
|
||||||
|
Vor einer Veröffentlichung im Internet unbedingt einen Reverse Proxy mit Authentifizierung
|
||||||
|
davorschalten.
|
||||||
|
- Access Tokens werden mit **AES-256-GCM** verschlüsselt gespeichert, aus `APP_SECRET` per
|
||||||
|
scrypt abgeleitet. Sie werden ausschließlich serverseitig entschlüsselt und nie an den
|
||||||
|
Browser ausgeliefert — die API zeigt nur einen Hinweis wie `ghp_…9f3a`.
|
||||||
|
- Ist `APP_SECRET` nicht gesetzt, warnt die App beim Start und nutzt einen unsicheren
|
||||||
|
Entwicklungsschlüssel.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Fehlersuche
|
||||||
|
|
||||||
|
| Symptom | Ursache / Lösung |
|
||||||
|
| --- | --- |
|
||||||
|
| `Can't reach database server` | Läuft `docker compose up -d db`? Stimmt `DATABASE_URL`? |
|
||||||
|
| `The table ... does not exist` | Migrationen fehlen: `npm run db:migrate` |
|
||||||
|
| Sync meldet `401` | Token abgelaufen oder falsche Scopes — unter Git-Verbindungen neu setzen |
|
||||||
|
| Sync meldet `404` | Owner/Repo prüfen; bei GitLab gehört die volle Gruppenkette in „Owner" |
|
||||||
|
| Sync meldet `403 Rate-Limit` | Ohne Token ist das Limit sehr niedrig — Token hinterlegen |
|
||||||
|
| Tokens plötzlich ungültig | `APP_SECRET` wurde geändert — Tokens neu eintragen |
|
||||||
|
| Port 3000 belegt | `APP_PORT` in der `.env` ändern (Docker) bzw. `npm run dev -- -p 3001` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lizenz
|
||||||
|
|
||||||
|
MIT — siehe [LICENSE](LICENSE).
|
||||||
@@ -0,0 +1,78 @@
|
|||||||
|
name: nebula
|
||||||
|
|
||||||
|
# ─────────────────────────────────────────────────────────────
|
||||||
|
# Zwei Betriebsarten aus einer Datei:
|
||||||
|
#
|
||||||
|
# 1) Standalone-Entwicklung – nur die Datenbank im Container:
|
||||||
|
# docker compose up -d db
|
||||||
|
# npm run dev
|
||||||
|
#
|
||||||
|
# 2) Alles im Container:
|
||||||
|
# docker compose --profile full up -d --build
|
||||||
|
#
|
||||||
|
# Optionales DB-Webinterface:
|
||||||
|
# docker compose --profile tools up -d adminer → http://localhost:8080
|
||||||
|
# ─────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
services:
|
||||||
|
db:
|
||||||
|
image: postgres:17-alpine
|
||||||
|
container_name: nebula-db
|
||||||
|
restart: unless-stopped
|
||||||
|
environment:
|
||||||
|
POSTGRES_USER: ${POSTGRES_USER:-nebula}
|
||||||
|
POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-nebula}
|
||||||
|
POSTGRES_DB: ${POSTGRES_DB:-nebula}
|
||||||
|
# Deterministische Sortierung unabhaengig vom Host-Locale
|
||||||
|
POSTGRES_INITDB_ARGS: "--encoding=UTF8"
|
||||||
|
ports:
|
||||||
|
- "${POSTGRES_PORT:-5432}:5432"
|
||||||
|
volumes:
|
||||||
|
- nebula-db-data:/var/lib/postgresql/data
|
||||||
|
healthcheck:
|
||||||
|
test:
|
||||||
|
["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-nebula} -d ${POSTGRES_DB:-nebula}"]
|
||||||
|
interval: 5s
|
||||||
|
timeout: 5s
|
||||||
|
retries: 20
|
||||||
|
start_period: 10s
|
||||||
|
|
||||||
|
app:
|
||||||
|
profiles: ["full"]
|
||||||
|
build:
|
||||||
|
context: .
|
||||||
|
dockerfile: Dockerfile
|
||||||
|
image: nebula-app:latest
|
||||||
|
container_name: nebula-app
|
||||||
|
restart: unless-stopped
|
||||||
|
depends_on:
|
||||||
|
db:
|
||||||
|
condition: service_healthy
|
||||||
|
environment:
|
||||||
|
DATABASE_URL: postgresql://${POSTGRES_USER:-nebula}:${POSTGRES_PASSWORD:-nebula}@db:5432/${POSTGRES_DB:-nebula}?schema=public
|
||||||
|
# Unbedingt in der .env ueberschreiben – verschluesselt die Git-Tokens.
|
||||||
|
APP_SECRET: ${APP_SECRET:-nebula-dev-secret-bitte-in-der-env-aendern}
|
||||||
|
GIT_API_TIMEOUT_MS: ${GIT_API_TIMEOUT_MS:-15000}
|
||||||
|
NODE_ENV: production
|
||||||
|
PORT: 3000
|
||||||
|
HOSTNAME: 0.0.0.0
|
||||||
|
ports:
|
||||||
|
- "${APP_PORT:-3000}:3000"
|
||||||
|
|
||||||
|
adminer:
|
||||||
|
profiles: ["tools"]
|
||||||
|
image: adminer:latest
|
||||||
|
container_name: nebula-adminer
|
||||||
|
restart: unless-stopped
|
||||||
|
depends_on:
|
||||||
|
db:
|
||||||
|
condition: service_healthy
|
||||||
|
environment:
|
||||||
|
ADMINER_DEFAULT_SERVER: db
|
||||||
|
ADMINER_DESIGN: dracula
|
||||||
|
ports:
|
||||||
|
- "${ADMINER_PORT:-8080}:8080"
|
||||||
|
|
||||||
|
volumes:
|
||||||
|
nebula-db-data:
|
||||||
|
name: nebula-db-data
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
# ─────────────────────────────────────────────────────────────
|
||||||
|
# Startet Nebula im Container: erst Migrationen, dann der Server.
|
||||||
|
# ─────────────────────────────────────────────────────────────
|
||||||
|
set -e
|
||||||
|
|
||||||
|
PRISMA_CLI="/opt/prisma-cli/node_modules/prisma/build/index.js"
|
||||||
|
SCHEMA="/app/prisma/schema.prisma"
|
||||||
|
|
||||||
|
if [ -z "$DATABASE_URL" ]; then
|
||||||
|
echo "[nebula] FEHLER: DATABASE_URL ist nicht gesetzt." >&2
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
if [ ! -f "$PRISMA_CLI" ]; then
|
||||||
|
echo "[nebula] FEHLER: Prisma-CLI nicht unter $PRISMA_CLI gefunden." >&2
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo "[nebula] Migrationen werden eingespielt…"
|
||||||
|
|
||||||
|
attempt=0
|
||||||
|
max_attempts=15
|
||||||
|
until node "$PRISMA_CLI" migrate deploy --schema "$SCHEMA"; do
|
||||||
|
attempt=$((attempt + 1))
|
||||||
|
if [ "$attempt" -ge "$max_attempts" ]; then
|
||||||
|
echo "[nebula] FEHLER: Migration nach $max_attempts Versuchen fehlgeschlagen." >&2
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
echo "[nebula] Datenbank noch nicht bereit – neuer Versuch in 3s ($attempt/$max_attempts)"
|
||||||
|
sleep 3
|
||||||
|
done
|
||||||
|
|
||||||
|
echo "[nebula] Migrationen ok. Server startet auf Port ${PORT:-3000}."
|
||||||
|
exec "$@"
|
||||||
Vendored
+1
@@ -1,5 +1,6 @@
|
|||||||
/// <reference types="next" />
|
/// <reference types="next" />
|
||||||
/// <reference types="next/image-types/global" />
|
/// <reference types="next/image-types/global" />
|
||||||
|
/// <reference path="./.next/types/routes.d.ts" />
|
||||||
|
|
||||||
// NOTE: This file should not be edited
|
// NOTE: This file should not be edited
|
||||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||||
|
|||||||
@@ -7,12 +7,7 @@ const nextConfig: NextConfig = {
|
|||||||
output: "standalone",
|
output: "standalone",
|
||||||
reactStrictMode: true,
|
reactStrictMode: true,
|
||||||
poweredByHeader: false,
|
poweredByHeader: false,
|
||||||
experimental: {
|
|
||||||
// Prisma darf nicht gebundlet werden, sonst findet der Client seine Engine nicht.
|
// Prisma darf nicht gebundlet werden, sonst findet der Client seine Engine nicht.
|
||||||
serverActions: {
|
|
||||||
bodySizeLimit: "2mb",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
serverExternalPackages: ["@prisma/client", "prisma"],
|
serverExternalPackages: ["@prisma/client", "prisma"],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Generated
+2693
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,132 @@
|
|||||||
|
-- CreateEnum
|
||||||
|
CREATE TYPE "ProjectStatus" AS ENUM ('IDEA', 'OPEN', 'PLANNING', 'IN_DEVELOPMENT', 'DONE', 'ARCHIVED');
|
||||||
|
|
||||||
|
-- CreateEnum
|
||||||
|
CREATE TYPE "GitProvider" AS ENUM ('GITHUB', 'GITLAB', 'GITEA');
|
||||||
|
|
||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "GitConnection" (
|
||||||
|
"id" TEXT NOT NULL,
|
||||||
|
"name" TEXT NOT NULL,
|
||||||
|
"provider" "GitProvider" NOT NULL,
|
||||||
|
"baseUrl" TEXT NOT NULL,
|
||||||
|
"username" TEXT,
|
||||||
|
"tokenCipher" TEXT,
|
||||||
|
"tokenHint" TEXT,
|
||||||
|
"lastCheckedAt" TIMESTAMP(3),
|
||||||
|
"lastCheckOk" BOOLEAN,
|
||||||
|
"lastCheckMessage" TEXT,
|
||||||
|
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
"updatedAt" TIMESTAMP(3) NOT NULL,
|
||||||
|
|
||||||
|
CONSTRAINT "GitConnection_pkey" PRIMARY KEY ("id")
|
||||||
|
);
|
||||||
|
|
||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "Project" (
|
||||||
|
"id" TEXT NOT NULL,
|
||||||
|
"name" TEXT NOT NULL,
|
||||||
|
"slug" TEXT NOT NULL,
|
||||||
|
"summary" TEXT,
|
||||||
|
"description" TEXT,
|
||||||
|
"status" "ProjectStatus" NOT NULL DEFAULT 'IDEA',
|
||||||
|
"priority" INTEGER NOT NULL DEFAULT 2,
|
||||||
|
"progress" INTEGER NOT NULL DEFAULT 0,
|
||||||
|
"accent" TEXT NOT NULL DEFAULT 'violet',
|
||||||
|
"tags" TEXT[] DEFAULT ARRAY[]::TEXT[],
|
||||||
|
"favorite" BOOLEAN NOT NULL DEFAULT false,
|
||||||
|
"repoUrl" TEXT,
|
||||||
|
"repoOwner" TEXT,
|
||||||
|
"repoName" TEXT,
|
||||||
|
"defaultBranch" TEXT,
|
||||||
|
"connectionId" TEXT,
|
||||||
|
"lastSyncedAt" TIMESTAMP(3),
|
||||||
|
"syncError" TEXT,
|
||||||
|
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
"updatedAt" TIMESTAMP(3) NOT NULL,
|
||||||
|
|
||||||
|
CONSTRAINT "Project_pkey" PRIMARY KEY ("id")
|
||||||
|
);
|
||||||
|
|
||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "Note" (
|
||||||
|
"id" TEXT NOT NULL,
|
||||||
|
"projectId" TEXT NOT NULL,
|
||||||
|
"title" TEXT,
|
||||||
|
"content" TEXT NOT NULL,
|
||||||
|
"pinned" BOOLEAN NOT NULL DEFAULT false,
|
||||||
|
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
"updatedAt" TIMESTAMP(3) NOT NULL,
|
||||||
|
|
||||||
|
CONSTRAINT "Note_pkey" PRIMARY KEY ("id")
|
||||||
|
);
|
||||||
|
|
||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "RepoSnapshot" (
|
||||||
|
"id" TEXT NOT NULL,
|
||||||
|
"projectId" TEXT NOT NULL,
|
||||||
|
"fullName" TEXT,
|
||||||
|
"description" TEXT,
|
||||||
|
"defaultBranch" TEXT,
|
||||||
|
"htmlUrl" TEXT,
|
||||||
|
"visibility" TEXT,
|
||||||
|
"stars" INTEGER NOT NULL DEFAULT 0,
|
||||||
|
"forks" INTEGER NOT NULL DEFAULT 0,
|
||||||
|
"openIssues" INTEGER NOT NULL DEFAULT 0,
|
||||||
|
"openPullRequests" INTEGER NOT NULL DEFAULT 0,
|
||||||
|
"sizeKb" INTEGER NOT NULL DEFAULT 0,
|
||||||
|
"lastCommitSha" TEXT,
|
||||||
|
"lastCommitMessage" TEXT,
|
||||||
|
"lastCommitAuthor" TEXT,
|
||||||
|
"lastCommitAt" TIMESTAMP(3),
|
||||||
|
"latestTag" TEXT,
|
||||||
|
"latestRelease" TEXT,
|
||||||
|
"latestReleaseAt" TIMESTAMP(3),
|
||||||
|
"branchCount" INTEGER NOT NULL DEFAULT 0,
|
||||||
|
"tagCount" INTEGER NOT NULL DEFAULT 0,
|
||||||
|
"branches" JSONB NOT NULL DEFAULT '[]',
|
||||||
|
"tags" JSONB NOT NULL DEFAULT '[]',
|
||||||
|
"commits" JSONB NOT NULL DEFAULT '[]',
|
||||||
|
"releases" JSONB NOT NULL DEFAULT '[]',
|
||||||
|
"languages" JSONB NOT NULL DEFAULT '{}',
|
||||||
|
"pushedAt" TIMESTAMP(3),
|
||||||
|
"fetchedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
|
||||||
|
CONSTRAINT "RepoSnapshot_pkey" PRIMARY KEY ("id")
|
||||||
|
);
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE UNIQUE INDEX "GitConnection_name_key" ON "GitConnection"("name");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "GitConnection_provider_idx" ON "GitConnection"("provider");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE UNIQUE INDEX "Project_slug_key" ON "Project"("slug");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "Project_status_idx" ON "Project"("status");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "Project_connectionId_idx" ON "Project"("connectionId");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "Project_updatedAt_idx" ON "Project"("updatedAt");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "Note_projectId_idx" ON "Note"("projectId");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "Note_pinned_idx" ON "Note"("pinned");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE UNIQUE INDEX "RepoSnapshot_projectId_key" ON "RepoSnapshot"("projectId");
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "Project" ADD CONSTRAINT "Project_connectionId_fkey" FOREIGN KEY ("connectionId") REFERENCES "GitConnection"("id") ON DELETE SET NULL ON UPDATE CASCADE;
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "Note" ADD CONSTRAINT "Note_projectId_fkey" FOREIGN KEY ("projectId") REFERENCES "Project"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "RepoSnapshot" ADD CONSTRAINT "RepoSnapshot_projectId_fkey" FOREIGN KEY ("projectId") REFERENCES "Project"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
# Please do not edit this file manually
|
||||||
|
# It should be added in your version-control system (e.g., Git)
|
||||||
|
provider = "postgresql"
|
||||||
@@ -0,0 +1,163 @@
|
|||||||
|
// ─────────────────────────────────────────────────────────────
|
||||||
|
// Nebula – Datenmodell
|
||||||
|
// Datenbank: PostgreSQL (lokal oder via docker compose)
|
||||||
|
// ─────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
generator client {
|
||||||
|
provider = "prisma-client-js"
|
||||||
|
// linux-musl-openssl-3.0.x wird fuer das Alpine-Docker-Image benoetigt.
|
||||||
|
binaryTargets = ["native", "linux-musl-openssl-3.0.x"]
|
||||||
|
}
|
||||||
|
|
||||||
|
datasource db {
|
||||||
|
provider = "postgresql"
|
||||||
|
url = env("DATABASE_URL")
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Lebenszyklus eines Projekts. IDEA ist der Startzustand fuer
|
||||||
|
/// frisch notierte Einfaelle, ARCHIVED blendet Projekte aus dem
|
||||||
|
/// Standard-Board aus, ohne sie zu loeschen.
|
||||||
|
enum ProjectStatus {
|
||||||
|
IDEA
|
||||||
|
OPEN
|
||||||
|
PLANNING
|
||||||
|
IN_DEVELOPMENT
|
||||||
|
DONE
|
||||||
|
ARCHIVED
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Unterstuetzte Git-Systeme.
|
||||||
|
enum GitProvider {
|
||||||
|
GITHUB
|
||||||
|
GITLAB
|
||||||
|
GITEA
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Eine Verbindung zu einem Git-System inkl. verschluesseltem Token.
|
||||||
|
model GitConnection {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
name String
|
||||||
|
provider GitProvider
|
||||||
|
/// Basis-URL der Instanz, z. B. https://github.com, https://gitlab.com,
|
||||||
|
/// https://git.meine-domain.de
|
||||||
|
baseUrl String
|
||||||
|
/// Optionaler Benutzername – rein informativ fuer die Anzeige.
|
||||||
|
username String?
|
||||||
|
|
||||||
|
/// Personal Access Token, AES-256-GCM-verschluesselt (siehe src/lib/crypto.ts).
|
||||||
|
tokenCipher String?
|
||||||
|
/// Gekuerzte Darstellung des Tokens fuer die UI, z. B. "ghp_…4f2a".
|
||||||
|
tokenHint String?
|
||||||
|
|
||||||
|
lastCheckedAt DateTime?
|
||||||
|
lastCheckOk Boolean?
|
||||||
|
lastCheckMessage String?
|
||||||
|
|
||||||
|
projects Project[]
|
||||||
|
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
|
||||||
|
@@unique([name])
|
||||||
|
@@index([provider])
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Ein Vibe-Coding-Projekt – von der reinen Idee bis zum fertigen Repo.
|
||||||
|
model Project {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
name String
|
||||||
|
slug String @unique
|
||||||
|
/// Einzeiler fuer die Karte im Dashboard.
|
||||||
|
summary String?
|
||||||
|
/// Ausfuehrliche Beschreibung / Ideenskizze (Markdown-freundlich).
|
||||||
|
description String?
|
||||||
|
status ProjectStatus @default(IDEA)
|
||||||
|
/// 1 = niedrig, 2 = normal, 3 = hoch, 4 = kritisch
|
||||||
|
priority Int @default(2)
|
||||||
|
/// Fortschritt in Prozent (0–100)
|
||||||
|
progress Int @default(0)
|
||||||
|
/// Akzentfarbe der Karte: violet | cyan | emerald | amber | rose | blue
|
||||||
|
accent String @default("violet")
|
||||||
|
tags String[] @default([])
|
||||||
|
favorite Boolean @default(false)
|
||||||
|
|
||||||
|
// ── Git-Anbindung ──────────────────────────────────────────
|
||||||
|
repoUrl String?
|
||||||
|
/// Owner bzw. Namespace/Gruppe (bei GitLab auch verschachtelt: "gruppe/subgruppe")
|
||||||
|
repoOwner String?
|
||||||
|
repoName String?
|
||||||
|
defaultBranch String?
|
||||||
|
connectionId String?
|
||||||
|
connection GitConnection? @relation(fields: [connectionId], references: [id], onDelete: SetNull)
|
||||||
|
|
||||||
|
lastSyncedAt DateTime?
|
||||||
|
syncError String?
|
||||||
|
|
||||||
|
notes Note[]
|
||||||
|
snapshot RepoSnapshot?
|
||||||
|
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
|
||||||
|
@@index([status])
|
||||||
|
@@index([connectionId])
|
||||||
|
@@index([updatedAt])
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Freie Notizen zu einem Projekt.
|
||||||
|
model Note {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
projectId String
|
||||||
|
project Project @relation(fields: [projectId], references: [id], onDelete: Cascade)
|
||||||
|
title String?
|
||||||
|
content String
|
||||||
|
pinned Boolean @default(false)
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
|
||||||
|
@@index([projectId])
|
||||||
|
@@index([pinned])
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Zwischengespeicherter Stand des verknuepften Repositories. Wird beim
|
||||||
|
/// Sync ueberschrieben, damit das Dashboard auch ohne Netz Daten zeigt.
|
||||||
|
model RepoSnapshot {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
projectId String @unique
|
||||||
|
project Project @relation(fields: [projectId], references: [id], onDelete: Cascade)
|
||||||
|
|
||||||
|
fullName String?
|
||||||
|
description String?
|
||||||
|
defaultBranch String?
|
||||||
|
htmlUrl String?
|
||||||
|
visibility String?
|
||||||
|
|
||||||
|
stars Int @default(0)
|
||||||
|
forks Int @default(0)
|
||||||
|
openIssues Int @default(0)
|
||||||
|
openPullRequests Int @default(0)
|
||||||
|
sizeKb Int @default(0)
|
||||||
|
|
||||||
|
lastCommitSha String?
|
||||||
|
lastCommitMessage String?
|
||||||
|
lastCommitAuthor String?
|
||||||
|
lastCommitAt DateTime?
|
||||||
|
|
||||||
|
latestTag String?
|
||||||
|
latestRelease String?
|
||||||
|
latestReleaseAt DateTime?
|
||||||
|
|
||||||
|
branchCount Int @default(0)
|
||||||
|
tagCount Int @default(0)
|
||||||
|
|
||||||
|
/// Rohdaten der Listen – bewusst als JSON, damit providerspezifische
|
||||||
|
/// Zusatzfelder nicht verloren gehen.
|
||||||
|
branches Json @default("[]")
|
||||||
|
tags Json @default("[]")
|
||||||
|
commits Json @default("[]")
|
||||||
|
releases Json @default("[]")
|
||||||
|
languages Json @default("{}")
|
||||||
|
|
||||||
|
pushedAt DateTime?
|
||||||
|
fetchedAt DateTime @default(now())
|
||||||
|
}
|
||||||
+118
@@ -0,0 +1,118 @@
|
|||||||
|
import { PrismaClient, ProjectStatus } from "@prisma/client";
|
||||||
|
|
||||||
|
const prisma = new PrismaClient();
|
||||||
|
|
||||||
|
interface SampleNote {
|
||||||
|
title?: string | null;
|
||||||
|
content: string;
|
||||||
|
pinned?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SampleProject {
|
||||||
|
name: string;
|
||||||
|
slug: string;
|
||||||
|
summary: string;
|
||||||
|
description: string;
|
||||||
|
status: ProjectStatus;
|
||||||
|
priority: number;
|
||||||
|
progress: number;
|
||||||
|
accent: string;
|
||||||
|
tags: string[];
|
||||||
|
favorite: boolean;
|
||||||
|
notes: SampleNote[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Legt ein paar Beispielprojekte an, damit das Dashboard nach dem ersten
|
||||||
|
* Start nicht leer ist. Idempotent: bereits vorhandene Slugs werden
|
||||||
|
* uebersprungen.
|
||||||
|
*/
|
||||||
|
async function main() {
|
||||||
|
const samples: SampleProject[] = [
|
||||||
|
{
|
||||||
|
name: "Nebula",
|
||||||
|
slug: "nebula",
|
||||||
|
summary: "Dieses Dashboard – Uebersicht ueber alle Vibe-Coding Projekte.",
|
||||||
|
description:
|
||||||
|
"Meta: Nebula verwaltet sich selbst. Notizen, Status und Git-Infos an einem Ort.",
|
||||||
|
status: ProjectStatus.IN_DEVELOPMENT,
|
||||||
|
priority: 3,
|
||||||
|
progress: 65,
|
||||||
|
accent: "violet",
|
||||||
|
tags: ["next.js", "prisma", "dashboard"],
|
||||||
|
favorite: true,
|
||||||
|
notes: [
|
||||||
|
{
|
||||||
|
title: "Naechste Schritte",
|
||||||
|
content:
|
||||||
|
"- Kanban-Ansicht ergaenzen\n- Webhook-Endpoint fuer Push-Events\n- Export als Markdown",
|
||||||
|
pinned: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Synthwave CLI",
|
||||||
|
slug: "synthwave-cli",
|
||||||
|
summary: "Terminal-Tool, das Projektgeruest inkl. CI in Sekunden erzeugt.",
|
||||||
|
description:
|
||||||
|
"Idee: ein `npx synthwave init` das Repo, Lint, Tests, Container und Pipeline vorkonfiguriert.",
|
||||||
|
status: ProjectStatus.PLANNING,
|
||||||
|
priority: 2,
|
||||||
|
progress: 15,
|
||||||
|
accent: "cyan",
|
||||||
|
tags: ["cli", "typescript", "dx"],
|
||||||
|
favorite: false,
|
||||||
|
notes: [
|
||||||
|
{
|
||||||
|
title: null,
|
||||||
|
content: "Konkurrenz pruefen: create-t3-app, degit, plop.",
|
||||||
|
pinned: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Pixelgarten",
|
||||||
|
slug: "pixelgarten",
|
||||||
|
summary: "Browser-Spiel: ein Garten, der aus Commit-Aktivitaet waechst.",
|
||||||
|
description:
|
||||||
|
"Rohe Idee. Jeder Commit pflanzt eine Pflanze, Streaks lassen sie bluehen.",
|
||||||
|
status: ProjectStatus.IDEA,
|
||||||
|
priority: 1,
|
||||||
|
progress: 0,
|
||||||
|
accent: "emerald",
|
||||||
|
tags: ["spiel", "canvas", "fun"],
|
||||||
|
favorite: false,
|
||||||
|
notes: [],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const sample of samples) {
|
||||||
|
const existing = await prisma.project.findUnique({
|
||||||
|
where: { slug: sample.slug },
|
||||||
|
});
|
||||||
|
if (existing) {
|
||||||
|
console.log(` · uebersprungen (existiert): ${sample.slug}`);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { notes, ...project } = sample;
|
||||||
|
await prisma.project.create({
|
||||||
|
data: {
|
||||||
|
...project,
|
||||||
|
notes: notes.length ? { create: notes } : undefined,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
console.log(` ✓ angelegt: ${sample.slug}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main()
|
||||||
|
.then(async () => {
|
||||||
|
console.log("Seed abgeschlossen.");
|
||||||
|
await prisma.$disconnect();
|
||||||
|
})
|
||||||
|
.catch(async (error) => {
|
||||||
|
console.error("Seed fehlgeschlagen:", error);
|
||||||
|
await prisma.$disconnect();
|
||||||
|
process.exit(1);
|
||||||
|
});
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
/**
|
||||||
|
* Nebula – Ersteinrichtung.
|
||||||
|
*
|
||||||
|
* Legt eine .env auf Basis von .env.example an und erzeugt dabei einen
|
||||||
|
* zufaelligen APP_SECRET. Vorhandene .env-Dateien werden nicht angefasst.
|
||||||
|
*
|
||||||
|
* node scripts/setup.mjs bzw. npm run setup
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { randomBytes } from "node:crypto";
|
||||||
|
import { existsSync, readFileSync, writeFileSync } from "node:fs";
|
||||||
|
import { dirname, join } from "node:path";
|
||||||
|
import { fileURLToPath } from "node:url";
|
||||||
|
|
||||||
|
const root = join(dirname(fileURLToPath(import.meta.url)), "..");
|
||||||
|
const envPath = join(root, ".env");
|
||||||
|
const examplePath = join(root, ".env.example");
|
||||||
|
|
||||||
|
const c = {
|
||||||
|
reset: "[0m",
|
||||||
|
dim: "[2m",
|
||||||
|
green: "[32m",
|
||||||
|
yellow: "[33m",
|
||||||
|
cyan: "[36m",
|
||||||
|
};
|
||||||
|
|
||||||
|
function log(message) {
|
||||||
|
console.log(message);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!existsSync(examplePath)) {
|
||||||
|
console.error(`${c.yellow}.env.example nicht gefunden – abgebrochen.${c.reset}`);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (existsSync(envPath)) {
|
||||||
|
log(`${c.yellow}·${c.reset} .env existiert bereits – sie wird nicht ueberschrieben.`);
|
||||||
|
} else {
|
||||||
|
const secret = randomBytes(32).toString("base64");
|
||||||
|
const content = readFileSync(examplePath, "utf8").replace(
|
||||||
|
/^APP_SECRET=.*$/m,
|
||||||
|
`APP_SECRET="${secret}"`,
|
||||||
|
);
|
||||||
|
writeFileSync(envPath, content, "utf8");
|
||||||
|
log(`${c.green}✓${c.reset} .env angelegt (APP_SECRET wurde zufaellig erzeugt).`);
|
||||||
|
}
|
||||||
|
|
||||||
|
log("");
|
||||||
|
log(`${c.cyan}Naechste Schritte${c.reset}`);
|
||||||
|
log(`${c.dim}─────────────────────────────────────────────${c.reset}`);
|
||||||
|
log("Standalone (App lokal, Datenbank im Container):");
|
||||||
|
log(` ${c.dim}1.${c.reset} docker compose up -d db`);
|
||||||
|
log(` ${c.dim}2.${c.reset} npm install`);
|
||||||
|
log(` ${c.dim}3.${c.reset} npm run db:migrate`);
|
||||||
|
log(` ${c.dim}4.${c.reset} npm run db:seed ${c.dim}(optional, Beispieldaten)${c.reset}`);
|
||||||
|
log(` ${c.dim}5.${c.reset} npm run dev ${c.dim}→ http://localhost:3000${c.reset}`);
|
||||||
|
log("");
|
||||||
|
log("Alles in Docker:");
|
||||||
|
log(` ${c.dim}1.${c.reset} docker compose --profile full up -d --build`);
|
||||||
|
log(` ${c.dim}2.${c.reset} ${c.dim}→ http://localhost:3000${c.reset}`);
|
||||||
|
log("");
|
||||||
|
log("Eigene, bereits laufende PostgreSQL:");
|
||||||
|
log(` DATABASE_URL in der .env anpassen, dann npm run db:migrate`);
|
||||||
|
log("");
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import { prisma } from "@/lib/db";
|
||||||
|
import { clientForConnection } from "@/lib/git";
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
type Params = { params: Promise<{ id: string }> };
|
||||||
|
|
||||||
|
/** Testet Erreichbarkeit und Token einer Verbindung und merkt sich das Ergebnis. */
|
||||||
|
export async function POST(_request: Request, { params }: Params) {
|
||||||
|
const { id } = await params;
|
||||||
|
|
||||||
|
const connection = await prisma.gitConnection.findUnique({ where: { id } });
|
||||||
|
if (!connection) {
|
||||||
|
return NextResponse.json({ error: "Verbindung nicht gefunden" }, { status: 404 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await clientForConnection(connection).check();
|
||||||
|
|
||||||
|
await prisma.gitConnection.update({
|
||||||
|
where: { id },
|
||||||
|
data: {
|
||||||
|
lastCheckedAt: new Date(),
|
||||||
|
lastCheckOk: result.ok,
|
||||||
|
lastCheckMessage: result.message,
|
||||||
|
username: result.user ?? connection.username,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json(result, { status: result.ok ? 200 : 502 });
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import { prisma } from "@/lib/db";
|
||||||
|
import { clientForConnection } from "@/lib/git";
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
type Params = { params: Promise<{ id: string }> };
|
||||||
|
|
||||||
|
/** Listet Repositories, auf die der hinterlegte Token Zugriff hat. */
|
||||||
|
export async function GET(request: Request, { params }: Params) {
|
||||||
|
const { id } = await params;
|
||||||
|
const query = new URL(request.url).searchParams.get("q") ?? undefined;
|
||||||
|
|
||||||
|
const connection = await prisma.gitConnection.findUnique({ where: { id } });
|
||||||
|
if (!connection) {
|
||||||
|
return NextResponse.json({ error: "Verbindung nicht gefunden" }, { status: 404 });
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const repos = await clientForConnection(connection).listRepos(query);
|
||||||
|
return NextResponse.json({ repos });
|
||||||
|
} catch (error) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: error instanceof Error ? error.message : String(error) },
|
||||||
|
{ status: 502 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,76 @@
|
|||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import { encryptSecret, tokenHint } from "@/lib/crypto";
|
||||||
|
import { prisma } from "@/lib/db";
|
||||||
|
import { normalizeBaseUrl } from "@/lib/git/http";
|
||||||
|
import { connectionSafeSelect } from "@/lib/projects";
|
||||||
|
import { connectionUpdateSchema, formatZodError } from "@/lib/validation";
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
type Params = { params: Promise<{ id: string }> };
|
||||||
|
|
||||||
|
const safeSelect = {
|
||||||
|
...connectionSafeSelect,
|
||||||
|
_count: { select: { projects: true } },
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function PATCH(request: Request, { params }: Params) {
|
||||||
|
const { id } = await params;
|
||||||
|
|
||||||
|
let body: unknown;
|
||||||
|
try {
|
||||||
|
body = await request.json();
|
||||||
|
} catch {
|
||||||
|
return NextResponse.json({ error: "Ungueltiger JSON-Body" }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsed = connectionUpdateSchema.safeParse(body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
|
||||||
|
{ status: 422 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = parsed.data;
|
||||||
|
const update: Record<string, unknown> = {};
|
||||||
|
if (data.name !== undefined) update.name = data.name;
|
||||||
|
if (data.provider !== undefined) update.provider = data.provider;
|
||||||
|
if (data.baseUrl !== undefined) update.baseUrl = normalizeBaseUrl(data.baseUrl);
|
||||||
|
if (data.username !== undefined) update.username = data.username;
|
||||||
|
|
||||||
|
// token === null -> Token entfernen
|
||||||
|
// token === "" -> vom Schema zu null normalisiert
|
||||||
|
// token undefined -> unveraendert lassen
|
||||||
|
if (data.token !== undefined) {
|
||||||
|
if (data.token) {
|
||||||
|
update.tokenCipher = encryptSecret(data.token);
|
||||||
|
update.tokenHint = tokenHint(data.token);
|
||||||
|
} else {
|
||||||
|
update.tokenCipher = null;
|
||||||
|
update.tokenHint = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const connection = await prisma.gitConnection.update({
|
||||||
|
where: { id },
|
||||||
|
data: update,
|
||||||
|
select: safeSelect,
|
||||||
|
});
|
||||||
|
return NextResponse.json({ connection });
|
||||||
|
} catch {
|
||||||
|
return NextResponse.json({ error: "Verbindung nicht gefunden oder Name vergeben" }, { status: 404 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function DELETE(_request: Request, { params }: Params) {
|
||||||
|
const { id } = await params;
|
||||||
|
try {
|
||||||
|
// Projekte bleiben erhalten, connectionId wird per onDelete: SetNull geleert.
|
||||||
|
await prisma.gitConnection.delete({ where: { id } });
|
||||||
|
return NextResponse.json({ ok: true });
|
||||||
|
} catch {
|
||||||
|
return NextResponse.json({ error: "Verbindung nicht gefunden" }, { status: 404 });
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import { encryptSecret, tokenHint } from "@/lib/crypto";
|
||||||
|
import { prisma } from "@/lib/db";
|
||||||
|
import { normalizeBaseUrl } from "@/lib/git/http";
|
||||||
|
import { connectionSafeSelect } from "@/lib/projects";
|
||||||
|
import { connectionCreateSchema, formatZodError } from "@/lib/validation";
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
/** Verbindungen ohne Token-Chiffrat – das verlaesst den Server nie. */
|
||||||
|
const safeSelect = {
|
||||||
|
...connectionSafeSelect,
|
||||||
|
_count: { select: { projects: true } },
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function GET() {
|
||||||
|
const connections = await prisma.gitConnection.findMany({
|
||||||
|
select: safeSelect,
|
||||||
|
orderBy: { name: "asc" },
|
||||||
|
});
|
||||||
|
return NextResponse.json({ connections });
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function POST(request: Request) {
|
||||||
|
let body: unknown;
|
||||||
|
try {
|
||||||
|
body = await request.json();
|
||||||
|
} catch {
|
||||||
|
return NextResponse.json({ error: "Ungueltiger JSON-Body" }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsed = connectionCreateSchema.safeParse(body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
|
||||||
|
{ status: 422 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { name, provider, baseUrl, username, token } = parsed.data;
|
||||||
|
|
||||||
|
const duplicate = await prisma.gitConnection.findUnique({ where: { name } });
|
||||||
|
if (duplicate) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "Es gibt bereits eine Verbindung mit diesem Namen.", fields: { name: "Name bereits vergeben" } },
|
||||||
|
{ status: 409 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const connection = await prisma.gitConnection.create({
|
||||||
|
data: {
|
||||||
|
name,
|
||||||
|
provider,
|
||||||
|
baseUrl: normalizeBaseUrl(baseUrl),
|
||||||
|
username: username ?? null,
|
||||||
|
tokenCipher: token ? encryptSecret(token) : null,
|
||||||
|
tokenHint: token ? tokenHint(token) : null,
|
||||||
|
},
|
||||||
|
select: safeSelect,
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json({ connection }, { status: 201 });
|
||||||
|
}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import { prisma } from "@/lib/db";
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
/** Liveness/Readiness-Endpoint – wird auch vom Docker-Healthcheck benutzt. */
|
||||||
|
export async function GET() {
|
||||||
|
try {
|
||||||
|
await prisma.$queryRaw`SELECT 1`;
|
||||||
|
return NextResponse.json({
|
||||||
|
status: "ok",
|
||||||
|
database: "up",
|
||||||
|
time: new Date().toISOString(),
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{
|
||||||
|
status: "degraded",
|
||||||
|
database: "down",
|
||||||
|
error: error instanceof Error ? error.message : String(error),
|
||||||
|
},
|
||||||
|
{ status: 503 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import { prisma } from "@/lib/db";
|
||||||
|
import { formatZodError, noteUpdateSchema } from "@/lib/validation";
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
type Params = { params: Promise<{ id: string }> };
|
||||||
|
|
||||||
|
export async function PATCH(request: Request, { params }: Params) {
|
||||||
|
const { id } = await params;
|
||||||
|
|
||||||
|
let body: unknown;
|
||||||
|
try {
|
||||||
|
body = await request.json();
|
||||||
|
} catch {
|
||||||
|
return NextResponse.json({ error: "Ungueltiger JSON-Body" }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsed = noteUpdateSchema.safeParse(body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
|
||||||
|
{ status: 422 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const note = await prisma.note.update({
|
||||||
|
where: { id },
|
||||||
|
data: {
|
||||||
|
...(parsed.data.title !== undefined ? { title: parsed.data.title } : {}),
|
||||||
|
...(parsed.data.content !== undefined ? { content: parsed.data.content } : {}),
|
||||||
|
...(parsed.data.pinned !== undefined ? { pinned: parsed.data.pinned } : {}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return NextResponse.json({ note });
|
||||||
|
} catch {
|
||||||
|
return NextResponse.json({ error: "Notiz nicht gefunden" }, { status: 404 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function DELETE(_request: Request, { params }: Params) {
|
||||||
|
const { id } = await params;
|
||||||
|
try {
|
||||||
|
await prisma.note.delete({ where: { id } });
|
||||||
|
return NextResponse.json({ ok: true });
|
||||||
|
} catch {
|
||||||
|
return NextResponse.json({ error: "Notiz nicht gefunden" }, { status: 404 });
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import { prisma } from "@/lib/db";
|
||||||
|
import { formatZodError, noteCreateSchema } from "@/lib/validation";
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
type Params = { params: Promise<{ id: string }> };
|
||||||
|
|
||||||
|
export async function GET(_request: Request, { params }: Params) {
|
||||||
|
const { id } = await params;
|
||||||
|
const notes = await prisma.note.findMany({
|
||||||
|
where: { projectId: id },
|
||||||
|
orderBy: [{ pinned: "desc" }, { updatedAt: "desc" }],
|
||||||
|
});
|
||||||
|
return NextResponse.json({ notes });
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function POST(request: Request, { params }: Params) {
|
||||||
|
const { id } = await params;
|
||||||
|
|
||||||
|
const project = await prisma.project.findUnique({ where: { id }, select: { id: true } });
|
||||||
|
if (!project) {
|
||||||
|
return NextResponse.json({ error: "Projekt nicht gefunden" }, { status: 404 });
|
||||||
|
}
|
||||||
|
|
||||||
|
let body: unknown;
|
||||||
|
try {
|
||||||
|
body = await request.json();
|
||||||
|
} catch {
|
||||||
|
return NextResponse.json({ error: "Ungueltiger JSON-Body" }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsed = noteCreateSchema.safeParse(body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
|
||||||
|
{ status: 422 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const note = await prisma.note.create({
|
||||||
|
data: {
|
||||||
|
projectId: id,
|
||||||
|
title: parsed.data.title ?? null,
|
||||||
|
content: parsed.data.content,
|
||||||
|
pinned: parsed.data.pinned,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Projekt "anfassen", damit die Sortierung nach Aktivitaet stimmt.
|
||||||
|
await prisma.project.update({ where: { id }, data: { updatedAt: new Date() } });
|
||||||
|
|
||||||
|
return NextResponse.json({ note }, { status: 201 });
|
||||||
|
}
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import { prisma } from "@/lib/db";
|
||||||
|
import { parseRepoUrl } from "@/lib/git";
|
||||||
|
import { projectDetailInclude, projectListInclude, uniqueSlug } from "@/lib/projects";
|
||||||
|
import { formatZodError, projectUpdateSchema } from "@/lib/validation";
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
type Params = { params: Promise<{ id: string }> };
|
||||||
|
|
||||||
|
export async function GET(_request: Request, { params }: Params) {
|
||||||
|
const { id } = await params;
|
||||||
|
const project = await prisma.project.findUnique({
|
||||||
|
where: { id },
|
||||||
|
include: projectDetailInclude,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!project) {
|
||||||
|
return NextResponse.json({ error: "Projekt nicht gefunden" }, { status: 404 });
|
||||||
|
}
|
||||||
|
return NextResponse.json({ project });
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function PATCH(request: Request, { params }: Params) {
|
||||||
|
const { id } = await params;
|
||||||
|
|
||||||
|
let body: unknown;
|
||||||
|
try {
|
||||||
|
body = await request.json();
|
||||||
|
} catch {
|
||||||
|
return NextResponse.json({ error: "Ungueltiger JSON-Body" }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsed = projectUpdateSchema.safeParse(body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
|
||||||
|
{ status: 422 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const existing = await prisma.project.findUnique({ where: { id } });
|
||||||
|
if (!existing) {
|
||||||
|
return NextResponse.json({ error: "Projekt nicht gefunden" }, { status: 404 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = parsed.data;
|
||||||
|
const update: Record<string, unknown> = {};
|
||||||
|
|
||||||
|
if (data.name !== undefined && data.name !== existing.name) {
|
||||||
|
update.name = data.name;
|
||||||
|
update.slug = await uniqueSlug(data.name, id);
|
||||||
|
}
|
||||||
|
for (const key of ["summary", "description", "status", "priority", "progress", "accent", "tags", "favorite", "connectionId"] as const) {
|
||||||
|
if (data[key] !== undefined) update[key] = data[key];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.repoUrl !== undefined) {
|
||||||
|
update.repoUrl = data.repoUrl;
|
||||||
|
const parsedUrl = data.repoUrl ? parseRepoUrl(data.repoUrl) : null;
|
||||||
|
if (parsedUrl) {
|
||||||
|
update.repoOwner = data.repoOwner ?? parsedUrl.owner;
|
||||||
|
update.repoName = data.repoName ?? parsedUrl.name;
|
||||||
|
} else if (!data.repoUrl) {
|
||||||
|
update.repoOwner = null;
|
||||||
|
update.repoName = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (data.repoOwner !== undefined) update.repoOwner = data.repoOwner;
|
||||||
|
if (data.repoName !== undefined) update.repoName = data.repoName;
|
||||||
|
|
||||||
|
const project = await prisma.project.update({
|
||||||
|
where: { id },
|
||||||
|
data: update,
|
||||||
|
include: projectListInclude,
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json({ project });
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function DELETE(_request: Request, { params }: Params) {
|
||||||
|
const { id } = await params;
|
||||||
|
try {
|
||||||
|
await prisma.project.delete({ where: { id } });
|
||||||
|
return NextResponse.json({ ok: true });
|
||||||
|
} catch {
|
||||||
|
return NextResponse.json({ error: "Projekt nicht gefunden" }, { status: 404 });
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import { prisma } from "@/lib/db";
|
||||||
|
import { projectDetailInclude } from "@/lib/projects";
|
||||||
|
import { syncProject } from "@/lib/sync";
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
type Params = { params: Promise<{ id: string }> };
|
||||||
|
|
||||||
|
/** Holt Branches, Tags, Commits und Releases beim Git-System ab. */
|
||||||
|
export async function POST(_request: Request, { params }: Params) {
|
||||||
|
const { id } = await params;
|
||||||
|
const result = await syncProject(id);
|
||||||
|
|
||||||
|
const project = await prisma.project.findUnique({
|
||||||
|
where: { id },
|
||||||
|
include: projectDetailInclude,
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json({ ...result, project }, { status: result.ok ? 200 : 502 });
|
||||||
|
}
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import { prisma } from "@/lib/db";
|
||||||
|
import { parseRepoUrl } from "@/lib/git";
|
||||||
|
import { projectListInclude, uniqueSlug } from "@/lib/projects";
|
||||||
|
import { formatZodError, projectCreateSchema } from "@/lib/validation";
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
export async function GET(request: Request) {
|
||||||
|
const { searchParams } = new URL(request.url);
|
||||||
|
const status = searchParams.get("status");
|
||||||
|
const query = searchParams.get("q");
|
||||||
|
|
||||||
|
const projects = await prisma.project.findMany({
|
||||||
|
where: {
|
||||||
|
...(status ? { status: status as never } : {}),
|
||||||
|
...(query
|
||||||
|
? {
|
||||||
|
OR: [
|
||||||
|
{ name: { contains: query, mode: "insensitive" as const } },
|
||||||
|
{ summary: { contains: query, mode: "insensitive" as const } },
|
||||||
|
{ tags: { has: query.toLowerCase() } },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
: {}),
|
||||||
|
},
|
||||||
|
include: projectListInclude,
|
||||||
|
orderBy: [{ favorite: "desc" }, { updatedAt: "desc" }],
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json({ projects });
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function POST(request: Request) {
|
||||||
|
let body: unknown;
|
||||||
|
try {
|
||||||
|
body = await request.json();
|
||||||
|
} catch {
|
||||||
|
return NextResponse.json({ error: "Ungueltiger JSON-Body" }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsed = projectCreateSchema.safeParse(body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
|
||||||
|
{ status: 422 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = parsed.data;
|
||||||
|
|
||||||
|
// Owner/Name aus der URL ableiten, falls nicht explizit angegeben.
|
||||||
|
let repoOwner = data.repoOwner ?? null;
|
||||||
|
let repoName = data.repoName ?? null;
|
||||||
|
if (data.repoUrl && (!repoOwner || !repoName)) {
|
||||||
|
const parsedUrl = parseRepoUrl(data.repoUrl);
|
||||||
|
if (parsedUrl) {
|
||||||
|
repoOwner = repoOwner ?? parsedUrl.owner;
|
||||||
|
repoName = repoName ?? parsedUrl.name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const project = await prisma.project.create({
|
||||||
|
data: {
|
||||||
|
name: data.name,
|
||||||
|
slug: await uniqueSlug(data.name),
|
||||||
|
summary: data.summary ?? null,
|
||||||
|
description: data.description ?? null,
|
||||||
|
status: data.status,
|
||||||
|
priority: data.priority,
|
||||||
|
progress: data.progress,
|
||||||
|
accent: data.accent,
|
||||||
|
tags: data.tags,
|
||||||
|
favorite: data.favorite,
|
||||||
|
repoUrl: data.repoUrl ?? null,
|
||||||
|
repoOwner,
|
||||||
|
repoName,
|
||||||
|
connectionId: data.connectionId ?? null,
|
||||||
|
},
|
||||||
|
include: projectListInclude,
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json({ project }, { status: 201 });
|
||||||
|
}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import type { Metadata } from "next";
|
||||||
|
import { ConnectionsManager } from "@/components/ConnectionsManager";
|
||||||
|
import { prisma } from "@/lib/db";
|
||||||
|
import { connectionSafeSelect } from "@/lib/projects";
|
||||||
|
import type { ConnectionWithCount } from "@/types";
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Git-Verbindungen",
|
||||||
|
description: "GitHub, GitLab und Gitea mit Nebula verbinden.",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function ConnectionsPage() {
|
||||||
|
const connections = await prisma.gitConnection.findMany({
|
||||||
|
select: { ...connectionSafeSelect, _count: { select: { projects: true } } },
|
||||||
|
orderBy: { name: "asc" },
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pt-4">
|
||||||
|
<ConnectionsManager connections={connections as unknown as ConnectionWithCount[]} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import { AlertTriangle, RotateCcw } from "lucide-react";
|
||||||
|
|
||||||
|
export default function GlobalError({
|
||||||
|
error,
|
||||||
|
reset,
|
||||||
|
}: {
|
||||||
|
error: Error & { digest?: string };
|
||||||
|
reset: () => void;
|
||||||
|
}) {
|
||||||
|
useEffect(() => {
|
||||||
|
console.error(error);
|
||||||
|
}, [error]);
|
||||||
|
|
||||||
|
const isDbError =
|
||||||
|
/database|prisma|ECONNREFUSED|P1001|does not exist/i.test(error.message ?? "");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="glass fade-up mx-auto mt-16 max-w-2xl px-6 py-14">
|
||||||
|
<span className="grid h-12 w-12 place-items-center rounded-2xl bg-rose-500/15 text-rose-300">
|
||||||
|
<AlertTriangle className="h-6 w-6" />
|
||||||
|
</span>
|
||||||
|
<h1 className="mt-4 text-xl font-semibold text-white">Da ist etwas schiefgelaufen</h1>
|
||||||
|
<p className="mt-2 text-sm text-slate-400">{error.message}</p>
|
||||||
|
|
||||||
|
{isDbError ? (
|
||||||
|
<div className="mt-5 rounded-xl border border-white/8 bg-black/30 p-4 text-sm text-slate-400">
|
||||||
|
<p className="font-medium text-slate-200">Sieht nach einem Datenbankproblem aus.</p>
|
||||||
|
<ol className="mt-2 list-decimal space-y-1 pl-5 text-xs">
|
||||||
|
<li>
|
||||||
|
Laeuft PostgreSQL? <code className="text-violet-300">docker compose up -d db</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Stimmt <code className="text-violet-300">DATABASE_URL</code> in der{" "}
|
||||||
|
<code className="text-violet-300">.env</code>?
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Migrationen eingespielt? <code className="text-violet-300">npm run db:migrate</code>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<button type="button" className="btn btn-primary mt-6" onClick={reset}>
|
||||||
|
<RotateCcw className="h-4 w-4" />
|
||||||
|
Erneut versuchen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,365 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
/* ─────────────────────────────────────────────────────────────
|
||||||
|
Nebula – Designsystem
|
||||||
|
Dark Glassmorphism mit Neon-Akzenten.
|
||||||
|
───────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--color-void: #05060f;
|
||||||
|
--color-void-soft: #0a0c1a;
|
||||||
|
--color-haze: #12142b;
|
||||||
|
|
||||||
|
--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
|
||||||
|
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||||
|
--font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
|
||||||
|
Consolas, "DejaVu Sans Mono", monospace;
|
||||||
|
|
||||||
|
--radius-card: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
color-scheme: dark;
|
||||||
|
--glass-bg: rgba(255, 255, 255, 0.035);
|
||||||
|
--glass-border: rgba(255, 255, 255, 0.09);
|
||||||
|
--glass-highlight: rgba(255, 255, 255, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
border-color: var(--glass-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--color-void);
|
||||||
|
color: #e6e8f5;
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Hintergrund: langsam driftende Nebel ───────────────────── */
|
||||||
|
|
||||||
|
.aurora {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: -2;
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aurora::after {
|
||||||
|
/* feines Rauschen, damit die Verlaeufe nicht bandieren */
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
opacity: 0.35;
|
||||||
|
background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
|
||||||
|
background-size: 3px 3px;
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aurora-blob {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 9999px;
|
||||||
|
filter: blur(90px);
|
||||||
|
opacity: 0.5;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aurora-blob--one {
|
||||||
|
width: 46rem;
|
||||||
|
height: 46rem;
|
||||||
|
top: -18rem;
|
||||||
|
left: -12rem;
|
||||||
|
background: radial-gradient(circle at 30% 30%, #7c3aed, transparent 65%);
|
||||||
|
animation: drift-a 26s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aurora-blob--two {
|
||||||
|
width: 40rem;
|
||||||
|
height: 40rem;
|
||||||
|
top: -10rem;
|
||||||
|
right: -14rem;
|
||||||
|
background: radial-gradient(circle at 60% 40%, #0ea5e9, transparent 65%);
|
||||||
|
animation: drift-b 32s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aurora-blob--three {
|
||||||
|
width: 38rem;
|
||||||
|
height: 38rem;
|
||||||
|
bottom: -20rem;
|
||||||
|
left: 28%;
|
||||||
|
background: radial-gradient(circle at 50% 50%, #db2777, transparent 68%);
|
||||||
|
animation: drift-c 38s ease-in-out infinite alternate;
|
||||||
|
opacity: 0.35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aurora-grid {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: -1;
|
||||||
|
pointer-events: none;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
|
||||||
|
background-size: 64px 64px;
|
||||||
|
mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 40%, transparent 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes drift-a {
|
||||||
|
from { transform: translate3d(0, 0, 0) scale(1); }
|
||||||
|
to { transform: translate3d(6rem, 4rem, 0) scale(1.12); }
|
||||||
|
}
|
||||||
|
@keyframes drift-b {
|
||||||
|
from { transform: translate3d(0, 0, 0) scale(1.05); }
|
||||||
|
to { transform: translate3d(-7rem, 5rem, 0) scale(0.95); }
|
||||||
|
}
|
||||||
|
@keyframes drift-c {
|
||||||
|
from { transform: translate3d(0, 0, 0) scale(0.95); }
|
||||||
|
to { transform: translate3d(4rem, -6rem, 0) scale(1.1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Glasflaechen ───────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.glass {
|
||||||
|
position: relative;
|
||||||
|
background: var(--glass-bg);
|
||||||
|
border: 1px solid var(--glass-border);
|
||||||
|
backdrop-filter: blur(18px) saturate(140%);
|
||||||
|
-webkit-backdrop-filter: blur(18px) saturate(140%);
|
||||||
|
border-radius: var(--radius-card);
|
||||||
|
box-shadow:
|
||||||
|
0 1px 0 0 var(--glass-highlight) inset,
|
||||||
|
0 24px 60px -30px rgba(0, 0, 0, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-soft {
|
||||||
|
background: rgba(255, 255, 255, 0.025);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
-webkit-backdrop-filter: blur(12px);
|
||||||
|
border-radius: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Karte mit Akzent-Glow. --accent-from/--accent-to setzt die Komponente. */
|
||||||
|
.card-glow {
|
||||||
|
transition:
|
||||||
|
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
|
||||||
|
box-shadow 0.35s ease,
|
||||||
|
border-color 0.35s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-glow::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: -1px;
|
||||||
|
border-radius: inherit;
|
||||||
|
padding: 1px;
|
||||||
|
background: linear-gradient(135deg, var(--accent-from, #8b5cf6), var(--accent-to, #d946ef));
|
||||||
|
-webkit-mask:
|
||||||
|
linear-gradient(#000 0 0) content-box,
|
||||||
|
linear-gradient(#000 0 0);
|
||||||
|
-webkit-mask-composite: xor;
|
||||||
|
mask-composite: exclude;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.35s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-glow:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow:
|
||||||
|
0 1px 0 0 var(--glass-highlight) inset,
|
||||||
|
0 30px 70px -30px rgba(0, 0, 0, 0.95),
|
||||||
|
0 0 46px -12px var(--accent-from, #8b5cf6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-glow:hover::before {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Text & Akzente ─────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.text-gradient {
|
||||||
|
background: linear-gradient(120deg, #c4b5fd 0%, #67e8f9 45%, #f0abfc 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent-bar {
|
||||||
|
background: linear-gradient(90deg, var(--accent-from, #8b5cf6), var(--accent-to, #d946ef));
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent-dot {
|
||||||
|
box-shadow: 0 0 12px 1px currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Buttons ────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 0.55rem 1rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(120deg, #7c3aed, #c026d3);
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 10px 30px -12px rgba(168, 85, 247, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
filter: brightness(1.12);
|
||||||
|
box-shadow: 0 14px 36px -12px rgba(168, 85, 247, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost {
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
color: #cbd5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost:hover:not(:disabled) {
|
||||||
|
background: rgba(255, 255, 255, 0.09);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background: rgba(244, 63, 94, 0.12);
|
||||||
|
border-color: rgba(244, 63, 94, 0.35);
|
||||||
|
color: #fda4af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger:hover:not(:disabled) {
|
||||||
|
background: rgba(244, 63, 94, 0.22);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Formularfelder ─────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.field {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
background: rgba(8, 10, 24, 0.6);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.09);
|
||||||
|
padding: 0.6rem 0.85rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #e6e8f5;
|
||||||
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field::placeholder {
|
||||||
|
color: rgba(148, 163, 184, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: rgba(167, 139, 250, 0.6);
|
||||||
|
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(148, 163, 184, 0.85);
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
select.field option {
|
||||||
|
background: #0a0c1a;
|
||||||
|
color: #e6e8f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Sonstiges ──────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.shimmer {
|
||||||
|
background: linear-gradient(
|
||||||
|
100deg,
|
||||||
|
rgba(255, 255, 255, 0) 20%,
|
||||||
|
rgba(255, 255, 255, 0.12) 50%,
|
||||||
|
rgba(255, 255, 255, 0) 80%
|
||||||
|
);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: shimmer 2.2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
from { background-position: 200% 0; }
|
||||||
|
to { background-position: -200% 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-up {
|
||||||
|
animation: fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-up {
|
||||||
|
from { opacity: 0; transform: translateY(12px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.pulse-ring {
|
||||||
|
animation: pulse-ring 2.4s ease-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-ring {
|
||||||
|
0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.7; }
|
||||||
|
70% { box-shadow: 0 0 0 8px transparent; opacity: 0; }
|
||||||
|
100% { box-shadow: 0 0 0 0 transparent; opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(148, 163, 184, 0.22);
|
||||||
|
border-radius: 9999px;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
background-clip: content-box;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(167, 139, 250, 0.5);
|
||||||
|
background-clip: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: rgba(139, 92, 246, 0.35);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation-duration: 0.001ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.001ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0%" stop-color="#8b5cf6" />
|
||||||
|
<stop offset="55%" stop-color="#d946ef" />
|
||||||
|
<stop offset="100%" stop-color="#22d3ee" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="64" height="64" rx="16" fill="#05060f" />
|
||||||
|
<circle cx="32" cy="32" r="17" fill="url(#g)" opacity="0.9" />
|
||||||
|
<circle cx="32" cy="32" r="17" fill="none" stroke="#ffffff" stroke-opacity="0.25" stroke-width="1.5" />
|
||||||
|
<circle cx="46" cy="18" r="3" fill="#ffffff" opacity="0.9" />
|
||||||
|
<circle cx="16" cy="44" r="2" fill="#ffffff" opacity="0.7" />
|
||||||
|
<circle cx="20" cy="18" r="1.5" fill="#ffffff" opacity="0.55" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 758 B |
@@ -0,0 +1,51 @@
|
|||||||
|
import type { Metadata, Viewport } from "next";
|
||||||
|
import { TopNav } from "@/components/TopNav";
|
||||||
|
import "./globals.css";
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: {
|
||||||
|
default: "Nebula – Vibe Coding Dashboard",
|
||||||
|
template: "%s · Nebula",
|
||||||
|
},
|
||||||
|
description:
|
||||||
|
"Uebersicht ueber alle Vibe-Coding Projekte: Status, Notizen und Live-Daten aus GitHub, GitLab und Gitea.",
|
||||||
|
applicationName: "Nebula",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const viewport: Viewport = {
|
||||||
|
themeColor: "#05060f",
|
||||||
|
width: "device-width",
|
||||||
|
initialScale: 1,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{ children: React.ReactNode }>) {
|
||||||
|
return (
|
||||||
|
<html lang="de" suppressHydrationWarning>
|
||||||
|
<body className="min-h-screen antialiased">
|
||||||
|
<div className="aurora" aria-hidden="true">
|
||||||
|
<div className="aurora-blob aurora-blob--one" />
|
||||||
|
<div className="aurora-blob aurora-blob--two" />
|
||||||
|
<div className="aurora-blob aurora-blob--three" />
|
||||||
|
</div>
|
||||||
|
<div className="aurora-grid" aria-hidden="true" />
|
||||||
|
|
||||||
|
<TopNav />
|
||||||
|
|
||||||
|
<main className="mx-auto w-full max-w-[1400px] px-4 pb-24 pt-6 sm:px-6 lg:px-8">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer className="mx-auto w-full max-w-[1400px] px-4 pb-10 text-xs text-slate-500 sm:px-6 lg:px-8">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-2 border-t border-white/5 pt-6">
|
||||||
|
<span>
|
||||||
|
Nebula · lokal betrieben, Daten bleiben in deiner PostgreSQL.
|
||||||
|
</span>
|
||||||
|
<span className="font-mono text-slate-600">v0.1.0</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
import { Compass } from "lucide-react";
|
||||||
|
|
||||||
|
export default function NotFound() {
|
||||||
|
return (
|
||||||
|
<div className="glass fade-up mx-auto mt-16 max-w-lg px-6 py-16 text-center">
|
||||||
|
<span className="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-violet-500/25 to-cyan-400/20 text-violet-200">
|
||||||
|
<Compass className="h-6 w-6" />
|
||||||
|
</span>
|
||||||
|
<h1 className="mt-4 text-2xl font-semibold text-white">Nichts gefunden</h1>
|
||||||
|
<p className="mt-2 text-sm text-slate-400">
|
||||||
|
Diese Seite existiert nicht (mehr). Vielleicht wurde das Projekt geloescht.
|
||||||
|
</p>
|
||||||
|
<Link href="/" className="btn btn-primary mt-6">
|
||||||
|
Zurueck zum Dashboard
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
import { CircleDot, GitBranch, Lightbulb, Rocket, Trophy } from "lucide-react";
|
||||||
|
import { ProjectBoard } from "@/components/ProjectBoard";
|
||||||
|
import { StatCard } from "@/components/StatCard";
|
||||||
|
import { prisma } from "@/lib/db";
|
||||||
|
import { connectionSafeSelect, projectListInclude } from "@/lib/projects";
|
||||||
|
import { STATUS_META } from "@/lib/status";
|
||||||
|
import type { ConnectionSafe, ProjectListItem } from "@/types";
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
export default async function DashboardPage() {
|
||||||
|
const [projects, connections] = await Promise.all([
|
||||||
|
prisma.project.findMany({
|
||||||
|
include: projectListInclude,
|
||||||
|
orderBy: [{ favorite: "desc" }, { updatedAt: "desc" }],
|
||||||
|
}),
|
||||||
|
prisma.gitConnection.findMany({
|
||||||
|
select: connectionSafeSelect,
|
||||||
|
orderBy: { name: "asc" },
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const active = projects.filter((project) => project.status !== "ARCHIVED");
|
||||||
|
const ideas = active.filter((project) => project.status === "IDEA").length;
|
||||||
|
const inDev = active.filter((project) => project.status === "IN_DEVELOPMENT").length;
|
||||||
|
const done = active.filter((project) => project.status === "DONE").length;
|
||||||
|
const linked = active.filter((project) => Boolean(project.repoOwner && project.repoName)).length;
|
||||||
|
|
||||||
|
const averageProgress =
|
||||||
|
active.length > 0
|
||||||
|
? Math.round(active.reduce((sum, project) => sum + project.progress, 0) / active.length)
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<header className="fade-up pt-4">
|
||||||
|
<p className="text-[11px] font-semibold uppercase tracking-[0.3em] text-violet-300/70">
|
||||||
|
Vibe Coding Kontrollzentrum
|
||||||
|
</p>
|
||||||
|
<h1 className="mt-2 text-3xl font-semibold tracking-tight text-white sm:text-4xl">
|
||||||
|
Deine Projekte auf{" "}
|
||||||
|
<span className="text-gradient">einen Blick</span>
|
||||||
|
</h1>
|
||||||
|
<p className="mt-2 max-w-2xl text-sm text-slate-400">
|
||||||
|
Ideen festhalten, Status pflegen, Notizen sammeln – und live sehen, was in den
|
||||||
|
verknuepften Repositories bei GitHub, GitLab und Gitea passiert.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
|
||||||
|
<StatCard
|
||||||
|
label="Projekte"
|
||||||
|
value={active.length}
|
||||||
|
hint={`Ø Fortschritt ${averageProgress}%`}
|
||||||
|
icon={CircleDot}
|
||||||
|
color="#a78bfa"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="Ideen"
|
||||||
|
value={ideas}
|
||||||
|
hint={STATUS_META.IDEA.description}
|
||||||
|
icon={Lightbulb}
|
||||||
|
color={STATUS_META.IDEA.color}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="In Entwicklung"
|
||||||
|
value={inDev}
|
||||||
|
hint="Aktiv in Arbeit"
|
||||||
|
icon={Rocket}
|
||||||
|
color={STATUS_META.IN_DEVELOPMENT.color}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="Fertig"
|
||||||
|
value={done}
|
||||||
|
hint="Ausgeliefert"
|
||||||
|
icon={Trophy}
|
||||||
|
color={STATUS_META.DONE.color}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="Repos verknuepft"
|
||||||
|
value={linked}
|
||||||
|
hint={`${connections.length} Git-Verbindung${connections.length === 1 ? "" : "en"}`}
|
||||||
|
icon={GitBranch}
|
||||||
|
color="#38bdf8"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ProjectBoard
|
||||||
|
projects={projects as unknown as ProjectListItem[]}
|
||||||
|
connections={connections as unknown as ConnectionSafe[]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
import type { Metadata } from "next";
|
||||||
|
import { notFound } from "next/navigation";
|
||||||
|
import { FileText } from "lucide-react";
|
||||||
|
import { GitPanel } from "@/components/GitPanel";
|
||||||
|
import { NotesPanel } from "@/components/NotesPanel";
|
||||||
|
import { ProjectHeader } from "@/components/ProjectHeader";
|
||||||
|
import { prisma } from "@/lib/db";
|
||||||
|
import { connectionSafeSelect, projectDetailInclude } from "@/lib/projects";
|
||||||
|
import type { ConnectionSafe, ProjectDetail } from "@/types";
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
type PageProps = { params: Promise<{ id: string }> };
|
||||||
|
|
||||||
|
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
|
||||||
|
const { id } = await params;
|
||||||
|
const project = await prisma.project.findUnique({
|
||||||
|
where: { id },
|
||||||
|
select: { name: true, summary: true },
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
title: project?.name ?? "Projekt",
|
||||||
|
description: project?.summary ?? undefined,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function ProjectPage({ params }: PageProps) {
|
||||||
|
const { id } = await params;
|
||||||
|
|
||||||
|
const [project, connections] = await Promise.all([
|
||||||
|
prisma.project.findUnique({ where: { id }, include: projectDetailInclude }),
|
||||||
|
prisma.gitConnection.findMany({ select: connectionSafeSelect, orderBy: { name: "asc" } }),
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (!project) notFound();
|
||||||
|
|
||||||
|
const detail = project as unknown as ProjectDetail;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6 pt-4">
|
||||||
|
<ProjectHeader
|
||||||
|
project={detail}
|
||||||
|
connections={connections as unknown as ConnectionSafe[]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="grid gap-6 lg:grid-cols-12">
|
||||||
|
<div className="space-y-6 lg:col-span-5">
|
||||||
|
<section className="glass p-5">
|
||||||
|
<h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-slate-300">
|
||||||
|
<FileText className="h-4 w-4 text-cyan-300" />
|
||||||
|
Beschreibung
|
||||||
|
</h2>
|
||||||
|
{detail.description ? (
|
||||||
|
<p className="mt-3 whitespace-pre-wrap break-words text-sm leading-relaxed text-slate-300">
|
||||||
|
{detail.description}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<p className="mt-3 text-sm text-slate-500">
|
||||||
|
Keine Beschreibung hinterlegt. Ueber „Bearbeiten“ kannst du die Idee ausformulieren.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<NotesPanel projectId={detail.id} notes={detail.notes} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="lg:col-span-7">
|
||||||
|
<GitPanel project={detail} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,447 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import {
|
||||||
|
CheckCircle2,
|
||||||
|
ExternalLink,
|
||||||
|
KeyRound,
|
||||||
|
Loader2,
|
||||||
|
Pencil,
|
||||||
|
Plug,
|
||||||
|
Plus,
|
||||||
|
Trash2,
|
||||||
|
XCircle,
|
||||||
|
Zap,
|
||||||
|
} from "lucide-react";
|
||||||
|
import type { GitProvider } from "@prisma/client";
|
||||||
|
import { Modal } from "@/components/ui/Modal";
|
||||||
|
import { PROVIDER_META } from "@/lib/git/meta";
|
||||||
|
import { cn, formatRelative } from "@/lib/utils";
|
||||||
|
import type { ConnectionWithCount } from "@/types";
|
||||||
|
|
||||||
|
const PROVIDERS: GitProvider[] = ["GITHUB", "GITLAB", "GITEA"];
|
||||||
|
|
||||||
|
interface FormState {
|
||||||
|
name: string;
|
||||||
|
provider: GitProvider;
|
||||||
|
baseUrl: string;
|
||||||
|
username: string;
|
||||||
|
token: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const EMPTY: FormState = {
|
||||||
|
name: "",
|
||||||
|
provider: "GITHUB",
|
||||||
|
baseUrl: PROVIDER_META.GITHUB.defaultBaseUrl,
|
||||||
|
username: "",
|
||||||
|
token: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
export function ConnectionsManager({ connections }: { connections: ConnectionWithCount[] }) {
|
||||||
|
const router = useRouter();
|
||||||
|
const [dialogOpen, setDialogOpen] = useState(false);
|
||||||
|
const [editing, setEditing] = useState<ConnectionWithCount | null>(null);
|
||||||
|
const [form, setForm] = useState<FormState>(EMPTY);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [busyId, setBusyId] = useState<string | null>(null);
|
||||||
|
const [checkResult, setCheckResult] = useState<Record<string, { ok: boolean; message: string }>>({});
|
||||||
|
|
||||||
|
function openCreate() {
|
||||||
|
setEditing(null);
|
||||||
|
setForm(EMPTY);
|
||||||
|
setError(null);
|
||||||
|
setDialogOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEdit(connection: ConnectionWithCount) {
|
||||||
|
setEditing(connection);
|
||||||
|
setForm({
|
||||||
|
name: connection.name,
|
||||||
|
provider: connection.provider,
|
||||||
|
baseUrl: connection.baseUrl,
|
||||||
|
username: connection.username ?? "",
|
||||||
|
token: "",
|
||||||
|
});
|
||||||
|
setError(null);
|
||||||
|
setDialogOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function update<K extends keyof FormState>(key: K, value: FormState[K]) {
|
||||||
|
setForm((previous) => {
|
||||||
|
if (key === "provider") {
|
||||||
|
const provider = value as GitProvider;
|
||||||
|
const wasDefault = Object.values(PROVIDER_META).some(
|
||||||
|
(meta) => meta.defaultBaseUrl === previous.baseUrl,
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
...previous,
|
||||||
|
provider,
|
||||||
|
baseUrl: wasDefault || !previous.baseUrl
|
||||||
|
? PROVIDER_META[provider].defaultBaseUrl
|
||||||
|
: previous.baseUrl,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return { ...previous, [key]: value };
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function save(event: React.FormEvent) {
|
||||||
|
event.preventDefault();
|
||||||
|
setSaving(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
// Beim Bearbeiten bedeutet ein leeres Token-Feld "unveraendert lassen".
|
||||||
|
const body: Record<string, unknown> = {
|
||||||
|
name: form.name,
|
||||||
|
provider: form.provider,
|
||||||
|
baseUrl: form.baseUrl,
|
||||||
|
username: form.username,
|
||||||
|
};
|
||||||
|
if (!editing || form.token.trim()) body.token = form.token;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
editing ? `/api/connections/${editing.id}` : "/api/connections",
|
||||||
|
{
|
||||||
|
method: editing ? "PATCH" : "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
const payload = await response.json().catch(() => ({}));
|
||||||
|
if (!response.ok) throw new Error(payload.error ?? "Speichern fehlgeschlagen.");
|
||||||
|
setDialogOpen(false);
|
||||||
|
router.refresh();
|
||||||
|
} catch (caught) {
|
||||||
|
setError(caught instanceof Error ? caught.message : String(caught));
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function check(connection: ConnectionWithCount) {
|
||||||
|
setBusyId(connection.id);
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/connections/${connection.id}/check`, { method: "POST" });
|
||||||
|
const payload = await response.json().catch(() => ({}));
|
||||||
|
setCheckResult((previous) => ({
|
||||||
|
...previous,
|
||||||
|
[connection.id]: {
|
||||||
|
ok: Boolean(payload.ok),
|
||||||
|
message: payload.message ?? payload.error ?? "Unbekannte Antwort.",
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
router.refresh();
|
||||||
|
} finally {
|
||||||
|
setBusyId(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function remove(connection: ConnectionWithCount) {
|
||||||
|
const linked = connection._count?.projects ?? 0;
|
||||||
|
const hint = linked > 0 ? `\n\n${linked} Projekt(e) verlieren die Verknuepfung.` : "";
|
||||||
|
if (!window.confirm(`Verbindung „${connection.name}“ loeschen?${hint}`)) return;
|
||||||
|
setBusyId(connection.id);
|
||||||
|
await fetch(`/api/connections/${connection.id}`, { method: "DELETE" }).catch(() => undefined);
|
||||||
|
setBusyId(null);
|
||||||
|
router.refresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-5">
|
||||||
|
<div className="flex flex-wrap items-end justify-between gap-3">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-semibold tracking-tight text-white">Git-Verbindungen</h1>
|
||||||
|
<p className="mt-1 max-w-2xl text-sm text-slate-400">
|
||||||
|
Pro Git-System eine Verbindung mit Basis-URL und Access Token. Tokens werden
|
||||||
|
AES-256-GCM-verschluesselt in der Datenbank abgelegt und verlassen den Server nie.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button type="button" className="btn btn-primary" onClick={openCreate}>
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Verbindung hinzufuegen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{connections.length === 0 ? (
|
||||||
|
<div className="glass fade-up flex flex-col items-center gap-4 px-6 py-16 text-center">
|
||||||
|
<span className="grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-cyan-500/25 to-violet-500/20 text-cyan-200">
|
||||||
|
<Plug className="h-6 w-6" />
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold text-white">Noch keine Verbindung</h2>
|
||||||
|
<p className="mx-auto mt-1 max-w-md text-sm text-slate-400">
|
||||||
|
Verbinde GitHub, GitLab oder deine eigene Gitea-Instanz, um Branches, Tags,
|
||||||
|
Commits und Releases direkt im Dashboard zu sehen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button type="button" className="btn btn-primary" onClick={openCreate}>
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Erste Verbindung anlegen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||||
|
{connections.map((connection, index) => {
|
||||||
|
const meta = PROVIDER_META[connection.provider];
|
||||||
|
const result = checkResult[connection.id];
|
||||||
|
const ok = result ? result.ok : connection.lastCheckOk;
|
||||||
|
const message = result?.message ?? connection.lastCheckMessage;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<article
|
||||||
|
key={connection.id}
|
||||||
|
className="glass card-glow fade-up relative p-5"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--accent-from": "#22d3ee",
|
||||||
|
"--accent-to": "#8b5cf6",
|
||||||
|
animationDelay: `${index * 50}ms`,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div className="min-w-0">
|
||||||
|
<h2 className="truncate text-base font-semibold text-white">
|
||||||
|
{connection.name}
|
||||||
|
</h2>
|
||||||
|
<p className="mt-0.5 text-xs text-slate-500">{meta.label}</p>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-[11px] ring-1 ring-inset",
|
||||||
|
ok === true
|
||||||
|
? "bg-emerald-500/12 text-emerald-200 ring-emerald-400/30"
|
||||||
|
: ok === false
|
||||||
|
? "bg-rose-500/12 text-rose-200 ring-rose-400/30"
|
||||||
|
: "bg-slate-500/12 text-slate-300 ring-slate-400/25",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{ok === true ? (
|
||||||
|
<CheckCircle2 className="h-3 w-3" />
|
||||||
|
) : ok === false ? (
|
||||||
|
<XCircle className="h-3 w-3" />
|
||||||
|
) : (
|
||||||
|
<Zap className="h-3 w-3" />
|
||||||
|
)}
|
||||||
|
{ok === true ? "verbunden" : ok === false ? "Fehler" : "ungeprueft"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<dl className="mt-4 space-y-2 text-xs">
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<dt className="text-slate-500">Basis-URL</dt>
|
||||||
|
<dd className="min-w-0 truncate text-right font-mono text-slate-300">
|
||||||
|
{connection.baseUrl}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<dt className="text-slate-500">Token</dt>
|
||||||
|
<dd className="font-mono text-slate-300">
|
||||||
|
{connection.tokenHint ? (
|
||||||
|
<span className="inline-flex items-center gap-1.5">
|
||||||
|
<KeyRound className="h-3 w-3 text-amber-300/70" />
|
||||||
|
{connection.tokenHint}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="text-slate-600">keines</span>
|
||||||
|
)}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
{connection.username ? (
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<dt className="text-slate-500">Benutzer</dt>
|
||||||
|
<dd className="truncate text-slate-300">{connection.username}</dd>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<dt className="text-slate-500">Projekte</dt>
|
||||||
|
<dd className="tabular-nums text-slate-300">
|
||||||
|
{connection._count?.projects ?? 0}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
{connection.lastCheckedAt ? (
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<dt className="text-slate-500">Geprueft</dt>
|
||||||
|
<dd className="text-slate-300" suppressHydrationWarning>
|
||||||
|
{formatRelative(connection.lastCheckedAt)}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
{message ? (
|
||||||
|
<p
|
||||||
|
className={cn(
|
||||||
|
"mt-3 rounded-lg px-2.5 py-1.5 text-[11px] leading-snug",
|
||||||
|
ok ? "bg-emerald-500/8 text-emerald-200/90" : "bg-rose-500/8 text-rose-200/90",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{message}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div className="mt-4 flex flex-wrap items-center gap-2 border-t border-white/6 pt-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-ghost px-2.5 py-1.5 text-xs"
|
||||||
|
onClick={() => check(connection)}
|
||||||
|
disabled={busyId === connection.id}
|
||||||
|
>
|
||||||
|
{busyId === connection.id ? (
|
||||||
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Zap className="h-3.5 w-3.5" />
|
||||||
|
)}
|
||||||
|
Testen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-ghost px-2.5 py-1.5 text-xs"
|
||||||
|
onClick={() => openEdit(connection)}
|
||||||
|
>
|
||||||
|
<Pencil className="h-3.5 w-3.5" />
|
||||||
|
Bearbeiten
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-danger ml-auto px-2.5 py-1.5 text-xs"
|
||||||
|
onClick={() => remove(connection)}
|
||||||
|
disabled={busyId === connection.id}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-3.5 w-3.5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
open={dialogOpen}
|
||||||
|
onClose={() => setDialogOpen(false)}
|
||||||
|
title={editing ? "Verbindung bearbeiten" : "Neue Git-Verbindung"}
|
||||||
|
description="Der Token wird verschluesselt gespeichert und nur serverseitig entschluesselt."
|
||||||
|
>
|
||||||
|
<form onSubmit={save} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<span className="field-label">Git-System</span>
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
{PROVIDERS.map((provider) => (
|
||||||
|
<button
|
||||||
|
key={provider}
|
||||||
|
type="button"
|
||||||
|
onClick={() => update("provider", provider)}
|
||||||
|
className={cn(
|
||||||
|
"rounded-xl border px-3 py-2.5 text-sm transition-all",
|
||||||
|
form.provider === provider
|
||||||
|
? "border-violet-400/60 bg-violet-500/12 text-white shadow-[0_0_24px_-10px_rgba(139,92,246,0.9)]"
|
||||||
|
: "border-white/9 text-slate-400 hover:border-white/20 hover:text-slate-200",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{PROVIDER_META[provider].label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="field-label" htmlFor="connection-name">
|
||||||
|
Anzeigename *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="connection-name"
|
||||||
|
className="field"
|
||||||
|
value={form.name}
|
||||||
|
onChange={(event) => update("name", event.target.value)}
|
||||||
|
placeholder="z. B. Firmen-Gitea"
|
||||||
|
required
|
||||||
|
maxLength={80}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="field-label" htmlFor="connection-url">
|
||||||
|
Basis-URL *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="connection-url"
|
||||||
|
className="field font-mono text-xs"
|
||||||
|
value={form.baseUrl}
|
||||||
|
onChange={(event) => update("baseUrl", event.target.value)}
|
||||||
|
placeholder="https://git.example.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-[11px] text-slate-500">
|
||||||
|
Ohne /api – Nebula haengt den API-Pfad selbst an.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="field-label" htmlFor="connection-token">
|
||||||
|
Access Token {editing ? "(leer lassen = unveraendert)" : ""}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="connection-token"
|
||||||
|
className="field font-mono text-xs"
|
||||||
|
type="password"
|
||||||
|
value={form.token}
|
||||||
|
onChange={(event) => update("token", event.target.value)}
|
||||||
|
placeholder={editing ? "••••••••" : "ghp_… / glpat-… / gitea token"}
|
||||||
|
autoComplete="off"
|
||||||
|
/>
|
||||||
|
<p className="mt-1 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-500">
|
||||||
|
{PROVIDER_META[form.provider].tokenHelp}
|
||||||
|
<a
|
||||||
|
href={PROVIDER_META[form.provider].docsUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
className="inline-flex items-center gap-1 text-violet-300 hover:text-violet-200"
|
||||||
|
>
|
||||||
|
Doku
|
||||||
|
<ExternalLink className="h-3 w-3" />
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="field-label" htmlFor="connection-username">
|
||||||
|
Benutzername (optional)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="connection-username"
|
||||||
|
className="field"
|
||||||
|
value={form.username}
|
||||||
|
onChange={(event) => update("username", event.target.value)}
|
||||||
|
placeholder="wird beim Test automatisch gefuellt"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error ? (
|
||||||
|
<p className="rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-200">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div className="flex justify-end gap-2 pt-1">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-ghost"
|
||||||
|
onClick={() => setDialogOpen(false)}
|
||||||
|
disabled={saving}
|
||||||
|
>
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
<button type="submit" className="btn btn-primary" disabled={saving}>
|
||||||
|
{saving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
|
||||||
|
Speichern
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,476 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import {
|
||||||
|
AlertTriangle,
|
||||||
|
ExternalLink,
|
||||||
|
GitBranch,
|
||||||
|
GitCommitHorizontal,
|
||||||
|
GitMerge,
|
||||||
|
GitPullRequest,
|
||||||
|
HardDrive,
|
||||||
|
Loader2,
|
||||||
|
Lock,
|
||||||
|
Package,
|
||||||
|
RefreshCw,
|
||||||
|
ShieldCheck,
|
||||||
|
Star,
|
||||||
|
Tag,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { asArray, asRecord } from "@/types";
|
||||||
|
import type {
|
||||||
|
BranchInfo,
|
||||||
|
CommitInfo,
|
||||||
|
ProjectDetail,
|
||||||
|
ReleaseInfo,
|
||||||
|
TagInfo,
|
||||||
|
} from "@/types";
|
||||||
|
import { cn, formatDateTime, formatNumber, formatRelative } from "@/lib/utils";
|
||||||
|
|
||||||
|
const TABS = [
|
||||||
|
{ key: "branches", label: "Branches", icon: GitBranch },
|
||||||
|
{ key: "tags", label: "Tags", icon: Tag },
|
||||||
|
{ key: "commits", label: "Commits", icon: GitCommitHorizontal },
|
||||||
|
{ key: "releases", label: "Releases", icon: Package },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
type TabKey = (typeof TABS)[number]["key"];
|
||||||
|
|
||||||
|
export function GitPanel({ project }: { project: ProjectDetail }) {
|
||||||
|
const router = useRouter();
|
||||||
|
const [tab, setTab] = useState<TabKey>("branches");
|
||||||
|
const [syncing, setSyncing] = useState(false);
|
||||||
|
const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null);
|
||||||
|
|
||||||
|
const snapshot = project.snapshot;
|
||||||
|
const branches = asArray<BranchInfo>(snapshot?.branches);
|
||||||
|
const tags = asArray<TagInfo>(snapshot?.tags);
|
||||||
|
const commits = asArray<CommitInfo>(snapshot?.commits);
|
||||||
|
const releases = asArray<ReleaseInfo>(snapshot?.releases);
|
||||||
|
const languages = asRecord(snapshot?.languages);
|
||||||
|
|
||||||
|
const hasRepo = Boolean(project.repoOwner && project.repoName) || Boolean(project.repoUrl);
|
||||||
|
|
||||||
|
async function sync() {
|
||||||
|
setSyncing(true);
|
||||||
|
setMessage(null);
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/projects/${project.id}/sync`, { method: "POST" });
|
||||||
|
const payload = await response.json().catch(() => ({}));
|
||||||
|
setMessage({ ok: response.ok, text: payload.message ?? "Unbekannte Antwort." });
|
||||||
|
router.refresh();
|
||||||
|
} catch (caught) {
|
||||||
|
setMessage({
|
||||||
|
ok: false,
|
||||||
|
text: caught instanceof Error ? caught.message : String(caught),
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setSyncing(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!hasRepo) {
|
||||||
|
return (
|
||||||
|
<div className="glass px-5 py-10 text-center">
|
||||||
|
<GitBranch className="mx-auto h-8 w-8 text-slate-600" />
|
||||||
|
<h3 className="mt-3 text-sm font-semibold text-slate-200">Kein Repository verknuepft</h3>
|
||||||
|
<p className="mx-auto mt-1 max-w-sm text-sm text-slate-500">
|
||||||
|
Hinterlege im Projekt eine Repository-URL und waehle eine Git-Verbindung, um
|
||||||
|
Branches, Tags, Commits und Releases hier zu sehen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const languageTotal = Object.values(languages).reduce((sum, value) => sum + value, 0);
|
||||||
|
const topLanguages = Object.entries(languages)
|
||||||
|
.sort((a, b) => b[1] - a[1])
|
||||||
|
.slice(0, 5);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Kopf mit Sync */}
|
||||||
|
<div className="glass flex flex-wrap items-center justify-between gap-3 p-4">
|
||||||
|
<div className="min-w-0">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<h2 className="truncate font-mono text-sm text-slate-100">
|
||||||
|
{snapshot?.fullName ?? `${project.repoOwner}/${project.repoName}`}
|
||||||
|
</h2>
|
||||||
|
{snapshot?.visibility ? (
|
||||||
|
<span className="inline-flex items-center gap-1 rounded-md bg-white/6 px-1.5 py-0.5 text-[10px] uppercase tracking-wider text-slate-400">
|
||||||
|
{snapshot.visibility === "private" ? (
|
||||||
|
<Lock className="h-2.5 w-2.5" />
|
||||||
|
) : (
|
||||||
|
<ShieldCheck className="h-2.5 w-2.5" />
|
||||||
|
)}
|
||||||
|
{snapshot.visibility}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
{snapshot?.htmlUrl ? (
|
||||||
|
<a
|
||||||
|
href={snapshot.htmlUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
className="text-slate-500 transition-colors hover:text-violet-300"
|
||||||
|
aria-label="Repository oeffnen"
|
||||||
|
>
|
||||||
|
<ExternalLink className="h-3.5 w-3.5" />
|
||||||
|
</a>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<p className="mt-1 text-xs text-slate-500" suppressHydrationWarning>
|
||||||
|
{project.lastSyncedAt
|
||||||
|
? `Zuletzt synchronisiert ${formatRelative(project.lastSyncedAt)} · ${formatDateTime(project.lastSyncedAt)}`
|
||||||
|
: "Noch nie synchronisiert."}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" className="btn btn-primary" onClick={sync} disabled={syncing}>
|
||||||
|
{syncing ? (
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<RefreshCw className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
Jetzt synchronisieren
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{message ? (
|
||||||
|
<p
|
||||||
|
className={cn(
|
||||||
|
"rounded-xl border px-3 py-2 text-sm",
|
||||||
|
message.ok
|
||||||
|
? "border-emerald-500/30 bg-emerald-500/10 text-emerald-200"
|
||||||
|
: "border-rose-500/30 bg-rose-500/10 text-rose-200",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{message.text}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{project.syncError && !message ? (
|
||||||
|
<p className="flex items-start gap-2 rounded-xl border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-200">
|
||||||
|
<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
|
||||||
|
<span>{project.syncError}</span>
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{snapshot ? (
|
||||||
|
<>
|
||||||
|
{/* Kennzahlen */}
|
||||||
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
|
||||||
|
<Metric icon={Star} label="Stars" value={formatNumber(snapshot.stars)} />
|
||||||
|
<Metric icon={GitMerge} label="Forks" value={formatNumber(snapshot.forks)} />
|
||||||
|
<Metric
|
||||||
|
icon={GitPullRequest}
|
||||||
|
label="Offene PRs/MRs"
|
||||||
|
value={formatNumber(snapshot.openPullRequests)}
|
||||||
|
/>
|
||||||
|
<Metric
|
||||||
|
icon={AlertTriangle}
|
||||||
|
label="Offene Issues"
|
||||||
|
value={formatNumber(snapshot.openIssues)}
|
||||||
|
/>
|
||||||
|
<Metric icon={GitBranch} label="Branches" value={formatNumber(snapshot.branchCount)} />
|
||||||
|
<Metric
|
||||||
|
icon={HardDrive}
|
||||||
|
label="Groesse"
|
||||||
|
value={snapshot.sizeKb > 1024 ? `${Math.round(snapshot.sizeKb / 1024)} MB` : `${snapshot.sizeKb} KB`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Letzter Commit + Version */}
|
||||||
|
<div className="grid gap-3 lg:grid-cols-2">
|
||||||
|
<div className="glass p-4">
|
||||||
|
<p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500">
|
||||||
|
Letzter Commit
|
||||||
|
</p>
|
||||||
|
{snapshot.lastCommitSha ? (
|
||||||
|
<>
|
||||||
|
<p className="mt-2 line-clamp-2 text-sm text-slate-200">
|
||||||
|
{snapshot.lastCommitMessage}
|
||||||
|
</p>
|
||||||
|
<p className="mt-2 flex flex-wrap items-center gap-2 text-xs text-slate-500">
|
||||||
|
<span className="rounded bg-white/6 px-1.5 py-0.5 font-mono text-[11px] text-violet-200">
|
||||||
|
{snapshot.lastCommitSha.slice(0, 7)}
|
||||||
|
</span>
|
||||||
|
<span>{snapshot.lastCommitAuthor ?? "unbekannt"}</span>
|
||||||
|
<span suppressHydrationWarning>{formatRelative(snapshot.lastCommitAt)}</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<p className="mt-2 text-sm text-slate-500">Keine Commit-Daten.</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="glass p-4">
|
||||||
|
<p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500">
|
||||||
|
Aktuelle Version
|
||||||
|
</p>
|
||||||
|
<div className="mt-2 flex flex-wrap items-baseline gap-3">
|
||||||
|
<span className="font-mono text-2xl text-white">
|
||||||
|
{snapshot.latestTag ?? snapshot.latestRelease ?? "–"}
|
||||||
|
</span>
|
||||||
|
{snapshot.latestRelease && snapshot.latestRelease !== snapshot.latestTag ? (
|
||||||
|
<span className="text-sm text-slate-400">{snapshot.latestRelease}</span>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<p className="mt-1 text-xs text-slate-500">
|
||||||
|
{snapshot.latestReleaseAt
|
||||||
|
? `Release vom ${formatDateTime(snapshot.latestReleaseAt)}`
|
||||||
|
: `${snapshot.tagCount} Tag${snapshot.tagCount === 1 ? "" : "s"} im Repository`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sprachen */}
|
||||||
|
{languageTotal > 0 ? (
|
||||||
|
<div className="glass p-4">
|
||||||
|
<p className="mb-2.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500">
|
||||||
|
Sprachen
|
||||||
|
</p>
|
||||||
|
<div className="flex h-2 overflow-hidden rounded-full bg-white/6">
|
||||||
|
{topLanguages.map(([name, bytes], index) => (
|
||||||
|
<span
|
||||||
|
key={name}
|
||||||
|
title={`${name} – ${Math.round((bytes / languageTotal) * 100)}%`}
|
||||||
|
style={{
|
||||||
|
width: `${(bytes / languageTotal) * 100}%`,
|
||||||
|
backgroundColor: LANGUAGE_COLORS[index % LANGUAGE_COLORS.length],
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="mt-2.5 flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-slate-400">
|
||||||
|
{topLanguages.map(([name, bytes], index) => (
|
||||||
|
<span key={name} className="inline-flex items-center gap-1.5">
|
||||||
|
<span
|
||||||
|
className="h-2 w-2 rounded-full"
|
||||||
|
style={{ backgroundColor: LANGUAGE_COLORS[index % LANGUAGE_COLORS.length] }}
|
||||||
|
/>
|
||||||
|
{name}
|
||||||
|
<span className="text-slate-600">
|
||||||
|
{Math.round((bytes / languageTotal) * 100)}%
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{/* Listen */}
|
||||||
|
<div className="glass overflow-hidden">
|
||||||
|
<div className="flex flex-wrap gap-1 border-b border-white/6 p-2">
|
||||||
|
{TABS.map(({ key, label, icon: Icon }) => {
|
||||||
|
const count =
|
||||||
|
key === "branches"
|
||||||
|
? branches.length
|
||||||
|
: key === "tags"
|
||||||
|
? tags.length
|
||||||
|
: key === "commits"
|
||||||
|
? commits.length
|
||||||
|
: releases.length;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={key}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setTab(key)}
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-2 rounded-lg px-3 py-2 text-xs transition-colors",
|
||||||
|
tab === key
|
||||||
|
? "bg-white/9 text-white"
|
||||||
|
: "text-slate-400 hover:bg-white/5 hover:text-slate-200",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon className="h-3.5 w-3.5" />
|
||||||
|
{label}
|
||||||
|
<span className="tabular-nums text-slate-600">{count}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-h-[26rem] overflow-y-auto">
|
||||||
|
{tab === "branches" ? <BranchList branches={branches} /> : null}
|
||||||
|
{tab === "tags" ? <TagList tags={tags} /> : null}
|
||||||
|
{tab === "commits" ? <CommitList commits={commits} /> : null}
|
||||||
|
{tab === "releases" ? <ReleaseList releases={releases} /> : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="glass px-5 py-10 text-center text-sm text-slate-500">
|
||||||
|
Noch keine Daten geladen. Mit „Jetzt synchronisieren“ den ersten Snapshot holen.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const LANGUAGE_COLORS = ["#a78bfa", "#22d3ee", "#34d399", "#fbbf24", "#f472b6"];
|
||||||
|
|
||||||
|
function Metric({
|
||||||
|
icon: Icon,
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
}: {
|
||||||
|
icon: typeof Star;
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="glass-soft px-3 py-2.5">
|
||||||
|
<p className="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-slate-500">
|
||||||
|
<Icon className="h-3 w-3" />
|
||||||
|
{label}
|
||||||
|
</p>
|
||||||
|
<p className="mt-1 text-lg font-semibold tabular-nums text-slate-100">{value}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Row({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between gap-3 border-b border-white/4 px-4 py-2.5 last:border-b-0 hover:bg-white/3">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Empty({ text }: { text: string }) {
|
||||||
|
return <p className="px-4 py-8 text-center text-xs text-slate-500">{text}</p>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function BranchList({ branches }: { branches: BranchInfo[] }) {
|
||||||
|
if (branches.length === 0) return <Empty text="Keine Branches gefunden." />;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{branches.map((branch) => (
|
||||||
|
<Row key={branch.name}>
|
||||||
|
<div className="flex min-w-0 items-center gap-2">
|
||||||
|
<GitBranch className="h-3.5 w-3.5 shrink-0 text-slate-600" />
|
||||||
|
<span className="truncate font-mono text-xs text-slate-200">{branch.name}</span>
|
||||||
|
{branch.isDefault ? (
|
||||||
|
<span className="shrink-0 rounded bg-violet-500/15 px-1.5 py-0.5 text-[10px] text-violet-200">
|
||||||
|
default
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
{branch.protected ? (
|
||||||
|
<Lock className="h-3 w-3 shrink-0 text-amber-300/70" />
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<div className="flex shrink-0 items-center gap-3 text-[11px] text-slate-500">
|
||||||
|
{branch.lastCommitAt ? (
|
||||||
|
<span suppressHydrationWarning>{formatRelative(branch.lastCommitAt)}</span>
|
||||||
|
) : null}
|
||||||
|
{branch.sha ? (
|
||||||
|
<span className="font-mono text-slate-600">{branch.sha.slice(0, 7)}</span>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</Row>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TagList({ tags }: { tags: TagInfo[] }) {
|
||||||
|
if (tags.length === 0) return <Empty text="Keine Tags vorhanden." />;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{tags.map((tag) => (
|
||||||
|
<Row key={tag.name}>
|
||||||
|
<div className="flex min-w-0 items-center gap-2">
|
||||||
|
<Tag className="h-3.5 w-3.5 shrink-0 text-slate-600" />
|
||||||
|
<span className="truncate font-mono text-xs text-slate-200">{tag.name}</span>
|
||||||
|
{tag.message ? (
|
||||||
|
<span className="truncate text-[11px] text-slate-500">{tag.message}</span>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<div className="flex shrink-0 items-center gap-3 text-[11px] text-slate-500">
|
||||||
|
{tag.date ? <span suppressHydrationWarning>{formatRelative(tag.date)}</span> : null}
|
||||||
|
{tag.sha ? (
|
||||||
|
<span className="font-mono text-slate-600">{tag.sha.slice(0, 7)}</span>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</Row>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommitList({ commits }: { commits: CommitInfo[] }) {
|
||||||
|
if (commits.length === 0) return <Empty text="Keine Commits geladen." />;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{commits.map((commit) => (
|
||||||
|
<Row key={commit.sha}>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<p className="truncate text-xs text-slate-200">{commit.message}</p>
|
||||||
|
<p className="mt-0.5 flex items-center gap-2 text-[11px] text-slate-500">
|
||||||
|
<span className="font-mono text-violet-300/80">{commit.shortSha}</span>
|
||||||
|
<span>{commit.author ?? "unbekannt"}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex shrink-0 items-center gap-2 text-[11px] text-slate-500">
|
||||||
|
<span suppressHydrationWarning>{formatRelative(commit.date)}</span>
|
||||||
|
{commit.url ? (
|
||||||
|
<a
|
||||||
|
href={commit.url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
className="text-slate-600 transition-colors hover:text-violet-300"
|
||||||
|
aria-label="Commit oeffnen"
|
||||||
|
>
|
||||||
|
<ExternalLink className="h-3 w-3" />
|
||||||
|
</a>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</Row>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ReleaseList({ releases }: { releases: ReleaseInfo[] }) {
|
||||||
|
if (releases.length === 0) return <Empty text="Keine Releases veroeffentlicht." />;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{releases.map((release) => (
|
||||||
|
<Row key={`${release.tag}-${release.name}`}>
|
||||||
|
<div className="flex min-w-0 items-center gap-2">
|
||||||
|
<Package className="h-3.5 w-3.5 shrink-0 text-slate-600" />
|
||||||
|
<span className="truncate text-xs text-slate-200">{release.name}</span>
|
||||||
|
<span className="shrink-0 rounded bg-white/6 px-1.5 py-0.5 font-mono text-[10px] text-slate-400">
|
||||||
|
{release.tag}
|
||||||
|
</span>
|
||||||
|
{release.prerelease ? (
|
||||||
|
<span className="shrink-0 rounded bg-amber-500/15 px-1.5 py-0.5 text-[10px] text-amber-200">
|
||||||
|
pre
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
{release.draft ? (
|
||||||
|
<span className="shrink-0 rounded bg-slate-500/15 px-1.5 py-0.5 text-[10px] text-slate-300">
|
||||||
|
draft
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<div className="flex shrink-0 items-center gap-2 text-[11px] text-slate-500">
|
||||||
|
<span suppressHydrationWarning>{formatRelative(release.publishedAt)}</span>
|
||||||
|
{release.url ? (
|
||||||
|
<a
|
||||||
|
href={release.url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
className="text-slate-600 transition-colors hover:text-violet-300"
|
||||||
|
aria-label="Release oeffnen"
|
||||||
|
>
|
||||||
|
<ExternalLink className="h-3 w-3" />
|
||||||
|
</a>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</Row>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,214 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { Loader2, NotebookPen, Pencil, Pin, PinOff, Plus, Trash2, X } from "lucide-react";
|
||||||
|
import type { Note } from "@prisma/client";
|
||||||
|
import { cn, formatDateTime, formatRelative } from "@/lib/utils";
|
||||||
|
|
||||||
|
/** Nur als "bearbeitet" zaehlen, wenn wirklich spaeter geaendert wurde. */
|
||||||
|
function wasEdited(note: Note): boolean {
|
||||||
|
const created = new Date(note.createdAt).getTime();
|
||||||
|
const updated = new Date(note.updatedAt).getTime();
|
||||||
|
return updated - created > 1500;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function NotesPanel({ projectId, notes }: { projectId: string; notes: Note[] }) {
|
||||||
|
const router = useRouter();
|
||||||
|
const [composerOpen, setComposerOpen] = useState(false);
|
||||||
|
const [title, setTitle] = useState("");
|
||||||
|
const [content, setContent] = useState("");
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [editingId, setEditingId] = useState<string | null>(null);
|
||||||
|
const [busyId, setBusyId] = useState<string | null>(null);
|
||||||
|
|
||||||
|
function resetComposer() {
|
||||||
|
setTitle("");
|
||||||
|
setContent("");
|
||||||
|
setEditingId(null);
|
||||||
|
setComposerOpen(false);
|
||||||
|
setError(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function save(event: React.FormEvent) {
|
||||||
|
event.preventDefault();
|
||||||
|
if (!content.trim()) return;
|
||||||
|
setSaving(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
editingId ? `/api/notes/${editingId}` : `/api/projects/${projectId}/notes`,
|
||||||
|
{
|
||||||
|
method: editingId ? "PATCH" : "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ title, content }),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
if (!response.ok) {
|
||||||
|
const payload = await response.json().catch(() => ({}));
|
||||||
|
throw new Error(payload.error ?? "Speichern fehlgeschlagen.");
|
||||||
|
}
|
||||||
|
resetComposer();
|
||||||
|
router.refresh();
|
||||||
|
} catch (caught) {
|
||||||
|
setError(caught instanceof Error ? caught.message : String(caught));
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function togglePin(note: Note) {
|
||||||
|
setBusyId(note.id);
|
||||||
|
await fetch(`/api/notes/${note.id}`, {
|
||||||
|
method: "PATCH",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ pinned: !note.pinned }),
|
||||||
|
}).catch(() => undefined);
|
||||||
|
setBusyId(null);
|
||||||
|
router.refresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function remove(note: Note) {
|
||||||
|
if (!window.confirm("Notiz wirklich loeschen?")) return;
|
||||||
|
setBusyId(note.id);
|
||||||
|
await fetch(`/api/notes/${note.id}`, { method: "DELETE" }).catch(() => undefined);
|
||||||
|
setBusyId(null);
|
||||||
|
router.refresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
function startEdit(note: Note) {
|
||||||
|
setEditingId(note.id);
|
||||||
|
setTitle(note.title ?? "");
|
||||||
|
setContent(note.content);
|
||||||
|
setComposerOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between gap-3">
|
||||||
|
<h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-slate-300">
|
||||||
|
<NotebookPen className="h-4 w-4 text-violet-300" />
|
||||||
|
Notizen
|
||||||
|
<span className="rounded-full bg-white/6 px-2 py-0.5 text-[11px] tabular-nums text-slate-400">
|
||||||
|
{notes.length}
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
{!composerOpen ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-ghost px-3 py-1.5 text-xs"
|
||||||
|
onClick={() => setComposerOpen(true)}
|
||||||
|
>
|
||||||
|
<Plus className="h-3.5 w-3.5" />
|
||||||
|
Notiz
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{composerOpen ? (
|
||||||
|
<form onSubmit={save} className="glass fade-up space-y-3 p-4">
|
||||||
|
<input
|
||||||
|
className="field"
|
||||||
|
placeholder="Titel (optional)"
|
||||||
|
value={title}
|
||||||
|
onChange={(event) => setTitle(event.target.value)}
|
||||||
|
maxLength={160}
|
||||||
|
/>
|
||||||
|
<textarea
|
||||||
|
className="field min-h-32 resize-y font-mono text-[13px] leading-relaxed"
|
||||||
|
placeholder="Gedanken, Todos, Snippets… Zeilenumbrueche bleiben erhalten."
|
||||||
|
value={content}
|
||||||
|
onChange={(event) => setContent(event.target.value)}
|
||||||
|
autoFocus
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
{error ? <p className="text-xs text-rose-300">{error}</p> : null}
|
||||||
|
<div className="flex justify-end gap-2">
|
||||||
|
<button type="button" className="btn btn-ghost" onClick={resetComposer}>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
<button type="submit" className="btn btn-primary" disabled={saving || !content.trim()}>
|
||||||
|
{saving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
|
||||||
|
{editingId ? "Aktualisieren" : "Speichern"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{notes.length === 0 && !composerOpen ? (
|
||||||
|
<div className="glass-soft px-4 py-10 text-center text-sm text-slate-500">
|
||||||
|
Noch keine Notizen. Halte fest, was dir zu diesem Projekt durch den Kopf geht.
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{notes.map((note) => (
|
||||||
|
<article
|
||||||
|
key={note.id}
|
||||||
|
className={cn(
|
||||||
|
"glass group relative p-4 transition-colors",
|
||||||
|
note.pinned && "ring-1 ring-inset ring-amber-400/25",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
{note.title ? (
|
||||||
|
<h3 className="flex items-center gap-2 text-sm font-semibold text-slate-100">
|
||||||
|
{note.pinned ? <Pin className="h-3.5 w-3.5 text-amber-300" /> : null}
|
||||||
|
{note.title}
|
||||||
|
</h3>
|
||||||
|
) : null}
|
||||||
|
<p className="mt-1 whitespace-pre-wrap break-words text-sm leading-relaxed text-slate-300">
|
||||||
|
{note.content}
|
||||||
|
</p>
|
||||||
|
<p className="mt-2.5 text-[11px] text-slate-600" suppressHydrationWarning>
|
||||||
|
{formatDateTime(note.createdAt)}
|
||||||
|
{wasEdited(note) ? ` · bearbeitet ${formatRelative(note.updatedAt)}` : null}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex shrink-0 items-center gap-1 sm:opacity-0 sm:transition-opacity sm:group-hover:opacity-100">
|
||||||
|
{busyId === note.id ? (
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin text-slate-500" />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => togglePin(note)}
|
||||||
|
className="rounded-lg p-1.5 text-slate-500 transition-colors hover:bg-white/8 hover:text-amber-300"
|
||||||
|
aria-label={note.pinned ? "Loesen" : "Anpinnen"}
|
||||||
|
title={note.pinned ? "Loesen" : "Anpinnen"}
|
||||||
|
>
|
||||||
|
{note.pinned ? <PinOff className="h-3.5 w-3.5" /> : <Pin className="h-3.5 w-3.5" />}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => startEdit(note)}
|
||||||
|
className="rounded-lg p-1.5 text-slate-500 transition-colors hover:bg-white/8 hover:text-violet-300"
|
||||||
|
aria-label="Bearbeiten"
|
||||||
|
title="Bearbeiten"
|
||||||
|
>
|
||||||
|
<Pencil className="h-3.5 w-3.5" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => remove(note)}
|
||||||
|
className="rounded-lg p-1.5 text-slate-500 transition-colors hover:bg-rose-500/12 hover:text-rose-300"
|
||||||
|
aria-label="Loeschen"
|
||||||
|
title="Loeschen"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-3.5 w-3.5" />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,309 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useMemo, useState } from "react";
|
||||||
|
import { LayoutGrid, ListFilter, Plus, Rows3, Search, X } from "lucide-react";
|
||||||
|
import type { ProjectStatus } from "@prisma/client";
|
||||||
|
import { ProjectCard } from "@/components/ProjectCard";
|
||||||
|
import { ProjectDialog } from "@/components/ProjectDialog";
|
||||||
|
import { STATUS_META, STATUS_ORDER } from "@/lib/status";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import type { ConnectionSafe, ProjectListItem } from "@/types";
|
||||||
|
|
||||||
|
type SortKey = "updated" | "created" | "name" | "progress" | "priority";
|
||||||
|
type ViewMode = "grid" | "grouped";
|
||||||
|
|
||||||
|
const SORT_LABEL: Record<SortKey, string> = {
|
||||||
|
updated: "Zuletzt geaendert",
|
||||||
|
created: "Neueste zuerst",
|
||||||
|
name: "Name (A–Z)",
|
||||||
|
progress: "Fortschritt",
|
||||||
|
priority: "Prioritaet",
|
||||||
|
};
|
||||||
|
|
||||||
|
export function ProjectBoard({
|
||||||
|
projects,
|
||||||
|
connections,
|
||||||
|
}: {
|
||||||
|
projects: ProjectListItem[];
|
||||||
|
connections: ConnectionSafe[];
|
||||||
|
}) {
|
||||||
|
const [query, setQuery] = useState("");
|
||||||
|
const [statusFilter, setStatusFilter] = useState<ProjectStatus[]>([]);
|
||||||
|
const [sort, setSort] = useState<SortKey>("updated");
|
||||||
|
const [view, setView] = useState<ViewMode>("grid");
|
||||||
|
const [showArchived, setShowArchived] = useState(false);
|
||||||
|
const [dialogOpen, setDialogOpen] = useState(false);
|
||||||
|
|
||||||
|
const counts = useMemo(() => {
|
||||||
|
const map = new Map<ProjectStatus, number>();
|
||||||
|
for (const project of projects) {
|
||||||
|
map.set(project.status, (map.get(project.status) ?? 0) + 1);
|
||||||
|
}
|
||||||
|
return map;
|
||||||
|
}, [projects]);
|
||||||
|
|
||||||
|
const visible = useMemo(() => {
|
||||||
|
const needle = query.toLowerCase().trim();
|
||||||
|
|
||||||
|
const filtered = projects.filter((project) => {
|
||||||
|
if (!showArchived && project.status === "ARCHIVED" && !statusFilter.includes("ARCHIVED")) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (statusFilter.length > 0 && !statusFilter.includes(project.status)) return false;
|
||||||
|
if (!needle) return true;
|
||||||
|
return (
|
||||||
|
project.name.toLowerCase().includes(needle) ||
|
||||||
|
(project.summary ?? "").toLowerCase().includes(needle) ||
|
||||||
|
(project.description ?? "").toLowerCase().includes(needle) ||
|
||||||
|
project.tags.some((tag) => tag.includes(needle)) ||
|
||||||
|
(project.snapshot?.fullName ?? "").toLowerCase().includes(needle)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const sorted = [...filtered].sort((a, b) => {
|
||||||
|
if (a.favorite !== b.favorite) return a.favorite ? -1 : 1;
|
||||||
|
switch (sort) {
|
||||||
|
case "name":
|
||||||
|
return a.name.localeCompare(b.name, "de");
|
||||||
|
case "progress":
|
||||||
|
return b.progress - a.progress;
|
||||||
|
case "priority":
|
||||||
|
return b.priority - a.priority;
|
||||||
|
case "created":
|
||||||
|
return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
|
||||||
|
default:
|
||||||
|
return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return sorted;
|
||||||
|
}, [projects, query, statusFilter, sort, showArchived]);
|
||||||
|
|
||||||
|
const grouped = useMemo(() => {
|
||||||
|
return STATUS_ORDER.map((status) => ({
|
||||||
|
status,
|
||||||
|
items: visible.filter((project) => project.status === status),
|
||||||
|
})).filter((group) => group.items.length > 0);
|
||||||
|
}, [visible]);
|
||||||
|
|
||||||
|
function toggleStatus(status: ProjectStatus) {
|
||||||
|
setStatusFilter((current) =>
|
||||||
|
current.includes(status)
|
||||||
|
? current.filter((entry) => entry !== status)
|
||||||
|
: [...current, status],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasFilters = query.length > 0 || statusFilter.length > 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="space-y-5">
|
||||||
|
{/* Steuerleiste */}
|
||||||
|
<div className="glass flex flex-col gap-4 p-4">
|
||||||
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
|
<div className="relative min-w-[220px] flex-1">
|
||||||
|
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
|
||||||
|
<input
|
||||||
|
className="field pl-9"
|
||||||
|
placeholder="Projekte, Tags oder Repos durchsuchen…"
|
||||||
|
value={query}
|
||||||
|
onChange={(event) => setQuery(event.target.value)}
|
||||||
|
/>
|
||||||
|
{query ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setQuery("")}
|
||||||
|
className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-slate-500 hover:text-white"
|
||||||
|
aria-label="Suche zuruecksetzen"
|
||||||
|
>
|
||||||
|
<X className="h-3.5 w-3.5" />
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<label className="sr-only" htmlFor="sort">
|
||||||
|
Sortierung
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="sort"
|
||||||
|
className="field w-auto min-w-[11rem]"
|
||||||
|
value={sort}
|
||||||
|
onChange={(event) => setSort(event.target.value as SortKey)}
|
||||||
|
>
|
||||||
|
{(Object.keys(SORT_LABEL) as SortKey[]).map((key) => (
|
||||||
|
<option key={key} value={key}>
|
||||||
|
{SORT_LABEL[key]}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<div className="flex overflow-hidden rounded-xl border border-white/9">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setView("grid")}
|
||||||
|
className={cn(
|
||||||
|
"p-2 transition-colors",
|
||||||
|
view === "grid" ? "bg-white/10 text-white" : "text-slate-500 hover:text-white",
|
||||||
|
)}
|
||||||
|
aria-label="Rasteransicht"
|
||||||
|
title="Rasteransicht"
|
||||||
|
>
|
||||||
|
<LayoutGrid className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setView("grouped")}
|
||||||
|
className={cn(
|
||||||
|
"p-2 transition-colors",
|
||||||
|
view === "grouped" ? "bg-white/10 text-white" : "text-slate-500 hover:text-white",
|
||||||
|
)}
|
||||||
|
aria-label="Nach Status gruppiert"
|
||||||
|
title="Nach Status gruppiert"
|
||||||
|
>
|
||||||
|
<Rows3 className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" className="btn btn-primary" onClick={() => setDialogOpen(true)}>
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
<span className="hidden sm:inline">Neues Projekt</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<span className="mr-1 inline-flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-slate-500">
|
||||||
|
<ListFilter className="h-3.5 w-3.5" />
|
||||||
|
Status
|
||||||
|
</span>
|
||||||
|
{STATUS_ORDER.map((status) => {
|
||||||
|
const meta = STATUS_META[status];
|
||||||
|
const active = statusFilter.includes(status);
|
||||||
|
const count = counts.get(status) ?? 0;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={status}
|
||||||
|
type="button"
|
||||||
|
onClick={() => toggleStatus(status)}
|
||||||
|
className={cn(
|
||||||
|
"inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs ring-1 ring-inset transition-all",
|
||||||
|
active
|
||||||
|
? meta.className
|
||||||
|
: "text-slate-400 ring-white/10 hover:bg-white/5 hover:text-slate-200",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="h-1.5 w-1.5 rounded-full"
|
||||||
|
style={{ backgroundColor: meta.color, opacity: active ? 1 : 0.55 }}
|
||||||
|
/>
|
||||||
|
{meta.label}
|
||||||
|
<span className="tabular-nums text-slate-500">{count}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
<label className="ml-auto flex cursor-pointer items-center gap-2 text-xs text-slate-500">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={showArchived}
|
||||||
|
onChange={(event) => setShowArchived(event.target.checked)}
|
||||||
|
className="h-3.5 w-3.5 accent-violet-500"
|
||||||
|
/>
|
||||||
|
Archiv einblenden
|
||||||
|
</label>
|
||||||
|
|
||||||
|
{hasFilters ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setQuery("");
|
||||||
|
setStatusFilter([]);
|
||||||
|
}}
|
||||||
|
className="text-xs text-violet-300 underline-offset-2 hover:underline"
|
||||||
|
>
|
||||||
|
Filter zuruecksetzen
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Inhalt */}
|
||||||
|
{visible.length === 0 ? (
|
||||||
|
<EmptyState hasFilters={hasFilters} onCreate={() => setDialogOpen(true)} />
|
||||||
|
) : view === "grid" ? (
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
|
||||||
|
{visible.map((project, index) => (
|
||||||
|
<ProjectCard key={project.id} project={project} index={index} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-8">
|
||||||
|
{grouped.map((group) => {
|
||||||
|
const meta = STATUS_META[group.status];
|
||||||
|
return (
|
||||||
|
<div key={group.status}>
|
||||||
|
<div className="mb-3 flex items-center gap-2.5">
|
||||||
|
<span
|
||||||
|
className="accent-dot h-2 w-2 rounded-full"
|
||||||
|
style={{ backgroundColor: meta.color, color: meta.color }}
|
||||||
|
/>
|
||||||
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-slate-300">
|
||||||
|
{meta.label}
|
||||||
|
</h2>
|
||||||
|
<span className="rounded-full bg-white/6 px-2 py-0.5 text-[11px] tabular-nums text-slate-400">
|
||||||
|
{group.items.length}
|
||||||
|
</span>
|
||||||
|
<span className="h-px flex-1 bg-gradient-to-r from-white/10 to-transparent" />
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
|
||||||
|
{group.items.map((project, index) => (
|
||||||
|
<ProjectCard key={project.id} project={project} index={index} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<ProjectDialog
|
||||||
|
open={dialogOpen}
|
||||||
|
onClose={() => setDialogOpen(false)}
|
||||||
|
connections={connections}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function EmptyState({
|
||||||
|
hasFilters,
|
||||||
|
onCreate,
|
||||||
|
}: {
|
||||||
|
hasFilters: boolean;
|
||||||
|
onCreate: () => void;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="glass fade-up flex flex-col items-center justify-center gap-4 px-6 py-20 text-center">
|
||||||
|
<span className="grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-violet-500/25 to-cyan-400/20 text-violet-200">
|
||||||
|
<Plus className="h-6 w-6" />
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-white">
|
||||||
|
{hasFilters ? "Keine Treffer" : "Noch keine Projekte"}
|
||||||
|
</h3>
|
||||||
|
<p className="mt-1 max-w-md text-sm text-slate-400">
|
||||||
|
{hasFilters
|
||||||
|
? "Kein Projekt passt zu Suche und Filtern. Filter anpassen oder zuruecksetzen."
|
||||||
|
: "Leg deine erste Idee an – Beschreibung, Repo und Status kannst du jederzeit nachziehen."}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{!hasFilters ? (
|
||||||
|
<button type="button" className="btn btn-primary" onClick={onCreate}>
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Erstes Projekt anlegen
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,196 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useState } from "react";
|
||||||
|
import {
|
||||||
|
AlertTriangle,
|
||||||
|
GitBranch,
|
||||||
|
GitCommitHorizontal,
|
||||||
|
NotebookPen,
|
||||||
|
Star,
|
||||||
|
Tag,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { StatusSelect } from "@/components/StatusSelect";
|
||||||
|
import { PRIORITY_META, accentOf } from "@/lib/status";
|
||||||
|
import { cn, formatRelative, truncate } from "@/lib/utils";
|
||||||
|
import type { ProjectListItem } from "@/types";
|
||||||
|
|
||||||
|
const PROVIDER_LABEL: Record<string, string> = {
|
||||||
|
GITHUB: "GitHub",
|
||||||
|
GITLAB: "GitLab",
|
||||||
|
GITEA: "Gitea",
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Karte im Board. Die gesamte Flaeche ist ein Link (per "stretched link"),
|
||||||
|
* interaktive Elemente liegen darueber und bekommen pointer-events zurueck.
|
||||||
|
*/
|
||||||
|
export function ProjectCard({ project, index = 0 }: { project: ProjectListItem; index?: number }) {
|
||||||
|
const accent = accentOf(project.accent);
|
||||||
|
const priority = PRIORITY_META[project.priority] ?? PRIORITY_META[2];
|
||||||
|
const snapshot = project.snapshot;
|
||||||
|
const [favorite, setFavorite] = useState(project.favorite);
|
||||||
|
|
||||||
|
async function toggleFavorite() {
|
||||||
|
const next = !favorite;
|
||||||
|
setFavorite(next);
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/projects/${project.id}`, {
|
||||||
|
method: "PATCH",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ favorite: next }),
|
||||||
|
});
|
||||||
|
if (!response.ok) throw new Error("failed");
|
||||||
|
} catch {
|
||||||
|
setFavorite(!next);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<article
|
||||||
|
className="glass card-glow fade-up group relative overflow-hidden p-5"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--accent-from": accent.from,
|
||||||
|
"--accent-to": accent.to,
|
||||||
|
animationDelay: `${Math.min(index, 12) * 40}ms`,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span className="accent-bar absolute inset-x-0 top-0 h-[2px] opacity-70" aria-hidden="true" />
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href={`/projects/${project.id}`}
|
||||||
|
className="absolute inset-0 z-0 rounded-[var(--radius-card)] focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-400/60"
|
||||||
|
aria-label={`Projekt ${project.name} oeffnen`}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="pointer-events-none relative z-10">
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<h3 className="truncate text-base font-semibold text-white transition-colors group-hover:text-violet-200">
|
||||||
|
{project.name}
|
||||||
|
</h3>
|
||||||
|
{favorite ? (
|
||||||
|
<Star className="h-3.5 w-3.5 shrink-0 fill-amber-300 text-amber-300" />
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<p className="mt-1 line-clamp-2 min-h-[2.4rem] text-sm leading-snug text-slate-400">
|
||||||
|
{project.summary ? truncate(project.summary, 140) : "Noch keine Kurzbeschreibung."}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={toggleFavorite}
|
||||||
|
aria-label={favorite ? "Favorit entfernen" : "Als Favorit markieren"}
|
||||||
|
className={cn(
|
||||||
|
"pointer-events-auto shrink-0 rounded-lg p-1.5 transition-colors",
|
||||||
|
favorite
|
||||||
|
? "text-amber-300 hover:bg-amber-400/10"
|
||||||
|
: "text-slate-600 hover:bg-white/8 hover:text-amber-300 sm:opacity-0 sm:group-hover:opacity-100",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Star className={cn("h-4 w-4", favorite && "fill-current")} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Fortschritt */}
|
||||||
|
<div className="mt-4">
|
||||||
|
<div className="mb-1.5 flex items-center justify-between text-[11px] text-slate-500">
|
||||||
|
<span>Fortschritt</span>
|
||||||
|
<span className="tabular-nums text-slate-400">{project.progress}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-1.5 w-full overflow-hidden rounded-full bg-white/6">
|
||||||
|
<div
|
||||||
|
className="accent-bar h-full rounded-full transition-[width] duration-700"
|
||||||
|
style={{ width: `${Math.max(2, project.progress)}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Git-Kurzinfo */}
|
||||||
|
<div className="mt-4 flex flex-wrap items-center gap-x-3 gap-y-2 text-[11px] text-slate-400">
|
||||||
|
{project.connection ? (
|
||||||
|
<span className="glass-soft inline-flex items-center gap-1.5 px-2 py-1">
|
||||||
|
<span className="h-1.5 w-1.5 rounded-full bg-violet-400" aria-hidden="true" />
|
||||||
|
{PROVIDER_LABEL[project.connection.provider] ?? project.connection.provider}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{snapshot?.defaultBranch ? (
|
||||||
|
<span className="inline-flex items-center gap-1.5 font-mono">
|
||||||
|
<GitBranch className="h-3.5 w-3.5 text-slate-500" />
|
||||||
|
{snapshot.defaultBranch}
|
||||||
|
{snapshot.branchCount > 1 ? (
|
||||||
|
<span className="text-slate-600">+{snapshot.branchCount - 1}</span>
|
||||||
|
) : null}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{snapshot?.latestTag ? (
|
||||||
|
<span className="inline-flex items-center gap-1.5 font-mono">
|
||||||
|
<Tag className="h-3.5 w-3.5 text-slate-500" />
|
||||||
|
{snapshot.latestTag}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{snapshot?.lastCommitAt ? (
|
||||||
|
<span className="inline-flex items-center gap-1.5" suppressHydrationWarning>
|
||||||
|
<GitCommitHorizontal className="h-3.5 w-3.5 text-slate-500" />
|
||||||
|
{formatRelative(snapshot.lastCommitAt)}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{project._count.notes > 0 ? (
|
||||||
|
<span className="inline-flex items-center gap-1.5">
|
||||||
|
<NotebookPen className="h-3.5 w-3.5 text-slate-500" />
|
||||||
|
{project._count.notes}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{project.syncError ? (
|
||||||
|
<span
|
||||||
|
className="inline-flex items-center gap-1.5 text-rose-300/80"
|
||||||
|
title={project.syncError}
|
||||||
|
>
|
||||||
|
<AlertTriangle className="h-3.5 w-3.5" />
|
||||||
|
Sync-Fehler
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tags */}
|
||||||
|
{project.tags.length > 0 ? (
|
||||||
|
<div className="mt-3 flex flex-wrap gap-1.5">
|
||||||
|
{project.tags.slice(0, 4).map((tag) => (
|
||||||
|
<span
|
||||||
|
key={tag}
|
||||||
|
className="rounded-md bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-slate-400"
|
||||||
|
>
|
||||||
|
#{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{project.tags.length > 4 ? (
|
||||||
|
<span className="px-1 text-[10px] text-slate-600">+{project.tags.length - 4}</span>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div className="mt-4 flex items-center justify-between gap-2 border-t border-white/6 pt-3">
|
||||||
|
<div className="pointer-events-auto">
|
||||||
|
<StatusSelect projectId={project.id} status={project.status} variant="compact" />
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className="text-[10px] uppercase tracking-wider"
|
||||||
|
style={{ color: priority.color }}
|
||||||
|
title={`Prioritaet: ${priority.label}`}
|
||||||
|
>
|
||||||
|
{priority.label}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,493 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { Loader2, RefreshCw, Search } from "lucide-react";
|
||||||
|
import type { ProjectStatus } from "@prisma/client";
|
||||||
|
import { Modal } from "@/components/ui/Modal";
|
||||||
|
import { ACCENTS, PRIORITY_META, STATUS_META, STATUS_ORDER } from "@/lib/status";
|
||||||
|
import { cn, parseTags } from "@/lib/utils";
|
||||||
|
import type { ConnectionSafe, ProjectListItem, RepoListEntry } from "@/types";
|
||||||
|
|
||||||
|
interface ProjectDialogProps {
|
||||||
|
open: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
connections: ConnectionSafe[];
|
||||||
|
/** Vorhandenes Projekt = Bearbeiten, sonst Anlegen. */
|
||||||
|
project?: ProjectListItem | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FormState {
|
||||||
|
name: string;
|
||||||
|
summary: string;
|
||||||
|
description: string;
|
||||||
|
status: ProjectStatus;
|
||||||
|
priority: number;
|
||||||
|
progress: number;
|
||||||
|
accent: string;
|
||||||
|
tags: string;
|
||||||
|
favorite: boolean;
|
||||||
|
connectionId: string;
|
||||||
|
repoUrl: string;
|
||||||
|
repoOwner: string;
|
||||||
|
repoName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const EMPTY: FormState = {
|
||||||
|
name: "",
|
||||||
|
summary: "",
|
||||||
|
description: "",
|
||||||
|
status: "IDEA",
|
||||||
|
priority: 2,
|
||||||
|
progress: 0,
|
||||||
|
accent: "violet",
|
||||||
|
tags: "",
|
||||||
|
favorite: false,
|
||||||
|
connectionId: "",
|
||||||
|
repoUrl: "",
|
||||||
|
repoOwner: "",
|
||||||
|
repoName: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
export function ProjectDialog({ open, onClose, connections, project }: ProjectDialogProps) {
|
||||||
|
const router = useRouter();
|
||||||
|
const [form, setForm] = useState<FormState>(EMPTY);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
|
||||||
|
|
||||||
|
const [repoPickerOpen, setRepoPickerOpen] = useState(false);
|
||||||
|
const [repos, setRepos] = useState<RepoListEntry[]>([]);
|
||||||
|
const [reposLoading, setReposLoading] = useState(false);
|
||||||
|
const [repoFilter, setRepoFilter] = useState("");
|
||||||
|
const [repoError, setRepoError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const isEdit = Boolean(project);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) return;
|
||||||
|
setError(null);
|
||||||
|
setFieldErrors({});
|
||||||
|
setRepoPickerOpen(false);
|
||||||
|
setRepos([]);
|
||||||
|
setRepoError(null);
|
||||||
|
setForm(
|
||||||
|
project
|
||||||
|
? {
|
||||||
|
name: project.name,
|
||||||
|
summary: project.summary ?? "",
|
||||||
|
description: project.description ?? "",
|
||||||
|
status: project.status,
|
||||||
|
priority: project.priority,
|
||||||
|
progress: project.progress,
|
||||||
|
accent: project.accent,
|
||||||
|
tags: project.tags.join(", "),
|
||||||
|
favorite: project.favorite,
|
||||||
|
connectionId: project.connectionId ?? "",
|
||||||
|
repoUrl: project.repoUrl ?? "",
|
||||||
|
repoOwner: project.repoOwner ?? "",
|
||||||
|
repoName: project.repoName ?? "",
|
||||||
|
}
|
||||||
|
: EMPTY,
|
||||||
|
);
|
||||||
|
}, [open, project]);
|
||||||
|
|
||||||
|
const filteredRepos = useMemo(() => {
|
||||||
|
const needle = repoFilter.toLowerCase().trim();
|
||||||
|
if (!needle) return repos.slice(0, 60);
|
||||||
|
return repos.filter((repo) => repo.fullPath.toLowerCase().includes(needle)).slice(0, 60);
|
||||||
|
}, [repos, repoFilter]);
|
||||||
|
|
||||||
|
function update<K extends keyof FormState>(key: K, value: FormState[K]) {
|
||||||
|
setForm((previous) => ({ ...previous, [key]: value }));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadRepos() {
|
||||||
|
if (!form.connectionId) {
|
||||||
|
setRepoError("Bitte zuerst eine Git-Verbindung auswaehlen.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setReposLoading(true);
|
||||||
|
setRepoError(null);
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/connections/${form.connectionId}/repos`);
|
||||||
|
const payload = await response.json();
|
||||||
|
if (!response.ok) throw new Error(payload.error ?? "Repos konnten nicht geladen werden.");
|
||||||
|
setRepos(payload.repos ?? []);
|
||||||
|
setRepoPickerOpen(true);
|
||||||
|
} catch (caught) {
|
||||||
|
setRepoError(caught instanceof Error ? caught.message : String(caught));
|
||||||
|
} finally {
|
||||||
|
setReposLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function pickRepo(repo: RepoListEntry) {
|
||||||
|
setForm((previous) => ({
|
||||||
|
...previous,
|
||||||
|
repoUrl: repo.htmlUrl,
|
||||||
|
repoOwner: repo.owner,
|
||||||
|
repoName: repo.name,
|
||||||
|
name: previous.name || repo.name,
|
||||||
|
summary: previous.summary || (repo.description ?? ""),
|
||||||
|
}));
|
||||||
|
setRepoPickerOpen(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submit(event: React.FormEvent) {
|
||||||
|
event.preventDefault();
|
||||||
|
setSaving(true);
|
||||||
|
setError(null);
|
||||||
|
setFieldErrors({});
|
||||||
|
|
||||||
|
const body = {
|
||||||
|
name: form.name,
|
||||||
|
summary: form.summary,
|
||||||
|
description: form.description,
|
||||||
|
status: form.status,
|
||||||
|
priority: Number(form.priority),
|
||||||
|
progress: Number(form.progress),
|
||||||
|
accent: form.accent,
|
||||||
|
tags: parseTags(form.tags),
|
||||||
|
favorite: form.favorite,
|
||||||
|
connectionId: form.connectionId || null,
|
||||||
|
repoUrl: form.repoUrl,
|
||||||
|
repoOwner: form.repoOwner,
|
||||||
|
repoName: form.repoName,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
isEdit ? `/api/projects/${project?.id}` : "/api/projects",
|
||||||
|
{
|
||||||
|
method: isEdit ? "PATCH" : "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
const payload = await response.json().catch(() => ({}));
|
||||||
|
if (!response.ok) {
|
||||||
|
setFieldErrors(payload.fields ?? {});
|
||||||
|
throw new Error(payload.error ?? "Speichern fehlgeschlagen.");
|
||||||
|
}
|
||||||
|
onClose();
|
||||||
|
router.refresh();
|
||||||
|
} catch (caught) {
|
||||||
|
setError(caught instanceof Error ? caught.message : String(caught));
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
open={open}
|
||||||
|
onClose={onClose}
|
||||||
|
width="xl"
|
||||||
|
title={isEdit ? "Projekt bearbeiten" : "Neues Projekt"}
|
||||||
|
description={
|
||||||
|
isEdit
|
||||||
|
? "Aenderungen wirken sofort im Board."
|
||||||
|
: "Eine reine Idee reicht – Repo und Details lassen sich jederzeit nachtragen."
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<form onSubmit={submit} className="space-y-5">
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2">
|
||||||
|
<div className="sm:col-span-2">
|
||||||
|
<label className="field-label" htmlFor="project-name">
|
||||||
|
Name *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="project-name"
|
||||||
|
className="field"
|
||||||
|
value={form.name}
|
||||||
|
onChange={(event) => update("name", event.target.value)}
|
||||||
|
placeholder="z. B. Pixelgarten"
|
||||||
|
required
|
||||||
|
maxLength={120}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
{fieldErrors.name ? (
|
||||||
|
<p className="mt-1 text-xs text-rose-300">{fieldErrors.name}</p>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="sm:col-span-2">
|
||||||
|
<label className="field-label" htmlFor="project-summary">
|
||||||
|
Kurzbeschreibung
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="project-summary"
|
||||||
|
className="field"
|
||||||
|
value={form.summary}
|
||||||
|
onChange={(event) => update("summary", event.target.value)}
|
||||||
|
placeholder="Ein Satz, der auf die Karte passt"
|
||||||
|
maxLength={280}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="sm:col-span-2">
|
||||||
|
<label className="field-label" htmlFor="project-description">
|
||||||
|
Beschreibung / Ideenskizze
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="project-description"
|
||||||
|
className="field min-h-28 resize-y"
|
||||||
|
value={form.description}
|
||||||
|
onChange={(event) => update("description", event.target.value)}
|
||||||
|
placeholder="Worum geht es? Was ist der Reiz? Welcher Stack?"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="field-label" htmlFor="project-status">
|
||||||
|
Status
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="project-status"
|
||||||
|
className="field"
|
||||||
|
value={form.status}
|
||||||
|
onChange={(event) => update("status", event.target.value as ProjectStatus)}
|
||||||
|
>
|
||||||
|
{STATUS_ORDER.map((status) => (
|
||||||
|
<option key={status} value={status}>
|
||||||
|
{STATUS_META[status].label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="field-label" htmlFor="project-priority">
|
||||||
|
Prioritaet
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="project-priority"
|
||||||
|
className="field"
|
||||||
|
value={form.priority}
|
||||||
|
onChange={(event) => update("priority", Number(event.target.value))}
|
||||||
|
>
|
||||||
|
{Object.entries(PRIORITY_META).map(([value, meta]) => (
|
||||||
|
<option key={value} value={value}>
|
||||||
|
{meta.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="sm:col-span-2">
|
||||||
|
<label className="field-label" htmlFor="project-progress">
|
||||||
|
Fortschritt: {form.progress}%
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="project-progress"
|
||||||
|
type="range"
|
||||||
|
min={0}
|
||||||
|
max={100}
|
||||||
|
step={5}
|
||||||
|
value={form.progress}
|
||||||
|
onChange={(event) => update("progress", Number(event.target.value))}
|
||||||
|
className="w-full accent-violet-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="sm:col-span-2">
|
||||||
|
<span className="field-label">Akzentfarbe</span>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{Object.entries(ACCENTS).map(([key, accent]) => (
|
||||||
|
<button
|
||||||
|
key={key}
|
||||||
|
type="button"
|
||||||
|
onClick={() => update("accent", key)}
|
||||||
|
aria-label={accent.label}
|
||||||
|
title={accent.label}
|
||||||
|
className={cn(
|
||||||
|
"h-8 w-8 rounded-lg transition-transform",
|
||||||
|
form.accent === key
|
||||||
|
? "scale-110 ring-2 ring-white/70"
|
||||||
|
: "opacity-70 hover:scale-105 hover:opacity-100",
|
||||||
|
)}
|
||||||
|
style={{
|
||||||
|
backgroundImage: `linear-gradient(135deg, ${accent.from}, ${accent.to})`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="sm:col-span-2">
|
||||||
|
<label className="field-label" htmlFor="project-tags">
|
||||||
|
Tags (kommagetrennt)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="project-tags"
|
||||||
|
className="field"
|
||||||
|
value={form.tags}
|
||||||
|
onChange={(event) => update("tags", event.target.value)}
|
||||||
|
placeholder="next.js, spiel, experiment"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Git ────────────────────────────────────────────── */}
|
||||||
|
<div className="glass-soft space-y-4 p-4">
|
||||||
|
<div className="flex items-center justify-between gap-3">
|
||||||
|
<h3 className="text-sm font-semibold text-slate-200">Git-Anbindung (optional)</h3>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-ghost px-2.5 py-1.5 text-xs"
|
||||||
|
onClick={loadRepos}
|
||||||
|
disabled={reposLoading || !form.connectionId}
|
||||||
|
>
|
||||||
|
{reposLoading ? (
|
||||||
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<RefreshCw className="h-3.5 w-3.5" />
|
||||||
|
)}
|
||||||
|
Repos laden
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<label className="field-label" htmlFor="project-connection">
|
||||||
|
Verbindung
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="project-connection"
|
||||||
|
className="field"
|
||||||
|
value={form.connectionId}
|
||||||
|
onChange={(event) => update("connectionId", event.target.value)}
|
||||||
|
>
|
||||||
|
<option value="">– keine –</option>
|
||||||
|
{connections.map((connection) => (
|
||||||
|
<option key={connection.id} value={connection.id}>
|
||||||
|
{connection.name} ({connection.provider})
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
{connections.length === 0 ? (
|
||||||
|
<p className="mt-1 text-xs text-slate-500">
|
||||||
|
Noch keine Verbindung angelegt – unter „Git-Verbindungen“ hinzufuegen.
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="field-label" htmlFor="project-repo-url">
|
||||||
|
Repository-URL
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="project-repo-url"
|
||||||
|
className="field"
|
||||||
|
value={form.repoUrl}
|
||||||
|
onChange={(event) => update("repoUrl", event.target.value)}
|
||||||
|
placeholder="https://github.com/user/repo"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="field-label" htmlFor="project-repo-owner">
|
||||||
|
Owner / Gruppe
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="project-repo-owner"
|
||||||
|
className="field font-mono text-xs"
|
||||||
|
value={form.repoOwner}
|
||||||
|
onChange={(event) => update("repoOwner", event.target.value)}
|
||||||
|
placeholder="wird aus der URL abgeleitet"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="field-label" htmlFor="project-repo-name">
|
||||||
|
Repository
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="project-repo-name"
|
||||||
|
className="field font-mono text-xs"
|
||||||
|
value={form.repoName}
|
||||||
|
onChange={(event) => update("repoName", event.target.value)}
|
||||||
|
placeholder="wird aus der URL abgeleitet"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{repoError ? <p className="text-xs text-rose-300">{repoError}</p> : null}
|
||||||
|
|
||||||
|
{repoPickerOpen ? (
|
||||||
|
<div className="rounded-xl border border-white/8 bg-[#080a18]/70">
|
||||||
|
<div className="flex items-center gap-2 border-b border-white/6 px-3 py-2">
|
||||||
|
<Search className="h-3.5 w-3.5 text-slate-500" />
|
||||||
|
<input
|
||||||
|
className="w-full bg-transparent text-sm text-slate-200 outline-none placeholder:text-slate-600"
|
||||||
|
placeholder={`${repos.length} Repositories durchsuchen…`}
|
||||||
|
value={repoFilter}
|
||||||
|
onChange={(event) => setRepoFilter(event.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<ul className="max-h-56 overflow-y-auto p-1">
|
||||||
|
{filteredRepos.map((repo) => (
|
||||||
|
<li key={repo.fullPath}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => pickRepo(repo)}
|
||||||
|
className="flex w-full items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-left hover:bg-white/6"
|
||||||
|
>
|
||||||
|
<span className="min-w-0">
|
||||||
|
<span className="block truncate font-mono text-xs text-slate-200">
|
||||||
|
{repo.fullPath}
|
||||||
|
</span>
|
||||||
|
{repo.description ? (
|
||||||
|
<span className="block truncate text-[11px] text-slate-500">
|
||||||
|
{repo.description}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
</span>
|
||||||
|
<span className="shrink-0 text-[10px] uppercase text-slate-600">
|
||||||
|
{repo.visibility}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
{filteredRepos.length === 0 ? (
|
||||||
|
<li className="px-3 py-4 text-center text-xs text-slate-500">
|
||||||
|
Keine Treffer.
|
||||||
|
</li>
|
||||||
|
) : null}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error ? (
|
||||||
|
<p className="rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-200">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between gap-3 pt-1">
|
||||||
|
<label className="flex cursor-pointer items-center gap-2 text-sm text-slate-400">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={form.favorite}
|
||||||
|
onChange={(event) => update("favorite", event.target.checked)}
|
||||||
|
className="h-4 w-4 accent-violet-500"
|
||||||
|
/>
|
||||||
|
Als Favorit anpinnen
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button type="button" className="btn btn-ghost" onClick={onClose} disabled={saving}>
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
<button type="submit" className="btn btn-primary" disabled={saving}>
|
||||||
|
{saving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
|
||||||
|
{isEdit ? "Speichern" : "Projekt anlegen"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,227 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import {
|
||||||
|
ArrowLeft,
|
||||||
|
CalendarDays,
|
||||||
|
ExternalLink,
|
||||||
|
Loader2,
|
||||||
|
Pencil,
|
||||||
|
Star,
|
||||||
|
Trash2,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { ProjectDialog } from "@/components/ProjectDialog";
|
||||||
|
import { StatusSelect } from "@/components/StatusSelect";
|
||||||
|
import { PRIORITY_META, accentOf } from "@/lib/status";
|
||||||
|
import { cn, formatDate } from "@/lib/utils";
|
||||||
|
import type { ConnectionSafe, ProjectDetail } from "@/types";
|
||||||
|
|
||||||
|
export function ProjectHeader({
|
||||||
|
project,
|
||||||
|
connections,
|
||||||
|
}: {
|
||||||
|
project: ProjectDetail;
|
||||||
|
connections: ConnectionSafe[];
|
||||||
|
}) {
|
||||||
|
const router = useRouter();
|
||||||
|
const accent = accentOf(project.accent);
|
||||||
|
const priority = PRIORITY_META[project.priority] ?? PRIORITY_META[2];
|
||||||
|
|
||||||
|
const [editOpen, setEditOpen] = useState(false);
|
||||||
|
const [favorite, setFavorite] = useState(project.favorite);
|
||||||
|
const [progress, setProgress] = useState(project.progress);
|
||||||
|
const [deleting, setDeleting] = useState(false);
|
||||||
|
|
||||||
|
async function patch(payload: Record<string, unknown>) {
|
||||||
|
await fetch(`/api/projects/${project.id}`, {
|
||||||
|
method: "PATCH",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
}).catch(() => undefined);
|
||||||
|
router.refresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function remove() {
|
||||||
|
if (
|
||||||
|
!window.confirm(
|
||||||
|
`„${project.name}“ mit allen Notizen unwiderruflich loeschen?`,
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setDeleting(true);
|
||||||
|
const response = await fetch(`/api/projects/${project.id}`, { method: "DELETE" });
|
||||||
|
if (response.ok) {
|
||||||
|
router.push("/");
|
||||||
|
router.refresh();
|
||||||
|
} else {
|
||||||
|
setDeleting(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header
|
||||||
|
className="glass relative overflow-hidden p-6"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--accent-from": accent.from,
|
||||||
|
"--accent-to": accent.to,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span className="accent-bar absolute inset-x-0 top-0 h-[3px]" aria-hidden="true" />
|
||||||
|
<div
|
||||||
|
className="pointer-events-none absolute -right-20 -top-24 h-64 w-64 rounded-full opacity-20 blur-3xl"
|
||||||
|
style={{ background: `radial-gradient(circle, ${accent.from}, transparent 70%)` }}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="inline-flex items-center gap-1.5 text-xs text-slate-500 transition-colors hover:text-violet-300"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="h-3.5 w-3.5" />
|
||||||
|
Zurueck zum Dashboard
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="mt-3 flex flex-wrap items-start justify-between gap-4">
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
|
<h1 className="text-2xl font-semibold tracking-tight text-white sm:text-3xl">
|
||||||
|
{project.name}
|
||||||
|
</h1>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
const next = !favorite;
|
||||||
|
setFavorite(next);
|
||||||
|
void patch({ favorite: next });
|
||||||
|
}}
|
||||||
|
aria-label={favorite ? "Favorit entfernen" : "Als Favorit markieren"}
|
||||||
|
className={cn(
|
||||||
|
"rounded-lg p-1.5 transition-colors",
|
||||||
|
favorite
|
||||||
|
? "text-amber-300 hover:bg-amber-400/10"
|
||||||
|
: "text-slate-600 hover:bg-white/8 hover:text-amber-300",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Star className={cn("h-4 w-4", favorite && "fill-current")} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="mt-1 font-mono text-xs text-slate-600">/{project.slug}</p>
|
||||||
|
|
||||||
|
{project.summary ? (
|
||||||
|
<p className="mt-3 max-w-2xl text-sm leading-relaxed text-slate-300">
|
||||||
|
{project.summary}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-slate-500">
|
||||||
|
<span className="inline-flex items-center gap-1.5">
|
||||||
|
<CalendarDays className="h-3.5 w-3.5" />
|
||||||
|
angelegt {formatDate(project.createdAt)}
|
||||||
|
</span>
|
||||||
|
<span style={{ color: priority.color }}>Prioritaet: {priority.label}</span>
|
||||||
|
{project.connection ? (
|
||||||
|
<span className="inline-flex items-center gap-1.5">
|
||||||
|
{project.connection.name}
|
||||||
|
<span className="text-slate-700">·</span>
|
||||||
|
{project.connection.provider}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
{project.repoUrl ? (
|
||||||
|
<a
|
||||||
|
href={project.repoUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
className="inline-flex items-center gap-1.5 text-violet-300 transition-colors hover:text-violet-200"
|
||||||
|
>
|
||||||
|
Repository
|
||||||
|
<ExternalLink className="h-3 w-3" />
|
||||||
|
</a>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{project.tags.length > 0 ? (
|
||||||
|
<div className="mt-3 flex flex-wrap gap-1.5">
|
||||||
|
{project.tags.map((tag) => (
|
||||||
|
<span
|
||||||
|
key={tag}
|
||||||
|
className="rounded-md bg-white/5 px-2 py-0.5 text-[11px] text-slate-400"
|
||||||
|
>
|
||||||
|
#{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col items-end gap-3">
|
||||||
|
<StatusSelect projectId={project.id} status={project.status} />
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-ghost px-3 py-1.5 text-xs"
|
||||||
|
onClick={() => setEditOpen(true)}
|
||||||
|
>
|
||||||
|
<Pencil className="h-3.5 w-3.5" />
|
||||||
|
Bearbeiten
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-danger px-3 py-1.5 text-xs"
|
||||||
|
onClick={remove}
|
||||||
|
disabled={deleting}
|
||||||
|
>
|
||||||
|
{deleting ? (
|
||||||
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Trash2 className="h-3.5 w-3.5" />
|
||||||
|
)}
|
||||||
|
Loeschen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Fortschritt direkt regelbar */}
|
||||||
|
<div className="mt-6">
|
||||||
|
<div className="mb-2 flex items-center justify-between text-xs text-slate-500">
|
||||||
|
<span>Fortschritt</span>
|
||||||
|
<span className="tabular-nums text-slate-300">{progress}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="h-2 w-full overflow-hidden rounded-full bg-white/6">
|
||||||
|
<div
|
||||||
|
className="accent-bar h-full rounded-full transition-[width] duration-300"
|
||||||
|
style={{ width: `${Math.max(1, progress)}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min={0}
|
||||||
|
max={100}
|
||||||
|
step={5}
|
||||||
|
value={progress}
|
||||||
|
onChange={(event) => setProgress(Number(event.target.value))}
|
||||||
|
onMouseUp={() => patch({ progress })}
|
||||||
|
onTouchEnd={() => patch({ progress })}
|
||||||
|
onKeyUp={() => patch({ progress })}
|
||||||
|
aria-label="Fortschritt anpassen"
|
||||||
|
className="absolute inset-0 h-2 w-full cursor-pointer opacity-0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ProjectDialog
|
||||||
|
open={editOpen}
|
||||||
|
onClose={() => setEditOpen(false)}
|
||||||
|
connections={connections}
|
||||||
|
project={project}
|
||||||
|
/>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import type { LucideIcon } from "lucide-react";
|
||||||
|
|
||||||
|
interface StatCardProps {
|
||||||
|
label: string;
|
||||||
|
value: number | string;
|
||||||
|
hint?: string;
|
||||||
|
icon: LucideIcon;
|
||||||
|
color: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function StatCard({ label, value, hint, icon: Icon, color }: StatCardProps) {
|
||||||
|
return (
|
||||||
|
<div className="glass relative overflow-hidden p-4">
|
||||||
|
<div
|
||||||
|
className="pointer-events-none absolute -right-6 -top-8 h-24 w-24 rounded-full opacity-25 blur-2xl"
|
||||||
|
style={{ backgroundColor: color }}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div className="min-w-0">
|
||||||
|
<p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500">
|
||||||
|
{label}
|
||||||
|
</p>
|
||||||
|
<p className="mt-2 text-3xl font-semibold tabular-nums text-white">{value}</p>
|
||||||
|
{hint ? <p className="mt-1 truncate text-xs text-slate-500">{hint}</p> : null}
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className="grid h-9 w-9 shrink-0 place-items-center rounded-xl"
|
||||||
|
style={{ backgroundColor: `${color}1f`, color }}
|
||||||
|
>
|
||||||
|
<Icon className="h-4 w-4" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,141 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useTransition } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { Check, ChevronDown, Loader2 } from "lucide-react";
|
||||||
|
import type { ProjectStatus } from "@prisma/client";
|
||||||
|
import { STATUS_META, STATUS_ORDER, statusOf } from "@/lib/status";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface StatusSelectProps {
|
||||||
|
projectId: string;
|
||||||
|
status: ProjectStatus;
|
||||||
|
/** compact: nur Punkt + Kurzlabel, fuer die Karten im Board. */
|
||||||
|
variant?: "compact" | "full";
|
||||||
|
onChanged?: (status: ProjectStatus) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function StatusSelect({
|
||||||
|
projectId,
|
||||||
|
status,
|
||||||
|
variant = "full",
|
||||||
|
onChanged,
|
||||||
|
}: StatusSelectProps) {
|
||||||
|
const router = useRouter();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [current, setCurrent] = useState<ProjectStatus>(status);
|
||||||
|
const [pending, startTransition] = useTransition();
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
|
||||||
|
const meta = statusOf(current);
|
||||||
|
|
||||||
|
async function select(next: ProjectStatus) {
|
||||||
|
setOpen(false);
|
||||||
|
if (next === current) return;
|
||||||
|
|
||||||
|
const previous = current;
|
||||||
|
setCurrent(next); // optimistisch
|
||||||
|
setSaving(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/projects/${projectId}`, {
|
||||||
|
method: "PATCH",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ status: next }),
|
||||||
|
});
|
||||||
|
if (!response.ok) throw new Error(await response.text());
|
||||||
|
onChanged?.(next);
|
||||||
|
startTransition(() => router.refresh());
|
||||||
|
} catch {
|
||||||
|
setCurrent(previous); // zurueckrollen
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
setOpen((value) => !value);
|
||||||
|
}}
|
||||||
|
className={cn(
|
||||||
|
"inline-flex items-center gap-1.5 rounded-full font-medium ring-1 ring-inset transition-all hover:brightness-125",
|
||||||
|
meta.className,
|
||||||
|
variant === "compact" ? "px-2.5 py-1 text-[11px]" : "px-3 py-1.5 text-xs",
|
||||||
|
)}
|
||||||
|
aria-haspopup="listbox"
|
||||||
|
aria-expanded={open}
|
||||||
|
>
|
||||||
|
{saving || pending ? (
|
||||||
|
<Loader2 className="h-3 w-3 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<span
|
||||||
|
className="accent-dot h-1.5 w-1.5 rounded-full"
|
||||||
|
style={{ backgroundColor: meta.color, color: meta.color }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{variant === "compact" ? meta.short : meta.label}
|
||||||
|
<ChevronDown className="h-3 w-3 opacity-60" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{open ? (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-label="Auswahl schliessen"
|
||||||
|
className="fixed inset-0 z-30 cursor-default"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
role="listbox"
|
||||||
|
className="glass fade-up absolute right-0 z-40 mt-2 w-60 overflow-hidden p-1.5"
|
||||||
|
>
|
||||||
|
{STATUS_ORDER.map((value) => {
|
||||||
|
const option = STATUS_META[value];
|
||||||
|
const active = value === current;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={value}
|
||||||
|
type="button"
|
||||||
|
role="option"
|
||||||
|
aria-selected={active}
|
||||||
|
onClick={(event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
void select(value);
|
||||||
|
}}
|
||||||
|
className={cn(
|
||||||
|
"flex w-full items-start gap-2.5 rounded-lg px-2.5 py-2 text-left transition-colors",
|
||||||
|
active ? "bg-white/8" : "hover:bg-white/5",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="mt-1.5 h-2 w-2 shrink-0 rounded-full"
|
||||||
|
style={{ backgroundColor: option.color }}
|
||||||
|
/>
|
||||||
|
<span className="min-w-0 flex-1">
|
||||||
|
<span className="flex items-center gap-2 text-sm text-slate-100">
|
||||||
|
{option.label}
|
||||||
|
{active ? <Check className="h-3 w-3 text-violet-300" /> : null}
|
||||||
|
</span>
|
||||||
|
<span className="mt-0.5 block text-[11px] leading-snug text-slate-500">
|
||||||
|
{option.description}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
import { GitBranch, LayoutDashboard, Sparkles } from "lucide-react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const LINKS = [
|
||||||
|
{ href: "/", label: "Dashboard", icon: LayoutDashboard },
|
||||||
|
{ href: "/connections", label: "Git-Verbindungen", icon: GitBranch },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function TopNav() {
|
||||||
|
const pathname = usePathname();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="sticky top-0 z-40 border-b border-white/5 bg-[#05060f]/70 backdrop-blur-xl">
|
||||||
|
<div className="mx-auto flex w-full max-w-[1400px] items-center gap-6 px-4 py-3 sm:px-6 lg:px-8">
|
||||||
|
<Link href="/" className="group flex items-center gap-3">
|
||||||
|
<span className="relative grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-violet-500 via-fuchsia-500 to-cyan-400 shadow-[0_8px_28px_-10px_rgba(168,85,247,0.9)] transition-transform group-hover:scale-105">
|
||||||
|
<Sparkles className="h-4 w-4 text-white" strokeWidth={2.4} />
|
||||||
|
</span>
|
||||||
|
<span className="flex flex-col leading-none">
|
||||||
|
<span className="text-gradient text-lg font-semibold tracking-tight">
|
||||||
|
Nebula
|
||||||
|
</span>
|
||||||
|
<span className="mt-0.5 text-[10px] uppercase tracking-[0.2em] text-slate-500">
|
||||||
|
Vibe Coding
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<nav className="flex items-center gap-1">
|
||||||
|
{LINKS.map(({ href, label, icon: Icon }) => {
|
||||||
|
const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={href}
|
||||||
|
href={href}
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors",
|
||||||
|
active
|
||||||
|
? "bg-white/8 text-white"
|
||||||
|
: "text-slate-400 hover:bg-white/5 hover:text-slate-100",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon className="h-4 w-4" />
|
||||||
|
<span className="hidden sm:inline">{label}</span>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import { X } from "lucide-react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface ModalProps {
|
||||||
|
open: boolean;
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
onClose: () => void;
|
||||||
|
children: React.ReactNode;
|
||||||
|
footer?: React.ReactNode;
|
||||||
|
width?: "md" | "lg" | "xl";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Modal({
|
||||||
|
open,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
onClose,
|
||||||
|
children,
|
||||||
|
footer,
|
||||||
|
width = "lg",
|
||||||
|
}: ModalProps) {
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) return;
|
||||||
|
const onKey = (event: KeyboardEvent) => {
|
||||||
|
if (event.key === "Escape") onClose();
|
||||||
|
};
|
||||||
|
document.addEventListener("keydown", onKey);
|
||||||
|
const previous = document.body.style.overflow;
|
||||||
|
document.body.style.overflow = "hidden";
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener("keydown", onKey);
|
||||||
|
document.body.style.overflow = previous;
|
||||||
|
};
|
||||||
|
}, [open, onClose]);
|
||||||
|
|
||||||
|
if (!open) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:p-8">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-label="Dialog schliessen"
|
||||||
|
onClick={onClose}
|
||||||
|
className="fixed inset-0 cursor-default bg-[#03040c]/80 backdrop-blur-sm"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-label={title}
|
||||||
|
className={cn(
|
||||||
|
"glass fade-up relative z-10 my-auto w-full p-6",
|
||||||
|
width === "md" && "max-w-lg",
|
||||||
|
width === "lg" && "max-w-2xl",
|
||||||
|
width === "xl" && "max-w-4xl",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="mb-5 flex items-start justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold text-white">{title}</h2>
|
||||||
|
{description ? (
|
||||||
|
<p className="mt-1 text-sm text-slate-400">{description}</p>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="rounded-lg p-1.5 text-slate-400 transition-colors hover:bg-white/8 hover:text-white"
|
||||||
|
aria-label="Schliessen"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{children}
|
||||||
|
|
||||||
|
{footer ? <div className="mt-6 flex justify-end gap-2">{footer}</div> : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,79 @@
|
|||||||
|
import { createCipheriv, createDecipheriv, randomBytes, scryptSync } from "node:crypto";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Verschluesselung der Git-Access-Tokens.
|
||||||
|
*
|
||||||
|
* Format des Chiffrats: v1.<iv>.<authTag>.<ciphertext> (jeweils base64url)
|
||||||
|
*
|
||||||
|
* Der Schluessel wird per scrypt aus APP_SECRET abgeleitet. Ohne gesetztes
|
||||||
|
* APP_SECRET wird ein Entwicklungs-Fallback benutzt – dann warnt die App
|
||||||
|
* beim Start, weil Tokens sonst faktisch im Klartext liegen.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const DEV_FALLBACK_SECRET = "nebula-dev-secret-please-set-APP_SECRET";
|
||||||
|
const SALT = "nebula.token.v1";
|
||||||
|
const VERSION = "v1";
|
||||||
|
|
||||||
|
let warned = false;
|
||||||
|
|
||||||
|
function secret(): string {
|
||||||
|
const value = process.env.APP_SECRET;
|
||||||
|
if (value && value.length >= 16) return value;
|
||||||
|
|
||||||
|
if (!warned) {
|
||||||
|
warned = true;
|
||||||
|
console.warn(
|
||||||
|
"[nebula] APP_SECRET ist nicht (ausreichend) gesetzt – es wird ein unsicherer " +
|
||||||
|
"Entwicklungsschluessel verwendet. Bitte APP_SECRET in der .env setzen.",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return DEV_FALLBACK_SECRET;
|
||||||
|
}
|
||||||
|
|
||||||
|
function key(): Buffer {
|
||||||
|
return scryptSync(secret(), SALT, 32);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function encryptSecret(plaintext: string): string {
|
||||||
|
const iv = randomBytes(12);
|
||||||
|
const cipher = createCipheriv("aes-256-gcm", key(), iv);
|
||||||
|
const encrypted = Buffer.concat([cipher.update(plaintext, "utf8"), cipher.final()]);
|
||||||
|
return [
|
||||||
|
VERSION,
|
||||||
|
iv.toString("base64url"),
|
||||||
|
cipher.getAuthTag().toString("base64url"),
|
||||||
|
encrypted.toString("base64url"),
|
||||||
|
].join(".");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function decryptSecret(payload: string): string {
|
||||||
|
const parts = payload.split(".");
|
||||||
|
if (parts.length !== 4 || parts[0] !== VERSION) {
|
||||||
|
throw new Error("Ungueltiges Token-Format");
|
||||||
|
}
|
||||||
|
const [, ivPart, tagPart, dataPart] = parts;
|
||||||
|
const decipher = createDecipheriv("aes-256-gcm", key(), Buffer.from(ivPart, "base64url"));
|
||||||
|
decipher.setAuthTag(Buffer.from(tagPart, "base64url"));
|
||||||
|
const decrypted = Buffer.concat([
|
||||||
|
decipher.update(Buffer.from(dataPart, "base64url")),
|
||||||
|
decipher.final(),
|
||||||
|
]);
|
||||||
|
return decrypted.toString("utf8");
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Entschluesselt und schluckt Fehler – z. B. wenn APP_SECRET gewechselt wurde. */
|
||||||
|
export function tryDecryptSecret(payload: string | null | undefined): string | null {
|
||||||
|
if (!payload) return null;
|
||||||
|
try {
|
||||||
|
return decryptSecret(payload);
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Verkuerzte Darstellung fuer die UI: "ghp_…9f3a". */
|
||||||
|
export function tokenHint(token: string): string {
|
||||||
|
const trimmed = token.trim();
|
||||||
|
if (trimmed.length <= 8) return "••••";
|
||||||
|
return `${trimmed.slice(0, 4)}…${trimmed.slice(-4)}`;
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import { PrismaClient } from "@prisma/client";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Im Dev-Modus laedt Next die Module bei jedem Hot-Reload neu. Ohne diesen
|
||||||
|
* Cache wuerde pro Reload eine neue Verbindung zur Datenbank aufgebaut.
|
||||||
|
*/
|
||||||
|
const globalForPrisma = globalThis as unknown as {
|
||||||
|
prisma: PrismaClient | undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const prisma =
|
||||||
|
globalForPrisma.prisma ??
|
||||||
|
new PrismaClient({
|
||||||
|
log:
|
||||||
|
process.env.NODE_ENV === "development"
|
||||||
|
? ["warn", "error"]
|
||||||
|
: ["error"],
|
||||||
|
});
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV !== "production") {
|
||||||
|
globalForPrisma.prisma = prisma;
|
||||||
|
}
|
||||||
@@ -0,0 +1,225 @@
|
|||||||
|
import { getJson, getJsonSafe, normalizeBaseUrl, shortSha, toIso } from "./http";
|
||||||
|
import type {
|
||||||
|
BranchInfo,
|
||||||
|
CommitInfo,
|
||||||
|
ConnectionCheck,
|
||||||
|
GitClient,
|
||||||
|
ProviderConfig,
|
||||||
|
ReleaseInfo,
|
||||||
|
RepoListItem,
|
||||||
|
RepoRef,
|
||||||
|
RepoSnapshotData,
|
||||||
|
TagInfo,
|
||||||
|
} from "./types";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gitea (und kompatible Forks wie Forgejo) – API v1.
|
||||||
|
* Authentifizierung per "Authorization: token <PAT>".
|
||||||
|
*/
|
||||||
|
export class GiteaClient implements GitClient {
|
||||||
|
readonly provider = "GITEA" as const;
|
||||||
|
private readonly apiBase: string;
|
||||||
|
private readonly token: string | null;
|
||||||
|
|
||||||
|
constructor(config: ProviderConfig) {
|
||||||
|
const base = normalizeBaseUrl(config.baseUrl);
|
||||||
|
this.apiBase = `${base}/api/v1`;
|
||||||
|
this.token = config.token;
|
||||||
|
}
|
||||||
|
|
||||||
|
private headers(): Record<string, string> {
|
||||||
|
const headers: Record<string, string> = {};
|
||||||
|
if (this.token) headers.Authorization = `token ${this.token}`;
|
||||||
|
return headers;
|
||||||
|
}
|
||||||
|
|
||||||
|
async check(): Promise<ConnectionCheck> {
|
||||||
|
try {
|
||||||
|
const version = await getJsonSafe<{ version?: string }>(
|
||||||
|
`${this.apiBase}/version`,
|
||||||
|
{},
|
||||||
|
{ headers: this.headers() },
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!this.token) {
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
message: `Instanz erreichbar${version.version ? ` (Gitea ${version.version})` : ""} – ohne Token nur oeffentliche Repos.`,
|
||||||
|
user: null,
|
||||||
|
version: version.version ?? null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const user = await getJson<{ login: string; full_name?: string }>(`${this.apiBase}/user`, {
|
||||||
|
headers: this.headers(),
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
message: `Verbunden als ${user.login}${version.version ? ` (Gitea ${version.version})` : ""}`,
|
||||||
|
user: user.login,
|
||||||
|
version: version.version ?? null,
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
return { ok: false, message: error instanceof Error ? error.message : String(error) };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async listRepos(query?: string): Promise<RepoListItem[]> {
|
||||||
|
const url = this.token
|
||||||
|
? `${this.apiBase}/user/repos?limit=100`
|
||||||
|
: `${this.apiBase}/repos/search?limit=50${query ? `&q=${encodeURIComponent(query)}` : ""}`;
|
||||||
|
|
||||||
|
const raw = await getJson<GiteaRepo[] | { data: GiteaRepo[] }>(url, {
|
||||||
|
headers: this.headers(),
|
||||||
|
});
|
||||||
|
const repos = Array.isArray(raw) ? raw : (raw?.data ?? []);
|
||||||
|
const needle = query?.toLowerCase().trim();
|
||||||
|
|
||||||
|
return repos
|
||||||
|
.filter((repo) => !needle || repo.full_name.toLowerCase().includes(needle))
|
||||||
|
.map((repo) => ({
|
||||||
|
fullPath: repo.full_name,
|
||||||
|
owner: repo.owner?.login ?? repo.full_name.split("/")[0] ?? "",
|
||||||
|
name: repo.name,
|
||||||
|
description: repo.description ?? null,
|
||||||
|
htmlUrl: repo.html_url,
|
||||||
|
defaultBranch: repo.default_branch ?? null,
|
||||||
|
visibility: repo.private ? "private" : "public",
|
||||||
|
updatedAt: toIso(repo.updated_at),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
async fetchRepo(ref: RepoRef): Promise<RepoSnapshotData> {
|
||||||
|
const base = `${this.apiBase}/repos/${encodeURIComponent(ref.owner)}/${encodeURIComponent(ref.name)}`;
|
||||||
|
const headers = this.headers();
|
||||||
|
|
||||||
|
const repo = await getJson<GiteaRepo>(base, { headers });
|
||||||
|
|
||||||
|
const [branches, tags, commits, releases, languages, pulls] = await Promise.all([
|
||||||
|
getJsonSafe<GiteaBranch[]>(`${base}/branches?limit=50`, [], { headers }),
|
||||||
|
getJsonSafe<GiteaTag[]>(`${base}/tags?limit=25`, [], { headers }),
|
||||||
|
getJsonSafe<GiteaCommit[]>(`${base}/commits?limit=15&stat=false`, [], { headers }),
|
||||||
|
getJsonSafe<GiteaRelease[]>(`${base}/releases?limit=10`, [], { headers }),
|
||||||
|
getJsonSafe<Record<string, number>>(`${base}/languages`, {}, { headers }),
|
||||||
|
getJsonSafe<GiteaPull[]>(`${base}/pulls?state=open&limit=100`, [], { headers }),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const mappedBranches: BranchInfo[] = branches.map((branch) => ({
|
||||||
|
name: branch.name,
|
||||||
|
sha: branch.commit?.id ?? null,
|
||||||
|
isDefault: branch.name === repo.default_branch,
|
||||||
|
protected: Boolean(branch.protected),
|
||||||
|
lastCommitAt: toIso(branch.commit?.timestamp),
|
||||||
|
lastCommitMessage: branch.commit?.message?.split("\n")[0] ?? null,
|
||||||
|
lastCommitAuthor: branch.commit?.author?.name ?? null,
|
||||||
|
url: `${repo.html_url}/src/branch/${encodeURIComponent(branch.name)}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mappedTags: TagInfo[] = tags.map((tag) => ({
|
||||||
|
name: tag.name,
|
||||||
|
sha: tag.commit?.sha ?? tag.id ?? null,
|
||||||
|
message: tag.message ?? null,
|
||||||
|
date: toIso(tag.commit?.created),
|
||||||
|
url: tag.zipball_url ? `${repo.html_url}/releases/tag/${encodeURIComponent(tag.name)}` : null,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mappedCommits: CommitInfo[] = commits.map((commit) => ({
|
||||||
|
sha: commit.sha,
|
||||||
|
shortSha: shortSha(commit.sha),
|
||||||
|
message: commit.commit?.message?.split("\n")[0] ?? "",
|
||||||
|
author: commit.commit?.author?.name ?? commit.author?.login ?? null,
|
||||||
|
date: toIso(commit.commit?.author?.date ?? commit.created),
|
||||||
|
url: commit.html_url ?? null,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mappedReleases: ReleaseInfo[] = releases.map((release) => ({
|
||||||
|
name: release.name || release.tag_name,
|
||||||
|
tag: release.tag_name,
|
||||||
|
publishedAt: toIso(release.published_at ?? release.created_at),
|
||||||
|
url: release.html_url ?? null,
|
||||||
|
prerelease: Boolean(release.prerelease),
|
||||||
|
draft: Boolean(release.draft),
|
||||||
|
}));
|
||||||
|
|
||||||
|
return {
|
||||||
|
fullName: repo.full_name,
|
||||||
|
description: repo.description ?? null,
|
||||||
|
defaultBranch: repo.default_branch ?? null,
|
||||||
|
htmlUrl: repo.html_url,
|
||||||
|
visibility: repo.private ? "private" : "public",
|
||||||
|
stars: repo.stars_count ?? 0,
|
||||||
|
forks: repo.forks_count ?? 0,
|
||||||
|
openIssues: repo.open_issues_count ?? 0,
|
||||||
|
openPullRequests: repo.open_pr_counter ?? pulls.length,
|
||||||
|
sizeKb: repo.size ?? 0,
|
||||||
|
pushedAt: toIso(repo.updated_at),
|
||||||
|
branches: mappedBranches,
|
||||||
|
tags: mappedTags,
|
||||||
|
commits: mappedCommits,
|
||||||
|
releases: mappedReleases,
|
||||||
|
languages: languages ?? {},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── API-Typen ──────────────────────────────────────────────────
|
||||||
|
|
||||||
|
interface GiteaRepo {
|
||||||
|
full_name: string;
|
||||||
|
name: string;
|
||||||
|
description: string | null;
|
||||||
|
html_url: string;
|
||||||
|
default_branch: string | null;
|
||||||
|
private: boolean;
|
||||||
|
stars_count: number;
|
||||||
|
forks_count: number;
|
||||||
|
open_issues_count: number;
|
||||||
|
open_pr_counter?: number;
|
||||||
|
size: number;
|
||||||
|
updated_at: string | null;
|
||||||
|
owner?: { login: string };
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GiteaBranch {
|
||||||
|
name: string;
|
||||||
|
protected?: boolean;
|
||||||
|
commit?: {
|
||||||
|
id: string;
|
||||||
|
message?: string;
|
||||||
|
timestamp?: string;
|
||||||
|
author?: { name?: string };
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GiteaTag {
|
||||||
|
name: string;
|
||||||
|
id?: string;
|
||||||
|
message?: string | null;
|
||||||
|
zipball_url?: string;
|
||||||
|
commit?: { sha?: string; created?: string };
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GiteaCommit {
|
||||||
|
sha: string;
|
||||||
|
html_url?: string;
|
||||||
|
created?: string;
|
||||||
|
author?: { login?: string } | null;
|
||||||
|
commit?: {
|
||||||
|
message?: string;
|
||||||
|
author?: { name?: string; date?: string };
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GiteaRelease {
|
||||||
|
name: string | null;
|
||||||
|
tag_name: string;
|
||||||
|
published_at: string | null;
|
||||||
|
created_at: string | null;
|
||||||
|
html_url: string | null;
|
||||||
|
prerelease: boolean;
|
||||||
|
draft: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GiteaPull {
|
||||||
|
id: number;
|
||||||
|
}
|
||||||
@@ -0,0 +1,211 @@
|
|||||||
|
import { getJson, getJsonSafe, normalizeBaseUrl, shortSha, toIso } from "./http";
|
||||||
|
import type {
|
||||||
|
BranchInfo,
|
||||||
|
CommitInfo,
|
||||||
|
ConnectionCheck,
|
||||||
|
GitClient,
|
||||||
|
ProviderConfig,
|
||||||
|
ReleaseInfo,
|
||||||
|
RepoListItem,
|
||||||
|
RepoRef,
|
||||||
|
RepoSnapshotData,
|
||||||
|
TagInfo,
|
||||||
|
} from "./types";
|
||||||
|
import { GitApiError } from "./types";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GitHub – funktioniert mit github.com und GitHub Enterprise.
|
||||||
|
* Bei Enterprise liegt die API unter <host>/api/v3.
|
||||||
|
*/
|
||||||
|
export class GitHubClient implements GitClient {
|
||||||
|
readonly provider = "GITHUB" as const;
|
||||||
|
private readonly apiBase: string;
|
||||||
|
private readonly token: string | null;
|
||||||
|
|
||||||
|
constructor(config: ProviderConfig) {
|
||||||
|
const base = normalizeBaseUrl(config.baseUrl || "https://github.com");
|
||||||
|
this.apiBase = /github\.com$/i.test(base) ? "https://api.github.com" : `${base}/api/v3`;
|
||||||
|
this.token = config.token;
|
||||||
|
}
|
||||||
|
|
||||||
|
private headers(): Record<string, string> {
|
||||||
|
const headers: Record<string, string> = {
|
||||||
|
Accept: "application/vnd.github+json",
|
||||||
|
"X-GitHub-Api-Version": "2022-11-28",
|
||||||
|
};
|
||||||
|
if (this.token) headers.Authorization = `Bearer ${this.token}`;
|
||||||
|
return headers;
|
||||||
|
}
|
||||||
|
|
||||||
|
async check(): Promise<ConnectionCheck> {
|
||||||
|
try {
|
||||||
|
if (!this.token) {
|
||||||
|
await getJson(`${this.apiBase}/rate_limit`, { headers: this.headers() });
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
message: "Erreichbar (ohne Token – nur oeffentliche Repos, striktes Rate-Limit).",
|
||||||
|
user: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const user = await getJson<{ login: string; name?: string }>(`${this.apiBase}/user`, {
|
||||||
|
headers: this.headers(),
|
||||||
|
});
|
||||||
|
return { ok: true, message: `Verbunden als ${user.login}`, user: user.login };
|
||||||
|
} catch (error) {
|
||||||
|
return { ok: false, message: error instanceof Error ? error.message : String(error) };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async listRepos(query?: string): Promise<RepoListItem[]> {
|
||||||
|
if (!this.token) {
|
||||||
|
throw new GitApiError("Fuer das Auflisten von Repos wird ein Token benoetigt.", 401, this.apiBase);
|
||||||
|
}
|
||||||
|
const repos = await getJson<GitHubRepo[]>(
|
||||||
|
`${this.apiBase}/user/repos?per_page=100&sort=pushed&affiliation=owner,collaborator,organization_member`,
|
||||||
|
{ headers: this.headers() },
|
||||||
|
);
|
||||||
|
const needle = query?.toLowerCase().trim();
|
||||||
|
return (repos ?? [])
|
||||||
|
.filter((repo) => !needle || repo.full_name.toLowerCase().includes(needle))
|
||||||
|
.map((repo) => ({
|
||||||
|
fullPath: repo.full_name,
|
||||||
|
owner: repo.owner?.login ?? repo.full_name.split("/")[0] ?? "",
|
||||||
|
name: repo.name,
|
||||||
|
description: repo.description ?? null,
|
||||||
|
htmlUrl: repo.html_url,
|
||||||
|
defaultBranch: repo.default_branch ?? null,
|
||||||
|
visibility: repo.private ? "private" : "public",
|
||||||
|
updatedAt: toIso(repo.pushed_at ?? repo.updated_at),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
async fetchRepo(ref: RepoRef): Promise<RepoSnapshotData> {
|
||||||
|
const base = `${this.apiBase}/repos/${encodeURIComponent(ref.owner)}/${encodeURIComponent(ref.name)}`;
|
||||||
|
const headers = this.headers();
|
||||||
|
|
||||||
|
const repo = await getJson<GitHubRepo>(base, { headers });
|
||||||
|
|
||||||
|
const [branches, tags, commits, releases, languages, pulls] = await Promise.all([
|
||||||
|
getJsonSafe<GitHubBranch[]>(`${base}/branches?per_page=50`, [], { headers }),
|
||||||
|
getJsonSafe<GitHubTag[]>(`${base}/tags?per_page=25`, [], { headers }),
|
||||||
|
getJsonSafe<GitHubCommit[]>(`${base}/commits?per_page=15`, [], { headers }),
|
||||||
|
getJsonSafe<GitHubRelease[]>(`${base}/releases?per_page=10`, [], { headers }),
|
||||||
|
getJsonSafe<Record<string, number>>(`${base}/languages`, {}, { headers }),
|
||||||
|
getJsonSafe<GitHubPull[]>(`${base}/pulls?state=open&per_page=100`, [], { headers }),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const mappedBranches: BranchInfo[] = branches.map((branch) => ({
|
||||||
|
name: branch.name,
|
||||||
|
sha: branch.commit?.sha ?? null,
|
||||||
|
isDefault: branch.name === repo.default_branch,
|
||||||
|
protected: Boolean(branch.protected),
|
||||||
|
lastCommitAt: null,
|
||||||
|
lastCommitMessage: null,
|
||||||
|
lastCommitAuthor: null,
|
||||||
|
url: `${repo.html_url}/tree/${encodeURIComponent(branch.name)}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mappedTags: TagInfo[] = tags.map((tag) => ({
|
||||||
|
name: tag.name,
|
||||||
|
sha: tag.commit?.sha ?? null,
|
||||||
|
message: null,
|
||||||
|
date: null,
|
||||||
|
url: `${repo.html_url}/releases/tag/${encodeURIComponent(tag.name)}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mappedCommits: CommitInfo[] = commits.map((entry) => ({
|
||||||
|
sha: entry.sha,
|
||||||
|
shortSha: shortSha(entry.sha),
|
||||||
|
message: entry.commit?.message?.split("\n")[0] ?? "",
|
||||||
|
author: entry.commit?.author?.name ?? entry.author?.login ?? null,
|
||||||
|
date: toIso(entry.commit?.author?.date ?? entry.commit?.committer?.date),
|
||||||
|
url: entry.html_url ?? null,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mappedReleases: ReleaseInfo[] = releases.map((release) => ({
|
||||||
|
name: release.name || release.tag_name,
|
||||||
|
tag: release.tag_name,
|
||||||
|
publishedAt: toIso(release.published_at ?? release.created_at),
|
||||||
|
url: release.html_url ?? null,
|
||||||
|
prerelease: Boolean(release.prerelease),
|
||||||
|
draft: Boolean(release.draft),
|
||||||
|
}));
|
||||||
|
|
||||||
|
// open_issues_count zaehlt bei GitHub PRs mit – hier wieder herausrechnen.
|
||||||
|
const openPullRequests = pulls.length;
|
||||||
|
const openIssues = Math.max(0, (repo.open_issues_count ?? 0) - openPullRequests);
|
||||||
|
|
||||||
|
return {
|
||||||
|
fullName: repo.full_name,
|
||||||
|
description: repo.description ?? null,
|
||||||
|
defaultBranch: repo.default_branch ?? null,
|
||||||
|
htmlUrl: repo.html_url,
|
||||||
|
visibility: repo.private ? "private" : "public",
|
||||||
|
stars: repo.stargazers_count ?? 0,
|
||||||
|
forks: repo.forks_count ?? 0,
|
||||||
|
openIssues,
|
||||||
|
openPullRequests,
|
||||||
|
sizeKb: repo.size ?? 0,
|
||||||
|
pushedAt: toIso(repo.pushed_at),
|
||||||
|
branches: mappedBranches,
|
||||||
|
tags: mappedTags,
|
||||||
|
commits: mappedCommits,
|
||||||
|
releases: mappedReleases,
|
||||||
|
languages: languages ?? {},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── API-Typen (nur die tatsaechlich genutzten Felder) ──────────
|
||||||
|
|
||||||
|
interface GitHubRepo {
|
||||||
|
full_name: string;
|
||||||
|
name: string;
|
||||||
|
description: string | null;
|
||||||
|
html_url: string;
|
||||||
|
default_branch: string;
|
||||||
|
private: boolean;
|
||||||
|
stargazers_count: number;
|
||||||
|
forks_count: number;
|
||||||
|
open_issues_count: number;
|
||||||
|
size: number;
|
||||||
|
pushed_at: string | null;
|
||||||
|
updated_at: string | null;
|
||||||
|
owner?: { login: string };
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GitHubBranch {
|
||||||
|
name: string;
|
||||||
|
protected?: boolean;
|
||||||
|
commit?: { sha: string };
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GitHubTag {
|
||||||
|
name: string;
|
||||||
|
commit?: { sha: string };
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GitHubCommit {
|
||||||
|
sha: string;
|
||||||
|
html_url?: string;
|
||||||
|
author?: { login: string } | null;
|
||||||
|
commit?: {
|
||||||
|
message?: string;
|
||||||
|
author?: { name?: string; date?: string };
|
||||||
|
committer?: { date?: string };
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GitHubRelease {
|
||||||
|
name: string | null;
|
||||||
|
tag_name: string;
|
||||||
|
published_at: string | null;
|
||||||
|
created_at: string | null;
|
||||||
|
html_url: string | null;
|
||||||
|
prerelease: boolean;
|
||||||
|
draft: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GitHubPull {
|
||||||
|
id: number;
|
||||||
|
}
|
||||||
@@ -0,0 +1,209 @@
|
|||||||
|
import { getJson, getJsonSafe, normalizeBaseUrl, shortSha, toIso } from "./http";
|
||||||
|
import type {
|
||||||
|
BranchInfo,
|
||||||
|
CommitInfo,
|
||||||
|
ConnectionCheck,
|
||||||
|
GitClient,
|
||||||
|
ProviderConfig,
|
||||||
|
ReleaseInfo,
|
||||||
|
RepoListItem,
|
||||||
|
RepoRef,
|
||||||
|
RepoSnapshotData,
|
||||||
|
TagInfo,
|
||||||
|
} from "./types";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GitLab – gitlab.com und selbst gehostete Instanzen (API v4).
|
||||||
|
* Projekte werden ueber den URL-kodierten Pfad "gruppe%2Fprojekt" adressiert,
|
||||||
|
* daher funktionieren auch verschachtelte Gruppen.
|
||||||
|
*/
|
||||||
|
export class GitLabClient implements GitClient {
|
||||||
|
readonly provider = "GITLAB" as const;
|
||||||
|
private readonly apiBase: string;
|
||||||
|
private readonly token: string | null;
|
||||||
|
|
||||||
|
constructor(config: ProviderConfig) {
|
||||||
|
const base = normalizeBaseUrl(config.baseUrl || "https://gitlab.com");
|
||||||
|
this.apiBase = `${base}/api/v4`;
|
||||||
|
this.token = config.token;
|
||||||
|
}
|
||||||
|
|
||||||
|
private headers(): Record<string, string> {
|
||||||
|
const headers: Record<string, string> = {};
|
||||||
|
if (this.token) headers["PRIVATE-TOKEN"] = this.token;
|
||||||
|
return headers;
|
||||||
|
}
|
||||||
|
|
||||||
|
async check(): Promise<ConnectionCheck> {
|
||||||
|
try {
|
||||||
|
if (!this.token) {
|
||||||
|
await getJson(`${this.apiBase}/projects?per_page=1`, { headers: this.headers() });
|
||||||
|
return { ok: true, message: "Erreichbar (ohne Token – nur oeffentliche Projekte).", user: null };
|
||||||
|
}
|
||||||
|
const user = await getJson<{ username: string; name?: string }>(`${this.apiBase}/user`, {
|
||||||
|
headers: this.headers(),
|
||||||
|
});
|
||||||
|
return { ok: true, message: `Verbunden als ${user.username}`, user: user.username };
|
||||||
|
} catch (error) {
|
||||||
|
return { ok: false, message: error instanceof Error ? error.message : String(error) };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async listRepos(query?: string): Promise<RepoListItem[]> {
|
||||||
|
const search = query ? `&search=${encodeURIComponent(query)}` : "";
|
||||||
|
const url = this.token
|
||||||
|
? `${this.apiBase}/projects?membership=true&per_page=100&order_by=last_activity_at${search}`
|
||||||
|
: `${this.apiBase}/projects?per_page=50&order_by=last_activity_at${search}`;
|
||||||
|
|
||||||
|
const projects = await getJson<GitLabProject[]>(url, { headers: this.headers() });
|
||||||
|
return (projects ?? []).map((project) => {
|
||||||
|
const path = project.path_with_namespace;
|
||||||
|
const segments = path.split("/");
|
||||||
|
return {
|
||||||
|
fullPath: path,
|
||||||
|
owner: segments.slice(0, -1).join("/"),
|
||||||
|
name: segments[segments.length - 1] ?? project.name,
|
||||||
|
description: project.description ?? null,
|
||||||
|
htmlUrl: project.web_url,
|
||||||
|
defaultBranch: project.default_branch ?? null,
|
||||||
|
visibility: project.visibility ?? null,
|
||||||
|
updatedAt: toIso(project.last_activity_at),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async fetchRepo(ref: RepoRef): Promise<RepoSnapshotData> {
|
||||||
|
const path = [ref.owner, ref.name].filter(Boolean).join("/");
|
||||||
|
const encoded = encodeURIComponent(path);
|
||||||
|
const base = `${this.apiBase}/projects/${encoded}`;
|
||||||
|
const headers = this.headers();
|
||||||
|
|
||||||
|
const project = await getJson<GitLabProject>(`${base}?statistics=true`, { headers });
|
||||||
|
|
||||||
|
const [branches, tags, commits, releases, languages, mergeRequests] = await Promise.all([
|
||||||
|
getJsonSafe<GitLabBranch[]>(`${base}/repository/branches?per_page=50`, [], { headers }),
|
||||||
|
getJsonSafe<GitLabTag[]>(`${base}/repository/tags?per_page=25`, [], { headers }),
|
||||||
|
getJsonSafe<GitLabCommit[]>(`${base}/repository/commits?per_page=15`, [], { headers }),
|
||||||
|
getJsonSafe<GitLabRelease[]>(`${base}/releases?per_page=10`, [], { headers }),
|
||||||
|
getJsonSafe<Record<string, number>>(`${base}/languages`, {}, { headers }),
|
||||||
|
getJsonSafe<GitLabMergeRequest[]>(`${base}/merge_requests?state=opened&per_page=100`, [], {
|
||||||
|
headers,
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const mappedBranches: BranchInfo[] = branches.map((branch) => ({
|
||||||
|
name: branch.name,
|
||||||
|
sha: branch.commit?.id ?? null,
|
||||||
|
isDefault: Boolean(branch.default),
|
||||||
|
protected: Boolean(branch.protected),
|
||||||
|
lastCommitAt: toIso(branch.commit?.committed_date ?? branch.commit?.created_at),
|
||||||
|
lastCommitMessage: branch.commit?.title ?? null,
|
||||||
|
lastCommitAuthor: branch.commit?.author_name ?? null,
|
||||||
|
url: branch.web_url ?? null,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mappedTags: TagInfo[] = tags.map((tag) => ({
|
||||||
|
name: tag.name,
|
||||||
|
sha: tag.commit?.id ?? null,
|
||||||
|
message: tag.message ?? null,
|
||||||
|
date: toIso(tag.commit?.committed_date ?? tag.commit?.created_at),
|
||||||
|
url: `${project.web_url}/-/tags/${encodeURIComponent(tag.name)}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mappedCommits: CommitInfo[] = commits.map((commit) => ({
|
||||||
|
sha: commit.id,
|
||||||
|
shortSha: commit.short_id ?? shortSha(commit.id),
|
||||||
|
message: commit.title ?? commit.message?.split("\n")[0] ?? "",
|
||||||
|
author: commit.author_name ?? null,
|
||||||
|
date: toIso(commit.committed_date ?? commit.created_at),
|
||||||
|
url: commit.web_url ?? null,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mappedReleases: ReleaseInfo[] = releases.map((release) => ({
|
||||||
|
name: release.name || release.tag_name,
|
||||||
|
tag: release.tag_name,
|
||||||
|
publishedAt: toIso(release.released_at ?? release.created_at),
|
||||||
|
url: release._links?.self ?? null,
|
||||||
|
prerelease: Boolean(release.upcoming_release),
|
||||||
|
draft: false,
|
||||||
|
}));
|
||||||
|
|
||||||
|
return {
|
||||||
|
fullName: project.path_with_namespace,
|
||||||
|
description: project.description ?? null,
|
||||||
|
defaultBranch: project.default_branch ?? null,
|
||||||
|
htmlUrl: project.web_url,
|
||||||
|
visibility: project.visibility ?? null,
|
||||||
|
stars: project.star_count ?? 0,
|
||||||
|
forks: project.forks_count ?? 0,
|
||||||
|
openIssues: project.open_issues_count ?? 0,
|
||||||
|
openPullRequests: mergeRequests.length,
|
||||||
|
sizeKb: project.statistics?.repository_size
|
||||||
|
? Math.round(project.statistics.repository_size / 1024)
|
||||||
|
: 0,
|
||||||
|
pushedAt: toIso(project.last_activity_at),
|
||||||
|
branches: mappedBranches,
|
||||||
|
tags: mappedTags,
|
||||||
|
commits: mappedCommits,
|
||||||
|
releases: mappedReleases,
|
||||||
|
languages: languages ?? {},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── API-Typen ──────────────────────────────────────────────────
|
||||||
|
|
||||||
|
interface GitLabProject {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
path_with_namespace: string;
|
||||||
|
description: string | null;
|
||||||
|
web_url: string;
|
||||||
|
default_branch: string | null;
|
||||||
|
visibility: string | null;
|
||||||
|
star_count: number;
|
||||||
|
forks_count: number;
|
||||||
|
open_issues_count: number;
|
||||||
|
last_activity_at: string | null;
|
||||||
|
statistics?: { repository_size?: number };
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GitLabCommitStub {
|
||||||
|
id: string;
|
||||||
|
short_id?: string;
|
||||||
|
title?: string;
|
||||||
|
message?: string;
|
||||||
|
author_name?: string;
|
||||||
|
committed_date?: string;
|
||||||
|
created_at?: string;
|
||||||
|
web_url?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GitLabBranch {
|
||||||
|
name: string;
|
||||||
|
default?: boolean;
|
||||||
|
protected?: boolean;
|
||||||
|
web_url?: string;
|
||||||
|
commit?: GitLabCommitStub;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GitLabTag {
|
||||||
|
name: string;
|
||||||
|
message: string | null;
|
||||||
|
commit?: GitLabCommitStub;
|
||||||
|
}
|
||||||
|
|
||||||
|
type GitLabCommit = GitLabCommitStub;
|
||||||
|
|
||||||
|
interface GitLabRelease {
|
||||||
|
name: string | null;
|
||||||
|
tag_name: string;
|
||||||
|
released_at: string | null;
|
||||||
|
created_at: string | null;
|
||||||
|
upcoming_release?: boolean;
|
||||||
|
_links?: { self?: string };
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GitLabMergeRequest {
|
||||||
|
id: number;
|
||||||
|
}
|
||||||
@@ -0,0 +1,107 @@
|
|||||||
|
import { GitApiError } from "./types";
|
||||||
|
|
||||||
|
const DEFAULT_TIMEOUT = Number(process.env.GIT_API_TIMEOUT_MS ?? 15000);
|
||||||
|
|
||||||
|
export interface FetchOptions {
|
||||||
|
headers?: Record<string, string>;
|
||||||
|
timeoutMs?: number;
|
||||||
|
/** Wenn true, liefert die Funktion bei 404 null statt zu werfen. */
|
||||||
|
allow404?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Entfernt einen abschliessenden Slash, damit URLs sauber zusammengesetzt werden. */
|
||||||
|
export function normalizeBaseUrl(baseUrl: string): string {
|
||||||
|
return baseUrl.trim().replace(/\/+$/, "");
|
||||||
|
}
|
||||||
|
|
||||||
|
function friendlyMessage(status: number, url: string, body: string): string {
|
||||||
|
switch (status) {
|
||||||
|
case 401:
|
||||||
|
return "Nicht autorisiert (401) – Token fehlt, ist abgelaufen oder ungueltig.";
|
||||||
|
case 403:
|
||||||
|
return body.toLowerCase().includes("rate limit")
|
||||||
|
? "Rate-Limit erreicht (403) – bitte spaeter erneut versuchen oder Token hinterlegen."
|
||||||
|
: "Zugriff verweigert (403) – Token hat nicht die noetigen Scopes.";
|
||||||
|
case 404:
|
||||||
|
return "Nicht gefunden (404) – Repo-Pfad pruefen oder Token hat keinen Lesezugriff.";
|
||||||
|
case 429:
|
||||||
|
return "Zu viele Anfragen (429) – Rate-Limit des Git-Systems.";
|
||||||
|
default:
|
||||||
|
if (status >= 500) return `Serverfehler ${status} beim Git-System.`;
|
||||||
|
return `Anfrage fehlgeschlagen (${status}) auf ${url}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** GET mit Timeout, JSON-Parsing und sprechenden Fehlern. */
|
||||||
|
export async function getJson<T>(
|
||||||
|
url: string,
|
||||||
|
options: FetchOptions = {},
|
||||||
|
): Promise<T> {
|
||||||
|
const controller = new AbortController();
|
||||||
|
const timeout = setTimeout(
|
||||||
|
() => controller.abort(),
|
||||||
|
options.timeoutMs ?? DEFAULT_TIMEOUT,
|
||||||
|
);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, {
|
||||||
|
headers: {
|
||||||
|
Accept: "application/json",
|
||||||
|
"User-Agent": "Nebula-Dashboard",
|
||||||
|
...options.headers,
|
||||||
|
},
|
||||||
|
signal: controller.signal,
|
||||||
|
cache: "no-store",
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.status === 404 && options.allow404) {
|
||||||
|
return null as T;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const body = await response.text().catch(() => "");
|
||||||
|
throw new GitApiError(friendlyMessage(response.status, url, body), response.status, url);
|
||||||
|
}
|
||||||
|
|
||||||
|
const text = await response.text();
|
||||||
|
if (!text) return null as T;
|
||||||
|
return JSON.parse(text) as T;
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof GitApiError) throw error;
|
||||||
|
if (error instanceof Error && error.name === "AbortError") {
|
||||||
|
throw new GitApiError(
|
||||||
|
`Zeitueberschreitung nach ${options.timeoutMs ?? DEFAULT_TIMEOUT} ms`,
|
||||||
|
408,
|
||||||
|
url,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const reason = error instanceof Error ? error.message : String(error);
|
||||||
|
throw new GitApiError(`Verbindung fehlgeschlagen: ${reason}`, 0, url);
|
||||||
|
} finally {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Wie getJson, gibt aber bei jedem Fehler den Fallback zurueck. */
|
||||||
|
export async function getJsonSafe<T>(
|
||||||
|
url: string,
|
||||||
|
fallback: T,
|
||||||
|
options: FetchOptions = {},
|
||||||
|
): Promise<T> {
|
||||||
|
try {
|
||||||
|
const result = await getJson<T>(url, options);
|
||||||
|
return (result ?? fallback) as T;
|
||||||
|
} catch {
|
||||||
|
return fallback;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function toIso(value: unknown): string | null {
|
||||||
|
if (!value) return null;
|
||||||
|
const date = new Date(String(value));
|
||||||
|
return Number.isNaN(date.getTime()) ? null : date.toISOString();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function shortSha(sha: string | null | undefined): string {
|
||||||
|
return (sha ?? "").slice(0, 7);
|
||||||
|
}
|
||||||
@@ -0,0 +1,105 @@
|
|||||||
|
import type { GitConnection } from "@prisma/client";
|
||||||
|
import { tryDecryptSecret } from "@/lib/crypto";
|
||||||
|
import { GiteaClient } from "./gitea";
|
||||||
|
import { GitHubClient } from "./github";
|
||||||
|
import { GitLabClient } from "./gitlab";
|
||||||
|
import { guessProvider } from "./meta";
|
||||||
|
import type { GitClient, ProviderConfig, ProviderKind, RepoRef } from "./types";
|
||||||
|
|
||||||
|
export * from "./types";
|
||||||
|
export { GiteaClient, GitHubClient, GitLabClient };
|
||||||
|
// PROVIDER_META liegt in ./meta, damit Client-Komponenten es ohne
|
||||||
|
// node:crypto-Abhaengigkeit importieren koennen.
|
||||||
|
export { PROVIDER_META, guessProvider } from "./meta";
|
||||||
|
|
||||||
|
export function createClient(config: ProviderConfig): GitClient {
|
||||||
|
switch (config.provider) {
|
||||||
|
case "GITHUB":
|
||||||
|
return new GitHubClient(config);
|
||||||
|
case "GITLAB":
|
||||||
|
return new GitLabClient(config);
|
||||||
|
case "GITEA":
|
||||||
|
return new GiteaClient(config);
|
||||||
|
default: {
|
||||||
|
const exhaustive: never = config.provider;
|
||||||
|
throw new Error(`Unbekannter Provider: ${String(exhaustive)}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Baut einen Client aus einer gespeicherten Verbindung (Token wird entschluesselt). */
|
||||||
|
export function clientForConnection(connection: GitConnection): GitClient {
|
||||||
|
return createClient({
|
||||||
|
provider: connection.provider,
|
||||||
|
baseUrl: connection.baseUrl,
|
||||||
|
token: tryDecryptSecret(connection.tokenCipher),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ParsedRepoUrl {
|
||||||
|
host: string;
|
||||||
|
baseUrl: string;
|
||||||
|
owner: string;
|
||||||
|
name: string;
|
||||||
|
/** Aus dem Host geratener Provider – vom Nutzer ueberschreibbar. */
|
||||||
|
guessedProvider: ProviderKind;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Zerlegt eine Repository-URL. Unterstuetzt:
|
||||||
|
* https://github.com/user/repo(.git)
|
||||||
|
* git@gitlab.com:gruppe/subgruppe/repo.git
|
||||||
|
* https://git.firma.de/team/repo
|
||||||
|
*/
|
||||||
|
export function parseRepoUrl(input: string): ParsedRepoUrl | null {
|
||||||
|
const raw = input.trim();
|
||||||
|
if (!raw) return null;
|
||||||
|
|
||||||
|
let host = "";
|
||||||
|
let path = "";
|
||||||
|
let protocol = "https";
|
||||||
|
|
||||||
|
const sshMatch = raw.match(/^(?:ssh:\/\/)?(?:[\w.-]+@)([^/:]+)[:/](.+)$/);
|
||||||
|
if (sshMatch && !raw.startsWith("http")) {
|
||||||
|
host = sshMatch[1];
|
||||||
|
path = sshMatch[2];
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
const url = new URL(raw.includes("://") ? raw : `https://${raw}`);
|
||||||
|
host = url.host;
|
||||||
|
path = url.pathname;
|
||||||
|
protocol = url.protocol.replace(":", "") || "https";
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const segments = path
|
||||||
|
.replace(/\.git$/i, "")
|
||||||
|
.split("/")
|
||||||
|
.filter(Boolean)
|
||||||
|
// GitLab-Weboberflaeche haengt bei Unterseiten "/-/tree/main" an.
|
||||||
|
.reduce<string[]>((acc, segment) => {
|
||||||
|
if (segment === "-") return acc.length ? [...acc, "__STOP__"] : acc;
|
||||||
|
if (acc.includes("__STOP__")) return acc;
|
||||||
|
return [...acc, segment];
|
||||||
|
}, [])
|
||||||
|
.filter((segment) => segment !== "__STOP__");
|
||||||
|
|
||||||
|
if (segments.length < 2) return null;
|
||||||
|
|
||||||
|
const name = segments[segments.length - 1];
|
||||||
|
const owner = segments.slice(0, -1).join("/");
|
||||||
|
|
||||||
|
return {
|
||||||
|
host,
|
||||||
|
baseUrl: `${protocol}://${host}`,
|
||||||
|
owner,
|
||||||
|
name,
|
||||||
|
guessedProvider: guessProvider(host),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function repoRefFrom(owner: string, name: string): RepoRef {
|
||||||
|
return { owner, name };
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import type { ProviderKind } from "./types";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reine Metadaten zu den Git-Systemen – bewusst frei von Node-Imports,
|
||||||
|
* damit dieses Modul auch in Client-Komponenten benutzt werden kann.
|
||||||
|
*/
|
||||||
|
export const PROVIDER_META: Record<
|
||||||
|
ProviderKind,
|
||||||
|
{ label: string; defaultBaseUrl: string; tokenHelp: string; docsUrl: string }
|
||||||
|
> = {
|
||||||
|
GITHUB: {
|
||||||
|
label: "GitHub",
|
||||||
|
defaultBaseUrl: "https://github.com",
|
||||||
|
tokenHelp:
|
||||||
|
"Fine-grained Token mit Lesezugriff auf Contents, Metadata, Issues und Pull Requests.",
|
||||||
|
docsUrl: "https://github.com/settings/tokens",
|
||||||
|
},
|
||||||
|
GITLAB: {
|
||||||
|
label: "GitLab",
|
||||||
|
defaultBaseUrl: "https://gitlab.com",
|
||||||
|
tokenHelp: "Personal Access Token mit Scope 'read_api' (bzw. 'read_repository').",
|
||||||
|
docsUrl: "https://gitlab.com/-/user_settings/personal_access_tokens",
|
||||||
|
},
|
||||||
|
GITEA: {
|
||||||
|
label: "Gitea / Forgejo",
|
||||||
|
defaultBaseUrl: "https://git.example.com",
|
||||||
|
tokenHelp: "Access Token mit Leserechten auf repository, issue und user.",
|
||||||
|
docsUrl: "https://docs.gitea.com/development/api-usage",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export function guessProvider(host: string): ProviderKind {
|
||||||
|
const lower = host.toLowerCase();
|
||||||
|
if (lower.includes("github")) return "GITHUB";
|
||||||
|
if (lower.includes("gitlab")) return "GITLAB";
|
||||||
|
return "GITEA";
|
||||||
|
}
|
||||||
@@ -0,0 +1,117 @@
|
|||||||
|
import type { GitProvider } from "@prisma/client";
|
||||||
|
|
||||||
|
export type ProviderKind = GitProvider;
|
||||||
|
|
||||||
|
/** Zeiger auf ein konkretes Repository. */
|
||||||
|
export interface RepoRef {
|
||||||
|
/** Owner / Namespace / Gruppe – bei GitLab auch verschachtelt ("gruppe/sub"). */
|
||||||
|
owner: string;
|
||||||
|
/** Repository-Name ohne Namespace. */
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface BranchInfo {
|
||||||
|
name: string;
|
||||||
|
sha: string | null;
|
||||||
|
isDefault: boolean;
|
||||||
|
protected: boolean;
|
||||||
|
lastCommitAt: string | null;
|
||||||
|
lastCommitMessage: string | null;
|
||||||
|
lastCommitAuthor: string | null;
|
||||||
|
url: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TagInfo {
|
||||||
|
name: string;
|
||||||
|
sha: string | null;
|
||||||
|
message: string | null;
|
||||||
|
date: string | null;
|
||||||
|
url: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CommitInfo {
|
||||||
|
sha: string;
|
||||||
|
shortSha: string;
|
||||||
|
message: string;
|
||||||
|
author: string | null;
|
||||||
|
date: string | null;
|
||||||
|
url: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ReleaseInfo {
|
||||||
|
name: string;
|
||||||
|
tag: string;
|
||||||
|
publishedAt: string | null;
|
||||||
|
url: string | null;
|
||||||
|
prerelease: boolean;
|
||||||
|
draft: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RepoOverview {
|
||||||
|
fullName: string;
|
||||||
|
description: string | null;
|
||||||
|
defaultBranch: string | null;
|
||||||
|
htmlUrl: string | null;
|
||||||
|
visibility: string | null;
|
||||||
|
stars: number;
|
||||||
|
forks: number;
|
||||||
|
openIssues: number;
|
||||||
|
openPullRequests: number;
|
||||||
|
sizeKb: number;
|
||||||
|
pushedAt: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RepoSnapshotData extends RepoOverview {
|
||||||
|
branches: BranchInfo[];
|
||||||
|
tags: TagInfo[];
|
||||||
|
commits: CommitInfo[];
|
||||||
|
releases: ReleaseInfo[];
|
||||||
|
languages: Record<string, number>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RepoListItem {
|
||||||
|
fullPath: string;
|
||||||
|
owner: string;
|
||||||
|
name: string;
|
||||||
|
description: string | null;
|
||||||
|
htmlUrl: string;
|
||||||
|
defaultBranch: string | null;
|
||||||
|
visibility: string | null;
|
||||||
|
updatedAt: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ConnectionCheck {
|
||||||
|
ok: boolean;
|
||||||
|
message: string;
|
||||||
|
user?: string | null;
|
||||||
|
version?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProviderConfig {
|
||||||
|
provider: ProviderKind;
|
||||||
|
baseUrl: string;
|
||||||
|
token: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GitClient {
|
||||||
|
readonly provider: ProviderKind;
|
||||||
|
/** Prueft Erreichbarkeit und Token-Gueltigkeit. */
|
||||||
|
check(): Promise<ConnectionCheck>;
|
||||||
|
/** Repos, auf die der Token Zugriff hat (fuer die Auswahl beim Verknuepfen). */
|
||||||
|
listRepos(query?: string): Promise<RepoListItem[]>;
|
||||||
|
/** Vollstaendiger Stand eines Repositories. */
|
||||||
|
fetchRepo(ref: RepoRef): Promise<RepoSnapshotData>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Fehler mit HTTP-Kontext, damit die UI verstaendliche Meldungen zeigen kann. */
|
||||||
|
export class GitApiError extends Error {
|
||||||
|
readonly status: number;
|
||||||
|
readonly url: string;
|
||||||
|
|
||||||
|
constructor(message: string, status: number, url: string) {
|
||||||
|
super(message);
|
||||||
|
this.name = "GitApiError";
|
||||||
|
this.status = status;
|
||||||
|
this.url = url;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import { Prisma } from "@prisma/client";
|
||||||
|
import { prisma } from "@/lib/db";
|
||||||
|
import { slugify } from "@/lib/utils";
|
||||||
|
|
||||||
|
/** Erzeugt einen eindeutigen Slug, notfalls mit angehaengtem Zaehler. */
|
||||||
|
export async function uniqueSlug(name: string, ignoreId?: string): Promise<string> {
|
||||||
|
const base = slugify(name) || "projekt";
|
||||||
|
let candidate = base;
|
||||||
|
let counter = 2;
|
||||||
|
|
||||||
|
// In der Praxis endet die Schleife nach wenigen Runden.
|
||||||
|
for (let attempt = 0; attempt < 50; attempt += 1) {
|
||||||
|
const existing = await prisma.project.findUnique({
|
||||||
|
where: { slug: candidate },
|
||||||
|
select: { id: true },
|
||||||
|
});
|
||||||
|
if (!existing || existing.id === ignoreId) return candidate;
|
||||||
|
candidate = `${base}-${counter}`;
|
||||||
|
counter += 1;
|
||||||
|
}
|
||||||
|
return `${base}-${Date.now()}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Verbindungsfelder, die an den Browser gehen duerfen.
|
||||||
|
* tokenCipher ist bewusst nicht dabei.
|
||||||
|
*/
|
||||||
|
export const connectionSafeSelect = Prisma.validator<Prisma.GitConnectionSelect>()({
|
||||||
|
id: true,
|
||||||
|
name: true,
|
||||||
|
provider: true,
|
||||||
|
baseUrl: true,
|
||||||
|
username: true,
|
||||||
|
tokenHint: true,
|
||||||
|
lastCheckedAt: true,
|
||||||
|
lastCheckOk: true,
|
||||||
|
lastCheckMessage: true,
|
||||||
|
createdAt: true,
|
||||||
|
updatedAt: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const projectListInclude = Prisma.validator<Prisma.ProjectInclude>()({
|
||||||
|
connection: { select: connectionSafeSelect },
|
||||||
|
snapshot: true,
|
||||||
|
_count: { select: { notes: true } },
|
||||||
|
});
|
||||||
|
|
||||||
|
export const projectDetailInclude = Prisma.validator<Prisma.ProjectInclude>()({
|
||||||
|
connection: { select: connectionSafeSelect },
|
||||||
|
snapshot: true,
|
||||||
|
notes: {
|
||||||
|
orderBy: [{ pinned: "desc" }, { updatedAt: "desc" }],
|
||||||
|
},
|
||||||
|
_count: { select: { notes: true } },
|
||||||
|
});
|
||||||
@@ -0,0 +1,98 @@
|
|||||||
|
import type { ProjectStatus } from "@prisma/client";
|
||||||
|
|
||||||
|
export type StatusMeta = {
|
||||||
|
value: ProjectStatus;
|
||||||
|
label: string;
|
||||||
|
short: string;
|
||||||
|
/** Tailwind-Klassen fuer Pills/Badges */
|
||||||
|
className: string;
|
||||||
|
/** Reine Farbe fuer Punkte, Balken und Glows */
|
||||||
|
color: string;
|
||||||
|
description: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const STATUS_ORDER: ProjectStatus[] = [
|
||||||
|
"IDEA",
|
||||||
|
"PLANNING",
|
||||||
|
"OPEN",
|
||||||
|
"IN_DEVELOPMENT",
|
||||||
|
"DONE",
|
||||||
|
"ARCHIVED",
|
||||||
|
];
|
||||||
|
|
||||||
|
export const STATUS_META: Record<ProjectStatus, StatusMeta> = {
|
||||||
|
IDEA: {
|
||||||
|
value: "IDEA",
|
||||||
|
label: "Idee",
|
||||||
|
short: "Idee",
|
||||||
|
className: "bg-cyan-500/12 text-cyan-200 ring-cyan-400/30",
|
||||||
|
color: "#22d3ee",
|
||||||
|
description: "Noch ein Gedanke – nichts gebaut, nichts entschieden.",
|
||||||
|
},
|
||||||
|
PLANNING: {
|
||||||
|
value: "PLANNING",
|
||||||
|
label: "In Planung",
|
||||||
|
short: "Planung",
|
||||||
|
className: "bg-blue-500/12 text-blue-200 ring-blue-400/30",
|
||||||
|
color: "#60a5fa",
|
||||||
|
description: "Scope, Stack und Schnitt werden gerade festgelegt.",
|
||||||
|
},
|
||||||
|
OPEN: {
|
||||||
|
value: "OPEN",
|
||||||
|
label: "Offen",
|
||||||
|
short: "Offen",
|
||||||
|
className: "bg-amber-500/12 text-amber-200 ring-amber-400/30",
|
||||||
|
color: "#fbbf24",
|
||||||
|
description: "Startklar, aber aktuell liegt es still.",
|
||||||
|
},
|
||||||
|
IN_DEVELOPMENT: {
|
||||||
|
value: "IN_DEVELOPMENT",
|
||||||
|
label: "In Entwicklung",
|
||||||
|
short: "Aktiv",
|
||||||
|
className: "bg-violet-500/12 text-violet-200 ring-violet-400/30",
|
||||||
|
color: "#a78bfa",
|
||||||
|
description: "Wird gerade aktiv gebaut.",
|
||||||
|
},
|
||||||
|
DONE: {
|
||||||
|
value: "DONE",
|
||||||
|
label: "Fertig",
|
||||||
|
short: "Fertig",
|
||||||
|
className: "bg-emerald-500/12 text-emerald-200 ring-emerald-400/30",
|
||||||
|
color: "#34d399",
|
||||||
|
description: "Ausgeliefert und abgeschlossen.",
|
||||||
|
},
|
||||||
|
ARCHIVED: {
|
||||||
|
value: "ARCHIVED",
|
||||||
|
label: "Archiviert",
|
||||||
|
short: "Archiv",
|
||||||
|
className: "bg-slate-500/12 text-slate-300 ring-slate-400/25",
|
||||||
|
color: "#94a3b8",
|
||||||
|
description: "Ruht im Archiv – bleibt erhalten, stoert aber nicht mehr.",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const PRIORITY_META: Record<number, { label: string; color: string }> = {
|
||||||
|
1: { label: "Niedrig", color: "#64748b" },
|
||||||
|
2: { label: "Normal", color: "#38bdf8" },
|
||||||
|
3: { label: "Hoch", color: "#fb923c" },
|
||||||
|
4: { label: "Kritisch", color: "#f43f5e" },
|
||||||
|
};
|
||||||
|
|
||||||
|
export type AccentKey = "violet" | "cyan" | "emerald" | "amber" | "rose" | "blue";
|
||||||
|
|
||||||
|
export const ACCENTS: Record<AccentKey, { label: string; from: string; to: string }> = {
|
||||||
|
violet: { label: "Violett", from: "#8b5cf6", to: "#d946ef" },
|
||||||
|
cyan: { label: "Cyan", from: "#06b6d4", to: "#3b82f6" },
|
||||||
|
emerald: { label: "Smaragd", from: "#10b981", to: "#84cc16" },
|
||||||
|
amber: { label: "Bernstein", from: "#f59e0b", to: "#f43f5e" },
|
||||||
|
rose: { label: "Rose", from: "#f43f5e", to: "#8b5cf6" },
|
||||||
|
blue: { label: "Blau", from: "#3b82f6", to: "#6366f1" },
|
||||||
|
};
|
||||||
|
|
||||||
|
export function accentOf(key: string | null | undefined) {
|
||||||
|
return ACCENTS[(key ?? "violet") as AccentKey] ?? ACCENTS.violet;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function statusOf(status: ProjectStatus | string): StatusMeta {
|
||||||
|
return STATUS_META[status as ProjectStatus] ?? STATUS_META.IDEA;
|
||||||
|
}
|
||||||
+135
@@ -0,0 +1,135 @@
|
|||||||
|
import type { Project } from "@prisma/client";
|
||||||
|
import { prisma } from "@/lib/db";
|
||||||
|
import { clientForConnection, createClient, parseRepoUrl } from "@/lib/git";
|
||||||
|
import type { RepoSnapshotData } from "@/lib/git/types";
|
||||||
|
|
||||||
|
export interface SyncResult {
|
||||||
|
ok: boolean;
|
||||||
|
message: string;
|
||||||
|
fetchedAt?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Holt den aktuellen Stand des verknuepften Repositories und schreibt ihn
|
||||||
|
* als Snapshot in die Datenbank. Fehler werden am Projekt vermerkt statt
|
||||||
|
* geworfen, damit ein kaputtes Repo nicht das ganze Dashboard blockiert.
|
||||||
|
*/
|
||||||
|
export async function syncProject(projectId: string): Promise<SyncResult> {
|
||||||
|
const project = await prisma.project.findUnique({
|
||||||
|
where: { id: projectId },
|
||||||
|
include: { connection: true },
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!project) {
|
||||||
|
return { ok: false, message: "Projekt nicht gefunden." };
|
||||||
|
}
|
||||||
|
|
||||||
|
const ref = resolveRepoRef(project);
|
||||||
|
if (!ref) {
|
||||||
|
return {
|
||||||
|
ok: false,
|
||||||
|
message: "Kein Repository hinterlegt – bitte Repo-URL oder Owner/Name setzen.",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let client;
|
||||||
|
if (project.connection) {
|
||||||
|
client = clientForConnection(project.connection);
|
||||||
|
} else {
|
||||||
|
// Ohne gespeicherte Verbindung: anonymer Zugriff anhand der URL.
|
||||||
|
const parsed = project.repoUrl ? parseRepoUrl(project.repoUrl) : null;
|
||||||
|
if (!parsed) {
|
||||||
|
return {
|
||||||
|
ok: false,
|
||||||
|
message: "Keine Git-Verbindung ausgewaehlt und die Repo-URL ist nicht auswertbar.",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
client = createClient({
|
||||||
|
provider: parsed.guessedProvider,
|
||||||
|
baseUrl: parsed.baseUrl,
|
||||||
|
token: null,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await client.fetchRepo(ref);
|
||||||
|
await persistSnapshot(project.id, data);
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
message: `Snapshot aktualisiert: ${data.branches.length} Branches, ${data.tags.length} Tags.`,
|
||||||
|
fetchedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
const message = error instanceof Error ? error.message : String(error);
|
||||||
|
await prisma.project.update({
|
||||||
|
where: { id: project.id },
|
||||||
|
data: { syncError: message, lastSyncedAt: new Date() },
|
||||||
|
});
|
||||||
|
return { ok: false, message };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Owner/Name aus den Feldern oder ersatzweise aus der URL bestimmen. */
|
||||||
|
export function resolveRepoRef(project: Project) {
|
||||||
|
if (project.repoOwner && project.repoName) {
|
||||||
|
return { owner: project.repoOwner, name: project.repoName };
|
||||||
|
}
|
||||||
|
if (project.repoUrl) {
|
||||||
|
const parsed = parseRepoUrl(project.repoUrl);
|
||||||
|
if (parsed) return { owner: parsed.owner, name: parsed.name };
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function persistSnapshot(projectId: string, data: RepoSnapshotData) {
|
||||||
|
const latestCommit = data.commits[0] ?? null;
|
||||||
|
const latestRelease =
|
||||||
|
data.releases.find((release) => !release.draft && !release.prerelease) ?? data.releases[0] ?? null;
|
||||||
|
const latestTag = data.tags[0]?.name ?? latestRelease?.tag ?? null;
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
fullName: data.fullName,
|
||||||
|
description: data.description,
|
||||||
|
defaultBranch: data.defaultBranch,
|
||||||
|
htmlUrl: data.htmlUrl,
|
||||||
|
visibility: data.visibility,
|
||||||
|
stars: data.stars,
|
||||||
|
forks: data.forks,
|
||||||
|
openIssues: data.openIssues,
|
||||||
|
openPullRequests: data.openPullRequests,
|
||||||
|
sizeKb: data.sizeKb,
|
||||||
|
lastCommitSha: latestCommit?.sha ?? null,
|
||||||
|
lastCommitMessage: latestCommit?.message ?? null,
|
||||||
|
lastCommitAuthor: latestCommit?.author ?? null,
|
||||||
|
lastCommitAt: latestCommit?.date ? new Date(latestCommit.date) : null,
|
||||||
|
latestTag,
|
||||||
|
latestRelease: latestRelease?.name ?? null,
|
||||||
|
latestReleaseAt: latestRelease?.publishedAt ? new Date(latestRelease.publishedAt) : null,
|
||||||
|
branchCount: data.branches.length,
|
||||||
|
tagCount: data.tags.length,
|
||||||
|
branches: data.branches as unknown as object,
|
||||||
|
tags: data.tags as unknown as object,
|
||||||
|
commits: data.commits as unknown as object,
|
||||||
|
releases: data.releases as unknown as object,
|
||||||
|
languages: data.languages as unknown as object,
|
||||||
|
pushedAt: data.pushedAt ? new Date(data.pushedAt) : null,
|
||||||
|
fetchedAt: new Date(),
|
||||||
|
};
|
||||||
|
|
||||||
|
await prisma.$transaction([
|
||||||
|
prisma.repoSnapshot.upsert({
|
||||||
|
where: { projectId },
|
||||||
|
create: { projectId, ...payload },
|
||||||
|
update: payload,
|
||||||
|
}),
|
||||||
|
prisma.project.update({
|
||||||
|
where: { id: projectId },
|
||||||
|
data: {
|
||||||
|
lastSyncedAt: new Date(),
|
||||||
|
syncError: null,
|
||||||
|
defaultBranch: data.defaultBranch,
|
||||||
|
repoUrl: data.htmlUrl ?? undefined,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
}
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
/** Kleine Helfer ohne Abhaengigkeiten. */
|
||||||
|
|
||||||
|
export function cn(...classes: Array<string | false | null | undefined>): string {
|
||||||
|
return classes.filter(Boolean).join(" ");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function slugify(input: string): string {
|
||||||
|
return input
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(/ä/g, "ae")
|
||||||
|
.replace(/ö/g, "oe")
|
||||||
|
.replace(/ü/g, "ue")
|
||||||
|
.replace(/ß/g, "ss")
|
||||||
|
.normalize("NFD")
|
||||||
|
.replace(/[̀-ͯ]/g, "")
|
||||||
|
.replace(/[^a-z0-9]+/g, "-")
|
||||||
|
.replace(/^-+|-+$/g, "")
|
||||||
|
.slice(0, 60);
|
||||||
|
}
|
||||||
|
|
||||||
|
const DATE_FORMAT = new Intl.DateTimeFormat("de-DE", {
|
||||||
|
day: "2-digit",
|
||||||
|
month: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
|
timeZone: "Europe/Berlin",
|
||||||
|
});
|
||||||
|
|
||||||
|
const DATETIME_FORMAT = new Intl.DateTimeFormat("de-DE", {
|
||||||
|
day: "2-digit",
|
||||||
|
month: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
timeZone: "Europe/Berlin",
|
||||||
|
});
|
||||||
|
|
||||||
|
export function formatDate(value: Date | string | null | undefined): string {
|
||||||
|
if (!value) return "–";
|
||||||
|
const date = typeof value === "string" ? new Date(value) : value;
|
||||||
|
if (Number.isNaN(date.getTime())) return "–";
|
||||||
|
return DATE_FORMAT.format(date);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatDateTime(value: Date | string | null | undefined): string {
|
||||||
|
if (!value) return "–";
|
||||||
|
const date = typeof value === "string" ? new Date(value) : value;
|
||||||
|
if (Number.isNaN(date.getTime())) return "–";
|
||||||
|
return DATETIME_FORMAT.format(date);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* "vor 3 Tagen". Bewusst grob gerundet – kleine Abweichungen zwischen
|
||||||
|
* Server-Render und Hydration fallen damit nicht auf.
|
||||||
|
*/
|
||||||
|
export function formatRelative(value: Date | string | null | undefined): string {
|
||||||
|
if (!value) return "nie";
|
||||||
|
const date = typeof value === "string" ? new Date(value) : value;
|
||||||
|
if (Number.isNaN(date.getTime())) return "nie";
|
||||||
|
|
||||||
|
const seconds = Math.round((Date.now() - date.getTime()) / 1000);
|
||||||
|
if (seconds < 60) return "gerade eben";
|
||||||
|
const minutes = Math.round(seconds / 60);
|
||||||
|
if (minutes < 60) return `vor ${minutes} Min.`;
|
||||||
|
const hours = Math.round(minutes / 60);
|
||||||
|
if (hours < 24) return `vor ${hours} Std.`;
|
||||||
|
const days = Math.round(hours / 24);
|
||||||
|
if (days < 31) return `vor ${days} ${days === 1 ? "Tag" : "Tagen"}`;
|
||||||
|
const months = Math.round(days / 30);
|
||||||
|
if (months < 12) return `vor ${months} Mon.`;
|
||||||
|
return `vor ${Math.round(months / 12)} J.`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function truncate(value: string, max = 120): string {
|
||||||
|
if (value.length <= max) return value;
|
||||||
|
return `${value.slice(0, max - 1).trimEnd()}…`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function firstLine(value: string | null | undefined): string {
|
||||||
|
if (!value) return "";
|
||||||
|
return value.split("\n")[0] ?? "";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function parseTags(input: string): string[] {
|
||||||
|
return Array.from(
|
||||||
|
new Set(
|
||||||
|
input
|
||||||
|
.split(",")
|
||||||
|
.map((tag) => tag.trim().toLowerCase())
|
||||||
|
.filter(Boolean),
|
||||||
|
),
|
||||||
|
).slice(0, 12);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatNumber(value: number): string {
|
||||||
|
return new Intl.NumberFormat("de-DE").format(value);
|
||||||
|
}
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
const STATUS = ["IDEA", "OPEN", "PLANNING", "IN_DEVELOPMENT", "DONE", "ARCHIVED"] as const;
|
||||||
|
const PROVIDERS = ["GITHUB", "GITLAB", "GITEA"] as const;
|
||||||
|
const ACCENTS = ["violet", "cyan", "emerald", "amber", "rose", "blue"] as const;
|
||||||
|
|
||||||
|
const emptyToNull = (value: unknown) =>
|
||||||
|
typeof value === "string" && value.trim() === "" ? null : value;
|
||||||
|
|
||||||
|
export const projectCreateSchema = z.object({
|
||||||
|
name: z.string().trim().min(1, "Name darf nicht leer sein").max(120),
|
||||||
|
summary: z.preprocess(emptyToNull, z.string().trim().max(280).nullable().optional()),
|
||||||
|
description: z.preprocess(emptyToNull, z.string().trim().max(20000).nullable().optional()),
|
||||||
|
status: z.enum(STATUS).default("IDEA"),
|
||||||
|
priority: z.coerce.number().int().min(1).max(4).default(2),
|
||||||
|
progress: z.coerce.number().int().min(0).max(100).default(0),
|
||||||
|
accent: z.enum(ACCENTS).default("violet"),
|
||||||
|
tags: z.array(z.string().trim().min(1).max(30)).max(12).default([]),
|
||||||
|
favorite: z.boolean().default(false),
|
||||||
|
repoUrl: z.preprocess(emptyToNull, z.string().trim().max(500).nullable().optional()),
|
||||||
|
repoOwner: z.preprocess(emptyToNull, z.string().trim().max(200).nullable().optional()),
|
||||||
|
repoName: z.preprocess(emptyToNull, z.string().trim().max(200).nullable().optional()),
|
||||||
|
connectionId: z.preprocess(emptyToNull, z.string().trim().nullable().optional()),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const projectUpdateSchema = projectCreateSchema.partial();
|
||||||
|
|
||||||
|
export const noteCreateSchema = z.object({
|
||||||
|
title: z.preprocess(emptyToNull, z.string().trim().max(160).nullable().optional()),
|
||||||
|
content: z.string().trim().min(1, "Notiz darf nicht leer sein").max(20000),
|
||||||
|
pinned: z.boolean().default(false),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const noteUpdateSchema = noteCreateSchema.partial();
|
||||||
|
|
||||||
|
export const connectionCreateSchema = z.object({
|
||||||
|
name: z.string().trim().min(1, "Name darf nicht leer sein").max(80),
|
||||||
|
provider: z.enum(PROVIDERS),
|
||||||
|
baseUrl: z
|
||||||
|
.string()
|
||||||
|
.trim()
|
||||||
|
.min(1, "Basis-URL fehlt")
|
||||||
|
.max(300)
|
||||||
|
.refine((value) => /^https?:\/\//i.test(value), "URL muss mit http:// oder https:// beginnen"),
|
||||||
|
username: z.preprocess(emptyToNull, z.string().trim().max(120).nullable().optional()),
|
||||||
|
token: z.preprocess(emptyToNull, z.string().trim().max(500).nullable().optional()),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const connectionUpdateSchema = connectionCreateSchema.partial();
|
||||||
|
|
||||||
|
export type ProjectCreateInput = z.infer<typeof projectCreateSchema>;
|
||||||
|
export type ProjectUpdateInput = z.infer<typeof projectUpdateSchema>;
|
||||||
|
export type NoteCreateInput = z.infer<typeof noteCreateSchema>;
|
||||||
|
export type ConnectionCreateInput = z.infer<typeof connectionCreateSchema>;
|
||||||
|
|
||||||
|
/** Formt Zod-Fehler in ein flaches Objekt fuer die API-Antwort. */
|
||||||
|
export function formatZodError(error: z.ZodError): Record<string, string> {
|
||||||
|
const result: Record<string, string> = {};
|
||||||
|
for (const issue of error.issues) {
|
||||||
|
const key = issue.path.join(".") || "_";
|
||||||
|
if (!result[key]) result[key] = issue.message;
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
import type { GitProvider, Note, Project, ProjectStatus, RepoSnapshot } from "@prisma/client";
|
||||||
|
import type { BranchInfo, CommitInfo, ReleaseInfo, TagInfo } from "@/lib/git/types";
|
||||||
|
|
||||||
|
/** Verbindung ohne Geheimnisse – so wird sie an den Browser gegeben. */
|
||||||
|
export interface ConnectionSafe {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
provider: GitProvider;
|
||||||
|
baseUrl: string;
|
||||||
|
username: string | null;
|
||||||
|
tokenHint: string | null;
|
||||||
|
lastCheckedAt: Date | string | null;
|
||||||
|
lastCheckOk: boolean | null;
|
||||||
|
lastCheckMessage: string | null;
|
||||||
|
createdAt: Date | string;
|
||||||
|
updatedAt: Date | string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ConnectionWithCount extends ConnectionSafe {
|
||||||
|
_count?: { projects: number };
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProjectListItem extends Project {
|
||||||
|
connection: ConnectionSafe | null;
|
||||||
|
snapshot: RepoSnapshot | null;
|
||||||
|
_count: { notes: number };
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProjectDetail extends Project {
|
||||||
|
connection: ConnectionSafe | null;
|
||||||
|
snapshot: RepoSnapshot | null;
|
||||||
|
notes: Note[];
|
||||||
|
_count: { notes: number };
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RepoListEntry {
|
||||||
|
fullPath: string;
|
||||||
|
owner: string;
|
||||||
|
name: string;
|
||||||
|
description: string | null;
|
||||||
|
htmlUrl: string;
|
||||||
|
defaultBranch: string | null;
|
||||||
|
visibility: string | null;
|
||||||
|
updatedAt: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { BranchInfo, CommitInfo, Note, ProjectStatus, ReleaseInfo, RepoSnapshot, TagInfo };
|
||||||
|
|
||||||
|
/** Prisma liefert Json als unknown – hier bequem in Arrays zurueckholen. */
|
||||||
|
export function asArray<T>(value: unknown): T[] {
|
||||||
|
return Array.isArray(value) ? (value as T[]) : [];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function asRecord(value: unknown): Record<string, number> {
|
||||||
|
if (value && typeof value === "object" && !Array.isArray(value)) {
|
||||||
|
return value as Record<string, number>;
|
||||||
|
}
|
||||||
|
return {};
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user