UI design system overhaul

src/app/App.tsx

@@ -1,23 +1,20 @@
 import { useEffect } from "react";
-import { BrowserRouter, useLocation } from "react-router";
+import { BrowserRouter } from "react-router";
 import { AuthProvider } from "@/app/auth/AuthContext";
 import AppRoutes from "./AppRoutes";
 
-const ScrollToTopOnRouteChange: React.FC = () => {
-  const { pathname } = useLocation();
-
+const AppDocumentTitle: React.FC = () => {
   useEffect(() => {
     document.title = "Vortex Sim";
-    window.scrollTo({ top: 0, left: 0, behavior: "auto" });
-  }, [pathname]);
+  }, []);
 
   return null;
 };
 
 const App: React.FC = () => {
   return (
     <BrowserRouter>
-      <ScrollToTopOnRouteChange />
+      <AppDocumentTitle />
       <AuthProvider>
         <AppRoutes />
       </AuthProvider>

src/app/AppShell.css

@@ -1,12 +1,18 @@
 /* Shell */
 .app-shell {
+  --app-sidebar-width: 260px;
   display: flex;
   min-height: 100vh;
   width: 100%;
 }
 
 .app-shell > .sidebar {
-  width: 260px;
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  align-self: flex-start;
+  width: var(--app-sidebar-width);
+  height: 100vh;
   flex-shrink: 0;
 }
 
@@ -17,6 +23,14 @@
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
+  position: relative;
+  z-index: 1;
+  isolation: isolate;
+}
+
+.workspace > :not(.main-atmosphere) {
+  position: relative;
+  z-index: 1;
 }
 
 .workspace__top {
@@ -116,7 +130,10 @@
   }
 
   .app-shell > .sidebar {
+    position: relative;
+    top: auto;
     width: 100%;
+    height: auto;
   }
 
   .workspace {

src/app/AppShell.tsx

@@ -1,18 +1,23 @@
 import AppSidebar from "./AppSidebar";
+import MainAtmosphere from "./MainAtmosphere";
 
 import "./AppShell.css";
 
 const AppShell: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <>
-      <a className="skip-link" href="#main">
+      <a
+        className="skip-link focus-visible:ring-2 focus-visible:ring-[color:var(--primary-dim)] focus-visible:outline-none"
+        href="#main"
+      >
         Skip to content
       </a>
 
       <div className="app-shell">
         <AppSidebar />
 
-        <main id="main" className="workspace">
+        <main id="main" className="workspace" tabIndex={-1}>
+          <MainAtmosphere />
           {children}
         </main>
       </div>