Statische Codes benennen und auf Wunsch ablegen

Das Feld „Name (optional)" stand nur im Dynamisch-Block. Bei einem statischen
Code gab es damit keine Moeglichkeit, ihm einen Namen zum Wiederfinden zu
geben.

Jetzt gilt es in beiden Betriebsarten und tut zweierlei: Es bestimmt den
Dateinamen beim Herunterladen — aus „Plakat Eingang" wird
qr-plakat-eingang.png statt qr-example-com-plakat.png — und es laesst sich
damit ein statischer Code in „Meine Codes" ablegen.

Ein abgelegter statischer Code ist ein Schnappschuss, kein steuerbares Ziel.
Aenderbar ist nur der Name; Inhalt und Gestaltung bleiben, wie sie beim
Ablegen waren, denn genau das steckt im gedruckten Bild. Er bekommt keinen
Kurz-Link, ist unter /r nicht erreichbar und zaehlt keine Scans — in der
Liste steht dort „statisch" und ein Strich. Wer nach dem Ablegen den Inhalt
aendert, bekommt das Ablegen erneut angeboten; der vorherige Eintrag bleibt
als eigener Schnappschuss.

Dafuer traegt QrCode jetzt `mode`, und `slug` darf leer sein. In PostgreSQL
schliessen sich mehrere NULL in einem eindeutigen Index nicht aus, die
Bedingung „je Domain eindeutig" gilt fuer dynamische Codes also unveraendert.

Refs #2

src/components/qr-generator.tsx

