5527 multiple file popups (#5905)

Signed-off-by: benjamindrussell <ben@benjamindrussell.com>

ui/desktop/src/components/ChatInput.tsx

@@ -142,6 +142,7 @@ export default function ChatInput({
   const [diagnosticsOpen, setDiagnosticsOpen] = useState(false);
   const [showCreateRecipeModal, setShowCreateRecipeModal] = useState(false);
   const [showEditRecipeModal, setShowEditRecipeModal] = useState(false);
+  const [isFilePickerOpen, setIsFilePickerOpen] = useState(false);
 
   // Save queue state (paused/interrupted) to storage
   useEffect(() => {
@@ -1014,12 +1015,18 @@ export default function ChatInput({
   };
 
   const handleFileSelect = async () => {
-    const path = await window.electron.selectFileOrDirectory();
+    if (isFilePickerOpen) return;
-    if (path) {
+    setIsFilePickerOpen(true);
-      const newValue = displayValue.trim() ? `${displayValue.trim()} ${path}` : path;
+    try {
-      setDisplayValue(newValue);
+      const path = await window.electron.selectFileOrDirectory();
-      setValue(newValue);
+      if (path) {
-      textAreaRef.current?.focus();
+        const newValue = displayValue.trim() ? `${displayValue.trim()} ${path}` : path;
+        setDisplayValue(newValue);
+        setValue(newValue);
+        textAreaRef.current?.focus();
+      }
+    } finally {
+      setIsFilePickerOpen(false);
     }
   };
 
@@ -1457,9 +1464,10 @@ export default function ChatInput({
             <Button
               type="button"
               onClick={handleFileSelect}
+              disabled={isFilePickerOpen}
               variant="ghost"
               size="sm"
-              className="flex items-center justify-center text-text-default/70 hover:text-text-default text-xs cursor-pointer transition-colors"
+              className={`flex items-center justify-center text-text-default/70 hover:text-text-default text-xs transition-colors ${isFilePickerOpen ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
             >
               <Attach className="w-4 h-4" />
             </Button>

ui/desktop/src/components/bottom_menu/DirSwitcher.tsx

@@ -8,12 +8,24 @@ interface DirSwitcherProps {
 
 export const DirSwitcher: React.FC<DirSwitcherProps> = ({ className = '' }) => {
   const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+  const [isDirectoryChooserOpen, setIsDirectoryChooserOpen] = useState(false);
 
   const handleDirectoryChange = async () => {
-    window.electron.directoryChooser(true);
+    if (isDirectoryChooserOpen) return;
+    setIsDirectoryChooserOpen(true);
+    try {
+      await window.electron.directoryChooser(true);
+    } finally {
+      setIsDirectoryChooserOpen(false);
+    }
   };
 
   const handleDirectoryClick = async (event: React.MouseEvent) => {
+    if (isDirectoryChooserOpen) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
     const isCmdOrCtrlClick = event.metaKey || event.ctrlKey;
 
     if (isCmdOrCtrlClick) {
@@ -28,11 +40,17 @@ export const DirSwitcher: React.FC<DirSwitcherProps> = ({ className = '' }) => {
 
   return (
     <TooltipProvider>
-      <Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
+      <Tooltip
+        open={isTooltipOpen && !isDirectoryChooserOpen}
+        onOpenChange={(open) => {
+          if (!isDirectoryChooserOpen) setIsTooltipOpen(open);
+        }}
+      >
         <TooltipTrigger asChild>
           <button
-            className={`z-[100] hover:cursor-pointer text-text-default/70 hover:text-text-default text-xs flex items-center transition-colors pl-1 [&>svg]:size-4 ${className}`}
+            className={`z-[100] ${isDirectoryChooserOpen ? 'opacity-50' : 'hover:cursor-pointer hover:text-text-default'} text-text-default/70 text-xs flex items-center transition-colors pl-1 [&>svg]:size-4 ${className}`}
             onClick={handleDirectoryClick}
+            disabled={isDirectoryChooserOpen}
           >
             <FolderDot className="mr-1" size={16} />
             <div className="max-w-[200px] truncate [direction:rtl]">