fix(planner): booking codes stay blurred in the edit forms too

With "Blur booking codes" on, the bookings list and the transport details
hid a code, but opening the same booking to edit it printed the code in
the clear: the reservation and transport forms with every per-segment
code of a flight or train, the hotel editor in the day panel and the
three phone sheets. The stay's own code in the day panel, the booking
strip in the place inspector and the booking lines under a stay and a
stop on the phone showed it plainly as well.

One shared BookingCodeInput and BlurredCode now carry the setting to all
of them. A filled code field stays blurred until it is hovered or
focused, so clicking, tapping or tabbing into it still reveals the code
for editing, and the value is saved exactly as typed. With the setting
off nothing changes, and the PDF export and the share pages stay as
they were.

client/src/components/Planner/DayDetailPanel.test.tsx

@@ -1,4 +1,4 @@
-// FE-PLANNER-DAYDETAIL-001 to FE-PLANNER-DAYDETAIL-080
+// FE-PLANNER-DAYDETAIL-001 to FE-PLANNER-DAYDETAIL-084
 import React from 'react';
 import { fireEvent, render, screen, waitFor, within, act } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
@@ -12,6 +12,7 @@ import { usePluginStore } from '../../store/pluginStore';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
 import { buildUser, buildAdmin, buildTrip, buildDay, buildPlace, buildReservation } from '../../../tests/helpers/factories';
 import DayDetailPanel from './DayDetailPanel';
+import { isBlurred } from '../../../tests/helpers/bookingCodeBlur';
 
 const day = buildDay({ id: 1, trip_id: 1, date: '2025-06-15', title: 'Day in Paris' });
 
@@ -1896,3 +1897,80 @@ describe('DayDetailPanel time format', () => {
     expect(screen.getByText('11:00')).toBeInTheDocument();
   });
 });
+
+// ── Blur booking codes: the stay's own code and the hotel editor (#2457) ────
+
+describe('DayDetailPanel blur booking codes (#2457)', () => {
+  beforeEach(() => {
+    server.use(http.get('/api/view-contributions/:view/:tripId', () => HttpResponse.json({ contributions: [] })));
+  });
+
+  const blurOn = (on: boolean) => seedStore(useSettingsStore, {
+    settings: { time_format: '24h', temperature_unit: 'celsius', blur_booking_codes: on },
+  });
+  const stayWithCode = (confirmation: string) => server.use(
+    http.get('/api/trips/1/accommodations', () =>
+      HttpResponse.json({
+        accommodations: [{
+          id: 1, place_id: 5, place_name: 'Code Hotel', place_address: 'Paris',
+          start_day_id: 1, end_day_id: 3, check_in: '14:00', check_out: '11:00', confirmation,
+        }],
+      })
+    ),
+  );
+  const openHotelEditor = async () => {
+    await screen.findByText('Code Hotel');
+    // header collapse (0), header close (1), pencil (2), remove (3), as in DAYDETAIL-032
+    await userEvent.click(screen.getAllByRole('button')[2]);
+    await waitFor(() => {
+      expect(document.body.querySelector('[style*="z-index: 99999"]')?.textContent).toMatch(/Edit accommodation/i);
+    });
+  };
+
+  it('FE-PLANNER-DAYDETAIL-081: the confirmation code of the stay itself is blurred in the details grid', async () => {
+    blurOn(true);
+    stayWithCode('HOTEL-SECRET');
+    render(<DayDetailPanel {...defaultProps} />);
+    const code = await screen.findByText('HOTEL-SECRET');
+    expect(isBlurred(code)).toBe(true);
+  });
+
+  it('FE-PLANNER-DAYDETAIL-082: the confirmation field of the hotel editor is blurred until focused', async () => {
+    blurOn(true);
+    stayWithCode('HOTEL-SECRET');
+    render(<DayDetailPanel {...defaultProps} />);
+    await openHotelEditor();
+    const field = screen.getByDisplayValue('HOTEL-SECRET') as HTMLInputElement;
+    expect(isBlurred(field)).toBe(true);
+    act(() => field.focus());
+    expect(isBlurred(field)).toBe(false);
+    act(() => field.blur());
+    expect(isBlurred(field)).toBe(true);
+  });
+
+  it('FE-PLANNER-DAYDETAIL-083: with the setting off the stay code and the editor field stay plain', async () => {
+    blurOn(false);
+    stayWithCode('HOTEL-PLAIN');
+    render(<DayDetailPanel {...defaultProps} />);
+    expect(isBlurred(await screen.findByText('HOTEL-PLAIN'))).toBe(false);
+    await openHotelEditor();
+    expect(isBlurred(screen.getByDisplayValue('HOTEL-PLAIN'))).toBe(false);
+  });
+
+  it('FE-PLANNER-DAYDETAIL-084: a blurred code in the hotel editor still saves unchanged', async () => {
+    blurOn(true);
+    let body: Record<string, unknown> | null = null;
+    stayWithCode('HOTEL-SECRET');
+    server.use(
+      http.put('/api/trips/1/accommodations/1', async ({ request }) => {
+        body = await request.json() as Record<string, unknown>;
+        return HttpResponse.json({ accommodation: { id: 1, place_id: 5, place_name: 'Code Hotel', start_day_id: 1, end_day_id: 3, confirmation: 'HOTEL-SECRET' } });
+      }),
+    );
+    render(<DayDetailPanel {...defaultProps} places={[buildPlace({ id: 5, name: 'Code Hotel' })]} />);
+    await openHotelEditor();
+    await userEvent.click(screen.getByText(/Save/i));
+    await waitFor(() => expect(body).not.toBeNull());
+    expect(body!.confirmation).toBe('HOTEL-SECRET');
+  });
+});

