feat(client): add application layout

apps/client/components.json

@@ -11,11 +11,10 @@
     },
     "iconLibrary": "lucide",
     "aliases": {
-        "components": "@/common/components",
-        "utils": "@/libs/utils",
-        "ui": "@/libs/ui",
-        "lib": "@/libs",
-        "hooks": "@/common/hooks"
+        "ui": "@/libs/ui/components",
+        "components": "@/libs/ui/components",
+        "hooks": "@/libs/ui/hooks",
+        "utils": "@/libs/ui/utils.ts"
     },
     "registries": {},
     "$schema": "https://ui.shadcn.com/schema.json"

apps/client/package.json

@@ -17,8 +17,13 @@
     "dependencies": {
         "@clerk/clerk-react": "^5.35.3",
         "@clerk/types": "^4.90.0",
+        "@radix-ui/react-avatar": "^1.1.10",
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-scroll-area": "^1.2.10",
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-tooltip": "^1.2.8",
         "@tailwindcss/vite": "^4.1.11",
         "@tanstack/react-form": "^1.15.0",
         "@tanstack/react-query": "^5.90.2",

apps/client/src/app/app.tsx

@@ -16,6 +16,8 @@ export function App() {
     )
 }
 
+// TODO: refactor loading to better handle changing auth states --> multiple loading screens encountered during login/logout
+
 function EntryPoint() {
     const [isReady, setIsReady] = useState(false)
     const auth = useAuth()

apps/client/src/app/loading.tsx

@@ -3,8 +3,8 @@ import { useEffect, useState } from "react"
 import { AnimatePresence, motion } from "motion/react"
 
 import { EchoLogo } from "@/common/components/logos/echo-logo"
-import { MotionContainer } from "@/libs/ui/container"
-import { Page } from "@/libs/ui/page"
+import { MotionContainer } from "@/libs/ui/components/container"
+import { Page } from "@/libs/ui/components/page"
 
 interface Props {
     isReady: boolean

apps/client/src/common/components/sidebar/sidebar-footer.tsx

@@ -0,0 +1,32 @@
+import { useUser } from "@clerk/clerk-react"
+import { ChevronsUpDown, UserRound } from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/libs/ui/components/avatar"
+import { SidebarMenuButton } from "@/libs/ui/components/sidebar"
+
+export function Footer() {
+    const { user } = useUser()
+
+    return (
+        <SidebarMenuButton
+            size="lg"
+            className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground
+                cursor-pointer"
+        >
+            <Avatar>
+                <AvatarImage
+                    src={user?.imageUrl}
+                    alt={user?.username || undefined}
+                />
+                <AvatarFallback>
+                    <UserRound size={16} />
+                </AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user?.username}</span>
+                <span className="truncate text-xs">{user?.primaryEmailAddress?.emailAddress}</span>
+            </div>
+            <ChevronsUpDown className="ml-auto size-4" />
+        </SidebarMenuButton>
+    )
+}

apps/client/src/common/components/sidebar/sidebar-header.tsx

@@ -0,0 +1,16 @@
+import { Separator } from "@/libs/ui/components/separator"
+import { SidebarTrigger } from "@/libs/ui/components/sidebar"
+import Large from "@/libs/ui/components/typography/large"
+
+export function Header() {
+    return (
+        <div className="flex h-12 items-center gap-2 overflow-hidden">
+            <SidebarTrigger size="lg" />
+            <Separator
+                orientation="vertical"
+                className="!h-8"
+            />
+            <Large className="text-accent-foreground pl-2">Navigation</Large>
+        </div>
+    )
+}

apps/client/src/common/components/sidebar/sidebar-nav.config.ts

@@ -0,0 +1,27 @@
+import { linkOptions } from "@tanstack/react-router"
+import { House, MessageSquare, Search, UserRound } from "lucide-react"
+
+const options = linkOptions([
+    {
+        icon: House,
+        label: "Home",
+        to: "/home"
+    },
+    {
+        icon: Search,
+        label: "Search",
+        to: "/onboarding" // TODO: temporary avoid type error
+    },
+    {
+        icon: UserRound,
+        label: "Profile",
+        to: "/onboarding" // TODO: temporary avoid type error
+    },
+    {
+        icon: MessageSquare,
+        label: "Chat",
+        to: "/onboarding" // TODO: temporary avoid type error
+    }
+])
+
+export { options }

apps/client/src/common/components/sidebar/sidebar-nav.tsx

@@ -0,0 +1,38 @@
+import { Link } from "@tanstack/react-router"
+
+import {
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem
+} from "@/libs/ui/components/sidebar"
+
+import { options } from "./sidebar-nav.config"
+
+export function Navigation() {
+    return (
+        <SidebarGroup>
+            <SidebarGroupContent>
+                <SidebarMenu>
+                    {options.map((option) => (
+                        <SidebarMenuItem key={option.to}>
+                            <SidebarMenuButton
+                                asChild
+                                tooltip={option.label}
+                            >
+                                <Link
+                                    to={option.to}
+                                    inactiveProps={{ className: "opacity-60" }}
+                                >
+                                    <option.icon />
+                                    <span>{option.label}</span>
+                                </Link>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    ))}
+                </SidebarMenu>
+            </SidebarGroupContent>
+        </SidebarGroup>
+    )
+}

apps/client/src/common/components/sidebar/sidebar.tsx

@@ -0,0 +1,24 @@
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader } from "@/libs/ui/components/sidebar"
+
+import { Footer } from "./sidebar-footer"
+import { Header } from "./sidebar-header"
+import { Navigation } from "./sidebar-nav"
+
+export function AppSidebar() {
+    return (
+        <Sidebar
+            variant="floating"
+            collapsible="icon"
+        >
+            <SidebarHeader>
+                <Header />
+            </SidebarHeader>
+            <SidebarContent>
+                <Navigation />
+            </SidebarContent>
+            <SidebarFooter>
+                <Footer />
+            </SidebarFooter>
+        </Sidebar>
+    )
+}

