From 85415bda97522cb2d235bb1295a1c653a075e0f9 Mon Sep 17 00:00:00 2001
From: Manjunath Paparaju <manjunath@halfpixel.ai>
Date: Sat, 14 Nov 2026 13:15:07 -0800
Subject: [PATCH] Install edge scrolling and the rail styles in the shell

Co-authored-by: Sameh Khamis <sameh@halfpixel.ai>
---
 index.html                 | 2 +-
 src/ui/applicationShell.js | 4 ++++
 style.css                  | 6 ++++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index f3057f742..806a8b41b 100644
--- a/index.html
+++ b/index.html
@@ -26,7 +26,7 @@
        with the sources: src/materialSymbolsSubset.test.mjs fails when a source
        names a glyph this list is missing, because a missing glyph does not draw
        a box — the ligature never forms and the element renders the literal word. -->
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=adjust,arrow_drop_down,arrow_forward,arrow_left,arrow_right,bolt,bug_report,category,chevron_left,chevron_right,close,close_fullscreen,dark_mode,delete,directions_boat,draw,east,eco,egg_alt,flare,flight,handyman,layers,layers_clear,light_mode,local_fire_department,location_on,more_horiz,movie,my_location,navigation,normal,on,open_in_full,partly_cloudy_day,pause,pentagon,pest_control,pets,play_arrow,public,question_mark,radar,radio,raven,right_panel_close,right_panel_open,rocket_launch,satellite_alt,search,set_meal,settings,skip_next,skip_previous,streetview,timeline,traffic,tune,umbrella,upload_file,videocam,view_in_ar,visibility,visibility_off,water_drop,zoom_in_map" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=adjust,align_horizontal_left,align_horizontal_right,arrow_drop_down,arrow_forward,arrow_left,arrow_right,bolt,bug_report,category,chevron_left,chevron_right,close,close_fullscreen,dark_mode,delete,directions_boat,draw,east,eco,egg_alt,flare,flight,handyman,layers,layers_clear,light_mode,local_fire_department,location_on,more_horiz,movie,my_location,navigation,normal,on,open_in_full,palette,partly_cloudy_day,pause,pentagon,pest_control,pets,play_arrow,public,question_mark,radar,radio,raven,right_panel_close,right_panel_open,rocket_launch,satellite_alt,search,set_meal,settings,skip_next,skip_previous,streetview,timeline,traffic,tune,umbrella,upload_file,videocam,view_in_ar,visibility,visibility_off,water_drop,zoom_in_map" rel="stylesheet" />
 </head>
 <body>
   <div class="gev-view" data-gev-view="scene-chrome"></div>
diff --git a/src/ui/applicationShell.js b/src/ui/applicationShell.js
index 1fd86824f..564578e60 100644
--- a/src/ui/applicationShell.js
+++ b/src/ui/applicationShell.js
@@ -65,6 +65,7 @@ import { useHudStore } from './stores/hud.js';
 import { useDisplayStore } from './stores/display.js';
 import { useLocaleStore } from './stores/locale.js';
 import { useLocationStore } from './stores/location.js';
+import { installRailEdgeScroll } from './railEdgeScroll.js';
 import { useCockpitStore } from './stores/cockpit.js';
 import { useGlobeActionsStore } from './stores/globeActions.js';
 import { useRecordingStore } from './stores/recording.js';
@@ -164,6 +165,8 @@ export class StyleManager extends ShellFacade {
     });
     // Vue views share this runtime and its stores; dispose unmounts them.
     this._ui = createUiRuntime({ pinia: applicationPinia() });
+    // Scrolling at a screen edge steps through that side's rail panels.
+    this._removeRailEdgeScroll = installRailEdgeScroll();
     this._feedback = new ShellFeedback({
       readLayers: () => withPlacePacks(this._dataManager?.getAll?.() || []),
     });
@@ -1856,6 +1859,7 @@ export class StyleManager extends ShellFacade {
     const { destroyTrackedReadout, destroyWorldOverlay, destroyDetection } =
       this.services;
     if (this._disposed) return;
+    this._removeRailEdgeScroll?.();
     this._shareRestoration.destroy();
     this._feedback.clearLoadingStatus();
     this._disposed = true;
diff --git a/style.css b/style.css
index 45f4f3eff..976aa0f8d 100644
--- a/style.css
+++ b/style.css
@@ -45,5 +45,11 @@
 @import './src/ui/styles/rtl.css';
 @import './src/ui/styles/mobile-shell.css';
 @import './src/ui/styles/annotations.css';
+@import './src/ui/styles/credits.css';
+@import './src/ui/styles/shell-spacing.css';
+@import './src/ui/styles/rail-edge.css';
+@import './src/ui/styles/rail-split.css';
+@import './src/ui/styles/left-tools.css';
+@import './src/ui/styles/panel-edge.css';
 @import './src/ui/styles/ai-chat.css';
 @import './src/ui/styles/cyber.css';