improve ux overflow with sidebar (#79)

src/atoms/uiAtoms.ts

@@ -0,0 +1,4 @@
+import { atom } from "jotai";
+
+// Atom to track if any dropdown is currently open in the UI
+export const dropdownOpenAtom = atom<boolean>(false);

src/components/ChatList.tsx

@@ -6,6 +6,7 @@ import { PlusCircle, MoreVertical, Trash2 } from "lucide-react";
 import { useAtom } from "jotai";
 import { selectedChatIdAtom } from "@/atoms/chatAtoms";
 import { selectedAppIdAtom } from "@/atoms/appAtoms";
+import { dropdownOpenAtom } from "@/atoms/uiAtoms";
 import { IpcClient } from "@/ipc/ipc_client";
 import { showError, showSuccess } from "@/lib/toast";
 import {
@@ -28,6 +29,7 @@ export function ChatList({ show }: { show?: boolean }) {
   const navigate = useNavigate();
   const [selectedChatId, setSelectedChatId] = useAtom(selectedChatIdAtom);
   const [selectedAppId, setSelectedAppId] = useAtom(selectedAppIdAtom);
+  const [isDropdownOpen, setIsDropdownOpen] = useAtom(dropdownOpenAtom);
   const { chats, loading, refreshChats } = useChats(selectedAppId);
   const routerState = useRouterState();
   const isChatRoute = routerState.location.pathname === "/chat";
@@ -136,7 +138,7 @@ export function ChatList({ show }: { show?: boolean }) {
             <SidebarMenu className="space-y-1">
               {chats.map((chat) => (
                 <SidebarMenuItem key={chat.id} className="mb-1">
-                  <div className="flex w-[185px] items-center">
+                  <div className="flex w-[175px] items-center">
                     <Button
                       variant="ghost"
                       onClick={() =>
@@ -161,7 +163,9 @@ export function ChatList({ show }: { show?: boolean }) {
                     </Button>
 
                     {selectedChatId === chat.id && (
-                      <DropdownMenu>
+                      <DropdownMenu
+                        onOpenChange={(open) => setIsDropdownOpen(open)}
+                      >
                         <DropdownMenuTrigger asChild>
                           <Button
                             variant="ghost"

src/components/app-sidebar.tsx

@@ -2,6 +2,8 @@ import { Home, Inbox, Settings, HelpCircle } from "lucide-react";
 import { Link, useRouterState } from "@tanstack/react-router";
 import { useSidebar } from "@/components/ui/sidebar"; // import useSidebar hook
 import { useEffect, useState, useRef } from "react";
+import { useAtom } from "jotai";
+import { dropdownOpenAtom } from "@/atoms/uiAtoms";
 
 import {
   Sidebar,
@@ -50,6 +52,7 @@ export function AppSidebar() {
   const [hoverState, setHoverState] = useState<HoverState>("no-hover");
   const expandedByHover = useRef(false);
   const [isHelpDialogOpen, setIsHelpDialogOpen] = useState(false); // State for dialog
+  const [isDropdownOpen] = useAtom(dropdownOpenAtom);
 
   useEffect(() => {
     if (
@@ -62,13 +65,14 @@ export function AppSidebar() {
     if (
       hoverState === "clear-hover" &&
       state === "expanded" &&
-      expandedByHover.current
+      expandedByHover.current &&
+      !isDropdownOpen
     ) {
       toggleSidebar();
       expandedByHover.current = false;
       setHoverState("no-hover");
     }
-  }, [hoverState, toggleSidebar, state, setHoverState]);
+  }, [hoverState, toggleSidebar, state, setHoverState, isDropdownOpen]);
 
   const routerState = useRouterState();
   const isAppRoute =
@@ -93,7 +97,9 @@ export function AppSidebar() {
     <Sidebar
       collapsible="icon"
       onMouseLeave={() => {
+        if (!isDropdownOpen) {
           setHoverState("clear-hover");
+        }
       }}
     >
       <SidebarContent className="overflow-hidden">