feat: drag file on tab button to switch to that tab (#1013)

app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx

@@ -13,9 +13,10 @@ import { confirmDialog } from '@/Services/AlertService'
 import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
 import { StreamingFileReader } from '@standardnotes/filepicker'
 import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
-import { AttachedFilesPopover, PopoverTabs } from './AttachedFilesPopover'
+import { AttachedFilesPopover } from './AttachedFilesPopover'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { useFilePreviewModal } from '../Files/FilePreviewModalProvider'
+import { PopoverTabs } from './PopoverTabs'
 
 type Props = {
   application: WebApplication
@@ -23,21 +24,6 @@ type Props = {
   onClickPreprocessing?: () => Promise<void>
 }
 
-const createDragOverlay = () => {
-  if (document.getElementById('drag-overlay')) {
-    return
-  }
-
-  const overlayElementTemplate =
-    '<div class="sn-component" id="drag-overlay"><div class="absolute top-0 left-0 w-full h-full z-index-1001"></div></div>'
-  const overlayFragment = document.createRange().createContextualFragment(overlayElementTemplate)
-  document.body.appendChild(overlayFragment)
-}
-
-const removeDragOverlay = () => {
-  document.getElementById('drag-overlay')?.remove()
-}
-
 const isHandlingFileDrag = (event: DragEvent) =>
   event.dataTransfer?.items && Array.from(event.dataTransfer.items).some((item) => item.kind === 'file')
 
@@ -252,11 +238,19 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
         event.preventDefault()
         event.stopPropagation()
 
+        switch ((event.target as HTMLElement).id) {
+          case PopoverTabs.AllFiles:
+            setCurrentTab(PopoverTabs.AllFiles)
+            break
+          case PopoverTabs.AttachedFiles:
+            setCurrentTab(PopoverTabs.AttachedFiles)
+            break
+        }
+
         dragCounter.current = dragCounter.current + 1
 
         if (event.dataTransfer?.items.length) {
           setIsDraggingFiles(true)
-          createDragOverlay()
           if (!open) {
             toggleAttachedFilesMenu().catch(console.error)
           }
@@ -279,8 +273,6 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
         return
       }
 
-      removeDragOverlay()
-
       setIsDraggingFiles(false)
     }
 
@@ -294,7 +286,6 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
         event.stopPropagation()
 
         setIsDraggingFiles(false)
-        removeDragOverlay()
 
         if (event.dataTransfer?.items.length) {
           Array.from(event.dataTransfer.items).forEach(async (item) => {

app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx

@@ -10,11 +10,7 @@ import { Button } from '@/Components/Button/Button'
 import { Icon } from '@/Components/Icon'
 import { PopoverFileItem } from './PopoverFileItem'
 import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
-
-export enum PopoverTabs {
-  AttachedFiles,
-  AllFiles,
-}
+import { PopoverTabs } from './PopoverTabs'
 
 type Props = {
   application: WebApplication
@@ -75,6 +71,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
       >
         <div className="flex border-0 border-b-1 border-solid border-main">
           <button
+            id={PopoverTabs.AttachedFiles}
             className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:bg-info-backdrop focus:shadow-bottom ${
               currentTab === PopoverTabs.AttachedFiles ? 'color-info font-medium shadow-bottom' : 'color-text'
             }`}
@@ -86,6 +83,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
             Attached
           </button>
           <button
+            id={PopoverTabs.AllFiles}
             className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:bg-info-backdrop focus:shadow-bottom ${
               currentTab === PopoverTabs.AllFiles ? 'color-info font-medium shadow-bottom' : 'color-text'
             }`}

app/assets/javascripts/Components/AttachedFilesPopover/PopoverTabs.ts

@@ -0,0 +1,4 @@
+export enum PopoverTabs {
+  AttachedFiles = 'attached-files-tab',
+  AllFiles = 'all-files-tab',
+}