From d12c219932863be9e6160bff4db683d91e8cacfe Mon Sep 17 00:00:00 2001
From: sandydargoport <111311180+sandydargoport@users.noreply.github.com>
Date: Thu, 6 Aug 2026 14:01:44 +0000
Subject: [PATCH] feat(calendar): pin meals to the bottom of each cards-mode
 day cell

Skylight-style: events lead the cell; the day's chores, tasks, and meals form
a delineated planning group below (thin divider), with meals at the very
bottom. Previously meals rendered above the events. Applies to DayColumn (week
cards) and OverlayItemsCell (month overlay) for consistency.
---
 src/components/calendar/cells/DayColumn.tsx   | 39 +++++++++++--------
 .../calendar/cells/OverlayItemsCell.tsx       | 31 ++++++++-------
 2 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/src/components/calendar/cells/DayColumn.tsx b/src/components/calendar/cells/DayColumn.tsx
index 91103213..d6245e52 100644
--- a/src/components/calendar/cells/DayColumn.tsx
+++ b/src/components/calendar/cells/DayColumn.tsx
@@ -205,22 +205,6 @@ export function DayColumn({
         )}
       </div>
 
-      {showMeals &&
-        bucket.meals.map((meal) => (
-          <WeekItemCard
-            key={`meal-${meal.id}`}
-            variant="meal"
-            size={profile.itemSize}
-            layout={itemLayout}
-            stripeColor={mealStripeColor(meal)}
-            title={meal.name}
-            timeLabel={meal.mealType}
-            subtitle={meal.cookedBy?.name ? `Cooked by ${meal.cookedBy.name}` : undefined}
-            muted={Boolean(meal.cookedAt)}
-            dragId={disableDrop ? undefined : `meal:${meal.id}`}
-          />
-        ))}
-
       {showAllDay &&
         bucket.allDayEvents.map((event) => (
           <WeekItemCard
@@ -249,6 +233,13 @@ export function DayColumn({
           />
         ))}
 
+      {/* Skylight-style: events lead; the day's meals/chores/tasks form a
+          delineated planning group below, separated by a thin divider, with
+          meals pinned to the very bottom of the cell. */}
+      {(showChores || showTasks || showMeals) && (showAllDay || showTimed) && (
+        <div className="my-0.5 shrink-0 border-t border-border/40" aria-hidden />
+      )}
+
       {showChores &&
         bucket.chores.map((chore) => (
           <WeekItemCard
@@ -279,6 +270,22 @@ export function DayColumn({
           />
         ))}
 
+      {showMeals &&
+        bucket.meals.map((meal) => (
+          <WeekItemCard
+            key={`meal-${meal.id}`}
+            variant="meal"
+            size={profile.itemSize}
+            layout={itemLayout}
+            stripeColor={mealStripeColor(meal)}
+            title={meal.name}
+            timeLabel={meal.mealType}
+            subtitle={meal.cookedBy?.name ? `Cooked by ${meal.cookedBy.name}` : undefined}
+            muted={Boolean(meal.cookedAt)}
+            dragId={disableDrop ? undefined : `meal:${meal.id}`}
+          />
+        ))}
+
       {profile.showEmptyState && isEmpty && (
         <div className="flex flex-1 items-center justify-center rounded border border-dashed border-border/30 bg-black/10 py-3 text-[10px] text-muted-foreground">
           Nothing planned
diff --git a/src/components/calendar/cells/OverlayItemsCell.tsx b/src/components/calendar/cells/OverlayItemsCell.tsx
index 6ddfa1c6..9a252dc6 100644
--- a/src/components/calendar/cells/OverlayItemsCell.tsx
+++ b/src/components/calendar/cells/OverlayItemsCell.tsx
@@ -76,21 +76,6 @@ export function OverlayItemsCell({
 
   return (
     <div className={cn('flex flex-col gap-1', className)}>
-      {meals.map((meal) => (
-        <WeekItemCard
-          key={`meal-${meal.id}`}
-          variant="meal"
-          size={size}
-          layout={layout}
-          stripeColor={mealColor ?? mealStripeColor(meal)}
-          title={meal.name}
-          timeLabel={meal.mealType}
-          subtitle={meal.cookedBy?.name ? `Cooked by ${meal.cookedBy.name}` : undefined}
-          muted={Boolean(meal.cookedAt)}
-          dragId={enableDrag ? `meal:${meal.id}` : undefined}
-          onClick={onItemClick ? () => onItemClick({ kind: 'meal', id: meal.id }) : undefined}
-        />
-      ))}
       {chores.map((chore) => (
         <WeekItemCard
           key={`chore-${chore.id}`}
@@ -119,6 +104,22 @@ export function OverlayItemsCell({
           onClick={onItemClick ? () => onItemClick({ kind: 'task', id: task.id }) : undefined}
         />
       ))}
+      {/* Meals pinned to the bottom (Skylight-style), consistent with DayColumn. */}
+      {meals.map((meal) => (
+        <WeekItemCard
+          key={`meal-${meal.id}`}
+          variant="meal"
+          size={size}
+          layout={layout}
+          stripeColor={mealColor ?? mealStripeColor(meal)}
+          title={meal.name}
+          timeLabel={meal.mealType}
+          subtitle={meal.cookedBy?.name ? `Cooked by ${meal.cookedBy.name}` : undefined}
+          muted={Boolean(meal.cookedAt)}
+          dragId={enableDrag ? `meal:${meal.id}` : undefined}
+          onClick={onItemClick ? () => onItemClick({ kind: 'meal', id: meal.id }) : undefined}
+        />
+      ))}
     </div>
   );
 }