Separate notifications and downloading logs.

src/renderer/src/pages/Modals/NotificationModal.jsx

@@ -4,28 +4,29 @@ import { useSelector, useDispatch } from 'react-redux'
 import { clearNotification, handleExit, toggleNotifications } from '../../reducers/statusReducer'
 
 // eslint-disable-next-line react/display-name
-const Notification = React.memo(() => {
-  const { isLoading, notification } = useSelector((state) => state.status)
+const Logs = React.memo(() => {
+  const { logs } = useSelector((state) => state.status)
+  console.log(logs)
 
   const renderedMessages = useMemo(() => {
-    return notification.map((msg, index) => (
+    return logs.map((msg, index) => (
       <p
         key={index}
         className={`${msg?.type === 'error' ? 'text-red-600' : 'text-blue-600'} mb-2 whitespace-pre-wrap`}
       >
         {msg?.message}
       </p>
     ))
-  }, [notification])
+  }, [logs])
 
-  if (notification.length === 0) return null
+  if (logs.length === 0) return null
 
   return <div>{renderedMessages}</div>
 })
 
 const NotificationModal = () => {
   const dispatch = useDispatch()
-  const { isLoading, notification, showNotifications } = useSelector((state) => state.status)
+  const { isLoading, notification, showLogs, logs } = useSelector((state) => state.status)
 
   const handleClose = () => {
     dispatch(handleExit())
@@ -44,18 +45,40 @@ const NotificationModal = () => {
           </div>
         )}
 
-        <button
-          onClick={() => dispatch(toggleNotifications())}
-          className="text-blue-500 hover:text-blue-700 transition duration-150 ease-in-out focus:outline-none"
-        >
-          {showNotifications ? 'Hide Details' : 'Show Details ▼'}
-        </button>
+        {/* Notification Content - Always shown */}
+        <div className="w-full mb-4">
+          {notification.length > 0
+            ? notification.map((notification, index) => (
+                <div
+                  key={index}
+                  className={`p-4 mb-2 rounded-lg ${
+                    notification.type === 'error'
+                      ? 'bg-red-100 text-red-600'
+                      : 'bg-blue-100 text-blue-600'
+                  }`}
+                >
+                  {notification.message}
+                </div>
+              ))
+            : null}
+        </div>
 
-        {/* Conditional rendering based on toggle */}
-        {showNotifications && (
-          <div className="flex-grow w-full p-4 bg-gray-100 rounded-lg border border-gray-300 overflow-y-auto max-h-48">
-            <Notification />
-          </div>
+        {!isLoading && logs.length > 0 && (
+          <>
+            <button
+              onClick={() => dispatch(toggleNotifications())}
+              className="text-blue-500 hover:text-blue-700 transition duration-150 ease-in-out focus:outline-none"
+            >
+              {showLogs ? 'Hide Logs' : 'View Logs ▼'}
+            </button>
+
+            {/* Conditional rendering based on toggle */}
+            {showLogs && (
+              <div className="flex-grow w-full p-4 bg-gray-100 rounded-lg border border-gray-300 overflow-y-auto max-h-48 mt-4">
+                <Logs />
+              </div>
+            )}
+          </>
         )}
 
         <button

src/renderer/src/reducers/statusReducer.js

@@ -4,8 +4,9 @@ import { throttle } from 'lodash'
 
 const initialState = {
   isLoading: false,
-  showNotifications: false,
-  notification: []
+  showLogs: false,
+  notification: [],
+  logs: []
 }
 
 const statusSlice = createSlice({
@@ -21,8 +22,14 @@ const statusSlice = createSlice({
     clearNotification: (state) => {
       state.notification = []
     },
+    addLog: (state, action) => {
+      state.logs.push(action.payload)
+    },
+    clearLogs: (state) => {
+      state.logs = []
+    },
     toggleNotifications: (state) => {
-      state.showNotifications = !state.showNotifications
+      state.showLogs = !state.showLogs
     },
     handleExit: (state) => {
       return initialState
@@ -32,7 +39,7 @@ const statusSlice = createSlice({
 
 const throttledDispatch = throttle((dispatch, notification) => {
   dispatch(addNotification(notification))
-}, 500) // Throttle interval is 500 ms
+}, 500)
 
 export const triggerNotification = (payload) => (dispatch) => {
   dispatch(openModal({ type: 'NOTIFICATION' }))
@@ -50,6 +57,17 @@ export const triggerLoading = (isLoading) => (dispatch) => {
   }
 }
 
-export const { setLoading, addNotification, clearNotification, toggleNotifications, handleExit } =
-  statusSlice.actions
+export const logActivity = (payload) => (dispatch) => {
+  dispatch(addLog({ message: payload.message, type: payload.type }))
+}
+
+export const {
+  setLoading,
+  addNotification,
+  clearNotification,
+  addLog,
+  clearLogs,
+  toggleNotifications,
+  handleExit
+} = statusSlice.actions
 export default statusSlice.reducer