client/src/components/Planner/DayDetailPanel.tsx

@@ -13,6 +13,7 @@ import { useTripStore } from '../../store/tripStore'
 import { applyStayStops } from '../../store/stayStops'
 import CustomSelect from '../shared/CustomSelect'
 import CustomTimePicker from '../shared/CustomTimePicker'
+import { BlurredCode, BookingCodeInput } from '../shared/BookingCode'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useToast } from '../shared/Toast'
 import { getLocaleForLanguage, useTranslation } from '../../i18n'
@@ -453,7 +454,7 @@ function AccommodationList({ dayAccommodations, day, reservations, canEditDays,
                         )}
                         {acc.confirmation && (
                           <div style={{ flex: 1, padding: '8px 10px', textAlign: 'center' }}>
-                            <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.2 }}>{acc.confirmation}</div>
+                            <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.2 }}><BlurredCode>{acc.confirmation}</BlurredCode></div>
                             <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', fontWeight: 500, marginTop: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3 }}>
                               <Hash size={8} /> {t('day.confirmation')}
                             </div>
@@ -632,7 +633,7 @@ function HotelPickerModal({ showHotelPicker, setShowHotelPicker, font, t, hotelD
                     </div>
                     <div style={{ flex: 2, minWidth: 120 }}>
                       <label style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.04em', display: 'block', marginBottom: 3 }}>{t('day.confirmation')}</label>
-                      <input type="text" value={hotelForm.confirmation} onChange={e => setHotelForm(f => ({ ...f, confirmation: e.target.value }))}
+                      <BookingCodeInput value={hotelForm.confirmation} onChange={e => setHotelForm(f => ({ ...f, confirmation: e.target.value }))}
                         placeholder="ABC-12345" style={{ width: '100%', padding: '8px 10px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)', fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontFamily: 'inherit', boxSizing: 'border-box', height: 38 }} />
                     </div>
                   </div>

client/src/components/Planner/PlaceInspector.test.tsx

@@ -12,6 +12,7 @@ import { usePermissionsStore } from '../../store/permissionsStore';
 import { http, HttpResponse } from 'msw';
 import { server } from '../../../tests/helpers/msw/server';
 import type { AssignmentsMap } from '../../types';
+import { isBlurred } from '../../../tests/helpers/bookingCodeBlur';
 
 // ── Module mocks ──────────────────────────────────────────────────────────────
 
@@ -1565,3 +1566,25 @@ describe('PlaceInspector', () => {
     expect(screen.queryByText('Remove from Day')).toBeNull();
   });
 })
+
+// ── Blur booking codes on the linked-booking strip (#2457) ────────────────────
+
+describe('PlaceInspector blur booking codes (#2457)', () => {
+  const renderWithBooking = (blur: boolean) => {
+    seedStore(useSettingsStore, { settings: { time_format: '24h', temperature_unit: 'celsius', blur_booking_codes: blur } });
+    const res = { ...buildReservation({ id: 3, title: 'Dinner at Jules Verne', status: 'confirmed', confirmation_number: 'TABLE-SECRET' }), assignment_id: 9 };
+    render(<PlaceInspector {...defaultProps} selectedDayId={1} selectedAssignmentId={9}
+      assignments={{ '1': [{ id: 9, place, place_id: place.id, day_id: 1, order_index: 0, notes: null }] }}
+      reservations={[res]} onEditReservation={vi.fn()} />);
+  };
+
+  it('FE-PLANNER-INSPECTOR-103: the booking code on the linked-booking strip is blurred while the setting is on', () => {
+    renderWithBooking(true);
+    expect(isBlurred(screen.getByText(/TABLE-SECRET/))).toBe(true);
+  });
+
+  it('FE-PLANNER-INSPECTOR-104: with the setting off the strip shows the code plainly', () => {
+    renderWithBooking(false);
+    expect(isBlurred(screen.getByText(/TABLE-SECRET/))).toBe(false);
+  });
+});

