(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,63 +49,64 @@ 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
-        const shouldShowProgress = [
+        .filter((task) => !task.dismissed)
-          'preparing',
+        .map((task) => {
-          'uploading',
+          const shouldShowProgress = [
-          'training',
+            'preparing',
-        ].includes(task.status);
+            'uploading',
-        const rawProgress = Math.min(Math.max(task.progress ?? 0, 0), 100);
+            'training',
-        const formattedProgress = Math.round(rawProgress);
+          ].includes(task.status);
-        const progressOffset = PROGRESS_CIRCUMFERENCE * (1 - rawProgress / 100);
+          const rawProgress = Math.min(Math.max(task.progress ?? 0, 0), 100);
-        const isCollapsed = collapsedTasks[task.id] ?? false;
+          const formattedProgress = Math.round(rawProgress);
+          const progressOffset =
+            PROGRESS_CIRCUMFERENCE * (1 - rawProgress / 100);
+          const isCollapsed = collapsedTasks[task.id] ?? false;
 
-        return (
+          return (
-          <div
+            <div
-            key={task.id}
+              key={task.id}
-            className={`w-[271px] overflow-hidden rounded-2xl border border-[#00000021] shadow-[0px_24px_48px_0px_#00000029] transition-all duration-300 ${
+              className={`w-[271px] overflow-hidden rounded-2xl border border-[#00000021] shadow-[0px_24px_48px_0px_#00000029] transition-all duration-300 ${
-              task.status === 'completed'
+                task.status === 'completed'
-                ? 'bg-[#FBFBFB] dark:bg-[#26272E]'
-                : task.status === 'failed'
                   ? 'bg-[#FBFBFB] dark:bg-[#26272E]'
-                  : 'bg-[#FBFBFB] dark:bg-[#26272E]'
+                  : task.status === 'failed'
-            }`}
+                    ? 'bg-[#FBFBFB] dark:bg-[#26272E]'
-          >
+                    : 'bg-[#FBFBFB] dark:bg-[#26272E]'
-            <div className="flex flex-col">
+              }`}
-              <div
+            >
-                className={`flex items-center justify-between px-4 py-3 ${
+              <div className="flex flex-col">
-                  task.status !== 'failed'
+                <div
-                    ? 'bg-[#FBF2FE] dark:bg-transparent'
+                  className={`flex items-center justify-between px-4 py-3 ${
-                    : ''
+                    task.status !== 'failed'
-                }`}
+                      ? 'bg-[#FBF2FE] dark:bg-transparent'
-              >
+                      : ''
-                <h3 className="font-inter text-[14px] leading-[16.5px] font-medium text-black dark:text-[#DCDCDC]">
+                  }`}
-                  {getStatusHeading(task.status)}
+                >
-                </h3>
+                  <h3 className="font-inter text-[14px] leading-[16.5px] font-medium text-black dark:text-[#DCDCDC]">
-                <div className="flex items-center gap-1">
+                    {getStatusHeading(task.status)}
-                  <button
+                  </h3>
-                    type="button"
+                  <div className="flex items-center gap-1">
-                    onClick={() => toggleTaskCollapse(task.id)}
-                    aria-label={
-                      isCollapsed
-                        ? 'Expand upload details'
-                        : 'Collapse upload details'
-                    }
-                    className="flex h-8 items-center justify-center p-0 text-black opacity-70 transition-opacity hover:opacity-100 dark:text-white"
-                  >
-                    <img
-                      src={ChevronDown}
-                      alt=""
-                      className={`h-4 w-4 transform transition-transform duration-200 dark:invert ${
-                        isCollapsed ? '' : 'rotate-180'
-                      }`}
-                    />
-                  </button>
-                  {(task.status === 'completed' ||
-                    task.status === 'failed') && (
                     <button
                       type="button"
-                      onClick={() => dispatch(removeUploadTask(task.id))}
+                      onClick={() => toggleTaskCollapse(task.id)}
+                      aria-label={
+                        isCollapsed
+                          ? 'Expand upload details'
+                          : 'Collapse upload details'
+                      }
+                      className="flex h-8 items-center justify-center p-0 text-black opacity-70 transition-opacity hover:opacity-100 dark:text-white"
+                    >
+                      <img
+                        src={ChevronDown}
+                        alt=""
+                        className={`h-4 w-4 transform transition-transform duration-200 dark:invert ${
+                          isCollapsed ? '' : 'rotate-180'
+                        }`}
+                      />
+                    </button>
+                    <button
+                      type="button"
+                      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,96 +134,95 @@ export default function UploadToast() {
                         />
                       </svg>
                     </button>
-                  )}
-                </div>
-              </div>
-
-              <div
-                className="grid overflow-hidden transition-[grid-template-rows] duration-300 ease-out"
-                style={{ gridTemplateRows: isCollapsed ? '0fr' : '1fr' }}
-              >
-                <div
-                  className={`min-h-0 overflow-hidden transition-opacity duration-300 ${
-                    isCollapsed ? 'opacity-0' : 'opacity-100'
-                  }`}
-                >
-                  <div className="flex items-center justify-between px-5 py-3">
-                    <p
-                      className="font-inter max-w-[200px] truncate text-[13px] leading-[16.5px] font-normal text-black dark:text-[#B7BAB8]"
-                      title={task.fileName}
-                    >
-                      {task.fileName}
-                    </p>
-
-                    <div className="flex items-center gap-2">
-                      {shouldShowProgress && (
-                        <svg
-                          width="24"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          className="h-6 w-6 flex-shrink-0 text-[#7D54D1]"
-                          role="progressbar"
-                          aria-valuemin={0}
-                          aria-valuemax={100}
-                          aria-valuenow={formattedProgress}
-                          aria-label={`Upload progress ${formattedProgress}%`}
-                        >
-                          <circle
-                            className="text-gray-300 dark:text-gray-700"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            cx="12"
-                            cy="12"
-                            r={PROGRESS_RADIUS}
-                            fill="none"
-                          />
-                          <circle
-                            className="text-[#7D54D1]"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeDasharray={PROGRESS_CIRCUMFERENCE}
-                            strokeDashoffset={progressOffset}
-                            cx="12"
-                            cy="12"
-                            r={PROGRESS_RADIUS}
-                            fill="none"
-                            transform="rotate(-90 12 12)"
-                          />
-                        </svg>
-                      )}
-
-                      {task.status === 'completed' && (
-                        <img
-                          src={CheckCircleFilled}
-                          alt=""
-                          className="h-6 w-6 flex-shrink-0"
-                          aria-hidden="true"
-                        />
-                      )}
-
-                      {task.status === 'failed' && (
-                        <img
-                          src={WarnIcon}
-                          alt=""
-                          className="h-6 w-6 flex-shrink-0"
-                          aria-hidden="true"
-                        />
-                      )}
-                    </div>
                   </div>
+                </div>
 
-                  {task.status === 'failed' && task.errorMessage && (
+                <div
-                    <span className="block px-5 pb-3 text-xs text-red-500">
+                  className="grid overflow-hidden transition-[grid-template-rows] duration-300 ease-out"
-                      {task.errorMessage}
+                  style={{ gridTemplateRows: isCollapsed ? '0fr' : '1fr' }}
-                    </span>
+                >
-                  )}
+                  <div
+                    className={`min-h-0 overflow-hidden transition-opacity duration-300 ${
+                      isCollapsed ? 'opacity-0' : 'opacity-100'
+                    }`}
+                  >
+                    <div className="flex items-center justify-between px-5 py-3">
+                      <p
+                        className="font-inter max-w-[200px] truncate text-[13px] leading-[16.5px] font-normal text-black dark:text-[#B7BAB8]"
+                        title={task.fileName}
+                      >
+                        {task.fileName}
+                      </p>
+
+                      <div className="flex items-center gap-2">
+                        {shouldShowProgress && (
+                          <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            className="h-6 w-6 flex-shrink-0 text-[#7D54D1]"
+                            role="progressbar"
+                            aria-valuemin={0}
+                            aria-valuemax={100}
+                            aria-valuenow={formattedProgress}
+                            aria-label={`Upload progress ${formattedProgress}%`}
+                          >
+                            <circle
+                              className="text-gray-300 dark:text-gray-700"
+                              stroke="currentColor"
+                              strokeWidth="2"
+                              cx="12"
+                              cy="12"
+                              r={PROGRESS_RADIUS}
+                              fill="none"
+                            />
+                            <circle
+                              className="text-[#7D54D1]"
+                              stroke="currentColor"
+                              strokeWidth="2"
+                              strokeLinecap="round"
+                              strokeDasharray={PROGRESS_CIRCUMFERENCE}
+                              strokeDashoffset={progressOffset}
+                              cx="12"
+                              cy="12"
+                              r={PROGRESS_RADIUS}
+                              fill="none"
+                              transform="rotate(-90 12 12)"
+                            />
+                          </svg>
+                        )}
+
+                        {task.status === 'completed' && (
+                          <img
+                            src={CheckCircleFilled}
+                            alt=""
+                            className="h-6 w-6 flex-shrink-0"
+                            aria-hidden="true"
+                          />
+                        )}
+
+                        {task.status === 'failed' && (
+                          <img
+                            src={WarnIcon}
+                            alt=""
+                            className="h-6 w-6 flex-shrink-0"
+                            aria-hidden="true"
+                          />
+                        )}
+                      </div>
+                    </div>
+
+                    {task.status === 'failed' && task.errorMessage && (
+                      <span className="block px-5 pb-3 text-xs text-red-500">
+                        {task.errorMessage}
+                      </span>
+                    )}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
+          );
-        );
+        })}
-      })}
 
       {uploadTasks.some(
         (task) => task.status === 'completed' || task.status === 'failed',

frontend/src/upload/uploadSlice.ts

@@ -24,6 +24,7 @@ export interface UploadTask {
   status: UploadTaskStatus;
   taskId?: string;
   errorMessage?: string;
+  dismissed?: boolean;
 }
 
 interface UploadState {
@@ -83,10 +84,30 @@ export const uploadSlice = createSlice({
       const index = state.tasks.findIndex(
         (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],
+            ...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],
-          ...action.payload.updates,
+          dismissed: true,
         };
       }
     },
@@ -111,6 +132,7 @@ export const {
   clearAttachments,
   addUploadTask,
   updateUploadTask,
+  dismissUploadTask,
   removeUploadTask,
   clearCompletedTasks,
 } = uploadSlice.actions;