Commit 4: Kategorien-API (CRUD + Reorder) und Favoriten-Toggle im Frontend

README.md

@@ -62,12 +62,16 @@ Dieser erste Commit liefert ein lauffähiges Grundgerüst:
   mit Repository-Layer über Drizzle (siehe `apps/backend/src/db/repositories`)
 - ✅ Suche im Frontend gegen echte Backend-Daten (TanStack Query), inkl. Ranking-Logik
   aus `packages/shared` und Tastatur-Navigation (Pfeiltasten, Enter, Escape)
+- ✅ Kategorien-API (`/api/categories`), inkl. Umbenennen, Löschen (Dienste behalten
+  ihre Zuordnung nicht, werden aber nicht gelöscht) und Bulk-Reorder für Drag & Drop
+- ✅ Favoriten-Toggle direkt in der Trefferliste (Stern anklicken)
 
 Noch **nicht** enthalten (folgt in den nächsten Commits):
 
 - Scanner (FritzBox, DNS, HTTP/HTTPS, Portscan, Softwareerkennung)
-- Kategorien-Verwaltung & Favoriten-Toggle im UI
-- Adminbereich, TanStack Router, Plugin-System, PWA-Manifest, shadcn/ui, RHF
+- Adminbereich mit Kategorien-Verwaltungsoberfläche (Erstellen, Umbenennen,
+  Drag & Drop) — Backend-API dafür existiert bereits
+- TanStack Router, Plugin-System, PWA-Manifest, shadcn/ui, RHF
 
 Siehe [`docs/ROADMAP.md`](./docs/ROADMAP.md) für die geplante Reihenfolge.
 
@@ -86,6 +90,13 @@ GET    /api/services/:id
 POST   /api/services              erfordert existierende deviceId
 PATCH  /api/services/:id
 DELETE /api/services/:id
