✨ Update app

src/main/installer.ts

@@ -14,17 +14,19 @@ export function initInstaller(): void {
 }
 
 function submitInstallTask(task: InstallTask, contents: WebContents): void {
-  task.id = randomUUID()
+  task.id = task.id ?? randomUUID()
   task.progress = { value: 0, period: InstallProgressPeriod.Initializing, done: false, error: null }
   task.emitter = contents
 
   if (!statSync(task.basePath).isDirectory()) {
     return
   }
-  if (readdirSync(task.basePath).length > 0) {
+  if (!task.isOverwrite) {
-    const newPath = join(task.basePath, task.product.name)
+    if (readdirSync(task.basePath).length > 0) {
-    mkdirSync(newPath)
+      const newPath = join(task.basePath, task.product.name)
-    task.basePath = newPath
+      mkdirSync(newPath)
+      task.basePath = newPath
+    }
   }
 
   installTasks[task.id] = task

src/main/tasks.ts

@@ -8,6 +8,7 @@ export interface InstallTask {
   basePath: string
   progress?: InstallProgress
   emitter?: WebContents
+  isOverwrite?: boolean
 }
 
 export enum InstallProgressPeriod {

src/renderer/src/pages/Tasks.tsx

@@ -58,14 +58,14 @@ export default function Tasks(): JSX.Element {
                 {t.progress?.value ? (
                   <LinearProgress
                     variant="determinate"
-                    color={t.progress?.done ? 'success' : t.progress?.error ? 'error' : 'primary'}
+                    color={t.progress?.error ? 'error' : t.progress?.done ? 'success' : 'primary'}
                     value={t.progress.value * 100}
                     sx={{ borderRadius: 4 }}
                   />
                 ) : (
                   <LinearProgress
-                    variant="indeterminate"
+                    variant={t.progress?.error ? 'determinate' : 'indeterminate'}
-                    color={t.progress?.done ? 'success' : t.progress?.error ? 'error' : 'primary'}
+                    color={t.progress?.error ? 'error' : t.progress?.done ? 'success' : 'primary'}
                     sx={{ borderRadius: 4 }}
                   />
                 )}

src/renderer/src/pages/library/Details.tsx

@@ -3,6 +3,9 @@ import {
   Avatar,
   Box,
   Button,
+  Card,
+  CardContent,
+  Collapse,
   Container,
   Divider,
   Grid2 as Grid,
@@ -16,10 +19,12 @@ import { useNavigate, useParams } from 'react-router'
 import { getAttachmentUrl, MaProduct, MaRelease, sni } from 'solar-js-sdk'
 import { parseContent } from '@renderer/services/parser'
 
+import UpdateIcon from '@mui/icons-material/Download'
 import PlayIcon from '@mui/icons-material/PlayArrow'
 import UninstallIcon from '@mui/icons-material/Delete'
 import RefreshIcon from '@mui/icons-material/Refresh'
 import ArrowBackwardIcon from '@mui/icons-material/ArrowBack'
+import { InstallTask } from '@main/tasks'
 
 export default function LibraryDetails(): JSX.Element {
   const { id } = useParams()
@@ -55,6 +60,40 @@ export default function LibraryDetails(): JSX.Element {
     }
   }, [app])
 
+  const [remoteReleases, setRemoteReleases] = useState<MaRelease[]>([])
+
+  const hasUpdate = useMemo(
+    () => app && remoteReleases.length > 0 && remoteReleases[0].version != app?.release?.version,
+    [app, remoteReleases],
+  )
+
+  async function fetchRemoteReleases() {
+    const { data: resp } = await sni.get<{ data: MaRelease[] }>('/cgi/ma/products/' + app?.product.id + '/releases', {
+      params: {
+        take: 1,
+      },
+    })
+
+    setRemoteReleases(resp.data)
+  }
+
+  useEffect(() => {
+    if (!app) return
+    fetchRemoteReleases()
+  }, [app])
+
+  async function updateApp() {
+    const task: InstallTask = {
+      id: app!.id,
+      release: remoteReleases[0],
+      product: app!.product,
+      basePath: app!.basePath,
+      isOverwrite: true,
+    }
+    window.electron.ipcRenderer.invoke('install-product-release', JSON.stringify(task))
+    navigate('/tasks')
+  }
+
   async function syncApp() {
     setBusy(true)
     try {
@@ -181,6 +220,32 @@ export default function LibraryDetails(): JSX.Element {
               </Box>
             </Stack>
 
+            <Collapse in={hasUpdate}>
+              <Card sx={{ mt: 2 }} variant="outlined">
+                <CardContent>
+                  <Typography variant="h6" component="h2" lineHeight={1.2}>
+                    Update Available
+                  </Typography>
+                  <Typography variant="subtitle1" gutterBottom>
+                    {remoteReleases[0]?.meta.title} {remoteReleases[0]?.version}
+                  </Typography>
+
+                  <Typography variant="body2">{remoteReleases[0]?.meta.description}</Typography>
+
+                  <Button
+                    variant="contained"
+                    disableElevation
+                    fullWidth
+                    sx={{ mt: 2 }}
+                    startIcon={<UpdateIcon />}
+                    onClick={updateApp}
+                  >
+                    Update
+                  </Button>
+                </CardContent>
+              </Card>
+            </Collapse>
+
             <Box sx={{ mt: 4, textAlign: 'right' }}>
               <Link
                 variant="caption"