dca6033c40
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>
66 lines
2.3 KiB
HTML
66 lines
2.3 KiB
HTML
{% 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 }};">
|
||
{{ (link.url | domain)[:1] | upper or '?' }}
|
||
</span>
|
||
|
||
<div class="card-badges">
|
||
{% if link.category %}
|
||
<span class="badge badge-cat">{{ link.category }}</span>
|
||
{% endif %}
|
||
{% if link.manufacturer %}
|
||
<span class="badge badge-man">{{ link.manufacturer }}</span>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="card-actions">
|
||
<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">{{ 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">{{ 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?">{{ icons.trash() }}</button>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="{{ link.url }}" target="_blank" rel="noopener" class="card-title">
|
||
{{ link.title or link.url }}
|
||
</a>
|
||
|
||
<p class="card-summary">
|
||
{%- if link.summary -%}
|
||
{{ link.summary }}
|
||
{%- elif link.status == 'no_content' -%}
|
||
Inhalt konnte nicht abgerufen werden – Kategorisierung anhand der URL.
|
||
{%- endif -%}
|
||
</p>
|
||
|
||
<div class="card-spacer"></div>
|
||
|
||
{% if link.tag_list %}
|
||
<div class="card-tags">
|
||
{% for tag in link.tag_list %}
|
||
<span class="badge badge-tag">#{{ tag }}</span>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="card-foot">
|
||
<span class="card-domain" title="{{ link.url }}">{{ link.url | domain }}</span>
|
||
<span title="hinzugefügt am {{ link.created_at | datum }}">
|
||
{{ icons.clock(size=13) }} {{ link.created_at | datum }}
|
||
</span>
|
||
</div>
|
||
</div>
|