feat: bugfixes, spedup, bulk actions,

components/files/preview.tsx

@@ -22,6 +22,7 @@ export function FilePreview({ file }: { file: File }) {
             alt={file.filename}
             width={300}
             height={400}
+            loading="lazy"
             className={`${
               isEnlarged
                 ? "fixed inset-0 z-50 m-auto w-screen h-screen object-contain cursor-zoom-out"

components/files/screen-drop-area.tsx

@@ -2,8 +2,9 @@
 
 import { useNotification } from "@/app/context"
 import { uploadFilesAction } from "@/app/files/actions"
+import { uploadTransactionFilesAction } from "@/app/transactions/actions"
 import { AlertCircle, CloudUpload, Loader2 } from "lucide-react"
-import { useRouter } from "next/navigation"
+import { useParams, useRouter } from "next/navigation"
 import { startTransition, useEffect, useRef, useState } from "react"
 
 export default function ScreenDropArea({ children }: { children: React.ReactNode }) {
@@ -13,6 +14,7 @@ export default function ScreenDropArea({ children }: { children: React.ReactNode
   const [isUploading, setIsUploading] = useState(false)
   const [uploadError, setUploadError] = useState("")
   const dragCounter = useRef(0)
+  const { transactionId } = useParams()
 
   const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault()
@@ -53,16 +55,24 @@ export default function ScreenDropArea({ children }: { children: React.ReactNode
     if (files && files.length > 0) {
       try {
         const formData = new FormData()
+        if (transactionId) {
+          formData.append("transactionId", transactionId as string)
+        }
         for (let i = 0; i < files.length; i++) {
           formData.append("files", files[i])
         }
 
         startTransition(async () => {
-          const result = await uploadFilesAction(null, formData)
+          const result = transactionId
+            ? await uploadTransactionFilesAction(formData)
+            : await uploadFilesAction(null, formData)
+
           if (result.success) {
             showNotification({ code: "sidebar.unsorted", message: "new" })
             setTimeout(() => showNotification({ code: "sidebar.unsorted", message: "" }), 3000)
-            router.push("/unsorted")
+            if (!transactionId) {
+              router.push("/unsorted")
+            }
           } else {
             setUploadError(result.error ? result.error : "Something went wrong...")
           }
@@ -105,7 +115,9 @@ export default function ScreenDropArea({ children }: { children: React.ReactNode
         >
           <div className="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl text-center">
             <CloudUpload className="h-16 w-16 mx-auto mb-4 text-primary" />
-            <h3 className="text-xl font-semibold mb-2">Drop Files to Upload</h3>
+            <h3 className="text-xl font-semibold mb-2">
+              {transactionId ? "Drop Files to Add to Transaction" : "Drop Files to Upload"}
+            </h3>
             <p className="text-gray-600 dark:text-gray-400">Drop anywhere on the screen</p>
           </div>
         </div>
@@ -115,7 +127,9 @@ export default function ScreenDropArea({ children }: { children: React.ReactNode
         <div className="fixed inset-0 bg-opacity-20 backdrop-blur-sm z-50 flex items-center justify-center">
           <div className="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl text-center">
             <Loader2 className="h-16 w-16 mx-auto mb-4 text-primary animate-spin" />
-            <h3 className="text-xl font-semibold mb-2">Uploading...</h3>
+            <h3 className="text-xl font-semibold mb-2">
+              {transactionId ? "Adding files to transaction..." : "Uploading..."}
+            </h3>
           </div>
         </div>
       )}