Add a Prompts library alongside Links, bump to v2.0.0

New /prompts section extends the existing database (new Prompt model,
same SQLite file) and mirrors the Links experience: add a prompt, get
it auto-categorized and tagged by AI, filter by category, full-text
search, sort, edit, or have the AI re-categorize it. A header nav
switch ("Links" / "Prompts") toggles between the two collections; the
shared topbar/menu markup was factored into _topbar.html and
_topbar_actions.html so both pages (and settings) stay in sync.

Each prompt card has a dedicated copy-to-clipboard icon next to
edit/delete, so a stored prompt can be reused immediately. Copying
uses the raw markdown source (not the rendered HTML) so structure
survives when pasted into another AI tool. The copy handler tries the
async Clipboard API first and falls back to a hidden-textarea +
execCommand('copy') for plain-http/non-secure contexts, with clear
success/failure icon feedback either way.

Prompt content supports Markdown and is rendered server-side
(app/mdrender.py) for the card preview. Since this is user-supplied
HTML-adjacent content, rendering goes through two defenses: the raw
text is escaped (only '<' and '&', not '>', so blockquotes keep
working) before conversion so no raw tag can survive, and the
resulting HTML is passed through bleach with a tag/attribute/protocol
allowlist so Markdown-generated links can't carry a javascript: URL.
Verified against raw <script>, <img onerror>, and javascript: link
payloads. The edit form always shows the raw Markdown source, never
the rendered HTML.

Also bumps the default APP_VERSION (shown in the footer) from 1.0.0
to 2.0.0 to mark this feature addition.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/templates/_icons.html

@@ -82,6 +82,10 @@
 {{ base('<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/>', size) }}
 {%- endmacro %}
 
+{% macro copy(size=16) -%}
+{{ base('<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>', size) }}
+{%- endmacro %}
+
 {% macro tag(size=16) -%}
 {{ base('<path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r="1.5"/>', size) }}
 {%- endmacro %}

app/templates/_prompt_card.html

@@ -0,0 +1,51 @@
+{% import "_icons.html" as icons %}
+<div class="panel link-card" id="prompt-{{ prompt.id }}">
+  <div class="card-head">
+    <span class="card-avatar" style="--h: {{ prompt.category | texthue }};">
+      {{ (prompt.category[:1] | upper) or '?' }}
+    </span>
+
+    <div class="card-badges">
+      {% if prompt.category %}
+      <span class="badge badge-cat">{{ prompt.category }}</span>
+      {% endif %}
+    </div>
+
+    <div class="card-actions">
+      <button type="button" class="ghost icon-btn"
+              title="In die Zwischenablage kopieren"
+              onclick="copyPromptContent(this)" data-content="{{ prompt.content }}">{{ icons.copy() }}</button>
+      <button class="ghost icon-btn"
+              title="Bearbeiten"
+              hx-get="/prompts/{{ prompt.id }}/edit"
+              hx-target="#prompt-{{ prompt.id }}"
+              hx-swap="outerHTML">{{ icons.edit() }}</button>
+      <button class="danger icon-btn"
+              title="Löschen"
+              hx-delete="/prompts/{{ prompt.id }}"
+              hx-target="#prompt-{{ prompt.id }}"
+              hx-swap="outerHTML"
+              hx-confirm="Diesen Prompt wirklich löschen?">{{ icons.trash() }}</button>
+    </div>
+  </div>
+
+  <div class="card-title">{{ prompt.title or "Prompt" }}</div>
+
+  <div class="card-summary md-preview">{{ prompt.content | markdown }}</div>
+
+  <div class="card-spacer"></div>
+
+  {% if prompt.tag_list %}
+  <div class="card-tags">
+    {% for tag in prompt.tag_list %}
+    <span class="badge badge-tag">#{{ tag }}</span>
+    {% endfor %}
+  </div>
+  {% endif %}
+
+  <div class="card-foot" style="justify-content:flex-end;">
+    <span title="hinzugefügt am {{ prompt.created_at | datum }}">
+      {{ icons.clock(size=13) }} {{ prompt.created_at | datum }}
+    </span>
+  </div>
+</div>

app/templates/_prompt_card_edit.html