client/src/components/Planner/PlaceInspector.tsx

@@ -10,6 +10,7 @@ import { markdownLinkComponents } from '../shared/markdownLink'
 import { X, Clock, MapPin, ExternalLink, Phone, Banknote, Edit2, Trash2, Plus, Minus, ChevronDown, ChevronUp, FileText, Upload, File, FileImage, Star, Navigation, Map as MapIcon, Users, Mountain, TrendingUp, Bookmark, BookmarkCheck, Copy, Route, StickyNote } from 'lucide-react'
 import PlaceAvatar from '../shared/PlaceAvatar'
 import PlaceAvatarUpload from '../shared/PlaceAvatarUpload'
+import { BlurredCode } from '../shared/BookingCode'
 import PlaceRating from '../shared/StarRating'
 import TrackColorPicker from '../shared/TrackColorPicker'
 import { resolveTrackColor, inheritedTrackColor } from '../Map/trackColors'
@@ -960,7 +961,7 @@ function PlaceReservationParticipants({ selectedAssignmentId, reservations, assi
                             {res.confirmation_number && (
                               <div>
                                 <div className="text-content-faint" style={{ fontSize: 'calc(8px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase' }}>{t('reservations.confirmationCode')}</div>
-                                <div className="text-content" style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 500, marginTop: 1 }}>{res.confirmation_number}</div>
+                                <div className="text-content" style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 500, marginTop: 1 }}><BlurredCode>{res.confirmation_number}</BlurredCode></div>
                               </div>
                             )}
                           </div>

client/src/components/Planner/ReservationModal.test.tsx

@@ -1,11 +1,13 @@
-// FE-PLANNER-RESMODAL-001 to FE-PLANNER-RESMODAL-095
-import { render, screen, waitFor, fireEvent, within } from '../../../tests/helpers/render';
+// FE-PLANNER-RESMODAL-001 to FE-PLANNER-RESMODAL-100
+import { render, screen, waitFor, fireEvent, within, act } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
 import { server } from '../../../tests/helpers/msw/server';
 import { useAuthStore } from '../../store/authStore';
 import { useTripStore } from '../../store/tripStore';
 import { useAddonStore } from '../../store/addonStore';
