Restore the "Drop files here" backdrop when dragging files (#1801)

Decouples file drag-and-drop into a FileDropZone provider (drag target + backdrop) and a useFileDrop consumer hook, with drag state on a Reanimated shared value so dragging triggers no React re-renders.

Fixes the collapsed/invisible backdrop (the drop zone had been moved into the composer with flex:0, collapsing the overlay to zero height) and restores whole-surface coverage across the agent panel, New Workspace screen, draft workspace tab, and workspace-setup dialog. The backdrop and copy cursor only appear when a drop will actually be accepted (a consumer is mounted and not submitting).

Refs #520

packages/app/src/composer/attachments/drop.ts

@@ -4,7 +4,7 @@ import {
   isRasterImagePath,
 } from "@/attachments/file-types";
 import { readDesktopFileBytes, type PickedFile } from "@/attachments/picked-file";
-import type { DroppedItem } from "@/hooks/use-file-drop-zone";
+import type { DroppedItem } from "@/components/file-drop/types";
 
 interface DroppedAttachmentsRuntime {
   readDesktopFileBytes(path: string): Promise<Uint8Array>;

packages/app/src/composer/draft/workspace-tab.tsx

@@ -8,6 +8,7 @@ import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
 import { useContainerWidthBelow } from "@/hooks/use-container-width";
 import invariant from "tiny-invariant";
 import { Composer } from "@/composer";
+import { FileDropZone } from "@/components/file-drop/file-drop-zone";
 import { DraftAgentModeControl } from "@/composer/agent-controls/mode-control";
 import { ComposerImportPill } from "@/composer/draft/import-pill";
 import { AgentStreamView } from "@/agent-stream/view";
@@ -644,7 +645,7 @@ export function WorkspaceDraftAgentTab({
   );
 
   return (
-    <View style={styles.container}>
+    <FileDropZone style={styles.container}>
       <View style={styles.contentContainer}>
         {isSubmitting && draftAgent ? (
           <View style={styles.streamContainer}>
@@ -702,7 +703,7 @@ export function WorkspaceDraftAgentTab({
           isCompactLayout={isCompactComposerLayout}
         />
       </ReanimatedAnimated.View>
-    </View>
+    </FileDropZone>
   );
 }
 

packages/app/src/composer/index.tsx

@@ -43,8 +43,8 @@ import { ContextWindowMeter } from "@/components/context-window-meter";
 import { useImageAttachmentPicker } from "@/hooks/use-image-attachment-picker";
 import { useSessionStore } from "@/stores/session-store";
 import { useFilePicker } from "@/hooks/use-file-picker";
-import { FileDropZone } from "@/components/file-drop-zone";
-import type { DroppedItem } from "@/hooks/use-file-drop-zone";
+import { useFileDrop } from "@/components/file-drop/use-file-drop";
+import type { DroppedItem } from "@/components/file-drop/types";
 import { MessageInput, type MessageInputRef, type AttachmentMenuItem } from "./input/input";
 import type { ImageAttachment, MessagePayload } from "./types";
 import { ICON_SIZE, type Theme } from "@/styles/theme";
@@ -1881,6 +1881,15 @@ export function Composer({
   const messageInputContainerRef = useRef<View>(null);
 
   const isSubmitBusy = isProcessing || isSubmitLoading || isUploadingFile;
+
+  // Disable drops while submitting/uploading: the submit path clears and restores attachments,
+  // so a drop in that window would be lost or land on a locked draft. `disabled` hides the
+  // backdrop and rejects the drop atomically, instead of accepting a drop with no feedback.
+  useFileDrop(
+    { onFiles: addImages, onGenericFiles: handleGenericFilesDropped },
+    { disabled: isSubmitBusy },
+  );
+
   const messageInputAutoFocus = autoFocus && isDesktopWebBreakpoint;
   const submitLoadingPressHandler = isAgentRunning ? handleCancelAgent : undefined;
   const sendErrorNode = useMemo(
@@ -1894,97 +1903,90 @@ export function Composer({
 
   return (
     <ComposerKeyboardScopeProvider isActiveComposer={isPaneFocused}>
-      <FileDropZone
-        onFilesDropped={addImages}
-        onGenericFilesDropped={handleGenericFilesDropped}
-        disabled={isSubmitBusy}
-        style={styles.dropZone}
-      >
-        <Animated.View style={composerContainerStyle}>
-          <AttachmentLightbox metadata={lightboxMetadata} onClose={handleLightboxClose} />
-          {/* Input area */}
-          <View style={inputAreaContainerStyle}>
-            <View style={styles.inputAreaContent}>
-              {queueList}
-              {sendErrorNode}
+      <Animated.View style={composerContainerStyle}>
+        <AttachmentLightbox metadata={lightboxMetadata} onClose={handleLightboxClose} />
+        {/* Input area */}
+        <View style={inputAreaContainerStyle}>
+          <View style={styles.inputAreaContent}>
+            {queueList}
+            {sendErrorNode}
 
-              <View ref={messageInputContainerRef} style={styles.messageInputContainer}>
-                <AutocompletePopover
-                  visible={autocompleteVisible}
-                  anchorRef={messageInputContainerRef}
-                  options={autocomplete.options}
-                  selectedIndex={autocomplete.selectedIndex}
-                  onSelect={autocomplete.onSelectOption}
-                  isLoading={autocomplete.isLoading}
-                  errorMessage={autocomplete.errorMessage}
-                  loadingText={autocomplete.loadingText}
-                  emptyText={autocomplete.emptyText}
-                />
+            <View ref={messageInputContainerRef} style={styles.messageInputContainer}>
+              <AutocompletePopover
+                visible={autocompleteVisible}
+                anchorRef={messageInputContainerRef}
+                options={autocomplete.options}
+                selectedIndex={autocomplete.selectedIndex}
+                onSelect={autocomplete.onSelectOption}
+                isLoading={autocomplete.isLoading}
+                errorMessage={autocomplete.errorMessage}
+                loadingText={autocomplete.loadingText}
+                emptyText={autocomplete.emptyText}
+              />
 
-                {/* MessageInput handles everything: text, dictation, attachments, all buttons */}
-                <StableMessageInput
-                  ref={messageInputRef}
-                  value={userInput}
-                  onChangeText={setUserInput}
-                  onSubmit={handleSubmit}
-                  hasExternalContent={hasExternalContent}
-                  allowEmptySubmit={allowEmptySubmit}
-                  submitButtonAccessibilityLabel={submitButtonAccessibilityLabel}
-                  submitButtonTestID={submitButtonTestID}
-                  submitIcon={submitIcon}
-                  isSubmitDisabled={isSubmitBusy}
-                  isSubmitLoading={isSubmitBusy}
-                  preserveHeightOnSubmit={submitBehavior === "preserve-and-lock"}
-                  attachments={selectedAttachments}
-                  cwd={cwd}
-                  attachmentMenuItems={attachmentMenuItems}
-                  onAttachButtonRef={handleAttachButtonRef}
-                  onAddImages={addImages}
-                  client={client}
-                  isReadyForDictation={isDictationReady}
-                  placeholder={messagePlaceholder}
-                  autoFocus={messageInputAutoFocus}
-                  autoFocusKey={`${serverId}:${agentId}`}
-                  disabled={isSubmitLoading}
-                  isPaneFocused={isPaneFocused}
-                  leftContent={leftContent}
-                  beforeVoiceContent={beforeVoiceContent}
-                  rightContent={rightContent}
-                  voiceServerId={serverId}
-                  voiceAgentId={agentId}
-                  isAgentRunning={isAgentRunning}
-                  defaultSendBehavior={appSettings.sendBehavior}
-                  onQueue={handleQueue}
-                  onSubmitLoadingPress={submitLoadingPressHandler}
-                  onKeyPress={handleCommandKeyPress}
-                  onSelectionChange={handleSelectionChange}
-                  onFocusChange={handleFocusChange}
-                  onHeightChange={onComposerHeightChange}
-                  inputWrapperStyle={inputWrapperStyle}
-                  attachmentSlot={attachmentTray}
-                />
-                <Combobox
-                  options={githubSearchOptions}
-                  value=""
-                  onSelect={noop}
-                  keepOpenOnSelect
-                  searchable
-                  searchPlaceholder={t("composer.github.searchPlaceholder")}
-                  title={t("composer.github.title")}
-                  open={isGithubPickerOpen}
-                  onOpenChange={handleGithubPickerOpenChange}
-                  onSearchQueryChange={setGithubSearchQuery}
-                  desktopPlacement="top-start"
-                  anchorRef={attachButtonRef}
-                  emptyText={githubEmptyText}
-                  renderOption={renderGithubPickerOption}
-                />
-              </View>
+              {/* MessageInput handles everything: text, dictation, attachments, all buttons */}
+              <StableMessageInput
+                ref={messageInputRef}
+                value={userInput}
+                onChangeText={setUserInput}
+                onSubmit={handleSubmit}
+                hasExternalContent={hasExternalContent}
+                allowEmptySubmit={allowEmptySubmit}
+                submitButtonAccessibilityLabel={submitButtonAccessibilityLabel}
+                submitButtonTestID={submitButtonTestID}
+                submitIcon={submitIcon}
+                isSubmitDisabled={isSubmitBusy}
+                isSubmitLoading={isSubmitBusy}
+                preserveHeightOnSubmit={submitBehavior === "preserve-and-lock"}
+                attachments={selectedAttachments}
+                cwd={cwd}
+                attachmentMenuItems={attachmentMenuItems}
+                onAttachButtonRef={handleAttachButtonRef}
+                onAddImages={addImages}
+                client={client}
+                isReadyForDictation={isDictationReady}
+                placeholder={messagePlaceholder}
+                autoFocus={messageInputAutoFocus}
+                autoFocusKey={`${serverId}:${agentId}`}
+                disabled={isSubmitLoading}
+                isPaneFocused={isPaneFocused}
+                leftContent={leftContent}
+                beforeVoiceContent={beforeVoiceContent}
+                rightContent={rightContent}
+                voiceServerId={serverId}
+                voiceAgentId={agentId}
+                isAgentRunning={isAgentRunning}
+                defaultSendBehavior={appSettings.sendBehavior}
+                onQueue={handleQueue}
+                onSubmitLoadingPress={submitLoadingPressHandler}
+                onKeyPress={handleCommandKeyPress}
+                onSelectionChange={handleSelectionChange}
+                onFocusChange={handleFocusChange}
+                onHeightChange={onComposerHeightChange}
+                inputWrapperStyle={inputWrapperStyle}
+                attachmentSlot={attachmentTray}
+              />
+              <Combobox
+                options={githubSearchOptions}
+                value=""
+                onSelect={noop}
+                keepOpenOnSelect
+                searchable
+                searchPlaceholder={t("composer.github.searchPlaceholder")}
+                title={t("composer.github.title")}
+                open={isGithubPickerOpen}
+                onOpenChange={handleGithubPickerOpenChange}
+                onSearchQueryChange={setGithubSearchQuery}
+                desktopPlacement="top-start"
+                anchorRef={attachButtonRef}
+                emptyText={githubEmptyText}
+                renderOption={renderGithubPickerOption}
+              />
             </View>
           </View>
-          {renderComposerFooter(footer, footerInlineContent)}
-        </Animated.View>
-      </FileDropZone>
+        </View>
+        {renderComposerFooter(footer, footerInlineContent)}
+      </Animated.View>
     </ComposerKeyboardScopeProvider>
   );
 }
@@ -1994,10 +1996,6 @@ const styles = StyleSheet.create((theme: Theme) => ({
     flexDirection: "column",
     position: "relative",
   },
-  dropZone: {
-    flex: 0,
-    width: "100%",
-  },
   borderSeparator: {
     height: theme.borderWidth[1],
     backgroundColor: theme.colors.border,