💄 Optimize UX

src/main/downloader.ts

@@ -6,6 +6,17 @@ import unzipper from 'unzipper'
 import { InstallProgressPeriod, InstallTask, updateInstallTask } from './tasks'
 import { randomUUID } from 'crypto'
 
+const byteSizeUnits = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+
+function formatBytesWithUnit(bytes: number, unitIndex: number, decimals = 2): string {
+  if (!+bytes) return '0'
+
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+
+  return `${parseFloat((bytes / Math.pow(k, unitIndex)).toFixed(dm))}`
+}
+
 function downloadFile(task: InstallTask, url: string, output: string): Promise<void> {
   // eslint-disable-next-line no-async-promise-executor
   return new Promise(async (resolve, reject) => {
@@ -28,9 +39,15 @@ function downloadFile(task: InstallTask, url: string, output: string): Promise<v
       if (Date.now() - lastUpdate >= 100) {
         lastUpdate = Date.now()
         if (task.progress) {
+          const k = 1024
+          const lenUnitIndex = Math.floor(Math.log(len) / Math.log(k))
+
+          const downloadedFormatted = formatBytesWithUnit(downloaded, lenUnitIndex)
+          const lenFormatted = formatBytesWithUnit(len, lenUnitIndex)
+
           task.progress.value = percent
           task.progress.period = InstallProgressPeriod.Downloading
-          task.progress.details = `${downloaded}/${len}`
+          task.progress.details = `${downloadedFormatted}/${lenFormatted} ${byteSizeUnits[lenUnitIndex]}`
           updateInstallTask(task)
         }
       }

src/renderer/src/components/MaAppBar.tsx

@@ -53,7 +53,13 @@ export function MaAppBar(): JSX.Element {
         <List sx={{ width: '320px' }}>
           {functionLinks.map((l) => (
             <ListItem disablePadding>
-              <ListItemButton selected={window.location.pathname == l.href} onClick={() => navigate(l.href)}>
+              <ListItemButton
+                selected={window.location.pathname == l.href}
+                onClick={() => {
+                  setOpen(false)
+                  navigate(l.href)
+                }}
+              >
                 <ListItemIcon>{l.icon}</ListItemIcon>
                 <ListItemText primary={l.title} />
               </ListItemButton>

src/renderer/src/pages/Tasks.tsx

@@ -48,17 +48,26 @@ export default function Tasks(): JSX.Element {
                   {t.progress.details}
                 </Typography>
               )}
+              {t.progress?.error && (
+                <Typography variant="body2" component="p" fontFamily="monospace" fontSize={13}>
+                  {t.progress.error}
+                </Typography>
+              )}
 
               <Box sx={{ mt: 2 }}>
                 {t.progress?.value ? (
                   <LinearProgress
                     variant="determinate"
-                    color={t.progress?.done ? 'success' : 'primary'}
+                    color={t.progress?.done ? 'success' : t.progress?.error ? 'error' : 'primary'}
                     value={t.progress.value * 100}
                     sx={{ borderRadius: 4 }}
                   />
                 ) : (
-                  <LinearProgress variant="indeterminate" sx={{ borderRadius: 4 }} />
+                  <LinearProgress
+                    variant="indeterminate"
+                    color={t.progress?.done ? 'success' : t.progress?.error ? 'error' : 'primary'}
+                    sx={{ borderRadius: 4 }}
+                  />
                 )}
               </Box>
             </CardContent>