From dca6033c403140e2725e078432ade9a047bf2015 Mon Sep 17 00:00:00 2001 From: Erik Thiele Date: Mon, 20 Jul 2026 22:50:52 +0200 Subject: [PATCH] Replace emoji icons with a monochrome SVG icon set MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- app/templates/_icons.html | 51 ++++++++++++++++++++++++++++++ app/templates/_link_card.html | 18 ++++++----- app/templates/_link_card_edit.html | 6 ++-- app/templates/base.html | 17 ++++++++++ app/templates/index.html | 25 +++++++++------ 5 files changed, 97 insertions(+), 20 deletions(-) create mode 100644 app/templates/_icons.html diff --git a/app/templates/_icons.html b/app/templates/_icons.html new file mode 100644 index 0000000..cb8ad39 --- /dev/null +++ b/app/templates/_icons.html @@ -0,0 +1,51 @@ +{# + Gemeinsame Icons (angelehnt an Lucide, MIT-lizenziert), inline als SVG. + Monochrom über currentColor – Farbe wird vom umgebenden Element gesetzt. + Verwendung: {% import "_icons.html" as icons %} ... {{ icons.edit() }} +#} + +{% macro base(path, size=16) -%} + +{%- endmacro %} + +{% macro grid(size=16) -%} +{{ base('', size) }} +{%- endmacro %} + +{% macro bookmark(filled=False, size=16) -%} +{{ base('', size) }} +{%- endmacro %} + +{% macro edit(size=16) -%} +{{ base('', size) }} +{%- endmacro %} + +{% macro trash(size=16) -%} +{{ base('', size) }} +{%- endmacro %} + +{% macro search(size=16) -%} +{{ base('', size) }} +{%- endmacro %} + +{% macro plus(size=16) -%} +{{ base('', size) }} +{%- endmacro %} + +{% macro alert(size=16) -%} +{{ base('', size) }} +{%- endmacro %} + +{% macro sparkles(size=16) -%} +{{ base('', size) }} +{%- endmacro %} + +{% macro clock(size=16) -%} +{{ base('', size) }} +{%- endmacro %} + +{% macro spinner(size=16) -%} +{{ base('', size) }} +{%- endmacro %} diff --git a/app/templates/_link_card.html b/app/templates/_link_card.html index f6ab1e0..5d900e9 100644 --- a/app/templates/_link_card.html +++ b/app/templates/_link_card.html @@ -1,3 +1,4 @@ +{% import "_icons.html" as icons %} @@ -58,6 +58,8 @@
{{ link.url | domain }} - {{ link.created_at | datum }} + + {{ icons.clock(size=13) }} {{ link.created_at | datum }} +
diff --git a/app/templates/_link_card_edit.html b/app/templates/_link_card_edit.html index ab4502c..da11230 100644 --- a/app/templates/_link_card_edit.html +++ b/app/templates/_link_card_edit.html @@ -1,3 +1,4 @@ +{% import "_icons.html" as icons %}
- 🕓 hinzugefügt am {{ link.created_at | datum }} + {{ icons.clock(size=13) }} hinzugefügt am {{ link.created_at | datum }}
@@ -59,7 +60,8 @@ hx-swap="outerHTML" hx-disabled-elt="this" hx-confirm="Link erneut laden und von der KI neu beschreiben lassen? Bestehende Angaben werden dabei ersetzt."> - ⏳ 🤖 KI neu beschreiben lassen + {{ icons.spinner(size=14) }} + {{ icons.sparkles(size=14) }} KI neu beschreiben lassen {% endif %}
diff --git a/app/templates/base.html b/app/templates/base.html index 5964cf1..33aa95c 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -128,6 +128,23 @@ .htmx-indicator { opacity: 0; transition: opacity .2s; } .htmx-request .htmx-indicator { opacity: 1; } .htmx-request.htmx-indicator { opacity: 1; } + + .icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; } + .icon-spin { animation: icon-spin 0.8s linear infinite; } + @keyframes icon-spin { to { transform: rotate(360deg); } } + .icon-btn { + display: inline-flex; align-items: center; justify-content: center; + width: 30px; height: 30px; padding: 0; + } + .icon-warn { color: #eab308; } + .icon-bookmark-active { color: #eab308; } + + .input-icon { position: relative; } + .input-icon > .icon { + position: absolute; left: 12px; top: 50%; transform: translateY(-50%); + color: var(--muted); pointer-events: none; + } + .input-icon > input { padding-left: 36px; } footer.app-footer { text-align: center; padding: 16px 24px; margin-top: 24px; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--border); diff --git a/app/templates/index.html b/app/templates/index.html index b1bca80..8a68662 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -1,12 +1,13 @@ {% extends "base.html" %} +{% import "_icons.html" as icons %} {% block title %}Meine Links · LinkVault{% endblock %} {% block body %}
LinkVault