fea:Add an elegant exit room feature for the recipient

frontend/components/ClipboardApp.tsx

@@ -72,6 +72,7 @@ const ClipboardApp = () => {
     requestFolder,
     setReceiverDirectoryHandle,
     getReceiverSaveType,
+    senderDisconnected,
   } = useWebRTCConnection({
     shareContent,
     sendFiles,
@@ -83,6 +84,12 @@ const ClipboardApp = () => {
     onFileReceived: onFileFullyReceived,
   });
 
+  const resetAppState = useCallback(() => {
+    // This function will reset the state of the application
+    // For now, it just reloads the page, a more granular state reset can be implemented later.
+    window.location.reload();
+  }, []);
+
   // Initialize Room Manager Hook
   const {
     shareRoomId,
@@ -93,6 +100,7 @@ const ClipboardApp = () => {
     processRoomIdInput,
     joinRoom,
     generateShareLinkAndBroadcast,
+    handleLeaveRoom,
   } = useRoomManager({
     messages,
     putMessageInMs,
@@ -101,9 +109,10 @@ const ClipboardApp = () => {
     activeTab,
     sharePeerCount,
     retrievePeerCount,
-    // Pass the actual broadcast function from useWebRTCConnection
+    senderDisconnected,
     broadcastDataToPeers: () =>
       broadcastDataToAllPeers(shareContent, sendFiles),
+    resetApp: resetAppState,
   });
 
   const handleFileDrop = useCallback(
@@ -267,6 +276,8 @@ const ClipboardApp = () => {
               setReceiverDirectoryHandle={setReceiverDirectoryHandle}
               getReceiverSaveType={getReceiverSaveType}
               retrieveMessage={retrieveMessage}
+              senderDisconnected={senderDisconnected}
+              handleLeaveRoom={handleLeaveRoom}
             />
           )}
         </CardContent>

frontend/components/ClipboardApp/RetrieveTabPanel.tsx

@@ -40,6 +40,8 @@ interface RetrieveTabPanelProps {
   ) => Promise<void>;
   getReceiverSaveType: () => { [fileId: string]: boolean } | undefined;
   retrieveMessage: string;
+  senderDisconnected: boolean;
+  handleLeaveRoom: () => void;
 }
 
 export function RetrieveTabPanel({
@@ -62,6 +64,8 @@ export function RetrieveTabPanel({
   setReceiverDirectoryHandle,
   getReceiverSaveType,
   retrieveMessage,
+  senderDisconnected,
+  handleLeaveRoom,
 }: RetrieveTabPanelProps) {
   const onLocationPick = useCallback(async (): Promise<boolean> => {
     if (!messages) return false; // Should not happen if panel is rendered
@@ -145,6 +149,17 @@ export function RetrieveTabPanel({
           {messages.text.ClipboardApp.html.joinRoom_dis}
         </Button>
       </div>
+      {senderDisconnected && (
+        <div className="mb-3">
+          <Button
+            className="w-full"
+            variant="destructive"
+            onClick={handleLeaveRoom}
+          >
+            {messages.text.ClipboardApp.html.leaveRoom_dis || "Leave Room"}
+          </Button>
+        </div>
+      )}
       {retrievedContent && (
         <div className="my-3 p-2 border rounded bg-gray-50">
           <RichTextEditor