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

18
app/templates/_link_card.html
View File

@@ -1,3 +1,4 @@
{% import "_icons.html" as icons %}
<div class="panel link-card {% if link.needs_review %}needs-review{% endif %}" id="link-{{ link.id }}">
<div class="card-head">
<span class="card-avatar" style="--h: {{ link.url | hue }};">
@@ -14,23 +15,22 @@
</div>
<div class="card-actions">
<button class="ghost review-toggle {% if link.needs_review %}active{% endif %}"
style="padding:3px 7px; font-size:.8rem;"
<button class="ghost icon-btn review-toggle {% if link.needs_review %}icon-bookmark-active{% endif %}"
title="{% if link.needs_review %}Nicht mehr zur Durchsicht{% else %}Zur Durchsicht markieren{% endif %}"
hx-post="/links/{{ link.id }}/toggle-review"
hx-target="#link-{{ link.id }}"
hx-swap="outerHTML">{% if link.needs_review %}🔖{% else %}🏷️{% endif %}</button>
<button class="ghost" style="padding:3px 7px; font-size:.8rem;"
hx-swap="outerHTML">{{ icons.bookmark(filled=link.needs_review) }}</button>
<button class="ghost icon-btn"
title="Bearbeiten"
hx-get="/links/{{ link.id }}/edit"
hx-target="#link-{{ link.id }}"
hx-swap="outerHTML">✎</button>
<button class="danger" style="padding:3px 6px;"
hx-swap="outerHTML">{{ icons.edit() }}</button>
<button class="danger icon-btn"
title="Löschen"
hx-delete="/links/{{ link.id }}"
hx-target="#link-{{ link.id }}"
hx-swap="outerHTML"
hx-confirm="Diesen Link wirklich löschen?">✕</button>
hx-confirm="Diesen Link wirklich löschen?">{{ icons.trash() }}</button>
</div>
</div>
@@ -58,6 +58,8 @@
<div class="card-foot">
<span class="card-domain" title="{{ link.url }}">{{ link.url | domain }}</span>
<span title="hinzugefügt am {{ link.created_at | datum }}">{{ link.created_at | datum }}</span>
<span title="hinzugefügt am {{ link.created_at | datum }}">
{{ icons.clock(size=13) }} {{ link.created_at | datum }}
</span>
</div>
</div>