feat(ui): Markdown in Beschreibung und Notizen

Bisher wurde alles als reiner Text ausgegeben. Jetzt werden Ueberschriften,
Listen, Tabellen, Codebloecke, Zitate und Links dargestellt, und aus
"- [ ] Aufgabe" werden echte Checklisten.

Sicherheitsrelevant: der Inhalt stammt vom Benutzer. Ohne rehype-sanitize
waere das ein XSS-Loch, sobald jemand rohes HTML in eine Notiz schreibt. Das
Standardschema erlaubt nur harmlose Elemente; ergaenzt wird nur, was fuer
Aufgabenlisten und Sprachklassen an Codebloecken noetig ist. Links bekommen
zusaetzlich target=_blank mit noopener und nofollow.

Die Formatierung steht in components.css: Tailwinds Preflight setzt alle
Abstaende und Schriftgroessen zurueck, Ueberschriften und Listen brauchen
also wieder Form.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/components/Markdown.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import { cn } from "@/lib/utils";
+
+/**
+ * Markdown-Darstellung fuer Beschreibungen und Notizen.
+ *
+ * Der Inhalt stammt vom Benutzer, wird aber unveraendert gerendert – ohne
+ * rehype-sanitize waere das ein XSS-Loch, sobald jemand rohes HTML in eine
+ * Notiz schreibt. Das Standardschema erlaubt nur harmlose Elemente; ergaenzt
+ * wird lediglich, was fuer Aufgabenlisten und Codebloecke noetig ist.
+ */
+const schema = {
+  ...defaultSchema,
+  attributes: {
+    ...defaultSchema.attributes,
+    // Checkboxen aus "- [ ] Aufgabe"
+    input: [...(defaultSchema.attributes?.input ?? []), "checked", "disabled", "type"],
+    // Sprachklassen wie "language-ts" fuer Codebloecke
+    code: [...(defaultSchema.attributes?.code ?? []), ["className", /^language-./]],
+  },
+};
+
+export function Markdown({
+  children,
+  className,
+}: {
+  children: string | null | undefined;
+  className?: string;
+}) {
+  if (!children?.trim()) return null;
+
+  return (
+    <div className={cn("md", className)}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[[rehypeSanitize, schema]]}
+        components={{
+          // Links aus fremdem Inhalt immer in neuem Tab und ohne
+          // Zugriff auf das oeffnende Fenster.
+          a: ({ href, children: content }) => (
+            <a href={href} target="_blank" rel="noreferrer noopener nofollow">
+              {content}
+            </a>
+          ),
+        }}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+}

src/components/NotesPanel.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { Loader2, NotebookPen, Pencil, Pin, PinOff, Plus, Trash2, X } from "lucide-react";
 import type { Note } from "@prisma/client";
+import { Markdown } from "@/components/Markdown";
 import { cn, formatDateTime, formatRelative } from "@/lib/utils";
 
 /** Nur als "bearbeitet" zaehlen, wenn wirklich spaeter geaendert wurde. */
@@ -118,7 +119,7 @@ export function NotesPanel({ projectId, notes }: { projectId: string; notes: Not
           />
           <textarea
             className="field min-h-32 resize-y font-mono text-[13px] leading-relaxed"
-            placeholder="Gedanken, Todos, Snippets… Zeilenumbrueche bleiben erhalten."
+            placeholder={"Gedanken, Todos, Snippets…\n\nMarkdown wird dargestellt:\n- [ ] offene Aufgabe\n**fett**, `code`, [Link](https://…)"}
             value={content}
             onChange={(event) => setContent(event.target.value)}
             autoFocus
@@ -161,9 +162,7 @@ export function NotesPanel({ projectId, notes }: { projectId: string; notes: Not
                     {note.title}
                   </h3>
                 ) : null}
-                <p className="mt-1 whitespace-pre-wrap break-words text-sm leading-relaxed text-slate-300">
-                  {note.content}
-                </p>
+                <Markdown className="mt-1">{note.content}</Markdown>
                 <p className="mt-2.5 text-[11px] text-slate-600" suppressHydrationWarning>
                   {formatDateTime(note.createdAt)}
                   {wasEdited(note) ? ` · bearbeitet ${formatRelative(note.updatedAt)}` : null}