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:
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user