Ö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>