calendar: pin all-day events to a top strip with red stamp accent

Author: zhgchgli0718

index.html

@@ -666,6 +666,43 @@
     font-style: italic;
   }
 
+  /* === Calendar all-day strip — pinned to top of panel === */
+  .cal-allday {
+    display: flex;
+    align-items: baseline;
+    gap: 14px;
+    padding: 5px 12px 5px 10px;
+    margin-bottom: 10px;
+    background: rgba(160, 56, 46, 0.05);
+    border-left: 2px solid var(--stamp);
+    overflow: hidden;
+  }
+  .cal-allday-label {
+    font-family: 'Noto Serif TC', serif;
+    font-size: 10px;
+    letter-spacing: 0.4em;
+    color: var(--stamp);
+    flex-shrink: 0;
+    font-weight: 500;
+  }
+  .cal-allday-list {
+    font-family: 'Noto Serif TC', serif;
+    font-size: 12px;
+    color: var(--ink);
+    letter-spacing: 0.05em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    flex: 1;
+  }
+  .cal-allday-tmr {
+    color: var(--ink-faint);
+    font-style: italic;
+    margin-right: 6px;
+    font-size: 10px;
+  }
+
   /* === Calendar === */
   .cal-now {
     background: var(--bg-deep);
@@ -1534,29 +1571,45 @@
 // =================================================================
 function CalendarPanel({ data }) {
   const CAL_EVENTS = data?.calendar?.events || [];
-  const todayEvents = CAL_EVENTS.filter(e => e.day === 'today');
-  const tomorrowEvents = CAL_EVENTS.filter(e => e.day === 'tomorrow');
-  // Events without a `day` tag (fallback demo data) → treated as today.
-  const undatedEvents = CAL_EVENTS.filter(e => !e.day);
+
+  // Pull all-day events out — they live in their own strip, never in 即將.
+  const allDayEvents = CAL_EVENTS.filter(e => e.isAllDay);
+  const timedEvents = CAL_EVENTS.filter(e => !e.isAllDay);
+
+  const todayEvents = timedEvents.filter(e => e.day === 'today');
+  const tomorrowEvents = timedEvents.filter(e => e.day === 'tomorrow');
+  const undatedEvents = timedEvents.filter(e => !e.day);
   const todayLike = todayEvents.length ? todayEvents : undatedEvents;
 
-  // Featured "即將" — today's next event; if none, tomorrow's first.
   const next = todayLike[0] || tomorrowEvents[0];
   const isTomorrow = !todayLike.length && !!tomorrowEvents.length;
-  // List below — rest of the same day as the featured event.
   const rest = isTomorrow ? tomorrowEvents.slice(1) : todayLike.slice(1);
 
   const headerCount = todayLike.length || tomorrowEvents.length;
   const headerLabel = isTomorrow
-    ? `Tomorrow · ${headerCount} event${headerCount === 1 ? '' : 's'}`
-    : `Today · ${headerCount} event${headerCount === 1 ? '' : 's'}`;
+    ? `Tomorrow · ${headerCount} timed event${headerCount === 1 ? '' : 's'}`
+    : `Today · ${headerCount} timed event${headerCount === 1 ? '' : 's'}`;
 
   return (
     <div className="tab-panel-inner">
       <div className="panel-head">
         <span className="panel-title">行　事　曆</span>
         <span className="panel-title-en">{headerLabel}</span>
       </div>
+      {allDayEvents.length > 0 && (
+        <div className="cal-allday" title={allDayEvents.map(e => e.name).join(' · ')}>
+          <span className="cal-allday-label">全　日</span>
+          <span className="cal-allday-list">
+            {allDayEvents.map((e, i) => (
+              <React.Fragment key={i}>
+                {i > 0 && <span style={{color: 'var(--ink-faint)', margin: '0 6px'}}>·</span>}
+                {e.day === 'tomorrow' && <span className="cal-allday-tmr">明日</span>}
+                {e.name}
+              </React.Fragment>
+            ))}
+          </span>
+        </div>
+      )}
       {next ? (
         <div className={`cal-now ${isTomorrow ? 'is-tomorrow' : ''}`}>
           <div>
@@ -1577,14 +1630,14 @@
             )}
           </div>
         </div>
-      ) : (
+      ) : allDayEvents.length === 0 ? (
         <div className="cal-now">
           <div>
             <div className="cal-event-title">最近沒有行程</div>
             <div className="cal-event-meta">enjoy a slow day · ☕</div>
           </div>
         </div>
-      )}
+      ) : null}
       <div className="cal-list">
         {rest.map((e, i) => (
           <div className="cal-row" key={i}>