Fix featured activities filters (malformed component markup)

app/Event.php

@@ -139,6 +139,61 @@ public function getLanguagesAttribute() {
         return $this->language;
     }
 
+    /**
+     * Language codes that have a translation, so views never print raw keys
+     * such as "base.languages.eng" for legacy 3-letter codes.
+     */
+    public function getDisplayLanguagesAttribute(): array
+    {
+        $raw = $this->languages ?? [];
+
+        if (is_string($raw)) {
+            $raw = str_starts_with(trim($raw), '[')
+                ? (json_decode($raw, true) ?: [])
+                : explode(',', $raw);
+        }
+
+        return collect(is_array($raw) ? $raw : [$raw])
+            ->map(fn ($language) => self::normalizeLanguageCode(is_string($language) ? $language : null))
+            ->filter()
+            ->unique()
+            ->values()
+            ->all();
+    }
+
+    public static function normalizeLanguageCode(?string $code): ?string
+    {
+        if ($code === null) {
+            return null;
+        }
+
+        $code = strtolower(trim($code, " \t\n\r\0\x0B\"'[]"));
+
+        if ($code === '') {
+            return null;
+        }
+
+        $aliases = [
+            'eng' => 'en',
+            'deu' => 'de',
+            'ger' => 'de',
+            'fra' => 'fr',
+            'fre' => 'fr',
+            'spa' => 'es',
+            'ita' => 'it',
+            'nld' => 'nl',
+            'dut' => 'nl',
+            'pol' => 'pl',
+            'tur' => 'tr',
+            'ell' => 'el',
+            'gre' => 'el',
+        ];
+
+        $code = $aliases[$code] ?? $code;
+
+        return trans()->has('base.languages.'.$code) ? $code : null;
+    }
+
     public function getUrlAttribute() {
         if (!empty($this->slug)) {
             return route('view_event', [

app/Livewire/OnlineCalendar.php

@@ -90,7 +90,7 @@ public function render()
         $languages = $this->baseQuery()
             ->get(['language'])
             ->flatMap(function ($event) {
-                return $this->normalizedLanguagesForEvent($event);
+                return $event->display_languages;
             })
             ->unique()
             ->sort()
@@ -134,81 +134,13 @@ private function baseQuery()
 
     private function eventMatchesLanguage($event, string $selectedLanguage): bool
     {
-        $selected = $this->normalizeLanguageCode($selectedLanguage);
+        $selected = Event::normalizeLanguageCode($selectedLanguage);
 
         if ($selected === null) {
             return false;
         }
 
-        return in_array($selected, $this->normalizedLanguagesForEvent($event), true);
-    }
-
-    private function normalizedLanguagesForEvent($event): array
-    {
-        $raw = $event->languages ?? $event->language ?? [];
-
-        if (is_string($raw)) {
-            $trimmed = trim($raw);
-            if ($trimmed === '') {
-                return [];
-            }
-
-            if (str_starts_with($trimmed, '[')) {
-                $decoded = json_decode($trimmed, true);
-                $raw = is_array($decoded) ? $decoded : preg_split('/\s*,\s*/', $trimmed);
-            } else {
-                $raw = preg_split('/\s*,\s*/', $trimmed);
-            }
-        }
-
-        if (! is_array($raw)) {
-            $raw = [$raw];
-        }
-
-        return collect($raw)
-            ->map(fn ($language) => $this->normalizeLanguageCode(is_string($language) ? $language : null))
-            ->filter()
-            ->unique()
-            ->values()
-            ->all();
-    }
-
-    private function normalizeLanguageCode(?string $code): ?string
-    {
-        if ($code === null) {
-            return null;
-        }
-
-        $code = strtolower(trim($code));
-        $code = trim($code, "\"'[] ");
-
-        if ($code === '') {
-            return null;
-        }
-
-        $aliases = [
-            'eng' => 'en',
-            'deu' => 'de',
-            'ger' => 'de',
-            'fra' => 'fr',
-            'fre' => 'fr',
-            'spa' => 'es',
-            'ita' => 'it',
-            'nld' => 'nl',
-            'dut' => 'nl',
-            'pol' => 'pl',
-            'tur' => 'tr',
-            'ell' => 'el',
-            'gre' => 'el',
-        ];
-
-        $code = $aliases[$code] ?? $code;
-
-        if (! trans()->has('base.languages.'.$code)) {
-            return null;
-        }
-
-        return $code;
+        return in_array($selected, $event->display_languages, true);
     }
 
     private function getCountryNamesFromEvents($events)

resources/views/livewire/online-calendar.blade.php

@@ -1,4 +1,3 @@
-
 <section class="bg-light-blue">
     <div class="py-10 flex md:justify-center codeweek-container">
         <div class="flex flex-col md:flex-row gap-4 w-full md:w-fit">
@@ -37,13 +36,13 @@ class="w-full appearance-none rounded-full border border-slate-200 bg-white py-3
         </div>
     </div>
 
-    <section class="relative w-full pt-10 md:pt-32">
-        <div class="absolute top-0 w-full h-64 bg-yellow-50 md:hidden" style="clip-path: ellipse(100% 90% at 50% 90%)" ></div>
-        <div class="absolute top-0 w-full h-64 bg-yellow-50 hidden md:block lg:hidden" style="clip-path: ellipse(75% 90% at 50% 90%)" ></div>
-        <div class="absolute top-0 w-full h-64 bg-yellow-50 hidden lg:block xl:hidden" style="clip-path: ellipse(70% 90% at 50% 90%)" ></div>
-        <div class="absolute top-0 w-full h-64 bg-yellow-50 hidden xl:block" style="clip-path: ellipse(65% 90% at 50% 90%)" ></div>
+    <div class="relative w-full pt-10 md:pt-32">
+        <div class="absolute top-0 w-full h-64 bg-yellow-50 md:hidden" style="clip-path: ellipse(100% 90% at 50% 90%)"></div>
+        <div class="absolute top-0 w-full h-64 bg-yellow-50 hidden md:block lg:hidden" style="clip-path: ellipse(75% 90% at 50% 90%)"></div>
+        <div class="absolute top-0 w-full h-64 bg-yellow-50 hidden lg:block xl:hidden" style="clip-path: ellipse(70% 90% at 50% 90%)"></div>
+        <div class="absolute top-0 w-full h-64 bg-yellow-50 hidden xl:block" style="clip-path: ellipse(65% 90% at 50% 90%)"></div>
         <div class="bg-yellow-50">
-            <div class="codeweek-container-lg relative pt-10 pb-16 md:pb-28" wire:key="calendar-{{ $selectedDate }}-{{ $selectedLanguage }}-{{ $filteredEvents->currentPage() }}">
+            <div class="codeweek-container-lg relative pt-10 pb-16 md:pb-28">
                 <p class="text-center text-slate-500 text-lg mb-8">
                     Showing {{ $visibleCount }} of {{ $totalUpcoming }} upcoming open online activities
                     for {{ $monthLabel }}

resources/views/online-calendar/_oc-event-simple.blade.php

@@ -13,13 +13,11 @@
         </div>
 
         <div class="flex gap-2 flex-wrap mb-2">
-            @if($event->language)
-                @foreach($event->languages as $language)
-                    <span class="flex items-center gap-2 py-1 px-3 text-sm font-semibold rounded-full whitespace-nowrap leading-4 bg-light-blue-100 text-slate-500">
-                        {{__("base.languages.{$language}")}}
-                    </span>
-                @endforeach
-            @endif
+            @foreach($event->display_languages as $language)
+                <span class="flex items-center gap-2 py-1 px-3 text-sm font-semibold rounded-full whitespace-nowrap leading-4 bg-light-blue-100 text-slate-500">
+                    {{__("base.languages.{$language}")}}
+                </span>
+            @endforeach
         </div>