feat: enhance UI components and add safety requirements form with hotkey support

sakobu · sakobu · commit a1f534f149ab · 2026-04-22T19:39:50.000-05:00
diff --git a/rpo-app/src/chrome/HotkeyLegend.tsx b/rpo-app/src/chrome/HotkeyLegend.tsx
@@ -1,9 +1,11 @@
 import { useShallow } from 'zustand/react/shallow';
 
-import { type ChromeRegion, type ChromeState, useUI } from '@/stores/ui';
+import { type ChromeRegion, type ChromeState, selectDockOffsetPx, useUI } from '@/stores/ui';
 import { Caps } from '@/ui/Caps';
 import { withBlur } from '@/utils/blur';
 
+const LEGEND_GAP_PX = 16;
+
 type Region = {
   key: 'S' | 'H' | 'D';
   label: ChromeRegion;
@@ -34,15 +36,21 @@ export function HotkeyLegend() {
       cycleDock: s.cycleDock,
     })),
   );
+  const dockOffsetPx = useUI(selectDockOffsetPx);
 
   const regions: readonly Region[] = [
     { key: 'S', label: 'sidebar', state: sidebar, onCycle: cycleSidebar },
     { key: 'H', label: 'hud', state: hud, onCycle: cycleHud },
     { key: 'D', label: 'dock', state: dock, onCycle: cycleDock },
   ];
 
