day separators at anchor hour (23:00), only in week view

wwwroot/app.js

@@ -4,8 +4,7 @@ const ZOOM_LEVELS = [
   { name: '1 Monat',    weeks: 4 },
   { name: '2 Wochen',   weeks: 2 },
   { name: '1 Woche',    weeks: 1 },
-  { name: '1 Tag',      days: 1  },
+  { name: '1 Tag',      days: 1  }
-  { name: '12 Stunden', days: 0.5 },
 ];
 const WEEKLY_BUDGET = 500; // $ pro Woche
 
@@ -158,6 +157,7 @@ function renderBucketChart(buckets, bucketMinutes) {
 
   // Determine week boundaries for grouping
   let lastWeekId = null;
+  let lastDayId = null;
 
   for (let i = 0; i < BAR_COUNT; i++) {
     const b = bucketMap[i];
@@ -168,16 +168,24 @@ function renderBucketChart(buckets, bucketMinutes) {
     const bucketStart = new Date(viewFrom.getTime() + i * bucketMinutes * 60000);
     const bucketEnd   = new Date(viewFrom.getTime() + (i + 1) * bucketMinutes * 60000);
 
-    // Check if this bucket crosses into a new week
+    // Check if this bucket crosses into a new week or day
     const weekAnchor = getLastAnchor(bucketStart);
     const weekId = weekAnchor.getTime();
-    if (lastWeekId !== null && weekId !== lastWeekId) {
+    // Use local time for day boundary at anchor hour
+    const localDayStart = new Date(bucketStart);
+    localDayStart.setHours(localDayStart.getHours() - ANCHOR_HOUR);
+    const dayId = localDayStart.toLocaleDateString();
+    const isNewWeek = lastWeekId !== null && weekId !== lastWeekId;
+    const showDaySep = ZOOM_LEVELS[zoomIndex].weeks === 1;
+    const isNewDay = showDaySep && lastDayId !== null && dayId !== lastDayId && !isNewWeek;
+    if (isNewWeek || isNewDay) {
       const spacer = document.createElement('div');
-      spacer.className = 'bar-spacer';
+      spacer.className = isNewWeek ? 'bar-spacer' : 'bar-spacer day-spacer';
       chart.appendChild(spacer);
       labels.appendChild(Object.assign(document.createElement('div'), { className: 'chart-label bar-spacer' }));
     }
     lastWeekId = weekId;
+    lastDayId = dayId;
 
     const wrapper = document.createElement('div');
     wrapper.className = 'bar-wrapper';

wwwroot/style.css

@@ -97,7 +97,7 @@ header h1 { font-size: 1.1rem; font-weight: 600; color: var(--accent); }
 #chart {
   display: flex;
   align-items: flex-end;
-  gap: 1px;
+  gap: 2px;
   height: 140px;
   width: 100%;
   margin-top: 16px;
@@ -133,6 +133,7 @@ header h1 { font-size: 1.1rem; font-weight: 600; color: var(--accent); }
   width: 1px;
   background: var(--muted);
 }
+.day-spacer { width: 6px; min-width: 6px; flex: 0 0 6px; }
 #chart-labels .bar-spacer { display: none; }
 .bar-spacer.chain-spacer::before { display: none; }