feat(sidebar): add collapsible toggle for libraries section

- Introduce `showLibraries` state to control libraries visibility
- Replace library header div with a toggle button
- Add rotate animation to the ChevronRight icon when expanded
- Conditionally render libraries list based on toggle state
- Maintain consistent styling for collapsed and expanded views
- Preserve link and button structure for each library item

src/components/sidebar.tsx

@@ -29,6 +29,7 @@ const SidebarContent = () => {
   const [libraries, setLibraries] = useState<{ id: number; path: string }[]>([]);
   const [clusters, setClusters] = useState<Cluster[]>([]);
   const [showClusters, setShowClusters] = useState(true);
+  const [showLibraries, setShowLibraries] = useState(true);
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
@@ -201,17 +202,27 @@ const SidebarContent = () => {
         {/* Libraries Section */}
         {libraries.length > 0 && (
           <div className="pt-6 flex-1 flex flex-col overflow-hidden">
-            <div className={cn(
+            <button
-              "flex items-center gap-2 px-3 mb-3 flex-shrink-0",
+              onClick={() => setShowLibraries(!showLibraries)}
+              className={cn(
+                "flex items-center gap-2 px-3 mb-3 w-full hover:text-foreground transition-colors",
                 isCollapsed && "justify-center"
-            )}>
+              )}
+            >
               <FolderOpen className="h-4 w-4 text-muted-foreground" />
               {!isCollapsed && (
-                <h2 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                <>
+                  <h2 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider flex-1 text-left">
                     Libraries
                   </h2>
+                  <ChevronRight className={cn(
+                    "h-3 w-3 text-muted-foreground transition-transform",
+                    showLibraries && "rotate-90"
+                  )} />
+                </>
               )}
-            </div>
+            </button>
+            {showLibraries && (
               <div className="space-y-1 overflow-y-auto flex-1 sidebar-scrollbar">
                 {libraries.map((lib) => (
                   <Link
@@ -238,6 +249,7 @@ const SidebarContent = () => {
                   </Link>
                 ))}
               </div>
+            )}
           </div>
         )}
       </nav>