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>
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user