+import { useSettingsStore } from '../../store/settingsStore';
+import { isBlurred } from '../../../tests/helpers/bookingCodeBlur';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
 import {
   buildUser,
@@ -1566,4 +1568,57 @@ describe('ReservationModal', () => {
     expect(times[0].value).toBe('16:00');
     expect(times[2].value).toBe('10:30');
   });
+
+  // ── Blur booking codes in the edit form (#2457) ─────────────────────────────
+
+  describe('blur booking codes (#2457)', () => {
+    const blurOn = (on: boolean) => seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: on } });
+
+    it('FE-PLANNER-RESMODAL-096: the booking code field is blurred while the setting is on and the field is not focused', () => {
+      blurOn(true);
+      const res = buildReservation({ type: 'restaurant', confirmation_number: 'PNR-SECRET' });
+      render(<ReservationModal {...defaultProps} reservation={res} />);
+      const code = screen.getByDisplayValue('PNR-SECRET');
+      expect(isBlurred(code)).toBe(true);
+    });
+
+    it('FE-PLANNER-RESMODAL-097: a hotel booking hides its code the same way', () => {
+      blurOn(true);
+      const res = buildReservation({ type: 'hotel', title: 'Hotel Adlon', confirmation_number: 'HOTEL-SECRET' });
+      render(<ReservationModal {...defaultProps} reservation={res} />);
+      expect(isBlurred(screen.getByDisplayValue('HOTEL-SECRET'))).toBe(true);
+    });
+
+    it('FE-PLANNER-RESMODAL-098: focusing the field reveals the code for editing, leaving it hides it again', () => {
+      blurOn(true);
+      const res = buildReservation({ type: 'restaurant', confirmation_number: 'PNR-SECRET' });
+      render(<ReservationModal {...defaultProps} reservation={res} />);
+      const code = screen.getByDisplayValue('PNR-SECRET') as HTMLInputElement;
+      expect(isBlurred(code)).toBe(true);
+      act(() => code.focus());
+      expect(isBlurred(code)).toBe(false);
+      act(() => code.blur());
+      expect(isBlurred(code)).toBe(true);
+    });
+
+    it('FE-PLANNER-RESMODAL-099: with the setting off the code stays plain', () => {
+      blurOn(false);
+      const res = buildReservation({ type: 'restaurant', confirmation_number: 'PNR-PLAIN' });
+      render(<ReservationModal {...defaultProps} reservation={res} />);
+      expect(isBlurred(screen.getByDisplayValue('PNR-PLAIN'))).toBe(false);
+    });
+
+    it('FE-PLANNER-RESMODAL-100: a blurred code still saves unchanged, and an edit typed into it is kept', async () => {
+      blurOn(true);
+      const onSave = vi.fn().mockResolvedValue(undefined);
+      const res = buildReservation({ type: 'restaurant', title: 'Dinner', confirmation_number: 'PNR-SECRET' });
+      render(<ReservationModal {...defaultProps} onSave={onSave} reservation={res} />);
+      const code = screen.getByDisplayValue('PNR-SECRET');
+      await userEvent.clear(code);
+      await userEvent.type(code, 'PNR-NEW');
+      await userEvent.click(screen.getByRole('button', { name: /^Update$/i }));
+      await waitFor(() => expect(onSave).toHaveBeenCalled());
+      expect(onSave.mock.calls[0][0].confirmation_number).toBe('PNR-NEW');
+    });
+  });
 });

client/src/components/Planner/ReservationModal.tsx

@@ -6,6 +6,7 @@ import { useTripStore } from '../../store/tripStore'
 import { useAddonStore } from '../../store/addonStore'
 import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
+import { BookingCodeInput } from '../shared/BookingCode'
 import { buildAssignmentOptions } from './assignmentOptions'
 import AddressInput from './AddressInput'
 import { Hotel, Utensils, Ticket, FileText, Users, Paperclip, X, ExternalLink, Link2, ParkingSquare } from 'lucide-react'
@@ -559,7 +560,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           <div>
             <label className={labelClass}>{t('reservations.confirmationCode')}</label>
-            <input type="text" value={form.confirmation_number} onChange={e => set('confirmation_number', e.target.value)}
+            <BookingCodeInput value={form.confirmation_number} onChange={e => set('confirmation_number', e.target.value)}
               placeholder={t('reservations.confirmationPlaceholder')} className={inputClass} />
           </div>
           <div>

client/src/components/Planner/TransportModal.test.tsx

@@ -1,11 +1,13 @@
-// FE-PLANNER-TRANSMODAL-001 to FE-PLANNER-TRANSMODAL-064
-import { render, screen, waitFor, fireEvent, within } from '../../../tests/helpers/render';
+// FE-PLANNER-TRANSMODAL-001 to FE-PLANNER-TRANSMODAL-070
+import { render, screen, waitFor, fireEvent, within, act } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
 import { server } from '../../../tests/helpers/msw/server';
 import { useAuthStore } from '../../store/authStore';
 import { useTripStore } from '../../store/tripStore';
 import { useAddonStore } from '../../store/addonStore';
