Fix the problem of resuming downloads when the webpage is closed or the network is disconnected. Further testing is needed.

frontend/components/ClipboardApp.tsx

@@ -1,5 +1,11 @@
 "use client";
-import React, { useState, useRef, useCallback, useEffect } from "react";
+import React, {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  useMemo,
+} from "react";
 import { Button } from "@/components/ui/button";
 import useRichTextToPlainText from "../hooks/useRichTextToPlainText";
 import QRCodeComponent from "./ClipboardApp/ShareCard";
@@ -46,7 +52,12 @@ const ClipboardApp = () => {
     onFileFullyReceived,
     handleDownloadFile,
   } = useFileTransferHandler({ messages, putMessageInMs });
-
+  // Calculate the derived states for unload protection
+  const isContentPresent = useMemo(() => {
+    return (
+      shareContent !== "" || retrievedContent !== "" || sendFiles.length > 0
+    );
+  }, [shareContent, retrievedContent, sendFiles]);
   // Initialize WebRTC Connection Hook
   const {
     sender,
@@ -55,6 +66,7 @@ const ClipboardApp = () => {
     retrievePeerCount,
     sendProgress,
     receiveProgress,
+    isAnyFileTransferring,
     broadcastDataToAllPeers,
     requestFile,
     requestFolder,
@@ -63,6 +75,7 @@ const ClipboardApp = () => {
   } = useWebRTCConnection({
     shareContent,
     sendFiles,
+    isContentPresent,
     messages,
     putMessageInMs,
     onStringReceived: onStringDataReceived,
@@ -224,6 +237,7 @@ const ClipboardApp = () => {
               removeFileToSend={removeFileToSend}
               richTextToPlainText={richTextToPlainText}
               sendProgress={sendProgress}
+              isAnyFileTransferring={isAnyFileTransferring}
               processRoomIdInput={processRoomIdInput}
               joinRoom={joinRoom}
               generateShareLinkAndBroadcast={generateShareLinkAndBroadcast}
@@ -245,6 +259,7 @@ const ClipboardApp = () => {
               richTextToPlainText={richTextToPlainText}
               retrievedFileMetas={retrievedFileMetas}
               receiveProgress={receiveProgress}
+              isAnyFileTransferring={isAnyFileTransferring}
               handleDownloadFile={handleDownloadFile}
               // Pass WebRTC interaction methods
               requestFile={requestFile}

frontend/components/ClipboardApp/FileListDisplay.tsx

@@ -35,6 +35,7 @@ interface FileListDisplayProps {
       [peerId: string]: Progress;
     };
   };
+  isAnyFileTransferring: boolean; // State lifted up
   onDownload?: (item: FileMeta) => void;
   onRequest?: (item: FileMeta) => void; // Request file
   onDelete?: (item: FileMeta) => void;
@@ -55,6 +56,7 @@ const FileListDisplay: React.FC<FileListDisplayProps> = ({
   mode,
   files,
   fileProgresses,
+  isAnyFileTransferring,
   onDownload,
   onRequest,
   onDelete,
@@ -79,8 +81,6 @@ const FileListDisplay: React.FC<FileListDisplayProps> = ({
   const [activeTransfers, setActiveTransfers] = useState<{
     [fileId: string]: string;
   }>({});
-  // Track if any file transfer is in progress
-  const [isAnyFileTransferring, setIsAnyFileTransferring] = useState(false);
   // Add state for download counts
   const [downloadCounts, setDownloadCounts] = useState<{
     [fileId: string]: number;
@@ -90,16 +90,6 @@ const FileListDisplay: React.FC<FileListDisplayProps> = ({
       .then((dict) => setMessages(dict))
       .catch((error) => console.error("Failed to load messages:", error));
   }, [locale]);
-  // Monitor file transfer status
-  useEffect(() => {
-    const hasActiveTransfer = Object.values(fileProgresses).some(
-      (fileProgress) =>
-        Object.values(fileProgress).some(
-          (progress) => progress.progress > 0 && progress.progress < 1
-        )
-    );
-    setIsAnyFileTransferring(hasActiveTransfer);
-  }, [fileProgresses]);
 
   useEffect(() => {
     // Separate single files and folders

frontend/components/ClipboardApp/RetrieveTabPanel.tsx

@@ -30,6 +30,7 @@ interface RetrieveTabPanelProps {
   richTextToPlainText: (html: string) => string;
   retrievedFileMetas: FileMeta[];
   receiveProgress: ProgressState;
+  isAnyFileTransferring: boolean;
   handleDownloadFile: (meta: FileMeta) => void;
   // Functions for WebRTC interaction, passed from parent via useWebRTCConnection
   requestFile: (fileId: string, peerId?: string) => void;
@@ -54,6 +55,7 @@ export function RetrieveTabPanel({
   richTextToPlainText,
   retrievedFileMetas,
   receiveProgress,
+  isAnyFileTransferring,
   handleDownloadFile,
   requestFile,
   requestFolder,
@@ -163,6 +165,7 @@ export function RetrieveTabPanel({
         mode="receiver"
         files={retrievedFileMetas}
         fileProgresses={receiveProgress}
+        isAnyFileTransferring={isAnyFileTransferring}
         onDownload={handleDownloadFile}
         onRequest={handleFileRequestFromPanel} // Use the panel's own handler
         onLocationPick={onLocationPick} // Use the panel's own handler

frontend/components/ClipboardApp/SendTabPanel.tsx

@@ -37,6 +37,7 @@ interface SendTabPanelProps {
   removeFileToSend: (meta: FileMeta) => void;
   richTextToPlainText: (html: string) => string;
   sendProgress: ProgressState;
+  isAnyFileTransferring: boolean;
   // shareRoomId: string; // This comes from useRoomManager and represents the validated ID
   processRoomIdInput: (roomId: string) => void; // Passed from useRoomManager
   joinRoom: (isSender: boolean, roomId: string) => void;
@@ -59,6 +60,7 @@ export function SendTabPanel({
   removeFileToSend,
   richTextToPlainText,
   sendProgress,
+  isAnyFileTransferring,
   processRoomIdInput,
   joinRoom,
   generateShareLinkAndBroadcast,
@@ -120,6 +122,7 @@ SendTabPanelProps) {
           mode="sender"
           files={sendFiles}
           fileProgresses={sendProgress}
+          isAnyFileTransferring={isAnyFileTransferring}
           onDelete={removeFileToSend}
         />
       </div>