snapshot

src/components/SnippetCard.tsx

@@ -3,12 +3,12 @@ import { useEffect, useMemo, useState } from "react";
 import type { Snippet } from "@/types/snippet";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 
 marked.setOptions({ gfm: true });
 
-/** API `null` / fehlender Wert → leerer String, damit kontrollierte Inputs nie `null` anzeigen. */
 function stringFieldForForm(v: string | null | undefined): string {
   if (v == null) return "";
   return typeof v === "string" ? v : "";
@@ -35,10 +35,19 @@ type Props = {
   onRemove: (id: number) => void;
 };
 
+const mdBodyClassBase =
+  "snippet-md text-sm leading-relaxed [&_a]:text-primary [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-muted-foreground/40 [&_blockquote]:pl-3 [&_blockquote]:italic [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_h1]:mb-2 [&_h1]:text-xl [&_h1]:font-semibold [&_h2]:mb-2 [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:mb-1 [&_h3]:text-base [&_h3]:font-semibold [&_li]:ml-4 [&_ol]:list-decimal [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_ul]:list-disc";
+
+const mdBodyClassCard = `${mdBodyClassBase} max-h-[min(55vh,420px)] overflow-auto`;
+const mdBodyClassDialogPreview = `${mdBodyClassBase} min-h-0 flex-1 overflow-auto`;
+
 export function SnippetCard({ snippet, onReplace, onRemove }: Props) {
   const pristineEmpty =
-    !stringFieldForForm(snippet.body) && (snippet.title == null || snippet.title.trim() === "") && (snippet.tags?.length ?? 0) === 0;
-  const [editing, setEditing] = useState(pristineEmpty);
+    !stringFieldForForm(snippet.body) &&
+    (snippet.title == null || snippet.title.trim() === "") &&
+    (snippet.tags?.length ?? 0) === 0;
+
+  const [dialogOpen, setDialogOpen] = useState(pristineEmpty);
   const [showPreview, setShowPreview] = useState(false);
   const [dirty, setDirty] = useState(false);
   const [body, setBody] = useState(() => stringFieldForForm(snippet.body));
@@ -47,28 +56,45 @@ export function SnippetCard({ snippet, onReplace, onRemove }: Props) {
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const html = useMemo(
-    () => marked.parse(editing ? body : stringFieldForForm(snippet.body)) as string,
-    [editing, body, snippet.body],
+  const viewHtml = useMemo(
+    () => marked.parse(stringFieldForForm(snippet.body)) as string,
+    [snippet.body],
   );
 
+  const previewHtml = useMemo(() => marked.parse(body) as string, [body]);
+
   useEffect(() => {
-    if (editing) return;
+    if (dialogOpen) return;
     setBody(stringFieldForForm(snippet.body));
     setTitle(stringFieldForForm(snippet.title));
     setTagsStr((snippet.tags ?? []).join(", "));
-  }, [editing, snippet.id, snippet.updated_at, snippet.body, snippet.title, snippet.tags]);
+  }, [dialogOpen, snippet.id, snippet.updated_at, snippet.body, snippet.title, snippet.tags]);
 
-  const startEdit = () => {
-    setEditing(true);
+  const hydrateFromSnippet = () => {
+    setBody(stringFieldForForm(snippet.body));
+    setTitle(stringFieldForForm(snippet.title));
+    setTagsStr((snippet.tags ?? []).join(", "));
     setShowPreview(false);
     setDirty(false);
-    setBody(stringFieldForForm(snippet.body));
-    setTitle(stringFieldForForm(snippet.title));
-    setTagsStr((snippet.tags ?? []).join(", "));
     setError(null);
   };
 
+  const openDialog = () => {
+    hydrateFromSnippet();
+    setDialogOpen(true);
+  };
+
+  /** Dialog schließen; bei neuem leeren Snippet ohne Änderungen wieder entfernen. */
+  const requestDismiss = () => {
+    setDialogOpen(false);
+    if (pristineEmpty && !dirty) void deleteRemote(false);
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (open) openDialog();
+    else requestDismiss();
+  };
+
   const save = async () => {
     setBusy(true);
     setError(null);
@@ -88,8 +114,8 @@ export function SnippetCard({ snippet, onReplace, onRemove }: Props) {
       }
       const updated = (await res.json()) as Snippet;
       onReplace(updated);
-      setEditing(false);
       setDirty(false);
+      setDialogOpen(false);
     } catch (e) {
       setError(e instanceof Error ? e.message : "Speichern fehlgeschlagen");
     } finally {
@@ -97,7 +123,7 @@ export function SnippetCard({ snippet, onReplace, onRemove }: Props) {
     }
   };
 
-  const deleteRemote = async (askConfirm: boolean) => {
+  async function deleteRemote(askConfirm: boolean) {
     if (askConfirm && !window.confirm("Snippet wirklich löschen?")) return;
     setBusy(true);
     setError(null);
@@ -113,142 +139,125 @@ export function SnippetCard({ snippet, onReplace, onRemove }: Props) {
     } finally {
       setBusy(false);
     }
-  };
-
-  const cancel = async () => {
-    if (pristineEmpty && !dirty) {
-      await deleteRemote(false);
-      return;
-    }
-    setEditing(false);
-    setDirty(false);
-    setBody(stringFieldForForm(snippet.body));
-    setTitle(stringFieldForForm(snippet.title));
-    setTagsStr((snippet.tags ?? []).join(", "));
-    setError(null);
-  };
+  }
 
   const markDirty = () => setDirty(true);
 
-  const mdBodyClass =
-    "snippet-md max-h-[min(55vh,420px)] overflow-auto text-sm leading-relaxed [&_a]:text-primary [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-muted-foreground/40 [&_blockquote]:pl-3 [&_blockquote]:italic [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_h1]:mb-2 [&_h1]:text-xl [&_h1]:font-semibold [&_h2]:mb-2 [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:mb-1 [&_h3]:text-base [&_h3]:font-semibold [&_li]:ml-4 [&_ol]:list-decimal [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_ul]:list-disc";
-
   return (
-    <Card className="gap-3 py-4 text-left shadow-sm">
-      <CardContent className="px-4 pb-0 pt-0">
-        <div className="min-h-[140px] rounded-md border bg-muted/30 p-2">
-          {editing ? (
-            <div className="space-y-2">
-              <div className="flex flex-wrap items-center justify-end gap-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="h-8"
-                  onClick={() => setShowPreview(v => !v)}
-                >
-                  {showPreview ? "Vorschau ausblenden" : "Vorschau"}
-                </Button>
-              </div>
-              <div className={showPreview ? "grid gap-3 lg:grid-cols-2" : "grid gap-3"}>
-                <Textarea
-                  value={body}
-                  onChange={e => {
-                    markDirty();
-                    setBody(e.target.value);
-                  }}
-                  className="min-h-[200px] resize-y font-mono text-sm"
-                  placeholder="Markdown …"
-                />
-                {showPreview ? (
-                  <div
-                    className={`${mdBodyClass} min-h-[120px] rounded-md border bg-background p-2`}
-                    dangerouslySetInnerHTML={{ __html: html }}
-                  />
-                ) : null}
-              </div>
-            </div>
-          ) : (
+    <>
+      <Card className="gap-0 py-3 text-left shadow-sm">
+        <CardContent className="px-4 pb-2 pt-1">
+          <div
+            role="button"
+            tabIndex={0}
+            title="Zum Bearbeiten klicken"
+            className="rounded-sm px-0.5 py-2 outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring"
+            onKeyDown={e => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                openDialog();
+              }
+            }}
+          >
             <div
-              role="button"
-              tabIndex={0}
-              title="Zum Bearbeiten klicken"
-              className={`${mdBodyClass} cursor-pointer rounded-md p-2 outline-none ring-offset-background hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring`}
-              dangerouslySetInnerHTML={{ __html: html }}
-              onClick={e => {
-                if ((e.target as HTMLElement).closest("a")) return;
-                startEdit();
-              }}
-              onKeyDown={e => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  startEdit();
-                }
-              }}
+              className={`${mdBodyClassCard}`}
+              dangerouslySetInnerHTML={{ __html: viewHtml }}
             />
-          )}
-        </div>
-        {error ? <p className="mt-2 text-sm text-destructive">{error}</p> : null}
-      </CardContent>
-      <CardFooter className="flex flex-col gap-3 border-t px-4 pb-3 pt-3 sm:flex-row sm:items-end sm:justify-between">
-        <div className="grid w-full gap-2 sm:max-w-xl">
-          {editing ? (
-            <>
-              <Input
-                value={title}
-                onChange={e => {
-                  markDirty();
-                  setTitle(e.target.value);
-                }}
-                placeholder="Optionaler Titel"
-              />
-              <Input
-                value={tagsStr}
-                onChange={e => {
-                  markDirty();
-                  setTagsStr(e.target.value);
-                }}
-                placeholder="Tags, kommagetrennt"
-              />
-            </>
-          ) : (
-            <div className="space-y-1 text-sm">
-              <div>
-                {snippet.title?.trim() ? (
-                  <span className="font-medium text-foreground">{snippet.title}</span>
-                ) : (
-                  <span className="text-sm font-normal italic tracking-wide text-muted-foreground">(Kein Titel)</span>
-                )}
-              </div>
-              <div className="text-muted-foreground">{snippet.tags.length ? snippet.tags.join(", ") : "Keine Tags"}</div>
-            </div>
-          )}
-        </div>
-        <div className="flex w-full flex-col gap-2 sm:w-auto sm:items-end">
-          <div className="text-xs text-muted-foreground">Geändert: {formatWhen(snippet.updated_at)}</div>
-          <div className="flex flex-wrap gap-2">
-            {editing ? (
-              <>
-                <Button type="button" variant="secondary" disabled={busy} onClick={() => void cancel()}>
-                  Abbrechen
-                </Button>
-                <Button type="button" disabled={busy} onClick={() => void save()}>
-                  Speichern
-                </Button>
-              </>
-            ) : (
-              <>
-                <Button type="button" variant="secondary" disabled={busy} onClick={startEdit}>
-                  Bearbeiten
-                </Button>
-                <Button type="button" variant="destructive" disabled={busy} onClick={() => void deleteRemote(true)}>
-                  Löschen
-                </Button>
-              </>
-            )}
           </div>
