feat(desktop): fold the race page's side panel

apps/desktop/src-tauri/src/display.rs

@@ -27,11 +27,19 @@ pub struct DisplayPrefs {
     pub hidden_columns: Vec<String>,
     /// Inspector section ids kept folded.
     pub collapsed_sections: Vec<String>,
+    /// Race page: the quick log + feed folded to a thin strip.
+    pub race_panel_folded: bool,
 }
 
 impl Default for DisplayPrefs {
     fn default() -> Self {
-        Self { density: Density::Compact, text_scale: 100, hidden_columns: Vec::new(), collapsed_sections: Vec::new() }
+        Self {
+            density: Density::Compact,
+            text_scale: 100,
+            hidden_columns: Vec::new(),
+            collapsed_sections: Vec::new(),
+            race_panel_folded: false,
+        }
     }
 }
 

apps/desktop/src/pages/race/QuickLog.module.scss

@@ -13,6 +13,12 @@
   gap: 8px;
 }
 
+.fold {
+  width: 26px;
+  height: 26px;
+  margin-right: -6px;
+}
+
 .foot > button:first-child {
   padding-left: 2px;
 }

apps/desktop/src/pages/race/QuickLog.tsx

@@ -115,13 +115,22 @@ function LiveActions({ live }: { live: Snapshot }) {
 }
 
 /** Docked quick-log panel: selection, stamp preview, and the one big button. */
-export function QuickLog({ live }: { live: Snapshot }) {
+export function QuickLog({ live, onFold }: { live: Snapshot; onFold: () => void }) {
   return (
     <div className={styles.quickLog}>
       <div className={styles.head}>
         <span className={ui.label}>Quick log</span>
         <span className={ui.grow} />
         <LookbackPill value={live.config.lookbackSeconds} />
+        <button
+          type="button"
+          className={cx(ui.iconBtn, styles.fold)}
+          aria-label="Fold the panel"
+          title="Fold the panel"
+          onClick={onFold}
+        >
+          <Icon name="right" size={16} />
+        </button>
       </div>
       {live.session.connected ? <LiveActions live={live} /> : <OfflineActions live={live} />}
     </div>

apps/desktop/src/pages/race/RacePage.module.scss

@@ -8,6 +8,24 @@
   border-left: 1px solid var(--color-border);
 }
 
+.strip {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 8px;
+  background: var(--color-surface);
+  border-left: 1px solid var(--color-border);
+}
+
+// Beats .btn's padding whatever order the stylesheets load in.
+.strip > .stripLog {
+  width: 34px;
+  height: 34px;
+  padding: 0;
+}
+
 .loading {
   margin: auto;
   color: var(--color-text-muted);

apps/desktop/src/pages/race/RacePage.tsx

@@ -1,3 +1,4 @@
+import type { Snapshot } from '../../backend/backend'
 import { useLive } from '../../backend/LiveProvider'
 import { Inspector } from '../../inspector/Inspector'
 import { Icon } from '../../icons'
@@ -6,6 +7,8 @@ import { cx } from '../../ui/primitives'
 import ui from '../../ui/ui.module.scss'
 import { useWorkspace } from '../../workspace/Workspace'
 import { useDataSource } from '../../workspace/useDataSource'
+import { useDisplay } from '../../workspace/useDisplay'
+import { useIncidentActions } from '../../workspace/useIncidentActions'
 import { IncidentFeed } from './IncidentFeed'
 import { QuickLog } from './QuickLog'
 import { Standings } from './Standings'
@@ -45,6 +48,53 @@ function WaitingForLmu({ lastSeen }: { lastSeen: number }) {
   )
 }
 
+/** Folded, the panel keeps one button: Log incident live, Log a missed incident offline. */
+function FoldedPanel({ connected, onUnfold }: { connected: boolean; onUnfold: () => void }) {
+  const { quickLog, logMissed } = useIncidentActions()
+  const log = connected ? 'Log incident (Space)' : 'Log a missed incident'
+  return (
+    <aside className={styles.strip} aria-label="Quick log, folded">
+      <button
+        type="button"
+        className={ui.iconBtn}
+        aria-label="Show the quick log and incidents"
+        title="Show the quick log and incidents"
+        onClick={onUnfold}
+      >
+        <Icon name="left" size={16} />
+      </button>
+      <button
+        type="button"
+        className={cx(ui.btn, ui.primary, styles.stripLog)}
+        aria-label={log}
+        title={log}
+        onClick={connected ? quickLog : logMissed}
+      >
+        <Icon name={connected ? 'flag' : 'plus'} size={16} strokeWidth={2} />
+      </button>
+    </aside>
+  )
+}
+
+/** The right-hand panel: quick log + feed, or a thin strip so the timing tower gets the width. */
+function RacePanel({ live }: { live: Snapshot }) {
+  const { prefs, update } = useDisplay()
+  if (prefs.racePanelFolded) {
+    return (
+      <FoldedPanel
+        connected={live.session.connected}
+        onUnfold={() => update({ racePanelFolded: false })}
+      />
+    )
+  }
+  return (
+    <aside className={styles.panel}>
+      <QuickLog live={live} onFold={() => update({ racePanelFolded: true })} />
+      <IncidentFeed incidents={live.incidents} />
+    </aside>
+  )
+}
+
 /** Race control (design/02, 03, 08): timing tower left, quick log + feed or the inspector right. */
 export function RacePage() {
   const live = useLive()
@@ -59,14 +109,7 @@ export function RacePage() {
       ) : (
         <WaitingForLmu lastSeen={live.session.elapsedSeconds} />
       )}
-      {open ? (
-        <Inspector key={open.id} incident={open} />
-      ) : (
-        <aside className={styles.panel}>
-          <QuickLog live={live} />
-          <IncidentFeed incidents={live.incidents} />
-        </aside>
-      )}
+      {open ? <Inspector key={open.id} incident={open} /> : <RacePanel live={live} />}
     </>
   )
 }

apps/desktop/src/workspace/useDisplay.ts

@@ -11,6 +11,7 @@ export const DEFAULT_DISPLAY: DisplayPrefs = {
   textScale: 100,
   hiddenColumns: [],
   collapsedSections: [],
+  racePanelFolded: false,
 }
 
 /** Settings → Display, read and written through the saved config. */

packages/shared/src/api.ts

@@ -77,6 +77,8 @@ export interface DisplayPrefs {
   hiddenColumns: string[]
   /** Inspector section ids kept folded. */
   collapsedSections: string[]
+  /** Race page: the quick log + feed folded to a thin strip, for a wider timing tower. */
+  racePanelFolded: boolean
 }
 
 export interface AppConfig {