refactor(bookings): let the phone plugin slots use the reservation detail plugin hook

ReservationPluginSlots in tabChrome repeated the plugin store selector
that useReservationDetailPlugins already holds for the desktop panels.
It now calls the hook, which gets its own test.

client/src/components/Planner/bookings/useReservationDetailPlugins.test.ts

@@ -0,0 +1,34 @@
+import { renderHook } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { usePluginStore } from '../../../store/pluginStore';
+import { useReservationDetailPlugins } from './useReservationDetailPlugins';
+
+type Plugins = ReturnType<typeof usePluginStore.getState>['plugins'];
+
+function seedPlugins(plugins: Array<{ id: string; type: string; slot?: string }>) {
+  usePluginStore.setState({ plugins: plugins as unknown as Plugins });
+}
+
+afterEach(() => {
+  usePluginStore.setState({ plugins: [] });
+});
+
+describe('useReservationDetailPlugins', () => {
+  it('keeps only the widgets that draw into a booking detail', () => {
+    seedPlugins([
+      { id: 'flights', type: 'widget', slot: 'reservation-detail' },
+      { id: 'side', type: 'widget' },
+      { id: 'place', type: 'widget', slot: 'place-detail' },
+      { id: 'page', type: 'page', slot: 'reservation-detail' },
+      { id: 'seats', type: 'widget', slot: 'reservation-detail' },
+    ]);
+    const { result } = renderHook(() => useReservationDetailPlugins());
+    expect(result.current.map((p) => p.id)).toEqual(['flights', 'seats']);
+  });
+
+  it('is empty without any such plugin', () => {
+    seedPlugins([{ id: 'side', type: 'widget' }]);
+    const { result } = renderHook(() => useReservationDetailPlugins());
+    expect(result.current).toEqual([]);
+  });
+});

client/src/mobile/screens/trip/tabs/tabChrome.tsx

@@ -4,7 +4,7 @@ import type { ReservationTraveler } from '@trek/shared'
 import { avatarSrc } from '../../../../utils/avatarSrc'
 import GuestBadge from '../../../../components/shared/GuestBadge'
 import PluginFrame from '../../../../components/Plugins/PluginFrame'
-import { usePluginStore } from '../../../../store/pluginStore'
+import { useReservationDetailPlugins } from '../../../../components/Planner/bookings/useReservationDetailPlugins'
 
 /**
  * Scroll body shared by the list-style trip tabs (transports, bookings, costs,
@@ -133,7 +133,7 @@ export function StatusDot({ color }: { color: string }) {
  * kit plugin that goes dark with TREK keeps compositing transparently.
  */
 export function ReservationPluginSlots({ tripId, reservationId }: { tripId: number; reservationId: number }) {
-  const plugins = usePluginStore(s => s.plugins).filter(p => p.type === 'widget' && p.slot === 'reservation-detail')
+  const plugins = useReservationDetailPlugins()
   if (plugins.length === 0) return null
   return (
     <div className="flex flex-col gap-2 px-3 pb-3">