-        </div>
-      </CardFooter>
-    </Card>
+        </CardContent>
+        <CardFooter className="flex flex-col gap-2 border-t px-4 pb-3 pt-2 sm:flex-row sm:items-end sm:justify-between">
+          <div className="grid w-full gap-1 text-sm sm:max-w-xl">
+            <div>
+              {snippet.title?.trim() ? (
+                <span className="font-medium text-foreground">{snippet.title}</span>
+              ) : (
+                <span className="text-sm font-normal italic tracking-wide text-muted-foreground">(Kein Titel)</span>
+              )}
+            </div>
+            <div className="text-muted-foreground">{snippet.tags.length ? snippet.tags.join(", ") : "Keine Tags"}</div>
+          </div>
+          <div className="flex w-full flex-col gap-2 sm:w-auto sm:items-end">
+            <div className="text-xs text-muted-foreground">Geändert: {formatWhen(snippet.updated_at)}</div>
+            <div className="flex flex-wrap gap-2">
+              <Button type="button" variant="secondary" disabled={busy} onClick={openDialog}>
+                Bearbeiten
+              </Button>
+              <Button type="button" variant="destructive" disabled={busy} onClick={() => void deleteRemote(true)}>
+                Löschen
+              </Button>
+            </div>
+            {error && !dialogOpen ? <p className="text-sm text-destructive">{error}</p> : null}
+          </div>
+        </CardFooter>
+      </Card>
+
+      <Dialog open={dialogOpen} onOpenChange={handleOpenChange}>
+        <DialogContent className="gap-0 p-0">
+          <DialogHeader className="shrink-0 space-y-1.5 border-b px-6 pb-4 pt-6 pr-14 text-center sm:text-start">
+            <DialogTitle>Snippet bearbeiten</DialogTitle>
+            <DialogDescription>Titel, Tags und Markdown. Vorschau optional einblenden.</DialogDescription>
+          </DialogHeader>
+
+          <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden px-6 py-4">
+            <Input
+              value={title}
+              onChange={e => {
+                markDirty();
+                setTitle(e.target.value);
+              }}
+              placeholder="Optionaler Titel"
+              className="shrink-0"
+            />
+            <Input
+              value={tagsStr}
+              onChange={e => {
+                markDirty();
+                setTagsStr(e.target.value);
+              }}
+              placeholder="Tags, kommagetrennt"
+              className="shrink-0"
+            />
+            <div
+              className={
+                showPreview
+                  ? "flex min-h-0 flex-1 flex-col gap-3 overflow-hidden lg:flex-row"
+                  : "flex min-h-0 flex-1 flex-col overflow-hidden"
+              }
+            >
+              <Textarea
+                value={body}
+                onChange={e => {
+                  markDirty();
+                  setBody(e.target.value);
+                }}
+                className="min-h-0 w-full flex-1 resize-none font-mono text-sm lg:min-h-0"
+                placeholder="Markdown …"
+              />
+              {showPreview ? (
+                <div
+                  className={`${mdBodyClassDialogPreview} rounded-md border bg-muted/30 p-3 lg:w-1/2`}
+                  dangerouslySetInnerHTML={{ __html: previewHtml }}
+                />
+              ) : null}
+            </div>
+            {error ? <p className="shrink-0 text-sm text-destructive">{error}</p> : null}
+          </div>
+
+          <DialogFooter className="shrink-0 flex-row flex-wrap items-center justify-between gap-3 border-t px-6 py-4 sm:flex-row sm:justify-between">
+            <Button type="button" variant="outline" size="sm" className="h-9" onClick={() => setShowPreview(v => !v)}>
+              {showPreview ? "Vorschau ausblenden" : "Vorschau"}
+            </Button>
+            <div className="flex flex-wrap items-center justify-end gap-2">
+              <Button type="button" variant="secondary" disabled={busy} onClick={requestDismiss}>
+                Abbrechen
+              </Button>
+              <Button type="button" disabled={busy} onClick={() => void save()}>
+                Speichern
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }

src/components/ui/dialog.tsx

@@ -0,0 +1,113 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    data-slot="dialog-overlay"
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      data-slot="dialog-content"
+      className={cn(
+        "fixed left-2 right-2 top-1/2 z-50 flex h-[calc(100dvh-2rem)] max-h-[calc(100dvh-2rem)] w-auto max-w-none -translate-y-1/2 flex-col gap-4 overflow-hidden rounded-lg border bg-background p-6 shadow-lg duration-200",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close
+        type="button"
+        className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+      >
+        <X />
+        <span className="sr-only">Schließen</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="dialog-header" className={cn("flex flex-col gap-1.5 text-center sm:text-start", className)} {...props} />;
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};