add daily recommendation

Author: chlab

web/src/App.vue

@@ -260,6 +260,26 @@ const filteredMenuItems = computed(() => {
   return items;
 });
 
+// Get a seeded random number based on the current date (consistent for the whole day)
+const getSeededRandom = (seed) => {
+  const x = Math.sin(seed) * 10000;
+  return x - Math.floor(x);
+};
+
+// Daily recommendation - pick a random menu item (consistent for the day)
+const dailyRecommendation = computed(() => {
+  // Exclude foodtrucks as they aren't consistently there
+  const items = filteredMenuItems.value.filter(item => item.restaurant !== 'Foodtrucks');
+  if (items.length === 0) return null;
+
+  // Use date as seed so recommendation stays consistent throughout the day
+  const today = new Date();
+  const seed = today.getFullYear() * 10000 + (today.getMonth() + 1) * 100 + today.getDate();
+  const randomIndex = Math.floor(getSeededRandom(seed) * items.length);
+
+  return items[randomIndex];
+});
+
 // Group menu items by restaurant for display
 const groupedMenuItems = computed(() => {
   const items = filteredMenuItems.value;
@@ -357,12 +377,30 @@ onUnmounted(() => {
       </div>
       <!-- menu items list grouped by restaurant -->
       <div v-else-if="hasMenuForSelectedDay" class="space-y-6">
-        <div v-for="(group, groupIndex) in groupedMenuItems" :key="group.restaurant">
+        <!-- Daily recommendation -->
+        <div v-if="dailyRecommendation" class="mb-6">
           <div class="flex items-center justify-between mb-3 max-w-md mx-auto">
-            <h2 class="text-lg font-semibold text-gray-700">{{ group.restaurant }}</h2>
-            <ViewToggle v-if="groupIndex === 0" v-model:compactView="compactView" />
+            <h2 class="text-lg font-semibold text-gray-700">Tagesempfehlung</h2>
+            <ViewToggle v-model:compactView="compactView" />
           </div>
-          <div :class="compactView ? 'max-w-md mx-auto rounded-lg shadow-md overflow-hidden bg-white p-6' : 'space-y-4'">
+          <div :class="compactView ? 'max-w-md mx-auto rounded-lg shadow-md overflow-hidden bg-white p-4' : ''">
+            <MenuItem
+              :name="dailyRecommendation.name"
+              :description="dailyRecommendation.description"
+              :type="dailyRecommendation.type"
+              :link="dailyRecommendation.link || ''"
+              :icon="dailyRecommendation.icon || ''"
+              :restaurant="dailyRecommendation.restaurant || ''"
+              :foodtruck="dailyRecommendation.foodtruck || ''"
+              :compact="compactView"
+              :always-show-restaurant="true"
+            />
+          </div>
+        </div>
+
+        <div v-for="group in groupedMenuItems" :key="group.restaurant">
+          <h2 class="text-lg font-semibold text-gray-700 mb-3 max-w-md mx-auto">{{ group.restaurant }}</h2>
+          <div :class="compactView ? 'max-w-md mx-auto rounded-lg shadow-md overflow-hidden bg-white p-4' : 'space-y-4'">
             <MenuItem
               v-for="(item, index) in group.items"
               :key="index"

web/src/components/MenuItem.vue

@@ -36,6 +36,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  alwaysShowRestaurant: {
+    type: Boolean,
+    default: false
+  },
   foodtruck: {
     type: String,
     default: ""
@@ -52,7 +56,7 @@ const props = defineProps({
 <template>
   <div :class="[
     'bg-white relative',
-    compact ? 'px-2 py-2' : 'max-w-lg rounded-lg shadow-md mx-auto transition-transform duration-200 hover:scale-[1.02]'
+    compact ? 'px-2 py-2' : 'max-w-md rounded-lg shadow-md mx-auto transition-transform duration-200 hover:scale-[1.02]'
   ]">
     <div :class="compact ? '' : 'px-6 py-4 pb-6'">
       <!-- Title row with vegi icon -->
@@ -69,9 +73,9 @@ const props = defineProps({
         <MenuIcon v-if="icon && !compact" :icon="icon" />
         <p :class="[compact ? 'text-xs text-gray-500' : 'text-gray-600']">{{ description }}</p>
       </div>
-      <!-- Badges row (only shown if needed, hidden in compact mode) -->
-      <div v-if="!compact && ((restaurant && showRestaurant) || foodtruck)" class="mt-3 flex gap-2">
-        <div v-if="restaurant && showRestaurant" class="flex items-center px-3 py-1 bg-gray-200 rounded-full">
+      <!-- Badges row (only shown if needed, hidden in compact mode unless alwaysShowRestaurant) -->
+      <div v-if="(restaurant && alwaysShowRestaurant) || (!compact && ((restaurant && showRestaurant) || foodtruck))" class="mt-3 flex gap-2">
+        <div v-if="restaurant && (showRestaurant || alwaysShowRestaurant)" class="flex items-center px-3 py-1 bg-gray-200 rounded-full">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
             <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.015a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z" />
           </svg>