🧪 Experiment with remix style routing

app/main.tsx

@@ -1,13 +1,17 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { QueryClient, QueryClientProvider } from 'react-query'
-import { BrowserRouter as Router } from 'react-router-dom'
+import { BrowserRouter as Router, useRoutes } from 'react-router-dom'
+import fileSystemRoutes from 'virtual:remix-routes'
+import { EagerLoader } from 'vite-plugin-remix-routes/client'
 
 import { SkipLink } from '@oxide/ui'
 import { ErrorBoundary } from './components/ErrorBoundary'
-import { routes } from './routes'
+// import { routes } from './routes'
 import { QuickActions, ToastProvider } from './hooks'
 
+console.log(fileSystemRoutes)
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -18,6 +22,17 @@ const queryClient = new QueryClient({
   },
 })
 
+function Routes() {
+  const elements = useRoutes(fileSystemRoutes)
+
+  return (
+    <>
+      <EagerLoader routes={fileSystemRoutes} />
+      {elements}
+    </>
+  )
+}
+
 function render() {
   ReactDOM.render(
     <React.StrictMode>
@@ -26,7 +41,9 @@ function render() {
           <ErrorBoundary>
             <QuickActions />
             <SkipLink id="skip-nav" />
-            <Router>{routes}</Router>
+            <Router>
+              <Routes />
+            </Router>
           </ErrorBoundary>
         </QueryClientProvider>
       </ToastProvider>

app/routes.tsx

@@ -58,7 +58,7 @@ export const routes = (
       <Route index element={<LoginPage />} />
     </Route>
 
-    <Route index element={<Navigate to="/orgs/maze-war/projects" replace />} />
+    {/* <Route index element={<Navigate to="/orgs/maze-war/projects" replace />} /> */}
 
     <Route path="orgs">
       <Route path=":orgName" element={<RootLayout />} crumb={orgCrumb}>

app/routes/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Navigate } from 'react-router-dom'
+
+export default function Index() {
+  return <Navigate to="/orgs/maze-war/projects" replace />
+}

app/routes/orgs.$orgName.projects.$projectName.tsx

@@ -0,0 +1,98 @@
+import React, { useMemo } from 'react'
+import { Outlet, useNavigate, useLocation, matchPath } from 'react-router-dom'
+
+import {
+  SkipLinkTarget,
+  Access16Icon,
+  Instances16Icon,
+  Metrics16Icon,
+  Networking16Icon,
+  Storage16Icon,
+  Notification16Icon,
+  Resize16Icon,
+} from '@oxide/ui'
+import {
+  ContentPane,
+  ContentPaneWrapper,
+  PageContainer,
+  ContentPaneActions,
+} from '../layouts/helpers'
+import { Breadcrumbs } from '../components/Breadcrumbs'
+import { TopBar } from '../components/TopBar'
+import { Sidebar, NavLinkItem } from '../components/Sidebar'
+import { useParams, useQuickActions } from 'app/hooks'
+import { Pagination } from '@oxide/pagination'
+
+const ProjectLayout = () => {
+  const navigate = useNavigate()
+  const { projectName } = useParams('orgName', 'projectName')
+  const currentPath = useLocation().pathname
+  useQuickActions(
+    useMemo(
+      () =>
+        [
+          { value: 'Instances', path: 'instances' },
+          { value: 'Snapshots', path: 'snapshots' },
+          { value: 'Disks', path: 'disks' },
+          { value: 'Access & IAM', path: 'access' },
+          { value: 'Images', path: 'images' },
+          { value: 'Networking', path: 'vpcs' },
+          { value: 'Metrics', path: 'metrics' },
+        ]
+          // filter out the entry for the path we're currently on
+          .filter(
+            (i) =>
+              !matchPath(`/orgs/:org/projects/:project/${i.path}`, currentPath)
+          )
+          .map((i) => ({
+            navGroup: `Project '${projectName}'`,
+            value: i.value,
+            onSelect: () => navigate(i.path),
+          })),
+      [currentPath, navigate, projectName]
+    )
+  )
+
+  return (
+    <PageContainer>
+      <Sidebar>
+        <Sidebar.Nav heading="project">
+          <NavLinkItem to="instances">
+            <Instances16Icon /> Instances
+          </NavLinkItem>
+          <NavLinkItem to="snapshots">
+            <Notification16Icon /> Snapshots
+          </NavLinkItem>
+          <NavLinkItem to="disks">
+            <Storage16Icon /> Disks
+          </NavLinkItem>
+          <NavLinkItem to="access">
+            <Access16Icon title="Access & IAM" /> Access &amp; IAM
+          </NavLinkItem>
+          <NavLinkItem to="images">
+            <Resize16Icon title="images" /> Images
+          </NavLinkItem>
+          <NavLinkItem to="vpcs">
+            <Networking16Icon /> Networking
+          </NavLinkItem>
+          <NavLinkItem to="metrics">
+            <Metrics16Icon /> Metrics
+          </NavLinkItem>
+        </Sidebar.Nav>
+      </Sidebar>
+      <ContentPaneWrapper>
+        <ContentPane>
+          <TopBar />
+          <Breadcrumbs />
+          <SkipLinkTarget />
+          <Outlet />
+        </ContentPane>
+        <ContentPaneActions>
+          <Pagination.Target />
+        </ContentPaneActions>
+      </ContentPaneWrapper>
+    </PageContainer>
+  )
+}
+
+export default ProjectLayout

app/routes/orgs.$orgName.projects.$projectName/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Navigate } from 'react-router-dom'
+
+export default function Index() {
+  return <Navigate to="instances" replace />
+}