fix: mobile layout fixes, i18n coverage, and recipe share link
Mobile:
- Recipes search bar full-width on mobile instead of capped narrow
- Cook mode ingredients panel stacks above the step instead of
squeezing it into a narrow column
- Version history Compare/Restore buttons wrap onto their own row
- Recipe edit ingredient fields wrap instead of forcing horizontal
scroll on narrow viewports
i18n: translates remaining hardcoded strings across recipes
filter/sort, adapt-recipe and AI variations dialogs, the full
settings section (sidebar + 6 sub-pages + BYOK/model-prefs/
API-keys/webhooks managers), explore tab, collections (new/fork/
share dialogs), meal planning (planner, AI generation phases, new
shopping list, shared-plan view), photo import, recipe bulk-select
toolbar, and recipe action-button tooltips. Also fixes the recipes
page subtitle, which wasn't just unworded but missing its {count}
interpolation entirely — it always rendered as the bare word
"results" regardless of how many recipes existed.
Feature: adds a ShareRecipeButton that copies the public /r/{id}
link to the clipboard, with a notice when the recipe isn't Public
yet.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Arnaud
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { ShoppingBag, Copy, ExternalLink } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
@@ -20,12 +21,13 @@ interface Props {
|
||||
}
|
||||
|
||||
export function GroceryExportButton({ listId, instacartEnabled }: Props) {
|
||||
const t = useTranslations("shoppingLists");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
async function fetchPayload(): Promise<GroceryExportPayload | null> {
|
||||
const res = await fetch(`/api/v1/shopping-lists/${listId}/export`);
|
||||
if (!res.ok) {
|
||||
toast.error("Could not build export");
|
||||
toast.error(t("exportBuildFailed"));
|
||||
return null;
|
||||
}
|
||||
return res.json() as Promise<GroceryExportPayload>;
|
||||
@@ -37,7 +39,7 @@ export function GroceryExportButton({ listId, instacartEnabled }: Props) {
|
||||
const payload = await fetchPayload();
|
||||
if (!payload) return;
|
||||
await navigator.clipboard.writeText(groceryExportToText(payload));
|
||||
toast.success("List copied to clipboard");
|
||||
toast.success(t("copiedToClipboard"));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -48,7 +50,7 @@ export function GroceryExportButton({ listId, instacartEnabled }: Props) {
|
||||
try {
|
||||
const res = await fetch(`/api/v1/shopping-lists/${listId}/export/instacart`, { method: "POST" });
|
||||
if (!res.ok) {
|
||||
toast.error("Instacart isn't configured yet");
|
||||
toast.error(t("instacartNotConfigured"));
|
||||
return;
|
||||
}
|
||||
const { url } = await res.json() as { url: string };
|
||||
@@ -63,18 +65,18 @@ export function GroceryExportButton({ listId, instacartEnabled }: Props) {
|
||||
<DropdownMenuTrigger render={
|
||||
<Button variant="outline" size="sm" disabled={loading}>
|
||||
<ShoppingBag className="h-4 w-4" />
|
||||
Send to grocery delivery
|
||||
{t("sendToGroceryDelivery")}
|
||||
</Button>
|
||||
} />
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => void handleCopy()}>
|
||||
<Copy className="h-4 w-4" />
|
||||
Copy list as text
|
||||
{t("copyAsText")}
|
||||
</DropdownMenuItem>
|
||||
{instacartEnabled && (
|
||||
<DropdownMenuItem onClick={() => void handleInstacart()}>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
Send to Instacart
|
||||
{t("sendToInstacart")}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { UserPlus, X } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
@@ -40,6 +41,9 @@ interface Props {
|
||||
}
|
||||
|
||||
export function ShareShoppingListButton({ listId }: Props) {
|
||||
const t = useTranslations("shoppingLists");
|
||||
const ts = useTranslations("shareDialog");
|
||||
const tCommon = useTranslations("common");
|
||||
const [open, setOpen] = useState(false);
|
||||
const [email, setEmail] = useState("");
|
||||
const [role, setRole] = useState<Role>("viewer");
|
||||
@@ -55,7 +59,7 @@ export function ShareShoppingListButton({ listId }: Props) {
|
||||
const data = await res.json() as Member[];
|
||||
setMembers(data);
|
||||
} catch {
|
||||
toast.error("Could not load members");
|
||||
toast.error(ts("loadMembersFailed"));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -73,7 +77,7 @@ export function ShareShoppingListButton({ listId }: Props) {
|
||||
|
||||
async function handleInvite() {
|
||||
if (!email.trim()) {
|
||||
toast.error("Enter an email address");
|
||||
toast.error(ts("enterEmail"));
|
||||
return;
|
||||
}
|
||||
setInviting(true);
|
||||
@@ -83,14 +87,14 @@ export function ShareShoppingListButton({ listId }: Props) {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email: email.trim(), role }),
|
||||
});
|
||||
if (res.status === 409) { toast.error("Already a member"); return; }
|
||||
if (res.status === 404) { toast.error("User not found"); return; }
|
||||
if (!res.ok) { toast.error("Could not invite user"); return; }
|
||||
toast.success("Invitation sent");
|
||||
if (res.status === 409) { toast.error(ts("alreadyMember")); return; }
|
||||
if (res.status === 404) { toast.error(ts("userNotFound")); return; }
|
||||
if (!res.ok) { toast.error(ts("inviteFailed")); return; }
|
||||
toast.success(ts("invitationSent"));
|
||||
setEmail("");
|
||||
await fetchMembers();
|
||||
} catch {
|
||||
toast.error("Could not invite user");
|
||||
toast.error(ts("inviteFailed"));
|
||||
} finally {
|
||||
setInviting(false);
|
||||
}
|
||||
@@ -102,11 +106,11 @@ export function ShareShoppingListButton({ listId }: Props) {
|
||||
`/api/v1/shopping-lists/${listId}/members?memberId=${memberId}`,
|
||||
{ method: "DELETE" },
|
||||
);
|
||||
if (!res.ok) { toast.error("Could not remove member"); return; }
|
||||
if (!res.ok) { toast.error(ts("removeMemberFailed")); return; }
|
||||
setMembers((prev) => prev.filter((m) => m.id !== memberId));
|
||||
toast.success("Member removed");
|
||||
toast.success(ts("memberRemoved"));
|
||||
} catch {
|
||||
toast.error("Could not remove member");
|
||||
toast.error(ts("removeMemberFailed"));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -114,22 +118,22 @@ export function ShareShoppingListButton({ listId }: Props) {
|
||||
<>
|
||||
<Button variant="outline" size="sm" onClick={() => handleOpenChange(true)}>
|
||||
<UserPlus className="h-4 w-4" />
|
||||
Share
|
||||
{tCommon("share")}
|
||||
</Button>
|
||||
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Share shopping list</DialogTitle>
|
||||
<DialogTitle>{t("shareTitle")}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Invite household members to view or edit this list.
|
||||
{t("shareDescription")}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex gap-2 mt-2">
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Email address"
|
||||
placeholder={ts("emailPlaceholder")}
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter") void handleInvite(); }}
|
||||
@@ -140,21 +144,21 @@ export function ShareShoppingListButton({ listId }: Props) {
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="viewer">Viewer</SelectItem>
|
||||
<SelectItem value="editor">Editor</SelectItem>
|
||||
<SelectItem value="viewer">{ts("viewer")}</SelectItem>
|
||||
<SelectItem value="editor">{ts("editor")}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button onClick={() => void handleInvite()} disabled={inviting}>
|
||||
Invite
|
||||
{ts("invite")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 space-y-2">
|
||||
{loading && (
|
||||
<p className="text-sm text-muted-foreground">Loading members…</p>
|
||||
<p className="text-sm text-muted-foreground">{ts("loadingMembers")}</p>
|
||||
)}
|
||||
{!loading && members.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">No members yet.</p>
|
||||
<p className="text-sm text-muted-foreground">{ts("noMembers")}</p>
|
||||
)}
|
||||
{members.map((m) => (
|
||||
<div
|
||||
@@ -170,7 +174,7 @@ export function ShareShoppingListButton({ listId }: Props) {
|
||||
)}
|
||||
</div>
|
||||
<Badge variant={m.role === "editor" ? "default" : "secondary"}>
|
||||
{m.role}
|
||||
{ts(m.role)}
|
||||
</Badge>
|
||||
<Button
|
||||
variant="ghost"
|
||||
|
||||
@@ -26,6 +26,7 @@ type Props = {
|
||||
|
||||
export function ShoppingListsPageContent({ lists, sharedLists = [] }: Props) {
|
||||
const t = useTranslations("shoppingLists");
|
||||
const ts = useTranslations("shareDialog");
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
@@ -69,7 +70,7 @@ export function ShoppingListsPageContent({ lists, sharedLists = [] }: Props) {
|
||||
|
||||
{sharedLists.length > 0 && (
|
||||
<div className="space-y-3 max-w-lg">
|
||||
<h2 className="text-sm font-semibold text-muted-foreground">Shared with you</h2>
|
||||
<h2 className="text-sm font-semibold text-muted-foreground">{t("sharedWithYou")}</h2>
|
||||
{sharedLists.map((list) => (
|
||||
<Link
|
||||
key={list.id}
|
||||
@@ -79,7 +80,7 @@ export function ShoppingListsPageContent({ lists, sharedLists = [] }: Props) {
|
||||
<div className="space-y-1">
|
||||
<h3 className="font-semibold">{list.name}</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{list.ownerName} · {list.role}
|
||||
{list.ownerName} · {ts(list.role)}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user