Adds a layout for the app route group

web-app/.prettierignore

@@ -6,4 +6,6 @@
 src/lib/api/generated/**
 
 # Ignore UI components
-src/components/ui/**
+src/components/ui/**
+
+tailwind.config.ts

web-app/package.json

@@ -27,7 +27,9 @@
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "@react-email/components": "^0.0.33",
     "better-auth": "^1.2.0",
     "better-auth-harmony": "^1.2.3",
@@ -44,6 +46,7 @@
     "sonner": "^2.0.1",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",
+    "usehooks-ts": "^3.1.1",
     "vaul": "^1.1.2",
     "zod": "^3.24.2"
   },

web-app/src/app/(app)/components/app-header.tsx

@@ -1,12 +1,13 @@
-import { UserAvatar } from "@/components/user-avatar";
+import CustomTrigger from "./app-sidebar/components/custom-trigger";
+import MainNav from "./main-nav";
+import MobileNav from "./mobile-nav";
+import UserAvatar from "./user-avatar";
 
-import { MainNav } from "./main-nav";
-import { MobileNav } from "./mobile-nav";
-
-export function AppHeader() {
+export default function AppHeader() {
   return (
-    <header className="border-grid sticky top-0 z-50 w-full border-b bg-background/95 px-4 py-3">
+    <header className="border-grid sticky top-0 z-50 flex h-[64px] w-full items-center border-b bg-background/95 px-4 py-3">
       <div className="flex w-full items-center">
+        <CustomTrigger when="invisible" />
         <MainNav />
         <MobileNav />
         <UserAvatar />

web-app/src/app/(app)/components/app-sidebar/components/agent-add-button.tsx

@@ -0,0 +1,21 @@
+import { Plus } from "lucide-react";
+
+import { SokosumiIcon } from "@/components/masumi-icons";
+import { Button } from "@/components/ui/button";
+
+export default function AgentAddButton() {
+  return (
+    <div className="flex items-center gap-2 p-3">
+      <SokosumiIcon />
+      <div className="flex flex-1 flex-col">
+        <h2 className="text-base font-bold text-muted-foreground">
+          Agents Gallery
+        </h2>
+        <p className="text-sm text-muted-foreground">browse agents</p>
+      </div>
+      <Button variant="outline" size="icon">
+        <Plus />
+      </Button>
+    </div>
+  );
+}

web-app/src/app/(app)/components/app-sidebar/components/agents-list.tsx

@@ -0,0 +1,56 @@
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+
+const pinnedAgents = Array.from(
+  { length: 10 },
+  (_, index) => `Random Agent #${index + 1}`,
+);
+const recentlyUsedAgents = Array.from(
+  { length: 10 },
+  (_, index) => `Random Agent #${index + 1}`,
+);
+
+export default function AgentsList() {
+  return (
+    <>
+      <SidebarGroup>
+        <SidebarGroupLabel className="text-base">
+          Pinned Agents
+        </SidebarGroupLabel>
+        <SidebarGroupContent className="mt-2">
+          <SidebarMenu>
+            {pinnedAgents.map((agent) => (
+              <SidebarMenuItem key={agent}>
+                <SidebarMenuButton asChild>
+                  <span>{agent}</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+      <SidebarGroup>
+        <SidebarGroupLabel className="text-base">
+          Recently Hired Agents
+        </SidebarGroupLabel>
+        <SidebarGroupContent className="mt-2">
+          <SidebarMenu>
+            {recentlyUsedAgents.map((agent) => (
+              <SidebarMenuItem key={agent}>
+                <SidebarMenuButton asChild>
+                  <span>{agent}</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </>
+  );
+}

web-app/src/app/(app)/components/app-sidebar/components/custom-trigger.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { ArrowLeftFromLine, ArrowRightFromLine } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { useSidebar } from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+interface CustomTriggerProps {
+  when?: "visible" | "invisible" | "always";
+}
+
+export default function CustomTrigger({ when = "always" }: CustomTriggerProps) {
+  const { open, openMobile, isMobile, toggleSidebar } = useSidebar();
+  const isVisible = isMobile ? openMobile : open;
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={toggleSidebar}
+      className={cn("hidden", {
+        flex:
+          when === "always" || (when === "visible" ? isVisible : !isVisible),
+      })}
+    >
+      {isVisible ? <ArrowLeftFromLine /> : <ArrowRightFromLine />}
+    </Button>
+  );
+}

web-app/src/app/(app)/components/app-sidebar/index.tsx

@@ -0,0 +1,33 @@
+import { SokosumiLogo } from "@/components/masumi-logos";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+} from "@/components/ui/sidebar";
+
+import AgentAddButton from "./components/agent-add-button";
+import AgentsList from "./components/agents-list";
+import CustomTrigger from "./components/custom-trigger";
+
+export default function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <div className="flex items-center gap-2 p-2">
+          <CustomTrigger />
+          <SokosumiLogo />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <ScrollArea>
+          <AgentsList />
+        </ScrollArea>
+      </SidebarContent>
+      <SidebarFooter>
+        <AgentAddButton />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}