+import { useSettingsStore } from '../../store/settingsStore';
+import { isBlurred } from '../../../tests/helpers/bookingCodeBlur';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
 import {
   buildUser,
@@ -1357,4 +1359,83 @@ describe('TransportModal', () => {
     expect(screen.getByText(/Orsay/)).toBeInTheDocument();
     expect(screen.queryByText('Louvre')).not.toBeInTheDocument();
   });
+
+  // ── Blur booking codes in the edit form (#2457) ─────────────────────────────
+
+  describe('blur booking codes (#2457)', () => {
+    const blurOn = (on: boolean) => seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: on } });
+    const codeFields = () => screen.getAllByPlaceholderText('e.g. ABC12345') as HTMLInputElement[];
+
+    function multiLegTrain(): Reservation {
+      const res = buildReservation({ id: 32, title: 'Osaka → Kyoto → Nara', type: 'train' });
+      return Object.assign(res, {
+        day_id: 10,
+        end_day_id: 10,
+        confirmation_number: 'RAIL-BOOK',
+        metadata: {
+          legs: [
+            { from: 'Osaka', to: 'Kyoto', train_number: 'JR 1', confirmation_number: 'RAIL-LEG1', dep_day_id: 10, dep_time: '08:00', arr_day_id: 10, arr_time: '08:30' },
+            { from: 'Kyoto', to: 'Nara', train_number: 'JR 2', confirmation_number: 'RAIL-LEG2', dep_day_id: 10, dep_time: '09:00', arr_day_id: 10, arr_time: '09:45' },
+          ],
+        },
+        endpoints: [
+          { id: 11, reservation_id: 32, role: 'from', sequence: 0, name: 'Osaka Station', code: null, lat: 34.7, lng: 135.5, timezone: 'Asia/Tokyo', local_date: '2026-08-01', local_time: '08:00' },
+          { id: 12, reservation_id: 32, role: 'stop', sequence: 1, name: 'Kyoto Station', code: null, lat: 34.98, lng: 135.75, timezone: 'Asia/Tokyo', local_date: '2026-08-01', local_time: '09:00' },
+          { id: 13, reservation_id: 32, role: 'to', sequence: 2, name: 'Nara Station', code: null, lat: 34.68, lng: 135.82, timezone: 'Asia/Tokyo', local_date: '2026-08-01', local_time: '09:45' },
+        ],
+      }) as unknown as Reservation;
+    }
+
+    it('FE-PLANNER-TRANSMODAL-065: the flight booking code field is blurred while the setting is on', () => {
+      blurOn(true);
+      const res = buildReservation({ title: 'LH 400', type: 'flight', confirmation_number: 'FLY-SECRET' });
+      render(<TransportModal {...defaultProps} reservation={res} />);
+      expect(isBlurred(screen.getByDisplayValue('FLY-SECRET'))).toBe(true);
+    });
+
+    it('FE-PLANNER-TRANSMODAL-066: every per-segment code of a stopover flight is blurred as well', () => {
+      blurOn(true);
+      render(<TransportModal {...defaultProps} days={routeDays} reservation={multiLegFlight()} />);
+      const codes = codeFields();
+      expect(codes.map(i => i.value)).toEqual(['ABC123', 'XYZ789', 'BOOK1']);
+      expect(codes.map(i => isBlurred(i))).toEqual([true, true, true]);
+    });
+
+    it('FE-PLANNER-TRANSMODAL-067: every per-segment code of a multi-leg train is blurred as well', () => {
+      blurOn(true);
+      render(<TransportModal {...defaultProps} days={routeDays} reservation={multiLegTrain()} />);
+      const codes = codeFields();
+      expect(codes.map(i => i.value)).toEqual(['RAIL-LEG1', 'RAIL-LEG2', 'RAIL-BOOK']);
+      expect(codes.map(i => isBlurred(i))).toEqual([true, true, true]);
+    });
+
+    it('FE-PLANNER-TRANSMODAL-068: focusing a code field reveals it for editing, leaving it hides it again', () => {
+      blurOn(true);
+      const res = buildReservation({ title: 'LH 400', type: 'flight', confirmation_number: 'FLY-SECRET' });
+      render(<TransportModal {...defaultProps} reservation={res} />);
+      const code = screen.getByDisplayValue('FLY-SECRET') as HTMLInputElement;
+      expect(isBlurred(code)).toBe(true);
+      act(() => code.focus());
+      expect(isBlurred(code)).toBe(false);
+      act(() => code.blur());
+      expect(isBlurred(code)).toBe(true);
+    });
+
+    it('FE-PLANNER-TRANSMODAL-069: with the setting off every code field stays plain', () => {
+      blurOn(false);
+      render(<TransportModal {...defaultProps} days={routeDays} reservation={multiLegFlight()} />);
+      expect(codeFields().map(i => isBlurred(i))).toEqual([false, false, false]);
+    });
+
+    it('FE-PLANNER-TRANSMODAL-070: blurred codes still save unchanged', async () => {
+      blurOn(true);
+      const onSave = vi.fn().mockResolvedValue(undefined);
+      render(<TransportModal {...defaultProps} days={routeDays} reservation={multiLegFlight()} onSave={onSave} />);
+      await userEvent.click(screen.getByRole('button', { name: /^Update$/i }));
+      await waitFor(() => expect(onSave).toHaveBeenCalled());
+      const payload = onSave.mock.calls[0][0];
+      expect(payload.metadata.legs.map((l: { confirmation_number?: string }) => l.confirmation_number)).toEqual(['ABC123', 'XYZ789']);
+      expect(payload.confirmation_number).toBe('BOOK1');
+    });
+  });
 });

