(feat:upload) dismiss, but notify on completion

frontend/src/components/UploadToast.tsx

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import {
   selectUploadTasks,
-  removeUploadTask,
+  dismissUploadTask,
   clearCompletedTasks,
 } from '../upload/uploadSlice';
 import ChevronDown from '../assets/chevron-down.svg';
@@ -30,8 +30,6 @@ export default function UploadToast() {
   const dispatch = useDispatch();
   const uploadTasks = useSelector(selectUploadTasks);
 
-  if (uploadTasks.length === 0) return null;
-
   const getStatusHeading = (status: string) => {
     switch (status) {
       case 'preparing':
@@ -51,7 +49,9 @@ export default function UploadToast() {
 
   return (
     <div className="fixed right-4 bottom-4 z-50 flex max-w-md flex-col gap-2">
-      {uploadTasks.map((task) => {
+      {uploadTasks
+        .filter((task) => !task.dismissed)
+        .map((task) => {
           const shouldShowProgress = [
             'preparing',
             'uploading',
@@ -59,7 +59,8 @@ export default function UploadToast() {
           ].includes(task.status);
           const rawProgress = Math.min(Math.max(task.progress ?? 0, 0), 100);
           const formattedProgress = Math.round(rawProgress);
-        const progressOffset = PROGRESS_CIRCUMFERENCE * (1 - rawProgress / 100);
+          const progressOffset =
+            PROGRESS_CIRCUMFERENCE * (1 - rawProgress / 100);
           const isCollapsed = collapsedTasks[task.id] ?? false;
 
           return (
@@ -103,11 +104,9 @@ export default function UploadToast() {
                         }`}
                       />
                     </button>
-                  {(task.status === 'completed' ||
-                    task.status === 'failed') && (
                     <button
                       type="button"
-                      onClick={() => dispatch(removeUploadTask(task.id))}
+                      onClick={() => dispatch(dismissUploadTask(task.id))}
                       className="flex h-8 items-center justify-center p-0 text-black opacity-70 transition-opacity hover:opacity-100 dark:text-white"
                       aria-label="Dismiss upload toast"
                     >
@@ -135,7 +134,6 @@ export default function UploadToast() {
                         />
                       </svg>
                     </button>
-                  )}
                   </div>
                 </div>
 

frontend/src/upload/uploadSlice.ts

@@ -24,6 +24,7 @@ export interface UploadTask {
   status: UploadTaskStatus;
   taskId?: string;
   errorMessage?: string;
+  dismissed?: boolean;
 }
 
 interface UploadState {
@@ -84,9 +85,29 @@ export const uploadSlice = createSlice({
         (task) => task.id === action.payload.id,
       );
       if (index !== -1) {
+        const updates = action.payload.updates;
+
+        // When task completes or fails, set dismissed to false to notify user
+        if (updates.status === 'completed' || updates.status === 'failed') {
           state.tasks[index] = {
             ...state.tasks[index],
-          ...action.payload.updates,
+            ...updates,
+            dismissed: false,
+          };
+        } else {
+          state.tasks[index] = {
+            ...state.tasks[index],
+            ...updates,
+          };
+        }
+      }
+    },
+    dismissUploadTask: (state, action: PayloadAction<string>) => {
+      const index = state.tasks.findIndex((task) => task.id === action.payload);
+      if (index !== -1) {
+        state.tasks[index] = {
+          ...state.tasks[index],
+          dismissed: true,
         };
       }
     },
@@ -111,6 +132,7 @@ export const {
   clearAttachments,
   addUploadTask,
   updateUploadTask,
+  dismissUploadTask,
   removeUploadTask,
   clearCompletedTasks,
 } = uploadSlice.actions;