From 3bfda59fc03bf535e07961a63a9b80fedf30ecd0 Mon Sep 17 00:00:00 2001
From: Ulas Kalayci <ulas.kalayci@googlemail.com>
Date: Sun, 26 Apr 2026 09:03:45 +0200
Subject: [PATCH] fix: compact widget empty states, view transitions for
 reordering, widget body padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- widget__empty: column → row layout, icon 28→20px, padding space-5 → space-3
  saves ~40px vertical space per empty widget on mobile, keeps populated widgets
  visible above the fold
- widget__body: bottom padding space-3 → space-4 for slightly more breathing room
- rebuildList() now uses document.startViewTransition with prefers-reduced-motion
  guard; each customize-row gets a stable view-transition-name for smooth reorder
  animation without a JS animation library

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/ux-audit-plan.md       |  4 ++--
 public/pages/dashboard.js   | 18 +++++++++++++-----
 public/styles/dashboard.css | 16 ++++++++--------
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/docs/ux-audit-plan.md b/docs/ux-audit-plan.md
index 14d7e92..02cf108 100644
--- a/docs/ux-audit-plan.md
+++ b/docs/ux-audit-plan.md
@@ -47,5 +47,5 @@
 2. **Lack of Visual Feedback in Customization**: Reordering widgets in the customize modal (`rebuildList()`) happens instantly without transition, feeling jarring.
 
 ### Implementation Steps
-- [ ] **Compact Empty States (`dashboard.js`)**: Offen — `.widget__empty` hat bereits reduziertes Padding (`space-5`), aber kein echtes Row-Layout. Niedrige Priorität.
-- [ ] **Animate Widget Reordering (`dashboard.js`)**: Offen — View Transition API wäre sinnvoll, aber kein Bug. Niedrige Priorität.
+- [x] **Compact Empty States (`dashboard.css`)**: `.widget__empty` auf horizontales Row-Layout umgestellt, Icon 28→20px, Padding reduziert — spart ~40px vertikalen Platz pro leerem Widget.
+- [x] **Animate Widget Reordering (`dashboard.js`)**: `rebuildList()` nutzt nun `document.startViewTransition()` mit `prefers-reduced-motion`-Guard und `view-transition-name` je Row.
diff --git a/public/pages/dashboard.js b/public/pages/dashboard.js
index 00fa84e..5a706b9 100644
--- a/public/pages/dashboard.js
+++ b/public/pages/dashboard.js
@@ -546,7 +546,7 @@ function openCustomizeModal(currentConfig, onSave) {
       const isFirst = i === 0;
       const isLast  = i === draft.length - 1;
       return `
-        <div class="customize-row" data-id="${w.id}">
+        <div class="customize-row" data-id="${esc(w.id)}" style="view-transition-name: widget-row-${esc(w.id)}">
           <label class="customize-row__toggle">
             <input type="checkbox" class="customize-row__check" data-id="${w.id}"
                    ${w.visible ? 'checked' : ''} aria-label="${widgetLabel(w.id)}">
@@ -584,10 +584,18 @@ function openCustomizeModal(currentConfig, onSave) {
       function rebuildList() {
         const list = panel.querySelector('#customize-list');
         if (!list) return;
-        list.replaceChildren();
-        list.insertAdjacentHTML('beforeend', buildRows());
-        if (window.lucide) window.lucide.createIcons({ el: list });
-        wireRows();
+        const doRebuild = () => {
+          list.replaceChildren();
+          list.insertAdjacentHTML('beforeend', buildRows());
+          if (window.lucide) window.lucide.createIcons({ el: list });
+          wireRows();
+        };
+        const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (document.startViewTransition && !reducedMotion) {
+          document.startViewTransition(doRebuild);
+        } else {
+          doRebuild();
+        }
       }
 
       function wireRows() {
diff --git a/public/styles/dashboard.css b/public/styles/dashboard.css
index b943cb1..b6edb8e 100644
--- a/public/styles/dashboard.css
+++ b/public/styles/dashboard.css
@@ -267,25 +267,25 @@
 
 .widget__body {
   flex: 1;
-  padding: var(--space-2) var(--space-4) var(--space-3);
+  padding: var(--space-2) var(--space-4) var(--space-4);
 }
 
 .widget__empty {
-  padding: var(--space-5) var(--space-4);
-  text-align: center;
+  padding: var(--space-3) var(--space-4);
   color: var(--color-text-tertiary);
   font-size: var(--text-sm);
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
-  gap: var(--space-1);
+  gap: var(--space-2);
 }
 
 .widget__empty .empty-state__icon {
-  width: 28px;
-  height: 28px;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
   color: var(--color-text-tertiary);
-  margin-bottom: var(--space-1);
+  opacity: 0.6;
 }
 
 /* Widget hover lift (desktop) */