From 7f08dc1a0d27be44d08aa3228ece70fcd5a694bd Mon Sep 17 00:00:00 2001
From: th <th@skilleven.de>
Date: Sat, 11 Apr 2026 22:00:16 +0200
Subject: [PATCH] list view: single column with date / bucket / tags, larger
 title
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drops the multi-column compact list in favour of a one-row-per-card
layout. Each row: color dot · optional cal/fav icon · title (flex-grows
+ ellipsis) · up-to-4 tag chips with overflow indicator · bucket name +
folder icon · right-aligned date column.

Date column picks (in order): due_date → leading YYYY-MM-DD in the
title → updated_at/created_at. Termin/geburtstag tags are filtered out
of the chip list since they're already represented by the icon + dot.

Title font goes from 11px → 14px so the list reads more like a real
list than a label cloud. Rows have 8px vertical padding, hover
background, and a thin bottom-border. Whole grid is capped at 1100px
and centered.

chore: bump version to 0.9.4

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 config.php                 |  2 +-
 public/css/style.css       | 60 ++++++++++++++++++++++++++++++++++----
 public/js/modules/board.js | 21 +++++++++++--
 3 files changed, 73 insertions(+), 10 deletions(-)

diff --git a/config.php b/config.php
index 4b587d2..e2a345a 100644
--- a/config.php
+++ b/config.php
@@ -1,7 +1,7 @@
 <?php
 
 define('APP_NAME', 'hyprcrd');
-define('APP_VERSION', '0.9.3');
+define('APP_VERSION', '0.9.4');
 
 // Database path — writable directory, outside webroot
 define('DB_PATH', __DIR__ . '/data/hyprcrd.db');
diff --git a/public/css/style.css b/public/css/style.css
index 4a944cb..d12db01 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -284,13 +284,61 @@ body::after {
 .line-clamp-5 { -webkit-line-clamp: 5; }
 
 /* Superview */
-.superview-grid { column-gap: 12px; padding: 1rem 1.5rem 6rem; }
-.superview-item { padding: 3px 0; display: flex; align-items: center; gap: 6px; cursor: pointer; break-inside: avoid; transition: color 0.1s; }
-.superview-item:hover { color: var(--t-bright); }
-.superview-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
-.superview-title { font-size: 11px; color: var(--t-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* Single-column list view (toggled via #superview-toggle). Each row is
+   a flex line with: color dot · optional icon · title (flex-grows) ·
+   tag chips · bucket · date. Title ellipsizes when narrow. */
+.superview-grid { padding: 1rem 1.5rem 6rem; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 1px; }
+.superview-item {
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    transition: background 0.1s, color 0.1s;
+    border-bottom: 1px solid color-mix(in srgb, var(--t-border) 50%, transparent);
+}
+.superview-item:hover { background: color-mix(in srgb, var(--t-raised) 60%, transparent); color: var(--t-bright); }
+.superview-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.superview-icon { font-size: 14px; flex-shrink: 0; }
+.superview-title {
+    font-size: 14px;
+    color: var(--t-text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1 1 0;
+    min-width: 0;
+}
 .superview-item:hover .superview-title { color: var(--t-bright); }
-.superview-icon { font-size: 10px; flex-shrink: 0; }
+.superview-tags { display: flex; gap: 4px; flex-shrink: 0; }
+.superview-tag {
+    font-family: var(--t-font-pixel, 'Silkscreen', cursive);
+    font-size: 10px;
+    color: var(--t-accent);
+    background: color-mix(in srgb, var(--t-accent) 12%, transparent);
+    padding: 1px 6px;
+    border-radius: var(--ui-radius-tag, 2px);
+    white-space: nowrap;
+}
+.superview-tag-more { color: var(--t-dim); background: transparent; }
+.superview-bucket {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-family: var(--t-font-pixel, 'Silkscreen', cursive);
+    font-size: 10px;
+    color: var(--t-muted);
+    flex-shrink: 0;
+}
+.superview-bucket i { font-size: 12px; }
+.superview-date {
+    font-family: var(--t-font-pixel, 'Silkscreen', cursive);
+    font-size: 10px;
+    color: var(--t-dim);
+    flex-shrink: 0;
+    min-width: 80px;
+    text-align: right;
+}
 
 .board-card.preview-active { border-color: var(--t-accent) !important; box-shadow: 0 0 0 1px var(--t-accent), 0 0 12px -2px color-mix(in srgb, var(--t-accent) 30%, transparent); }
 
diff --git a/public/js/modules/board.js b/public/js/modules/board.js
index 8f69138..5095699 100644
--- a/public/js/modules/board.js
+++ b/public/js/modules/board.js
@@ -521,10 +521,9 @@ export function renderBoard() {
     const inGroup = !!state.activeGroup;
 
     if (state.superView) {
-        // Compact multi-column list view — override board grid
+        // Single-column list view — override board grid
         board.style.display = 'block';
-        const cols = cards.length <= 20 ? 2 : cards.length <= 50 ? 3 : cards.length <= 100 ? 4 : 5;
-        board.innerHTML = `<div class="superview-grid" style="column-count:${cols};">` + cards.map(c => {
+        board.innerHTML = `<div class="superview-grid">` + cards.map(c => {
             const tags = parseTags(c);
             const isTermin = tags.includes('termin') || tags.includes('geburtstag');
             let calCfg = null;
@@ -532,10 +531,26 @@ export function renderBoard() {
             const dotColor = calCfg?.color || c.color;
             const icon = isTermin ? (calCfg?.icon || 'calendar-dots') : (isFavorite(c.id) ? 'star' : null);
             const iconColor = isTermin ? dotColor : (isFavorite(c.id) ? '#fbbf24' : 'var(--t-dim)');
+            // Date column: due_date if set, else date prefix in title, else updated/created
+            const dateStr = c.due_date
+                || ((c.title || '').match(/^\d{4}-\d{2}-\d{2}/)?.[0])
+                || (c.updated_at || c.created_at || '').substring(0, 10);
+            // Tag chips (excluding termin/geburtstag — those are already
+            // represented by the icon + dot on the left)
+            const visibleTags = tags.filter(t => t !== 'termin' && t !== 'geburtstag');
+            const tagsHtml = visibleTags.length
+                ? `<span class="superview-tags">${visibleTags.slice(0, 4).map(t => `<span class="superview-tag">#${esc(t)}</span>`).join('')}${visibleTags.length > 4 ? `<span class="superview-tag superview-tag-more">+${visibleTags.length - 4}</span>` : ''}</span>`
+                : '';
+            const bucketHtml = c.bucket_name
+                ? `<span class="superview-bucket"><i class="ph ph-folder"></i>${esc(c.bucket_name)}</span>`
+                : '';
             return `<div class="superview-item" data-id="${c.id}">
                 <span class="superview-dot" style="background:${dotColor}"></span>
                 ${icon ? `<i class="ph ph-${icon} superview-icon" style="color:${iconColor}"></i>` : ''}
                 <span class="superview-title">${esc(c.title)}</span>
+                ${tagsHtml}
+                ${bucketHtml}
+                <span class="superview-date">${dateStr}</span>
             </div>`;
         }).join('') + '</div>';