refactor: Marker und Kommentare in die Kennzahlenzeile der Trailcard

Sie standen in einer eigenen, abgetrennten Zeile unter Laenge und
Hoehenmetern, obwohl sie dasselbe sind: eine Zahl zum Trail. Jetzt eine
Zeile, ganz rechts die offenen Meldungen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01P32KoesVtABd6xWsqMKzhr
This commit is contained in:
Daniel Michelberger 2026-09-07 22:09:41 +02:00
parent 3ba8ec4c86
commit bb0a51378f

View file

@ -148,8 +148,15 @@
</div> </div>
{/if} {/if}
<div class="flex items-center gap-4 text-sm text-muted-foreground"> <!--
<!-- Dieselben Icons wie im Kopf der Trail-Seite. --> Eine Zeile, dieselben Icons wie im Kopf der Trail-Seite:
Länge, Höhenmeter, Marker, Kommentare — und ganz rechts,
was jemanden angeht, die offenen Meldungen.
Ein Punkt markiert Bewegung der letzten zwei Wochen. Die
Zahl allein sagt nichts darüber, ob sich gerade etwas tut.
-->
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
<span class="flex items-center gap-1.5"> <span class="flex items-center gap-1.5">
<Ruler class="size-4" /> <Ruler class="size-4" />
{formatKm(version?.distance_m)} {formatKm(version?.distance_m)}
@ -158,27 +165,9 @@
<TrendingUp class="size-4" /> <TrendingUp class="size-4" />
{version?.ascent_m ? `${version.ascent_m} hm` : ''} {version?.ascent_m ? `${version.ascent_m} hm` : ''}
</span> </span>
{#if open > 0}
<span
class="flex items-center gap-1 text-amber-600 ml-auto"
use:tooltip={{
content: `${open} offene Meldung${open === 1 ? '' : 'en'}`,
}}
>
<AlertTriangle class="size-4" />
{open}
</span>
{/if}
</div>
<!--
Ein Punkt markiert Bewegung der letzten zwei Wochen. Die
Zahl allein sagt nichts darüber, ob sich gerade etwas tut.
-->
<div class="flex items-center gap-4 text-sm border-t pt-3">
<span <span
class="flex items-center gap-1.5" class="flex items-center gap-1.5"
class:text-muted-foreground={!freshMarkers} class:text-foreground={freshMarkers}
class:font-medium={freshMarkers} class:font-medium={freshMarkers}
use:tooltip={{ use:tooltip={{
content: freshMarkers content: freshMarkers
@ -194,7 +183,7 @@
</span> </span>
<span <span
class="flex items-center gap-1.5" class="flex items-center gap-1.5"
class:text-muted-foreground={!freshComments} class:text-foreground={freshComments}
class:font-medium={freshComments} class:font-medium={freshComments}
use:tooltip={{ use:tooltip={{
content: freshComments content: freshComments
@ -208,6 +197,17 @@
<span class="size-1.5 rounded-full bg-primary"></span> <span class="size-1.5 rounded-full bg-primary"></span>
{/if} {/if}
</span> </span>
{#if open > 0}
<span
class="flex items-center gap-1 text-amber-600 ml-auto"
use:tooltip={{
content: `${open} offene Meldung${open === 1 ? '' : 'en'}`,
}}
>
<AlertTriangle class="size-4" />
{open}
</span>
{/if}
</div> </div>
</CardContent> </CardContent>
</Card> </Card>