libs: add support for routing in ui-v2 (#2585)

ui-v2/src/App.tsx

@@ -1,5 +1,7 @@
 import React, { Suspense } from 'react';
 
+import { Outlet } from '@tanstack/react-router';
+
 import GooseLogo from './components/GooseLogo';
 import SuspenseLoader from './components/SuspenseLoader';
 
@@ -7,13 +9,14 @@ const App: React.FC = (): React.ReactElement => {
   return (
     <Suspense fallback={<SuspenseLoader />}>
       <div className="p-5 max-w-3xl mx-auto">
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 mb-4">
           <GooseLogo />
           <h1 className="text-2xl font-bold text-textProminent">Goose v2</h1>
         </div>
+        <Outlet />
       </div>
     </Suspense>
   );
 };
 
-export default App;
+export default App;

ui-v2/src/components/Button.tsx

@@ -65,4 +65,4 @@ export const Button: React.FC<ButtonProps> = ({
       {children}
     </button>
   );
-};
+};

ui-v2/src/main.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
 
+import { RouterProvider } from '@tanstack/react-router';
 import ReactDOM from 'react-dom/client';
 
-import App from './App';
+import { router } from './routeTree';
+
+import './index.css';
+
+// Initialize the router
+await router.load();
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );

ui-v2/src/routeTree.gen.ts

@@ -0,0 +1,88 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as IndexImport } from './routes/index'
+
+// Create/Update Routes
+
+const IndexRoute = IndexImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+}
+
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRoute
+  '/': typeof IndexRoute
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/'
+  id: '__root__' | '/'
+  fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+}
+
+export const routeTree = rootRoute
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */

ui-v2/src/routeTree.ts

@@ -0,0 +1,14 @@
+import { createRouter } from '@tanstack/react-router';
+
+import { rootRoute, indexRoute, aboutRoute } from './routes';
+
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);
+
+export const router = createRouter({ routeTree });
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}

ui-v2/src/routes/__root.tsx

@@ -0,0 +1,20 @@
+import { createRootRoute, Link, Outlet } from '@tanstack/react-router';
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <div className="p-2 flex gap-2">
+        <Link to="/" className="[&.active]:font-bold">
+          Home
+        </Link>{' '}
+        <Link to="/about" className="[&.active]:font-bold">
+          About
+        </Link>
+      </div>
+      <hr />
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+});

ui-v2/src/routes/index.tsx

@@ -0,0 +1,28 @@
+import { createRootRoute, createRoute } from '@tanstack/react-router';
+
+import App from '../App';
+
+export const rootRoute = createRootRoute({
+  component: App,
+});
+
+export const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: () => (
+    <div className="p-5">
+      <h2>Welcome to Goose v2</h2>
+    </div>
+  ),
+});
+
+export const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/about',
+  component: () => (
+    <div className="p-5">
+      <h2>About Goose v2</h2>
+      <p>An AI assistant for developers</p>
+    </div>
+  ),
+});

ui-v2/src/services/electron.ts

@@ -12,4 +12,4 @@ export class ElectronService {
   }
 }
 
-export const electronService = new ElectronService();
+export const electronService = new ElectronService();