@@ -0,0 +1,55 @@
+{% import "_icons.html" as icons %}
+<div class="panel link-card" id="prompt-{{ prompt.id }}">
+  <form hx-put="/prompts/{{ prompt.id }}" hx-target="#prompt-{{ prompt.id }}" hx-swap="outerHTML"
+        hx-disabled-elt="button">
+    <div class="muted" style="font-size:.75rem; margin:0 0 10px;">
+      {{ icons.clock(size=13) }} hinzugefügt am {{ prompt.created_at | datum }}
+    </div>
+
+    <div class="field">
+      <label>Titel</label>
+      <input type="text" name="title" value="{{ prompt.title }}">
+    </div>
+
+    <div class="field">
+      <label>Prompt-Text</label>
+      <textarea name="content" rows="6" style="width:100%; background:var(--panel2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:10px 12px; font-size:.95rem; font-family:inherit;">{{ prompt.content }}</textarea>
+    </div>
+
+    <div class="field">
+      <label>Kategorie</label>
+      <input type="text" name="category" value="{{ prompt.category }}"
+             list="prompt-cats-{{ prompt.id }}" placeholder="wählen oder neu eingeben"
+             autocomplete="off">
+      <datalist id="prompt-cats-{{ prompt.id }}">
+        {% for name in all_categories %}<option value="{{ name }}"></option>{% endfor %}
+      </datalist>
+    </div>
+
+    <div class="field">
+      <label>Tags (mit Komma getrennt)</label>
+      <input type="text" name="tags" value="{{ prompt.tag_list | join(', ') }}">
+    </div>
+
+    <div style="display:flex; justify-content:space-between; gap:8px; margin-top:4px; flex-wrap:wrap;">
+      <div style="display:flex; gap:8px;">
+        <button type="submit">Speichern</button>
+        <button type="button" class="ghost"
+                hx-get="/prompts/{{ prompt.id }}/view"
+                hx-target="#prompt-{{ prompt.id }}"
+                hx-swap="outerHTML">Abbrechen</button>
+      </div>
+      {% if ai_enabled %}
+      <button type="button" class="ghost"
+              hx-post="/prompts/{{ prompt.id }}/reanalyze"
+              hx-target="#prompt-{{ prompt.id }}"
+              hx-swap="outerHTML"
+              hx-disabled-elt="this"
+              hx-confirm="Prompt erneut von der KI kategorisieren lassen? Bestehende Angaben werden dabei ersetzt.">
+        <span class="htmx-indicator icon-spin">{{ icons.spinner(size=14) }}</span>
+        {{ icons.sparkles(size=14) }} KI neu kategorisieren lassen
+      </button>
+      {% endif %}
+    </div>
+  </form>
+</div>

app/templates/_prompts_list.html

@@ -0,0 +1,9 @@
+{% if prompts %}
+  {% for prompt in prompts %}
+    {% include "_prompt_card.html" %}
+  {% endfor %}
+{% else %}
+  <div id="empty-state" class="panel" style="text-align:center; color:var(--muted); padding:40px;">
+    Noch keine Prompts gefunden. Füge oben deinen ersten Prompt hinzu.
+  </div>
+{% endif %}

app/templates/_topbar.html

@@ -0,0 +1,17 @@
+{% import "_icons.html" as icons %}
+<header class="topbar">
+  <a href="/" class="brand" style="text-decoration:none;">Link<span>Vault</span></a>
+  <div class="topbar-right">
+    <nav class="mode-switch">
+      <a href="/" class="mode-tab {% if request.url.path == '/' %}active{% endif %}">
+        {{ icons.grid(size=14) }} Links
+      </a>
+      <a href="/prompts" class="mode-tab {% if request.url.path.startswith('/prompts') %}active{% endif %}">
+        {{ icons.sparkles(size=14) }} Prompts
+      </a>
+    </nav>
+    <div class="user-info">
+      {% include "_topbar_actions.html" %}
+    </div>
+  </div>
+</header>

app/templates/_topbar_actions.html

@@ -0,0 +1,32 @@
+{% import "_icons.html" as icons %}
+{% if not ai_enabled %}
+<span title="Kein OPENAI_API_KEY gesetzt – Auto-Kategorisierung deaktiviert" class="icon-warn">
+  {{ icons.alert(size=14) }} KI aus
+</span>
+{% endif %}
+
+<button id="theme-toggle" type="button" class="ghost icon-btn" title="Farbschema wechseln">
+  <span class="theme-icon-dark">{{ icons.moon() }}</span>
+  <span class="theme-icon-light">{{ icons.sun() }}</span>
+</button>
+
+<div class="user-menu">
+  <button type="button" class="ghost icon-btn" title="{{ user.email }}">{{ icons.user() }}</button>
+  <button id="menu-toggle" type="button" class="ghost icon-btn" title="Menü"
+          aria-haspopup="true" aria-expanded="false">{{ icons.menu() }}</button>
+
+  <div id="user-dropdown" class="user-dropdown" hidden>
+    <div class="dropdown-email">{{ user.email }}</div>
+    <div class="dropdown-sep"></div>
+    <button type="button" class="dropdown-item" disabled>
+      {{ icons.tag(size=15) }} Tags verwalten <span class="soon">bald</span>
+    </button>
+    <a href="/settings" class="dropdown-item" style="text-decoration:none;">
+      {{ icons.sliders(size=15) }} Einstellungen
+    </a>
+    <div class="dropdown-sep"></div>
+    <form method="post" action="/logout" style="margin:0;">
+      <button type="submit" class="dropdown-item">{{ icons.log_out(size=15) }} Abmelden</button>
+    </form>
+  </div>
+</div>

