arnaudne/Epicure
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile layout fixes, i18n coverage, and recipe share link

Browse Source 
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
2026-07-02 15:13:51 +02:00
parent b07bada291
commit eb424d8c04
44 changed files with 932 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/collections/fork-collection-button.tsx
+7 -4
View File
@@ -1,12 +1,15 @@
"use client";
import { useState } from "react";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { GitFork } from "lucide-react";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";
export function ForkCollectionButton({ collectionId }: { collectionId: string }) {
const t = useTranslations("collections");
const tSocial = useTranslations("social");
const [forking, setForking] = useState(false);
const router = useRouter();
@@ -16,13 +19,13 @@ export function ForkCollectionButton({ collectionId }: { collectionId: string })
const res = await fetch(`/api/v1/collections/${collectionId}/fork`, { method: "POST" });
if (!res.ok) {
const data = await res.json() as { error?: string };
throw new Error(data.error ?? "Fork failed");
throw new Error(data.error ?? t("forkFailed"));
}
const { id } = await res.json() as { id: string };
toast.success("Collection forked to your library");
toast.success(tSocial("collectionForked"));
router.push(`/collections/${id}`);
} catch (err) {
toast.error(err instanceof Error ? err.message : "Fork failed");
toast.error(err instanceof Error ? err.message : t("forkFailed"));
setForking(false);
}
}
@@ -30,7 +33,7 @@ export function ForkCollectionButton({ collectionId }: { collectionId: string })
return (
<Button variant="outline" size="sm" onClick={() => { void handleFork(); }} disabled={forking} className="gap-2 shrink-0">
<GitFork className="h-4 w-4" />
{forking ? "Forking…" : "Fork collection"}
{forking ? t("forking") : t("forkCollection")}
</Button>
);
}
apps/web/components/collections/share-collection-button.tsx
+24 -20
View File
@@ -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 ShareCollectionButton({ collectionId }: Props) {
const t = useTranslations("collections");
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 ShareCollectionButton({ collectionId }: 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 ShareCollectionButton({ collectionId }: 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 ShareCollectionButton({ collectionId }: 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 ShareCollectionButton({ collectionId }: Props) {
`/api/v1/collections/${collectionId}/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,15 +118,15 @@ export function ShareCollectionButton({ collectionId }: Props) {
<>
<Button variant="outline" size="sm" onClick={() => handleOpenChange(true)}>
<UserPlus className="h-4 w-4 mr-2" />
Share
{tCommon("share")}
</Button>
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Share collection</DialogTitle>
<DialogTitle>{t("shareTitle")}</DialogTitle>
<DialogDescription>
Invite people to view or edit this collection.
{t("shareDescription")}
</DialogDescription>
</DialogHeader>
@@ -130,7 +134,7 @@ export function ShareCollectionButton({ collectionId }: Props) {
<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(); }}
@@ -141,22 +145,22 @@ export function ShareCollectionButton({ collectionId }: 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>
{/* Members list */}
<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
@@ -172,7 +176,7 @@ export function ShareCollectionButton({ collectionId }: Props) {
)}
</div>
<Badge variant={m.role === "editor" ? "default" : "secondary"}>
{m.role}
{ts(m.role)}
</Badge>
<Button
variant="ghost"