apps/client/src/features/auth/components/auth-form-wrapper.tsx

@@ -1,6 +1,6 @@
 import type React from "react"
 
-import { MotionContainer } from "@/libs/ui/container"
+import { MotionContainer } from "@/libs/ui/components/container"
 
 import { BackToHome } from "./back-to-home"
 

apps/client/src/features/auth/components/back-to-home.tsx

@@ -1,8 +1,8 @@
 import { Link } from "@tanstack/react-router"
 import { ArrowLeft } from "lucide-react"
 
-import { Button } from "@/libs/ui/button"
-import { MotionContainer } from "@/libs/ui/container"
+import { Button } from "@/libs/ui/components/button"
+import { MotionContainer } from "@/libs/ui/components/container"
 
 export function BackToHome() {
     return (

apps/client/src/features/landing/components/cta.tsx

@@ -1,8 +1,8 @@
 import { Link } from "@tanstack/react-router"
 
-import { Button } from "@/libs/ui/button"
-import { MotionContainer } from "@/libs/ui/container"
-import { LabelledSeparator } from "@/libs/ui/separator"
+import { Button } from "@/libs/ui/components/button"
+import { MotionContainer } from "@/libs/ui/components/container"
+import { LabelledSeparator } from "@/libs/ui/components/separator"
 
 export function CallToAction() {
     return (

apps/client/src/features/landing/components/footer.tsx

@@ -1,4 +1,4 @@
-import { MotionContainer } from "@/libs/ui/container"
+import { MotionContainer } from "@/libs/ui/components/container"
 
 export function Footer() {
     return (

apps/client/src/features/landing/components/hero.tsx

@@ -1,7 +1,7 @@
 import { EchoLogo } from "@/common/components/logos/echo-logo"
-import { MotionContainer } from "@/libs/ui/container"
-import H1 from "@/libs/ui/typography/h1"
-import Lead from "@/libs/ui/typography/lead"
+import { MotionContainer } from "@/libs/ui/components/container"
+import H1 from "@/libs/ui/components/typography/h1"
+import Lead from "@/libs/ui/components/typography/lead"
 
 export function Hero() {
     return (

apps/client/src/features/onboarding/components/multi-step-loader.tsx

@@ -4,8 +4,8 @@ import type { MutationStatus } from "@tanstack/react-query"
 import { AnimatePresence } from "motion/react"
 
 import Spinner from "@/common/components/spinner"
-import { Button } from "@/libs/ui/button"
-import { MotionContainer } from "@/libs/ui/container"
+import { Button } from "@/libs/ui/components/button"
+import { MotionContainer } from "@/libs/ui/components/container"
 
 interface Props {
     status: MutationStatus

apps/client/src/libs/ui/components/avatar.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/libs/ui/utils.ts"
+
+function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+    return (
+        <AvatarPrimitive.Root
+            data-slot="avatar"
+            className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
+            {...props}
+        />
+    )
+}
+
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+    return (
+        <AvatarPrimitive.Image
+            data-slot="avatar-image"
+            className={cn("aspect-square size-full", className)}
+            {...props}
+        />
+    )
+}
+
+function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+    return (
+        <AvatarPrimitive.Fallback
+            data-slot="avatar-fallback"
+            className={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
+            {...props}
+        />
+    )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

apps/client/src/libs/ui/button.tsx → apps/client/src/libs/ui/components/button.tsx

@@ -3,7 +3,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { type VariantProps, cva } from "class-variance-authority"
 
-import { cn } from "@/libs/utils"
+import { cn } from "@/libs/ui/utils"
 
 const buttonVariants = cva(
     "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",