Layout v2 (#1097)

* wip

* remove unused hook

* Add collapse sidebar button

* refactor settings into sidebar as a override context

* chat thread styling

* notification dot

* improved rendering

* fix light mode

* imporved api key page

* add chats page

* not found nit

* guest sidebar footer

* add tooltip for sidebar collapse button

* nit

* onboard nit

* fix permission sync banner

* what's new

* profile settings

* home view settings

* general settings

* remove shadow

* changelog

* feedback

Author: brendan-kellam

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+- Redesigned the app layout with a new collapsible sidebar navigation, replacing the previous top navigation bar. [#1097](https://github.com/sourcebot-dev/sourcebot/pull/1097)
+
 ## [4.16.8] - 2026-04-09
 
 ### Added

CLAUDE.md

@@ -57,6 +57,18 @@ if (!value) { return; }
 if (condition) doSomething();
 ```
 
+## Conditional ClassNames
+
+Use `cn()` from `@/lib/utils` for conditional classNames instead of template literal interpolation:
+
+```tsx
+// Correct
+className={cn("border-b transition-colors", isActive ? "border-foreground" : "border-transparent")}
+
+// Incorrect
+className={`border-b transition-colors ${isActive ? "border-foreground" : "border-transparent"}`}
+```
+
 ## Tailwind CSS
 
 Use Tailwind color classes directly instead of CSS variable syntax:

packages/db/tools/scriptRunner.ts

@@ -7,6 +7,7 @@ import { injectUserData } from "./scripts/inject-user-data";
 import { confirmAction } from "./utils";
 import { injectRepoData } from "./scripts/inject-repo-data";
 import { testRepoQueryPerf } from "./scripts/test-repo-query-perf";
+import { injectChatData } from "./scripts/inject-chat-data";
 
 export interface Script {
     run: (prisma: PrismaClient) => Promise<void>;
@@ -19,12 +20,13 @@ export const scripts: Record<string, Script> = {
     "inject-user-data": injectUserData,
     "inject-repo-data": injectRepoData,
     "test-repo-query-perf": testRepoQueryPerf,
+    "inject-chat-data": injectChatData,
 }
 
 const parser = new ArgumentParser();
 parser.add_argument("--url", { required: true, help: "Database URL" });
 parser.add_argument("--script", { required: true, help: "Script to run" });
-const args = parser.parse_args();
+const [args] = parser.parse_known_args();
 
 (async () => {
     if (!(args.script in scripts)) {

packages/db/tools/scripts/inject-chat-data.ts

@@ -0,0 +1,86 @@
+import { Script } from "../scriptRunner";
+import { PrismaClient } from "../../dist";
+import { confirmAction } from "../utils";
+
+const chatNames = [
+    "How does the auth middleware work?",
+    "Explain the search indexing pipeline",
+    "Where are API routes defined?",
+    "How to add a new database migration",
+    "What is the repo sync process?",
+    "Understanding the chat architecture",
+    "How does SSO integration work?",
+    "Explain the permission model",
+    "Where is the webhook handler?",
+    "How to configure environment variables",
+    "Understanding the billing system",
+    "How does the worker process jobs?",
+    "Explain the caching strategy",
+    "Where are the shared types defined?",
+    "How does code search ranking work?",
+    "Understanding the notification system",
+    "How to add a new API endpoint",
+    "Explain the deployment pipeline",
+    "Where is error handling centralized?",
+    "How does real-time updates work?",
+    "Understanding the plugin system",
+    "How to write integration tests",
+    "Explain the file indexing process",
+    "Where are the email templates?",
+    "How does rate limiting work?",
+    "Understanding the monorepo structure",
+    "How to add a new feature flag",
+    "Explain the logging setup",
+    "Where is the GraphQL schema?",
+    "How does the sidebar component work?",
+];
+
+export const injectChatData: Script = {
+    run: async (prisma: PrismaClient) => {
+        const orgId = 1;
+
+        const org = await prisma.org.findUnique({
+            where: { id: orgId }
+        });
+
+        if (!org) {
+            console.error(`Organization with id ${orgId} not found.`);
+            return;
+        }
+
+        const userIdArg = process.argv.find(arg => arg.startsWith("--user-id="))?.split("=")[1];
+
+        const user = userIdArg
+            ? await prisma.user.findUnique({ where: { id: userIdArg } })
+            : await prisma.user.findFirst({
+                where: {
+                    orgs: {
+                        some: { orgId }
+                    }
+                }
+            });
+
+        if (!user) {
+            console.error(userIdArg
+                ? `User with id "${userIdArg}" not found.`
+                : `No user found in org ${orgId}.`
+            );
+            return;
+        }
+
+        await confirmAction(`This will create ${chatNames.length} chats for user "${user.name ?? user.email}" in org ${orgId}.`);
+
+        for (const name of chatNames) {
+            await prisma.chat.create({
+                data: {
+                    name,
+                    orgId,
+                    createdById: user.id,
+                    messages: [],
+                }
+            });
+        }
+
+        console.log(`Created ${chatNames.length} chats.`);
+    }
+};

packages/web/package.json

@@ -70,7 +70,7 @@
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-collapsible": "^1.1.11",
-    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-hover-card": "^1.1.6",
     "@radix-ui/react-icons": "^1.3.0",
@@ -79,13 +79,13 @@
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-toggle": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-email/components": "^1.0.2",
     "@react-email/render": "^2.0.0",
     "@replit/codemirror-lang-csharp": "^6.2.0",
@@ -114,7 +114,7 @@
     "ai": "^6.0.105",
     "ajv": "^8.17.1",
     "bcryptjs": "^3.0.2",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "client-only": "^0.0.1",
     "clsx": "^2.1.1",
     "cm6-graphql": "^0.2.0",
@@ -149,7 +149,7 @@
     "langfuse": "^3.38.4",
     "langfuse-vercel": "^3.38.4",
     "linguist-languages": "^9.3.1",
-    "lucide-react": "^0.517.0",
+    "lucide-react": "^1.7.0",
     "micromatch": "^4.0.8",
     "minidenticons": "^4.2.1",
     "next": "16.1.6",

packages/web/src/app/(app)/@sidebar/(routes)/(default)/[...slug]/page.tsx

@@ -0,0 +1,5 @@
+import { DefaultSidebar } from "../../../components/defaultSidebar";
+
+export default async function Page() {
+    return <DefaultSidebar />;
+}

packages/web/src/app/(app)/@sidebar/(routes)/(default)/page.tsx

@@ -0,0 +1,5 @@
+import { DefaultSidebar } from "../../components/defaultSidebar";
+
+export default async function Page() {
+    return <DefaultSidebar />;
+}

packages/web/src/app/(app)/@sidebar/(routes)/settings/[...slug]/page.tsx

@@ -0,0 +1,6 @@
+import { authenticatedPage } from "@/middleware/authenticatedPage";
+import { SettingsSidebar } from "../../../components/settingsSidebar";
+
+export default authenticatedPage(async () => {
+    return <SettingsSidebar />;
+});

packages/web/src/app/(app)/@sidebar/(routes)/settings/page.tsx

@@ -0,0 +1,6 @@
+import { authenticatedPage } from "@/middleware/authenticatedPage";
+import { SettingsSidebar } from "../../components/settingsSidebar";
+
+export default authenticatedPage(async () => {
+    return <SettingsSidebar />;
+});

packages/web/src/app/(app)/@sidebar/components/defaultSidebar/chatHistory.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { ChatActionsDropdown } from "@/app/(app)/chat/components/chatActionsDropdown";
+import { DeleteChatDialog } from "@/app/(app)/chat/components/deleteChatDialog";
+import { DuplicateChatDialog } from "@/app/(app)/chat/components/duplicateChatDialog";
+import { RenameChatDialog } from "@/app/(app)/chat/components/renameChatDialog";
+import { useToast } from "@/components/hooks/use-toast";
+import {
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuAction,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import { deleteChat, duplicateChat, updateChatName } from "@/features/chat/actions";
+import { captureEvent } from "@/hooks/useCaptureEvent";
+import { isServiceError } from "@/lib/utils";
+import { EllipsisIcon, MessagesSquareIcon } from "lucide-react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useCallback, useState } from "react";
+
+export interface ChatHistoryItem {
+    id: string;
+    name: string | null;
+    createdAt: Date;
+}
+
+interface ChatHistoryProps {
+    chatHistory: ChatHistoryItem[];
+    hasMore?: boolean;
+}
+
+export function ChatHistory({ chatHistory, hasMore }: ChatHistoryProps) {
+    const pathname = usePathname();
+    const router = useRouter();
+    const { toast } = useToast();
+
+    const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+    const [chatIdToRename, setChatIdToRename] = useState<string | null>(null);
+    const [isDuplicateDialogOpen, setIsDuplicateDialogOpen] = useState(false);
+    const [chatIdToDuplicate, setChatIdToDuplicate] = useState<string | null>(null);
+    const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+    const [chatIdToDelete, setChatIdToDelete] = useState<string | null>(null);
+
+    const onRenameChat = useCallback(async (name: string, chatId: string): Promise<boolean> => {
+        const response = await updateChatName({ chatId, name });
+        if (isServiceError(response)) {
+            toast({ description: `Failed to rename chat. Reason: ${response.message}` });
+            return false;
+        }
+        toast({ description: "Chat renamed successfully" });
+        captureEvent('wa_chat_renamed', { chatId });
+        router.refresh();
+        return true;
+    }, [router, toast]);
+
+    const onDeleteChat = useCallback(async (chatIdToDelete: string): Promise<boolean> => {
+        const response = await deleteChat({ chatId: chatIdToDelete });
+        if (isServiceError(response)) {
+            toast({ description: `Failed to delete chat. Reason: ${response.message}` });
+            return false;
+        }
+        toast({ description: "Chat deleted successfully" });
+        captureEvent('wa_chat_deleted', { chatId: chatIdToDelete });
+        if (pathname === `/chat/${chatIdToDelete}`) {
+            router.push("/chat");
+        } else {
+            router.refresh();
+        }
+        return true;
+    }, [pathname, router, toast]);
+
+    const onDuplicateChat = useCallback(async (newName: string, chatIdToDuplicate: string): Promise<string | null> => {
+        const response = await duplicateChat({ chatId: chatIdToDuplicate, newName });
+        if (isServiceError(response)) {
+            toast({ description: `Failed to duplicate chat. Reason: ${response.message}` });
+            return null;
+        }
+        toast({ description: "Chat duplicated successfully" });
+        captureEvent('wa_chat_duplicated', { chatId: chatIdToDuplicate });
+        router.push(`/chat/${response.id}`);
+        return response.id;
+    }, [router, toast]);
+
+    if (chatHistory.length === 0) {
+        return null;
+    }
+
+    return (
+        <>
+            <SidebarGroup className="group-data-[state=collapsed]:hidden">
+                <SidebarGroupLabel className="text-muted-foreground whitespace-nowrap">Recent Chats</SidebarGroupLabel>
+                <SidebarGroupContent>
+                    <SidebarMenu>
+                        {chatHistory.map((chat) => (
+                            <SidebarMenuItem key={chat.id} className="group/chat">
+                                <SidebarMenuButton
+                                    asChild
+                                    isActive={pathname === `/chat/${chat.id}`}
+                                >
+                                    <Link href={`/chat/${chat.id}`}>
+                                        <span>{chat.name ?? "Untitled chat"}</span>
+                                    </Link>
+                                </SidebarMenuButton>
+                                <ChatActionsDropdown
+                                    onRenameClick={() => {
+                                        setChatIdToRename(chat.id);
+                                        setIsRenameDialogOpen(true);
+                                    }}
+                                    onDuplicateClick={() => {
+                                        setChatIdToDuplicate(chat.id);
+                                        setIsDuplicateDialogOpen(true);
+                                    }}
+                                    onDeleteClick={() => {
+                                        setChatIdToDelete(chat.id);
+                                        setIsDeleteDialogOpen(true);
+                                    }}
+                                >
+                                    <SidebarMenuAction showOnHover className="transition-opacity">
+                                        <EllipsisIcon className="w-4 h-4" />
+                                    </SidebarMenuAction>
+                                </ChatActionsDropdown>
+                            </SidebarMenuItem>
+                        ))}
+                        {hasMore && (
+                            <SidebarMenuItem>
+                                <SidebarMenuButton asChild>
+                                    <Link href="/chats">
+                                        <MessagesSquareIcon className="h-4 w-4" />
+                                        <span>All chats</span>
+                                    </Link>
+                                </SidebarMenuButton>
+                            </SidebarMenuItem>
+                        )}
+                    </SidebarMenu>
+                </SidebarGroupContent>
+            </SidebarGroup>
+            <RenameChatDialog
+                isOpen={isRenameDialogOpen}
+                onOpenChange={setIsRenameDialogOpen}
+                onRename={async (name) => {
+                    if (chatIdToRename) {
+                        return await onRenameChat(name, chatIdToRename);
+                    }
+                    return false;
+                }}
+                currentName={chatHistory.find((chat) => chat.id === chatIdToRename)?.name ?? "Untitled chat"}
+            />
+            <DeleteChatDialog
+                isOpen={isDeleteDialogOpen}
+                onOpenChange={setIsDeleteDialogOpen}
+                onDelete={async () => {
+                    if (chatIdToDelete) {
+                        return await onDeleteChat(chatIdToDelete);
+                    }
+                    return false;
+                }}
+            />
+            <DuplicateChatDialog
+                isOpen={isDuplicateDialogOpen}
+                onOpenChange={setIsDuplicateDialogOpen}
+                onDuplicate={async (newName) => {
+                    if (chatIdToDuplicate) {
+                        return await onDuplicateChat(newName, chatIdToDuplicate);
+                    }
+                    return null;
+                }}
+                currentName={chatHistory.find((chat) => chat.id === chatIdToDuplicate)?.name ?? "Untitled chat"}
+            />
+        </>
+    );
+}