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/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">