feat: icon+tooltip buttons on meal-plan/shopping-list headers (v0.28.0)

Match the recipe detail page's action-row convention: Share, Generate
shopping list, Shopping lists link, Print, Export to calendar, and
Send to grocery delivery collapse to icon-only with a tooltip instead
of icon+text, freeing up header space. Week prev/next arrows moved
next to the week date instead of sitting at the end of the button row.

Note: verified via typecheck/lint only — this dev environment has no
authenticated session to visually confirm in-browser.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/app/(app)/meal-plan/page.tsx

@@ -5,6 +5,7 @@ import { ChevronLeft, ChevronRight, ShoppingCart, Printer, CalendarDays } from "
 import { auth } from "@/lib/auth/server";
 import { db, mealPlans, mealPlanMembers, recipes, userNutritionGoals, eq, and, desc } from "@epicure/db";
 import { buttonVariants } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { MealPlanner } from "@/components/meal-plan/meal-planner";
 import { ShareMealPlanButton } from "@/components/meal-plan/share-meal-plan-button";
 import { NewShoppingListButton } from "@/components/meal-plan/new-shopping-list-button";
@@ -110,10 +111,29 @@ export default async function MealPlanPage({
 
   return (
     <div className="space-y-6">
+      <TooltipProvider>
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-3xl font-bold tracking-tight">{msgs.mealPlan.title}</h1>
-          <p className="text-muted-foreground mt-1">{label}</p>
+          <div className="flex items-center gap-1 mt-1">
+            <Tooltip>
+              <TooltipTrigger render={
+                <Link href={`/meal-plan?week=${prevWeek}`} className={cn(buttonVariants({ variant: "ghost", size: "icon" }), "h-7 w-7")} aria-label={msgs.mealPlan.previousWeek}>
+                  <ChevronLeft className="h-4 w-4" />
+                </Link>
+              } />
+              <TooltipContent>{msgs.mealPlan.previousWeek}</TooltipContent>
+            </Tooltip>
+            <p className="text-muted-foreground">{label}</p>
+            <Tooltip>
+              <TooltipTrigger render={
+                <Link href={`/meal-plan?week=${nextWeek}`} className={cn(buttonVariants({ variant: "ghost", size: "icon" }), "h-7 w-7")} aria-label={msgs.mealPlan.nextWeek}>
+                  <ChevronRight className="h-4 w-4" />
+                </Link>
+              } />
+              <TooltipContent>{msgs.mealPlan.nextWeek}</TooltipContent>
+            </Tooltip>
+          </div>
         </div>
         <div className="flex flex-wrap items-center gap-2">
           <ShareMealPlanButton weekStart={weekStart} />
@@ -121,30 +141,37 @@ export default async function MealPlanPage({
             defaultWeekStart={weekStart}
             defaultName={formatMessage(msgs.mealPlan.shoppingListWeekName, { week: label })}
           />
-          <Link href="/shopping-lists" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
-            <ShoppingCart className="h-4 w-4" />
-            {msgs.mealPlan.shoppingLists}
-          </Link>
-          <Link href={`/print/meal-plan?week=${weekStart}`} target="_blank" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
-            <Printer className="h-4 w-4" />
-            {msgs.common.print}
-          </Link>
+          <Tooltip>
+            <TooltipTrigger render={
+              <Link href="/shopping-lists" className={cn(buttonVariants({ variant: "ghost", size: "icon" }))} aria-label={msgs.mealPlan.shoppingLists}>
+                <ShoppingCart className="h-4 w-4" />
+              </Link>
+            } />
+            <TooltipContent>{msgs.mealPlan.shoppingLists}</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger render={
+              <Link href={`/print/meal-plan?week=${weekStart}`} target="_blank" className={cn(buttonVariants({ variant: "ghost", size: "icon" }))} aria-label={msgs.common.print}>
+                <Printer className="h-4 w-4" />
+              </Link>
+            } />
+            <TooltipContent>{msgs.common.print}</TooltipContent>
+          </Tooltip>
           <ExportMarkdownButton
             markdown={mealPlanToMarkdown({ label, entries })}
             filename={`meal-plan-${weekStart}`}
           />
-          <a href={`/api/v1/meal-plans/${weekStart}/export/ics`} className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
-            <CalendarDays className="h-4 w-4" />
-            {msgs.mealPlan.exportCalendar}
-          </a>
-          <Link href={`/meal-plan?week=${prevWeek}`} className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
-            <ChevronLeft className="h-4 w-4" />
-          </Link>
-          <Link href={`/meal-plan?week=${nextWeek}`} className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
-            <ChevronRight className="h-4 w-4" />
-          </Link>
+          <Tooltip>
+            <TooltipTrigger render={
+              <a href={`/api/v1/meal-plans/${weekStart}/export/ics`} className={cn(buttonVariants({ variant: "ghost", size: "icon" }))} aria-label={msgs.mealPlan.exportCalendar}>
+                <CalendarDays className="h-4 w-4" />
+              </a>
+            } />
+            <TooltipContent>{msgs.mealPlan.exportCalendar}</TooltipContent>
+          </Tooltip>
         </div>
       </div>
+      </TooltipProvider>
 
       <WeeklyNutritionBar weekStart={weekStart} />
       <MealPlanner weekStart={weekStart} initialEntries={entries} userRecipes={userRecipes} hasNutritionGoals={hasNutritionGoals} />

apps/web/app/(app)/shopping-lists/[id]/page.tsx

@@ -10,6 +10,7 @@ import { ShareShoppingListButton } from "@/components/shopping-lists/share-shopp
 import { GroceryExportButton } from "@/components/shopping-lists/grocery-export-button";
 import { ShoppingListActionsMenu } from "@/components/shopping-lists/shopping-list-actions-menu";
 import { buttonVariants } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { getShoppingListAccess, canWriteShoppingList } from "@/lib/shopping-list-access";
 import { ExportMarkdownButton } from "@/components/shared/export-markdown-button";
@@ -48,15 +49,20 @@ export default async function ShoppingListPage({ params }: Params) {
             {list.generatedAt ? m.shoppingLists.fromMealPlan : ""}
           </p>
         </div>
+        <TooltipProvider>
         <div className="flex items-center gap-2 overflow-x-auto pb-0.5 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
           <GroceryExportButton listId={id} instacartEnabled={instacartEnabled} />
           {access.role === "owner" && (
             <ShareShoppingListButton listId={id} initialIsPublic={list.isPublic} initialPublicEditable={list.publicEditable} />
           )}
-          <Link href={`/print/shopping-list/${id}`} target="_blank" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
-            <Printer className="h-4 w-4" />
-            {m.common.print}
-          </Link>
+          <Tooltip>
+            <TooltipTrigger render={
+              <Link href={`/print/shopping-list/${id}`} target="_blank" className={cn(buttonVariants({ variant: "ghost", size: "icon" }))} aria-label={m.common.print}>
+                <Printer className="h-4 w-4" />
+              </Link>
+            } />
+            <TooltipContent>{m.common.print}</TooltipContent>
+          </Tooltip>
           <ExportMarkdownButton
             markdown={shoppingListToMarkdown({ name: list.name, items: list.items })}
             filename={list.name}
@@ -65,6 +71,7 @@ export default async function ShoppingListPage({ params }: Params) {
             <ShoppingListActionsMenu listId={id} name={list.name} redirectAfterDeleteTo="/shopping-lists" />
           )}
         </div>
+        </TooltipProvider>
       </div>
       <ShoppingListView
         listId={id}