Add app routing (#366)

app/src/App.tsx

@@ -5,7 +5,7 @@ import AppBar from './components/AppBar';
 import { ThemeProvider } from './components/theme-provider';
 import { Toaster } from './components/ui/toaster';
 import { AuthManager } from './lib/auth';
-import ProjectEditor from './routes/project';
+import Routes from './routes';
 
 const AuthContext = createContext(new AuthManager());
 export const useAuthManager = () => useContext(AuthContext);
@@ -15,7 +15,7 @@ function App() {
         <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
             <TooltipProvider>
                 <AppBar />
-                <ProjectEditor />
+                <Routes />
                 <Announcement />
                 <Toaster />
             </TooltipProvider>

app/src/lib/routes/index.ts

@@ -0,0 +1,24 @@
+import { makeAutoObservable } from 'mobx';
+import { sendAnalytics } from '../utils';
+
+export enum Route {
+    EDITOR = 'editor',
+    LOGIN = 'login',
+}
+
+export class RouteManager {
+    private currentRoute: Route = Route.EDITOR;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    get route() {
+        return this.currentRoute;
+    }
+
+    set route(newRoute: Route) {
+        this.route = newRoute;
+        sendAnalytics('navigate', { route: newRoute });
+    }
+}

app/src/routes/Provider.tsx

@@ -0,0 +1,11 @@
+import { RouteManager } from '@/lib/routes';
+import { createContext, ReactNode, useContext } from 'react';
+
+const RouteContext = createContext(new RouteManager());
+export const useRouteManager = () => useContext(RouteContext);
+
+const RouteProvider = ({ children }: { children: ReactNode }) => {
+    return <RouteContext.Provider value={useRouteManager()}>{children}</RouteContext.Provider>;
+};
+
+export default RouteProvider;

app/src/routes/index.tsx

@@ -0,0 +1,23 @@
+import { Route } from '@/lib/routes';
+import { observer } from 'mobx-react-lite';
+import ProjectEditor from './project';
+import RouteProvider, { useRouteManager } from './Provider';
+
+const Routes = observer(() => {
+    const routeManager = useRouteManager();
+
+    function renderRoutes() {
+        switch (routeManager.route) {
+            case Route.EDITOR:
+                return <ProjectEditor />;
+            case Route.LOGIN:
+                return <div>Login</div>;
+            default:
+                return <div>404: Unknown route</div>;
+        }
+    }
+
+    return <RouteProvider>{renderRoutes()}</RouteProvider>;
+});
+
+export default Routes;

app/src/routes/login/index.tsx

@@ -0,0 +1,5 @@
+const Login = () => {
+    return <>Login</>;
+};
+
+export default Login;