Merge pull request #6884 from github-roushan/dismiss-dropdown

fix: hide thread dropdown on delete dialog confirmation popup

Author: urmauur

web-app/src/containers/ThreadList.tsx

@@ -18,6 +18,7 @@ import {
   IconStar,
   IconFolder,
   IconX,
+  IconTrash,
 } from '@tabler/icons-react'
 import { useThreads } from '@/hooks/useThreads'
 import { useThreadManagement } from '@/hooks/useThreadManagement'
@@ -81,6 +82,7 @@ const SortableItem = memo(
     const getMessages = useMessages((state) => state.getMessages)
     const { t } = useTranslation()
     const [openDropdown, setOpenDropdown] = useState(false)
+    const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
     const navigate = useNavigate()
     // Check if current route matches this thread's detail page
     const matches = useMatches()
@@ -306,14 +308,28 @@ const SortableItem = memo(
                 </>
               )}
               <DropdownMenuSeparator />
-              <DeleteThreadDialog
-                thread={thread}
-                onDelete={deleteThread}
-                onDropdownClose={() => setOpenDropdown(false)}
-                variant={variant}
-              />
+              <DropdownMenuItem
+                onSelect={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  setDeleteConfirmOpen(true)
+                  setOpenDropdown(false)
+                }}
+              >
+                <IconTrash />
+                <span>{t('common:delete')}</span>
+              </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
+          <DeleteThreadDialog
+            thread={thread}
+            onDelete={deleteThread}
+            onDropdownClose={() => setOpenDropdown(false)}
+            variant={variant}
+            open={deleteConfirmOpen}
+            onOpenChange={setDeleteConfirmOpen}
+            withoutTrigger
+          />
         </div>
       </div>
     )

web-app/src/containers/dialogs/DeleteThreadDialog.tsx

@@ -20,32 +20,48 @@ import { route } from '@/constants/routes'
 interface DeleteThreadDialogProps {
   thread: Thread
   onDelete: (threadId: string) => void
-  onDropdownClose: () => void
+  onDropdownClose?: () => void
   variant?: 'default' | 'project'
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  withoutTrigger?: boolean
 }
 
 export function DeleteThreadDialog({
   thread,
   onDelete,
   onDropdownClose,
   variant = 'default',
+  open,
+  onOpenChange,
+  withoutTrigger,
 }: DeleteThreadDialogProps) {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const [isOpen, setIsOpen] = useState(false)
+  const [internalOpen, setInternalOpen] = useState(false)
   const deleteButtonRef = useRef<HTMLButtonElement>(null)
 
+  const isControlled = open !== undefined
+  const isOpen = isControlled ? !!open : internalOpen
+  const setOpenSafe = (next: boolean) => {
+    if (isControlled) {
+      onOpenChange?.(next)
+    } else {
+      setInternalOpen(next)
+    }
+  }
+
   const handleOpenChange = (open: boolean) => {
-    setIsOpen(open)
+    setOpenSafe(open)
     if (!open) {
-      onDropdownClose()
+      onDropdownClose?.()
     }
   }
 
   const handleDelete = () => {
     onDelete(thread.id)
-    setIsOpen(false)
-    onDropdownClose()
+    setOpenSafe(false)
+    onDropdownClose?.()
     toast.success(t('common:toast.deleteThread.title'), {
       id: 'delete-thread',
       description: t('common:toast.deleteThread.description'),
@@ -65,12 +81,14 @@ export function DeleteThreadDialog({
 
   return (
     <Dialog open={isOpen} onOpenChange={handleOpenChange}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-          <IconTrash />
-          <span>{t('common:delete')}</span>
-        </DropdownMenuItem>
-      </DialogTrigger>
+      {!withoutTrigger && (
+        <DialogTrigger asChild>
+          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+            <IconTrash />
+            <span>{t('common:delete')}</span>
+          </DropdownMenuItem>
+        </DialogTrigger>
+      )}
       <DialogContent
         onOpenAutoFocus={(e) => {
           e.preventDefault()