feat(ui): build responsive cookbook, editor and persistent cooking assistant
This commit is contained in:
OpenCode committed
1 parent
5d71d32e20
commit
a58516e424
29 files changed
+6430
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><rect width="512" height="512" rx="110" fill="#365747"/><path d="M157 265c-56-5-57-88-4-100 14-72 110-79 132-22 52-21 102 20 93 70-4 27-25 45-49 49v87H157z" fill="none" stroke="#faf8f4" stroke-width="18" stroke-linejoin="round"/><path d="M159 311h169M217 208v54m57-54v54" fill="none" stroke="#faf8f4" stroke-width="15" stroke-linecap="round"/><circle cx="363" cy="351" r="17" fill="#d38968"/></svg>
|
||||||
|
After Width: | Height: | Size: 486 B |
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 217 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"id": "/",
|
||||||
|
"name": "HamHam – Dein persönliches Kochbuch",
|
||||||
|
"short_name": "HamHam",
|
||||||
|
"description": "Lieblingsrezepte sammeln und entspannt kochen.",
|
||||||
|
"lang": "de",
|
||||||
|
"start_url": "/",
|
||||||
|
"scope": "/",
|
||||||
|
"display": "standalone",
|
||||||
|
"background_color": "#faf8f4",
|
||||||
|
"theme_color": "#365747",
|
||||||
|
"icons": [
|
||||||
|
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
|
||||||
|
{
|
||||||
|
"src": "/icons/icon-512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "any maskable"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" /><meta
|
||||||
|
name="theme-color"
|
||||||
|
content="#365747"
|
||||||
|
/><title>HamHam · Offline</title
|
||||||
|
><style>
|
||||||
|
body {
|
||||||
|
background: #faf8f4;
|
||||||
|
color: #253b32;
|
||||||
|
font: 16px/1.7 system-ui;
|
||||||
|
margin: 0;
|
||||||
|
padding: 50px 25px;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font: 44px Georgia;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #365747;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
margin: 12px 0;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background: #365747;
|
||||||
|
color: white;
|
||||||
|
border: 0;
|
||||||
|
padding: 14px 22px;
|
||||||
|
border-radius: 9px;
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<main>
|
||||||
|
<p>HAMHAM · DEIN KOCHBUCH</p>
|
||||||
|
<h1>Ein Moment ohne Netz.</h1>
|
||||||
|
<p>
|
||||||
|
Diese Seite ist noch nicht auf deinem Gerät gespeichert. Bereits online geöffnete Rezept- und
|
||||||
|
Kochseiten findest du hier. Für neue Rezepte und die Verwaltung brauchst du eine Verbindung.
|
||||||
|
</p>
|
||||||
|
<ul id="recipes"></ul>
|
||||||
|
<button onclick="location.reload()">Verbindung erneut prüfen</button>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
caches
|
||||||
|
.open('hamham-public-v1')
|
||||||
|
.then((c) => c.keys())
|
||||||
|
.then((keys) => {
|
||||||
|
const list = document.querySelector('#recipes');
|
||||||
|
keys
|
||||||
|
.filter((r) => new URL(r.url).pathname.startsWith('/rezepte/'))
|
||||||
|
.forEach((r) => {
|
||||||
|
let li = document.createElement('li'),
|
||||||
|
a = document.createElement('a'),
|
||||||
|
url = new URL(r.url);
|
||||||
|
a.href = r.url;
|
||||||
|
let cook = url.pathname.endsWith('/kochen');
|
||||||
|
a.textContent =
|
||||||
|
(cook ? 'Kochvorgang fortsetzen' : 'Gespeichertes Rezept öffnen') +
|
||||||
|
' · ' +
|
||||||
|
url.pathname.split('/')[2].slice(0, 8);
|
||||||
|
li.append(a);
|
||||||
|
list.append(li);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
const CACHE = 'hamham-public-v1';
|
||||||
|
async function savePage(address) {
|
||||||
|
const url = new URL(address, self.location.origin);
|
||||||
|
if (url.origin !== self.location.origin) return;
|
||||||
|
const match = /^\/rezepte\/([a-f0-9-]{36})(?:\/kochen)?$/.exec(url.pathname);
|
||||||
|
if (match) {
|
||||||
|
const recipe = await fetch(`/api/recipes/${match[1]}`).then((r) => (r.ok ? r.json() : null));
|
||||||
|
if (!recipe?.published) return;
|
||||||
|
} else if (!['/', '/favoriten', '/einkaufsliste'].includes(url.pathname)) return;
|
||||||
|
const response = await fetch(url.href, { headers: { Accept: 'text/html' } });
|
||||||
|
if (!response.ok || !response.headers.get('content-type')?.includes('text/html')) return;
|
||||||
|
const cache = await caches.open(CACHE),
|
||||||
|
html = await response.clone().text();
|
||||||
|
await cache.put(url.href, response);
|
||||||
|
const paths = [
|
||||||
|
...new Set(
|
||||||
|
Array.from(
|
||||||
|
html.matchAll(/(?:src|href)="(\/(?:_next\/static\/|images\/|icons\/|media\/)[^"<>]+)"/g),
|
||||||
|
(m) => m[1].replaceAll('&', '&'),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
];
|
||||||
|
await Promise.all(
|
||||||
|
paths.map(async (path) => {
|
||||||
|
try {
|
||||||
|
const r = await fetch(path);
|
||||||
|
if (r.ok) await cache.put(path, r);
|
||||||
|
} catch {}
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
self.addEventListener('message', (event) => {
|
||||||
|
if (event.data?.type === 'CACHE_PAGE' && typeof event.data.url === 'string')
|
||||||
|
event.waitUntil(savePage(event.data.url).catch(() => {}));
|
||||||
|
});
|
||||||
|
self.addEventListener('install', (event) => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches.open(CACHE).then((cache) => cache.addAll(['/offline.html', '/icons/icon-192.png'])),
|
||||||
|
);
|
||||||
|
self.skipWaiting();
|
||||||
|
});
|
||||||
|
self.addEventListener('activate', (event) => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches
|
||||||
|
.keys()
|
||||||
|
.then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))),
|
||||||
|
);
|
||||||
|
self.clients.claim();
|
||||||
|
});
|
||||||
|
self.addEventListener('fetch', (event) => {
|
||||||
|
const req = event.request,
|
||||||
|
url = new URL(req.url);
|
||||||
|
if (
|
||||||
|
req.method !== 'GET' ||
|
||||||
|
url.origin !== self.location.origin ||
|
||||||
|
url.pathname.startsWith('/admin') ||
|
||||||
|
url.pathname.startsWith('/api') ||
|
||||||
|
url.searchParams.has('_rsc') ||
|
||||||
|
req.headers.get('rsc')
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
const asset = /^\/(?:_next\/static\/|images\/|icons\/|media\/)/.test(url.pathname);
|
||||||
|
const recipe = /^\/rezepte\/([a-f0-9-]{36})(?:\/kochen)?$/.exec(url.pathname);
|
||||||
|
if (!asset && req.mode !== 'navigate') return;
|
||||||
|
event.respondWith(
|
||||||
|
(async () => {
|
||||||
|
const cache = await caches.open(CACHE);
|
||||||
|
if (asset) {
|
||||||
|
const cached = await cache.match(req);
|
||||||
|
if (cached) return cached;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const response = await fetch(req);
|
||||||
|
if (response.ok && asset) await cache.put(req, response.clone());
|
||||||
|
if (response.ok && recipe) {
|
||||||
|
// Never persist a draft or an administrator page. Only published recipes.
|
||||||
|
const data = await fetch(`/api/recipes/${recipe[1]}`)
|
||||||
|
.then((r) => (r.ok ? r.json() : null))
|
||||||
|
.catch(() => null);
|
||||||
|
if (data?.published) await cache.put(req, response.clone());
|
||||||
|
else await cache.delete(req);
|
||||||
|
}
|
||||||
|
return response;
|
||||||
|
} catch {
|
||||||
|
const saved =
|
||||||
|
(await cache.match(req)) ??
|
||||||
|
(req.mode === 'navigate' ? await cache.match(req, { ignoreSearch: true }) : null);
|
||||||
|
if (saved) return saved;
|
||||||
|
if (req.mode === 'navigate') return await cache.match('/offline.html');
|
||||||
|
return new Response('', { status: 503 });
|
||||||
|
}
|
||||||
|
})(),
|
||||||
|
);
|
||||||
|
});
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { admin } from '@/lib/server';
|
||||||
|
import { listRecipes } from '@/lib/repository';
|
||||||
|
import { Login, AdminDashboard } from '@/components/admin';
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
export const metadata = { title: 'Deine Küche', robots: { index: false, follow: false } };
|
||||||
|
export default async function Admin() {
|
||||||
|
const user = await admin();
|
||||||
|
return user ? (
|
||||||
|
<AdminDashboard initialRecipes={await listRecipes(true)} username={user.username} />
|
||||||
|
) : (
|
||||||
|
<Login />
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import { redirect, notFound } from 'next/navigation';
|
||||||
|
import { admin } from '@/lib/server';
|
||||||
|
import { getRecipe } from '@/lib/repository';
|
||||||
|
import { RecipeEditor } from '@/components/editor';
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
export const metadata = { title: 'Rezepteditor', robots: { index: false, follow: false } };
|
||||||
|
export default async function Edit({ params }: { params: Promise<{ id: string }> }) {
|
||||||
|
if (!(await admin())) redirect('/admin');
|
||||||
|
const { id } = await params;
|
||||||
|
if (id === 'neu') return <RecipeEditor />;
|
||||||
|
const recipe = await getRecipe(id, true);
|
||||||
|
if (!recipe) notFound();
|
||||||
|
return <RecipeEditor initial={recipe} />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
'use client';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { Check, Copy, Printer, ShoppingBasket, Trash2, ArrowRight } from 'lucide-react';
|
||||||
|
import { useLocal, toast } from '@/lib/client';
|
||||||
|
import { formatAmount, type ShoppingItem } from '@/lib/calculator';
|
||||||
|
export default function Shopping() {
|
||||||
|
const [items, setItems] = useLocal<ShoppingItem[]>('hamham:shopping', []);
|
||||||
|
const label = (i: ShoppingItem) =>
|
||||||
|
`${formatAmount(i.amount)} ${i.unit} ${i.name}${i.note ? ` (${i.note})` : ''}`.trim();
|
||||||
|
return (
|
||||||
|
<div className="container narrow">
|
||||||
|
<header className="page-heading">
|
||||||
|
<span className="eyebrow">GUT VORBEREITET SCHMECKT’S BESSER</span>
|
||||||
|
<h1>
|
||||||
|
Deine Einkaufsliste<span className="accent">.</span>
|
||||||
|
</h1>
|
||||||
|
<p>Alles an einem Ort. Passende Mengen werden automatisch zusammengezählt.</p>
|
||||||
|
</header>
|
||||||
|
{items.length ? (
|
||||||
|
<>
|
||||||
|
<div className="shopping-toolbar no-print">
|
||||||
|
<span>
|
||||||
|
{items.filter((i) => i.checked).length} von {items.length} erledigt
|
||||||
|
</span>
|
||||||
|
<div className="button-row">
|
||||||
|
<button
|
||||||
|
className="button secondary"
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(
|
||||||
|
items.map((i) => `${i.checked ? '✓' : '□'} ${label(i)}`).join('\n'),
|
||||||
|
);
|
||||||
|
toast('Einkaufsliste kopiert.');
|
||||||
|
} catch {
|
||||||
|
toast('Kopieren nicht möglich. Nutze die Druckansicht.');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Copy size={17} /> Kopieren
|
||||||
|
</button>
|
||||||
|
<button className="button secondary" onClick={() => print()}>
|
||||||
|
<Printer size={17} /> Drucken
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul className="shopping-list">
|
||||||
|
{items.map((i) => (
|
||||||
|
<li key={i.id} className={i.checked ? 'is-checked' : ''}>
|
||||||
|
<button
|
||||||
|
className="shopping-item"
|
||||||
|
onClick={() =>
|
||||||
|
setItems(items.map((x) => (x.id === i.id ? { ...x, checked: !x.checked } : x)))
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span className="check-box">{i.checked && <Check size={17} />}</span>
|
||||||
|
<span>
|
||||||
|
{i.name}
|
||||||
|
{i.note && <small>{i.note}</small>}
|
||||||
|
</span>
|
||||||
|
<strong>
|
||||||
|
{formatAmount(i.amount)} {i.unit}
|
||||||
|
</strong>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="icon-button no-print"
|
||||||
|
aria-label={`${i.name} entfernen`}
|
||||||
|
onClick={() => setItems(items.filter((x) => x.id !== i.id))}
|
||||||
|
>
|
||||||
|
<Trash2 size={16} />
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<button
|
||||||
|
className="text-button no-print"
|
||||||
|
onClick={() => setItems(items.filter((i) => !i.checked))}
|
||||||
|
>
|
||||||
|
<Trash2 size={16} /> Erledigte Zutaten entfernen
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="empty-state">
|
||||||
|
<ShoppingBasket size={45} strokeWidth={1.3} />
|
||||||
|
<h2>Platz für frische Ideen.</h2>
|
||||||
|
<p>
|
||||||
|
Füge Zutaten direkt aus einem Rezept hinzu.
|
||||||
|
<br />
|
||||||
|
Deine eingestellten Portionen werden übernommen.
|
||||||
|
</p>
|
||||||
|
<Link href="/" className="button primary">
|
||||||
|
Rezepte entdecken <ArrowRight size={18} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
'use client';
|
||||||
|
export default function ErrorPage({ reset }: { reset: () => void }) {
|
||||||
|
return (
|
||||||
|
<div className="empty-state">
|
||||||
|
<h1>Ein kleiner Küchenstopp.</h1>
|
||||||
|
<p>
|
||||||
|
Die Seite konnte nicht geladen werden. Bitte prüfe die Verbindung und versuche es erneut.
|
||||||
|
</p>
|
||||||
|
<button className="button primary" onClick={reset}>
|
||||||
|
Erneut versuchen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import { Suspense } from 'react';
|
||||||
|
import { Library } from '@/components/library';
|
||||||
|
import { listRecipes } from '@/lib/repository';
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
export const metadata = { title: 'Lieblingsrezepte' };
|
||||||
|
export default async function Favorites() {
|
||||||
|
return (
|
||||||
|
<Suspense>
|
||||||
|
<Library favoritesOnly recipes={await listRecipes()} />
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
|
}
|
||||||
+3147
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,38 @@
|
|||||||
|
import type { Metadata, Viewport } from 'next';
|
||||||
|
import '@fontsource/dm-sans/400.css';
|
||||||
|
import '@fontsource/dm-sans/500.css';
|
||||||
|
import '@fontsource/dm-sans/600.css';
|
||||||
|
import '@fontsource/dm-sans/700.css';
|
||||||
|
import '@fontsource/fraunces/400.css';
|
||||||
|
import '@fontsource/fraunces/500.css';
|
||||||
|
import './globals.css';
|
||||||
|
import { Shell } from '@/components/shell';
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: { default: 'HamHam · Zuhause schmeckt’s am besten', template: '%s · HamHam' },
|
||||||
|
description:
|
||||||
|
'Dein persönliches Kochbuch. Lieblingsrezepte sammeln, clever planen und entspannt kochen.',
|
||||||
|
manifest: '/manifest.webmanifest',
|
||||||
|
appleWebApp: { capable: true, title: 'HamHam', statusBarStyle: 'default' },
|
||||||
|
};
|
||||||
|
export const viewport: Viewport = {
|
||||||
|
width: 'device-width',
|
||||||
|
initialScale: 1,
|
||||||
|
viewportFit: 'cover',
|
||||||
|
themeColor: '#365747',
|
||||||
|
};
|
||||||
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<html lang="de" suppressHydrationWarning>
|
||||||
|
<head>
|
||||||
|
<script
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: `try{let t=JSON.parse(localStorage.getItem('hamham:theme')||'"system"');document.documentElement.dataset.theme=t==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):t}catch{}`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Shell>{children}</Shell>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
export default function Loading() {
|
||||||
|
return (
|
||||||
|
<div className="container">
|
||||||
|
<div className="skeleton skeleton-hero" />
|
||||||
|
<div className="recipe-grid">
|
||||||
|
{[1, 2, 3].map((n) => (
|
||||||
|
<div className="skeleton skeleton-card" key={n} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import Link from 'next/link';
|
||||||
|
export default function NotFound() {
|
||||||
|
return (
|
||||||
|
<div className="empty-state">
|
||||||
|
<span className="eyebrow">404 · Nicht auf der Karte</span>
|
||||||
|
<h1>Dieses Rezept ist gerade nicht da.</h1>
|
||||||
|
<p>Es wurde möglicherweise entfernt oder noch nicht veröffentlicht.</p>
|
||||||
|
<Link href="/" className="button primary">
|
||||||
|
Rezepte entdecken
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { Suspense } from 'react';
|
||||||
|
import { listRecipes } from '@/lib/repository';
|
||||||
|
import { Library } from '@/components/library';
|
||||||
|
import { db } from '@/db';
|
||||||
|
import { settings } from '@/db/schema';
|
||||||
|
import { eq } from 'drizzle-orm';
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
export default async function Home() {
|
||||||
|
const [collection] = await db.select().from(settings).where(eq(settings.key, 'household'));
|
||||||
|
return (
|
||||||
|
<Suspense>
|
||||||
|
<Library
|
||||||
|
recipes={await listRecipes()}
|
||||||
|
household={typeof collection?.value === 'string' ? collection.value : undefined}
|
||||||
|
/>
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
import { notFound } from 'next/navigation';
|
||||||
|
import { getRecipe } from '@/lib/repository';
|
||||||
|
import { admin } from '@/lib/server';
|
||||||
|
import { Cooking } from '@/components/cooking';
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
export const metadata = { title: 'Jetzt kochen' };
|
||||||
|
export default async function Cook({
|
||||||
|
params,
|
||||||
|
searchParams,
|
||||||
|
}: {
|
||||||
|
params: Promise<{ id: string }>;
|
||||||
|
searchParams: Promise<{ faktor?: string }>;
|
||||||
|
}) {
|
||||||
|
const r = await getRecipe((await params).id, !!(await admin()));
|
||||||
|
if (!r) notFound();
|
||||||
|
return <Cooking recipe={r} initialFactor={(await searchParams).faktor ?? '1'} />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import { notFound } from 'next/navigation';
|
||||||
|
import { getRecipe, listRecipes } from '@/lib/repository';
|
||||||
|
import { admin } from '@/lib/server';
|
||||||
|
import { RecipeDetail } from '@/components/recipe-detail';
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const r = await getRecipe((await params).id, !!(await admin()));
|
||||||
|
return { title: r?.title ?? 'Rezept nicht gefunden' };
|
||||||
|
}
|
||||||
|
export default async function RecipePage({ params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const r = await getRecipe((await params).id, !!(await admin()));
|
||||||
|
if (!r) notFound();
|
||||||
|
const related = (await listRecipes())
|
||||||
|
.filter((x) => x.id !== r.id)
|
||||||
|
.sort(
|
||||||
|
(a, b) =>
|
||||||
|
b.categories.filter((c) => r.categories.includes(c)).length -
|
||||||
|
a.categories.filter((c) => r.categories.includes(c)).length,
|
||||||
|
)
|
||||||
|
.slice(0, 3);
|
||||||
|
return <RecipeDetail recipe={r} related={related} />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,620 @@
|
|||||||
|
'use client';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import {
|
||||||
|
Plus,
|
||||||
|
Upload,
|
||||||
|
Download,
|
||||||
|
Pencil,
|
||||||
|
Trash2,
|
||||||
|
LogOut,
|
||||||
|
LockKeyhole,
|
||||||
|
ArrowRight,
|
||||||
|
BookOpen,
|
||||||
|
ImageIcon,
|
||||||
|
Settings,
|
||||||
|
Check,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { api, toast } from '@/lib/client';
|
||||||
|
import type { SavedRecipe, Recipe } from '@/lib/recipe';
|
||||||
|
import { renderStep, ingredientLabel } from '@/lib/calculator';
|
||||||
|
import { Dialog } from './dialog';
|
||||||
|
export function Login() {
|
||||||
|
const router = useRouter(),
|
||||||
|
[error, setError] = useState(''),
|
||||||
|
[busy, setBusy] = useState(false);
|
||||||
|
return (
|
||||||
|
<div className="login-layout">
|
||||||
|
<div className="login-story">
|
||||||
|
<span className="eyebrow">DEIN KOCHBUCH. DEINE HANDSCHRIFT.</span>
|
||||||
|
<h1>
|
||||||
|
Gute Rezepte
|
||||||
|
<br />
|
||||||
|
sind zum
|
||||||
|
<br />
|
||||||
|
<em>Behalten da.</em>
|
||||||
|
</h1>
|
||||||
|
<p>
|
||||||
|
Ein besonderer Platz für alles,
|
||||||
|
<br />
|
||||||
|
was bei euch auf den Tisch kommt.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
className="login-card"
|
||||||
|
onSubmit={async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setBusy(true);
|
||||||
|
setError('');
|
||||||
|
const data = new FormData(e.currentTarget);
|
||||||
|
try {
|
||||||
|
await api('auth/login', 'POST', Object.fromEntries(data));
|
||||||
|
router.refresh();
|
||||||
|
} catch (e) {
|
||||||
|
setError((e as Error).message);
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="note-icon">
|
||||||
|
<LockKeyhole size={24} />
|
||||||
|
</span>
|
||||||
|
<h2>Willkommen zurück.</h2>
|
||||||
|
<p className="muted">Melde dich an, um eure Sammlung zu pflegen.</p>
|
||||||
|
<label>
|
||||||
|
Benutzername
|
||||||
|
<input name="username" autoComplete="username" required autoFocus />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Passwort
|
||||||
|
<input type="password" name="password" autoComplete="current-password" required />
|
||||||
|
</label>
|
||||||
|
{error && (
|
||||||
|
<p className="error" role="alert">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<button className="button primary full" disabled={busy}>
|
||||||
|
{busy ? 'Wird angemeldet …' : 'Anmelden'}
|
||||||
|
<ArrowRight size={18} />
|
||||||
|
</button>
|
||||||
|
<p className="small muted">
|
||||||
|
Erster Besuch? Erstelle den Administrator mit der HamHam-CLI. Eine öffentliche
|
||||||
|
Registrierung gibt es nicht.
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export function AdminDashboard({
|
||||||
|
initialRecipes,
|
||||||
|
username,
|
||||||
|
}: {
|
||||||
|
initialRecipes: SavedRecipe[];
|
||||||
|
username: string;
|
||||||
|
}) {
|
||||||
|
const router = useRouter(),
|
||||||
|
[recipes, setRecipes] = useState(initialRecipes),
|
||||||
|
[tab, setTab] = useState('recipes'),
|
||||||
|
[remove, setRemove] = useState<SavedRecipe | null>(null),
|
||||||
|
[error, setError] = useState('');
|
||||||
|
useEffect(() => setRecipes(initialRecipes), [initialRecipes]);
|
||||||
|
return (
|
||||||
|
<div className="container admin-page">
|
||||||
|
<div className="admin-heading">
|
||||||
|
<div>
|
||||||
|
<span className="eyebrow">DEIN PLATZ HINTER DEN KULISSEN</span>
|
||||||
|
<h1>
|
||||||
|
Hallo, {username}
|
||||||
|
<span className="accent">.</span>
|
||||||
|
</h1>
|
||||||
|
<p className="muted">Hier wachsen eure Lieblingsrezepte.</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="button secondary"
|
||||||
|
onClick={async () => {
|
||||||
|
await api('auth/logout', 'POST');
|
||||||
|
router.refresh();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<LogOut size={17} /> Abmelden
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="admin-tabs">
|
||||||
|
{[
|
||||||
|
{ id: 'recipes', label: 'Rezepte', icon: BookOpen },
|
||||||
|
{ id: 'import', label: 'Importieren', icon: Upload },
|
||||||
|
{ id: 'media', label: 'Bilder', icon: ImageIcon },
|
||||||
|
{ id: 'settings', label: 'Einstellungen', icon: Settings },
|
||||||
|
].map((t) => (
|
||||||
|
<button key={t.id} className={tab === t.id ? 'active' : ''} onClick={() => setTab(t.id)}>
|
||||||
|
<t.icon size={18} />
|
||||||
|
{t.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{tab === 'recipes' && (
|
||||||
|
<>
|
||||||
|
<div className="section-heading">
|
||||||
|
<h2>
|
||||||
|
Deine Sammlung <span className="count-badge">{recipes.length}</span>
|
||||||
|
</h2>
|
||||||
|
<div className="button-row">
|
||||||
|
<a className="button secondary" href="/api/export">
|
||||||
|
<Download size={17} /> Alles exportieren
|
||||||
|
</a>
|
||||||
|
<Link className="button primary" href="/admin/rezepte/neu">
|
||||||
|
<Plus size={18} /> Neues Rezept
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{recipes.length ? (
|
||||||
|
<div className="admin-recipe-list">
|
||||||
|
{recipes.map((r) => (
|
||||||
|
<article key={r.id}>
|
||||||
|
<div className="admin-thumb">
|
||||||
|
{r.image ? <img src={r.image} alt="" /> : <BookOpen size={25} />}
|
||||||
|
</div>
|
||||||
|
<div className="admin-recipe-name">
|
||||||
|
<Link href={`/admin/rezepte/${r.id}`}>
|
||||||
|
<h3>{r.title}</h3>
|
||||||
|
</Link>
|
||||||
|
<span className={`status-pill ${r.published ? 'published' : ''}`}>
|
||||||
|
{r.published ? 'Veröffentlicht' : 'Entwurf'}
|
||||||
|
</span>
|
||||||
|
<small>Geändert am {new Date(r.updatedAt).toLocaleDateString('de-AT')}</small>
|
||||||
|
</div>
|
||||||
|
<div className="button-row">
|
||||||
|
<Link
|
||||||
|
className="icon-button"
|
||||||
|
aria-label={`${r.title} bearbeiten`}
|
||||||
|
href={`/admin/rezepte/${r.id}`}
|
||||||
|
>
|
||||||
|
<Pencil size={18} />
|
||||||
|
</Link>
|
||||||
|
<a
|
||||||
|
className="icon-button"
|
||||||
|
title="JSON exportieren"
|
||||||
|
aria-label={`${r.title} als JSON exportieren`}
|
||||||
|
href={`/api/export?id=${r.id}`}
|
||||||
|
>
|
||||||
|
<Download size={18} />
|
||||||
|
</a>
|
||||||
|
<a className="small text-button" href={`/api/export?id=${r.id}&format=xml`}>
|
||||||
|
XML
|
||||||
|
</a>
|
||||||
|
<button
|
||||||
|
className="icon-button danger"
|
||||||
|
aria-label={`${r.title} löschen`}
|
||||||
|
onClick={() => setRemove(r)}
|
||||||
|
>
|
||||||
|
<Trash2 size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="empty-state">
|
||||||
|
<BookOpen size={40} />
|
||||||
|
<h3>Das erste Rezept wartet auf dich.</h3>
|
||||||
|
<p>Schreibe es selbst oder importiere eine JSON- oder XML-Datei.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{tab === 'import' && (
|
||||||
|
<ImportPanel
|
||||||
|
onImported={() => {
|
||||||
|
router.refresh();
|
||||||
|
setTab('recipes');
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{tab === 'settings' && <SettingsPanel />}
|
||||||
|
{tab === 'media' && <MediaPanel />}
|
||||||
|
{remove && (
|
||||||
|
<Dialog
|
||||||
|
title="Rezept löschen?"
|
||||||
|
onClose={() => {
|
||||||
|
setRemove(null);
|
||||||
|
setError('');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h2 id="delete-title">Rezept löschen?</h2>
|
||||||
|
<p>„{remove.title}“ wird dauerhaft aus der Sammlung entfernt.</p>
|
||||||
|
{error && (
|
||||||
|
<p role="alert" className="error">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<div className="button-row">
|
||||||
|
<button
|
||||||
|
autoFocus
|
||||||
|
className="button secondary"
|
||||||
|
onClick={() => {
|
||||||
|
setRemove(null);
|
||||||
|
setError('');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="button danger-solid"
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
await api(`recipes/${remove.id}`, 'DELETE');
|
||||||
|
setRecipes(recipes.filter((r) => r.id !== remove.id));
|
||||||
|
setRemove(null);
|
||||||
|
toast('Rezept gelöscht.');
|
||||||
|
} catch (e) {
|
||||||
|
setError((e as Error).message);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Endgültig löschen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Dialog>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
function ImportPanel({ onImported }: { onImported: () => void }) {
|
||||||
|
const [format, setFormat] = useState<'json' | 'xml'>('json'),
|
||||||
|
[raw, setRaw] = useState(''),
|
||||||
|
[preview, setPreview] = useState<(Recipe & { duplicate: boolean })[] | null>(null),
|
||||||
|
[error, setError] = useState(''),
|
||||||
|
[busy, setBusy] = useState(false);
|
||||||
|
async function process(isPreview: boolean) {
|
||||||
|
setBusy(true);
|
||||||
|
setError('');
|
||||||
|
try {
|
||||||
|
const result = await api<(Recipe & { duplicate: boolean })[]>('import', 'POST', {
|
||||||
|
raw,
|
||||||
|
format,
|
||||||
|
preview: isPreview,
|
||||||
|
});
|
||||||
|
if (isPreview) setPreview(result);
|
||||||
|
else {
|
||||||
|
toast(`${result.length} Rezept(e) importiert.`);
|
||||||
|
onImported();
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setError((e as Error).message);
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<section className="import-panel">
|
||||||
|
<div className="section-heading">
|
||||||
|
<div>
|
||||||
|
<h2>Ein neues Rezept zieht ein.</h2>
|
||||||
|
<p className="muted">JSON oder XML einfügen, prüfen und in deine Sammlung aufnehmen.</p>
|
||||||
|
</div>
|
||||||
|
<a className="text-button" href="/examples/pljeskavica.json" download>
|
||||||
|
<Download size={17} /> JSON-Vorlage
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="import-controls">
|
||||||
|
<label>
|
||||||
|
Importformat
|
||||||
|
<select
|
||||||
|
value={format}
|
||||||
|
onChange={(e) => {
|
||||||
|
setFormat(e.target.value as 'json' | 'xml');
|
||||||
|
setPreview(null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value="json">JSON · Version 1</option>
|
||||||
|
<option value="xml">XML · Version 1</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label className="upload-area">
|
||||||
|
<Upload size={23} />
|
||||||
|
<span>Datei auswählen · maximal 2 MB</span>
|
||||||
|
<input
|
||||||
|
aria-label="Importdatei"
|
||||||
|
type="file"
|
||||||
|
accept=".json,.xml"
|
||||||
|
onChange={async (e) => {
|
||||||
|
const file = e.target.files?.[0];
|
||||||
|
if (!file) return;
|
||||||
|
if (file.size > 2 * 1024 * 1024) {
|
||||||
|
setError('Datei ist größer als 2 MB.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setRaw(await file.text());
|
||||||
|
setFormat(file.name.toLowerCase().endsWith('.xml') ? 'xml' : 'json');
|
||||||
|
setPreview(null);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<label>
|
||||||
|
Rezeptdaten
|
||||||
|
<textarea
|
||||||
|
className="code-input"
|
||||||
|
rows={12}
|
||||||
|
value={raw}
|
||||||
|
onChange={(e) => {
|
||||||
|
setRaw(e.target.value);
|
||||||
|
setPreview(null);
|
||||||
|
}}
|
||||||
|
placeholder={
|
||||||
|
format === 'json'
|
||||||
|
? '{ "version": 1, "recipes": […] }'
|
||||||
|
: '<hamham version="1">…</hamham>'
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
{error && (
|
||||||
|
<pre className="error" role="alert">
|
||||||
|
{error}
|
||||||
|
</pre>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
className="button primary"
|
||||||
|
disabled={busy || !raw.trim()}
|
||||||
|
onClick={() => process(true)}
|
||||||
|
>
|
||||||
|
<Check size={18} /> {busy ? 'Wird geprüft …' : 'Importvorschau prüfen'}
|
||||||
|
</button>
|
||||||
|
{preview && (
|
||||||
|
<div className="import-preview">
|
||||||
|
<h2>Vor dem Einräumen.</h2>
|
||||||
|
{preview.map((r, n) => (
|
||||||
|
<article key={n} className="panel">
|
||||||
|
<div className="section-heading">
|
||||||
|
<h3>{r.title}</h3>
|
||||||
|
<span className={r.duplicate ? 'error' : 'status-pill published'}>
|
||||||
|
{r.duplicate
|
||||||
|
? 'Duplikat – Import gesperrt'
|
||||||
|
: r.published
|
||||||
|
? 'Wird veröffentlicht'
|
||||||
|
: 'Wird als Entwurf importiert'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p>{r.description}</p>
|
||||||
|
<div className="preview-columns">
|
||||||
|
<ul>
|
||||||
|
{r.ingredients.map((i) => (
|
||||||
|
<li key={i.id}>{ingredientLabel(i, '1')}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<ol>
|
||||||
|
{r.steps.map((s) => (
|
||||||
|
<li key={s.id}>{renderStep(s.text, r, '1')}</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
<button
|
||||||
|
className="button primary"
|
||||||
|
disabled={busy || preview.some((r) => r.duplicate)}
|
||||||
|
onClick={() => process(false)}
|
||||||
|
>
|
||||||
|
<Upload size={18} /> {preview.length} Rezept(e) jetzt importieren
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
function SettingsPanel() {
|
||||||
|
const [settings, setSettings] = useState<{
|
||||||
|
categories: string[];
|
||||||
|
tags: string[];
|
||||||
|
household: string;
|
||||||
|
} | null>(null),
|
||||||
|
[error, setError] = useState('');
|
||||||
|
useEffect(() => {
|
||||||
|
api<typeof settings>('settings')
|
||||||
|
.then(setSettings)
|
||||||
|
.catch((e) => setError(e.message));
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<div className="settings-grid">
|
||||||
|
<form
|
||||||
|
className="panel"
|
||||||
|
onSubmit={async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
try {
|
||||||
|
const fd = new FormData(e.currentTarget);
|
||||||
|
const data = {
|
||||||
|
household: fd.get('household'),
|
||||||
|
categories: String(fd.get('categories'))
|
||||||
|
.split('\n')
|
||||||
|
.map((s) => s.trim())
|
||||||
|
.filter(Boolean),
|
||||||
|
tags: String(fd.get('tags'))
|
||||||
|
.split('\n')
|
||||||
|
.map((s) => s.trim())
|
||||||
|
.filter(Boolean),
|
||||||
|
};
|
||||||
|
await api('settings', 'PUT', data);
|
||||||
|
toast('Einstellungen gespeichert.');
|
||||||
|
} catch (e) {
|
||||||
|
setError((e as Error).message);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h2>Deine Küche</h2>
|
||||||
|
{settings && (
|
||||||
|
<>
|
||||||
|
<label>
|
||||||
|
Name der Sammlung
|
||||||
|
<input name="household" defaultValue={settings.household} required maxLength={80} />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Kategorien · eine pro Zeile
|
||||||
|
<textarea name="categories" rows={6} defaultValue={settings.categories.join('\n')} />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Tags · einer pro Zeile
|
||||||
|
<textarea name="tags" rows={6} defaultValue={settings.tags.join('\n')} />
|
||||||
|
</label>
|
||||||
|
<p className="small muted">
|
||||||
|
Die Auswahllisten gelten für den Editor. Bereits zugeordnete Begriffe bleiben in
|
||||||
|
Rezepten erhalten und können dort geändert werden.
|
||||||
|
</p>
|
||||||
|
<button className="button primary">Einstellungen speichern</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
<form
|
||||||
|
className="panel"
|
||||||
|
onSubmit={async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const form = e.currentTarget;
|
||||||
|
try {
|
||||||
|
await api('auth/password', 'POST', Object.fromEntries(new FormData(form)));
|
||||||
|
form.reset();
|
||||||
|
toast('Passwort geändert. Andere Sitzungen wurden beendet.');
|
||||||
|
} catch (e) {
|
||||||
|
setError((e as Error).message);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h2>Passwort ändern</h2>
|
||||||
|
<label>
|
||||||
|
Aktuelles Passwort
|
||||||
|
<input name="current" type="password" autoComplete="current-password" required />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Neues Passwort
|
||||||
|
<input
|
||||||
|
name="password"
|
||||||
|
type="password"
|
||||||
|
autoComplete="new-password"
|
||||||
|
minLength={12}
|
||||||
|
maxLength={200}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<p className="small muted">
|
||||||
|
Mindestens 12 Zeichen. Alle anderen aktiven Sitzungen werden abgemeldet.
|
||||||
|
</p>
|
||||||
|
<button className="button primary">Passwort ändern</button>
|
||||||
|
{error && (
|
||||||
|
<p className="error" role="alert">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export async function uploadImage(file: File) {
|
||||||
|
if (file.size > 10 * 1024 * 1024) throw new Error('Bild darf höchstens 10 MB groß sein.');
|
||||||
|
const response = await fetch('/api/media', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': file.type },
|
||||||
|
body: file,
|
||||||
|
});
|
||||||
|
const result = await response.json();
|
||||||
|
if (!response.ok) throw new Error(result.error);
|
||||||
|
return result.url as string;
|
||||||
|
}
|
||||||
|
function MediaPanel() {
|
||||||
|
const [images, setImages] = useState<string[]>([]),
|
||||||
|
[error, setError] = useState(''),
|
||||||
|
[remove, setRemove] = useState('');
|
||||||
|
useEffect(() => {
|
||||||
|
api<string[]>('media')
|
||||||
|
.then(setImages)
|
||||||
|
.catch((e) => setError(e.message));
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<div className="section-heading">
|
||||||
|
<h2>Deine Bilder</h2>
|
||||||
|
<label className="button secondary">
|
||||||
|
<Upload size={18} /> Hochladen
|
||||||
|
<input
|
||||||
|
className="visually-hidden"
|
||||||
|
type="file"
|
||||||
|
accept="image/jpeg,image/png,image/webp"
|
||||||
|
onChange={async (e) => {
|
||||||
|
const f = e.target.files?.[0];
|
||||||
|
if (f)
|
||||||
|
try {
|
||||||
|
const url = await uploadImage(f);
|
||||||
|
setImages([...images, url]);
|
||||||
|
} catch (e) {
|
||||||
|
setError((e as Error).message);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<p className="muted">
|
||||||
|
Bilder werden lokal gespeichert, neu als WebP kodiert und von Metadaten befreit. Verwendete
|
||||||
|
Bilder können nicht gelöscht werden.
|
||||||
|
</p>
|
||||||
|
{error && (
|
||||||
|
<p className="error" role="alert">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<div className="media-grid">
|
||||||
|
{images.map((src) => (
|
||||||
|
<article className="panel" key={src}>
|
||||||
|
<img src={src} alt="Hochgeladenes Rezeptbild" />
|
||||||
|
<button
|
||||||
|
className="text-button"
|
||||||
|
onClick={async () => {
|
||||||
|
await navigator.clipboard.writeText(src);
|
||||||
|
toast('Bildpfad kopiert.');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Bildpfad kopieren
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="icon-button danger"
|
||||||
|
aria-label="Bild löschen"
|
||||||
|
onClick={() => setRemove(src)}
|
||||||
|
>
|
||||||
|
<Trash2 size={17} />
|
||||||
|
</button>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{images.length === 0 && (
|
||||||
|
<div className="empty-state">
|
||||||
|
<ImageIcon size={40} />
|
||||||
|
<h3>Dein Rezept verdient ein schönes Bild.</h3>
|
||||||
|
<p>Lade ein erstes Foto hoch oder füge es direkt im Rezepteditor hinzu.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{remove && (
|
||||||
|
<Dialog title="Bild endgültig löschen?" onClose={() => setRemove('')}>
|
||||||
|
<h2>Bild endgültig löschen?</h2>
|
||||||
|
<div className="button-row">
|
||||||
|
<button autoFocus className="button secondary" onClick={() => setRemove('')}>
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="button danger-solid"
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
await api('media', 'DELETE', { name: remove.split('/').pop() });
|
||||||
|
setImages(images.filter((i) => i !== remove));
|
||||||
|
} catch (e) {
|
||||||
|
setError((e as Error).message);
|
||||||
|
}
|
||||||
|
setRemove('');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Löschen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Dialog>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,359 @@
|
|||||||
|
'use client';
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { motion, AnimatePresence } from 'motion/react';
|
||||||
|
import {
|
||||||
|
ArrowLeft,
|
||||||
|
ArrowRight,
|
||||||
|
Check,
|
||||||
|
ChefHat,
|
||||||
|
Clock3,
|
||||||
|
Pause,
|
||||||
|
Play,
|
||||||
|
RotateCcw,
|
||||||
|
Sun,
|
||||||
|
Volume2,
|
||||||
|
X,
|
||||||
|
PartyPopper,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import Decimal from 'decimal.js';
|
||||||
|
import type { SavedRecipe } from '@/lib/recipe';
|
||||||
|
import { renderStep, ingredientLabel, formatAmount, positive } from '@/lib/calculator';
|
||||||
|
import {
|
||||||
|
type CookingProgress,
|
||||||
|
type TimerState,
|
||||||
|
remainingMs,
|
||||||
|
startTimer,
|
||||||
|
pauseTimer,
|
||||||
|
} from '@/lib/cooking';
|
||||||
|
import { useLocal, toast } from '@/lib/client';
|
||||||
|
export function Cooking({
|
||||||
|
recipe: r,
|
||||||
|
initialFactor,
|
||||||
|
}: {
|
||||||
|
recipe: SavedRecipe;
|
||||||
|
initialFactor: string;
|
||||||
|
}) {
|
||||||
|
let safeFactor = '1';
|
||||||
|
try {
|
||||||
|
safeFactor = positive(initialFactor).toString();
|
||||||
|
} catch {}
|
||||||
|
const blank = (): CookingProgress => ({
|
||||||
|
revision: r.updatedAt,
|
||||||
|
step: 0,
|
||||||
|
factor: safeFactor,
|
||||||
|
checked: [],
|
||||||
|
timers: {},
|
||||||
|
startedAt: Date.now(),
|
||||||
|
finishedAt: null,
|
||||||
|
});
|
||||||
|
const [state, setState, ready] = useLocal<CookingProgress>(`hamham:cook:${r.id}`, blank());
|
||||||
|
const [now, setNow] = useState(Date.now()),
|
||||||
|
[wake, setWake] = useState(false),
|
||||||
|
[sound, setSound] = useState(false),
|
||||||
|
[showIngredients, setShowIngredients] = useState(false);
|
||||||
|
const audio = useRef<AudioContext | null>(null);
|
||||||
|
useEffect(() => {
|
||||||
|
const id = setInterval(() => setNow(Date.now()), 250);
|
||||||
|
return () => clearInterval(id);
|
||||||
|
}, []);
|
||||||
|
useEffect(() => {
|
||||||
|
if (!ready) return;
|
||||||
|
if (state.revision !== r.updatedAt || state.step > r.steps.length) {
|
||||||
|
setState(blank());
|
||||||
|
toast('Das Rezept wurde aktualisiert. Der Kochmodus startet mit der neuen Fassung.');
|
||||||
|
}
|
||||||
|
}, [ready, r.updatedAt]);
|
||||||
|
useEffect(() => {
|
||||||
|
let lock: WakeLockSentinel | undefined,
|
||||||
|
disposed = false;
|
||||||
|
const acquire = async () => {
|
||||||
|
if ('wakeLock' in navigator && document.visibilityState === 'visible')
|
||||||
|
try {
|
||||||
|
const acquired = await navigator.wakeLock.request('screen');
|
||||||
|
if (disposed) {
|
||||||
|
await acquired.release();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
lock = acquired;
|
||||||
|
setWake(true);
|
||||||
|
lock.addEventListener('release', () => setWake(false));
|
||||||
|
} catch {
|
||||||
|
setWake(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
void acquire();
|
||||||
|
document.addEventListener('visibilitychange', acquire);
|
||||||
|
return () => {
|
||||||
|
disposed = true;
|
||||||
|
document.removeEventListener('visibilitychange', acquire);
|
||||||
|
void lock?.release();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
useEffect(() => {
|
||||||
|
if (!ready) return;
|
||||||
|
for (const [id, timer] of Object.entries(state.timers))
|
||||||
|
if (timer.endAt && remainingMs(timer, now) === 0 && !timer.notified) {
|
||||||
|
setState((s) => ({ ...s, timers: { ...s.timers, [id]: { ...timer, notified: true } } }));
|
||||||
|
const label = r.steps.flatMap((s) => s.timers).find((t) => t.id === id)?.label ?? 'Timer';
|
||||||
|
toast(`${label} ist fertig!`);
|
||||||
|
if (sound && audio.current) {
|
||||||
|
const ctx = audio.current;
|
||||||
|
const oscillator = ctx.createOscillator(),
|
||||||
|
gain = ctx.createGain();
|
||||||
|
oscillator.connect(gain);
|
||||||
|
gain.connect(ctx.destination);
|
||||||
|
oscillator.frequency.value = 880;
|
||||||
|
gain.gain.setValueAtTime(0.18, ctx.currentTime);
|
||||||
|
gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 1.5);
|
||||||
|
oscillator.start();
|
||||||
|
oscillator.stop(ctx.currentTime + 1.5);
|
||||||
|
}
|
||||||
|
navigator.vibrate?.([200, 100, 200]);
|
||||||
|
}
|
||||||
|
}, [now, ready, state.timers, sound, r.steps, setState]);
|
||||||
|
function updateTimer(id: string, timer: TimerState) {
|
||||||
|
setState((s) => ({ ...s, timers: { ...s.timers, [id]: timer } }));
|
||||||
|
}
|
||||||
|
const timers = r.steps.flatMap((s) => s.timers),
|
||||||
|
current = r.steps[Math.min(state.step, r.steps.length - 1)],
|
||||||
|
finished = state.step === r.steps.length;
|
||||||
|
if (!ready) return <div className="skeleton skeleton-hero" />;
|
||||||
|
return (
|
||||||
|
<div className="cooking-shell">
|
||||||
|
<header className="cooking-header">
|
||||||
|
<Link className="brand" href="/">
|
||||||
|
<ChefHat size={25} />
|
||||||
|
HamHam<span className="brand-dot">.</span>
|
||||||
|
</Link>
|
||||||
|
<span className="cooking-recipe-title">{r.title}</span>
|
||||||
|
<Link
|
||||||
|
href={`/rezepte/${r.id}`}
|
||||||
|
className="button secondary"
|
||||||
|
title="Fortschritt und Timer werden gespeichert"
|
||||||
|
>
|
||||||
|
<Pause size={17} />
|
||||||
|
<span>Unterbrechen</span>
|
||||||
|
</Link>
|
||||||
|
</header>
|
||||||
|
<div className="cooking-tools">
|
||||||
|
<span>
|
||||||
|
<span className="live-dot" /> KÜCHENMODUS
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
className={sound ? 'active' : ''}
|
||||||
|
onClick={() => {
|
||||||
|
if (!audio.current) audio.current = new AudioContext();
|
||||||
|
void audio.current.resume();
|
||||||
|
setSound(!sound);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Volume2 size={17} /> Ton {sound ? 'an' : 'aus'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
aria-label="Kochmodus Theme wechseln"
|
||||||
|
onClick={() => {
|
||||||
|
document.documentElement.dataset.theme =
|
||||||
|
document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Sun size={17} /> Licht
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{finished ? (
|
||||||
|
<section className="cooking-complete">
|
||||||
|
<span className="completion-icon">
|
||||||
|
<PartyPopper size={54} strokeWidth={1.2} />
|
||||||
|
</span>
|
||||||
|
<span className="eyebrow">GESCHAFFT. JETZT WIRD GENOSSEN.</span>
|
||||||
|
<h1>Guten Appetit!</h1>
|
||||||
|
<p>
|
||||||
|
{r.title}
|
||||||
|
<br />
|
||||||
|
{formatAmount(new Decimal(r.servings).mul(state.factor))} Portionen voller Vorfreude.
|
||||||
|
</p>
|
||||||
|
<p className="muted">
|
||||||
|
{r.steps.length} Schritte ·{' '}
|
||||||
|
{Math.max(1, Math.round(((state.finishedAt ?? now) - state.startedAt) / 60000))} Minuten
|
||||||
|
seit Kochbeginn
|
||||||
|
</p>
|
||||||
|
<div className="button-row">
|
||||||
|
<Link className="button primary" href={`/rezepte/${r.id}`}>
|
||||||
|
Zurück zum Rezept <ArrowRight size={18} />
|
||||||
|
</Link>
|
||||||
|
<button className="button secondary" onClick={() => setState(blank())}>
|
||||||
|
<RotateCcw size={18} /> Erneut kochen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="cooking-progress">
|
||||||
|
<div>
|
||||||
|
<span>
|
||||||
|
Schritt <strong>{state.step + 1}</strong> von {r.steps.length}
|
||||||
|
</span>
|
||||||
|
<span>{formatAmount(new Decimal(r.servings).mul(state.factor))} Portionen</span>
|
||||||
|
</div>
|
||||||
|
<div className="progress-track">
|
||||||
|
<span style={{ width: `${(state.step / r.steps.length) * 100}%` }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{state.step === 0 && state.factor !== safeFactor && (
|
||||||
|
<div className="notice">
|
||||||
|
Dein gespeicherter Kochvorgang wurde fortgesetzt.{' '}
|
||||||
|
<button onClick={() => setState(blank())}>Mit neuer Portionszahl starten</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<AnimatePresence mode="wait">
|
||||||
|
<motion.section
|
||||||
|
className="cooking-step"
|
||||||
|
key={current.id}
|
||||||
|
initial={{ opacity: 0, x: 10 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.18 }}
|
||||||
|
>
|
||||||
|
<span className="eyebrow">JETZT GEHT’S ANS KOCHEN</span>
|
||||||
|
<h1>{current.title || `Schritt ${state.step + 1}`}</h1>
|
||||||
|
<p className="cooking-instruction">{renderStep(current.text, r, state.factor)}</p>
|
||||||
|
<div className="step-ingredients">
|
||||||
|
{current.ingredients.map((id) => {
|
||||||
|
const i = r.ingredients.find((i) => i.id === id)!;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className={state.checked.includes(id) ? 'checked' : ''}
|
||||||
|
key={id}
|
||||||
|
onClick={() =>
|
||||||
|
setState((s) => ({
|
||||||
|
...s,
|
||||||
|
checked: s.checked.includes(id)
|
||||||
|
? s.checked.filter((x) => x !== id)
|
||||||
|
: [...s.checked, id],
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span className="check-box">
|
||||||
|
{state.checked.includes(id) && <Check size={15} />}
|
||||||
|
</span>
|
||||||
|
{ingredientLabel(i, state.factor)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
</AnimatePresence>
|
||||||
|
<section className="timer-grid" aria-label="Küchentimer">
|
||||||
|
{timers
|
||||||
|
.filter((t) => current.timers.some((x) => x.id === t.id) || state.timers[t.id])
|
||||||
|
.map((t) => {
|
||||||
|
const timer = state.timers[t.id] ?? { remaining: t.seconds * 1000, endAt: null },
|
||||||
|
remaining = remainingMs(timer, now),
|
||||||
|
seconds = Math.ceil(remaining / 1000);
|
||||||
|
return (
|
||||||
|
<div className={`timer-card ${remaining === 0 ? 'timer-done' : ''}`} key={t.id}>
|
||||||
|
<Clock3 size={24} />
|
||||||
|
<div>
|
||||||
|
<span>{t.label}</span>
|
||||||
|
<strong role="timer">
|
||||||
|
{remaining === 0
|
||||||
|
? 'Fertig!'
|
||||||
|
: `${Math.floor(seconds / 60)
|
||||||
|
.toString()
|
||||||
|
.padStart(2, '0')}:${(seconds % 60).toString().padStart(2, '0')}`}
|
||||||
|
</strong>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="icon-button"
|
||||||
|
aria-label={`${t.label} ${timer.endAt && remaining > 0 ? 'pausieren' : 'starten'}`}
|
||||||
|
onClick={() =>
|
||||||
|
updateTimer(
|
||||||
|
t.id,
|
||||||
|
timer.endAt && remaining > 0
|
||||||
|
? pauseTimer(timer)
|
||||||
|
: startTimer(
|
||||||
|
remaining > 0
|
||||||
|
? { ...timer, remaining }
|
||||||
|
: { remaining: t.seconds * 1000, endAt: null },
|
||||||
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{timer.endAt && remaining > 0 ? <Pause size={22} /> : <Play size={22} />}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="icon-button"
|
||||||
|
aria-label={`${t.label} zurücksetzen`}
|
||||||
|
onClick={() =>
|
||||||
|
updateTimer(t.id, { remaining: t.seconds * 1000, endAt: null })
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<RotateCcw size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</section>
|
||||||
|
<div className="cooking-bottom-actions">
|
||||||
|
<button className="text-button" onClick={() => setShowIngredients(!showIngredients)}>
|
||||||
|
Alle Zutaten {showIngredients ? 'ausblenden' : 'anzeigen'}
|
||||||
|
</button>
|
||||||
|
<span className="small muted">
|
||||||
|
{wake ? 'Bildschirm bleibt wach' : 'Bildschirmsperre bei Bedarf manuell deaktivieren'}{' '}
|
||||||
|
· Automatisch gespeichert
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{showIngredients && (
|
||||||
|
<ul className="cooking-all-ingredients">
|
||||||
|
{r.ingredients.map((i) => (
|
||||||
|
<li key={i.id}>{ingredientLabel(i, state.factor)}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
<nav className="cooking-navigation">
|
||||||
|
<button
|
||||||
|
className="button secondary"
|
||||||
|
disabled={state.step === 0}
|
||||||
|
onClick={() => setState((s) => ({ ...s, step: Math.max(0, s.step - 1) }))}
|
||||||
|
>
|
||||||
|
<ArrowLeft size={21} /> Zurück
|
||||||
|
</button>
|
||||||
|
<span>
|
||||||
|
{String(state.step + 1).padStart(2, '0')} / {String(r.steps.length).padStart(2, '0')}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
className="button primary"
|
||||||
|
onClick={() =>
|
||||||
|
setState((s) => ({
|
||||||
|
...s,
|
||||||
|
step: s.step + 1,
|
||||||
|
finishedAt: s.step + 1 === r.steps.length ? Date.now() : null,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{state.step === r.steps.length - 1 ? 'Fertig gekocht' : 'Nächster Schritt'}
|
||||||
|
<ArrowRight size={21} />
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{finished &&
|
||||||
|
timers.some(
|
||||||
|
(t) => state.timers[t.id]?.endAt && remainingMs(state.timers[t.id], now) > 0,
|
||||||
|
) && (
|
||||||
|
<div className="notice">
|
||||||
|
Es laufen noch Timer.{' '}
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
setState((s) => ({ ...s, step: r.steps.length - 1, finishedAt: null }))
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Timer ansehen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
'use client';
|
||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
export function Dialog({
|
||||||
|
title,
|
||||||
|
onClose,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
title: string;
|
||||||
|
onClose: () => void;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
const ref = useRef<HTMLDivElement>(null),
|
||||||
|
closeRef = useRef(onClose);
|
||||||
|
closeRef.current = onClose;
|
||||||
|
useEffect(() => {
|
||||||
|
const previous = document.activeElement as HTMLElement | null;
|
||||||
|
const focusable = () =>
|
||||||
|
Array.from(
|
||||||
|
ref.current?.querySelectorAll<HTMLElement>(
|
||||||
|
'button:not(:disabled), a[href], input, textarea, select, [tabindex="0"]',
|
||||||
|
) ?? [],
|
||||||
|
);
|
||||||
|
focusable()[0]?.focus();
|
||||||
|
const keydown = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
e.preventDefault();
|
||||||
|
closeRef.current();
|
||||||
|
}
|
||||||
|
if (e.key !== 'Tab') return;
|
||||||
|
const items = focusable(),
|
||||||
|
first = items[0],
|
||||||
|
last = items.at(-1);
|
||||||
|
if (e.shiftKey && document.activeElement === first) {
|
||||||
|
e.preventDefault();
|
||||||
|
last?.focus();
|
||||||
|
} else if (!e.shiftKey && document.activeElement === last) {
|
||||||
|
e.preventDefault();
|
||||||
|
first?.focus();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const overflow = document.body.style.overflow;
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
document.addEventListener('keydown', keydown);
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = overflow;
|
||||||
|
document.removeEventListener('keydown', keydown);
|
||||||
|
previous?.focus();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="dialog-backdrop"
|
||||||
|
onMouseDown={(e) => {
|
||||||
|
if (e.target === e.currentTarget) onClose();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div ref={ref} role="dialog" aria-modal="true" aria-label={title} className="dialog">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,795 @@
|
|||||||
|
'use client';
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import {
|
||||||
|
ArrowLeft,
|
||||||
|
Plus,
|
||||||
|
Trash2,
|
||||||
|
GripVertical,
|
||||||
|
ArrowUp,
|
||||||
|
ArrowDown,
|
||||||
|
Upload,
|
||||||
|
Save,
|
||||||
|
Eye,
|
||||||
|
Check,
|
||||||
|
X,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import {
|
||||||
|
type Recipe,
|
||||||
|
type SavedRecipe,
|
||||||
|
type Ingredient,
|
||||||
|
type Step,
|
||||||
|
emptyRecipe,
|
||||||
|
units,
|
||||||
|
recipeSchema,
|
||||||
|
} from '@/lib/recipe';
|
||||||
|
import { api, readLocal, writeLocal, toast } from '@/lib/client';
|
||||||
|
import { uploadImage } from './admin';
|
||||||
|
import { renderStep, ingredientLabel } from '@/lib/calculator';
|
||||||
|
export function RecipeEditor({ initial }: { initial?: SavedRecipe }) {
|
||||||
|
const router = useRouter(),
|
||||||
|
key = `hamham:draft:${initial?.id ?? 'new'}`;
|
||||||
|
const [recipe, setRecipe] = useState<Recipe>(initial ?? emptyRecipe()),
|
||||||
|
[ready, setReady] = useState(false),
|
||||||
|
[busy, setBusy] = useState(false),
|
||||||
|
[error, setError] = useState(''),
|
||||||
|
[preview, setPreview] = useState(false),
|
||||||
|
[saved, setSaved] = useState(''),
|
||||||
|
[tab, setTab] = useState('basics'),
|
||||||
|
[options, setOptions] = useState<{ categories: string[]; tags: string[] }>({
|
||||||
|
categories: [],
|
||||||
|
tags: [],
|
||||||
|
});
|
||||||
|
const dirty = useRef(false),
|
||||||
|
dragging = useRef<number | null>(null);
|
||||||
|
useEffect(() => {
|
||||||
|
const draft = readLocal<{ recipe: Recipe; time: string } | null>(key, null);
|
||||||
|
if (draft) {
|
||||||
|
setRecipe(draft.recipe);
|
||||||
|
dirty.current = true;
|
||||||
|
setSaved(
|
||||||
|
`Lokaler Entwurf vom ${new Date(draft.time).toLocaleString('de-AT')} wiederhergestellt`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
setReady(true);
|
||||||
|
api<typeof options>('settings')
|
||||||
|
.then(setOptions)
|
||||||
|
.catch(() => {});
|
||||||
|
}, [key]);
|
||||||
|
useEffect(() => {
|
||||||
|
if (!ready || !dirty.current) return;
|
||||||
|
const time = new Date().toISOString();
|
||||||
|
writeLocal(key, { recipe, time });
|
||||||
|
setSaved(
|
||||||
|
`Auf diesem Gerät gesichert · ${new Date(time).toLocaleTimeString('de-AT', { hour: '2-digit', minute: '2-digit' })}`,
|
||||||
|
);
|
||||||
|
}, [recipe, ready, key]);
|
||||||
|
useEffect(() => {
|
||||||
|
const prevent = (e: BeforeUnloadEvent) => {
|
||||||
|
if (dirty.current) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.addEventListener('beforeunload', prevent);
|
||||||
|
return () => window.removeEventListener('beforeunload', prevent);
|
||||||
|
}, []);
|
||||||
|
const change = <K extends keyof Recipe>(key: K, value: Recipe[K]) => {
|
||||||
|
dirty.current = true;
|
||||||
|
setRecipe((r) => ({ ...r, [key]: value }));
|
||||||
|
};
|
||||||
|
const updateIngredient = (n: number, patch: Partial<Ingredient>) =>
|
||||||
|
change(
|
||||||
|
'ingredients',
|
||||||
|
recipe.ingredients.map((i, index) => (index === n ? { ...i, ...patch } : i)),
|
||||||
|
);
|
||||||
|
const updateStep = (n: number, patch: Partial<Step>) =>
|
||||||
|
change(
|
||||||
|
'steps',
|
||||||
|
recipe.steps.map((s, index) => (index === n ? { ...s, ...patch } : s)),
|
||||||
|
);
|
||||||
|
function move(kind: 'ingredients' | 'steps', from: number, to: number) {
|
||||||
|
if (to < 0 || to >= recipe[kind].length) return;
|
||||||
|
if (kind === 'ingredients') {
|
||||||
|
const a = [...recipe.ingredients];
|
||||||
|
a.splice(to, 0, a.splice(from, 1)[0]);
|
||||||
|
change(kind, a);
|
||||||
|
} else {
|
||||||
|
const a = [...recipe.steps];
|
||||||
|
a.splice(to, 0, a.splice(from, 1)[0]);
|
||||||
|
change(kind, a);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async function save() {
|
||||||
|
setBusy(true);
|
||||||
|
setError('');
|
||||||
|
try {
|
||||||
|
const parsed = recipeSchema.safeParse(recipe);
|
||||||
|
if (!parsed.success)
|
||||||
|
throw new Error(
|
||||||
|
parsed.error.issues.map((i) => `${i.path.join('.')}: ${i.message}`).join('\n'),
|
||||||
|
);
|
||||||
|
const result = await api<SavedRecipe>(
|
||||||
|
initial ? `recipes/${initial.id}` : 'recipes',
|
||||||
|
initial ? 'PUT' : 'POST',
|
||||||
|
parsed.data,
|
||||||
|
);
|
||||||
|
dirty.current = false;
|
||||||
|
localStorage.removeItem(key);
|
||||||
|
setRecipe(result);
|
||||||
|
setSaved('Im Kochbuch gespeichert');
|
||||||
|
toast('Rezept erfolgreich gespeichert.');
|
||||||
|
if (!initial) router.replace(`/admin/rezepte/${result.id}`);
|
||||||
|
router.refresh();
|
||||||
|
} catch (e) {
|
||||||
|
setError((e as Error).message);
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async function upload(file: File, additional = false) {
|
||||||
|
setBusy(true);
|
||||||
|
try {
|
||||||
|
const url = await uploadImage(file);
|
||||||
|
if (additional) change('images', [...recipe.images, url]);
|
||||||
|
else change('image', url);
|
||||||
|
} catch (e) {
|
||||||
|
setError((e as Error).message);
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const reorder = (kind: 'ingredients' | 'steps', n: number) => (
|
||||||
|
<div className="reorder">
|
||||||
|
<span
|
||||||
|
draggable
|
||||||
|
onDragStart={() => {
|
||||||
|
dragging.current = n;
|
||||||
|
}}
|
||||||
|
onDragEnd={() => {
|
||||||
|
dragging.current = null;
|
||||||
|
}}
|
||||||
|
title="Zum Sortieren ziehen"
|
||||||
|
className="drag-handle"
|
||||||
|
>
|
||||||
|
<GripVertical size={18} />
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-label={`${kind === 'ingredients' ? 'Zutat' : 'Schritt'} ${n + 1} nach oben`}
|
||||||
|
onClick={() => move(kind, n, n - 1)}
|
||||||
|
>
|
||||||
|
<ArrowUp size={14} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-label={`${kind === 'ingredients' ? 'Zutat' : 'Schritt'} ${n + 1} nach unten`}
|
||||||
|
onClick={() => move(kind, n, n + 1)}
|
||||||
|
>
|
||||||
|
<ArrowDown size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<div className="container editor">
|
||||||
|
<Link className="back-link" href="/admin">
|
||||||
|
<ArrowLeft size={17} /> Zur Sammlung
|
||||||
|
</Link>
|
||||||
|
<div className="editor-heading">
|
||||||
|
<div>
|
||||||
|
<span className="eyebrow">GUTES ESSEN BEGINNT MIT EINER IDEE</span>
|
||||||
|
<h1>{initial ? 'Feinschliff fürs Rezept.' : 'Ein neues Lieblingsrezept.'}</h1>
|
||||||
|
<span className="save-status">
|
||||||
|
<Check size={14} />
|
||||||
|
{saved || 'Entwürfe werden automatisch auf diesem Gerät gesichert.'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="button-row">
|
||||||
|
<button className="button secondary" onClick={() => setPreview(!preview)}>
|
||||||
|
<Eye size={17} />
|
||||||
|
{preview ? 'Editor' : 'Live-Vorschau'}
|
||||||
|
</button>
|
||||||
|
<button className="button primary" disabled={busy} onClick={save}>
|
||||||
|
<Save size={17} />
|
||||||
|
{busy ? 'Wird gespeichert …' : 'Rezept speichern'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{error && (
|
||||||
|
<pre role="alert" className="error">
|
||||||
|
{error}
|
||||||
|
</pre>
|
||||||
|
)}
|
||||||
|
<div className={`editor-layout ${preview ? 'with-preview' : ''}`}>
|
||||||
|
<div>
|
||||||
|
<div className="admin-tabs">
|
||||||
|
{[
|
||||||
|
['basics', 'Das Rezept'],
|
||||||
|
['ingredients', 'Zutaten'],
|
||||||
|
['steps', 'Zubereitung'],
|
||||||
|
['extras', 'Feine Details'],
|
||||||
|
].map(([id, name]) => (
|
||||||
|
<button key={id} className={tab === id ? 'active' : ''} onClick={() => setTab(id)}>
|
||||||
|
{name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{tab === 'basics' && (
|
||||||
|
<section className="panel editor-panel">
|
||||||
|
<h2>Was kommt auf den Tisch?</h2>
|
||||||
|
<label>
|
||||||
|
Rezepttitel
|
||||||
|
<input
|
||||||
|
value={recipe.title}
|
||||||
|
onChange={(e) => change('title', e.target.value)}
|
||||||
|
placeholder="Zum Beispiel: Cremige Zitronenpasta"
|
||||||
|
maxLength={180}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Untertitel
|
||||||
|
<input
|
||||||
|
value={recipe.subtitle}
|
||||||
|
onChange={(e) => change('subtitle', e.target.value)}
|
||||||
|
placeholder="Ein kleiner Vorgeschmack …"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Beschreibung
|
||||||
|
<textarea
|
||||||
|
rows={4}
|
||||||
|
value={recipe.description}
|
||||||
|
onChange={(e) => change('description', e.target.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
className="image-upload"
|
||||||
|
onDragOver={(e) => e.preventDefault()}
|
||||||
|
onDrop={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const file = e.dataTransfer.files[0];
|
||||||
|
if (file) void upload(file);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{recipe.image ? (
|
||||||
|
<>
|
||||||
|
<img src={recipe.image} alt="Titelbild" />
|
||||||
|
<button
|
||||||
|
className="icon-button"
|
||||||
|
aria-label="Titelbild entfernen"
|
||||||
|
onClick={() => change('image', '')}
|
||||||
|
>
|
||||||
|
<X size={18} />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Upload size={30} />
|
||||||
|
<h3>Ein Bild macht Appetit.</h3>
|
||||||
|
<p>Foto hier ablegen oder auswählen · JPEG, PNG, WebP · bis 10 MB</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<label className="button secondary">
|
||||||
|
{recipe.image ? 'Titelbild ersetzen' : 'Titelbild hochladen'}
|
||||||
|
<input
|
||||||
|
className="visually-hidden"
|
||||||
|
type="file"
|
||||||
|
accept="image/jpeg,image/png,image/webp"
|
||||||
|
onChange={(e) => {
|
||||||
|
if (e.target.files?.[0]) void upload(e.target.files[0]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<label>
|
||||||
|
Oder vorhandenen lokalen Bildpfad verwenden
|
||||||
|
<input
|
||||||
|
value={recipe.image}
|
||||||
|
onChange={(e) => change('image', e.target.value)}
|
||||||
|
placeholder="/media/…webp"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div className="form-grid">
|
||||||
|
<label>
|
||||||
|
Standardportionen
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="0.25"
|
||||||
|
step="0.25"
|
||||||
|
value={recipe.servings}
|
||||||
|
onChange={(e) => change('servings', +e.target.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Schwierigkeit
|
||||||
|
<select
|
||||||
|
value={recipe.difficulty}
|
||||||
|
onChange={(e) => change('difficulty', e.target.value as Recipe['difficulty'])}
|
||||||
|
>
|
||||||
|
{['Einfach', 'Mittel', 'Anspruchsvoll'].map((s) => (
|
||||||
|
<option key={s}>{s}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Küche / Herkunft
|
||||||
|
<input
|
||||||
|
value={recipe.cuisine}
|
||||||
|
onChange={(e) => change('cuisine', e.target.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="form-grid">
|
||||||
|
{(['prepMinutes', 'cookMinutes', 'restMinutes'] as const).map((key, n) => (
|
||||||
|
<label key={key}>
|
||||||
|
{['Vorbereitung (Min.)', 'Kochzeit (Min.)', 'Ruhezeit (Min.)'][n]}
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
value={recipe[key]}
|
||||||
|
onChange={(e) => change(key, +e.target.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="form-grid two">
|
||||||
|
<label>
|
||||||
|
Kategorien · mit Komma trennen
|
||||||
|
<input
|
||||||
|
list="categories"
|
||||||
|
value={recipe.categories.join(', ')}
|
||||||
|
onChange={(e) =>
|
||||||
|
change(
|
||||||
|
'categories',
|
||||||
|
e.target.value ? e.target.value.split(',').map((x) => x.trimStart()) : [],
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<datalist id="categories">
|
||||||
|
{options.categories.map((c) => (
|
||||||
|
<option key={c}>{c}</option>
|
||||||
|
))}
|
||||||
|
</datalist>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Tags · mit Komma trennen
|
||||||
|
<input
|
||||||
|
list="tags"
|
||||||
|
value={recipe.tags.join(', ')}
|
||||||
|
onChange={(e) =>
|
||||||
|
change(
|
||||||
|
'tags',
|
||||||
|
e.target.value ? e.target.value.split(',').map((x) => x.trimStart()) : [],
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<datalist id="tags">
|
||||||
|
{options.tags.map((t) => (
|
||||||
|
<option key={t}>{t}</option>
|
||||||
|
))}
|
||||||
|
</datalist>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<label className="checkbox-label">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={recipe.published}
|
||||||
|
onChange={(e) => change('published', e.target.checked)}
|
||||||
|
/>
|
||||||
|
<span>
|
||||||
|
Rezept veröffentlichen
|
||||||
|
<small>Wird erst nach „Rezept speichern“ öffentlich sichtbar.</small>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
{tab === 'ingredients' && (
|
||||||
|
<section className="panel editor-panel">
|
||||||
|
<h2>Alles, was du brauchst.</h2>
|
||||||
|
<p className="muted">
|
||||||
|
Menge leer lassen für „nach Geschmack“. Sortieren per Ziehen oder Pfeiltasten.
|
||||||
|
</p>
|
||||||
|
<div className="editor-ingredient-list">
|
||||||
|
{recipe.ingredients.map((i, n) => (
|
||||||
|
<div
|
||||||
|
className="editor-ingredient"
|
||||||
|
key={i.id}
|
||||||
|
onDragOver={(e) => e.preventDefault()}
|
||||||
|
onDrop={() => {
|
||||||
|
if (dragging.current !== null) move('ingredients', dragging.current, n);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{reorder('ingredients', n)}
|
||||||
|
<div className="ingredient-fields">
|
||||||
|
<div className="ingredient-main-fields">
|
||||||
|
<label>
|
||||||
|
Menge
|
||||||
|
<input
|
||||||
|
aria-label={`Menge ${n + 1}`}
|
||||||
|
type="number"
|
||||||
|
step="any"
|
||||||
|
min="0.001"
|
||||||
|
value={i.amount ?? ''}
|
||||||
|
onChange={(e) =>
|
||||||
|
updateIngredient(n, {
|
||||||
|
amount: e.target.value === '' ? null : +e.target.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Einheit
|
||||||
|
<select
|
||||||
|
aria-label={`Einheit ${n + 1}`}
|
||||||
|
value={i.unit}
|
||||||
|
onChange={(e) =>
|
||||||
|
updateIngredient(n, { unit: e.target.value as Ingredient['unit'] })
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{units.map((u) => (
|
||||||
|
<option key={u} value={u}>
|
||||||
|
{u || 'ohne'}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Zutat
|
||||||
|
<input
|
||||||
|
aria-label={`Zutat ${n + 1}`}
|
||||||
|
value={i.name}
|
||||||
|
onChange={(e) => updateIngredient(n, { name: e.target.value })}
|
||||||
|
placeholder="z. B. Kartoffeln"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="ingredient-secondary-fields">
|
||||||
|
<input
|
||||||
|
aria-label={`Abschnitt ${n + 1}`}
|
||||||
|
value={i.section}
|
||||||
|
onChange={(e) => updateIngredient(n, { section: e.target.value })}
|
||||||
|
placeholder="Abschnitt, z. B. Sauce"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
aria-label={`Hinweis ${n + 1}`}
|
||||||
|
value={i.note}
|
||||||
|
onChange={(e) => updateIngredient(n, { note: e.target.value })}
|
||||||
|
placeholder="Hinweis, z. B. fein gehackt"
|
||||||
|
/>
|
||||||
|
<label className="checkbox-label">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={i.optional}
|
||||||
|
onChange={(e) => updateIngredient(n, { optional: e.target.checked })}
|
||||||
|
/>
|
||||||
|
Optional
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<small className="muted">Referenz: {`{{${i.id}}}`}</small>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="icon-button danger"
|
||||||
|
aria-label={`Zutat ${n + 1} entfernen`}
|
||||||
|
disabled={recipe.ingredients.length === 1}
|
||||||
|
onClick={() => {
|
||||||
|
const used = recipe.steps.some(
|
||||||
|
(s) => s.ingredients.includes(i.id) || s.text.includes(`{{${i.id}}}`),
|
||||||
|
);
|
||||||
|
if (used) {
|
||||||
|
setError(
|
||||||
|
'Diese Zutat wird in einem Schritt verwendet. Entferne zuerst die Referenz.',
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
change(
|
||||||
|
'ingredients',
|
||||||
|
recipe.ingredients.filter((x) => x.id !== i.id),
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Trash2 size={17} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="button secondary"
|
||||||
|
onClick={() =>
|
||||||
|
change('ingredients', [
|
||||||
|
...recipe.ingredients,
|
||||||
|
{
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
name: '',
|
||||||
|
amount: null,
|
||||||
|
unit: 'g',
|
||||||
|
section: '',
|
||||||
|
note: '',
|
||||||
|
optional: false,
|
||||||
|
},
|
||||||
|
])
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Plus size={18} /> Zutat hinzufügen
|
||||||
|
</button>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
{tab === 'steps' && (
|
||||||
|
<section className="panel editor-panel">
|
||||||
|
<h2>Schritt für Schritt zum Genuss.</h2>
|
||||||
|
<p className="muted">
|
||||||
|
Füge Zutaten als Referenz ein, damit die Mengen beim Skalieren mitwachsen.
|
||||||
|
</p>
|
||||||
|
{recipe.steps.map((s, n) => (
|
||||||
|
<article
|
||||||
|
className="editor-step"
|
||||||
|
key={s.id}
|
||||||
|
onDragOver={(e) => e.preventDefault()}
|
||||||
|
onDrop={() => {
|
||||||
|
if (dragging.current !== null) move('steps', dragging.current, n);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="section-heading">
|
||||||
|
<div className="button-row">
|
||||||
|
{reorder('steps', n)}
|
||||||
|
<h3>Schritt {n + 1}</h3>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="icon-button danger"
|
||||||
|
aria-label={`Schritt ${n + 1} entfernen`}
|
||||||
|
disabled={recipe.steps.length === 1}
|
||||||
|
onClick={() =>
|
||||||
|
change(
|
||||||
|
'steps',
|
||||||
|
recipe.steps.filter((x) => x.id !== s.id),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Trash2 size={17} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<label>
|
||||||
|
Schritttitel
|
||||||
|
<input
|
||||||
|
aria-label={`Schritttitel ${n + 1}`}
|
||||||
|
value={s.title}
|
||||||
|
onChange={(e) => updateStep(n, { title: e.target.value })}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Anleitung
|
||||||
|
<textarea
|
||||||
|
aria-label={`Anleitung ${n + 1}`}
|
||||||
|
rows={4}
|
||||||
|
value={s.text}
|
||||||
|
onChange={(e) => updateStep(n, { text: e.target.value })}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div className="reference-picker">
|
||||||
|
<span className="small muted">Zutatenreferenz einfügen:</span>
|
||||||
|
{recipe.ingredients
|
||||||
|
.filter((i) => i.name)
|
||||||
|
.map((i) => (
|
||||||
|
<button
|
||||||
|
key={i.id}
|
||||||
|
className="chip"
|
||||||
|
onClick={() =>
|
||||||
|
updateStep(n, {
|
||||||
|
text: `${s.text}${s.text ? ' ' : ''}{{${i.id}}}`,
|
||||||
|
ingredients: Array.from(new Set([...s.ingredients, i.id])),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Plus size={13} />
|
||||||
|
{i.name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<details>
|
||||||
|
<summary>Benötigte Zutaten in diesem Schritt</summary>
|
||||||
|
<div className="reference-picker">
|
||||||
|
{recipe.ingredients.map((i) => (
|
||||||
|
<label key={i.id} className="checkbox-label">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={s.ingredients.includes(i.id)}
|
||||||
|
onChange={(e) =>
|
||||||
|
updateStep(n, {
|
||||||
|
ingredients: e.target.checked
|
||||||
|
? [...s.ingredients, i.id]
|
||||||
|
: s.ingredients.filter((id) => id !== i.id),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{i.name || i.id}
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
<div className="editor-timers">
|
||||||
|
{s.timers.map((t, ti) => (
|
||||||
|
<div className="timer-input" key={t.id}>
|
||||||
|
<label>
|
||||||
|
Timername
|
||||||
|
<input
|
||||||
|
value={t.label}
|
||||||
|
onChange={(e) =>
|
||||||
|
updateStep(n, {
|
||||||
|
timers: s.timers.map((x, j) =>
|
||||||
|
j === ti ? { ...x, label: e.target.value } : x,
|
||||||
|
),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Dauer in Sekunden
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
value={t.seconds}
|
||||||
|
onChange={(e) =>
|
||||||
|
updateStep(n, {
|
||||||
|
timers: s.timers.map((x, j) =>
|
||||||
|
j === ti ? { ...x, seconds: +e.target.value } : x,
|
||||||
|
),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<button
|
||||||
|
className="icon-button"
|
||||||
|
aria-label="Timer entfernen"
|
||||||
|
onClick={() =>
|
||||||
|
updateStep(n, { timers: s.timers.filter((x) => x.id !== t.id) })
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<X size={17} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<button
|
||||||
|
className="text-button"
|
||||||
|
onClick={() =>
|
||||||
|
updateStep(n, {
|
||||||
|
timers: [
|
||||||
|
...s.timers,
|
||||||
|
{ id: crypto.randomUUID(), label: 'Küchentimer', seconds: 600 },
|
||||||
|
],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Plus size={16} /> Timer hinzufügen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
<button
|
||||||
|
className="button secondary"
|
||||||
|
onClick={() =>
|
||||||
|
change('steps', [
|
||||||
|
...recipe.steps,
|
||||||
|
{ id: crypto.randomUUID(), title: '', text: '', ingredients: [], timers: [] },
|
||||||
|
])
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Plus size={18} /> Schritt hinzufügen
|
||||||
|
</button>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
{tab === 'extras' && (
|
||||||
|
<section className="panel editor-panel">
|
||||||
|
<h2>Das macht es zu deinem Rezept.</h2>
|
||||||
|
<label>
|
||||||
|
Tipps & Variationen
|
||||||
|
<textarea
|
||||||
|
rows={5}
|
||||||
|
value={recipe.tips}
|
||||||
|
onChange={(e) => change('tips', e.target.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Aufbewahrung
|
||||||
|
<textarea
|
||||||
|
rows={3}
|
||||||
|
value={recipe.storage}
|
||||||
|
onChange={(e) => change('storage', e.target.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className="checkbox-label">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={recipe.nutrition !== null}
|
||||||
|
onChange={(e) =>
|
||||||
|
change(
|
||||||
|
'nutrition',
|
||||||
|
e.target.checked ? { kcal: 0, protein: 0, carbs: 0, fat: 0 } : null,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
Nährwerte pro Portion angeben
|
||||||
|
</label>
|
||||||
|
{recipe.nutrition && (
|
||||||
|
<div className="form-grid">
|
||||||
|
{(['kcal', 'protein', 'carbs', 'fat'] as const).map((k) => (
|
||||||
|
<label key={k}>
|
||||||
|
{
|
||||||
|
{
|
||||||
|
kcal: 'Kalorien (kcal)',
|
||||||
|
protein: 'Eiweiß (g)',
|
||||||
|
carbs: 'Kohlenhydrate (g)',
|
||||||
|
fat: 'Fett (g)',
|
||||||
|
}[k]
|
||||||
|
}
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
step="any"
|
||||||
|
value={recipe.nutrition![k]}
|
||||||
|
onChange={(e) =>
|
||||||
|
change('nutrition', { ...recipe.nutrition!, [k]: +e.target.value })
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<h3>Weitere Bilder</h3>
|
||||||
|
<div className="image-gallery">
|
||||||
|
{recipe.images.map((src) => (
|
||||||
|
<div key={src}>
|
||||||
|
<img src={src} alt="Zusätzliches Rezeptbild" />
|
||||||
|
<button
|
||||||
|
className="text-button danger"
|
||||||
|
onClick={() =>
|
||||||
|
change(
|
||||||
|
'images',
|
||||||
|
recipe.images.filter((i) => i !== src),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Entfernen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<label className="button secondary">
|
||||||
|
<Upload size={18} /> Weiteres Bild hochladen
|
||||||
|
<input
|
||||||
|
className="visually-hidden"
|
||||||
|
type="file"
|
||||||
|
accept="image/jpeg,image/png,image/webp"
|
||||||
|
onChange={(e) => {
|
||||||
|
if (e.target.files?.[0]) void upload(e.target.files[0], true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{preview && (
|
||||||
|
<aside className="editor-preview panel">
|
||||||
|
<span className="eyebrow">LIVE-VORSCHAU</span>
|
||||||
|
{recipe.image && <img src={recipe.image} alt="Rezeptvorschau" />}
|
||||||
|
<h2>{recipe.title || 'Dein Rezepttitel'}</h2>
|
||||||
|
<p>{recipe.description}</p>
|
||||||
|
<h3>Zutaten für {recipe.servings} Portionen</h3>
|
||||||
|
<ul>
|
||||||
|
{recipe.ingredients.map((i) => (
|
||||||
|
<li key={i.id}>{ingredientLabel(i, '1')}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<h3>Zubereitung</h3>
|
||||||
|
<ol>
|
||||||
|
{recipe.steps.map((s) => (
|
||||||
|
<li key={s.id}>
|
||||||
|
<strong>{s.title}</strong>
|
||||||
|
<p>{renderStep(s.text, recipe, '1')}</p>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
</aside>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,345 @@
|
|||||||
|
'use client';
|
||||||
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useRouter, useSearchParams } from 'next/navigation';
|
||||||
|
import {
|
||||||
|
Search,
|
||||||
|
ArrowUpRight,
|
||||||
|
ArrowRight,
|
||||||
|
Clock3,
|
||||||
|
Heart,
|
||||||
|
SlidersHorizontal,
|
||||||
|
Leaf,
|
||||||
|
Utensils,
|
||||||
|
X,
|
||||||
|
ChefHat,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { type SavedRecipe, totalMinutes } from '@/lib/recipe';
|
||||||
|
import { useLocal } from '@/lib/client';
|
||||||
|
export function RecipeCard({ recipe: r }: { recipe: SavedRecipe }) {
|
||||||
|
const [favorites, setFavorites] = useLocal<string[]>('hamham:favorites', []);
|
||||||
|
return (
|
||||||
|
<motion.article
|
||||||
|
className="recipe-card"
|
||||||
|
initial={{ opacity: 0, y: 12 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
<Link href={`/rezepte/${r.id}`} className="card-image">
|
||||||
|
{r.image ? (
|
||||||
|
<img src={r.image} alt={r.title} loading="lazy" />
|
||||||
|
) : (
|
||||||
|
<div className="recipe-art">
|
||||||
|
<Utensils size={56} strokeWidth={1} />
|
||||||
|
<span>Mit Liebe gekocht</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<span className="card-category">{r.categories[0] ?? r.cuisine ?? 'Aus unserer Küche'}</span>
|
||||||
|
</Link>
|
||||||
|
<button
|
||||||
|
className={`favorite-button ${favorites.includes(r.id) ? 'selected' : ''}`}
|
||||||
|
aria-label={`${r.title} ${favorites.includes(r.id) ? 'aus Favoriten entfernen' : 'als Favorit merken'}`}
|
||||||
|
onClick={() =>
|
||||||
|
setFavorites(
|
||||||
|
favorites.includes(r.id) ? favorites.filter((id) => id !== r.id) : [...favorites, r.id],
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Heart size={19} fill={favorites.includes(r.id) ? 'currentColor' : 'none'} />
|
||||||
|
</button>
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="card-meta">
|
||||||
|
<span>
|
||||||
|
<Clock3 size={14} />
|
||||||
|
{totalMinutes(r)} Min.
|
||||||
|
</span>
|
||||||
|
<span className="tiny-dot" />
|
||||||
|
<span>{r.difficulty}</span>
|
||||||
|
</div>
|
||||||
|
<Link href={`/rezepte/${r.id}`}>
|
||||||
|
<h3>{r.title}</h3>
|
||||||
|
</Link>
|
||||||
|
<p>{r.subtitle || r.description}</p>
|
||||||
|
<div className="card-bottom">
|
||||||
|
<span>{r.tags[0] || 'Für deinen Genusstag'}</span>
|
||||||
|
<Link href={`/rezepte/${r.id}`} aria-label={`${r.title} öffnen`}>
|
||||||
|
<ArrowUpRight size={22} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.article>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export function Library({
|
||||||
|
recipes,
|
||||||
|
favoritesOnly = false,
|
||||||
|
household = 'Unsere Küche',
|
||||||
|
}: {
|
||||||
|
recipes: SavedRecipe[];
|
||||||
|
favoritesOnly?: boolean;
|
||||||
|
household?: string;
|
||||||
|
}) {
|
||||||
|
const params = useSearchParams(),
|
||||||
|
router = useRouter();
|
||||||
|
const [query, setQuery] = useState(params.get('q') ?? ''),
|
||||||
|
[category, setCategory] = useState(params.get('kategorie') ?? ''),
|
||||||
|
[tag, setTag] = useState(params.get('tag') ?? ''),
|
||||||
|
[time, setTime] = useState(params.get('zeit') ?? ''),
|
||||||
|
[difficulty, setDifficulty] = useState(params.get('niveau') ?? ''),
|
||||||
|
[sort, setSort] = useState(params.get('sort') ?? 'neu'),
|
||||||
|
[filters, setFilters] = useState(false);
|
||||||
|
const [favorites] = useLocal<string[]>('hamham:favorites', []);
|
||||||
|
const categories = Array.from(new Set(recipes.flatMap((r) => r.categories))).sort(),
|
||||||
|
tags = Array.from(new Set(recipes.flatMap((r) => r.tags))).sort();
|
||||||
|
useEffect(() => {
|
||||||
|
const t = setTimeout(() => {
|
||||||
|
const p = new URLSearchParams();
|
||||||
|
for (const [k, v] of Object.entries({
|
||||||
|
q: query,
|
||||||
|
kategorie: category,
|
||||||
|
tag,
|
||||||
|
zeit: time,
|
||||||
|
niveau: difficulty,
|
||||||
|
sort: sort === 'neu' ? '' : sort,
|
||||||
|
}))
|
||||||
|
if (v) p.set(k, v);
|
||||||
|
router.replace(`${favoritesOnly ? '/favoriten' : '/'}${p.size ? `?${p}` : ''}`, {
|
||||||
|
scroll: false,
|
||||||
|
});
|
||||||
|
}, 250);
|
||||||
|
return () => clearTimeout(t);
|
||||||
|
}, [query, category, tag, time, difficulty, sort, favoritesOnly, router]);
|
||||||
|
const filtered = useMemo(
|
||||||
|
() =>
|
||||||
|
recipes
|
||||||
|
.filter(
|
||||||
|
(r) =>
|
||||||
|
(!favoritesOnly || favorites.includes(r.id)) &&
|
||||||
|
(!category || r.categories.includes(category)) &&
|
||||||
|
(!tag || r.tags.includes(tag)) &&
|
||||||
|
(!time || totalMinutes(r) <= +time) &&
|
||||||
|
(!difficulty || r.difficulty === difficulty) &&
|
||||||
|
`${r.title} ${r.description} ${r.ingredients.map((i) => i.name).join(' ')}`
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(query.toLowerCase()),
|
||||||
|
)
|
||||||
|
.sort((a, b) =>
|
||||||
|
sort === 'name'
|
||||||
|
? a.title.localeCompare(b.title, 'de')
|
||||||
|
: b.createdAt.localeCompare(a.createdAt),
|
||||||
|
),
|
||||||
|
[recipes, favoritesOnly, favorites, category, tag, time, difficulty, query, sort],
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<div className="container library">
|
||||||
|
{!favoritesOnly ? (
|
||||||
|
<section className="home-hero">
|
||||||
|
<div className="hero-copy">
|
||||||
|
<span className="eyebrow">
|
||||||
|
<span className="live-dot" />{' '}
|
||||||
|
{household === 'Unsere Küche'
|
||||||
|
? 'DEIN PERSÖNLICHES KOCHBUCH'
|
||||||
|
: household.toLocaleUpperCase('de')}
|
||||||
|
</span>
|
||||||
|
<h1>
|
||||||
|
Zuhause schmeckt’s
|
||||||
|
<br />
|
||||||
|
<em>am besten.</em>
|
||||||
|
</h1>
|
||||||
|
<p>
|
||||||
|
Für die schnellen Abende. Die langen Sonntage.
|
||||||
|
<br className="desktop-only" /> Und alles, was wir gerne zusammen genießen.
|
||||||
|
</p>
|
||||||
|
<a href="#rezepte" className="button primary">
|
||||||
|
Was kochen wir heute? <ArrowRight size={18} />
|
||||||
|
</a>
|
||||||
|
<div className="hero-note">
|
||||||
|
<span className="note-icon">
|
||||||
|
<Leaf size={20} />
|
||||||
|
</span>
|
||||||
|
Lieblingsrezepte. Mit Liebe gesammelt.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="hero-visual">
|
||||||
|
<img
|
||||||
|
src="/images/kitchen.jpg"
|
||||||
|
alt="Frische Pasta mit Tomaten und Kräutern auf einem gedeckten Tisch"
|
||||||
|
fetchPriority="high"
|
||||||
|
/>
|
||||||
|
<div className="hero-image-shade" />
|
||||||
|
<span className="hero-stamp">
|
||||||
|
EINFACH
|
||||||
|
<br />
|
||||||
|
<span>gut essen.</span>
|
||||||
|
<Leaf size={23} />
|
||||||
|
</span>
|
||||||
|
<div className="hero-caption">
|
||||||
|
<span>WENIGER ALLTAG. MEHR GENUSS.</span>
|
||||||
|
<p>
|
||||||
|
Ein guter Tag beginnt
|
||||||
|
<br />
|
||||||
|
mit etwas Gutem.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
) : (
|
||||||
|
<section className="page-heading">
|
||||||
|
<span className="eyebrow">IMMER WIEDER GERN</span>
|
||||||
|
<h1>
|
||||||
|
Deine Lieblingsrezepte<span className="accent">.</span>
|
||||||
|
</h1>
|
||||||
|
<p>Die Gerichte, die bleiben dürfen. Auf diesem Gerät für dich gemerkt.</p>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
<section id="rezepte" className="library-section">
|
||||||
|
<div className="section-heading">
|
||||||
|
<div>
|
||||||
|
<span className="eyebrow">INSPIRATION FÜR DEINE KÜCHE</span>
|
||||||
|
<h2>
|
||||||
|
{favoritesOnly ? 'Deine kleine Bestenliste' : 'Was darf’s heute sein?'}{' '}
|
||||||
|
<span className="count-badge">{filtered.length}</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<span className="handwritten">
|
||||||
|
Mit Appetit aussuchen <span>↙</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="search-row">
|
||||||
|
<label className="search-box">
|
||||||
|
<Search size={20} />
|
||||||
|
<input
|
||||||
|
aria-label="Rezepte suchen"
|
||||||
|
value={query}
|
||||||
|
onChange={(e) => setQuery(e.target.value)}
|
||||||
|
placeholder="Rezept oder Zutat suchen …"
|
||||||
|
/>
|
||||||
|
{query && (
|
||||||
|
<button aria-label="Suche löschen" onClick={() => setQuery('')}>
|
||||||
|
<X size={16} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</label>
|
||||||
|
<button
|
||||||
|
className={`button secondary ${filters ? 'selected' : ''}`}
|
||||||
|
onClick={() => setFilters(!filters)}
|
||||||
|
aria-expanded={filters}
|
||||||
|
>
|
||||||
|
<SlidersHorizontal size={18} /> Filter
|
||||||
|
{(time || difficulty || tag) && <span className="live-dot" />}
|
||||||
|
</button>
|
||||||
|
<select
|
||||||
|
aria-label="Rezepte sortieren"
|
||||||
|
value={sort}
|
||||||
|
onChange={(e) => setSort(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="neu">Zuletzt hinzugefügt</option>
|
||||||
|
<option value="name">Name A–Z</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
{filters && (
|
||||||
|
<div className="filter-panel">
|
||||||
|
<label>
|
||||||
|
Gesamtzeit
|
||||||
|
<select value={time} onChange={(e) => setTime(e.target.value)}>
|
||||||
|
<option value="">Jede Zeit</option>
|
||||||
|
<option value="30">Bis 30 Minuten</option>
|
||||||
|
<option value="60">Bis 60 Minuten</option>
|
||||||
|
<option value="120">Bis 2 Stunden</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Schwierigkeit
|
||||||
|
<select value={difficulty} onChange={(e) => setDifficulty(e.target.value)}>
|
||||||
|
<option value="">Jedes Niveau</option>
|
||||||
|
{['Einfach', 'Mittel', 'Anspruchsvoll'].map((x) => (
|
||||||
|
<option key={x}>{x}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Tags
|
||||||
|
<select value={tag} onChange={(e) => setTag(e.target.value)}>
|
||||||
|
<option value="">Alle Tags</option>
|
||||||
|
{tags.map((x) => (
|
||||||
|
<option key={x}>{x}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<button
|
||||||
|
className="text-button"
|
||||||
|
onClick={() => {
|
||||||
|
setTime('');
|
||||||
|
setDifficulty('');
|
||||||
|
setTag('');
|
||||||
|
setCategory('');
|
||||||
|
setQuery('');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Zurücksetzen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="category-chips">
|
||||||
|
<button className={!category ? 'chip active' : 'chip'} onClick={() => setCategory('')}>
|
||||||
|
<Utensils size={15} /> Alle Rezepte
|
||||||
|
</button>
|
||||||
|
{categories.map((c) => (
|
||||||
|
<button
|
||||||
|
key={c}
|
||||||
|
className={category === c ? 'chip active' : 'chip'}
|
||||||
|
onClick={() => setCategory(c)}
|
||||||
|
>
|
||||||
|
{c}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{filtered.length ? (
|
||||||
|
<div className="recipe-grid">
|
||||||
|
{filtered.map((r) => (
|
||||||
|
<RecipeCard key={r.id} recipe={r} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="empty-state">
|
||||||
|
<ChefHat size={40} strokeWidth={1.3} />
|
||||||
|
<h3>
|
||||||
|
{favoritesOnly
|
||||||
|
? 'Hier ist Platz für deine Lieblinge.'
|
||||||
|
: recipes.length
|
||||||
|
? 'Noch nicht das Richtige gefunden?'
|
||||||
|
: 'Ein neues Kochbuch beginnt.'}
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
{favoritesOnly
|
||||||
|
? 'Tippe bei einem Rezept auf das Herz und finde es hier wieder.'
|
||||||
|
: recipes.length
|
||||||
|
? 'Probiere eine andere Zutat oder weniger Filter.'
|
||||||
|
: 'Lege im geschützten Bereich dein erstes Rezept an oder importiere deine Sammlung.'}
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
className="button secondary"
|
||||||
|
href={recipes.length || favoritesOnly ? '/' : '/admin'}
|
||||||
|
>
|
||||||
|
{recipes.length || favoritesOnly ? 'Alle Rezepte entdecken' : 'Kochbuch einrichten'}
|
||||||
|
<ArrowRight size={17} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
<section className="home-bottom">
|
||||||
|
<span className="note-icon">
|
||||||
|
<ChefHat size={28} />
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<h3>Ein bisschen Planung. Viel mehr Genuss.</h3>
|
||||||
|
<p>Portionen anpassen, Einkaufsliste füllen, Schritt für Schritt kochen.</p>
|
||||||
|
</div>
|
||||||
|
<Link href="/einkaufsliste" className="text-button">
|
||||||
|
Zur Einkaufsliste <ArrowRight size={18} />
|
||||||
|
</Link>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,423 @@
|
|||||||
|
'use client';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import Decimal from 'decimal.js';
|
||||||
|
import {
|
||||||
|
ArrowLeft,
|
||||||
|
ArrowRight,
|
||||||
|
Clock3,
|
||||||
|
Users,
|
||||||
|
ChefHat,
|
||||||
|
Heart,
|
||||||
|
Printer,
|
||||||
|
ShoppingBasket,
|
||||||
|
RotateCcw,
|
||||||
|
Minus,
|
||||||
|
Plus,
|
||||||
|
Sparkles,
|
||||||
|
Check,
|
||||||
|
Flame,
|
||||||
|
Leaf,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { type SavedRecipe, type Ingredient, totalMinutes } from '@/lib/recipe';
|
||||||
|
import {
|
||||||
|
portionFactor,
|
||||||
|
ingredientFactor,
|
||||||
|
scaledAmount,
|
||||||
|
formatAmount,
|
||||||
|
renderStep,
|
||||||
|
mergeShopping,
|
||||||
|
type ShoppingItem,
|
||||||
|
} from '@/lib/calculator';
|
||||||
|
import { readLocal, writeLocal, useLocal, toast } from '@/lib/client';
|
||||||
|
import { RecipeCard } from './library';
|
||||||
|
function AmountInput({
|
||||||
|
ingredient: i,
|
||||||
|
factor,
|
||||||
|
onChange,
|
||||||
|
}: {
|
||||||
|
ingredient: Ingredient;
|
||||||
|
factor: string;
|
||||||
|
onChange: (f: string) => void;
|
||||||
|
}) {
|
||||||
|
const [editing, setEditing] = useState(false),
|
||||||
|
[value, setValue] = useState(''),
|
||||||
|
[unit, setUnit] = useState(i.unit),
|
||||||
|
[error, setError] = useState('');
|
||||||
|
if (i.amount === null) return <span className="amount-unset">{i.note || 'nach Geschmack'}</span>;
|
||||||
|
return editing ? (
|
||||||
|
<form
|
||||||
|
className="amount-edit"
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
try {
|
||||||
|
onChange(ingredientFactor(i, value, unit));
|
||||||
|
setEditing(false);
|
||||||
|
setError('');
|
||||||
|
} catch (e) {
|
||||||
|
setError((e as Error).message);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
autoFocus
|
||||||
|
aria-label={`Neue Menge ${i.name}`}
|
||||||
|
inputMode="decimal"
|
||||||
|
value={value}
|
||||||
|
onChange={(e) => setValue(e.target.value)}
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
aria-label={`Einheit ${i.name}`}
|
||||||
|
value={unit}
|
||||||
|
onChange={(e) => setUnit(e.target.value as typeof unit)}
|
||||||
|
>
|
||||||
|
{(['g', 'kg'].includes(i.unit)
|
||||||
|
? ['g', 'kg']
|
||||||
|
: ['ml', 'l', 'TL', 'EL'].includes(i.unit)
|
||||||
|
? ['ml', 'l', 'TL', 'EL']
|
||||||
|
: [i.unit]
|
||||||
|
).map((u) => (
|
||||||
|
<option key={u}>{u}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<button aria-label="Menge übernehmen" type="submit">
|
||||||
|
<Check size={18} />
|
||||||
|
</button>
|
||||||
|
<button type="button" onClick={() => setEditing(false)} aria-label="Mengenänderung abbrechen">
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
{error && <small role="alert">{error}</small>}
|
||||||
|
</form>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
className="amount-button"
|
||||||
|
aria-label={`Menge ${i.name} ändern`}
|
||||||
|
title="Vorhandene Menge eingeben"
|
||||||
|
onClick={() => {
|
||||||
|
setValue(new Decimal(scaledAmount(i, factor)!).toDecimalPlaces(6).toString());
|
||||||
|
setUnit(i.unit);
|
||||||
|
setEditing(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{formatAmount(scaledAmount(i, factor))} <span>{i.unit}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export function RecipeDetail({
|
||||||
|
recipe: r,
|
||||||
|
related = [],
|
||||||
|
}: {
|
||||||
|
recipe: SavedRecipe;
|
||||||
|
related?: SavedRecipe[];
|
||||||
|
}) {
|
||||||
|
const [factor, setFactor] = useState('1'),
|
||||||
|
[mode, setMode] = useState<'portions' | 'ingredient'>('portions'),
|
||||||
|
[error, setError] = useState('');
|
||||||
|
const [favorites, setFavorites] = useLocal<string[]>('hamham:favorites', []),
|
||||||
|
[checked, setChecked] = useState<string[]>([]);
|
||||||
|
const servings = new Decimal(r.servings).mul(factor),
|
||||||
|
isFavorite = favorites.includes(r.id);
|
||||||
|
function setPortions(value: string | number) {
|
||||||
|
try {
|
||||||
|
setFactor(portionFactor(r.servings, value));
|
||||||
|
setError('');
|
||||||
|
} catch {
|
||||||
|
setError('Bitte eine gültige Portionszahl größer als 0 eingeben.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function addShopping() {
|
||||||
|
writeLocal(
|
||||||
|
'hamham:shopping',
|
||||||
|
mergeShopping(readLocal<ShoppingItem[]>('hamham:shopping', []), r.ingredients, factor),
|
||||||
|
);
|
||||||
|
toast('Alle Zutaten wurden zur Einkaufsliste hinzugefügt.');
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="container recipe-page">
|
||||||
|
<Link className="back-link no-print" href="/">
|
||||||
|
<ArrowLeft size={16} /> Zur Rezeptsammlung
|
||||||
|
</Link>
|
||||||
|
{!r.published && <div className="notice">Entwurf · Nur für Administratoren sichtbar</div>}
|
||||||
|
<section className="recipe-hero">
|
||||||
|
<div className="recipe-intro">
|
||||||
|
<div className="eyebrow">
|
||||||
|
{r.cuisine || 'AUS UNSERER KÜCHE'} {r.categories.length > 0 && ` / ${r.categories[0]}`}
|
||||||
|
</div>
|
||||||
|
<h1>{r.title}</h1>
|
||||||
|
{r.subtitle && <p className="recipe-subtitle">{r.subtitle}</p>}
|
||||||
|
<p className="description">{r.description}</p>
|
||||||
|
<div className="recipe-stats">
|
||||||
|
<div>
|
||||||
|
<Clock3 size={21} />
|
||||||
|
<strong>{totalMinutes(r)} Min.</strong>
|
||||||
|
<span>Gesamtzeit</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<ChefHat size={21} />
|
||||||
|
<strong>{r.difficulty}</strong>
|
||||||
|
<span>Schwierigkeit</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Users size={21} />
|
||||||
|
<strong>{formatAmount(servings)} Portionen</strong>
|
||||||
|
<span>Dein Appetit entscheidet</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="recipe-actions no-print">
|
||||||
|
<Link className="button primary" href={`/rezepte/${r.id}/kochen?faktor=${factor}`}>
|
||||||
|
<ChefHat size={20} /> Jetzt kochen <ArrowRight size={18} />
|
||||||
|
</Link>
|
||||||
|
<button
|
||||||
|
className={`icon-button bordered ${isFavorite ? 'selected' : ''}`}
|
||||||
|
aria-label="Rezept als Favorit merken"
|
||||||
|
onClick={() =>
|
||||||
|
setFavorites(
|
||||||
|
isFavorite ? favorites.filter((id) => id !== r.id) : [...favorites, r.id],
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Heart size={20} fill={isFavorite ? 'currentColor' : 'none'} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="icon-button bordered"
|
||||||
|
aria-label="Rezept drucken"
|
||||||
|
onClick={() => print()}
|
||||||
|
>
|
||||||
|
<Printer size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="recipe-cover">
|
||||||
|
{r.image ? (
|
||||||
|
<img src={r.image} alt={r.title} />
|
||||||
|
) : (
|
||||||
|
<div className="recipe-art">
|
||||||
|
<ChefHat size={90} strokeWidth={1} />
|
||||||
|
<span>Ein Lieblingsrezept von dir.</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<span className="image-label">
|
||||||
|
<Leaf size={16} /> Selbst gekocht. Zusammen genossen.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div className="recipe-columns">
|
||||||
|
<aside className="ingredients-panel">
|
||||||
|
<div className="panel-title">
|
||||||
|
<h2>Zutaten</h2>
|
||||||
|
<span className="eyebrow">FÜR {formatAmount(servings)} PORTIONEN</span>
|
||||||
|
</div>
|
||||||
|
<div className="calculator no-print">
|
||||||
|
<div className="segmented">
|
||||||
|
<button
|
||||||
|
className={mode === 'portions' ? 'active' : ''}
|
||||||
|
onClick={() => setMode('portions')}
|
||||||
|
>
|
||||||
|
Nach Portionen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={mode === 'ingredient' ? 'active' : ''}
|
||||||
|
onClick={() => setMode('ingredient')}
|
||||||
|
>
|
||||||
|
Nach Zutat
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{mode === 'portions' ? (
|
||||||
|
<div className="portion-control">
|
||||||
|
<button
|
||||||
|
aria-label="Weniger Portionen"
|
||||||
|
onClick={() => setPortions(Decimal.max(0.25, servings.minus(1)).toString())}
|
||||||
|
>
|
||||||
|
<Minus size={18} />
|
||||||
|
</button>
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
aria-label="Portionen"
|
||||||
|
type="number"
|
||||||
|
min="0.25"
|
||||||
|
step="0.25"
|
||||||
|
value={servings.toDecimalPlaces(4).toString()}
|
||||||
|
onChange={(e) => setPortions(e.target.value)}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter') e.currentTarget.blur();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span>Portionen</span>
|
||||||
|
</label>
|
||||||
|
<button
|
||||||
|
aria-label="Mehr Portionen"
|
||||||
|
onClick={() => setPortions(servings.plus(1).toString())}
|
||||||
|
>
|
||||||
|
<Plus size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="calculator-hint">
|
||||||
|
<Sparkles size={18} /> Tippe auf eine Zutatenmenge und gib ein, wie viel du hast.
|
||||||
|
Alles andere passt sich an.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{error && (
|
||||||
|
<p className="error" role="alert">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
className="reset-link"
|
||||||
|
onClick={() => {
|
||||||
|
setFactor('1');
|
||||||
|
setError('');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<RotateCcw size={13} /> Originalmengen wiederherstellen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<ul className="ingredient-list">
|
||||||
|
{r.ingredients.map((i, n) => (
|
||||||
|
<li key={i.id} className={checked.includes(i.id) ? 'is-checked' : ''}>
|
||||||
|
{i.section && (n === 0 || r.ingredients[n - 1].section !== i.section) && (
|
||||||
|
<h4>{i.section}</h4>
|
||||||
|
)}
|
||||||
|
<div className="ingredient-line">
|
||||||
|
<button
|
||||||
|
className="check-box no-print"
|
||||||
|
aria-label={`${i.name} abhaken`}
|
||||||
|
aria-pressed={checked.includes(i.id)}
|
||||||
|
onClick={() =>
|
||||||
|
setChecked(
|
||||||
|
checked.includes(i.id)
|
||||||
|
? checked.filter((x) => x !== i.id)
|
||||||
|
: [...checked, i.id],
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{checked.includes(i.id) && <Check size={14} />}
|
||||||
|
</button>
|
||||||
|
<span className="ingredient-name">
|
||||||
|
{i.name}
|
||||||
|
{i.optional && <small>optional</small>}
|
||||||
|
{i.note && i.amount !== null && <small>{i.note}</small>}
|
||||||
|
</span>
|
||||||
|
<AmountInput
|
||||||
|
ingredient={i}
|
||||||
|
factor={factor}
|
||||||
|
onChange={(f) => {
|
||||||
|
setMode('ingredient');
|
||||||
|
setFactor(f);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<button className="button secondary full no-print" onClick={addShopping}>
|
||||||
|
<ShoppingBasket size={18} /> Zur Einkaufsliste hinzufügen
|
||||||
|
</button>
|
||||||
|
<p className="small muted no-print">Mengen werden immer vom Original berechnet.</p>
|
||||||
|
</aside>
|
||||||
|
<article className="preparation">
|
||||||
|
<div className="section-heading">
|
||||||
|
<h2>So wird’s gemacht.</h2>
|
||||||
|
<span className="eyebrow">SCHRITT FÜR SCHRITT</span>
|
||||||
|
</div>
|
||||||
|
<div className="time-breakdown">
|
||||||
|
<span>
|
||||||
|
Vorbereiten <strong>{r.prepMinutes} Min.</strong>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Kochen <strong>{r.cookMinutes} Min.</strong>
|
||||||
|
</span>
|
||||||
|
{r.restMinutes > 0 && (
|
||||||
|
<span>
|
||||||
|
Ruhen <strong>{r.restMinutes} Min.</strong>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<ol className="steps-list">
|
||||||
|
{r.steps.map((s, n) => (
|
||||||
|
<li key={s.id}>
|
||||||
|
<span className="step-number">{String(n + 1).padStart(2, '0')}</span>
|
||||||
|
<div>
|
||||||
|
<h3>{s.title || `Schritt ${n + 1}`}</h3>
|
||||||
|
<p>{renderStep(s.text, r, factor)}</p>
|
||||||
|
{s.timers.map((t) => (
|
||||||
|
<span className="timer-tag" key={t.id}>
|
||||||
|
<Clock3 size={14} />
|
||||||
|
{t.label} · {formatAmount(t.seconds / 60)} Min.
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
{r.tips && (
|
||||||
|
<section className="tip-card">
|
||||||
|
<Sparkles size={22} />
|
||||||
|
<div>
|
||||||
|
<h3>Das kleine Extra.</h3>
|
||||||
|
<p>{r.tips}</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
{r.storage && (
|
||||||
|
<section className="storage-card">
|
||||||
|
<h3>Für später aufheben</h3>
|
||||||
|
<p>{r.storage}</p>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
{r.nutrition && (
|
||||||
|
<section className="nutrition">
|
||||||
|
<h3>Nährwerte pro Originalportion</h3>
|
||||||
|
<div>
|
||||||
|
{Object.entries(r.nutrition).map(([key, v]) => (
|
||||||
|
<span key={key}>
|
||||||
|
<strong>
|
||||||
|
{v}
|
||||||
|
{key === 'kcal' ? '' : ' g'}
|
||||||
|
</strong>
|
||||||
|
{{ kcal: 'kcal', protein: 'Eiweiß', carbs: 'Kohlenhydrate', fat: 'Fett' }[key]}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
{r.images.length > 0 && (
|
||||||
|
<div className="image-gallery">
|
||||||
|
{r.images.map((image, n) => (
|
||||||
|
<a href={image} key={image} target="_blank" rel="noreferrer">
|
||||||
|
<img src={image} alt={`${r.title} – Ansicht ${n + 1}`} loading="lazy" />
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="tag-list">
|
||||||
|
{r.tags.map((t) => (
|
||||||
|
<Link href={`/?tag=${encodeURIComponent(t)}`} className="chip" key={t}>
|
||||||
|
{t}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
{related.length > 0 && (
|
||||||
|
<section className="related no-print">
|
||||||
|
<span className="eyebrow">DAS KÖNNTE DIR AUCH SCHMECKEN</span>
|
||||||
|
<h2>Noch eine gute Idee.</h2>
|
||||||
|
<div className="recipe-grid">
|
||||||
|
{related.map((r) => (
|
||||||
|
<RecipeCard key={r.id} recipe={r} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
<div className="mobile-cook-cta no-print">
|
||||||
|
<span>
|
||||||
|
{formatAmount(servings)} Portionen · {totalMinutes(r)} Min.
|
||||||
|
</span>
|
||||||
|
<Link href={`/rezepte/${r.id}/kochen?faktor=${factor}`} className="button primary">
|
||||||
|
<Flame size={18} /> Jetzt kochen
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,160 @@
|
|||||||
|
'use client';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { usePathname } from 'next/navigation';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import {
|
||||||
|
BookOpen,
|
||||||
|
Heart,
|
||||||
|
ShoppingBasket,
|
||||||
|
Moon,
|
||||||
|
Sun,
|
||||||
|
ChefHat,
|
||||||
|
Settings,
|
||||||
|
WifiOff,
|
||||||
|
X,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { readLocal, writeLocal } from '@/lib/client';
|
||||||
|
export function Shell({ children }: { children: React.ReactNode }) {
|
||||||
|
const pathname = usePathname(),
|
||||||
|
[theme, setTheme] = useState('system'),
|
||||||
|
[offline, setOffline] = useState(false),
|
||||||
|
[message, setMessage] = useState('');
|
||||||
|
useEffect(() => {
|
||||||
|
setTheme(readLocal('hamham:theme', 'system'));
|
||||||
|
const network = () => setOffline(!navigator.onLine);
|
||||||
|
network();
|
||||||
|
window.addEventListener('online', network);
|
||||||
|
window.addEventListener('offline', network);
|
||||||
|
const notification = (e: Event) => setMessage((e as CustomEvent).detail);
|
||||||
|
window.addEventListener('hamham:toast', notification);
|
||||||
|
if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js').catch(() => {});
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('online', network);
|
||||||
|
window.removeEventListener('offline', network);
|
||||||
|
window.removeEventListener('hamham:toast', notification);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
useEffect(() => {
|
||||||
|
const media = matchMedia('(prefers-color-scheme: dark)');
|
||||||
|
const update = () =>
|
||||||
|
(document.documentElement.dataset.theme =
|
||||||
|
theme === 'system' ? (media.matches ? 'dark' : 'light') : theme);
|
||||||
|
update();
|
||||||
|
media.addEventListener('change', update);
|
||||||
|
writeLocal('hamham:theme', theme);
|
||||||
|
return () => media.removeEventListener('change', update);
|
||||||
|
}, [theme]);
|
||||||
|
useEffect(() => {
|
||||||
|
if (!message) return;
|
||||||
|
const t = setTimeout(() => setMessage(''), 5500);
|
||||||
|
return () => clearTimeout(t);
|
||||||
|
}, [message]);
|
||||||
|
useEffect(() => {
|
||||||
|
if ('serviceWorker' in navigator && navigator.onLine)
|
||||||
|
navigator.serviceWorker.ready.then((registration) => {
|
||||||
|
registration.active?.postMessage({ type: 'CACHE_PAGE', url: window.location.href });
|
||||||
|
});
|
||||||
|
const navigateOffline = (event: MouseEvent) => {
|
||||||
|
if (
|
||||||
|
navigator.onLine ||
|
||||||
|
event.defaultPrevented ||
|
||||||
|
event.button !== 0 ||
|
||||||
|
event.metaKey ||
|
||||||
|
event.ctrlKey ||
|
||||||
|
event.shiftKey ||
|
||||||
|
event.altKey
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
const anchor = (event.target as Element)?.closest('a');
|
||||||
|
if (
|
||||||
|
!anchor ||
|
||||||
|
anchor.target === '_blank' ||
|
||||||
|
anchor.hasAttribute('download') ||
|
||||||
|
new URL(anchor.href).origin !== location.origin
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
location.assign(anchor.href);
|
||||||
|
};
|
||||||
|
document.addEventListener('click', navigateOffline, true);
|
||||||
|
return () => document.removeEventListener('click', navigateOffline, true);
|
||||||
|
}, [pathname]);
|
||||||
|
const cooking = pathname.endsWith('/kochen');
|
||||||
|
const nav = [
|
||||||
|
{ href: '/', title: 'Entdecken', icon: BookOpen },
|
||||||
|
{ href: '/favoriten', title: 'Lieblingsrezepte', icon: Heart },
|
||||||
|
{ href: '/einkaufsliste', title: 'Einkaufsliste', icon: ShoppingBasket },
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{!cooking && (
|
||||||
|
<header className="site-header">
|
||||||
|
<div className="header-inner">
|
||||||
|
<Link href="/" className="brand" aria-label="HamHam Startseite">
|
||||||
|
<span className="brand-icon">
|
||||||
|
<ChefHat size={25} />
|
||||||
|
</span>
|
||||||
|
HamHam<span className="brand-dot">.</span>
|
||||||
|
</Link>
|
||||||
|
<nav className="desktop-nav" aria-label="Hauptnavigation">
|
||||||
|
{nav.map((n) => (
|
||||||
|
<Link key={n.href} href={n.href} className={pathname === n.href ? 'active' : ''}>
|
||||||
|
{n.title}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
<div className="header-actions">
|
||||||
|
<button
|
||||||
|
className="icon-button"
|
||||||
|
title={`Darstellung: ${theme}. Klicken zum Wechseln.`}
|
||||||
|
aria-label="Theme wechseln"
|
||||||
|
onClick={() =>
|
||||||
|
setTheme(theme === 'system' ? 'dark' : theme === 'dark' ? 'light' : 'system')
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{theme === 'dark' ? <Moon size={20} /> : <Sun size={20} />}
|
||||||
|
</button>
|
||||||
|
<Link href="/admin" className="icon-button" aria-label="Administration">
|
||||||
|
<Settings size={20} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)}
|
||||||
|
{offline && (
|
||||||
|
<div className="offline-banner" role="status">
|
||||||
|
<WifiOff size={16} /> Du bist offline. Bereits geöffnete Rezepte und dein Kochfortschritt
|
||||||
|
bleiben verfügbar.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<main className={cooking ? 'cooking-main' : 'main'}>{children}</main>
|
||||||
|
{!cooking && (
|
||||||
|
<>
|
||||||
|
<footer className="site-footer">
|
||||||
|
<span className="serif">Gutes Essen. Gute Zeit.</span>
|
||||||
|
<span>
|
||||||
|
Deine Rezepte. Dein Zuhause. <span className="muted">HamHam</span>
|
||||||
|
</span>
|
||||||
|
</footer>
|
||||||
|
<nav className="mobile-nav" aria-label="Mobile Navigation">
|
||||||
|
{nav.map((n) => (
|
||||||
|
<Link key={n.href} href={n.href} className={pathname === n.href ? 'active' : ''}>
|
||||||
|
<n.icon size={21} />
|
||||||
|
<span>{n.title === 'Lieblingsrezepte' ? 'Favoriten' : n.title}</span>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{message && (
|
||||||
|
<div className="toast" role="status">
|
||||||
|
{message}
|
||||||
|
<button aria-label="Meldung schließen" onClick={() => setMessage('')}>
|
||||||
|
<X size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
'use client';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
export async function api<T = unknown>(path: string, method = 'GET', body?: unknown): Promise<T> {
|
||||||
|
const response = await fetch(`/api/${path}`, {
|
||||||
|
method,
|
||||||
|
headers: body === undefined ? {} : { 'Content-Type': 'application/json' },
|
||||||
|
body: body === undefined ? undefined : JSON.stringify(body),
|
||||||
|
cache: 'no-store',
|
||||||
|
});
|
||||||
|
const data = await response.json();
|
||||||
|
if (!response.ok) throw new Error(data.error ?? 'Anfrage fehlgeschlagen.');
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
export function readLocal<T>(key: string, fallback: T): T {
|
||||||
|
try {
|
||||||
|
const v = localStorage.getItem(key);
|
||||||
|
return v ? JSON.parse(v) : fallback;
|
||||||
|
} catch {
|
||||||
|
return fallback;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export function writeLocal(key: string, value: unknown) {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(key, JSON.stringify(value));
|
||||||
|
} catch {
|
||||||
|
window.dispatchEvent(
|
||||||
|
new CustomEvent('hamham:toast', {
|
||||||
|
detail:
|
||||||
|
'Browserspeicher ist voll oder gesperrt. Änderungen können nicht lokal gesichert werden.',
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export function useLocal<T>(key: string, initial: T) {
|
||||||
|
const [value, setValue] = useState(initial),
|
||||||
|
[ready, setReady] = useState(false);
|
||||||
|
useEffect(() => {
|
||||||
|
setValue(readLocal(key, initial));
|
||||||
|
setReady(true);
|
||||||
|
const sync = (event: Event) => {
|
||||||
|
const changedKey = event instanceof StorageEvent ? event.key : (event as CustomEvent).detail;
|
||||||
|
if (changedKey !== key) return;
|
||||||
|
const next = readLocal(key, initial);
|
||||||
|
setValue((previous) => (JSON.stringify(previous) === JSON.stringify(next) ? previous : next));
|
||||||
|
};
|
||||||
|
window.addEventListener('storage', sync);
|
||||||
|
window.addEventListener('hamham:storage', sync);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('storage', sync);
|
||||||
|
window.removeEventListener('hamham:storage', sync);
|
||||||
|
};
|
||||||
|
}, [key]);
|
||||||
|
useEffect(() => {
|
||||||
|
if (ready) {
|
||||||
|
writeLocal(key, value);
|
||||||
|
window.dispatchEvent(new CustomEvent('hamham:storage', { detail: key }));
|
||||||
|
}
|
||||||
|
}, [key, value, ready]);
|
||||||
|
return [value, setValue, ready] as const;
|
||||||
|
}
|
||||||
|
export function toast(message: string) {
|
||||||
|
window.dispatchEvent(new CustomEvent('hamham:toast', { detail: message }));
|
||||||
|
}
|
||||||
Reference in new issue
Block a user