Fix featured filters by removing Alpine v2 conflict.

Alpine v2 was overwriting Livewire 3's Alpine and blocking DOM updates, so month/language changes never refreshed the list. Default to all months and paginate 24-per-page so the full open-online set is browsable.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: bernardhanna

app/Livewire/OnlineCalendar.php

@@ -18,16 +18,15 @@ class OnlineCalendar extends Component
 
     public $selectedMonth;
 
-    public $selectedDate;
+    public $selectedDate = 'all';
 
     public $months = [];
 
     public function mount()
     {
         $this->selectedYear = Carbon::now()->year;
         $this->selectedMonth = Carbon::now()->month;
-        $this->selectedDate = $this->selectedMonth.'/'.$this->selectedYear;
-        // Default to all languages so the list is not silently reduced/restored by locale.
+        $this->selectedDate = 'all';
         $this->selectedLanguage = '';
 
         $this->months = $this->baseQuery()
@@ -48,13 +47,6 @@ public function mount()
             })
             ->values()
             ->toArray();
-
-        if (! empty($this->months)) {
-            $parts = explode('/', $this->months[0]['id']);
-            $this->selectedMonth = (int) $parts[0];
-            $this->selectedYear = (int) ($parts[1] ?? $this->selectedYear);
-            $this->selectedDate = $this->selectedMonth.'/'.$this->selectedYear;
-        }
     }
 
     public function updatedSelectedDate(): void
@@ -69,15 +61,18 @@ public function updatedSelectedLanguage(): void
 
     public function render()
     {
-        $parts = explode('/', (string) $this->selectedDate);
-        $this->selectedMonth = (int) ($parts[0] ?: $this->selectedMonth);
-        $this->selectedYear = (int) ($parts[1] ?? $this->selectedYear);
+        $query = $this->baseQuery()->orderBy('start_date');
 
-        $events = $this->baseQuery()
-            ->whereMonth('start_date', $this->selectedMonth)
-            ->whereYear('start_date', $this->selectedYear)
-            ->orderBy('start_date')
-            ->get();
+        if ($this->selectedDate && $this->selectedDate !== 'all') {
+            $parts = explode('/', (string) $this->selectedDate);
+            $this->selectedMonth = (int) ($parts[0] ?: $this->selectedMonth);
+            $this->selectedYear = (int) ($parts[1] ?? $this->selectedYear);
+
+            $query->whereMonth('start_date', $this->selectedMonth)
+                ->whereYear('start_date', $this->selectedYear);
+        }
+
+        $events = $query->get();
 
         $events->each(function ($event) {
             $event->title = str_limit($event->title, 50);
@@ -113,13 +108,17 @@ public function render()
             ->toArray();
 
         $totalUpcoming = $this->baseQuery()->count();
+        $monthLabel = $this->selectedDate === 'all' || ! $this->selectedDate
+            ? 'all upcoming months'
+            : Carbon::createFromDate($this->selectedYear, $this->selectedMonth, 1)->format('F Y');
 
         return view('livewire.online-calendar', [
             'countryNames' => $this->getCountryNamesFromEvents($events),
             'languages' => $languages,
-            'filteredEvents' => $filteredEvents->paginate(50),
+            'filteredEvents' => $filteredEvents->paginate(24),
             'totalUpcoming' => $totalUpcoming,
             'visibleCount' => $filteredEvents->count(),
+            'monthLabel' => $monthLabel,
         ]);
     }
 

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

@@ -13,11 +13,10 @@
                         wire:model.live="selectedDate"
                         class="w-full appearance-none rounded-full border border-slate-200 bg-white py-3 pl-12 pr-10 text-slate-500 font-semibold focus:outline-none focus:ring-2 focus:ring-[#1C4DA1]"
                     >
-                        @forelse($months as $month)
+                        <option value="all">All months</option>
+                        @foreach($months as $month)
                             <option value="{{ $month['id'] }}">{{ $month['name'] }}</option>
-                        @empty
-                            <option value="{{ $selectedDate }}">Select month</option>
-                        @endforelse
+                        @endforeach
                     </select>
                 </div>
             </div>
@@ -44,20 +43,20 @@ class="w-full appearance-none rounded-full border border-slate-200 bg-white py-3
         <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">
+            <div class="codeweek-container-lg relative pt-10 pb-16 md:pb-28" wire:key="calendar-{{ $selectedDate }}-{{ $selectedLanguage }}-{{ $filteredEvents->currentPage() }}">
                 <p class="text-center text-slate-500 text-lg mb-8">
                     Showing {{ $visibleCount }} of {{ $totalUpcoming }} upcoming open online activities
-                    @if($selectedDate)
-                        for {{ \Carbon\Carbon::createFromDate($selectedYear, $selectedMonth, 1)->format('F Y') }}
-                    @endif
+                    for {{ $monthLabel }}
                 </p>
                 @if(count($filteredEvents) > 0)
                     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 xl:gap-10">
                         @foreach($filteredEvents as $event)
-                            @include('online-calendar._oc-event-simple')
+                            <div wire:key="event-{{ $event->id }}">
+                                @include('online-calendar._oc-event-simple')
+                            </div>
                         @endforeach
                     </div>
-                    <div>
+                    <div class="mt-10">
                         {{ $filteredEvents->links('vendor.pagination') }}
                     </div>
                 @else

resources/views/online-calendar/oc-index.blade.php

@@ -16,7 +16,8 @@
 @include('components.tailwind')
 @include('components.livewire')
 
-@include('components.alpine')
+{{-- Do not include Alpine v2 here. Livewire 3 already ships Alpine v3;
+     loading Alpine v2 breaks Livewire DOM updates (filters appear to do nothing). --}}
 
 @section('content')
 <section id="codeweek-digital-girls" class="font-['Blinker'] overflow-hidden">