Öffentliche Speisekarte: Heute-Button, mobile Tages-/Wochenansicht

- "Heute" springt direkt zur aktuellen Woche
- Unter dem sm-Breakpoint umschaltbar zwischen Tag (Standard) und
  Woche statt der Tabelle; Desktop bleibt vollständig serverseitig
  gerendert, nur der mobile Umschalter ist eine Client-Komponente

app/page.tsx

@@ -1,15 +1,18 @@
 import Link from "next/link";
-import Image from "next/image";
 import { createClient } from "@/lib/supabase/server";
 import {
   addDays,
+  dishCodes,
+  entriesFor,
   formatDateLong,
   formatPrice,
   mondayOf,
+  todayISO,
   WEEKDAYS,
 } from "@/lib/menu";
-import { logoUrl } from "@/lib/types";
+import { logoUrl, SITE_TITLE } from "@/lib/types";
 import type { CodeItem, MenuEntry, Section } from "@/lib/types";
+import PublicMobileMenu from "@/components/PublicMobileMenu";
 
 export default async function Home({
   searchParams,
@@ -19,6 +22,7 @@ export default async function Home({
   const { woche } = await searchParams;
   const monday = mondayOf(woche);
   const friday = addDays(monday, 4);
+  const currentWeek = mondayOf(todayISO());
   const days = WEEKDAYS.map((weekday, i) => ({
     weekday,
     iso: addDays(monday, i),
@@ -30,7 +34,9 @@ export default async function Home({
       supabase.from("sections").select("*").order("sort"),
       supabase
         .from("menu_entries")
-        .select("id, menu_date, section_key, position, dish:dishes(id, name, price)")
+        .select(
+          "id, menu_date, section_key, position, dish:dishes(id, name, price, allergens, additives)"
+        )
         .gte("menu_date", monday)
         .lte("menu_date", friday)
         .order("position")
@@ -46,9 +52,6 @@ export default async function Home({
   const additives = (additivesRes.data ?? []) as CodeItem[];
   const logo = logoUrl(settingsRes.data?.logo_path);
 
-  const cell = (iso: string, sectionKey: string) =>
-    entries.filter((e) => e.menu_date === iso && e.section_key === sectionKey);
-
   return (
     <div className="flex-1 px-4 py-6 max-w-[1600px] mx-auto w-full">
       {/* Kopfbereich: Logo zentriert, Login-Link rechts */}
@@ -59,7 +62,7 @@ export default async function Home({
             <img src={logo} alt="Logo" className="h-20 object-contain" />
           ) : (
             <h1 className="text-4xl font-extrabold tracking-tight text-[var(--c-primary)]">
-              Speisekarte
+              {SITE_TITLE}
             </h1>
           )}
         </div>
@@ -71,54 +74,67 @@ export default async function Home({
         </Link>
       </header>
 
-      {/* Wochen-Navigation */}
-      <div className="flex gap-3 mb-4">
-        <Link href={`/?woche=${addDays(monday, -7)}`} className="btn btn-add">
-          ← Vorherige Woche
-        </Link>
-        <Link href={`/?woche=${addDays(monday, 7)}`} className="btn btn-add">
-          Nächste Woche →
-        </Link>
+      {/* Mobil: Tag (Standard) oder Woche umschaltbar */}
+      <PublicMobileMenu monday={monday} sections={sections} entries={entries} />
+
+      {/* Ab "sm": klassische Wochentabelle */}
+      <div className="hidden sm:block">
+        <div className="flex gap-3 mb-4">
+          <Link href={`/?woche=${addDays(monday, -7)}`} className="btn btn-add">
+            ← Vorherige Woche
+          </Link>
+          <Link href={`/?woche=${currentWeek}`} className="btn btn-primary">
+            Heute
+          </Link>
+          <Link href={`/?woche=${addDays(monday, 7)}`} className="btn btn-add">
+            Nächste Woche →
+          </Link>
+        </div>
+
+        <div className="overflow-x-auto">
+          <table className="menu-table">
+            <thead>
+              <tr>
+                <th className="section-head w-56" aria-hidden />
+                {days.map((d) => (
+                  <th key={d.iso} className="day-head">
+                    <span className="font-bold">{d.weekday}</span>
+                    <br />
+                    {formatDateLong(d.iso)}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {sections.map((s) => (
+                <tr key={s.key}>
+                  <th className="section-head">
+                    <div>{s.label}</div>
+                    <div className="time">{s.time_range}</div>
+                  </th>
+                  {days.map((d) => (
+                    <td key={d.iso} className="cell">
+                      {entriesFor(entries, d.iso, s.key).map((e) => {
+                        const codes = dishCodes(e.dish);
+                        return (
+                          <div key={e.id} className="dish">
+                            <span className="font-bold">{e.dish.name}</span>
+                            {codes && <sup className="dish-codes">{codes}</sup>}
+                            {" – "}
+                            {formatPrice(e.dish.price)}
+                          </div>
+                        );
+                      })}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
       </div>
 
-      {/* Speisekarte */}
-      <table className="menu-table">
-        <thead>
-          <tr>
-            <th className="section-head w-56" aria-hidden />
-            {days.map((d) => (
-              <th key={d.iso} className="day-head">
-                <span className="font-bold">{d.weekday}</span>
-                <br />
-                {formatDateLong(d.iso)}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {sections.map((s) => (
-            <tr key={s.key}>
-              <th className="section-head">
-                <div>{s.label}</div>
-                <div className="time">{s.time_range}</div>
-              </th>
-              {days.map((d) => (
-                <td key={d.iso} className="cell">
-                  {cell(d.iso, s.key).map((e) => (
-                    <div key={e.id} className="dish">
-                      <span className="font-bold">{e.dish.name}</span>
-                      {" – "}
-                      {formatPrice(e.dish.price)}
-                    </div>
-                  ))}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-
-      {/* Allergene & Zusatzstoffe (gelten für die komplette Speisekarte) */}
+      {/* Allergene & Zusatzstoffe: Legende zu den Kürzeln bei den Gerichten */}
       <section className="mt-8 grid gap-6 sm:grid-cols-2 text-sm text-gray-700">
         <div>
           <h2 className="font-bold text-[var(--c-primary)] mb-2">Allergene</h2>

components/PublicMobileMenu.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+// Mobile Ansicht der öffentlichen Speisekarte: Tag (Standard) oder Woche,
+// umschaltbar ohne Seiten-Reload. Ab dem "sm"-Breakpoint übernimmt die
+// normale Wochentabelle (siehe app/page.tsx), diese Komponente blendet
+// sich dort per CSS aus.
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import {
+  addDays,
+  dishCodes,
+  entriesFor,
+  formatDateLong,
+  formatPrice,
+  mondayOf,
+  todayISO,
+  weekdayIndex,
+  WEEKDAYS,
+  WEEKDAYS_SHORT,
+} from "@/lib/menu";
+import type { MenuEntry, Section } from "@/lib/types";
+
+export default function PublicMobileMenu({
+  monday,
+  sections,
+  entries,
+}: {
+  monday: string;
+  sections: Section[];
+  entries: MenuEntry[];
+}) {
+  const router = useRouter();
+  const days = WEEKDAYS.map((weekday, i) => ({
+    weekday,
+    short: WEEKDAYS_SHORT[i],
+    iso: addDays(monday, i),
+  }));
+  const isCurrentWeek = monday === mondayOf(todayISO());
+  const todayIdx = isCurrentWeek ? weekdayIndex(todayISO()) : -1;
+
+  const [tab, setTab] = useState<"tag" | "woche">("tag");
+  const [selectedIdx, setSelectedIdx] = useState(todayIdx >= 0 ? todayIdx : 0);
+
+  function goToday() {
+    const currentMonday = mondayOf(todayISO());
+    if (currentMonday === monday) {
+      const idx = weekdayIndex(todayISO());
+      setSelectedIdx(idx >= 0 ? idx : 0);
+      setTab("tag");
+    } else {
+      router.push(`/?woche=${currentMonday}`);
+    }
+  }
+
+  function renderDay(day: { weekday: string; iso: string }) {
+    return (
+      <div key={day.iso} className="mb-4 last:mb-0">
+        <h3 className="font-bold text-[var(--c-primary)] mb-2">
+          {day.weekday} · {formatDateLong(day.iso)}
+        </h3>
+        <div className="space-y-3">
+          {sections.map((s) => {
+            const items = entriesFor(entries, day.iso, s.key);
+            return (
+              <div
+                key={s.key}
+                className="rounded-md border border-gray-200 overflow-hidden"
+              >
+                <div className="bg-[var(--c-primary)] text-[var(--c-header-text)] px-3 py-1.5 text-sm">
+                  <span className="font-semibold">{s.label}</span>{" "}
+                  <span className="opacity-80">· {s.time_range}</span>
+                </div>
+                <div className="bg-[var(--c-row-bg)] px-3 py-2 text-sm">
+                  {items.length === 0 ? (
+                    <p className="text-gray-500">–</p>
+                  ) : (
+                    items.map((e) => {
+                      const codes = dishCodes(e.dish);
+                      return (
+                        <p key={e.id} className="mb-1 last:mb-0">
+                          <span className="font-semibold">{e.dish.name}</span>
+                          {codes && <sup className="dish-codes">{codes}</sup>}{" "}
+                          – {formatPrice(e.dish.price)}
+                        </p>
+                      );
+                    })
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="sm:hidden mb-6">
+      <div className="flex gap-2 mb-3">
+        <Link
+          href={`/?woche=${addDays(monday, -7)}`}
+          className="btn btn-add flex-1 justify-center"
+        >
+          ← Woche
+        </Link>
+        <button
+          type="button"
+          onClick={goToday}
+          className="btn btn-primary flex-1"
+        >
+          Heute
+        </button>
+        <Link
+          href={`/?woche=${addDays(monday, 7)}`}
+          className="btn btn-add flex-1 justify-center"
+        >
+          Woche →
+        </Link>
+      </div>
+
+      <div className="flex gap-2 mb-3" role="tablist" aria-label="Ansicht">
+        <button
+          type="button"
+          role="tab"
+          aria-selected={tab === "tag"}
+          onClick={() => setTab("tag")}
+          className={`btn flex-1 ${tab === "tag" ? "btn-primary" : "btn-neutral"}`}
+        >
+          Tag
+        </button>
+        <button
+          type="button"
+          role="tab"
+          aria-selected={tab === "woche"}
+          onClick={() => setTab("woche")}
+          className={`btn flex-1 ${tab === "woche" ? "btn-primary" : "btn-neutral"}`}
+        >
+          Woche
+        </button>
+      </div>
+
+      {tab === "tag" ? (
+        <>
+          <div className="flex gap-1 mb-3">
+            {days.map((d, i) => (
+              <button
+                key={d.iso}
+                type="button"
+                onClick={() => setSelectedIdx(i)}
+                className={`flex-1 rounded-md py-1.5 text-sm font-semibold border transition-colors ${
+                  i === selectedIdx
+                    ? "bg-[var(--c-primary)] text-white border-[var(--c-primary)]"
+                    : "bg-white text-gray-600 border-gray-200"
+                } ${i === todayIdx ? "ring-2 ring-[var(--c-accent)] ring-offset-1" : ""}`}
+              >
+                {d.short}
+              </button>
+            ))}
+          </div>
+          {renderDay(days[selectedIdx])}
+        </>
+      ) : (
+        <div>{days.map((d) => renderDay(d))}</div>
+      )}
+    </div>
+  );
+}

lib/menu.ts

@@ -2,6 +2,8 @@
 // Alle Berechnungen laufen über UTC, damit Server und Browser
 // unabhängig von der Zeitzone dieselbe Woche ermitteln.
 
+import type { MenuEntry } from "./types";
+
 const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
 
 function toDate(iso: string): Date {
@@ -31,7 +33,19 @@ export function addDays(iso: string, days: number): string {
   return toISO(d);
 }
 
+/** Heutiges Datum als YYYY-MM-DD (UTC). */
+export function todayISO(): string {
+  return toISO(new Date());
+}
+
+/** Index (0=Montag…4=Freitag) von `iso` innerhalb seiner Woche, sonst -1 (Wochenende). */
+export function weekdayIndex(iso: string): number {
+  const day = (toDate(iso).getUTCDay() + 6) % 7;
+  return day <= 4 ? day : -1;
+}
+
 export const WEEKDAYS = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag"];
+export const WEEKDAYS_SHORT = ["Mo", "Di", "Mi", "Do", "Fr"];
 
 /** z. B. "13. Juli 2026" */
 export function formatDateLong(iso: string): string {
@@ -47,3 +61,17 @@ export function formatDateLong(iso: string): string {
 export function formatPrice(price: number | string): string {
   return Number(price).toFixed(2).replace(".", ",") + "€";
 }
+
+/** Allergen-/Zusatzstoff-Kürzel eines Gerichts, z. B. "A,G,2" */
+export function dishCodes(dish: { allergens: string[]; additives: string[] }): string {
+  return [...(dish.allergens ?? []), ...(dish.additives ?? [])].join(",");
+}
+
+/** Einträge eines Tages/Bereichs aus der geladenen Wochenliste herausfiltern. */
+export function entriesFor(
+  entries: MenuEntry[],
+  iso: string,
+  sectionKey: string
+): MenuEntry[] {
+  return entries.filter((e) => e.menu_date === iso && e.section_key === sectionKey);
+}