client/src/components/Planner/TransportModal.tsx

@@ -3,6 +3,7 @@ import { useParams } from 'react-router'
 import { Plane, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route, TramFront, Paperclip, FileText, X, ExternalLink, Link2, Plus, Trash2, ChevronUp, ChevronDown } from 'lucide-react'
 import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
+import { BookingCodeInput } from '../shared/BookingCode'
 import CustomTimePicker from '../shared/CustomTimePicker'
 import AirportSelect, { type Airport } from './AirportSelect'
 import LocationSelect, { type LocationPoint } from './LocationSelect'
@@ -903,7 +904,7 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
                           {writesFlightLegs && (
                             <div>
                               <label className={labelClass}>{t('reservations.confirmationCode')}</label>
-                              <input type="text" value={wp.confirmation_number} onChange={e => updateWp({ confirmation_number: e.target.value })}
+                              <BookingCodeInput value={wp.confirmation_number} onChange={e => updateWp({ confirmation_number: e.target.value })}
                                 placeholder={t('reservations.confirmationPlaceholder')} className={inputClass} />
                             </div>
                           )}
@@ -984,7 +985,7 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
                           {writesTrainLegs && (
                             <div>
                               <label className={labelClass}>{t('reservations.confirmationCode')}</label>
-                              <input type="text" value={wp.confirmation_number} onChange={e => updateWp({ confirmation_number: e.target.value })}
+                              <BookingCodeInput value={wp.confirmation_number} onChange={e => updateWp({ confirmation_number: e.target.value })}
                                 placeholder={t('reservations.confirmationPlaceholder')} className={inputClass} />
                             </div>
                           )}
@@ -1119,7 +1120,7 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           <div>
             <label className={labelClass}>{t('reservations.confirmationCode')}</label>
-            <input type="text" value={form.confirmation_number} onChange={e => set('confirmation_number', e.target.value)}
+            <BookingCodeInput value={form.confirmation_number} onChange={e => set('confirmation_number', e.target.value)}
               placeholder={t('reservations.confirmationPlaceholder')} className={inputClass} />
           </div>
           <div>

client/src/components/shared/BookingCode.test.tsx