+
+GET    /api/categories
+POST   /api/categories
+PATCH  /api/categories/reorder    Body: [{ id, order }, ...]
+PATCH  /api/categories/:id        Umbenennen
+DELETE /api/categories/:id        Dienste behalten ihre category nicht mehr (null),
+                                   werden aber nicht gelöscht
 ```
 
 ## Deployment auf dem Server (xlc-launchpad)

apps/backend/src/db/repositories/categories.ts

@@ -0,0 +1,101 @@
+import { randomUUID } from "node:crypto";
+import { eq } from "drizzle-orm";
+import type {
+  Category,
+  CategoryCreateInput,
+  CategoryReorderInput,
+  CategoryUpdateInput,
+} from "@launchpad/shared";
+import { db } from "../client.js";
+import { categories, services } from "../schema.js";
+
+function nowIso(): string {
+  return new Date().toISOString();
+}
+
+function mapRow(row: typeof categories.$inferSelect): Category {
+  return { id: row.id, name: row.name, order: row.order };
+}
+
+export function listCategories(): Category[] {
+  return db
+    .select()
+    .from(categories)
+    .all()
+    .map(mapRow)
+    .sort((a, b) => a.order - b.order);
+}
+
+export function getCategory(id: string): Category | null {
+  const row = db.select().from(categories).where(eq(categories.id, id)).get();
+  return row ? mapRow(row) : null;
+}
+
+export function createCategory(input: CategoryCreateInput): Category {
+  const id = randomUUID();
+  const timestamp = nowIso();
+  const existing = listCategories();
+  const nextOrder = existing.length > 0 ? Math.max(...existing.map((c) => c.order)) + 1 : 0;
+
+  db.insert(categories)
+    .values({
+      id,
+      name: input.name,
+      order: nextOrder,
+      createdAt: timestamp,
+      updatedAt: timestamp,
+    })
+    .run();
+
+  return getCategory(id)!;
+}
+
+export function updateCategory(id: string, input: CategoryUpdateInput): Category | null {
+  const existing = getCategory(id);
+  if (!existing) return null;
+
+  db.update(categories)
+    .set({
+      ...(input.name !== undefined && { name: input.name }),
+      updatedAt: nowIso(),
+    })
+    .where(eq(categories.id, id))
+    .run();
+
+  return getCategory(id);
+}
+
+/**
+ * Setzt die Reihenfolge mehrerer Kategorien in einer Transaktion neu,
+ * z. B. nach Drag & Drop in der Admin-UI (siehe Commit 6).
+ */
+export function reorderCategories(input: CategoryReorderInput): Category[] {
+  db.transaction((tx) => {
+    for (const entry of input) {
+      tx.update(categories)
+        .set({ order: entry.order, updatedAt: nowIso() })
+        .where(eq(categories.id, entry.id))
+        .run();
+    }
+  });
+
+  return listCategories();
+}
+
+/**
+ * Löscht eine Kategorie. Dienste, die dieser Kategorie zugeordnet waren,
+ * verlieren ihre Kategoriezuordnung (category wird auf null gesetzt),
+ * werden aber nicht selbst gelöscht.
+ */
+export function deleteCategory(id: string): boolean {
+  const category = getCategory(id);
+  if (!category) return false;
+
+  db.update(services)
+    .set({ category: null, updatedAt: nowIso() })
+    .where(eq(services.category, category.name))
+    .run();
+
+  const result = db.delete(categories).where(eq(categories.id, id)).run();
+  return result.changes > 0;
+}

apps/backend/src/index.ts

@@ -4,6 +4,7 @@ import { ensureSchema } from "./db/client.js";
 import { healthRoutes } from "./routes/health.js";
 import { deviceRoutes } from "./routes/devices.js";
 import { serviceRoutes } from "./routes/services.js";
+import { categoryRoutes } from "./routes/categories.js";
 
 const PORT = Number(process.env.PORT ?? 3001);
 const HOST = process.env.HOST ?? "0.0.0.0";
@@ -28,6 +29,7 @@ async function main() {
   await app.register(healthRoutes);
   await app.register(deviceRoutes);
   await app.register(serviceRoutes);
+  await app.register(categoryRoutes);
 
   app.get("/", async () => {
     return { name: "LaunchPad API", status: "running" };

apps/backend/src/routes/categories.ts

@@ -0,0 +1,53 @@
+import type { FastifyInstance } from "fastify";
+import {
+  CategoryCreateSchema,
+  CategoryReorderSchema,
+  CategoryUpdateSchema,
+} from "@launchpad/shared";
+import * as categoryRepo from "../db/repositories/categories.js";
+
+export async function categoryRoutes(app: FastifyInstance): Promise<void> {
+  app.get("/api/categories", async () => {
+    return categoryRepo.listCategories();
+  });
+
+  app.post("/api/categories", async (request, reply) => {
+    const parsed = CategoryCreateSchema.safeParse(request.body);
+    if (!parsed.success) {
+      return reply.code(400).send({ error: "Ungültige Eingabe", issues: parsed.error.issues });
+    }
+    const category = categoryRepo.createCategory(parsed.data);
+    return reply.code(201).send(category);
+  });
+
+  // Muss vor der /:id-Route registriert sein, damit "reorder" nicht als ID interpretiert wird.
+  app.patch("/api/categories/reorder", async (request, reply) => {
+    const parsed = CategoryReorderSchema.safeParse(request.body);
+    if (!parsed.success) {
+      return reply.code(400).send({ error: "Ungültige Eingabe", issues: parsed.error.issues });
+    }
+    return categoryRepo.reorderCategories(parsed.data);
+  });
+
+  app.patch("/api/categories/:id", async (request, reply) => {
+    const { id } = request.params as { id: string };
+    const parsed = CategoryUpdateSchema.safeParse(request.body);
+    if (!parsed.success) {
+      return reply.code(400).send({ error: "Ungültige Eingabe", issues: parsed.error.issues });
+    }
+    const category = categoryRepo.updateCategory(id, parsed.data);
+    if (!category) {
+      return reply.code(404).send({ error: "Kategorie nicht gefunden" });
+    }
+    return category;
+  });
+
+  app.delete("/api/categories/:id", async (request, reply) => {
+    const { id } = request.params as { id: string };
+    const deleted = categoryRepo.deleteCategory(id);
+    if (!deleted) {
+      return reply.code(404).send({ error: "Kategorie nicht gefunden" });
+    }
+    return reply.code(204).send();
+  });
+}

apps/frontend/src/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { SearchInput, StatusBadge, ResultsList } from "@launchpad/ui";
 import { rankServices, type Service, type HealthStatus } from "@launchpad/shared";
 import { useServices } from "./hooks/useServices.js";
@@ -60,6 +61,18 @@ function openService(service: Service) {
   window.open(service.url, "_blank", "noopener,noreferrer");
 }
 
+async function toggleServiceFavorite(service: Service): Promise<Service> {
+  const res = await fetch(`/api/services/${service.id}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ favorite: !service.favorite }),
+  });
+  if (!res.ok) {
+    throw new Error(`Favorit konnte nicht aktualisiert werden (HTTP ${res.status})`);
+  }
+  return res.json();
+}
+
 export default function App() {
   const [theme, toggleTheme] = useTheme();
   const [query, setQuery] = useState("");
@@ -67,6 +80,14 @@ export default function App() {
   const { health, error: healthError } = useBackendHealth();
   const { data: services, isLoading, isError } = useServices();
   const inputRef = useRef<HTMLInputElement>(null);
+  const queryClient = useQueryClient();
+
+  const toggleFavorite = useMutation({
+    mutationFn: toggleServiceFavorite,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["services"] });
+    },
+  });
 
   const results = useMemo(
     () => rankServices(services ?? [], query),
@@ -157,6 +178,7 @@ export default function App() {
             selectedIndex={selectedIndex}
             onHover={setSelectedIndex}
             onOpen={openService}
+            onToggleFavorite={(service) => toggleFavorite.mutate(service)}
             emptyLabel={
               (services?.length ?? 0) === 0
                 ? "Noch keine Dienste angelegt. Füge welche über die API hinzu."

docs/ROADMAP.md

@@ -19,10 +19,17 @@ Grundgerüst aus Commit 1.
 > TanStack Router wird bewusst erst mit dem Adminbereich (Commit 6) eingeführt,
 > da es vorher keine zweite Route gibt, die er sinnvoll verwalten könnte.
 
-## Commit 4 — Kategorien & Favoriten
+## ✅ Commit 4 — Kategorien & Favoriten (erledigt)
 
-- Kategorien: Erstellen, Löschen, Umbenennen, Drag & Drop-Sortierung
-- Favoriten-Toggle, Favoriten erscheinen zuerst
+- Kategorien-API: Erstellen, Umbenennen, Löschen, Bulk-Reorder (`PATCH /api/categories/reorder`)
+- Löschen einer Kategorie setzt `category` bei betroffenen Diensten auf `null`,
+  löscht die Dienste aber nicht
+- Favoriten-Toggle direkt in der Trefferliste des Frontends (Stern anklicken,
+  per `useMutation` + Cache-Invalidierung)
+
+> Die eigentliche Kategorien-*Verwaltungsoberfläche* (Erstellen/Umbenennen/
+> Drag & Drop in der UI) wandert in Commit 6 (Adminbereich) – die Startseite
+> bleibt bewusst die minimalistische Suche, kein Verwaltungs-UI dort.
 
 ## Commit 5 — Scanner
 

packages/shared/src/index.ts

@@ -46,6 +46,12 @@ export interface HealthStatus {
   version: string;
 }
 
+export interface Category {
+  id: string;
+  name: string;
+  order: number;
+}
+
 /**
  * Ranking-Stufen für die Suche, gemäß Spezifikation:
  * 1. Displayname beginnt mit Suchtext

packages/shared/src/schemas.ts

@@ -46,3 +46,22 @@ export const ServiceUpdateSchema = ServiceCreateSchema.omit({
   deviceId: true,
 }).partial();
 export type ServiceUpdateInput = z.infer<typeof ServiceUpdateSchema>;
+
+export const CategoryCreateSchema = z.object({
+  name: z.string().min(1, "name darf nicht leer sein"),
+});
+export type CategoryCreateInput = z.infer<typeof CategoryCreateSchema>;
+
+export const CategoryUpdateSchema = CategoryCreateSchema.partial();
+export type CategoryUpdateInput = z.infer<typeof CategoryUpdateSchema>;
+
+/** Für Drag & Drop: neue Reihenfolge mehrerer Kategorien auf einmal setzen. */
+export const CategoryReorderSchema = z
+  .array(
+    z.object({
+      id: z.string().min(1),
+      order: z.number(),
+    })
+  )
+  .min(1, "mindestens ein Eintrag erforderlich");
+export type CategoryReorderInput = z.infer<typeof CategoryReorderSchema>;

packages/ui/src/ResultsList.tsx

@@ -1,3 +1,4 @@
+import type { KeyboardEvent } from "react";
 import type { Service } from "@launchpad/shared";
 
 export interface ResultsListProps {
@@ -6,12 +7,13 @@ export interface ResultsListProps {
   emptyLabel?: string;
   onHover: (index: number) => void;
   onOpen: (service: Service) => void;
+  onToggleFavorite?: (service: Service) => void;
 }
 
 /**
  * Zeigt die (bereits per rankServices sortierten) Suchtreffer an.
  * Die Tastatur-Navigation (Pfeiltasten/Enter) wird vom Elternelement
- * gesteuert; diese Komponente ist rein darstellend + klickbar.
+ * gesteuert; diese Komponente ist rein darstellend + klick-/tastaturbar.
  */
 export function ResultsList({
   services,
@@ -19,6 +21,7 @@ export function ResultsList({
   emptyLabel = "Keine Dienste gefunden.",
   onHover,
   onOpen,
+  onToggleFavorite,
 }: ResultsListProps) {
   if (services.length === 0) {
     return (
@@ -42,11 +45,15 @@ export function ResultsList({
         const active = index === selectedIndex;
         return (
           <li key={service.id} role="option" aria-selected={active}>
-            <button
-              type="button"
+            <div
+              tabIndex={-1}
               onMouseEnter={() => onHover(index)}
               onClick={() => onOpen(service)}
-              className={`flex w-full items-center gap-3 px-5 py-3 text-left transition-colors ${
+              onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {
+                if (e.key === "Enter") onOpen(service);
+              }}
+              className={`flex w-full cursor-pointer items-center gap-3 px-5 py-3 text-left
+                transition-colors ${
                   active
                     ? "bg-black/5 dark:bg-white/10"
                     : "hover:bg-black/[0.03] dark:hover:bg-white/5"
@@ -79,12 +86,26 @@ export function ResultsList({
                 </span>
               ) : null}
 
-              {service.favorite ? (
-                <span className="shrink-0 text-amber-500" aria-label="Favorit">
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onToggleFavorite?.(service);
+                }}
+                disabled={!onToggleFavorite}
+                aria-pressed={service.favorite}
+                aria-label={
+                  service.favorite ? "Als Favorit entfernen" : "Als Favorit markieren"
+                }
+                className={`shrink-0 text-lg leading-none transition-colors ${
+                  service.favorite
+                    ? "text-amber-500"
+                    : "text-black/15 hover:text-amber-400 dark:text-white/15 dark:hover:text-amber-400"
+                } ${onToggleFavorite ? "" : "cursor-default"}`}
+              >
                 ★
-                </span>
-              ) : null}
               </button>
+            </div>
           </li>
         );
       })}