547374aa6d
The onchange handler used `new URL(location)`. Inline event handler
attributes execute inside an implicit `with(document){...}` scope, and
`document.URL` is a built-in string property — so the bare `URL`
identifier resolved to that string instead of the global URL
constructor, throwing "URL is not a constructor" on every change.
The error wasn't visible anywhere in the UI, so the dropdown appeared
to update (its own selected option changed) while the page silently
never navigated, and a reload reverted it to the default.
Fix: reference `window.URL` explicitly to bypass the shadowing.
Verified the dropdown now actually re-sorts the sidebar and the
change survives a reload on both the Links and Prompts pages.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
103 lines
4.8 KiB
HTML
103 lines
4.8 KiB
HTML
{% 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 }}&facet_sort={{ facet_sort }}" class="facet {% if not active_category %}active{% endif %}">
|
|
<span>{{ icons.grid(size=14) }} Alle Prompts</span>
|
|
</a>
|
|
|
|
<div style="display:flex; justify-content:flex-end; margin-top:12px;">
|
|
<select onchange="const u=new window.URL(location); u.searchParams.set('facet_sort', this.value); location.href=u;"
|
|
title="Sortierung der Kategorie-Liste" style="font-size:.75rem; padding:3px 6px;">
|
|
{% for value, label in facet_sort_options.items() %}
|
|
<option value="{{ value }}" {% if facet_sort == value %}selected{% endif %}>{{ label }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="facet-group">
|
|
<h3>Kategorien</h3>
|
|
{% for name, count in facets.categories %}
|
|
<a href="/prompts?category={{ name | urlencode }}&sort={{ sort }}&facet_sort={{ facet_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.
|
|
Der Text unterstützt Markdown.
|
|
<details class="md-help">
|
|
<summary>{{ icons.sparkles(size=12) }} Markdown-Hilfe</summary>
|
|
<table>
|
|
<tr><td><code># Text</code></td><td>Überschrift</td></tr>
|
|
<tr><td><code>**Text**</code></td><td><strong>fett</strong></td></tr>
|
|
<tr><td><code>*Text*</code></td><td><em>kursiv</em></td></tr>
|
|
<tr><td><code>- Text</code></td><td>Aufzählung</td></tr>
|
|
<tr><td><code>1. Text</code></td><td>nummerierte Liste</td></tr>
|
|
<tr><td><code>> Text</code></td><td>Zitat</td></tr>
|
|
<tr><td><code>`Text`</code></td><td><code>Inline-Code</code></td></tr>
|
|
<tr><td><code>```</code></td><td>Codeblock (davor & danach)</td></tr>
|
|
<tr><td><code>[Text](url)</code></td><td>Link</td></tr>
|
|
</table>
|
|
</details>
|
|
</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 %}
|