From 87a04c4b277228fc5819128d97e4216feec75b76 Mon Sep 17 00:00:00 2001
From: Brummel <mould@mycelium.de>
Date: Tue, 21 Apr 2026 17:47:42 +0200
Subject: [PATCH] Refactor case display for better readability

Introduce a dedicated case-link class for clickable case titles.
Enhance the line1 div to use flexbox for better alignment of time,
title, and recordings count.
Add a separate link for recordings, improving the structure and user
experience of the case list.
---
 server/templates/my_cases.html | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/server/templates/my_cases.html b/server/templates/my_cases.html
index 06e9ed4..e43b486 100644
--- a/server/templates/my_cases.html
+++ b/server/templates/my_cases.html
@@ -20,13 +20,15 @@ section h2 .count { font-weight: normal; font-size: 0.85em; color: #888; }
 .case-row.open { border-left: 4px solid #4a90e2; }
 .case-row .check { align-self: start; padding-top: 0.25em; }
 .case-row .body { min-width: 0; }
-.case-row .body a { color: inherit; text-decoration: none; }
-.case-row .body a:hover .line1 { text-decoration: underline; }
 .case-row .body h3 { margin: 0 0 0.2em 0; font-size: 1em; font-weight: 600; }
 .case-row .body small { color: #666; font-family: monospace; font-size: 0.85em; }
 .case-row .oneliner { color: #333; margin: 0.2em 0 0; }
-.case-row .line1 { font-size: 1em; margin: 0; }
+.case-row .line1 { font-size: 1em; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25em 0.6em; }
 .case-row .line1 .time { font-family: monospace; font-weight: bold; color: #444; }
+.case-row .case-link { color: inherit; text-decoration: none; min-width: 0; }
+.case-row .case-link:hover { text-decoration: underline; }
+.case-row .recordings-link { color: #4a90e2; text-decoration: none; font-size: 0.9em; white-space: nowrap; }
+.case-row .recordings-link:hover { text-decoration: underline; }
 .case-row .preview { margin: 0.3em 0 0; color: #666; font-size: 0.9em; display: -webkit-box; -webkit-line-clamp: var(--preview-lines); line-clamp: var(--preview-lines); -webkit-box-orient: vertical; overflow: hidden; }
 .case-row .uuid { color: #999; font-family: monospace; font-size: 0.7em; margin-top: 0.2em; }
 .status-badge { display: inline-block; padding: 0.05em 0.5em; border-radius: 999px; font-size: 0.75em; font-weight: bold; color: white; }
@@ -40,7 +42,7 @@ section h2 .count { font-weight: normal; font-size: 0.85em; color: #888; }
 .case-row .actions .reopen-btn { padding: 0.3em; background: transparent; border: none; color: #888; cursor: pointer; display: inline-flex; align-items: center; line-height: 0; border-radius: 4px; transition: color 0.15s, background 0.15s; }
 .case-row .actions .reopen-btn:hover { color: #4a90e2; background: #eef4fb; }
 .case-row.closed { opacity: 0.65; background: #fafafa; }
-.case-row.closed .body a { color: #777; }
+.case-row.closed .case-link { color: #777; }
 .case-row .closed-badge { display: inline-block; margin-left: 0.5em; padding: 0.05em 0.5em; border-radius: 999px; font-size: 0.75em; font-weight: bold; background: #ddd; color: #444; }
 
 .closed-toggle { display: block; margin: 0.5em 0 1em; font-size: 0.9em; color: #4a90e2; text-decoration: none; }
@@ -95,11 +97,12 @@ try {
 <li class="case-row {% if case.is_closed %}closed{% else if case.has_document %}done{% else %}open{% endif %}">
 <div class="check"><input type="checkbox" name="case_id" value="{{ case.case_id }}"{% if case.is_closed %} disabled{% endif %}></div>
 <div class="body">
-<a href="/web/cases/{{ case.case_id }}{% if case.is_closed %}?show_closed=1{% endif %}">
-<div class="line1"><span class="time"><time datetime="{{ case.recorded_at_iso }}">{{ case.time_hms_utc }}</time></span> — {% call ol::render(case.oneliner) %} — {{ case.recordings_count }} Aufnahmen{% if case.has_failed_recording %} — <span class="status-badge fehler">Fehler</span>{% else if case.has_document %} — <span class="status-badge done">ausgewertet</span>{% else if !case.is_closed %} — <span class="status-badge open">offen</span>{% endif %}{% if case.analyzing %} <span class="label analyzing">wird analysiert</span>{% endif %}{% if case.is_closed %} <span class="closed-badge">geschlossen{% match case.days_until_purge %}{% when Some with (d) %} — wird in {{ d }} Tagen entfernt{% when None %}{% endmatch %}</span>{% endif %}</div>
+<div class="line1">
+<a class="case-link" href="/web/cases/{{ case.case_id }}{% if case.is_closed %}?show_closed=1{% endif %}"><span class="time"><time datetime="{{ case.recorded_at_iso }}">{{ case.time_hms_utc }}</time></span> — {% call ol::render(case.oneliner) %}{% if case.has_failed_recording %} — <span class="status-badge fehler">Fehler</span>{% else if case.has_document %} — <span class="status-badge done">ausgewertet</span>{% else if !case.is_closed %} — <span class="status-badge open">offen</span>{% endif %}{% if case.analyzing %} <span class="label analyzing">wird analysiert</span>{% endif %}{% if case.is_closed %} <span class="closed-badge">geschlossen{% match case.days_until_purge %}{% when Some with (d) %} — wird in {{ d }} Tagen entfernt{% when None %}{% endmatch %}</span>{% endif %}</a>
+<a class="recordings-link" href="/web/cases/{{ case.case_id }}/recordings{% if case.is_closed %}?show_closed=1{% endif %}">{{ case.recordings_count }} Aufnahmen</a>
+</div>
 {% match case.analysis_preview %}{% when Some with (preview) %}<p class="preview">{{ preview }}</p>{% when None %}{% endmatch %}
 {% if is_admin %}<div class="uuid admin-only">{{ case.case_id }}</div>{% endif %}
-</a>
 </div>
 <div class="actions">
 {% if is_admin %}<button type="submit" formaction="/web/cases/{{ case.case_id }}/analyze" class="admin-only"{% if !case.can_analyze || case.is_closed %} disabled{% endif %}>{% if case.has_document %}Neu analysieren{% else %}Analysieren{% endif %}</button>