From 593ca9009eaaf5f939e889effa251f8769c9fb63 Mon Sep 17 00:00:00 2001
From: Ulas Kalayci <ulas.kalayci@googlemail.com>
Date: Wed, 29 Apr 2026 16:42:09 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20visual=20hierarchy=20in=20dashboard=20?=
 =?UTF-8?q?=E2=80=94=20primary=20widgets=20(tasks,=20calendar)=20span=202?=
 =?UTF-8?q?=20columns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/pages/dashboard.js   | 12 +++++++++---
 public/styles/dashboard.css | 15 +++++++++++++++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/public/pages/dashboard.js b/public/pages/dashboard.js
index 14a49a1..45ff871 100644
--- a/public/pages/dashboard.js
+++ b/public/pages/dashboard.js
@@ -110,7 +110,8 @@ function showOnboarding(appContainer) {
 // Widget-Definitionen (Reihenfolge = Standard-Layout)
 // --------------------------------------------------------
 
-const WIDGET_IDS = ['weather', 'tasks', 'calendar', 'birthdays', 'budget', 'family', 'shopping', 'meals', 'notes'];
+// NEU — primäre Inhalte (tasks, calendar) ganz oben
+const WIDGET_IDS = ['tasks', 'calendar', 'weather', 'meals', 'shopping', 'birthdays', 'budget', 'family', 'notes'];
 
 const DEFAULT_WIDGET_CONFIG = WIDGET_IDS.map((id, i) => ({ id, visible: true, order: i }));
 
@@ -552,8 +553,13 @@ function renderDashboardOverview(user) {
 }
 
 function widgetTileClass(id) {
-  const wideIds = ['tasks', 'budget', 'notes', 'weather'];
-  return wideIds.includes(id) ? 'widget--wide' : '';
+  // Primär: immer 2 Spalten breit (die wichtigsten Inhalte)
+  const primaryIds = ['tasks', 'calendar'];
+  // Sekundär: 2 Spalten ab 3-Spalten-Breakpoint (1024px)
+  const secondaryIds = ['weather', 'shopping'];
+  if (primaryIds.includes(id))   return 'widget--wide';
+  if (secondaryIds.includes(id)) return 'widget--secondary';
+  return '';
 }
 
 function renderDashboardLayout(cfg, data, weather, currency) {
diff --git a/public/styles/dashboard.css b/public/styles/dashboard.css
index 96f298d..fee6fec 100644
--- a/public/styles/dashboard.css
+++ b/public/styles/dashboard.css
@@ -193,6 +193,11 @@
   .widget--wide {
     grid-column: span 2;
   }
+
+  /* Sekundäre Widgets: 2 Spalten ab 3-Spalten-Grid */
+  .widget--secondary {
+    grid-column: span 2;
+  }
 }
 
 @media (min-width: 1280px) {
@@ -205,12 +210,22 @@
     grid-column: span 2;
   }
 
+  /* Im 4-Spalten-Grid: sekundäre Widgets nur 1 Spalte */
+  .widget--secondary {
+    grid-column: span 1;
+  }
+
   /* Greeting-Widget über alle 4 Spalten */
   .widget-greeting {
     grid-column: 1 / -1;
   }
 }
 
+/* Primäre Widgets: subtile Akzentlinie oben */
+.widget-wrapper.widget--wide > .widget {
+  border-top: 2px solid var(--active-module-accent, var(--color-accent));
+}
+
 /* --------------------------------------------------------
  * Begrüßungs-Widget
  * -------------------------------------------------------- */