@@ -84,11 +84,13 @@ export function QrGenerator({
   const dataError = !validation.ok && touched ? validation.message : null;
 
   const mode = isDynamic ? "dynamic" : "static";
-  const slug = isDynamic ? saved?.slug : undefined;
+  const slug = (isDynamic ? saved?.slug : undefined) ?? undefined;
 
   const requestBody = useMemo(
-    () => ({ type: typeId, data, design, mode, slug }),
-    [typeId, data, design, mode, slug],
+    // Der Name geht mit: Der Server bildet daraus den Dateinamen beim
+    // Herunterladen. Auf die Vorschau hat er keinen Einfluss.
+    () => ({ type: typeId, data, design, mode, slug, label: label.trim() || undefined }),
+    [typeId, data, design, mode, slug, label],
   );
 
   const ready = validation.ok && designValid;
@@ -194,8 +196,10 @@ export function QrGenerator({
         type: typeId,
         data: validation.data,
         design,
+        mode,
         label: label.trim() || undefined,
-        slug: wunschSlug.trim() || undefined,
+        // Ein statischer Code hat keinen Kurz-Link.
+        slug: isDynamic ? wunschSlug.trim() || undefined : undefined,
       };
       const result = saved
         ? await apiJson<{ code: QrCodeDto }>(`/api/codes/${saved.id}`, {
@@ -216,10 +220,22 @@ export function QrGenerator({
     } finally {
       setSaving(false);
     }
-  }, [validation, designValid, slugProblem, typeId, design, label, wunschSlug, saved]);
+  }, [validation, designValid, slugProblem, typeId, design, mode, isDynamic, label, wunschSlug, saved]);
+
+  /**
+   * Wechselt die Betriebsart und vergisst dabei einen zuvor gespeicherten
+   * Code. Ein abgelegter statischer Eintrag ist etwas anderes als ein
+   * gespeicherter dynamischer — beides gleichzeitig festzuhalten führte
+   * dazu, dass die Oberfläche den falschen Zustand zeigt.
+   */
+  const wechsleModus = useCallback((dynamisch: boolean) => {
+    setIsDynamic(dynamisch);
+    setSaved(null);
+    setSaveError(null);
+  }, []);
 
   const handleCopy = useCallback(async () => {
-    if (!saved) return;
+    if (!saved?.shortUrl) return;
     try {
       await navigator.clipboard.writeText(saved.shortUrl);
       setCopied(true);
@@ -302,7 +318,7 @@ export function QrGenerator({
                 data-mode="static"
                 aria-pressed={!isDynamic}
                 disabled={!qrType.supportsStatic}
-                onClick={() => setIsDynamic(false)}
+                onClick={() => wechsleModus(false)}
                 className={cx(
                   "rounded-xl border p-4 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-50",
                   !isDynamic
@@ -326,7 +342,7 @@ export function QrGenerator({
                 data-mode="dynamic"
                 aria-pressed={isDynamic}
                 disabled={!qrType.supportsDynamic}
-                onClick={() => setIsDynamic(true)}
+                onClick={() => wechsleModus(true)}
                 className={cx(
                   "rounded-xl border p-4 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-50",
                   isDynamic
@@ -347,12 +363,15 @@ export function QrGenerator({
               </button>
             </div>
 
-            {isDynamic ? (
-              <div className="mt-5 space-y-4 border-t border-slate-200 pt-5">
+            <div className="mt-5 space-y-4 border-t border-slate-200 pt-5">
                 <Field
                   label="Name (optional)"
                   htmlFor="code-label"
-                  hint="Hilft dir, den Code später in „Meine Codes“ wiederzufinden."
+                  hint={
+                    isDynamic
+                      ? "Hilft dir, den Code später in „Meine Codes“ wiederzufinden."
+                      : "Bestimmt den Dateinamen beim Herunterladen — und den Eintrag, falls du ihn ablegst."
+                  }
                 >
                   <TextInput
                     id="code-label"
@@ -363,9 +382,7 @@ export function QrGenerator({
                   />
                 </Field>
 
-                {/* Nur beim Anlegen: Danach steht der Kurz-Link im
-                    Bearbeiten-Dialog, wo auch die früheren Adressen liegen. */}
-                {saved || !maySetSlug ? null : (
+                {!isDynamic || saved || !maySetSlug ? null : (
                   <Field
                     label="Kurz-Link (optional)"
                     htmlFor="code-slug"
@@ -384,7 +401,38 @@ export function QrGenerator({
                   </Field>
                 )}
 
-                {saved ? (
+                {!isDynamic ? (
+                  /* Statisch: Der Code ist ohne Speichern fertig. Ablegen ist
+                     ein Angebot, kein Zwang — es geht nur ums Wiederfinden.
+                     Nach einer Inhaltsänderung ist die Ablage ein Schnappschuss
+                     von vorher; dann wird sie wieder angeboten. */
+                  saved && !hasUnsavedChanges ? (
+                    <div className="space-y-3">
+                      <Notice tone="success">
+                        <span className="font-medium">Abgelegt.</span> Du findest
+                        den Code jetzt unter „Meine Codes“ und kannst ihn dort
+                        erneut herunterladen. Der Code selbst ändert sich dadurch
+                        nicht — sein Inhalt steckt in ihm.
+                      </Notice>
+                      <Link
+                        href="/meine-codes"
+                        className="inline-flex items-center gap-1.5 rounded-lg text-sm font-medium text-accent-text hover:text-accent-soft-fg"
+                      >
+                        Zu „Meine Codes“
+                        <Icon name="external" className="size-3.5" />
+                      </Link>
+                    </div>
+                  ) : (
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      onClick={handleSave}
+                      disabled={saving || !ready}
+                    >
+                      {saving ? "Legt ab …" : "In „Meine Codes“ ablegen"}
+                    </Button>
+                  )
+                ) : saved ? (
                   <div className="space-y-3">
                     <Notice tone="success">
                       <span className="font-medium">Code gespeichert.</span> Der
@@ -453,8 +501,7 @@ export function QrGenerator({
                 )}
 
                 {saveError ? <Notice tone="error">{saveError}</Notice> : null}
-              </div>
-            ) : null}
+            </div>
           </Card>
         </div>