@@ -0,0 +1,156 @@
+// FE-COMP-BOOKCODE-001 to FE-COMP-BOOKCODE-014
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { act, fireEvent, render, renderHook, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { createRef, useState } from 'react'
+import { useSettingsStore } from '../../store/settingsStore'
+import { resetAllStores, seedStore } from '../../../tests/helpers/store'
+import { isBlurred } from '../../../tests/helpers/bookingCodeBlur'
+import { useBlurBookingCodes } from '../../hooks/useBlurBookingCodes'
+import { BlurredCode, BookingCodeInput } from './BookingCode'
+
+const blurOn = (on: boolean) => seedStore(useSettingsStore, { settings: { blur_booking_codes: on } })
+
+function Field({ initial = 'PNR-1', ...rest }: { initial?: string; onFocus?: () => void; onBlur?: () => void; className?: string }) {
+  const [v, setV] = useState(initial)
+  return <BookingCodeInput value={v} onChange={e => setV(e.target.value)} placeholder="ABC-12345" aria-label="code" {...rest} />
+}
+
+describe('useBlurBookingCodes', () => {
+  beforeEach(() => resetAllStores())
+
+  it('FE-COMP-BOOKCODE-001: follows the setting and reads an unset one as off', () => {
+    seedStore(useSettingsStore, { settings: { blur_booking_codes: undefined } })
+    const { result } = renderHook(() => useBlurBookingCodes())
+    expect(result.current).toBe(false)
+    act(() => blurOn(true))
+    expect(result.current).toBe(true)
+  })
+})
+
+describe('BookingCodeInput', () => {
+  beforeEach(() => resetAllStores())
+
+  it('FE-COMP-BOOKCODE-002: with the setting off the field is a plain text input with the caller classes only', () => {
+    blurOn(false)
+    render(<Field className="w-full border" />)
+    const field = screen.getByLabelText('code') as HTMLInputElement
+    expect(field.type).toBe('text')
+    expect(field.className).toBe('w-full border')
+    expect(isBlurred(field)).toBe(false)
+  })
+
+  it('FE-COMP-BOOKCODE-003: without caller classes and the setting off it adds no class attribute at all', () => {
+    blurOn(false)
+    render(<Field />)
+    expect(screen.getByLabelText('code').hasAttribute('class')).toBe(false)
+  })
+
+  it('FE-COMP-BOOKCODE-004: with the setting on a filled field is blurred and keeps the caller classes', () => {
+    blurOn(true)
+    render(<Field className="w-full border" />)
+    const field = screen.getByLabelText('code') as HTMLInputElement
+    expect(field.value).toBe('PNR-1')
+    expect(field.className.startsWith('w-full border ')).toBe(true)
+    expect(isBlurred(field)).toBe(true)
+  })
+
+  it('FE-COMP-BOOKCODE-005: focus lifts the blur and leaving the field brings it back', () => {
+    blurOn(true)
+    render(<Field />)
+    const field = screen.getByLabelText('code') as HTMLInputElement
+    act(() => field.focus())
+    expect(isBlurred(field)).toBe(false)
+    act(() => field.blur())
+    expect(isBlurred(field)).toBe(true)
+  })
+
+  it('FE-COMP-BOOKCODE-006: an empty field is never blurred, so its placeholder stays readable', () => {
+    blurOn(true)
+    render(<Field initial="" />)
+    expect(isBlurred(screen.getByPlaceholderText('ABC-12345'))).toBe(false)
+  })
+
+  it('FE-COMP-BOOKCODE-007: what is typed into a blurred field is the value, and the caller focus handlers still run', async () => {
+    blurOn(true)
+    const onFocus = vi.fn()
+    const onBlur = vi.fn()
+    render(<Field onFocus={onFocus} onBlur={onBlur} />)
+    const field = screen.getByLabelText('code') as HTMLInputElement
+    await userEvent.clear(field)
+    await userEvent.type(field, 'NEW-2')
+    expect(field.value).toBe('NEW-2')
+    expect(onFocus).toHaveBeenCalled()
+    act(() => field.blur())
+    expect(onBlur).toHaveBeenCalled()
+    expect(isBlurred(field)).toBe(true)
+  })
+
+  it('FE-COMP-BOOKCODE-008: the ref reaches the input element', () => {
+    blurOn(true)
+    const ref = createRef<HTMLInputElement>()
+    render(<BookingCodeInput ref={ref} value="X" onChange={() => {}} />)
+    expect(ref.current).toBeInstanceOf(HTMLInputElement)
+    expect(ref.current?.value).toBe('X')
+  })
+})
+
+describe('BlurredCode', () => {
+  beforeEach(() => resetAllStores())
+
+  it('FE-COMP-BOOKCODE-009: with the setting off it renders the bare code and no element around it', () => {
+    blurOn(false)
+    const { container } = render(<div data-testid="host"><BlurredCode>ABC999</BlurredCode></div>)
+    expect(screen.getByTestId('host').innerHTML).toBe('ABC999')
+    expect(container.querySelector('button')).toBeNull()
+  })
+
+  it('FE-COMP-BOOKCODE-010: with the setting on the code is a blurred toggle that a click reveals and hides again', () => {
+    blurOn(true)
+    render(<BlurredCode>ABC999</BlurredCode>)
+    const code = screen.getByRole('button', { name: 'ABC999' })
+    expect(code).toHaveAttribute('aria-pressed', 'false')
+    expect(isBlurred(code)).toBe(true)
+    fireEvent.click(code)
+    expect(code).toHaveAttribute('aria-pressed', 'true')
+    expect(isBlurred(code)).toBe(false)
+    fireEvent.click(code)
+    expect(isBlurred(code)).toBe(true)
+  })
+
+  it('FE-COMP-BOOKCODE-011: revealing the code does not also trigger the clickable strip around it', () => {
+    blurOn(true)
+    const onRowClick = vi.fn()
+    render(<div role="button" aria-label="Open booking" tabIndex={0} onClick={onRowClick}><BlurredCode>ABC999</BlurredCode></div>)
+    fireEvent.click(screen.getByRole('button', { name: 'ABC999' }))
+    expect(onRowClick).not.toHaveBeenCalled()
+  })
+
+  it('FE-COMP-BOOKCODE-012: Enter and Space stay with the code, other keys still reach the strip', () => {
+    blurOn(true)
+    const onRowKey = vi.fn()
+    render(<div role="button" aria-label="Open booking" tabIndex={0} onKeyDown={e => onRowKey(e.key)}><BlurredCode>ABC999</BlurredCode></div>)
+    const code = screen.getByRole('button', { name: 'ABC999' })
+    fireEvent.keyDown(code, { key: 'Enter' })
+    fireEvent.keyDown(code, { key: ' ' })
+    expect(onRowKey).not.toHaveBeenCalled()
+    fireEvent.keyDown(code, { key: 'Escape' })
+    expect(onRowKey).toHaveBeenCalledWith('Escape')
+  })
+
+  it('FE-COMP-BOOKCODE-013: the non-interactive variant is a blurred span with the caller classes, not a button', () => {
+    blurOn(true)
+    render(<button type="button"><BlurredCode interactive={false} className="font-geist">#X9</BlurredCode></button>)
+    const code = screen.getByText('#X9')
+    expect(code.tagName).toBe('SPAN')
+    expect(code.className.startsWith('font-geist ')).toBe(true)
+    expect(isBlurred(code)).toBe(true)
+    expect(screen.getAllByRole('button')).toHaveLength(1)
+  })
+
+  it('FE-COMP-BOOKCODE-014: the non-interactive variant is bare text as well once the setting is off', () => {
+    blurOn(false)
+    render(<span data-testid="host">Confirmed · <BlurredCode interactive={false}>#X9</BlurredCode></span>)
+    expect(screen.getByTestId('host').innerHTML).toBe('Confirmed · #X9')
+  })
+})

client/src/components/shared/BookingCode.tsx

@@ -0,0 +1,79 @@
+import { useState, type InputHTMLAttributes, type ReactNode, type Ref } from 'react'
+import { useBlurBookingCodes } from '../../hooks/useBlurBookingCodes'
+
+/**
+ * The "Blur booking codes" preference (blur_booking_codes) keeps confirmation
+ * codes unreadable to anyone looking at the screen until the user reaches for
+ * them. The pieces here carry it to every place that shows or edits a code, so
+ * a new surface gets the same look and the same way of revealing a code
+ * without reading the setting on its own.
+ */
+
+// The strength the code boxes in the bookings tabs and the day sheet use.
+const BLUR_CLS = 'blur-[4px] select-none'
+
+const joinCls = (...parts: (string | false | undefined)[]) => parts.filter(Boolean).join(' ')
+
+type BookingCodeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+  ref?: Ref<HTMLInputElement>
+}
+
+/**
+ * The text field of a form that edits a booking code. While the preference is
+ * on, a filled field stays blurred until the pointer rests on it or it gets
+ * focus, so the code is still there to read and change the moment the user
+ * clicks, taps or tabs into it. An empty field keeps its placeholder readable.
+ *
+ * Only a class is added: the value, the handlers and the ref pass through
+ * untouched, so what gets saved is exactly what was typed, and there is no
+ * wrapper to upset the grid and flex rows the field sits in. It stays a text
+ * field on purpose; a password field would bring the browser's password
+ * manager and a different phone keyboard with it.
+ */
+export function BookingCodeInput({ className, ...props }: BookingCodeInputProps) {
+  const blur = useBlurBookingCodes()
+  const hidden = blur && props.value != null && props.value !== ''
+  return (
+    <input
+      type="text"
+      {...props}
+      className={hidden
+        ? joinCls(className, 'blur-[4px] transition-[filter] duration-200 hover:blur-none focus:blur-none')
+        : className}
+    />
+  )
+}
+
+/**
+ * A booking code shown as text. With the preference off it renders the code
+ * and nothing around it, so the markup of the surface stays what it was.
+ *
+ * With the preference on, the code becomes a small toggle that lifts on hover
+ * and on click, Enter or Space, like the codes in the bookings list. Inside a
+ * row that is a button itself a second button is not allowed, so
+ * `interactive={false}` gives a plain blurred span there; the booking the row
+ * opens is where that code can be read.
+ */
+export function BlurredCode({ children, interactive = true, className }: {
+  children: ReactNode
+  interactive?: boolean
+  className?: string
+}) {
+  const blur = useBlurBookingCodes()
+  const [revealed, setRevealed] = useState(false)
+  if (!blur) return <>{children}</>
+  if (!interactive) return <span className={joinCls(className, BLUR_CLS)}>{children}</span>
+  return (
+    <button
+      type="button"
+      aria-pressed={revealed}
+      // The code often sits on a strip that opens its booking on a click or on
+      // Enter; revealing the code must not open the editor as well.
+      onClick={e => { e.stopPropagation(); setRevealed(v => !v) }}
+      onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') e.stopPropagation() }}
+      className={joinCls(className, 'cursor-pointer', !revealed && `${BLUR_CLS} hover:blur-none`)}
+    >
+      {children}
+    </button>
+  )
+}