feat(booking): replace filter toggle with dedicated list view for today's bookings

apps/frontend/src/features/booking/booking.tsx

@@ -3,10 +3,11 @@ import { authClient } from '@/lib/api-client';
 import { useAuth } from '@/lib/auth';
 import type { ComplexWithRole } from '@repo/api-contract';
 import { useState } from 'react';
-import { BookingProvider } from './booking-provider';
+import { BookingProvider, useBooking } from './booking-provider';
 import { BookingCreateDialog } from './components/booking-create-dialog';
 import { BookingDaySummary, BookingQuickActions } from './components/booking-day-summary';
 import { BookingHeader } from './components/booking-header';
+import { BookingListView } from './components/booking-list-view';
 import { BookingMobile } from './components/booking-mobile';
 import { BookingTimeline } from './components/booking-timeline';
 import { BookingToolbar } from './components/booking-toolbar';
@@ -17,7 +18,6 @@ interface BookingProps {
 }
 
 export function Booking({ complex }: BookingProps) {
-  const isMobile = useIsMobile();
   const { user } = useAuth();
   const [sending, setSending] = useState(false);
   const [emailSent, setEmailSent] = useState(false);
@@ -56,21 +56,34 @@ export function Booking({ complex }: BookingProps) {
           </button>
         </div>
       )}
-      {isMobile ? (
-        <BookingMobile />
-      ) : (
-        <div className="flex flex-col gap-5">
-          <BookingHeader />
-          <BookingToolbar />
-          <BookingTimeline />
-          <div className="grid gap-5 xl:grid-cols-4">
-            <BookingDaySummary />
-            <BookingQuickActions />
-          </div>
-        </div>
-      )}
+      <BookingInner />
       <BookingCreateDialog />
       <BookingToolsDialog />
     </BookingProvider>
   );
 }
+
+function BookingInner() {
+  const { viewMode } = useBooking();
+  const isMobile = useIsMobile();
+
+  if (viewMode === 'list') {
+    return <BookingListView />;
+  }
+
+  if (isMobile) {
+    return <BookingMobile />;
+  }
+
+  return (
+    <div className="flex flex-col gap-5">
+      <BookingHeader />
+      <BookingToolbar />
+      <BookingTimeline />
+      <div className="grid gap-5 xl:grid-cols-4">
+        <BookingDaySummary />
+        <BookingQuickActions />
+      </div>
+    </div>
+  );
+}