Add install detail to AppUpdateProgress for active installation status, improving user feedback during updates.

src/components/Dashboard/Management/AppUpdates/AppUpdateProgress.jsx

@@ -32,7 +32,7 @@ const STAGE_CONFIG = {
     icon: CloudIcon,
     labels: {
       pending: 'Download',
-      active: 'Downloading',
+      active: 'Downloading...',
       complete: 'Downloaded',
       error: 'Download failed'
     }
@@ -41,7 +41,7 @@ const STAGE_CONFIG = {
     icon: HostIcon,
     labels: {
       pending: 'Install',
-      active: 'Installing',
+      active: 'Installing...',
       complete: 'Installed',
       error: 'Install failed'
     }
@@ -101,28 +101,28 @@ const UpdateStage = ({ stage, status, percent, detail }) => {
         : StageIcon
 
   return (
-    <Flex vertical gap={4}>
-      <Flex align='center' gap='middle'>
-        <StatusIcon style={{ fontSize: 20, color, flexShrink: 0 }} />
-        <Flex align='center' gap='small' style={{ flex: 1, minWidth: 0 }}>
-          <Text style={{ flexShrink: 0, minWidth: 96 }}>
-            {config.labels[resolvedStatus]}
-          </Text>
-          {showProgress && (
+    <Flex align='center' gap='middle'>
+      <StatusIcon style={{ fontSize: 20, color, flexShrink: 0 }} />
+      <Flex align='center' gap='small' style={{ flex: 1, minWidth: 0 }}>
+        <Text style={{ flexShrink: 0, minWidth: 96 }}>
+          {config.labels[resolvedStatus]}
+        </Text>
+        {showProgress && (
+          <Flex vertical gap={4}>
             <Progress
               percent={resolvedPercent}
               status={getProgressStatus(resolvedStatus)}
               showInfo={typeof resolvedPercent === 'number'}
               style={{ flex: 1, margin: 0 }}
             />
-          )}
-        </Flex>
+            {detail && (
+              <Text type='secondary' style={{ marginLeft: 36 }}>
+                {detail}
+              </Text>
+            )}
+          </Flex>
+        )}
       </Flex>
-      {detail && (
-        <Text type='secondary' style={{ marginLeft: 36 }}>
-          {detail}
-        </Text>
-      )}
     </Flex>
   )
 }
@@ -161,6 +161,8 @@ const AppUpdateProgress = ({ progress, update, onClose }) => {
       ? `${downloaded} of ${total}`
       : null
 
+  const installDetail = installStatus === 'active' ? message : null
+
   return (
     <Flex vertical gap='middle'>
       <Text>
@@ -181,6 +183,7 @@ const AppUpdateProgress = ({ progress, update, onClose }) => {
           stage='install'
           status={installStatus}
           percent={installPercent}
+          detail={installDetail}
         />
       </Flex>
 

src/components/Dashboard/common/DashboardNavigation.jsx

@@ -235,7 +235,7 @@ const DashboardNavigation = () => {
             <Button
               icon={<SearchIcon />}
               type='text'
-              style={{ marginTop: '2px' }}
+              style={{ marginTop: '4px' }}
               onClick={() => showSpotlight()}
             />
           </KeyboardShortcut>

src/components/Dashboard/common/ObjectChildTable.jsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useRef, useState } from 'react'
+import { useMemo, useEffect, useRef, useState, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { Table, Skeleton, Card, Button, Flex, Typography, Modal } from 'antd'
 import PlusIcon from '../../Icons/PlusIcon'
@@ -91,17 +91,20 @@ const ObjectChildTable = ({
     return generated
   }
 
-  const getResolvedRecordKey = (record) => {
-    if (typeof rowKey === 'function') {
-      return rowKey(record) ?? getFallbackRowKey(record)
-    }
+  const getResolvedRecordKey = useCallback(
+    (record) => {
+      if (typeof rowKey === 'function') {
+        return rowKey(record) ?? getFallbackRowKey(record)
+      }
 
-    if (typeof rowKey === 'string' && rowKey.length > 0) {
-      return record?.[rowKey] ?? getFallbackRowKey(record)
-    }
+      if (typeof rowKey === 'string' && rowKey.length > 0) {
+        return record?.[rowKey] ?? getFallbackRowKey(record)
+      }
 
-    return getFallbackRowKey(record)
-  }
+      return getFallbackRowKey(record)
+    },
+    [rowKey]
+  )
 
   const propertyMap = useMemo(() => {
     const map = new Map()
@@ -258,7 +261,8 @@ const ObjectChildTable = ({
     canAddRemove,
     itemsSource,
     onChange,
-    rowKey
+    rowKey,
+    getResolvedRecordKey
   ])
 
   const skeletonData = useMemo(() => {

src/components/Dashboard/common/WebAppSwitcher.jsx

@@ -49,7 +49,7 @@ const WebAppSwitcher = () => {
       <Button
         icon={isElectron ? <OpenInBrowserIcon /> : <OpenInAppIcon />}
         type='text'
-        style={{ marginTop: '2px' }}
+        style={{ marginTop: '4px' }}
         onClick={handleClick}
       />
     </Tooltip>

src/components/Dashboard/context/AuthContext.jsx

@@ -291,9 +291,6 @@ const AuthProvider = ({ children }) => {
     })
   }, [authenticated, token, expiresAt, userProfile, persistSession])
 
-  const profileImageDependency =
-    userProfile?.profileImage?._id ?? userProfile?.profileImage
-
   // Fetch and cache profile image when userProfile.profileImage changes
   useEffect(() => {
     const profileImage = userProfile?.profileImage
@@ -368,7 +365,7 @@ const AuthProvider = ({ children }) => {
       }
       setProfileImageUrl(null)
     }
-  }, [profileImageDependency, token])
+  }, [userProfile?.profileImage, token])
 
   useEffect(() => {
     console.log('userProfile', userProfile)