5 Commits
Author SHA1 Message Date
florian.wildeandClaude Opus 5 ce224bc2a4 chore(release): v1.10.0
CI / pruefen (pull_request) Canceled after 0s
Seit v1.9.0 sind drei Features nach main gegangen, ohne dass die
Versionsnummer mitgezogen waere: Wochenrueckblick (#2), globale Zeitleiste
(#3) und die Suche ueber Aufgaben (#4).

Genau dieselbe Luecke wie vor v1.6.0. Der Test in changelog.test.ts prueft,
dass die oberste Fassung im Verlauf zur package.json passt - er greift aber
nicht, wenn beide gemeinsam zurueckhaengen. Ein Test, der das faende,
muesste den Verlauf gegen die Git-Historie halten; das waere mehr Maschinerie
als der Fehler wert, solange die Freigabe ohnehin von Hand laeuft.

Der Verlauf wird in der Anwendung angezeigt (Knopf an der Versionsnummer in
der Fusszeile), deshalb steht dort jetzt, was dazugekommen ist. Nachgesehen
auf 375px und 1280px: Eintraege vollstaendig, keine Beanstandung von
axe-core.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-18 07:44:16 +02:00
florian.wilde a264eb0dce Merge #4: Suche über Aufgaben
CI / pruefen (push) Canceled after 0s
2026-08-18 05:37:54 +00:00
florian.wilde afe57c4428 Suche ueber Aufgaben
CI / pruefen (pull_request) Canceled after 0s
Zwei Luecken, die im Issue zusammen stehen.

**Im Aufgabendashboard fehlte ein Suchfeld.** Es gab Filter nach Status und
Projekt, aber keine Moeglichkeit, nach einem Wort zu suchen. Das Suchfeld
deckt Titel, Beschreibung, Labels und Projektname ab. Gefiltert wird im
Browser - die Aufgaben liegen dort ohnehin alle vor, es braucht also keine
zusaetzliche Abfrage und es gibt keine Verzoegerung beim Tippen.

Wer sucht, sucht dabei auch in Erledigtem: sonst faende man die Aufgabe von
letzter Woche nicht wieder, obwohl man genau sie meint. Der Schalter
"Erledigte einblenden" gilt nur ohne Suchbegriff.

**Die Volltextsuche kannte nur Notizen.** Task ist jetzt ebenfalls dabei,
nach demselben Muster: deutsche Textsuche, ts_headline fuer den Ausschnitt,
Hervorhebung als [[…]] statt als HTML. Deutsche Stammformen greifen damit
auch hier - "Rechnung" findet "Rechnungen".

Dazu ein Ausdrucksindex Task_fulltext_idx wie Note_fulltext_idx. Der
Ausdruck muss Zeichen fuer Zeichen dem in der Abfrage entsprechen, sonst
greift er nicht; nachgeprueft mit EXPLAIN, der Plan zeigt einen
Bitmap Index Scan darauf. "prisma migrate diff" laesst ihn in Ruhe -
Gegenprobe kommt leer heraus.

Das Antwortfeld heisst weiterhin "hits" und meint die Notizen. Umbenennen
haette nur Aufrufer gebrochen, ohne etwas zu verbessern; Aufgaben kommen als
eigenes Feld dazu. Beide Stellen, die Treffer anzeigen - Projektbrett und
Schnellsuche -, zeigen sie jetzt.

Geprueft: 261 Unit-Tests, 36 E2E-Tests. Die Volltextsuche zusaetzlich gegen
die laufende Anwendung: Treffer in Titel und Beschreibung, Erledigtes
inbegriffen, Stammformen greifen, fremde Konten finden nichts.

Refs #4
2026-08-18 03:39:02 +02:00
florian.wilde 0ef0b3d5ca Merge #3: Globale Zeitleiste
CI / pruefen (push) Canceled after 0s
2026-08-18 01:12:55 +00:00
florian.wilde 9cdd51fba8 Globale Zeitleiste ueber alle Projekte
CI / pruefen (pull_request) Canceled after 0s
Eine Seite /verlauf, die den Aktivitaetsverlauf fortlaufend ueber alle
Projekte zeigt - ohne Wochengrenze, nach Kalendertagen gegliedert, mit
Nachladen aelterer Eintraege. Erste Seite serverseitig, alles Weitere ueber
/api/activity.

Geblaettert wird per Cursor ueber (createdAt, id), nicht per skip. Der
Verlauf schreibt mehrere Eintraege im selben Augenblick - beim Uebernehmen
von Issues entstehen zehn Zeilen mit identischem Zeitstempel. Ein Offset
ueber eine solche Grenze hinweg ueberspringt Zeilen oder zeigt sie zweimal,
und zwar lautlos. Der zweite Zweig der Bedingung (gleicher Zeitpunkt,
kleinere ID) faengt genau das ab.

Geprueft gegen 144 Eintraege mit absichtlichen Bloecken gleicher Zeitstempel:
15 Seiten, 144 Zeilen, keine Dublette, streng absteigend.

Die Bedingung selbst steht als pruefbare Funktion in lib/timeline, samt
Deckelung der Seitengroesse und Abweisen unbrauchbarer Cursor - eine ID aus
der Abfragezeichenkette geht nicht ungeprueft in die Abfrage.

Damit Rueckblick und Zeitleiste wirklich gleich aussehen, sind Zeile und
Tagesgruppen nach components/ActivityRow gewandert. Bewusst ohne "use
client" und ohne Hooks, damit beides sowohl aus der Server-Komponente
(Rueckblick) als auch aus der Client-Komponente (Zeitleiste) heraus
benutzbar ist. Die Buendelung im Browser ist unbedenklich, weil
tagesschluessel eine feste Zeitzone benutzt - Server und Browser kommen auf
denselben Kalendertag.

Erreichbar ueber die Schnellsuche und vom Wochenrueckblick aus.

Geprueft: 9 neue Unit-Tests zur Cursor-Logik, ein E2E-Test, der die ganze
Liste in Dreierseiten durchblaettert und gegen einen einzelnen grossen
Aufruf haelt, ein E2E-Test fuer die Seite, axe-core auf 375px und 1280px
je vor und nach dem Nachladen ohne Beanstandung.

Refs #3
2026-08-18 01:54:50 +02:00
17 changed files with 987 additions and 119 deletions
+106
View File
@@ -763,6 +763,112 @@ test("Projektvorlagen: aus Projekt sichern und anwenden", async ({ request, play
expect((await request.delete(`/api/templates/${vorlage.id}`)).ok()).toBeTruthy(); expect((await request.delete(`/api/templates/${vorlage.id}`)).ok()).toBeTruthy();
}); });
test("Verlauf blaettert per Cursor, ohne Zeilen zu verlieren", async ({ request, playwright }) => {
await login(request, ADMIN);
// Die bisherigen Tests haben reichlich Verlauf erzeugt. Erst alles auf
// einmal holen, dann in kleinen Seiten – beides muss dieselbe Menge sein.
const alles = await (await request.get("/api/activity?limit=100")).json();
expect(alles.activities.length).toBeGreaterThan(5);
const ids: string[] = [];
let cursor: { vor: string; id: string } | null = null;
for (let seite = 0; seite < 60; seite += 1) {
const query = cursor
? `?limit=3&vor=${encodeURIComponent(cursor.vor)}&id=${encodeURIComponent(cursor.id)}`
: "?limit=3";
const antwort = await request.get(`/api/activity${query}`);
expect(antwort.ok()).toBeTruthy();
const seiteBody = await antwort.json();
ids.push(...seiteBody.activities.map((eintrag: { id: string }) => eintrag.id));
if (!seiteBody.weitere) break;
cursor = seiteBody.naechster;
expect(cursor).not.toBeNull();
}
// Der eigentliche Punkt: keine Dubletten und keine Luecken, auch wenn
// mehrere Eintraege denselben Zeitstempel tragen.
expect(new Set(ids).size).toBe(ids.length);
expect(ids.length).toBe(alles.activities.length);
// Absteigend sortiert.
const zeiten: number[] = alles.activities.map((eintrag: { createdAt: string }) =>
Date.parse(eintrag.createdAt),
);
for (let i = 1; i < zeiten.length; i += 1) {
expect(zeiten[i]).toBeLessThanOrEqual(zeiten[i - 1]);
}
// Unbrauchbare Cursor fangen von vorn an, statt zu scheitern.
const kaputt = await request.get("/api/activity?vor=keindatum&id=x");
expect(kaputt.ok()).toBeTruthy();
expect((await kaputt.json()).activities.length).toBeGreaterThan(0);
// Und ein fremdes Konto sieht ausschliesslich seinen eigenen Verlauf.
const fremd = await playwright.request.newContext({
baseURL: test.info().project.use.baseURL,
});
await login(fremd, ZWEITER);
const fremderVerlauf = await (await fremd.get("/api/activity")).json();
const eigeneIds = new Set(ids);
for (const eintrag of fremderVerlauf.activities) {
expect(eigeneIds.has(eintrag.id)).toBe(false);
}
await fremd.dispose();
});
test("Volltextsuche findet auch Aufgaben", async ({ request, playwright }) => {
await login(request, ADMIN);
const projekt = (
await (await request.post("/api/projects", { data: { name: "Suchprojekt" } })).json()
).project;
for (const task of [
{
title: "Dockerfile aufraeumen",
description: "Die Schichten im Container neu ordnen, damit der Bau schneller wird.",
},
{ title: "Rechnungen exportieren", description: "Monatlicher Export als CSV." },
{ title: "Erledigtes mit Container", description: "Auch das soll gefunden werden.", status: "DONE" },
{ title: "Ohne Bezug", description: "Voellig anderer Inhalt." },
]) {
expect((await request.post(`/api/projects/${projekt.id}/tasks`, { data: task })).status()).toBe(
201,
);
}
// Titel und Beschreibung werden durchsucht.
const container = await (await request.get("/api/search?q=Container")).json();
const titel = container.tasks.map((treffer: { title: string }) => treffer.title);
expect(titel).toContain("Dockerfile aufraeumen");
// Erledigtes bleibt drin – wer sucht, sucht oft gerade das Abgehakte.
expect(titel).toContain("Erledigtes mit Container");
expect(titel).not.toContain("Ohne Bezug");
// Deutsche Stammformen: "Rechnung" findet "Rechnungen".
const rechnung = await (await request.get("/api/search?q=Rechnung")).json();
expect(rechnung.tasks.map((t: { title: string }) => t.title)).toContain(
"Rechnungen exportieren",
);
// Das Projekt taucht in projectIds auf, damit das Brett es einblendet.
expect(container.projectIds).toContain(projekt.id);
// Zu kurze Eingaben liefern leere Listen statt Unsinn.
const kurz = await (await request.get("/api/search?q=a")).json();
expect(kurz.tasks).toEqual([]);
expect(kurz.hits).toEqual([]);
// Und ein fremdes Konto findet nichts davon.
const fremd = await playwright.request.newContext({
baseURL: test.info().project.use.baseURL,
});
await login(fremd, ZWEITER);
expect((await (await fremd.get("/api/search?q=Container")).json()).tasks).toHaveLength(0);
await fremd.dispose();
});
test("Der Bildoptimierer ist zu", async ({ playwright }) => { test("Der Bildoptimierer ist zu", async ({ playwright }) => {
// /_next/image reicht jedes Bild durch sharp und damit durch libvips, fuer // /_next/image reicht jedes Bild durch sharp und damit durch libvips, fuer
// das es regelmaessig Schwachstellen gibt. Nebula benutzt next/image // das es regelmaessig Schwachstellen gibt. Nebula benutzt next/image
+45 -2
View File
@@ -244,11 +244,54 @@ test("Wochenrueckblick zeigt, was diese Woche passiert ist", async ({ page }) =>
// Auch ueber die Schnellsuche erreichbar. // Auch ueber die Schnellsuche erreichbar.
await page.goto("/"); await page.goto("/");
await page.keyboard.press("Control+k"); await page.keyboard.press("Control+k");
await page.getByPlaceholder(/Projekt, Notiz oder Bereich/).fill("Rückblick"); await page.getByPlaceholder(/^Projekt, /).fill("Rückblick");
await page.keyboard.press("Enter"); await page.keyboard.press("Enter");
await expect(page).toHaveURL(/\/rueckblick/); await expect(page).toHaveURL(/\/rueckblick/);
}); });
test("Globale Zeitleiste zeigt den Verlauf ueber alle Projekte", async ({ page }) => {
// Vom Wochenrueckblick aus verlinkt.
await page.goto("/rueckblick");
await page.getByRole("link", { name: /Ganzer Verlauf/ }).click();
await expect(page).toHaveURL(/\/verlauf$/);
await expect(page.getByRole("heading", { name: "Verlauf", level: 1 })).toBeVisible();
// Eintraege mit Projektbezug – ohne den ist eine uebergreifende Liste
// nicht zu lesen.
await expect(page.getByRole("link", { name: "Oberflaechentest" }).first()).toBeVisible();
await expect(page.getByText(/Vorgänge geladen|Vorgang geladen/)).toBeVisible();
// Auch ueber die Schnellsuche erreichbar.
await page.goto("/");
await page.keyboard.press("Control+k");
await page.getByPlaceholder(/^Projekt, /).fill("Verlauf");
await page.keyboard.press("Enter");
await expect(page).toHaveURL(/\/verlauf/);
});
test("Aufgabendashboard laesst sich durchsuchen", async ({ page }) => {
await page.getByRole("link", { name: "Aufgaben", exact: true }).click();
await expect(page.getByRole("heading", { name: "Aufgaben", level: 1 })).toBeVisible();
const suchfeld = page.getByLabel("Aufgaben durchsuchen");
await expect(suchfeld).toBeVisible();
// Aus den frueheren Tests gibt es "Erste Aufgabe" und "Zweite Aufgabe".
await suchfeld.fill("Erste");
await expect(page.getByRole("listitem").filter({ hasText: "Erste Aufgabe" })).toBeVisible();
await expect(page.getByRole("listitem").filter({ hasText: "Zweite Aufgabe" })).toBeHidden();
// Ohne Treffer erklaert der Leerzustand, worin gesucht wurde.
await suchfeld.fill("gibtesnichtxyz");
await expect(page.getByText("Keine Treffer")).toBeVisible();
await expect(page.getByText(/Titel, Beschreibung, Labels und Projektname/)).toBeVisible();
// Zuruecksetzen bringt alles wieder.
await page.getByRole("button", { name: "Suche zuruecksetzen" }).click();
await expect(suchfeld).toHaveValue("");
await expect(page.getByRole("listitem").filter({ hasText: "Erste Aufgabe" })).toBeVisible();
});
test("Schnellsuche findet Projekt und Notiz", async ({ page }) => { test("Schnellsuche findet Projekt und Notiz", async ({ page }) => {
await page.keyboard.press("Control+k"); await page.keyboard.press("Control+k");
await expect(page.getByRole("dialog", { name: "Schnellsuche" })).toBeVisible(); await expect(page.getByRole("dialog", { name: "Schnellsuche" })).toBeVisible();
@@ -256,7 +299,7 @@ test("Schnellsuche findet Projekt und Notiz", async ({ page }) => {
// Ohne Eingabe stehen Projekte und Bereiche bereit. // Ohne Eingabe stehen Projekte und Bereiche bereit.
await expect(page.getByRole("dialog").getByText("Oberflaechentest")).toBeVisible(); await expect(page.getByRole("dialog").getByText("Oberflaechentest")).toBeVisible();
await page.getByPlaceholder(/Projekt, Notiz oder Bereich/).fill("Zaunkoenig"); await page.getByPlaceholder(/^Projekt, /).fill("Zaunkoenig");
await expect(page.getByRole("dialog").getByText(/in Oberflaechentest/)).toBeVisible(); await expect(page.getByRole("dialog").getByText(/in Oberflaechentest/)).toBeVisible();
// Enter springt zum ersten Treffer. // Enter springt zum ersten Treffer.
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "nebula", "name": "nebula",
"version": "1.9.0", "version": "1.10.0",
"private": true, "private": true,
"description": "Nebula – Dashboard fuer Vibe-Coding Projekte mit Git-Anbindung (GitHub, GitLab, Gitea)", "description": "Nebula – Dashboard fuer Vibe-Coding Projekte mit Git-Anbindung (GitHub, GitLab, Gitea)",
"scripts": { "scripts": {
@@ -0,0 +1,20 @@
-- Volltextsuche ueber Aufgaben.
--
-- Wie Note_fulltext_idx ein Ausdrucksindex: Prisma kann so etwas im Schema
-- nicht abbilden und kennt ihn deshalb nicht. Nachgeprueft mit
-- "prisma migrate diff" gegen das Schema - es kommt "empty migration"
-- heraus, der Index wird also weder angelegt noch geloescht. Trotzdem beim
-- Erzeugen kuenftiger Migrationen kurz hinsehen.
--
-- Faellt er doch einmal weg, funktioniert die Suche weiter, nur langsamer:
-- Postgres berechnet to_tsvector dann je Zeile.
--
-- Der Ausdruck muss Zeichen fuer Zeichen dem in src/app/api/search/route.ts
-- entsprechen, sonst greift der Index nicht. Die zweistellige Form von
-- to_tsvector mit fester Konfiguration ist IMMUTABLE und damit indizierbar.
--
-- Anders als bei der Notiz ist auch die Beschreibung optional, deshalb steht
-- coalesce um beide Spalten.
CREATE INDEX "Task_fulltext_idx" ON "Task"
USING GIN (to_tsvector('german', coalesce("title", '') || ' ' || coalesce("description", '')));
+58
View File
@@ -0,0 +1,58 @@
import { NextResponse } from "next/server";
import { requireUserApi } from "@/lib/auth/guard";
import { prisma } from "@/lib/db";
import {
SEITEN_ORDNUNG,
cursorAus,
seitenBedingung,
seitenGroesse,
} from "@/lib/timeline";
export const dynamic = "force-dynamic";
/**
* Der Verlauf ueber alle Projekte, neueste Eintraege zuerst.
*
* Geblaettert wird per Cursor (`vor` = Zeitpunkt, `id` = Eintrag), nicht per
* Offset – siehe lib/timeline. Zurueck kommt der Cursor fuer die naechste
* Seite gleich mit, damit der Aufrufer ihn nicht selbst zusammensetzen muss.
*/
export async function GET(request: Request) {
const auth = await requireUserApi();
if (!auth.ok) return auth.response;
const params = new URL(request.url).searchParams;
const cursor = cursorAus(params.get("vor"), params.get("id"));
const take = seitenGroesse(params.get("limit"));
/**
* Einen mehr holen als angefragt: daran laesst sich ablesen, ob es
* weitergeht, ohne dafuer zaehlen zu muessen.
*/
const gefunden = await prisma.activity.findMany({
where: seitenBedingung(auth.user.id, cursor),
orderBy: SEITEN_ORDNUNG,
take: take + 1,
select: {
id: true,
kind: true,
summary: true,
createdAt: true,
project: { select: { id: true, name: true, accent: true } },
user: { select: { username: true, displayName: true } },
},
});
const weitere = gefunden.length > take;
const activities = weitere ? gefunden.slice(0, take) : gefunden;
const letzter = activities[activities.length - 1];
return NextResponse.json({
activities: activities.map((eintrag) => ({
...eintrag,
createdAt: eintrag.createdAt.toISOString(),
})),
weitere,
naechster: weitere && letzter ? { vor: letzter.createdAt.toISOString(), id: letzter.id } : null,
});
}
+58 -7
View File
@@ -12,16 +12,30 @@ interface Hit {
snippet: string; snippet: string;
} }
interface TaskHit {
projectId: string;
taskId: string;
title: string;
status: string;
/** Ausschnitt aus der Beschreibung; leer, wenn nur der Titel passte. */
snippet: string;
}
/** /**
* Volltextsuche ueber Notizen. * Volltextsuche ueber Notizen und Aufgaben.
* *
* Die Suche im Board arbeitet auf den bereits geladenen Projekten und deckt * Die Suche im Board arbeitet auf den bereits geladenen Projekten und deckt
* Name, Kurzbeschreibung und Tags ab. Notizen liegen dort nicht vor – die * Name, Kurzbeschreibung und Tags ab. Notizen und Aufgaben liegen dort nicht
* mitzuladen wuerde die Seite unnoetig aufblaehen. Deshalb dieser Endpunkt: * vor – die mitzuladen wuerde die Seite unnoetig aufblaehen. Deshalb dieser
* Postgres sucht mit seiner deutschen Textsuche direkt in der Datenbank. * Endpunkt: Postgres sucht mit seiner deutschen Textsuche direkt in der
* Datenbank.
* *
* ts_headline liefert gleich den passenden Ausschnitt mit; die Hervorhebung * ts_headline liefert gleich den passenden Ausschnitt mit; die Hervorhebung
* kommt als [[…]] zurueck, damit die Oberflaeche kein HTML einbetten muss. * kommt als [[…]] zurueck, damit die Oberflaeche kein HTML einbetten muss.
*
* Das Feld heisst weiterhin "hits" und meint die Notizen – umbenennen haette
* nur Aufrufer gebrochen, ohne etwas zu verbessern. Aufgaben kommen als
* eigenes Feld dazu.
*/ */
export async function GET(request: Request) { export async function GET(request: Request) {
const auth = await requireUserApi(); const auth = await requireUserApi();
@@ -29,7 +43,7 @@ export async function GET(request: Request) {
const query = (new URL(request.url).searchParams.get("q") ?? "").trim(); const query = (new URL(request.url).searchParams.get("q") ?? "").trim();
if (query.length < 2) { if (query.length < 2) {
return NextResponse.json({ query, hits: [], projectIds: [] }); return NextResponse.json({ query, hits: [], tasks: [], projectIds: [] });
} }
// websearch_to_tsquery versteht Eingaben wie "docker -compose" oder // websearch_to_tsquery versteht Eingaben wie "docker -compose" oder
@@ -57,11 +71,48 @@ export async function GET(request: Request) {
LIMIT 50 LIMIT 50
`; `;
/**
* Dieselbe Rechnung fuer Aufgaben.
*
* Der Ausdruck in to_tsvector muss Zeichen fuer Zeichen dem in der
* Migration entsprechen (Task_fulltext_idx), sonst greift der Index nicht
* und Postgres rechnet ihn je Zeile neu.
*
* Erledigtes bleibt drin: wer sucht, sucht oft gerade das, was er letzte
* Woche abgehakt hat.
*/
const tasks = await prisma.$queryRaw<TaskHit[]>`
SELECT
t."projectId" AS "projectId",
t."id" AS "taskId",
t."title" AS "title",
t."status"::text AS "status",
ts_headline(
'german',
coalesce(t."description", ''),
websearch_to_tsquery('german', ${query}),
'StartSel=[[, StopSel=]], MaxWords=18, MinWords=6, ShortWord=2, MaxFragments=1'
) AS "snippet"
FROM "Task" t
JOIN "Project" p ON p."id" = t."projectId"
WHERE p."ownerId" = ${auth.user.id}
AND to_tsvector('german', coalesce(t."title", '') || ' ' || coalesce(t."description", ''))
@@ websearch_to_tsquery('german', ${query})
ORDER BY ts_rank(
to_tsvector('german', coalesce(t."title", '') || ' ' || coalesce(t."description", '')),
websearch_to_tsquery('german', ${query})
) DESC
LIMIT 50
`;
return NextResponse.json({ return NextResponse.json({
query, query,
hits, hits,
tasks,
// Die Oberflaeche braucht vor allem die betroffenen Projekte, um sie im // Die Oberflaeche braucht vor allem die betroffenen Projekte, um sie im
// Board einzublenden. // Board einzublenden – jetzt aus beiden Quellen.
projectIds: Array.from(new Set(hits.map((hit) => hit.projectId))), projectIds: Array.from(
new Set([...hits.map((hit) => hit.projectId), ...tasks.map((hit) => hit.projectId)]),
),
}); });
} }
+5 -1
View File
@@ -1,6 +1,6 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import Link from "next/link"; import Link from "next/link";
import { ArrowLeft, ArrowRight, CalendarRange } from "lucide-react"; import { ArrowLeft, ArrowRight, CalendarRange, History } from "lucide-react";
import { WeeklyReview } from "@/components/WeeklyReview"; import { WeeklyReview } from "@/components/WeeklyReview";
import { requireUserPage } from "@/lib/auth/guard"; import { requireUserPage } from "@/lib/auth/guard";
import { prisma } from "@/lib/db"; import { prisma } from "@/lib/db";
@@ -121,6 +121,10 @@ export default async function ReviewPage({
Diese Woche Diese Woche
</Link> </Link>
) : null} ) : null}
<Link href="/verlauf" className="btn btn-ghost px-2.5 py-1.5 text-xs">
<History className="h-3.5 w-3.5" />
Ganzer Verlauf
</Link>
</nav> </nav>
</div> </div>
</header> </header>
+77
View File
@@ -0,0 +1,77 @@
import type { Metadata } from "next";
import Link from "next/link";
import { CalendarRange, History } from "lucide-react";
import { Timeline } from "@/components/Timeline";
import { requireUserPage } from "@/lib/auth/guard";
import { prisma } from "@/lib/db";
import { SEITE, SEITEN_ORDNUNG, seitenBedingung } from "@/lib/timeline";
import type { ReviewEntry } from "@/types";
export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "Verlauf" };
/**
* Der Verlauf ueber alle Projekte, fortlaufend.
*
* Die erste Seite kommt serverseitig mit, damit sofort etwas dasteht; alles
* Weitere holt der Knopf per Cursor nach. Anders als der Wochenrueckblick
* hat diese Seite keine Grenze und kein Fazit – sie laeuft zurueck, solange
* es Eintraege gibt.
*/
export default async function TimelinePage() {
const user = await requireUserPage();
const gefunden = await prisma.activity.findMany({
where: seitenBedingung(user.id, null),
orderBy: SEITEN_ORDNUNG,
// Einen mehr, um zu wissen, ob es weitergeht.
take: SEITE + 1,
select: {
id: true,
kind: true,
summary: true,
createdAt: true,
project: { select: { id: true, name: true, accent: true } },
user: { select: { username: true, displayName: true } },
},
});
const weitere = gefunden.length > SEITE;
const erste: ReviewEntry[] = (weitere ? gefunden.slice(0, SEITE) : gefunden).map((eintrag) => ({
id: eintrag.id,
kind: eintrag.kind,
summary: eintrag.summary,
createdAt: eintrag.createdAt.toISOString(),
project: eintrag.project,
user: eintrag.user,
}));
return (
<div className="space-y-5">
<header className="fade-up pt-4">
<p className="text-[11px] font-semibold uppercase tracking-[0.3em] text-violet-300/70">
Über alle Projekte
</p>
<div className="mt-2 flex flex-wrap items-end justify-between gap-3">
<div>
<h1 className="flex items-center gap-2 text-2xl font-semibold tracking-tight text-white sm:text-3xl">
<History className="h-6 w-6 text-violet-300" />
Verlauf
</h1>
<p className="mt-1 text-sm text-slate-400">
Alles, was passiert ist – vom Neuesten rückwärts.
</p>
</div>
<Link href="/rueckblick" className="btn btn-ghost px-3 py-1.5 text-xs">
<CalendarRange className="h-3.5 w-3.5" />
Wochenrückblick
</Link>
</div>
</header>
<Timeline erste={erste} weitere={weitere} />
</div>
);
}
+126
View File
@@ -0,0 +1,126 @@
import Link from "next/link";
import { ACTIVITY_KINDS } from "@/components/activityKinds";
import { accentOf } from "@/lib/status";
import { cn } from "@/lib/utils";
import type { ReviewDay, ReviewEntry } from "@/types";
/**
* Darstellung von Verlaufseintraegen – eine Zeile und die Gruppierung nach
* Kalendertagen.
*
* Bewusst ohne "use client" und ohne Hooks: so laesst sich beides sowohl aus
* einer Server-Komponente (Wochenrueckblick) als auch aus einer
* Client-Komponente (Zeitleiste mit Nachladen) heraus benutzen. Zwei Kopien
* derselben Zeile waeren beim naechsten Feinschliff auseinandergelaufen.
*
* Alle Formate mit fester Zeitzone – dieselbe Ueberlegung wie in lib/utils:
* sonst weichen Server-Render und Hydration voneinander ab.
*/
const WOCHENTAG = new Intl.DateTimeFormat("de-DE", {
timeZone: "Europe/Berlin",
weekday: "long",
});
const TAG_MONAT = new Intl.DateTimeFormat("de-DE", {
timeZone: "Europe/Berlin",
day: "numeric",
month: "long",
});
const TAG_MONAT_JAHR = new Intl.DateTimeFormat("de-DE", {
timeZone: "Europe/Berlin",
day: "numeric",
month: "long",
year: "numeric",
});
const UHRZEIT = new Intl.DateTimeFormat("de-DE", {
timeZone: "Europe/Berlin",
hour: "2-digit",
minute: "2-digit",
});
/** "2026-08-17" → ein Zeitpunkt mittags, damit die Zeitzone nichts verschiebt. */
function alsDatum(tag: string): Date {
const [j, m, t] = tag.split("-").map(Number);
return new Date(Date.UTC(j, m - 1, t, 12));
}
export function ActivityDayGroups({
tage,
/** Bei Tagen aus anderen Jahren gehoert die Jahreszahl dazu. */
mitJahr = false,
}: {
tage: ReviewDay[];
mitJahr?: boolean;
}) {
const format = mitJahr ? TAG_MONAT_JAHR : TAG_MONAT;
return (
<div className="space-y-6">
{tage.map((tag) => {
const datum = alsDatum(tag.tag);
return (
<section key={tag.tag}>
<div className="mb-2.5 flex flex-wrap items-baseline gap-x-2.5 gap-y-1">
<h2 className="text-sm font-semibold uppercase tracking-wider text-slate-300">
{WOCHENTAG.format(datum)}
</h2>
<span className="text-xs text-slate-500">{format.format(datum)}</span>
<span className="rounded-full bg-white/6 px-2 py-0.5 text-[11px] tabular-nums text-slate-400">
{tag.eintraege.length}
</span>
<span className="h-px flex-1 bg-gradient-to-r from-white/10 to-transparent" />
</div>
<ul className="glass divide-y divide-white/6 overflow-hidden">
{tag.eintraege.map((eintrag) => (
<ActivityRow key={eintrag.id} eintrag={eintrag} />
))}
</ul>
</section>
);
})}
</div>
);
}
export function ActivityRow({ eintrag }: { eintrag: ReviewEntry }) {
const art = ACTIVITY_KINDS[eintrag.kind] ?? ACTIVITY_KINDS.PROJECT_UPDATED;
const Icon = art.icon;
const accent = accentOf(eintrag.project.accent);
return (
<li className="flex items-start gap-2.5 px-3 py-2.5 sm:gap-3 sm:px-4">
<span className={cn("mt-0.5 shrink-0", art.color)} title={art.label}>
<Icon className="h-4 w-4" />
</span>
<div className="min-w-0 flex-1">
<p className="text-sm leading-snug text-slate-200">{eintrag.summary}</p>
<div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-slate-500">
{/* Das Projekt gehoert in jede Zeile – ohne es ist eine
projektuebergreifende Liste nicht zu lesen. */}
<Link
href={`/projects/${eintrag.project.id}`}
className="inline-flex max-w-[12rem] items-center gap-1.5 truncate text-slate-400 underline-offset-2 hover:text-violet-300 hover:underline"
>
<span
className="h-1.5 w-1.5 shrink-0 rounded-full"
style={{ backgroundColor: accent.from }}
aria-hidden="true"
/>
{eintrag.project.name}
</Link>
<span className="tabular-nums">{UHRZEIT.format(new Date(eintrag.createdAt))} Uhr</span>
{eintrag.user ? (
<span className="hidden xs:inline">
{eintrag.user.displayName?.trim() || eintrag.user.username}
</span>
) : (
// Ohne Benutzer: das war der Zeitgeber oder ein Webhook.
<span className="hidden text-slate-600 xs:inline">automatisch</span>
)}
</div>
</div>
</li>
);
}
+56 -5
View File
@@ -9,6 +9,7 @@ import {
CheckSquare, CheckSquare,
CornerDownLeft, CornerDownLeft,
GitBranch, GitBranch,
History,
LayoutDashboard, LayoutDashboard,
Loader2, Loader2,
NotebookPen, NotebookPen,
@@ -17,8 +18,9 @@ import {
Settings, Settings,
UserRound, UserRound,
} from "lucide-react"; } from "lucide-react";
import type { ProjectStatus } from "@prisma/client"; import type { ProjectStatus, TaskStatus } from "@prisma/client";
import { statusOf } from "@/lib/status"; import { statusOf } from "@/lib/status";
import { TASK_STATUS_META } from "@/lib/tasks";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
/** /**
@@ -39,6 +41,14 @@ interface ProjectHit {
tags: string[]; tags: string[];
} }
interface TaskHit {
projectId: string;
taskId: string;
title: string;
status: string;
snippet: string;
}
interface NoteHit { interface NoteHit {
projectId: string; projectId: string;
noteId: string; noteId: string;
@@ -64,6 +74,13 @@ const ACTIONS: Action[] = [
icon: CalendarRange, icon: CalendarRange,
href: "/rueckblick", href: "/rueckblick",
}, },
{
id: "verlauf",
label: "Verlauf",
hint: "Alles, was passiert ist – über alle Projekte",
icon: History,
href: "/verlauf",
},
{ {
id: "tasks", id: "tasks",
label: "Aufgaben", label: "Aufgaben",
@@ -99,7 +116,8 @@ const ACTIONS: Action[] = [
type Entry = type Entry =
| { kind: "action"; key: string; action: Action } | { kind: "action"; key: string; action: Action }
| { kind: "project"; key: string; project: ProjectHit } | { kind: "project"; key: string; project: ProjectHit }
| { kind: "note"; key: string; note: NoteHit; projectName: string }; | { kind: "note"; key: string; note: NoteHit; projectName: string }
| { kind: "task"; key: string; task: TaskHit; projectName: string };
export function CommandPalette({ isAdmin }: { isAdmin: boolean }) { export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
const router = useRouter(); const router = useRouter();
@@ -108,6 +126,7 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
const [projects, setProjects] = useState<ProjectHit[] | null>(null); const [projects, setProjects] = useState<ProjectHit[] | null>(null);
const [notes, setNotes] = useState<NoteHit[]>([]); const [notes, setNotes] = useState<NoteHit[]>([]);
const [aufgaben, setAufgaben] = useState<TaskHit[]>([]);
const [active, setActive] = useState(0); const [active, setActive] = useState(0);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const listRef = useRef<HTMLDivElement>(null); const listRef = useRef<HTMLDivElement>(null);
@@ -146,6 +165,7 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
const needle = query.trim(); const needle = query.trim();
if (needle.length < 2) { if (needle.length < 2) {
setNotes([]); setNotes([]);
setAufgaben([]);
return; return;
} }
const controller = new AbortController(); const controller = new AbortController();
@@ -155,8 +175,9 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
signal: controller.signal, signal: controller.signal,
}); });
if (!response.ok) return; if (!response.ok) return;
const body = (await response.json()) as { hits: NoteHit[] }; const body = (await response.json()) as { hits: NoteHit[]; tasks: TaskHit[] };
setNotes(body.hits ?? []); setNotes(body.hits ?? []);
setAufgaben(body.tasks ?? []);
} catch { } catch {
// Abbruch beim Weitertippen ist der Normalfall. // Abbruch beim Weitertippen ist der Normalfall.
} }
@@ -171,6 +192,7 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
if (!open) { if (!open) {
setQuery(""); setQuery("");
setNotes([]); setNotes([]);
setAufgaben([]);
setActive(0); setActive(0);
} }
}, [open]); }, [open]);
@@ -210,6 +232,17 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
for (const project of passendeProjekte.slice(0, 8)) { for (const project of passendeProjekte.slice(0, 8)) {
result.push({ kind: "project", key: `p-${project.id}`, project }); result.push({ kind: "project", key: `p-${project.id}`, project });
} }
// Aufgaben vor Notizen: wer tippt, sucht haeufiger etwas zu Tun als
// etwas Notiertes.
for (const treffer of aufgaben.slice(0, 5)) {
result.push({
kind: "task",
key: `t-${treffer.taskId}`,
task: treffer,
projectName:
(projects ?? []).find((project) => project.id === treffer.projectId)?.name ?? "Projekt",
});
}
for (const hit of notes.slice(0, 5)) { for (const hit of notes.slice(0, 5)) {
result.push({ result.push({
kind: "note", kind: "note",
@@ -223,7 +256,7 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
result.push({ kind: "action", key: `a-${action.id}`, action }); result.push({ kind: "action", key: `a-${action.id}`, action });
} }
return result; return result;
}, [query, projects, notes, isAdmin]); }, [query, projects, notes, aufgaben, isAdmin]);
useEffect(() => { useEffect(() => {
setActive((current) => Math.min(current, Math.max(0, entries.length - 1))); setActive((current) => Math.min(current, Math.max(0, entries.length - 1)));
@@ -234,6 +267,7 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
setOpen(false); setOpen(false);
if (entry.kind === "action") router.push(entry.action.href); if (entry.kind === "action") router.push(entry.action.href);
else if (entry.kind === "project") router.push(`/projects/${entry.project.id}`); else if (entry.kind === "project") router.push(`/projects/${entry.project.id}`);
else if (entry.kind === "task") router.push(`/projects/${entry.task.projectId}`);
else router.push(`/projects/${entry.note.projectId}`); else router.push(`/projects/${entry.note.projectId}`);
}, },
[router], [router],
@@ -284,7 +318,7 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
value={query} value={query}
onChange={(event) => setQuery(event.target.value)} onChange={(event) => setQuery(event.target.value)}
onKeyDown={onInputKey} onKeyDown={onInputKey}
placeholder="Projekt, Notiz oder Bereich…" placeholder="Projekt, Aufgabe, Notiz oder Bereich…"
className="w-full bg-transparent text-sm text-slate-100 outline-none placeholder:text-slate-600" className="w-full bg-transparent text-sm text-slate-100 outline-none placeholder:text-slate-600"
/> />
{loading ? <Loader2 className="h-3.5 w-3.5 animate-spin text-slate-600" /> : null} {loading ? <Loader2 className="h-3.5 w-3.5 animate-spin text-slate-600" /> : null}
@@ -338,6 +372,23 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
{statusOf(entry.project.status).short} {statusOf(entry.project.status).short}
</span> </span>
</> </>
) : entry.kind === "task" ? (
<>
<CheckSquare className="mt-0.5 h-4 w-4 shrink-0 text-emerald-300/70" />
<span className="min-w-0">
<span className="block truncate text-sm text-slate-200">
{entry.task.title}
<span className="ml-1.5 text-[11px] text-slate-500">
in {entry.projectName}
</span>
</span>
<span className="block truncate text-[11px] text-slate-500">
{entry.task.snippet.replace(/\[\[|\]\]/g, "").trim() ||
TASK_STATUS_META[entry.task.status as TaskStatus]?.label ||
"Aufgabe"}
</span>
</span>
</>
) : ( ) : (
<> <>
<NotebookPen className="mt-0.5 h-4 w-4 shrink-0 text-violet-300/70" /> <NotebookPen className="mt-0.5 h-4 w-4 shrink-0 text-violet-300/70" />
+76 -5
View File
@@ -3,6 +3,7 @@
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { import {
CheckSquare,
Columns3, Columns3,
Database, Database,
Download, Download,
@@ -16,7 +17,7 @@ import {
Upload, Upload,
X, X,
} from "lucide-react"; } from "lucide-react";
import type { ProjectStatus } from "@prisma/client"; import type { ProjectStatus, TaskStatus } from "@prisma/client";
import { BulkBar } from "@/components/BulkBar"; import { BulkBar } from "@/components/BulkBar";
import { ImportDialog } from "@/components/ImportDialog"; import { ImportDialog } from "@/components/ImportDialog";
import { KanbanBoard } from "@/components/KanbanBoard"; import { KanbanBoard } from "@/components/KanbanBoard";
@@ -25,9 +26,18 @@ import { ProjectDialog } from "@/components/ProjectDialog";
import { ProjectList } from "@/components/ProjectList"; import { ProjectList } from "@/components/ProjectList";
import { Popover } from "@/components/ui/Popover"; import { Popover } from "@/components/ui/Popover";
import { STATUS_META, STATUS_ORDER } from "@/lib/status"; import { STATUS_META, STATUS_ORDER } from "@/lib/status";
import { TASK_STATUS_META } from "@/lib/tasks";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import type { ConnectionSafe, ProjectListItem } from "@/types"; import type { ConnectionSafe, ProjectListItem } from "@/types";
interface TaskHit {
projectId: string;
taskId: string;
title: string;
status: string;
snippet: string;
}
interface NoteHit { interface NoteHit {
projectId: string; projectId: string;
noteId: string; noteId: string;
@@ -135,6 +145,7 @@ export function ProjectBoard({
const [dataMenuOpen, setDataMenuOpen] = useState(false); const [dataMenuOpen, setDataMenuOpen] = useState(false);
const dataButtonRef = useRef<HTMLButtonElement>(null); const dataButtonRef = useRef<HTMLButtonElement>(null);
const [noteHits, setNoteHits] = useState<NoteHit[]>([]); const [noteHits, setNoteHits] = useState<NoteHit[]>([]);
const [taskHits, setTaskHits] = useState<TaskHit[]>([]);
const [selection, setSelection] = useState<Set<string>>(new Set()); const [selection, setSelection] = useState<Set<string>>(new Set());
/** /**
@@ -147,6 +158,7 @@ export function ProjectBoard({
const needle = query.trim(); const needle = query.trim();
if (needle.length < 2) { if (needle.length < 2) {
setNoteHits([]); setNoteHits([]);
setTaskHits([]);
return; return;
} }
@@ -157,8 +169,9 @@ export function ProjectBoard({
signal: controller.signal, signal: controller.signal,
}); });
if (!response.ok) return; if (!response.ok) return;
const body = (await response.json()) as { hits: NoteHit[] }; const body = (await response.json()) as { hits: NoteHit[]; tasks: TaskHit[] };
setNoteHits(body.hits ?? []); setNoteHits(body.hits ?? []);
setTaskHits(body.tasks ?? []);
} catch { } catch {
// Abgebrochene Anfragen sind der Normalfall beim Tippen. // Abgebrochene Anfragen sind der Normalfall beim Tippen.
} }
@@ -171,8 +184,12 @@ export function ProjectBoard({
}, [query]); }, [query]);
const noteHitProjectIds = useMemo( const noteHitProjectIds = useMemo(
() => new Set(noteHits.map((hit) => hit.projectId)), () =>
[noteHits], new Set([
...noteHits.map((hit) => hit.projectId),
...taskHits.map((hit) => hit.projectId),
]),
[noteHits, taskHits],
); );
const counts = useMemo(() => { const counts = useMemo(() => {
@@ -200,7 +217,7 @@ export function ProjectBoard({
project.repositories.some((repo) => project.repositories.some((repo) =>
(repo.snapshot?.fullName ?? "").toLowerCase().includes(needle), (repo.snapshot?.fullName ?? "").toLowerCase().includes(needle),
) || ) ||
// Treffer in Notizen kommen vom Server dazu. // Treffer in Notizen und Aufgaben kommen vom Server dazu.
noteHitProjectIds.has(project.id) noteHitProjectIds.has(project.id)
); );
}); });
@@ -434,6 +451,60 @@ export function ProjectBoard({
</div> </div>
</div> </div>
{/* Treffer in Aufgaben */}
{taskHits.length > 0 ? (
<div className="glass fade-up p-4">
<h2 className="mb-2.5 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-slate-400">
<CheckSquare className="h-3.5 w-3.5 text-emerald-300" />
Treffer in Aufgaben
<span className="rounded-full bg-white/6 px-2 py-0.5 tabular-nums text-slate-400">
{taskHits.length}
</span>
</h2>
<ul className="space-y-1">
{taskHits.slice(0, 8).map((hit) => {
const project = projects.find((entry) => entry.id === hit.projectId);
const status = TASK_STATUS_META[hit.status as TaskStatus];
return (
<li key={hit.taskId}>
<Link
href={`/projects/${hit.projectId}`}
className="block rounded-lg px-2.5 py-2 transition-colors hover:bg-white/5"
>
<span className="flex flex-wrap items-baseline gap-x-2">
<span className="text-sm text-slate-200">{hit.title}</span>
<span className="text-[11px] text-slate-500">
· {project?.name ?? "Projekt"}
</span>
{status ? (
<span
className="inline-flex items-center gap-1 text-[11px]"
style={{ color: status.color }}
>
{status.label}
</span>
) : null}
</span>
{/* Nur wenn die Beschreibung etwas beitraegt – passte
allein der Titel, ist der Ausschnitt leer. */}
{hit.snippet.trim() ? (
<span className="mt-0.5 block text-xs leading-snug text-slate-400">
{highlight(hit.snippet)}
</span>
) : null}
</Link>
</li>
);
})}
</ul>
{taskHits.length > 8 ? (
<p className="mt-2 px-2.5 text-[11px] text-slate-600">
… und {taskHits.length - 8} weitere
</p>
) : null}
</div>
) : null}
{/* Treffer in Notizen */} {/* Treffer in Notizen */}
{noteHits.length > 0 ? ( {noteHits.length > 0 ? (
<div className="glass fade-up p-4"> <div className="glass fade-up p-4">
+126
View File
@@ -0,0 +1,126 @@
"use client";
import { useMemo, useState } from "react";
import { ChevronDown, History, Loader2 } from "lucide-react";
import { ActivityDayGroups } from "@/components/ActivityRow";
import { tagesschluessel } from "@/lib/review";
import type { ReviewDay, ReviewEntry } from "@/types";
/**
* Die fortlaufende Zeitleiste.
*
* Client-Komponente, weil hier nachgeladen wird – das ist der Unterschied
* zum Wochenrueckblick, der komplett auf dem Server entsteht.
*
* Die Buendelung nach Tagen passiert hier im Browser. Das ist unbedenklich,
* weil tagesschluessel eine feste Zeitzone benutzt: Server und Browser kommen
* damit auf denselben Kalendertag, und die erste Seite hydriert ohne
* Abweichung.
*/
export function Timeline({
erste,
weitere: gabWeitere,
}: {
erste: ReviewEntry[];
weitere: boolean;
}) {
const [eintraege, setEintraege] = useState(erste);
const [weitere, setWeitere] = useState(gabWeitere);
const [laedt, setLaedt] = useState(false);
const [fehler, setFehler] = useState<string | null>(null);
const tage: ReviewDay[] = useMemo(() => {
// Map behaelt die Einfuegereihenfolge – die Eintraege kommen schon
// absteigend, also stimmt die Reihenfolge der Tage von selbst.
const nachTag = new Map<string, ReviewEntry[]>();
for (const eintrag of eintraege) {
const schluessel = tagesschluessel(new Date(eintrag.createdAt));
const liste = nachTag.get(schluessel) ?? [];
liste.push(eintrag);
nachTag.set(schluessel, liste);
}
return [...nachTag.entries()].map(([tag, liste]) => ({ tag, eintraege: liste }));
}, [eintraege]);
async function mehr() {
const letzter = eintraege[eintraege.length - 1];
if (!letzter) return;
setLaedt(true);
setFehler(null);
try {
const antwort = await fetch(
`/api/activity?vor=${encodeURIComponent(letzter.createdAt)}&id=${encodeURIComponent(letzter.id)}`,
);
if (!antwort.ok) throw new Error("Verlauf konnte nicht geladen werden.");
const nutzlast = (await antwort.json()) as {
activities: ReviewEntry[];
weitere: boolean;
};
/**
* Gegen Dubletten absichern, auch wenn der Cursor sie ausschliesst:
* ein zweimal gedrueckter Knopf oder ein wiederholter Aufruf soll
* keine Zeile verdoppeln, und React braucht eindeutige Schluessel.
*/
setEintraege((bisher) => {
const bekannt = new Set(bisher.map((eintrag) => eintrag.id));
return [...bisher, ...nutzlast.activities.filter((eintrag) => !bekannt.has(eintrag.id))];
});
setWeitere(nutzlast.weitere);
} catch (gefangen) {
setFehler(gefangen instanceof Error ? gefangen.message : String(gefangen));
} finally {
setLaedt(false);
}
}
if (eintraege.length === 0) {
return (
<div className="glass fade-up flex flex-col items-center justify-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-violet-500/25 to-cyan-400/20 text-violet-200">
<History className="h-6 w-6" />
</span>
<div>
<h2 className="text-lg font-semibold text-white">Noch kein Verlauf</h2>
<p className="mt-1 max-w-md text-sm text-slate-400">
Sobald du ein Projekt anlegst, Aufgaben verschiebst oder Notizen schreibst, steht es
hier.
</p>
</div>
</div>
);
}
return (
<div className="space-y-5">
{/* Die Jahreszahl gehoert dazu: eine Zeitleiste reicht weit zurueck,
und "3. Januar" allein sagt dann nicht genug. */}
<ActivityDayGroups tage={tage} mitJahr />
{fehler ? (
<p className="rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-200">
{fehler}
</p>
) : null}
<div className="flex flex-col items-center gap-2 pt-1">
{weitere ? (
<button type="button" className="btn btn-ghost" onClick={mehr} disabled={laedt}>
{laedt ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<ChevronDown className="h-4 w-4" />
)}
Ältere laden
</button>
) : (
<p className="text-xs text-slate-600">Das war alles.</p>
)}
<p className="text-[11px] text-slate-600 tabular-nums">
{eintraege.length} {eintraege.length === 1 ? "Vorgang" : "Vorgänge"} geladen
</p>
</div>
</div>
);
}
+4 -93
View File
@@ -1,10 +1,7 @@
import Link from "next/link";
import { CalendarRange, CheckSquare, FolderGit2, NotebookPen, Plus } from "lucide-react"; import { CalendarRange, CheckSquare, FolderGit2, NotebookPen, Plus } from "lucide-react";
import { ACTIVITY_KINDS } from "@/components/activityKinds"; import { ActivityDayGroups } from "@/components/ActivityRow";
import type { Kennzahlen } from "@/lib/review"; import type { Kennzahlen } from "@/lib/review";
import { accentOf } from "@/lib/status"; import type { ReviewDay } from "@/types";
import { cn } from "@/lib/utils";
import type { ReviewDay, ReviewEntry } from "@/types";
/** /**
* Der Wochenrueckblick. * Der Wochenrueckblick.
@@ -17,26 +14,6 @@ import type { ReviewDay, ReviewEntry } from "@/types";
* deshalb auf den Server. * deshalb auf den Server.
*/ */
const WOCHENTAG = new Intl.DateTimeFormat("de-DE", {
timeZone: "Europe/Berlin",
weekday: "long",
});
const TAG_MONAT = new Intl.DateTimeFormat("de-DE", {
timeZone: "Europe/Berlin",
day: "numeric",
month: "long",
});
const UHRZEIT = new Intl.DateTimeFormat("de-DE", {
timeZone: "Europe/Berlin",
hour: "2-digit",
minute: "2-digit",
});
function alsDatum(tag: string): Date {
const [j, m, t] = tag.split("-").map(Number);
return new Date(Date.UTC(j, m - 1, t, 12));
}
export function WeeklyReview({ export function WeeklyReview({
tage, tage,
kennzahlen, kennzahlen,
@@ -86,32 +63,8 @@ export function WeeklyReview({
</p> </p>
) : null} ) : null}
{/* Verlauf nach Tagen */} {/* Verlauf nach Tagen – dieselbe Darstellung wie in der Zeitleiste. */}
<div className="space-y-6"> <ActivityDayGroups tage={tage} />
{tage.map((tag) => {
const datum = alsDatum(tag.tag);
return (
<section key={tag.tag}>
<div className="mb-2.5 flex flex-wrap items-baseline gap-x-2.5 gap-y-1">
<h2 className="text-sm font-semibold uppercase tracking-wider text-slate-300">
{WOCHENTAG.format(datum)}
</h2>
<span className="text-xs text-slate-500">{TAG_MONAT.format(datum)}</span>
<span className="rounded-full bg-white/6 px-2 py-0.5 text-[11px] tabular-nums text-slate-400">
{tag.eintraege.length}
</span>
<span className="h-px flex-1 bg-gradient-to-r from-white/10 to-transparent" />
</div>
<ul className="glass divide-y divide-white/6 overflow-hidden">
{tag.eintraege.map((eintrag) => (
<Zeile key={eintrag.id} eintrag={eintrag} />
))}
</ul>
</section>
);
})}
</div>
</div> </div>
); );
} }
@@ -153,45 +106,3 @@ function Kennzahl({
</div> </div>
); );
} }
function Zeile({ eintrag }: { eintrag: ReviewEntry }) {
const art = ACTIVITY_KINDS[eintrag.kind];
const Icon = art.icon;
const accent = accentOf(eintrag.project.accent);
return (
<li className="flex items-start gap-2.5 px-3 py-2.5 sm:gap-3 sm:px-4">
<span className={cn("mt-0.5 shrink-0", art.color)} title={art.label}>
<Icon className="h-4 w-4" />
</span>
<div className="min-w-0 flex-1">
<p className="text-sm leading-snug text-slate-200">{eintrag.summary}</p>
<div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-slate-500">
{/* Das Projekt gehoert in jede Zeile – ohne es ist eine
projektuebergreifende Liste nicht zu lesen. */}
<Link
href={`/projects/${eintrag.project.id}`}
className="inline-flex max-w-[12rem] items-center gap-1.5 truncate text-slate-400 underline-offset-2 hover:text-violet-300 hover:underline"
>
<span
className="h-1.5 w-1.5 shrink-0 rounded-full"
style={{ backgroundColor: accent.from }}
aria-hidden="true"
/>
{eintrag.project.name}
</Link>
<span className="tabular-nums">{UHRZEIT.format(new Date(eintrag.createdAt))} Uhr</span>
{eintrag.user ? (
<span className="hidden xs:inline">
{eintrag.user.displayName?.trim() || eintrag.user.username}
</span>
) : (
// Ohne Benutzer: das war der Zeitgeber oder ein Webhook.
<span className="hidden text-slate-600 xs:inline">automatisch</span>
)}
</div>
</div>
</li>
);
}
+52 -4
View File
@@ -10,7 +10,9 @@ import {
Loader2, Loader2,
Plus, Plus,
Repeat, Repeat,
Search,
Square, Square,
X,
} from "lucide-react"; } from "lucide-react";
import type { TaskStatus } from "@prisma/client"; import type { TaskStatus } from "@prisma/client";
import { QuickCapture } from "@/components/QuickCapture"; import { QuickCapture } from "@/components/QuickCapture";
@@ -42,6 +44,7 @@ export function TaskOverview({ tasks }: { tasks: TaskOverviewItem[] }) {
const router = useRouter(); const router = useRouter();
const [statusFilter, setStatusFilter] = useState<TaskStatus[]>([]); const [statusFilter, setStatusFilter] = useState<TaskStatus[]>([]);
const [projektFilter, setProjektFilter] = useState(""); const [projektFilter, setProjektFilter] = useState("");
const [suche, setSuche] = useState("");
const [zeigeErledigte, setZeigeErledigte] = useState(false); const [zeigeErledigte, setZeigeErledigte] = useState(false);
const [erfassenOffen, setErfassenOffen] = useState(false); const [erfassenOffen, setErfassenOffen] = useState(false);
const [laufend, setLaufend] = useState<Set<string>>(new Set()); const [laufend, setLaufend] = useState<Set<string>>(new Set());
@@ -63,16 +66,34 @@ export function TaskOverview({ tasks }: { tasks: TaskOverviewItem[] }) {
}, [tasks]); }, [tasks]);
const sichtbar = useMemo(() => { const sichtbar = useMemo(() => {
const nadel = suche.toLowerCase().trim();
return tasks.filter((task) => { return tasks.filter((task) => {
// Erledigtes fuellt die Liste sonst mit dem, was gerade nicht ansteht. // Erledigtes fuellt die Liste sonst mit dem, was gerade nicht ansteht.
if (!zeigeErledigte && task.status === "DONE" && !statusFilter.includes("DONE")) { // Wer allerdings sucht, sucht auch in Erledigtem – sonst findet man
// die Aufgabe von letzter Woche nicht wieder.
if (
!zeigeErledigte &&
!nadel &&
task.status === "DONE" &&
!statusFilter.includes("DONE")
) {
return false; return false;
} }
if (statusFilter.length > 0 && !statusFilter.includes(task.status)) return false; if (statusFilter.length > 0 && !statusFilter.includes(task.status)) return false;
if (projektFilter && task.project.id !== projektFilter) return false; if (projektFilter && task.project.id !== projektFilter) return false;
return true; if (!nadel) return true;
// Die Aufgaben liegen hier ohnehin alle vor – das filtert ohne
// zusaetzliche Abfrage und ohne Verzoegerung beim Tippen.
return (
task.title.toLowerCase().includes(nadel) ||
(task.description ?? "").toLowerCase().includes(nadel) ||
task.labels.some((label) => label.toLowerCase().includes(nadel)) ||
task.project.name.toLowerCase().includes(nadel)
);
}); });
}, [tasks, statusFilter, projektFilter, zeigeErledigte]); }, [tasks, statusFilter, projektFilter, zeigeErledigte, suche]);
const faecher = useMemo(() => { const faecher = useMemo(() => {
return DUE_BUCKET_ORDER.map((bucket) => ({ return DUE_BUCKET_ORDER.map((bucket) => ({
@@ -155,6 +176,27 @@ export function TaskOverview({ tasks }: { tasks: TaskOverviewItem[] }) {
{/* Steuerleiste */} {/* Steuerleiste */}
<div className="glass flex flex-col gap-3 p-3 sm:p-4"> <div className="glass flex flex-col gap-3 p-3 sm:p-4">
<div className="relative">
<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="Aufgaben durchsuchen – Titel, Beschreibung, Labels…"
value={suche}
onChange={(event) => setSuche(event.target.value)}
aria-label="Aufgaben durchsuchen"
/>
{suche ? (
<button
type="button"
onClick={() => setSuche("")}
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 flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
{TASK_STATUS_ORDER.map((status) => { {TASK_STATUS_ORDER.map((status) => {
const meta = TASK_STATUS_META[status]; const meta = TASK_STATUS_META[status];
@@ -220,11 +262,17 @@ export function TaskOverview({ tasks }: { tasks: TaskOverviewItem[] }) {
</span> </span>
<div> <div>
<h2 className="text-lg font-semibold text-white"> <h2 className="text-lg font-semibold text-white">
{tasks.length === 0 ? "Noch keine Aufgaben" : "Nichts offen"} {tasks.length === 0
? "Noch keine Aufgaben"
: suche.trim()
? "Keine Treffer"
: "Nichts offen"}
</h2> </h2>
<p className="mt-1 max-w-md text-sm text-slate-400"> <p className="mt-1 max-w-md text-sm text-slate-400">
{tasks.length === 0 {tasks.length === 0
? "Aufgaben entstehen im Projekt oder hier über „Neue Aufgabe“." ? "Aufgaben entstehen im Projekt oder hier über „Neue Aufgabe“."
: suche.trim()
? `Keine Aufgabe passt zu „${suche.trim()}“ – gesucht wird in Titel, Beschreibung, Labels und Projektname.`
: "Alles abgehakt, was zu den Filtern passt."} : "Alles abgehakt, was zu den Filtern passt."}
</p> </p>
</div> </div>
+35
View File
@@ -41,6 +41,41 @@ export const KIND_META: Record<ChangeKind, { label: string; className: string }>
}; };
export const CHANGELOG: Release[] = [ export const CHANGELOG: Release[] = [
{
version: "1.10.0",
date: "2026-08-18",
headline: "Rückblick, Zeitleiste und eine Suche, die auch Aufgaben findet.",
changes: [
{
kind: "neu",
text:
"Wochenrückblick über alle Projekte: Kennzahlen der Woche und darunter die " +
"Vorgänge nach Tagen gebündelt. Blättern in frühere Wochen inbegriffen. " +
"Erreichbar über die Schnellsuche und einen Verweis vom Dashboard.",
},
{
kind: "neu",
text:
"Globale Zeitleiste: derselbe Verlauf, aber fortlaufend und ohne Wochengrenze, " +
"mit Nachladen älterer Einträge. Geblättert wird per Cursor — bei mehreren " +
"Einträgen im selben Augenblick verliert oder verdoppelt das keine Zeilen.",
},
{
kind: "neu",
text:
"Das Aufgabendashboard hat ein Suchfeld über Titel, Beschreibung, Labels und " +
"Projektname. Wer sucht, sucht dabei auch in Erledigtem — sonst findet man die " +
"Aufgabe von letzter Woche nicht wieder.",
},
{
kind: "besser",
text:
"Die Volltextsuche kannte bisher nur Notizen und findet jetzt auch Aufgaben — " +
"mit denselben deutschen Stammformen: „Rechnung“ findet „Rechnungen“. Treffer " +
"erscheinen im Projektbrett und in der Schnellsuche.",
},
],
},
{ {
version: "1.9.0", version: "1.9.0",
date: "2026-08-17", date: "2026-08-17",
+64
View File
@@ -0,0 +1,64 @@
import { describe, expect, it } from "vitest";
import { SEITE, SEITE_MAX, cursorAus, seitenBedingung, seitenGroesse } from "./timeline";
const ID = "cmstxnrzs00011cx4nd5tiqbt";
describe("cursorAus", () => {
it("liest Zeitpunkt und ID", () => {
const cursor = cursorAus("2026-08-17T22:30:00.000Z", ID);
expect(cursor?.id).toBe(ID);
expect(cursor?.createdAt.toISOString()).toBe("2026-08-17T22:30:00.000Z");
});
it("faengt ohne Cursor von vorn an", () => {
expect(cursorAus(null, null)).toBeNull();
expect(cursorAus("2026-08-17T22:30:00.000Z", null)).toBeNull();
expect(cursorAus(null, ID)).toBeNull();
});
it("weist Unbrauchbares ab, statt es in die Abfrage zu geben", () => {
expect(cursorAus("kein datum", ID)).toBeNull();
expect(cursorAus("2026-08-17T22:30:00.000Z", "kurz")).toBeNull();
expect(cursorAus("2026-08-17T22:30:00.000Z", "'; DROP TABLE x --")).toBeNull();
});
});
describe("seitenBedingung", () => {
it("filtert immer auf den Besitzer", () => {
expect(seitenBedingung("u1", null)).toEqual({ project: { ownerId: "u1" } });
});
it("behaelt den Besitzer auch mit Cursor", () => {
const wo = seitenBedingung("u1", { createdAt: new Date("2026-08-17T22:30:00Z"), id: ID });
expect(wo.project).toEqual({ ownerId: "u1" });
});
it("fasst gleichzeitige Eintraege ueber die ID auseinander", () => {
// Der eigentliche Zweck: beim Uebernehmen von Issues entstehen mehrere
// Zeilen mit identischem createdAt. Ohne den zweiten Zweig wuerde die
// naechste Seite sie ueberspringen oder wiederholen.
const zeitpunkt = new Date("2026-08-17T22:30:00Z");
const wo = seitenBedingung("u1", { createdAt: zeitpunkt, id: ID });
expect(wo.OR).toEqual([
{ createdAt: { lt: zeitpunkt } },
{ createdAt: zeitpunkt, id: { lt: ID } },
]);
});
});
describe("seitenGroesse", () => {
it("nimmt die Vorgabe, wenn nichts angefragt wurde", () => {
expect(seitenGroesse(null)).toBe(SEITE);
expect(seitenGroesse("unsinn")).toBe(SEITE);
});
it("deckelt nach oben und unten", () => {
expect(seitenGroesse("1000")).toBe(SEITE_MAX);
expect(seitenGroesse("0")).toBe(1);
expect(seitenGroesse("-5")).toBe(1);
});
it("nimmt einen gueltigen Wert an", () => {
expect(seitenGroesse("25")).toBe(25);
});
});
+77
View File
@@ -0,0 +1,77 @@
import type { Prisma } from "@prisma/client";
/**
* Fortlaufender Verlauf ueber alle Projekte.
*
* Geblaettert wird per Cursor, nicht per `skip`. Der Verlauf schreibt
* mehrere Eintraege im selben Augenblick – beim Uebernehmen von Issues etwa
* entstehen zehn Zeilen mit identischem `createdAt`. Ein Offset ueber eine
* solche Grenze hinweg ueberspringt Zeilen oder zeigt sie zweimal, und zwar
* lautlos. Der Cursor aus (createdAt, id) ist dagegen eindeutig.
*/
/** Wie viele Eintraege eine Seite hat. */
export const SEITE = 40;
/** Deckel gegen einen Aufrufer, der sich alles auf einmal holen will. */
export const SEITE_MAX = 100;
export interface Cursor {
/** Zeitpunkt des letzten gezeigten Eintrags. */
createdAt: Date;
/** Seine ID – entscheidet bei gleichem Zeitpunkt. */
id: string;
}
/**
* Liest einen Cursor aus Abfrageparametern.
*
* Gibt null zurueck, wenn nichts oder Unbrauchbares ankommt – dann faengt
* die Seite eben von vorn an. Ein Fehler waere hier die schlechtere Antwort:
* ein abgeschnittener Verweis soll die Seite nicht sperren.
*/
export function cursorAus(vor: string | null, id: string | null): Cursor | null {
if (!vor || !id) return null;
const zeitpunkt = new Date(vor);
if (Number.isNaN(zeitpunkt.getTime())) return null;
// Die ID ist eine cuid; alles andere weisen wir ab, statt es in die
// Abfrage zu geben.
if (!/^[a-z0-9]{20,32}$/i.test(id)) return null;
return { createdAt: zeitpunkt, id };
}
/**
* Die where-Bedingung fuer eine Seite.
*
* Besitzer zuerst – wie ueberall im Projekt, damit fremde Datensaetze gar
* nicht erst getroffen werden. Der Verlauf selbst kennt keinen Besitzer, die
* Bedingung laeuft deshalb ueber das Projekt.
*
* Der Cursor bedeutet "aelter als der letzte gezeigte Eintrag": entweder
* frueher, oder gleichzeitig und mit kleinerer ID. Genau so sortiert auch
* die Abfrage, weshalb beides zusammenpasst.
*/
export function seitenBedingung(ownerId: string, cursor: Cursor | null): Prisma.ActivityWhereInput {
const basis: Prisma.ActivityWhereInput = { project: { ownerId } };
if (!cursor) return basis;
return {
...basis,
OR: [
{ createdAt: { lt: cursor.createdAt } },
{ createdAt: cursor.createdAt, id: { lt: cursor.id } },
],
};
}
/** Sortierung, die zur Cursor-Bedingung passt. Beide muessen gleich sein. */
export const SEITEN_ORDNUNG: Prisma.ActivityOrderByWithRelationInput[] = [
{ createdAt: "desc" },
{ id: "desc" },
];
/** Begrenzt eine gewuenschte Seitengroesse auf das Erlaubte. */
export function seitenGroesse(roh: string | null): number {
const angefragt = roh === null ? Number.NaN : Number(roh);
if (!Number.isFinite(angefragt)) return SEITE;
return Math.min(Math.max(Math.trunc(angefragt), 1), SEITE_MAX);
}