feat(ui): Dashboard mit Board, Filtern und direktem Statuswechsel
- Fuenf Kennzahlen ueber dem Board: Projektzahl mit Durchschnittsfortschritt, Ideen, aktive Entwicklungen, fertige Projekte, verknuepfte Repos - Volltextsuche ueber Name, Beschreibung, Tags und Repo-Pfad - Statusfilter als Chips mit Trefferzaehler, mehrfach kombinierbar - Sortierung nach Aenderung, Anlage, Name, Fortschritt oder Prioritaet; Favoriten stehen immer oben - Zwei Ansichten: freies Raster oder nach Status gruppiert - Archiv standardmaessig ausgeblendet, per Schalter sichtbar Die Projektkarte zeigt Fortschritt, Provider, Default-Branch, letzten Tag, Alter des letzten Commits, Notizzahl und Sync-Fehler. Status und Favorit sind direkt auf der Karte aenderbar - beides optimistisch, mit Rollback wenn der Server ablehnt. Die Karte ist ein "stretched link", damit die Schaltflaechen darin nicht in einem Anker verschachtelt sind. Der Anlege-Dialog verlangt nur einen Namen; neue Projekte starten als Idee. Ist eine Git-Verbindung gewaehlt, laesst sich das Repository aus einer durchsuchbaren Liste uebernehmen. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -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,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,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,28 @@
|
||||
import type { ProjectStatus } from "@prisma/client";
|
||||
import { statusOf } from "@/lib/status";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function StatusBadge({
|
||||
status,
|
||||
size = "md",
|
||||
}: {
|
||||
status: ProjectStatus;
|
||||
size?: "sm" | "md";
|
||||
}) {
|
||||
const meta = statusOf(status);
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1.5 rounded-full font-medium ring-1 ring-inset",
|
||||
meta.className,
|
||||
size === "sm" ? "px-2 py-0.5 text-[11px]" : "px-2.5 py-1 text-xs",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className="accent-dot h-1.5 w-1.5 rounded-full"
|
||||
style={{ backgroundColor: meta.color, color: meta.color }}
|
||||
/>
|
||||
{meta.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user