ethiele/linkvault
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace emoji icons with a monochrome SVG icon set

Browse Source 
Emoji (📚 🔖 🏷️ ✎ ✕ 🕓 ⏳ 🤖 ⚠️ 🔍) rendered in each platform's own
colorful style and looked inconsistent. Add app/templates/_icons.html
with small inline SVG macros (Lucide-style, MIT-licensed path data,
stroke=currentColor) and use them throughout instead, so icons pick
up the muted/accent text colors like the rest of the UI.

The needs-review bookmark toggle now uses an outline vs. filled icon
for its two states instead of swapping emoji.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Erik Thiele
2026-07-20 22:50:52 +02:00
parent b6a236527e
commit dca6033c40
5 changed files with 97 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/templates/index.html
View File

@@ -1,12 +1,13 @@
{% extends "base.html" %}
{% 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">
⚠️ KI aus
<span title="Kein OPENAI_API_KEY gesetzt – Auto-Kategorisierung deaktiviert" class="icon-warn">
{{ icons.alert(size=14) }} KI aus
</span>
{% endif %}
<span>{{ user.email }}</span>
@@ -20,7 +21,7 @@
<aside class="sidebar">
<div class="panel">
<a href="/?sort={{ sort }}" class="facet {% if not active_category and not active_manufacturer and not review_only %}active{% endif %}">
<span>📚 Alle Links</span>
<span>{{ icons.grid(size=14) }} Alle Links</span>
</a>
<div class="facet-group">
@@ -50,7 +51,7 @@
<div class="facet-group">
<h3>Merkliste</h3>
<a href="/?review=1&amp;sort={{ sort }}" class="facet {% if review_only %}active{% endif %}">
<span>🔖 Zur Durchsicht</span><span class="count">{{ facets.review_count }}</span>
<span>{{ icons.bookmark(size=14) }} Zur Durchsicht</span><span class="count">{{ facets.review_count }}</span>
</a>
</div>
</div>
@@ -65,7 +66,8 @@
<input type="url" name="url" placeholder="Link einfügen, z.B. https://hersteller.de/produkt" required
style="flex:1 1 220px; width:auto;">
<button type="submit" style="white-space:nowrap;">
<span class="htmx-indicator">⏳</span> Hinzufügen
<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;">
@@ -79,11 +81,14 @@
<input type="hidden" name="category" value="{{ active_category }}">
<input type="hidden" name="manufacturer" value="{{ active_manufacturer }}">
<input type="hidden" name="review" value="{{ '1' if review_only else '' }}">
<input type="text" name="q" value="{{ q }}"
placeholder="🔍 Suche in Titel, Zusammenfassung, Tags..."
hx-get="/search" hx-target="#links" hx-swap="innerHTML"
hx-trigger="keyup changed delay:400ms, search"
hx-include="#searchform">
<div class="input-icon">
{{ icons.search(size=15) }}
<input type="text" name="q" value="{{ q }}"
placeholder="Suche in Titel, Zusammenfassung, Tags..."
hx-get="/search" hx-target="#links" hx-swap="innerHTML"
hx-trigger="keyup changed delay:400ms, search"
hx-include="#searchform">
</div>
<div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap;">
{% if ai_enabled %}
<label class="muted" style="display:inline-flex; align-items:center; gap:6px; font-size:.85rem;">