feat(checklists): t-paliad-225 Slice A frontend — Meine Vorlagen + authoring wizard

m/paliad#61 Slice A frontend pass. Pages: - /checklists gets a third tab "Meine Vorlagen" between Vorlagen and Vorhandene Instanzen — lists owned authored templates with regime badge, visibility chip, Bearbeiten / Löschen actions, "Neue Vorlage" CTA. Tab state round-trips via ?tab=mine. - /checklists/new and /checklists/{slug}/edit serve a shared bundle (checklists-author.html). Client reads location.pathname to decide create vs edit mode; edit mode prefills from /api/checklists/templates/mine. Wizard: - Metadata form (title, description, regime UPC/DE/EPA/OTHER, court, reference, deadline, language de/en, visibility private/firm). - Repeating section + item editor — add/remove sections, add/remove items per section, label + optional note + optional rule per item. - Single-language authoring (lang column on paliad.checklists). The catalog read layer mirrors the title/description onto both DE and EN sides so the existing bilingual frontend renders without a special case for authored entries. - Save POSTs (create) or PATCHes (edit) the template; visibility flip on edit goes through its own endpoint so the audit row captures the transition. Merged catalog: - /api/checklists now returns the merged list (static + DB visible); the Summary shape gained origin / visibility / owner_email / owner_display_name fields. i18n: 55 new keys per language (110 total) under checklisten.tab.mine.*, checklisten.mine.*, checklisten.author.*, checklisten.detail.* (Bearbeiten/Löschen labels for Slice B). i18n codegen total: 2621 keys. Build hygiene: bun run build clean, go build clean, go vet clean, go test ./internal/... + ./cmd/server/ all green.
2026-05-20 15:22:52 +02:00
parent a4e2f3526d
commit 7a1fd81d23
7 changed files with 753 additions and 3 deletions
--- a/frontend/src/checklists-author.tsx
+++ b/frontend/src/checklists-author.tsx
@@ -0,0 +1,120 @@
+import { h } from "./jsx";
+import { Sidebar } from "./components/Sidebar";
+import { PaliadinWidget } from "./components/PaliadinWidget";
+import { BottomNav } from "./components/BottomNav";
+import { Footer } from "./components/Footer";
+import { PWAHead } from "./components/PWAHead";
+
+// Authoring wizard for paliad.checklists. Both /checklists/new and
+// /checklists/{slug}/edit serve this same bundle; the client reads
+// window.location.pathname to decide create vs edit mode.
+export function renderChecklistsAuthor(): string {
+  return "<!DOCTYPE html>" + (
+    <html lang="de">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+        <meta name="theme-color" content="#BFF355" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+        <PWAHead />
+        <title data-i18n="checklisten.author.title">Vorlage erstellen &mdash; Paliad</title>
+        <link rel="stylesheet" href="/assets/global.css" />
+      </head>
+      <body className="has-sidebar">
+        <Sidebar currentPath="/checklists" />
+        <BottomNav currentPath="/checklists" />
+
+        <main>
+          <section className="tool-page">
+            <div className="container">
+              <div className="tool-header">
+                <h1 id="author-heading" data-i18n="checklisten.author.heading.new">Neue Checklisten-Vorlage</h1>
+                <p className="tool-subtitle" data-i18n="checklisten.author.subtitle">
+                  Erstellen Sie eine eigene Checkliste mit Sektionen und Punkten.
+                </p>
+              </div>
+
+              <form id="author-form" className="form-stack" autoComplete="off">
+                <div className="form-row">
+                  <label className="form-label" htmlFor="title" data-i18n="checklisten.author.field.title">Titel</label>
+                  <input className="form-input" id="title" name="title" type="text" required maxLength="200" />
+                  <p className="form-hint" data-i18n="checklisten.author.field.title.hint">z.B. &bdquo;UPC SoC &mdash; interne Checkliste&ldquo;.</p>
+                </div>
+
+                <div className="form-row">
+                  <label className="form-label" htmlFor="description" data-i18n="checklisten.author.field.description">Kurzbeschreibung</label>
+                  <textarea className="form-input" id="description" name="description" rows="3" maxLength="2000" />
+                </div>
+
+                <div className="form-grid form-grid-2">
+                  <div className="form-row">
+                    <label className="form-label" htmlFor="regime" data-i18n="checklisten.author.field.regime">Regime</label>
+                    <select className="form-input" id="regime" name="regime">
+                      <option value="UPC">UPC</option>
+                      <option value="DE">DE</option>
+                      <option value="EPA">EPA</option>
+                      <option value="OTHER" selected>OTHER</option>
+                    </select>
+                  </div>
+                  <div className="form-row">
+                    <label className="form-label" htmlFor="lang" data-i18n="checklisten.author.field.lang">Sprache</label>
+                    <select className="form-input" id="lang" name="lang">
+                      <option value="de" selected>Deutsch</option>
+                      <option value="en">English</option>
+                    </select>
+                  </div>
+                </div>
+
+                <div className="form-grid form-grid-2">
+                  <div className="form-row">
+                    <label className="form-label" htmlFor="court" data-i18n="checklisten.author.field.court">Gericht / Beh&ouml;rde</label>
+                    <input className="form-input" id="court" name="court" type="text" maxLength="200" />
+                  </div>
+                  <div className="form-row">
+                    <label className="form-label" htmlFor="reference" data-i18n="checklisten.author.field.reference">Rechtsgrundlage</label>
+                    <input className="form-input" id="reference" name="reference" type="text" maxLength="200" />
+                  </div>
+                </div>
+
+                <div className="form-row">
+                  <label className="form-label" htmlFor="deadline" data-i18n="checklisten.author.field.deadline">Deadline (optional)</label>
+                  <input className="form-input" id="deadline" name="deadline" type="text" maxLength="200" />
+                </div>
+
+                <fieldset className="form-fieldset">
+                  <legend data-i18n="checklisten.author.field.visibility">Sichtbarkeit</legend>
+                  <label className="form-radio">
+                    <input type="radio" name="visibility" value="private" checked />
+                    <span><strong data-i18n="checklisten.mine.visibility.private">Privat</strong> &mdash; <span data-i18n="checklisten.author.visibility.private.hint">Nur f&uuml;r Sie sichtbar.</span></span>
+                  </label>
+                  <label className="form-radio">
+                    <input type="radio" name="visibility" value="firm" />
+                    <span><strong data-i18n="checklisten.mine.visibility.firm">Firmenweit</strong> &mdash; <span data-i18n="checklisten.author.visibility.firm.hint">F&uuml;r alle angemeldeten Kolleginnen und Kollegen sichtbar.</span></span>
+                  </label>
+                </fieldset>
+
+                <fieldset className="form-fieldset">
+                  <legend data-i18n="checklisten.author.groups.heading">Sektionen und Punkte</legend>
+                  <div id="groups-container" />
+                  <button type="button" className="btn btn-secondary" id="add-group" data-i18n="checklisten.author.groups.add">+ Sektion hinzuf&uuml;gen</button>
+                </fieldset>
+
+                <p id="author-error" className="form-error" style="display:none" role="alert" />
+
+                <div className="form-actions">
+                  <button type="submit" className="btn btn-primary" id="author-save" data-i18n="checklisten.author.save">Speichern</button>
+                  <a className="btn btn-secondary" href="/checklists?tab=mine" data-i18n="checklisten.author.cancel">Abbrechen</a>
+                </div>
+              </form>
+            </div>
+          </section>
+        </main>
+
+        <Footer />
+        <PaliadinWidget />
+        <script src="/assets/checklists-author.js"></script>
+      </body>
+    </html>
+  );
+}
--- a/frontend/src/checklists.tsx
+++ b/frontend/src/checklists.tsx
@@ -34,6 +34,7 @@ export function renderChecklists(): string {

              <nav className="entity-tabs" id="checklists-tabs" aria-label="Checklisten-Ansichten">
                <a className="entity-tab active" data-tab="templates" href="/checklists" data-i18n="checklisten.tab.templates">Vorlagen</a>
+                <a className="entity-tab" data-tab="mine" href="/checklists?tab=mine" data-i18n="checklisten.tab.mine">Meine Vorlagen</a>
                <a className="entity-tab" data-tab="instances" href="/checklists?tab=instances" data-i18n="checklisten.tab.instances">Vorhandene Instanzen</a>
              </nav>

@@ -49,6 +50,18 @@ export function renderChecklists(): string {
                <div className="checklist-grid" id="checklist-grid" />
              </section>

+              {/* Meine Vorlagen tab — caller's own authored templates */}
+              <section className="entity-tab-panel" id="tab-mine" style="display:none">
+                <div className="tool-actions" style="margin-bottom:1rem">
+                  <a href="/checklists/new" className="btn btn-primary" data-i18n="checklisten.mine.new">Neue Vorlage</a>
+                </div>
+                <p className="entity-events-empty" id="checklists-mine-loading" data-i18n="checklisten.mine.loading">L&auml;dt&hellip;</p>
+                <p className="entity-events-empty" id="checklists-mine-empty" style="display:none" data-i18n="checklisten.mine.empty">
+                  Sie haben noch keine eigene Vorlage angelegt.
+                </p>
+                <div className="checklist-grid" id="checklists-mine-grid" style="display:none" />
+              </section>
+
              {/* Instances tab — every visible instance across templates */}
              <section className="entity-tab-panel" id="tab-instances" style="display:none">
                <p className="entity-events-empty" id="checklists-instances-loading" data-i18n="checklisten.instances.all.loading">L&auml;dt&hellip;</p>
--- a/frontend/src/client/checklists-author.ts
+++ b/frontend/src/client/checklists-author.ts
@@ -0,0 +1,365 @@
+// Authoring wizard for paliad.checklists. Serves both /checklists/new
+// (create) and /checklists/{slug}/edit (edit). The HTML bundle is the
+// same; this client reads location.pathname to decide which mode to
+// boot into.
+
+import { initI18n, t } from "./i18n";
+import { initSidebar } from "./sidebar";
+
+interface Item {
+  labelDE: string;
+  labelEN: string;
+  noteDE?: string;
+  noteEN?: string;
+  rule?: string;
+}
+
+interface Group {
+  titleDE: string;
+  titleEN: string;
+  items: Item[];
+}
+
+interface Checklist {
+  id: string;
+  slug: string;
+  title: string;
+  description: string;
+  regime: string;
+  court: string;
+  reference: string;
+  deadline: string;
+  lang: string;
+  visibility: string;
+  body: { groups: Group[] };
+}
+
+function esc(s: string): string {
+  const d = document.createElement("div");
+  d.textContent = s;
+  return d.innerHTML;
+}
+
+function escAttr(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}
+
+function detectMode(): { mode: "create" | "edit"; slug?: string } {
+  const path = window.location.pathname;
+  if (path === "/checklists/new") {
+    return { mode: "create" };
+  }
+  const m = path.match(/^\/checklists\/([^/]+)\/edit$/);
+  if (m) {
+    return { mode: "edit", slug: m[1] };
+  }
+  return { mode: "create" };
+}
+
+let groups: Group[] = [];
+
+function renderGroups() {
+  const container = document.getElementById("groups-container")!;
+  if (groups.length === 0) {
+    // Seed with a single empty group + item so the user has something
+    // to fill out rather than a blank canvas.
+    groups = [{ titleDE: "", titleEN: "", items: [{ labelDE: "", labelEN: "" }] }];
+  }
+  container.innerHTML = groups.map((g, gi) => {
+    const itemsHTML = g.items.map((it, ii) => {
+      return `<div class="author-item" data-gi="${gi}" data-ii="${ii}">
+        <div class="form-row">
+          <label class="form-label">${esc(t("checklisten.author.item.label"))}</label>
+          <input class="form-input" data-field="label" value="${escAttr(it.labelDE || "")}" />
+        </div>
+        <div class="form-grid form-grid-2">
+          <div class="form-row">
+            <label class="form-label">${esc(t("checklisten.author.item.note"))}</label>
+            <input class="form-input" data-field="note" value="${escAttr(it.noteDE || "")}" />
+          </div>
+          <div class="form-row">
+            <label class="form-label">${esc(t("checklisten.author.item.rule"))}</label>
+            <input class="form-input" data-field="rule" value="${escAttr(it.rule || "")}" />
+          </div>
+        </div>
+        <button type="button" class="btn btn-small btn-danger" data-action="remove-item">${esc(t("checklisten.author.item.remove"))}</button>
+      </div>`;
+    }).join("");
+    return `<div class="author-group" data-gi="${gi}">
+      <div class="form-row">
+        <label class="form-label">${esc(t("checklisten.author.group.title"))}</label>
+        <input class="form-input" data-field="group-title" value="${escAttr(g.titleDE || "")}" />
+      </div>
+      <div class="author-items">${itemsHTML}</div>
+      <div class="author-group-actions">
+        <button type="button" class="btn btn-small" data-action="add-item">${esc(t("checklisten.author.item.add"))}</button>
+        <button type="button" class="btn btn-small btn-danger" data-action="remove-group">${esc(t("checklisten.author.group.remove"))}</button>
+      </div>
+    </div>`;
+  }).join("");
+
+  // Wire input changes back into the data array.
+  container.querySelectorAll<HTMLInputElement>(".author-group > .form-row input[data-field=group-title]").forEach((input) => {
+    const groupDiv = input.closest<HTMLElement>(".author-group")!;
+    const gi = parseInt(groupDiv.dataset.gi!, 10);
+    input.addEventListener("input", () => {
+      groups[gi].titleDE = input.value;
+      groups[gi].titleEN = input.value; // single-language for Slice A
+    });
+  });
+
+  container.querySelectorAll<HTMLDivElement>(".author-item").forEach((itemDiv) => {
+    const gi = parseInt(itemDiv.dataset.gi!, 10);
+    const ii = parseInt(itemDiv.dataset.ii!, 10);
+    itemDiv.querySelectorAll<HTMLInputElement>("input[data-field]").forEach((input) => {
+      input.addEventListener("input", () => {
+        const field = input.dataset.field!;
+        if (field === "label") {
+          groups[gi].items[ii].labelDE = input.value;
+          groups[gi].items[ii].labelEN = input.value;
+        } else if (field === "note") {
+          groups[gi].items[ii].noteDE = input.value || undefined;
+          groups[gi].items[ii].noteEN = input.value || undefined;
+        } else if (field === "rule") {
+          groups[gi].items[ii].rule = input.value || undefined;
+        }
+      });
+    });
+    itemDiv.querySelector<HTMLButtonElement>("button[data-action=remove-item]")!.addEventListener("click", () => {
+      groups[gi].items.splice(ii, 1);
+      if (groups[gi].items.length === 0) {
+        groups[gi].items.push({ labelDE: "", labelEN: "" });
+      }
+      renderGroups();
+    });
+  });
+
+  container.querySelectorAll<HTMLButtonElement>("button[data-action=add-item]").forEach((btn) => {
+    const groupDiv = btn.closest<HTMLElement>(".author-group")!;
+    const gi = parseInt(groupDiv.dataset.gi!, 10);
+    btn.addEventListener("click", () => {
+      groups[gi].items.push({ labelDE: "", labelEN: "" });
+      renderGroups();
+    });
+  });
+
+  container.querySelectorAll<HTMLButtonElement>("button[data-action=remove-group]").forEach((btn) => {
+    const groupDiv = btn.closest<HTMLElement>(".author-group")!;
+    const gi = parseInt(groupDiv.dataset.gi!, 10);
+    btn.addEventListener("click", () => {
+      groups.splice(gi, 1);
+      renderGroups();
+    });
+  });
+}
+
+function showError(msg: string) {
+  const err = document.getElementById("author-error")!;
+  err.textContent = msg;
+  err.style.display = "";
+  err.scrollIntoView({ behavior: "smooth", block: "center" });
+}
+
+function clearError() {
+  const err = document.getElementById("author-error")!;
+  err.textContent = "";
+  err.style.display = "none";
+}
+
+function collectInput() {
+  const title = (document.getElementById("title") as HTMLInputElement).value.trim();
+  const description = (document.getElementById("description") as HTMLTextAreaElement).value.trim();
+  const regime = (document.getElementById("regime") as HTMLSelectElement).value;
+  const court = (document.getElementById("court") as HTMLInputElement).value.trim();
+  const reference = (document.getElementById("reference") as HTMLInputElement).value.trim();
+  const deadline = (document.getElementById("deadline") as HTMLInputElement).value.trim();
+  const lang = (document.getElementById("lang") as HTMLSelectElement).value;
+  const visibilityInput = document.querySelector<HTMLInputElement>("input[name=visibility]:checked");
+  const visibility = visibilityInput?.value || "private";
+  return { title, description, regime, court, reference, deadline, lang, visibility };
+}
+
+function validateGroups(): boolean {
+  if (groups.length === 0) return false;
+  let totalItems = 0;
+  for (const g of groups) {
+    if (!g.titleDE.trim()) return false;
+    for (const it of g.items) {
+      if (it.labelDE.trim()) totalItems += 1;
+    }
+  }
+  return totalItems > 0;
+}
+
+function trimmedGroups(): Group[] {
+  return groups
+    .filter((g) => g.titleDE.trim() && g.items.some((it) => it.labelDE.trim()))
+    .map((g) => ({
+      titleDE: g.titleDE.trim(),
+      titleEN: g.titleEN.trim(),
+      items: g.items
+        .filter((it) => it.labelDE.trim())
+        .map((it) => ({
+          labelDE: it.labelDE.trim(),
+          labelEN: it.labelEN.trim(),
+          noteDE: it.noteDE?.trim() || undefined,
+          noteEN: it.noteEN?.trim() || undefined,
+          rule: it.rule?.trim() || undefined,
+        })),
+    }));
+}
+
+async function loadEditTemplate(slug: string) {
+  // Use /api/checklists/{slug} (catalog Find with visibility check) +
+  // the mine list to ensure we have the editable fields. Templates the
+  // caller doesn't own/admin will trip the PATCH gate later.
+  const resp = await fetch(`/api/checklists/templates/mine`);
+  if (!resp.ok) {
+    showError(t("checklisten.author.error.notfound"));
+    return;
+  }
+  const rows: Checklist[] = (await resp.json()) ?? [];
+  const tpl = rows.find((r) => r.slug === slug);
+  if (!tpl) {
+    showError(t("checklisten.author.error.notfound"));
+    return;
+  }
+  (document.getElementById("author-heading")!).textContent = t("checklisten.author.heading.edit");
+  document.title = t("checklisten.author.title.edit");
+  (document.getElementById("title") as HTMLInputElement).value = tpl.title;
+  (document.getElementById("description") as HTMLTextAreaElement).value = tpl.description;
+  (document.getElementById("regime") as HTMLSelectElement).value = tpl.regime;
+  (document.getElementById("court") as HTMLInputElement).value = tpl.court;
+  (document.getElementById("reference") as HTMLInputElement).value = tpl.reference;
+  (document.getElementById("deadline") as HTMLInputElement).value = tpl.deadline;
+  (document.getElementById("lang") as HTMLSelectElement).value = tpl.lang || "de";
+  const visIn = document.querySelector<HTMLInputElement>(`input[name=visibility][value=${tpl.visibility}]`);
+  if (visIn) visIn.checked = true;
+  groups = (tpl.body?.groups || []).map((g) => ({
+    titleDE: g.titleDE || "",
+    titleEN: g.titleEN || g.titleDE || "",
+    items: g.items.map((it) => ({
+      labelDE: it.labelDE || "",
+      labelEN: it.labelEN || it.labelDE || "",
+      noteDE: it.noteDE,
+      noteEN: it.noteEN,
+      rule: it.rule,
+    })),
+  }));
+  if (groups.length === 0) {
+    groups = [{ titleDE: "", titleEN: "", items: [{ labelDE: "", labelEN: "" }] }];
+  }
+  renderGroups();
+}
+
+async function submitCreate() {
+  clearError();
+  const input = collectInput();
+  if (!input.title) {
+    showError(t("checklisten.author.error.title"));
+    return;
+  }
+  if (!validateGroups()) {
+    showError(t("checklisten.author.error.no_groups"));
+    return;
+  }
+  const saveBtn = document.getElementById("author-save") as HTMLButtonElement;
+  saveBtn.disabled = true;
+  saveBtn.textContent = t("checklisten.author.saving");
+  const body = JSON.stringify({ ...input, body: { groups: trimmedGroups() } });
+  const resp = await fetch("/api/checklists/templates", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body,
+  });
+  saveBtn.disabled = false;
+  saveBtn.textContent = t("checklisten.author.save");
+  if (!resp.ok) {
+    let msg = t("checklisten.author.error.generic");
+    try {
+      const j = await resp.json();
+      if (j?.error) msg = j.error;
+    } catch { /* keep generic */ }
+    showError(msg);
+    return;
+  }
+  const created: Checklist = await resp.json();
+  window.location.href = `/checklists/${encodeURIComponent(created.slug)}`;
+}
+
+async function submitEdit(slug: string) {
+  clearError();
+  const input = collectInput();
+  if (!input.title) {
+    showError(t("checklisten.author.error.title"));
+    return;
+  }
+  if (!validateGroups()) {
+    showError(t("checklisten.author.error.no_groups"));
+    return;
+  }
+  const saveBtn = document.getElementById("author-save") as HTMLButtonElement;
+  saveBtn.disabled = true;
+  saveBtn.textContent = t("checklisten.author.saving");
+  const patch = {
+    title: input.title,
+    description: input.description,
+    regime: input.regime,
+    court: input.court,
+    reference: input.reference,
+    deadline: input.deadline,
+    body: { groups: trimmedGroups() },
+  };
+  const resp = await fetch(`/api/checklists/templates/${encodeURIComponent(slug)}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(patch),
+  });
+  // Visibility lives on its own endpoint so the audit row reflects the
+  // distinct transition. Only call if it actually changed.
+  if (resp.ok && input.visibility) {
+    await fetch(`/api/checklists/templates/${encodeURIComponent(slug)}/visibility`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ visibility: input.visibility }),
+    });
+  }
+  saveBtn.disabled = false;
+  saveBtn.textContent = t("checklisten.author.save");
+  if (!resp.ok) {
+    let msg = t("checklisten.author.error.generic");
+    try {
+      const j = await resp.json();
+      if (j?.error) msg = j.error;
+    } catch { /* keep generic */ }
+    showError(msg);
+    return;
+  }
+  window.location.href = `/checklists/${encodeURIComponent(slug)}`;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  initI18n();
+  initSidebar();
+  renderGroups();
+
+  document.getElementById("add-group")!.addEventListener("click", () => {
+    groups.push({ titleDE: "", titleEN: "", items: [{ labelDE: "", labelEN: "" }] });
+    renderGroups();
+  });
+
+  const { mode, slug } = detectMode();
+
+  if (mode === "edit" && slug) {
+    void loadEditTemplate(slug);
+  }
+
+  document.getElementById("author-form")!.addEventListener("submit", (e) => {
+    e.preventDefault();
+    if (mode === "edit" && slug) {
+      void submitEdit(slug);
+    } else {
+      void submitCreate();
+    }
+  });
+});
--- a/frontend/src/client/checklists.ts
+++ b/frontend/src/client/checklists.ts
@@ -11,6 +11,26 @@ interface ChecklistSummary {
  courtDE: string;
  courtEN: string;
  itemCount: number;
+  origin?: "static" | "authored";
+  visibility?: string;
+  owner_email?: string;
+  owner_display_name?: string;
+}
+
+interface MyChecklist {
+  id: string;
+  slug: string;
+  owner_id: string;
+  title: string;
+  description: string;
+  regime: string;
+  court: string;
+  reference: string;
+  deadline: string;
+  lang: string;
+  visibility: string;
+  created_at: string;
+  updated_at: string;
 }

 interface ChecklistInstance {
@@ -26,15 +46,17 @@ interface ChecklistInstance {
  project_title?: string | null;
 }

-type TabId = "templates" | "instances";
+type TabId = "templates" | "mine" | "instances";

-const VALID_TABS: TabId[] = ["templates", "instances"];
+const VALID_TABS: TabId[] = ["templates", "mine", "instances"];

 let allChecklists: ChecklistSummary[] = [];
 let activeRegime = "all";
 let allInstances: ChecklistInstance[] = [];
 let templatesBySlug: Record<string, ChecklistSummary> = {};
 let instancesLoaded = false;
+let myTemplates: MyChecklist[] = [];
+let myTemplatesLoaded = false;
 let activeTab: TabId = "templates";

 function esc(s: string): string {
@@ -208,7 +230,9 @@ function showTab(tab: TabId, opts: { pushHistory?: boolean } = {}) {
    el.style.display = el.id === `tab-${tab}` ? "" : "none";
  });
  if (opts.pushHistory ?? true) {
-    const newURL = tab === "instances" ? "/checklists?tab=instances" : "/checklists";
+    let newURL = "/checklists";
+    if (tab === "instances") newURL = "/checklists?tab=instances";
+    if (tab === "mine") newURL = "/checklists?tab=mine";
    if (window.location.pathname + window.location.search !== newURL) {
      window.history.replaceState({}, "", newURL);
    }
@@ -216,6 +240,74 @@ function showTab(tab: TabId, opts: { pushHistory?: boolean } = {}) {
  if (tab === "instances") {
    void loadInstances();
  }
+  if (tab === "mine") {
+    void loadMyTemplates();
+  }
+}
+
+async function loadMyTemplates(force = false) {
+  if (myTemplatesLoaded && !force) return;
+  myTemplatesLoaded = true;
+  const resp = await fetch("/api/checklists/templates/mine");
+  if (!resp.ok) {
+    myTemplates = [];
+  } else {
+    myTemplates = (await resp.json()) ?? [];
+  }
+  renderMyTemplates();
+}
+
+function renderMyTemplates() {
+  const loading = document.getElementById("checklists-mine-loading")!;
+  const empty = document.getElementById("checklists-mine-empty")!;
+  const grid = document.getElementById("checklists-mine-grid") as HTMLElement;
+
+  loading.style.display = "none";
+
+  if (myTemplates.length === 0) {
+    empty.style.display = "";
+    grid.style.display = "none";
+    return;
+  }
+  empty.style.display = "none";
+  grid.style.display = "";
+
+  grid.innerHTML = myTemplates.map((tpl) => {
+    const visKey = `checklisten.mine.visibility.${tpl.visibility}`;
+    const visLabel = esc(t(visKey as never) || tpl.visibility);
+    const titleSafe = esc(tpl.title);
+    return `<article class="checklist-card checklist-card-mine" data-slug="${esc(tpl.slug)}" data-title="${escAttr(tpl.title)}">
+      <div class="checklist-card-top">
+        <span class="checklist-regime checklist-regime-${esc(tpl.regime)}">${esc(tpl.regime)}</span>
+        <span class="checklist-card-count visibility-chip visibility-chip-${esc(tpl.visibility)}">${visLabel}</span>
+      </div>
+      <h2 class="checklist-card-title">
+        <a href="/checklists/${esc(tpl.slug)}">${titleSafe}</a>
+      </h2>
+      <p class="checklist-card-desc">${esc(tpl.description || "")}</p>
+      <p class="checklist-card-court">${esc(tpl.court || "")}</p>
+      <div class="checklist-card-actions">
+        <a class="btn btn-small" href="/checklists/${esc(tpl.slug)}/edit" data-i18n="checklisten.mine.edit">Bearbeiten</a>
+        <button class="btn btn-small btn-danger" data-action="delete" data-slug="${esc(tpl.slug)}" data-title="${escAttr(tpl.title)}" data-i18n="checklisten.mine.delete">L&ouml;schen</button>
+      </div>
+    </article>`;
+  }).join("");
+
+  grid.querySelectorAll<HTMLButtonElement>("button[data-action=delete]").forEach((btn) => {
+    btn.addEventListener("click", async (e) => {
+      e.preventDefault();
+      const slug = btn.dataset.slug!;
+      const title = btn.dataset.title || slug;
+      const msg = t("checklisten.mine.delete.confirm").replace("{title}", title);
+      if (!window.confirm(msg)) return;
+      const resp = await fetch(`/api/checklists/templates/${encodeURIComponent(slug)}`, { method: "DELETE" });
+      if (!resp.ok) {
+        window.alert(t("checklisten.mine.delete.error"));
+        return;
+      }
+      await loadMyTemplates(true);
+    });
+  });
 }

 function initTabs() {
@@ -238,6 +330,7 @@ document.addEventListener("DOMContentLoaded", () => {
  onLangChange(() => {
    renderTemplates();
    if (instancesLoaded) renderInstances();
+    if (myTemplatesLoaded) renderMyTemplates();
  });
  void loadTemplates();
  showTab(parseTab(), { pushHistory: false });
--- a/frontend/src/client/i18n.ts
+++ b/frontend/src/client/i18n.ts
@@ -555,7 +555,59 @@ const translations: Record<Lang, Record<string, string>> = {
    "checklisten.heading": "Checklisten",
    "checklisten.subtitle": "Interaktive Checklisten f\u00fcr typische Verfahrensschritte vor UPC, BPatG und EPA. Abhaken, ausdrucken, kein Punkt vergessen.",
    "checklisten.tab.templates": "Vorlagen",
+    "checklisten.tab.mine": "Meine Vorlagen",
    "checklisten.tab.instances": "Vorhandene Instanzen",
+    "checklisten.mine.empty": "Sie haben noch keine eigene Vorlage angelegt.",
+    "checklisten.mine.new": "Neue Vorlage",
+    "checklisten.mine.loading": "Lädt…",
+    "checklisten.mine.visibility.private": "Privat",
+    "checklisten.mine.visibility.firm": "Firmenweit",
+    "checklisten.mine.visibility.shared": "Geteilt",
+    "checklisten.mine.visibility.global": "Im Katalog",
+    "checklisten.mine.edit": "Bearbeiten",
+    "checklisten.mine.delete": "Löschen",
+    "checklisten.mine.delete.confirm": "Vorlage „{title}“ wirklich löschen? Bestehende Instanzen bleiben erhalten.",
+    "checklisten.mine.delete.error": "Löschen fehlgeschlagen.",
+    "checklisten.mine.origin.authored": "Eigene Vorlage",
+    "checklisten.author.title": "Vorlage erstellen — Paliad",
+    "checklisten.author.title.edit": "Vorlage bearbeiten — Paliad",
+    "checklisten.author.heading.new": "Neue Checklisten-Vorlage",
+    "checklisten.author.heading.edit": "Vorlage bearbeiten",
+    "checklisten.author.subtitle": "Erstellen Sie eine eigene Checkliste mit Sektionen und Punkten. Sie können sie privat halten oder firmenweit verfügbar machen.",
+    "checklisten.author.field.title": "Titel",
+    "checklisten.author.field.title.hint": "z.B. „UPC SoC — interne Checkliste“.",
+    "checklisten.author.field.description": "Kurzbeschreibung",
+    "checklisten.author.field.regime": "Regime",
+    "checklisten.author.field.court": "Gericht / Behörde",
+    "checklisten.author.field.reference": "Rechtsgrundlage",
+    "checklisten.author.field.deadline": "Deadline (optional)",
+    "checklisten.author.field.lang": "Sprache",
+    "checklisten.author.field.visibility": "Sichtbarkeit",
+    "checklisten.author.visibility.private.hint": "Nur für Sie sichtbar.",
+    "checklisten.author.visibility.firm.hint": "Für alle angemeldeten Kolleginnen und Kollegen sichtbar.",
+    "checklisten.author.groups.heading": "Sektionen und Punkte",
+    "checklisten.author.groups.add": "+ Sektion hinzufügen",
+    "checklisten.author.group.title": "Sektionsname",
+    "checklisten.author.group.remove": "Sektion löschen",
+    "checklisten.author.item.add": "+ Punkt hinzufügen",
+    "checklisten.author.item.label": "Punkt",
+    "checklisten.author.item.note": "Notiz (optional)",
+    "checklisten.author.item.rule": "Vorschrift (optional)",
+    "checklisten.author.item.remove": "Punkt löschen",
+    "checklisten.author.save": "Speichern",
+    "checklisten.author.cancel": "Abbrechen",
+    "checklisten.author.saving": "Speichert…",
+    "checklisten.author.error.title": "Bitte geben Sie einen Titel ein.",
+    "checklisten.author.error.no_groups": "Bitte mindestens eine Sektion mit einem Punkt anlegen.",
+    "checklisten.author.error.generic": "Speichern fehlgeschlagen. Bitte erneut versuchen.",
+    "checklisten.author.error.notfound": "Diese Vorlage existiert nicht oder Sie haben keine Berechtigung sie zu bearbeiten.",
+    "checklisten.detail.edit": "Bearbeiten",
+    "checklisten.detail.delete": "Löschen",
+    "checklisten.detail.authored.by": "Erstellt von {author}",
+    "checklisten.detail.visibility": "Sichtbarkeit: {state}",
+    "checklisten.detail.visibility.set.firm": "Für Firma freigeben",
+    "checklisten.detail.visibility.set.private": "Privat schalten",
+    "checklisten.detail.visibility.error": "Sichtbarkeit konnte nicht geändert werden.",
    "checklisten.instances.all.loading": "L\u00e4dt\u2026",
    "checklisten.instances.all.empty": "Noch keine Checklisten-Instanzen erfasst. Legen Sie eine \u00fcber den Vorlagen-Tab an.",
    "checklisten.instances.all.col.template": "Vorlage",
@@ -3284,7 +3336,59 @@ const translations: Record<Lang, Record<string, string>> = {
    "checklisten.heading": "Checklists",
    "checklisten.subtitle": "Interactive checklists for typical procedural steps before the UPC, German Patent Court, and EPO. Tick off, print, miss nothing.",
    "checklisten.tab.templates": "Templates",
+    "checklisten.tab.mine": "My templates",
    "checklisten.tab.instances": "Existing instances",
+    "checklisten.mine.empty": "You haven't authored a template yet.",
+    "checklisten.mine.new": "New template",
+    "checklisten.mine.loading": "Loading…",
+    "checklisten.mine.visibility.private": "Private",
+    "checklisten.mine.visibility.firm": "Firm-wide",
+    "checklisten.mine.visibility.shared": "Shared",
+    "checklisten.mine.visibility.global": "In catalog",
+    "checklisten.mine.edit": "Edit",
+    "checklisten.mine.delete": "Delete",
+    "checklisten.mine.delete.confirm": "Delete template \"{title}\"? Existing instances remain.",
+    "checklisten.mine.delete.error": "Delete failed.",
+    "checklisten.mine.origin.authored": "Your template",
+    "checklisten.author.title": "Author template — Paliad",
+    "checklisten.author.title.edit": "Edit template — Paliad",
+    "checklisten.author.heading.new": "New checklist template",
+    "checklisten.author.heading.edit": "Edit template",
+    "checklisten.author.subtitle": "Author your own checklist with sections and items. Keep it private or open it firm-wide.",
+    "checklisten.author.field.title": "Title",
+    "checklisten.author.field.title.hint": "e.g. \"UPC SoC — internal checklist\".",
+    "checklisten.author.field.description": "Short description",
+    "checklisten.author.field.regime": "Regime",
+    "checklisten.author.field.court": "Court / authority",
+    "checklisten.author.field.reference": "Legal source",
+    "checklisten.author.field.deadline": "Deadline (optional)",
+    "checklisten.author.field.lang": "Language",
+    "checklisten.author.field.visibility": "Visibility",
+    "checklisten.author.visibility.private.hint": "Visible only to you.",
+    "checklisten.author.visibility.firm.hint": "Visible to every authenticated colleague.",
+    "checklisten.author.groups.heading": "Sections and items",
+    "checklisten.author.groups.add": "+ Add section",
+    "checklisten.author.group.title": "Section title",
+    "checklisten.author.group.remove": "Remove section",
+    "checklisten.author.item.add": "+ Add item",
+    "checklisten.author.item.label": "Item",
+    "checklisten.author.item.note": "Note (optional)",
+    "checklisten.author.item.rule": "Rule (optional)",
+    "checklisten.author.item.remove": "Remove item",
+    "checklisten.author.save": "Save",
+    "checklisten.author.cancel": "Cancel",
+    "checklisten.author.saving": "Saving…",
+    "checklisten.author.error.title": "Please enter a title.",
+    "checklisten.author.error.no_groups": "Please add at least one section with one item.",
+    "checklisten.author.error.generic": "Save failed. Please try again.",
+    "checklisten.author.error.notfound": "Template not found or you don't have permission to edit it.",
+    "checklisten.detail.edit": "Edit",
+    "checklisten.detail.delete": "Delete",
+    "checklisten.detail.authored.by": "Authored by {author}",
+    "checklisten.detail.visibility": "Visibility: {state}",
+    "checklisten.detail.visibility.set.firm": "Share with firm",
+    "checklisten.detail.visibility.set.private": "Make private",
+    "checklisten.detail.visibility.error": "Couldn't change visibility.",
    "checklisten.instances.all.loading": "Loading…",
    "checklisten.instances.all.empty": "No checklist instances yet. Create one from the Templates tab.",
    "checklisten.instances.all.col.template": "Template",
--- a/frontend/src/i18n-keys.ts
+++ b/frontend/src/i18n-keys.ts
@@ -800,7 +800,46 @@ export type I18nKey =
  | "changelog.tag.feature"
  | "changelog.tag.fix"
  | "changelog.title"
+  | "checklisten.author.cancel"
+  | "checklisten.author.error.generic"
+  | "checklisten.author.error.no_groups"
+  | "checklisten.author.error.notfound"
+  | "checklisten.author.error.title"
+  | "checklisten.author.field.court"
+  | "checklisten.author.field.deadline"
+  | "checklisten.author.field.description"
+  | "checklisten.author.field.lang"
+  | "checklisten.author.field.reference"
+  | "checklisten.author.field.regime"
+  | "checklisten.author.field.title"
+  | "checklisten.author.field.title.hint"
+  | "checklisten.author.field.visibility"
+  | "checklisten.author.group.remove"
+  | "checklisten.author.group.title"
+  | "checklisten.author.groups.add"
+  | "checklisten.author.groups.heading"
+  | "checklisten.author.heading.edit"
+  | "checklisten.author.heading.new"
+  | "checklisten.author.item.add"
+  | "checklisten.author.item.label"
+  | "checklisten.author.item.note"
+  | "checklisten.author.item.remove"
+  | "checklisten.author.item.rule"
+  | "checklisten.author.save"
+  | "checklisten.author.saving"
+  | "checklisten.author.subtitle"
+  | "checklisten.author.title"
+  | "checklisten.author.title.edit"
+  | "checklisten.author.visibility.firm.hint"
+  | "checklisten.author.visibility.private.hint"
  | "checklisten.back"
+  | "checklisten.detail.authored.by"
+  | "checklisten.detail.delete"
+  | "checklisten.detail.edit"
+  | "checklisten.detail.visibility"
+  | "checklisten.detail.visibility.error"
+  | "checklisten.detail.visibility.set.firm"
+  | "checklisten.detail.visibility.set.private"
  | "checklisten.disclaimer"
  | "checklisten.empty"
  | "checklisten.feedback.btn"
@@ -845,6 +884,18 @@ export type I18nKey =
  | "checklisten.instances.heading"
  | "checklisten.instances.loading"
  | "checklisten.instances.sub"
+  | "checklisten.mine.delete"
+  | "checklisten.mine.delete.confirm"
+  | "checklisten.mine.delete.error"
+  | "checklisten.mine.edit"
+  | "checklisten.mine.empty"
+  | "checklisten.mine.loading"
+  | "checklisten.mine.new"
+  | "checklisten.mine.origin.authored"
+  | "checklisten.mine.visibility.firm"
+  | "checklisten.mine.visibility.global"
+  | "checklisten.mine.visibility.private"
+  | "checklisten.mine.visibility.shared"
  | "checklisten.newInstance"
  | "checklisten.newInstance.akte"
  | "checklisten.newInstance.akte.hint"
@@ -863,6 +914,7 @@ export type I18nKey =
  | "checklisten.reset.error"
  | "checklisten.subtitle"
  | "checklisten.tab.instances"
+  | "checklisten.tab.mine"
  | "checklisten.tab.templates"
  | "checklisten.title"
  | "common.cancel"