refactor(upload): unify file-drop pipeline across all list pages

src/frontend/src/components/layout/DockPanelContent.tsx

@@ -212,8 +212,21 @@ export function DockPanelContent({
           onTabSelect={setActiveTab}
         />
 
-        {/* Content Area */}
-        <div className="dock-content">
+        {/* Content Area
+         *
+         * The .dock-content div accepts tab drops anywhere on the panel side.
+         * Tab-drag handlers gate on `draggedTab` so file drags pass through
+         * untouched, and inner UploadDropZone elements call stopPropagation
+         * so file drops never reach this listener — the two systems coexist
+         * via MIME-type isolation.
+         */}
+        <div
+          className="dock-content"
+          onDrop={handleDropOnOtherPanel}
+          onDragOver={handleDragOver}
+          onDragEnter={handleDragEnter}
+          onDragLeave={handleDragLeave}
+        >
           {activeTabData ? (
             <DockContentArea
               side={side}

src/frontend/src/features/environment-map/components/EnvironmentMapList.css

@@ -5,23 +5,10 @@
   gap: 1rem;
   height: 100%;
   padding: 1rem;
-  border: 2px dashed transparent;
   border-radius: 8px;
-  transition: all 0.3s ease;
   overflow: auto;
 }
 
-.environment-map-list:hover:not(.drag-over) {
-  border-color: var(--primary-color);
-  background: rgba(var(--primary-color-rgb), 0.05);
-}
-
-.environment-map-list.drag-over {
-  border-color: var(--primary-color);
-  background: rgba(var(--primary-color-rgb), 0.1);
-  transform: scale(1.01);
-}
-
 .environment-map-controls {
   display: flex;
   flex-direction: column;

src/frontend/src/features/environment-map/components/EnvironmentMapList.tsx

@@ -33,7 +33,7 @@ import {
 import { uploadFile } from '@/features/models/api/modelApi'
 import { useTabContext } from '@/hooks/useTabContext'
 import { useUploadProgress } from '@/hooks/useUploadProgress'
-import { useDragAndDrop } from '@/shared/hooks/useFileUpload'
+import { UploadDropZone } from '@/shared/components/UploadDropZone'
 import { collectCategoryBranchIds } from '@/shared/utils/categoryTree'
 import { useCardWidthStore } from '@/stores/cardWidthStore'
 import {
@@ -308,17 +308,6 @@ export function EnvironmentMapList() {
     void uploadItems(prepareEnvironmentMapUploadItems(files))
   }
 
-  const { onDrop, onDragOver, onDragEnter, onDragLeave } =
-    useDragAndDrop(handleDropUpload)
-  const pageDragAndDropHandlers = showUploadDialog
-    ? {}
-    : {
-        onDrop,
-        onDragOver,
-        onDragEnter,
-        onDragLeave,
-      }
-
   const handleDialogSubmit = async (
     values: EnvironmentMapUploadDialogSubmitValues
   ) => {
@@ -522,10 +511,11 @@ export function EnvironmentMapList() {
   )
 
   return (
-    <div
+    <UploadDropZone
       ref={listScrollRef}
       className="environment-map-list"
-      {...pageDragAndDropHandlers}
+      onFilesDropped={handleDropUpload}
+      disabled={showUploadDialog}
     >
       <Toast ref={toast} />
       <EnvironmentMapContextMenu
@@ -631,6 +621,6 @@ export function EnvironmentMapList() {
           }}
         />
       )}
-    </div>
+    </UploadDropZone>
   )
 }

src/frontend/src/features/models/components/ModelGrid/ModelGrid.css

@@ -5,23 +5,10 @@
   flex-direction: column;
   gap: 1rem;
   padding: 1rem;
-  border: 2px dashed transparent;
   border-radius: 8px;
-  transition: all 0.3s ease;
   overflow: auto;
 }
 
-.model-grid-container:hover:not(.drag-over) {
-  border-color: #3182ce;
-  background: rgba(49, 130, 206, 0.05);
-}
-
-.model-grid-container.drag-over {
-  border-color: #3182ce;
-  background: rgba(49, 130, 206, 0.1);
-  transform: scale(1.02);
-}
-
 /* Search and Filter Controls */
 .model-grid-controls {
   display: flex;
@@ -537,16 +524,6 @@
   font-weight: 500;
 }
 
-/* Tab content specific styles */
-.model-list-tab .model-grid-container {
-  border: none;
-  background: transparent;
-}
-
-.model-list-tab .model-grid-container:hover {
-  background: transparent;
-}
-
 /* Responsive adjustments — keep slider in control, but cap the desktop
    minimum down a notch on narrower windows. */
 @media (max-width: 1200px) {

src/frontend/src/features/models/components/ModelGrid/ModelGrid.tsx

@@ -14,6 +14,7 @@ import {
 import { type GridComponents, VirtuosoGrid } from 'react-virtuoso'
 
 import { useTabContext } from '@/hooks/useTabContext'
+import { UploadDropZone } from '@/shared/components/UploadDropZone'
 import { ThumbnailDisplay } from '@/shared/thumbnail'
 import {
   DEFAULT_MODEL_LIST_VIEW_STATE,
@@ -152,10 +153,6 @@ export function ModelGrid({
     uploading,
     uploadProgress,
     uploadMultipleFiles,
-    onDrop,
-    onDragOver,
-    onDragEnter,
-    onDragLeave,
     searchQuery,
     setSearchQuery,
     selectedCategoryKeys,
@@ -425,13 +422,12 @@ export function ModelGrid({
   }
 
   return (
-    <div
+    <UploadDropZone
       ref={setScrollParent}
       className="model-grid-container"
-      onDrop={onDrop}
-      onDragOver={onDragOver}
-      onDragEnter={onDragEnter}
-      onDragLeave={onDragLeave}
+      onFilesDropped={files => {
+        void uploadMultipleFiles(files)
+      }}
     >
       <Toast ref={toast} />
 
@@ -628,6 +624,6 @@ export function ModelGrid({
           onModelsAdded={() => fetchModels()}
         />
       )}
-    </div>
+    </UploadDropZone>
   )
 }

src/frontend/src/features/models/components/ModelGrid/useModelGrid.ts

@@ -95,12 +95,6 @@ export function useModelGrid({
     uploadProgress: upload.uploadProgress,
     uploadMultipleFiles: upload.uploadMultipleFiles,
 
-    // Drag and drop
-    onDrop: upload.onDrop,
-    onDragOver: upload.onDragOver,
-    onDragEnter: upload.onDragEnter,
-    onDragLeave: upload.onDragLeave,
-
     // Search & Filters
     isSearchOpen: filters.isSearchOpen,
     setIsSearchOpen: filters.setIsSearchOpen,

src/frontend/src/features/models/components/ModelGrid/useModelUpload.ts

@@ -3,7 +3,7 @@ import { type RefObject, useCallback } from 'react'
 
 import { addModelToPack } from '@/features/pack/api/packApi'
 import { addModelToProject } from '@/features/project/api/projectApi'
-import { useDragAndDrop, useFileUpload } from '@/shared/hooks/useFileUpload'
+import { useFileUpload } from '@/shared/hooks/useFileUpload'
 import { useBlenderEnabledStore } from '@/stores/blenderEnabledStore'
 
 interface UseModelUploadOptions {
@@ -67,17 +67,9 @@ export function useModelUpload({
     [blenderEnabled, uploadMultipleFiles]
   )
 
-  const { onDrop, onDragOver, onDragEnter, onDragLeave } = useDragAndDrop(
-    filteredUploadMultipleFiles
-  )
-
   return {
     uploading,
     uploadProgress,
     uploadMultipleFiles: filteredUploadMultipleFiles,
-    onDrop,
-    onDragOver,
-    onDragEnter,
-    onDragLeave,
   }
 }

src/frontend/src/features/sounds/components/SoundList.tsx

@@ -22,6 +22,7 @@
 import { useSoundMutations } from '@/features/sounds/hooks/useSoundMutations'
 import { useSoundUpload } from '@/features/sounds/hooks/useSoundUpload'
 import { CardWidthSlider } from '@/shared/components/CardWidthSlider'
+import { UploadDropZone } from '@/shared/components/UploadDropZone'
 import { soundCategoryFormSchema } from '@/shared/validation/formSchemas'
 import { useCardWidthStore } from '@/stores/cardWidthStore'
 import { type SoundCategoryDto, type SoundDto } from '@/types'
@@ -130,14 +131,7 @@
     setContextMenuTarget,
   })
 
-  const {
-    onDrop,
-    onDragOver,
-    onDragEnter,
-    onDragLeave,
-    fileInputRef,
-    handleFileDrop,
-  } = useSoundUpload({
+  const { fileInputRef, handleFileDrop } = useSoundUpload({
     showToast,
     activeCategoryId,
     loadSounds: invalidateSounds,
@@ -482,12 +476,9 @@
   }
 
   return (
-    <div
+    <UploadDropZone
       className="sound-list"
-      onDrop={onDrop}
-      onDragOver={onDragOver}
-      onDragEnter={onDragEnter}
-      onDragLeave={onDragLeave}
+      onFilesDropped={handleFileDrop}
     >
       <Toast ref={toast} />
       <ConfirmDialog />
@@ -616,6 +607,6 @@
           }
         }}
       />
-    </div>
+    </UploadDropZone>
   )
 }

src/frontend/src/features/sounds/hooks/useSoundUpload.ts

@@ -2,7 +2,6 @@ import { useRef } from 'react'
 
 import { createSoundWithFile } from '@/features/sounds/api/soundApi'
 import { useUploadProgress } from '@/hooks/useUploadProgress'
-import { useDragAndDrop } from '@/shared/hooks/useFileUpload'
 import { decodeAudio, extractPeaks } from '@/utils/audioUtils'
 
 const UNASSIGNED_CATEGORY_ID = -1
@@ -129,14 +128,7 @@ export function useSoundUpload({
     loadSounds()
   }
 
-  const { onDrop, onDragOver, onDragEnter, onDragLeave } =
-    useDragAndDrop(handleFileDrop)
-
   return {
-    onDrop,
-    onDragOver,
-    onDragEnter,
-    onDragLeave,
     fileInputRef,
     handleFileDrop,
   }

src/frontend/src/features/sprite/components/SpriteList.tsx

@@ -26,7 +26,7 @@
 import { useSpriteUpload } from '@/features/sprite/hooks/useSpriteUpload'
 import { useUploadProgress } from '@/hooks/useUploadProgress'
 import { CardWidthSlider } from '@/shared/components/CardWidthSlider'
-import { useDragAndDrop } from '@/shared/hooks/useFileUpload'
+import { UploadDropZone } from '@/shared/components/UploadDropZone'
 import {
   spriteCategoryFormSchema,
   spriteRenameFormSchema,
@@ -155,9 +155,6 @@
     toast,
   })
 
-  const { onDrop, onDragOver, onDragEnter, onDragLeave } =
-    useDragAndDrop(handleFileDrop)
-
   // ── Category Dialog Handlers ────────────────────────────────────────
   const openCreateCategoryDialog = () => {
     setEditingCategory(null)
@@ -491,12 +488,9 @@
   }
 
   return (
-    <div
+    <UploadDropZone
       className="sprite-list"
-      onDrop={onDrop}
-      onDragOver={onDragOver}
-      onDragEnter={onDragEnter}
-      onDragLeave={onDragLeave}
+      onFilesDropped={handleFileDrop}
     >
       <Toast ref={toast} />
       <ConfirmDialog />
@@ -759,7 +753,7 @@
           if (e.target.files) handleFileDrop(e.target.files)
         }}
       />
-    </div>
+    </UploadDropZone>
   )
 }
 

src/frontend/src/features/texture-set/components/TextureSetGrid.css

@@ -5,23 +5,10 @@
   flex-direction: column;
   gap: 1.5rem;
   padding: 1rem;
-  border: 2px dashed transparent;
   border-radius: 8px;
-  transition: all 0.3s ease;
   overflow: auto;
 }
 
-.texture-set-grid-container:hover:not(.drag-over) {
-  border-color: #3182ce;
-  background: rgba(49, 130, 206, 0.05);
-}
-
-.texture-set-grid-container.drag-over {
-  border-color: #3182ce;
-  background: rgba(49, 130, 206, 0.1);
-  transform: scale(1.02);
-}
-
 /* Search and Filter Controls */
 .texture-set-grid-controls {
   display: flex;
@@ -252,17 +239,6 @@
   cursor: pointer;
 }
 
-.texture-set-grid-empty:hover:not(.drag-over) {
-  border-color: var(--primary-color);
-  background: rgba(var(--primary-color-rgb), 0.05);
-}
-
-.texture-set-grid-empty.drag-over {
-  border-color: var(--primary-color);
-  background: rgba(var(--primary-color-rgb), 0.1);
-  transform: scale(1.02);
-}
-
 .texture-set-grid-empty .pi {
   font-size: 4rem;
   color: var(--text-color-secondary);