+  const bottomPx = dockOffsetPx + LEGEND_GAP_PX;
+
   return (
-    <div className="pointer-events-auto fixed right-4 bottom-4 z-40 flex items-center gap-3 rounded-xs border border-border bg-surface-1/85 px-2.5 py-1.5 backdrop-blur-sm">
+    <div
+      style={{ bottom: bottomPx }}
+      className="pointer-events-auto fixed right-4 z-40 flex items-center gap-3 rounded-xs border border-border bg-surface-1/85 px-2.5 py-1.5 backdrop-blur-sm"
+    >
       {regions.map((r) => (
         <button
           key={r.key}
diff --git a/rpo-app/src/chrome/constants.ts b/rpo-app/src/chrome/constants.ts
@@ -6,4 +6,6 @@ export const HUD_COLLAPSED_WIDTH_CLASS = 'w-56';
 export const DOCK_MIN_HEIGHT_PX = 160;
 export const DOCK_MAX_HEIGHT_PX = 720;
 export const DOCK_DEFAULT_HEIGHT_PX = 300;
+// Keep DOCK_COLLAPSED_HEIGHT_PX in sync with the Tailwind class below (h-7 = 1.75rem = 28px).
+export const DOCK_COLLAPSED_HEIGHT_PX = 28;
 export const DOCK_COLLAPSED_HEIGHT_CLASS = 'h-7';
diff --git a/rpo-app/src/chrome/sidebar/MissionHeader.tsx b/rpo-app/src/chrome/sidebar/MissionHeader.tsx
@@ -3,7 +3,7 @@ import { Pencil, Plus, X } from 'lucide-react';
 import { useShallow } from 'zustand/react/shallow';
 
 import { EditConfigButton } from '@/chrome/EditConfigButton';
-import { SafetyRequirementsForm } from '@/features/safety-requirements/SafetyRequirementsForm';
+import { SafetyRequirementsForm } from '@/chrome/sidebar/SafetyRequirementsForm';
 import {
   ALIGNMENT_LABELS,
   type AlignmentValue,
diff --git a/rpo-app/src/chrome/sidebar/SafetyRequirementsForm.tsx b/rpo-app/src/chrome/sidebar/SafetyRequirementsForm.tsx
diff --git a/rpo-app/src/hooks/useHotkey.ts b/rpo-app/src/hooks/useHotkey.ts
@@ -1,6 +1,11 @@
 import { useEffect } from 'react';
 
-export function useHotkey(key: string, callback: () => void): void {
+type HotkeyOptions = {
+  shift?: boolean;
+};
+
+export function useHotkey(key: string, callback: () => void, options?: HotkeyOptions): void {
+  const requireShift = !!options?.shift;
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (
@@ -11,11 +16,11 @@ export function useHotkey(key: string, callback: () => void): void {
         return;
       }
       if (e.key.toLowerCase() !== key.toLowerCase()) return;
-      if (e.shiftKey) return;
+      if (e.shiftKey !== requireShift) return;
       callback();
     };
 
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [key, callback]);
+  }, [key, callback, requireShift]);
 }
diff --git a/rpo-app/src/stores/ui.ts b/rpo-app/src/stores/ui.ts
@@ -1,23 +1,31 @@
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 
-import { DOCK_DEFAULT_HEIGHT_PX } from '@/chrome/constants';
+import { DOCK_COLLAPSED_HEIGHT_PX, DOCK_DEFAULT_HEIGHT_PX } from '@/chrome/constants';
 
 export type ChromeState = 'expanded' | 'collapsed' | 'hidden';
 export type ChromeRegion = 'sidebar' | 'hud' | 'dock';
 export type HudReadoutFrame = 'ric' | 'roe';
 
+type ChromeSnapshot = {
+  sidebar: ChromeState;
+  hud: ChromeState;
+  dock: ChromeState;
+};
+
 type UIState = {
   sidebar: ChromeState;
   hud: ChromeState;
   dock: ChromeState;
+  previousChrome: ChromeSnapshot | null;
   dockHeight: number;
   hudReadoutFrame: HudReadoutFrame;
   cycleSidebar: () => void;
   cycleHud: () => void;
   cycleDock: () => void;
   expand: (region: ChromeRegion) => void;
   hide: (region: ChromeRegion) => void;
+  toggleHideAll: () => void;
   setDockHeight: (height: number) => void;
   setHudReadoutFrame: (frame: HudReadoutFrame) => void;
 };
@@ -28,12 +36,22 @@ const NEXT_STATE: Record<ChromeState, ChromeState> = {
   hidden: 'expanded',
 };
 
+// Pixel height the dock currently occupies from the viewport bottom. Used by
+// elements that anchor to the bottom edge (HotkeyLegend, RICAxes gizmo) so
+// they lift above the dock instead of overlapping it.
+export const selectDockOffsetPx = (s: UIState): number => {
+  if (s.dock === 'expanded') return s.dockHeight;
+  if (s.dock === 'collapsed') return DOCK_COLLAPSED_HEIGHT_PX;
+  return 0;
+};
+
 export const useUI = create<UIState>()(
   devtools(
     (set) => ({
       sidebar: 'expanded',
       hud: 'expanded',
       dock: 'hidden',
+      previousChrome: null,
       dockHeight: DOCK_DEFAULT_HEIGHT_PX,
       hudReadoutFrame: 'ric',
       cycleSidebar: () => set((s) => ({ sidebar: NEXT_STATE[s.sidebar] }), false, 'cycleSidebar'),
@@ -47,6 +65,32 @@ export const useUI = create<UIState>()(
         ),
       hide: (region) =>
         set((s) => (s[region] === 'hidden' ? s : { [region]: 'hidden' }), false, `hide/${region}`),
+      toggleHideAll: () =>
+        set(
+          (s) => {
+            const allHidden = s.sidebar === 'hidden' && s.hud === 'hidden' && s.dock === 'hidden';
+            if (allHidden) {
+              if (s.previousChrome === null) {
+                // No snapshot (e.g., user manually hid each region one-by-one). Fall back to all expanded.
+                return {
+                  sidebar: 'expanded',
+                  hud: 'expanded',
+                  dock: 'expanded',
+                  previousChrome: null,
+                };
+              }
+              return { ...s.previousChrome, previousChrome: null };
+            }
+            return {
+              sidebar: 'hidden',
+              hud: 'hidden',
+              dock: 'hidden',
+              previousChrome: { sidebar: s.sidebar, hud: s.hud, dock: s.dock },
+            };
+          },
+          false,
+          'toggleHideAll',
+        ),
       setDockHeight: (height) =>
         set((s) => (s.dockHeight === height ? s : { dockHeight: height }), false, 'setDockHeight'),
       setHudReadoutFrame: (frame) => set({ hudReadoutFrame: frame }, false, 'setHudReadoutFrame'),
diff --git a/rpo-app/src/utils/math.ts b/rpo-app/src/utils/math.ts
@@ -0,0 +1,3 @@
+export function clamp(v: number, lo: number, hi: number): number {
+  return Math.min(Math.max(v, lo), hi);
+}
diff --git a/rpo-app/src/viewport3d/proximity/CelestialIndicator.tsx b/rpo-app/src/viewport3d/proximity/CelestialIndicator.tsx
@@ -2,10 +2,12 @@ import { useMemo } from 'react';
 import { Html, Line } from '@react-three/drei';
 import { Earth, Moon, Sun } from 'lucide-react';
 
+import { clamp } from '@/utils/math';
 import type { Vec3 } from '@/viewport3d/types';
 
 import { CELESTIAL_INDICATOR } from './constants';
 import { ricToPosition } from './coordinates';
+import type { CelestialBodyDir } from './scene';
 
 type CelestialBody = 'earth' | 'sun' | 'moon';
 
@@ -16,23 +18,43 @@ const ICON_BY_BODY = {
 } as const;
 
 type Props = {
-  unitRic: Vec3;
-  edgeM: number;
+  dir: CelestialBodyDir;
+  gridExtentM: number;
   body: CelestialBody;
   color: string;
 };
 
-export default function CelestialIndicator({ unitRic, edgeM, body, color }: Props) {
-  const { tip, iconPos } = useMemo(() => {
-    const tipRic: Vec3 = [unitRic[0] * edgeM, unitRic[1] * edgeM, unitRic[2] * edgeM];
-    const offset = edgeM * CELESTIAL_INDICATOR.labelOffsetRatio;
+export default function CelestialIndicator({ dir, gridExtentM, body, color }: Props) {
+  const { tip, iconPos, opacity, iconOpacity } = useMemo(() => {
+    const { unitRic, distanceKm } = dir;
+    const log = Math.log10(Math.max(distanceKm, 1));
+    const span = CELESTIAL_INDICATOR.logKmMax - CELESTIAL_INDICATOR.logKmMin;
+    const t = clamp((log - CELESTIAL_INDICATOR.logKmMin) / span, 0, 1);
+
+    const lengthRatio =
+      CELESTIAL_INDICATOR.lengthRatioNear +
+      t * (CELESTIAL_INDICATOR.lengthRatioFar - CELESTIAL_INDICATOR.lengthRatioNear);
+    const lengthM = gridExtentM * lengthRatio;
+
+    const opacity =
+      CELESTIAL_INDICATOR.opacityNear +
+      t * (CELESTIAL_INDICATOR.opacityFar - CELESTIAL_INDICATOR.opacityNear);
+    const iconOpacity = Math.min(1, opacity + CELESTIAL_INDICATOR.iconOpacityBias);
+
+    const tipRic: Vec3 = [unitRic[0] * lengthM, unitRic[1] * lengthM, unitRic[2] * lengthM];
+    const offset = lengthM * CELESTIAL_INDICATOR.labelOffsetRatio;
     const iconRic: Vec3 = [
-      unitRic[0] * (edgeM + offset),
-      unitRic[1] * (edgeM + offset),
-      unitRic[2] * (edgeM + offset),
+      unitRic[0] * (lengthM + offset),
+      unitRic[1] * (lengthM + offset),
+      unitRic[2] * (lengthM + offset),
     ];
-    return { tip: ricToPosition(tipRic), iconPos: ricToPosition(iconRic) };
-  }, [unitRic, edgeM]);
+    return {
+      tip: ricToPosition(tipRic),
+      iconPos: ricToPosition(iconRic),
+      opacity,
+      iconOpacity,
+    };
+  }, [dir, gridExtentM]);
 
   const Icon = ICON_BY_BODY[body];
 
@@ -42,15 +64,15 @@ export default function CelestialIndicator({ unitRic, edgeM, body, color }: Prop
         points={[[0, 0, 0], tip]}
         color={color}
         lineWidth={CELESTIAL_INDICATOR.lineWidth}
-        opacity={CELESTIAL_INDICATOR.lineOpacity}
+        opacity={opacity}
         transparent
         depthWrite={false}
       />
       <Html
         position={iconPos}
         center
         zIndexRange={[20, 0]}
-        style={{ pointerEvents: 'none', color }}
+        style={{ pointerEvents: 'none', color, opacity: iconOpacity }}
       >
         <Icon
           size={CELESTIAL_INDICATOR.iconSizePx}
diff --git a/rpo-app/src/viewport3d/proximity/ProximityViewport.tsx b/rpo-app/src/viewport3d/proximity/ProximityViewport.tsx
@@ -8,7 +8,7 @@ import { loadedVector, useConfig } from '@/stores/configuration';
 import type { Vec3 } from '@/viewport3d/types';
 
 import CelestialIndicator from './CelestialIndicator';
-import { CELESTIAL_EDGE_RATIO, CELESTIAL_TINTS, ORBIT_CONTROLS } from './constants';
+import { CELESTIAL_TINTS, ORBIT_CONTROLS } from './constants';
 import Grid from './Grid';
 import RICAxes from './RICAxes';
 import { computeCelestialDirsRic, computeDeputyPositionRicM, computeScale } from './scene';
@@ -40,7 +40,6 @@ export default function ProximityViewport() {
   );
   const scale = useMemo(() => computeScale(deputyRicM), [deputyRicM]);
   const celestials = useMemo(() => computeCelestialDirsRic(chiefVector), [chiefVector]);
-  const celestialEdgeM = scale.extentM * CELESTIAL_EDGE_RATIO;
 
   return (
     <div className="h-full w-full">
@@ -84,24 +83,24 @@ export default function ProximityViewport() {
 
         {celestials.earth && (
           <CelestialIndicator
-            unitRic={celestials.earth}
-            edgeM={celestialEdgeM}
+            dir={celestials.earth}
+            gridExtentM={scale.extentM}
             body="earth"
             color={CELESTIAL_TINTS.earth}
           />
         )}
         {celestials.sun && (
           <CelestialIndicator
-            unitRic={celestials.sun}
-            edgeM={celestialEdgeM}
+            dir={celestials.sun}
+            gridExtentM={scale.extentM}
             body="sun"
             color={CELESTIAL_TINTS.sun}
           />
         )}
         {celestials.moon && (
           <CelestialIndicator
-            unitRic={celestials.moon}
-            edgeM={celestialEdgeM}
+            dir={celestials.moon}
+            gridExtentM={scale.extentM}
             body="moon"
             color={CELESTIAL_TINTS.moon}
           />
diff --git a/rpo-app/src/viewport3d/proximity/RICAxes.tsx b/rpo-app/src/viewport3d/proximity/RICAxes.tsx
@@ -1,5 +1,7 @@
+import { useMemo } from 'react';
 import { Billboard, GizmoHelper, Line, Sphere, Text } from '@react-three/drei';
 
+import { selectDockOffsetPx, useUI } from '@/stores/ui';
 import type { Vec3 } from '@/viewport3d/types';
 
 import { AXES, AXES_GIZMO } from './constants';
@@ -44,8 +46,17 @@ function Axis({ direction, color, label }: AxisProps) {
 
 // R = +Y (up), I = +X (right), C = +Z (depth) — matches ricToPosition mapping.
 export default function RICAxes() {
+  const dockOffsetPx = useUI(selectDockOffsetPx);
+  // Lift by the dock's contribution to the chrome stack; the static base already
+  // accounts for the legend's clearance in the dock-hidden ("fine") baseline.
+  // Memoized so GizmoHelper doesn't see a fresh tuple reference per render.
+  const margin = useMemo<[number, number]>(() => {
+    const [mx, my] = AXES_GIZMO.margin;
+    return [mx, my + dockOffsetPx];
+  }, [dockOffsetPx]);
+
   return (
-    <GizmoHelper alignment="bottom-right" margin={[...AXES_GIZMO.margin]}>
+    <GizmoHelper alignment="bottom-right" margin={margin}>
       <group scale={AXES_GIZMO.scale}>
         <Axis direction={[0, 1, 0]} color={AXES.R.color} label={AXES.R.label} />
         <Axis direction={[1, 0, 0]} color={AXES.I.color} label={AXES.I.label} />
diff --git a/rpo-app/src/viewport3d/proximity/constants.ts b/rpo-app/src/viewport3d/proximity/constants.ts
@@ -40,17 +40,25 @@ export const CELESTIAL_TINTS = {
   moon: '#9099ad',
 } as const;
 
-// Fraction of grid extent at which celestial indicators sit (unit direction
-// scaled to this radius). Keeps tips inside the camera frame.
-export const CELESTIAL_EDGE_RATIO = 0.45;
-
-// Celestial leader-line styling. Thin + translucent so the line reads as a
-// hint, not a primary visual element. Icon sits just past the line tip;
-// with drei <Html center>, the icon's center is anchored at the offset point.
+// Celestial leader-line styling. Length and opacity both fall off with
+// log10(distance_km), so a chief in LEO renders Earth as a short bright line
+// and the Sun as a long faint line — the order encodes proximity at a glance.
+// Range bracketed to comfortably cover LEO chief altitude (~7e3 km) through
+// the Sun (~1.5e8 km) with margin on both ends. Length ratios are fractions
+// of the full grid side (extentM), so lengthRatioFar must stay ≲ 0.5 to keep
+// the farthest tip inside the visible ±extentM/2 viewport.
 export const CELESTIAL_INDICATOR = {
   lineWidth: 0.5,
-  lineOpacity: 0.6,
   iconSizePx: 20,
   iconStrokeWidth: 1.5,
-  labelOffsetRatio: 0.02,
+  labelOffsetRatio: 0,
+  logKmMin: 3.5,
+  logKmMax: 8.5,
+  lengthRatioNear: 0.15,
+  lengthRatioFar: 0.5,
+  opacityNear: 0.85,
+  opacityFar: 0.35,
+  // Icon sits one notch brighter than its leader line so far bodies (Sun) don't
+  // fade to invisible at the line's opacityFar.
+  iconOpacityBias: 0.2,
 } as const;
diff --git a/rpo-app/src/viewport3d/proximity/scene.ts b/rpo-app/src/viewport3d/proximity/scene.ts
diff --git a/rpo-app/src/viewport3d/spacecraft/config/scaling.ts b/rpo-app/src/viewport3d/spacecraft/config/scaling.ts
diff --git a/rpo-app/src/views/ViewportShell.tsx b/rpo-app/src/views/ViewportShell.tsx

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function clamp(v: number, lo: number, hi: number): number {`
	`2`	`+ return Math.min(Math.max(v, lo), hi);`
	`3`	`+}`