feat: blur booking codes setting + two-column settings page — closes #114

- New display setting "Blur Booking Codes" (off by default)
- When enabled, confirmation codes are blurred across all views
  (ReservationsPanel, DayDetailPanel, Transport detail modal)
- Hover or click reveals the code (click toggles on mobile)
- Settings page uses masonry two-column layout on desktop, single
  column on mobile (<900px)
- Fix hardcoded admin page title to use i18n key

client/src/pages/SettingsPage.tsx

@@ -34,7 +34,7 @@ interface SectionProps {
 
 function Section({ title, icon: Icon, children }: SectionProps): React.ReactElement {
   return (
-    <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+    <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', breakInside: 'avoid', marginBottom: 24 }}>
       <div className="px-6 py-4 border-b flex items-center gap-2" style={{ borderColor: 'var(--border-secondary)' }}>
         <Icon className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
         <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{title}</h2>
@@ -220,12 +220,15 @@ export default function SettingsPage(): React.ReactElement {
       <Navbar />
 
       <div style={{ paddingTop: 'var(--nav-h)' }}>
-        <div className="max-w-2xl mx-auto px-4 py-8 space-y-6">
-          <div>
+        <div className="max-w-5xl mx-auto px-4 py-8">
+          <style>{`@media (max-width: 900px) { .settings-columns { column-count: 1 !important; } }`}</style>
+          <div style={{ marginBottom: 24 }}>
             <h1 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>{t('settings.title')}</h1>
             <p className="text-sm mt-0.5" style={{ color: 'var(--text-muted)' }}>{t('settings.subtitle')}</p>
           </div>
 
+          <div className="settings-columns" style={{ columnCount: 2, columnGap: 24 }}>
+
           {/* Map settings */}
           <Section title={t('settings.map')} icon={Map}>
             <div>
@@ -439,6 +442,36 @@ export default function SettingsPage(): React.ReactElement {
                 ))}
               </div>
             </div>
+
+          {/* Blur Booking Codes */}
+            <div>
+              <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.blurBookingCodes')}</label>
+              <div className="flex gap-3">
+                {[
+                  { value: true, label: t('settings.on') || 'On' },
+                  { value: false, label: t('settings.off') || 'Off' },
+                ].map(opt => (
+                  <button
+                    key={String(opt.value)}
+                    onClick={async () => {
+                      try { await updateSetting('blur_booking_codes', opt.value) }
+                      catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
+                    }}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: 8,
+                      padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                      fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                      border: (!!settings.blur_booking_codes) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                      background: (!!settings.blur_booking_codes) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                      color: 'var(--text-primary)',
+                      transition: 'all 0.15s',
+                    }}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </div>
           </Section>
 
           {/* Immich — only when Memories addon is enabled */}
@@ -888,6 +921,7 @@ export default function SettingsPage(): React.ReactElement {
               </div>
             </div>
           )}
+          </div>
         </div>
       </div>
     </div>