app/templates/base.html

@@ -45,7 +45,15 @@
     }
     header.topbar .brand { font-weight: 700; font-size: 1.2rem; }
     header.topbar .brand span { color: var(--accent-hover); }
+    .topbar-right { display: flex; align-items: center; gap: 16px; }
     .user-info { color: var(--muted); font-size: .9rem; display: flex; gap: 12px; align-items: center; }
+    .mode-switch { display: flex; gap: 2px; background: var(--panel2); border-radius: 8px; padding: 2px; }
+    .mode-tab {
+      display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
+      border-radius: 6px; font-size: .85rem; color: var(--muted); text-decoration: none;
+    }
+    .mode-tab:hover { color: var(--text); text-decoration: none; }
+    .mode-tab.active { background: var(--accent); color: #fff; }
     button, input[type=submit] {
       background: var(--accent); color: white; border: none; border-radius: 8px;
       padding: 9px 16px; font-size: .95rem; cursor: pointer; font-weight: 500;
@@ -82,9 +90,9 @@
     /* Linkliste: bis zu drei Karten pro Zeile, je nach Fensterbreite.
        Karten einer Zeile sind gleich hoch; die Zusammenfassung wird
        dafür auf drei Zeilen gekürzt. */
-    #links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
-    #links > .panel { margin-bottom: 0; }
-    #links > #empty-state { grid-column: 1 / -1; }
+    #links, #prompts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
+    #links > .panel, #prompts > .panel { margin-bottom: 0; }
+    #links > #empty-state, #prompts > #empty-state { grid-column: 1 / -1; }
 
     .link-card { display: flex; flex-direction: column; }
     .link-card.needs-review { border-color: #ca8a04; }
@@ -121,6 +129,38 @@
       display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
       overflow: hidden; height: calc(3 * 1.5 * .875rem); flex: none;
     }
+    /* Markdown-Vorschau (Prompts): line-clamp funktioniert nicht zuverlässig
+       über mehrere Block-Elemente (Überschriften, Listen, Codeblöcke)
+       hinweg, daher stattdessen feste Höhe + Fade-Ausblendung. */
+    .card-summary.md-preview {
+      display: block; -webkit-line-clamp: unset; position: relative;
+      height: calc(4 * 1.5 * .875rem);
+    }
+    .md-preview::after {
+      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6em;
+      background: linear-gradient(to bottom, transparent, var(--panel));
+    }
+    .md-preview > :first-child { margin-top: 0; }
+    .md-preview > :last-child { margin-bottom: 0; }
+    .md-preview h1, .md-preview h2, .md-preview h3,
+    .md-preview h4, .md-preview h5, .md-preview h6 {
+      font-size: .95rem; margin: 0 0 4px; color: var(--text);
+    }
+    .md-preview p { margin: 0 0 6px; }
+    .md-preview ul, .md-preview ol { margin: 0 0 6px; padding-left: 1.2em; }
+    .md-preview li { margin-bottom: 2px; }
+    .md-preview code {
+      background: var(--panel2); padding: 1px 5px; border-radius: 4px; font-size: .85em;
+    }
+    .md-preview pre {
+      background: var(--panel2); padding: 8px 10px; border-radius: 8px;
+      overflow-x: auto; margin: 0 0 6px;
+    }
+    .md-preview pre code { background: none; padding: 0; }
+    .md-preview blockquote {
+      border-left: 3px solid var(--border); margin: 0 0 6px; padding-left: 10px;
+    }
+    .md-preview a { text-decoration: underline; }
     .card-spacer { flex: 1 1 auto; }
     /* Tags: nur eine Zeile, Rest wird abgeschnitten – hält die Karten gleich hoch. */
     .card-tags {
@@ -134,8 +174,8 @@
     }
     .card-domain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     .card-foot > span:last-child { flex-shrink: 0; }
-    @media (min-width: 1000px) { #links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-    @media (min-width: 1500px) { #links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+    @media (min-width: 1000px) { #links, #prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+    @media (min-width: 1500px) { #links, #prompts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
 
     /* Auf schmalen Geräten die Seitenleiste über den Inhalt stellen. */
     @media (max-width: 800px) {
@@ -169,6 +209,7 @@
     .theme-icon-dark, .theme-icon-light { display: inline-flex; }
     .icon-warn { color: #eab308; }
     .icon-bookmark-active { color: #eab308; }
+    .icon-copied { color: #22c55e; border-color: #16a34a; }
 
     .input-icon { position: relative; }
     .input-icon > .icon {
@@ -255,5 +296,49 @@
       }
     })();
   </script>
+  <script>
+    var COPY_ICON_CHECK =
+      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" ' +
+      'fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" ' +
+      'stroke-linejoin="round" class="icon"><polyline points="20 6 9 17 4 12"/></svg>';
+
+    function copyPromptContent(btn) {
+      var text = btn.getAttribute('data-content') || '';
+      if (!btn.dataset.originalIcon) btn.dataset.originalIcon = btn.innerHTML;
+
+      var showResult = function (ok) {
+        btn.innerHTML = ok ? COPY_ICON_CHECK : btn.dataset.originalIcon;
+        btn.title = ok ? 'In die Zwischenablage kopiert' : 'Kopieren fehlgeschlagen';
+        btn.classList.toggle('icon-copied', ok);
+        setTimeout(function () {
+          btn.innerHTML = btn.dataset.originalIcon;
+          btn.title = 'In die Zwischenablage kopieren';
+          btn.classList.remove('icon-copied');
+        }, 1500);
+      };
+
+      // Fallback für http (kein sicherer Kontext) oder ältere Browser, in
+      // denen die asynchrone Clipboard-API nicht verfügbar ist/abgelehnt wird.
+      var legacyCopy = function () {
+        var ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.position = 'fixed';
+        ta.style.opacity = '0';
+        document.body.appendChild(ta);
+        ta.focus();
+        ta.select();
+        var ok = false;
+        try { ok = document.execCommand('copy'); } catch (e) { ok = false; }
+        document.body.removeChild(ta);
+        showResult(ok);
+      };
+
+      if (window.isSecureContext && navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(function () { showResult(true); }, legacyCopy);
+      } else {
+        legacyCopy();
+      }
+    }
+  </script>
 </body>
 </html>

app/templates/index.html

@@ -2,42 +2,7 @@
 {% import "_icons.html" as icons %}
 {% block title %}Meine Links · LinkVault{% endblock %}
 {% block body %}
-<header class="topbar">
-  <div class="brand">Link<span>Vault</span></div>
-  <div class="user-info">
-    {% if not ai_enabled %}
-    <span title="Kein OPENAI_API_KEY gesetzt – Auto-Kategorisierung deaktiviert" class="icon-warn">
-      {{ icons.alert(size=14) }} KI aus
-    </span>
-    {% endif %}
-
-    <button id="theme-toggle" type="button" class="ghost icon-btn" title="Farbschema wechseln">
-      <span class="theme-icon-dark">{{ icons.moon() }}</span>
-      <span class="theme-icon-light">{{ icons.sun() }}</span>
-    </button>
-
-    <div class="user-menu">
-      <button type="button" class="ghost icon-btn" title="{{ user.email }}">{{ icons.user() }}</button>
-      <button id="menu-toggle" type="button" class="ghost icon-btn" title="Menü"
-              aria-haspopup="true" aria-expanded="false">{{ icons.menu() }}</button>
-
-      <div id="user-dropdown" class="user-dropdown" hidden>
-        <div class="dropdown-email">{{ user.email }}</div>
-        <div class="dropdown-sep"></div>
-        <button type="button" class="dropdown-item" disabled>
-          {{ icons.tag(size=15) }} Tags verwalten <span class="soon">bald</span>
-        </button>
-        <a href="/settings" class="dropdown-item" style="text-decoration:none;">
-          {{ icons.sliders(size=15) }} Einstellungen
-        </a>
-        <div class="dropdown-sep"></div>
-        <form method="post" action="/logout" style="margin:0;">
-          <button type="submit" class="dropdown-item">{{ icons.log_out(size=15) }} Abmelden</button>
-        </form>
-      </div>
-    </div>
-  </div>
-</header>
+{% include "_topbar.html" %}
 
 <div class="layout">
   <aside class="sidebar">

app/templates/prompts.html

@@ -0,0 +1,78 @@
+{% extends "base.html" %}
+{% import "_icons.html" as icons %}
+{% block title %}Meine Prompts · LinkVault{% endblock %}
+{% block body %}
+{% include "_topbar.html" %}
+
+<div class="layout">
+  <aside class="sidebar">
+    <div class="panel">
+      <a href="/prompts?sort={{ sort }}" class="facet {% if not active_category %}active{% endif %}">
+        <span>{{ icons.grid(size=14) }} Alle Prompts</span>
+      </a>
+
+      <div class="facet-group">
+        <h3>Kategorien</h3>
+        {% for name, count in facets.categories %}
+        <a href="/prompts?category={{ name | urlencode }}&amp;sort={{ sort }}"
+           class="facet {% if active_category == name %}active{% endif %}">
+          <span>{{ name }}</span><span class="count">{{ count }}</span>
+        </a>
+        {% else %}
+        <div class="muted" style="font-size:.85rem; padding:4px 8px;">noch keine</div>
+        {% endfor %}
+      </div>
+    </div>
+  </aside>
+
+  <main class="main">
+    <div class="panel">
+      <form hx-post="/prompts" hx-target="#prompts" hx-swap="afterbegin"
+            hx-disabled-elt="button"
+            hx-on::after-request="if(event.detail.successful){this.reset(); var e=document.getElementById('empty-state'); if(e) e.remove();}">
+        <textarea name="content" rows="3" required placeholder="Prompt eingeben..."
+                  style="width:100%; background:var(--panel2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:10px 12px; font-size:.95rem; font-family:inherit;"></textarea>
+        <div style="display:flex; justify-content:flex-end; margin-top:8px;">
+          <button type="submit" style="white-space:nowrap;">
+            <span class="htmx-indicator icon-spin">{{ icons.spinner(size=14) }}</span>
+            {{ icons.plus(size=14) }} Hinzufügen
+          </button>
+        </div>
+        <div class="muted" style="font-size:.8rem; margin-top:6px;">
+          Der Prompt wird automatisch kategorisiert und mit Tags versehen.
+        </div>
+      </form>
+    </div>
+
+    <div class="panel">
+      <form id="promptsearchform" onsubmit="return false;" style="margin:0;">
+        <input type="hidden" name="category" value="{{ active_category }}">
+        <div class="input-icon">
+          {{ icons.search(size=15) }}
+          <input type="text" name="q" value="{{ q }}"
+                 placeholder="Suche in Titel, Prompt-Text, Tags..."
+                 hx-get="/prompts/search" hx-target="#prompts" hx-swap="innerHTML"
+                 hx-trigger="keyup changed delay:400ms, search"
+                 hx-include="#promptsearchform">
+        </div>
+        <div style="display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:10px;">
+          <label class="muted" style="display:inline-flex; align-items:center; gap:6px; font-size:.85rem;">
+            Sortierung:
+            <select name="sort"
+                    hx-get="/prompts/search" hx-target="#prompts" hx-swap="innerHTML"
+                    hx-trigger="change" hx-include="#promptsearchform">
+              {% for value, label in sort_options.items() %}
+              <option value="{{ value }}" {% if sort == value %}selected{% endif %}>{{ label }}</option>
+              {% endfor %}
+            </select>
+          </label>
+        </div>
+      </form>
+    </div>
+
+    <div id="prompts">
+      {% include "_prompts_list.html" %}
+    </div>
+  </main>
+</div>
+{% endblock %}

app/templates/settings.html

@@ -2,16 +2,7 @@
 {% import "_icons.html" as icons %}
 {% block title %}Einstellungen · LinkVault{% endblock %}
 {% block body %}
-<header class="topbar">
-  <a href="/" class="brand">Link<span>Vault</span></a>
-  <div class="user-info">
-    <button id="theme-toggle" type="button" class="ghost icon-btn" title="Farbschema wechseln">
-      <span class="theme-icon-dark">{{ icons.moon() }}</span>
-      <span class="theme-icon-light">{{ icons.sun() }}</span>
-    </button>
-    <a href="/" class="ghost icon-btn" title="Zurück zu den Links">{{ icons.grid() }}</a>
-  </div>
-</header>
+{% include "_topbar.html" %}
 
 <div class="layout" style="max-width:720px; margin-left:auto; margin-right:auto;">
   <main class="main">