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>

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to Epicure are documented here. This file is mirrored in-app at `/changelog` (and in the admin dashboard) via `apps/web/lib/changelog.ts` — update both together.
 
+## 0.28.0 — 2026-07-14 14:05
+
+### Added
+- **Meal plan and shopping list header buttons now match the recipe page's icon+tooltip style** — Share, Generate shopping list, Shopping lists, Print, Export to calendar, Send to grocery delivery all collapsed to icon-only with a tooltip, instead of crowding the header with text labels.
+- **Week-switch arrows on the meal plan now sit right next to the week date**, instead of at the far end of the button row.
+
 ## 0.27.2 — 2026-07-14 13:20
 
 ### Fixed

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}

apps/web/components/meal-plan/new-shopping-list-button.tsx

@@ -9,6 +9,7 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 export function NewShoppingListButton({
   defaultWeekStart,
@@ -56,10 +57,23 @@ export function NewShoppingListButton({
 
   return (
     <>
-      <Button size="sm" onClick={openDialog} variant={defaultWeekStart ? "outline" : "default"}>
-        {defaultWeekStart ? <ShoppingCart className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
-        {defaultWeekStart ? t("generateFromThisWeek") : t("newList")}
-      </Button>
+      {defaultWeekStart ? (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger render={
+              <Button size="icon" variant="ghost" onClick={openDialog} aria-label={t("generateFromThisWeek")}>
+                <ShoppingCart className="h-4 w-4" />
+              </Button>
+            } />
+            <TooltipContent>{t("generateFromThisWeek")}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : (
+        <Button size="sm" onClick={openDialog} variant="default">
+          <Plus className="h-4 w-4" />
+          {t("newList")}
+        </Button>
+      )}
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent className="max-w-md">
           <DialogHeader><DialogTitle>{t("newListTitle")}</DialogTitle></DialogHeader>

apps/web/components/meal-plan/share-meal-plan-button.tsx

@@ -21,6 +21,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 type Role = "viewer" | "editor";
 
@@ -116,10 +117,16 @@ export function ShareMealPlanButton({ weekStart }: Props) {
 
   return (
     <>
-      <Button variant="outline" size="sm" onClick={() => handleOpenChange(true)}>
-        <UserPlus className="h-4 w-4" />
-        {tCommon("share")}
-      </Button>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger render={
+            <Button variant="ghost" size="icon" onClick={() => handleOpenChange(true)} aria-label={tCommon("share")}>
+              <UserPlus className="h-4 w-4" />
+            </Button>
+          } />
+          <TooltipContent>{tCommon("share")}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
 
       <Dialog open={open} onOpenChange={handleOpenChange}>
         <DialogContent className="sm:max-w-md">

apps/web/components/shopping-lists/grocery-export-button.tsx

@@ -11,6 +11,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import type { GroceryExportPayload } from "@/lib/grocery-export";
 import { groceryExportToText } from "@/lib/grocery-export";
 
@@ -62,12 +63,18 @@ export function GroceryExportButton({ listId, instacartEnabled }: Props) {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger render={
-        <Button variant="outline" size="sm" disabled={loading}>
-          <ShoppingBag className="h-4 w-4" />
-          {t("sendToGroceryDelivery")}
-        </Button>
-      } />
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger render={
+            <DropdownMenuTrigger render={
+              <Button variant="ghost" size="icon" disabled={loading} aria-label={t("sendToGroceryDelivery")}>
+                <ShoppingBag className="h-4 w-4" />
+              </Button>
+            } />
+          } />
+          <TooltipContent>{t("sendToGroceryDelivery")}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
       <DropdownMenuContent align="end">
         <DropdownMenuItem onClick={() => void handleCopy()}>
           <Copy className="h-4 w-4" />

apps/web/components/shopping-lists/share-shopping-list-button.tsx

@@ -23,6 +23,7 @@ import {
 } from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 type Role = "viewer" | "editor";
 
@@ -185,10 +186,16 @@ export function ShareShoppingListButton({ listId, initialIsPublic, initialPublic
 
   return (
     <>
-      <Button variant="outline" size="sm" onClick={() => handleOpenChange(true)}>
-        <UserPlus className="h-4 w-4" />
-        {tCommon("share")}
-      </Button>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger render={
+            <Button variant="ghost" size="icon" onClick={() => handleOpenChange(true)} aria-label={tCommon("share")}>
+              <UserPlus className="h-4 w-4" />
+            </Button>
+          } />
+          <TooltipContent>{tCommon("share")}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
 
       <Dialog open={open} onOpenChange={handleOpenChange}>
         <DialogContent className="sm:max-w-md">

apps/web/lib/changelog.ts

@@ -1,5 +1,5 @@
 // Mirrors CHANGELOG.md at the repo root — update both together.
-export const APP_VERSION = "0.27.2";
+export const APP_VERSION = "0.28.0";
 
 export type ChangelogEntry = {
   version: string;
@@ -11,6 +11,14 @@ export type ChangelogEntry = {
 };
 
 export const CHANGELOG: ChangelogEntry[] = [
+  {
+    version: "0.28.0",
+    date: "2026-07-14 14:05",
+    added: [
+      "**Meal plan and shopping list header buttons now match the recipe page's icon+tooltip style** — Share, Generate shopping list, Shopping lists, Print, Export to calendar, Send to grocery delivery all collapsed to icon-only with a tooltip, instead of crowding the header with text labels.",
+      "**Week-switch arrows on the meal plan now sit right next to the week date**, instead of at the far end of the button row.",
+    ],
+  },
   {
     version: "0.27.2",
     date: "2026-07-14 13:20",

apps/web/messages/en.json

@@ -856,6 +856,8 @@
     "markCookedSuccess": "Marked as cooked",
     "markCookedFailed": "Failed to mark as cooked",
     "exportCalendar": "Export to calendar",
+    "previousWeek": "Previous week",
+    "nextWeek": "Next week",
     "clearDay": "Clear day",
     "clearWeek": "Clear week",
     "clearDayConfirmTitle": "Clear {day}?",

apps/web/messages/fr.json

@@ -847,6 +847,8 @@
     "markCookedSuccess": "Marqué comme cuisiné",
     "markCookedFailed": "Échec du marquage comme cuisiné",
     "exportCalendar": "Exporter vers le calendrier",
+    "previousWeek": "Semaine précédente",
+    "nextWeek": "Semaine suivante",
     "clearDay": "Vider la journée",
     "clearWeek": "Vider la semaine",
     "clearDayConfirmTitle": "Vider {day} ?",

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicure/web",
-  "version": "0.27.2",
+  "version": "0.28.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "epicure",
-  "version": "0.27.2",
+  "version": "0.28.0",
   "private": true,
   "scripts": {
     "dev": "pnpm --filter web dev",