Arnaud
eb424d8c04
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>
86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useRef, useState } from "react";
|
|
import { useTranslations } from "next-intl";
|
|
import { useRouter } from "next/navigation";
|
|
import { Camera, Loader2 } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { Button } from "@/components/ui/button";
|
|
import { FakeProgressBar } from "@/components/ui/fake-progress-bar";
|
|
|
|
export function PhotoImportButton() {
|
|
const t = useTranslations("recipe");
|
|
const router = useRouter();
|
|
const fileRef = useRef<HTMLInputElement>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
function handleClick() {
|
|
fileRef.current?.click();
|
|
}
|
|
|
|
async function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
setLoading(true);
|
|
|
|
try {
|
|
const base64 = await new Promise<string>((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
const result = reader.result as string;
|
|
// Strip the data:mime/type;base64, prefix
|
|
const comma = result.indexOf(",");
|
|
resolve(comma !== -1 ? result.slice(comma + 1) : result);
|
|
};
|
|
reader.onerror = () => reject(reader.error);
|
|
reader.readAsDataURL(file);
|
|
});
|
|
|
|
const res = await fetch("/api/v1/ai/import-photo", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
imageBase64: base64,
|
|
mimeType: file.type,
|
|
}),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({})) as { error?: string };
|
|
throw new Error(data.error ?? `Request failed: ${res.status}`);
|
|
}
|
|
|
|
const { id } = await res.json() as { id: string };
|
|
router.push(`/recipes/${id}/edit`);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : t("photoImportFailed"));
|
|
} finally {
|
|
setLoading(false);
|
|
// Reset input so the same file can be re-selected
|
|
if (fileRef.current) fileRef.current.value = "";
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<input
|
|
ref={fileRef}
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/webp"
|
|
className="hidden"
|
|
onChange={handleFile}
|
|
/>
|
|
<Button onClick={handleClick} disabled={loading} variant="outline">
|
|
{loading ? (
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Camera className="mr-2 h-4 w-4" />
|
|
)}
|
|
{t("importFromPhoto")}
|
|
</Button>
|
|
<FakeProgressBar active={loading} durationMs={12000} label={loading ? t("analyzingPhoto") : undefined} />
|
|
</div>
|
|
);
|
|
}
|