feat(app): add user profile settings

apps/app/src/components/Layout.tsx

@@ -8,6 +8,7 @@ import {
   DropdownMenuTrigger,
 } from '@boring.tools/ui'
 import { SignOutButton, useUser } from '@clerk/clerk-react'
+import { Link } from '@tanstack/react-router'
 import type { ReactNode } from 'react'
 import { Navigation } from './Navigation'
 import { NavigationMobile } from './NavigationMobile'
@@ -23,7 +24,7 @@ export const Layout = ({ children }: { children: ReactNode | ReactNode[] }) => {
       <div className="flex flex-col">
         <header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
           <NavigationMobile />
-          {/* <div className="w-full flex-1"></div> */}
+          <div className="w-full flex-1" />
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
@@ -35,7 +36,10 @@ export const Layout = ({ children }: { children: ReactNode | ReactNode[] }) => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
+              <DropdownMenuLabel>Settings</DropdownMenuLabel>
+              <DropdownMenuItem asChild>
+                <Link to="/user">Profile</Link>
+              </DropdownMenuItem>
               <DropdownMenuSeparator />
               <DropdownMenuItem>
                 <SignOutButton>

apps/app/src/components/Navigation.tsx

@@ -25,7 +25,7 @@ export const Navigation = () => {
         <div className="flex-1">
           <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
             <Link
-              href="#"
+              to="/"
               className="flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary"
               activeProps={{ className: 'bg-muted text-primary' }}
             >

apps/app/src/routeTree.gen.ts

@@ -18,6 +18,7 @@ import { Route as rootRoute } from './routes/__root'
 
 const AboutLazyImport = createFileRoute('/about')()
 const IndexLazyImport = createFileRoute('/')()
+const UserIndexLazyImport = createFileRoute('/user/')()
 
 // Create/Update Routes
 
@@ -31,6 +32,11 @@ const IndexLazyRoute = IndexLazyImport.update({
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
 
+const UserIndexLazyRoute = UserIndexLazyImport.update({
+  path: '/user/',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import('./routes/user/index.lazy').then((d) => d.Route))
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -49,6 +55,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AboutLazyImport
       parentRoute: typeof rootRoute
     }
+    '/user/': {
+      id: '/user/'
+      path: '/user'
+      fullPath: '/user'
+      preLoaderRoute: typeof UserIndexLazyImport
+      parentRoute: typeof rootRoute
+    }
   }
 }
 
@@ -57,36 +70,41 @@ declare module '@tanstack/react-router' {
 export interface FileRoutesByFullPath {
   '/': typeof IndexLazyRoute
   '/about': typeof AboutLazyRoute
+  '/user': typeof UserIndexLazyRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexLazyRoute
   '/about': typeof AboutLazyRoute
+  '/user': typeof UserIndexLazyRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexLazyRoute
   '/about': typeof AboutLazyRoute
+  '/user/': typeof UserIndexLazyRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/about'
+  fullPaths: '/' | '/about' | '/user'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/about'
-  id: '__root__' | '/' | '/about'
+  to: '/' | '/about' | '/user'
+  id: '__root__' | '/' | '/about' | '/user/'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexLazyRoute: typeof IndexLazyRoute
   AboutLazyRoute: typeof AboutLazyRoute
+  UserIndexLazyRoute: typeof UserIndexLazyRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexLazyRoute: IndexLazyRoute,
   AboutLazyRoute: AboutLazyRoute,
+  UserIndexLazyRoute: UserIndexLazyRoute,
 }
 
 export const routeTree = rootRoute
@@ -102,7 +120,8 @@ export const routeTree = rootRoute
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/about"
+        "/about",
+        "/user/"
       ]
     },
     "/": {
@@ -110,6 +129,9 @@ export const routeTree = rootRoute
     },
     "/about": {
       "filePath": "about.lazy.tsx"
+    },
+    "/user/": {
+      "filePath": "user/index.lazy.tsx"
     }
   }
 }

apps/app/src/routes/user/index.lazy.tsx

@@ -0,0 +1,10 @@
+import { UserProfile } from '@clerk/clerk-react'
+import { createLazyFileRoute } from '@tanstack/react-router'
+
+const Component = () => {
+  return <UserProfile routing="virtual" />
+}
+
+export const Route = createLazyFileRoute('/user/')({
+  component: Component,
+})