Add collapse sidebar button

Author: brendan-kellam

packages/web/src/app/(app)/browse/layoutClient.tsx

@@ -23,7 +23,7 @@ export function LayoutClient({
     const { repoName, revisionName } = useBrowseParams();
     return (
         <BrowseStateProvider>
-            <div className="flex flex-col h-screen">
+            <div className="flex flex-col h-full">
                 <div className='sticky top-0 left-0 right-0 z-10'>
                     <div className="py-1.5 px-3">
                         <SearchBar

packages/web/src/app/(app)/components/appSidebar.tsx

@@ -26,12 +26,14 @@ import {
     SidebarMenuAction,
     SidebarMenuButton,
     SidebarMenuItem,
+    SidebarRail,
+    useSidebar,
 } from "@/components/ui/sidebar";
 import { UserAvatar } from "@/components/userAvatar";
 import { deleteChat, duplicateChat, updateChatName } from "@/features/chat/actions";
 import { captureEvent } from "@/hooks/useCaptureEvent";
 import { cn, isServiceError } from "@/lib/utils";
-import { BookMarkedIcon, ChevronsUpDown, EllipsisIcon, LogOut, MessageCircleIcon, MessagesSquareIcon, SearchIcon, SettingsIcon } from "lucide-react";
+import { ArrowLeftToLineIcon, ArrowRightToLineIcon, BookMarkedIcon, ChevronsUpDown, EllipsisIcon, LogOut, MessageCircleIcon, MessagesSquareIcon, SearchIcon, SettingsIcon } from "lucide-react";
 import { Session } from "next-auth";
 import { signOut } from "next-auth/react";
 import Link from "next/link";
@@ -232,16 +234,38 @@ export function AppSidebar({ session, chatHistory }: AppSidebarProps) {
                     currentName={chatHistory.find((chat) => chat.id === chatIdToDuplicate)?.name ?? "Untitled chat"}
                 />
             </SidebarContent>
-            <SidebarFooter>
+            <SidebarFooter className="border-t border-sidebar-border">
+                <CollapseSidebarButton />
                 {session && (
                     <MeControlDropdownMenu session={session} />
                 )}
             </SidebarFooter>
+            <SidebarRail />
         </Sidebar>
     );
 }
 
 
+function CollapseSidebarButton() {
+    const { toggleSidebar, state } = useSidebar();
+    return (
+        <SidebarMenu>
+            <SidebarMenuItem>
+                <SidebarMenuButton onClick={toggleSidebar}>
+                    {state === "expanded" ? (
+                        <>
+                            <ArrowLeftToLineIcon />
+                            <span>Collapse sidebar</span>
+                        </>
+                    ) : (
+                        <ArrowRightToLineIcon />
+                    )}
+                </SidebarMenuButton>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    );
+}
+
 interface MeControlDropdownMenuProps {
     session: Session;
 }

packages/web/src/app/(app)/search/components/searchResultsPage.tsx

@@ -170,7 +170,7 @@ export const SearchResultsPage = ({
 
 
     return (
-        <div className="flex flex-col h-screen overflow-clip">
+        <div className="flex flex-col h-full">
             <div className='sticky top-0 left-0 right-0 z-10'>
                 <div className="py-1.5 px-3">
                     <SearchBar

packages/web/src/components/ui/sidebar.tsx

@@ -30,7 +30,7 @@ const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
 const SIDEBAR_WIDTH = "16rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+const SIDEBAR_KEYBOARD_SHORTCUT = "["
 
 type SidebarContextProps = {
   state: "expanded" | "collapsed"
@@ -106,8 +106,7 @@ const SidebarProvider = React.forwardRef<
     React.useEffect(() => {
       const handleKeyDown = (event: KeyboardEvent) => {
         if (
-          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-          (event.metaKey || event.ctrlKey)
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT
         ) {
           event.preventDefault()
           toggleSidebar()