ui refactoring

frontend/src/components/DownloadsTableView.tsx

@@ -1,6 +1,9 @@
+import DeleteIcon from '@mui/icons-material/Delete'
+import DownloadIcon from '@mui/icons-material/Download'
+import DownloadDoneIcon from '@mui/icons-material/DownloadDone'
+import StopCircleIcon from '@mui/icons-material/StopCircle'
 import {
   Box,
-  Button,
   Grid,
   IconButton,
   LinearProgress,
@@ -17,11 +20,7 @@ import {
 import { useRecoilValue } from 'recoil'
 import { activeDownloadsState } from '../atoms/downloads'
 import { useRPC } from '../hooks/useRPC'
-import { ellipsis, formatSpeedMiB, formatSize } from "../utils"
-import DownloadIcon from '@mui/icons-material/Download'
-import DownloadDoneIcon from '@mui/icons-material/DownloadDone'
-import StopCircleIcon from '@mui/icons-material/StopCircle'
-import DeleteIcon from '@mui/icons-material/Delete'
+import { formatSize, formatSpeedMiB } from "../utils"
 
 function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
   return (
@@ -38,7 +37,7 @@ function LinearProgressWithLabel(props: LinearProgressProps & { value: number })
   )
 }
 
-const DownloadsListView: React.FC = () => {
+const DownloadsTableView: React.FC = () => {
   const downloads = useRecoilValue(activeDownloadsState)
 
   const { client } = useRPC()
@@ -90,7 +89,7 @@ const DownloadsListView: React.FC = () => {
                         : <DownloadIcon color="primary" />
                       }
                     </TableCell>
-                    <TableCell>{ellipsis(download.info.title, 75)}</TableCell>
+                    <TableCell>{download.info.title}</TableCell>
                     <TableCell align="right">{formatSpeedMiB(download.progress.speed)}</TableCell>
                     <TableCell align="right">
                       <LinearProgressWithLabel
@@ -132,4 +131,4 @@ const DownloadsListView: React.FC = () => {
   )
 }
 
-export default DownloadsListView
+export default DownloadsTableView

frontend/src/components/Footer.tsx

@@ -1,5 +1,5 @@
 import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
-import { AppBar, Toolbar } from '@mui/material'
+import { AppBar, Chip, Divider, Toolbar } from '@mui/material'
 import { Suspense } from 'react'
 import { useRecoilValue } from 'recoil'
 import { settingsState } from '../atoms/settings'
@@ -30,17 +30,17 @@ const Footer: React.FC = () => {
         fontSize: 14,
         display: 'flex', gap: 1, justifyContent: 'space-between'
       }}>
-        <div style={{ display: 'flex', gap: 2 }}>
-          <div>RPC v3.0.6</div>
-          <div></div>
+        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+          <Chip label="RPC v3.0.6" variant="outlined" size="small" />
+          <Divider orientation="vertical" flexItem />
           <VersionIndicator />
         </div>
-        <div style={{ display: 'flex', gap: 1, 'alignItems': 'center' }}>
+        <div style={{ display: 'flex', gap: 4, 'alignItems': 'center' }}>
           <div style={{
             display: 'flex',
             alignItems: 'center',
             flexWrap: 'wrap',
-            marginRight: '8px',
+            marginRight: 'px',
             gap: 3,
           }}>
             <SettingsEthernet />
@@ -48,6 +48,7 @@ const Footer: React.FC = () => {
               {isConnected ? settings.serverAddr : i18n.t('notConnectedText')}
             </span>
           </div>
+          <Divider orientation="vertical" flexItem />
           <Suspense fallback={i18n.t('loadingLabel')}>
             <FreeSpaceIndicator />
           </Suspense>

frontend/src/components/VersionIndicator.tsx

@@ -1,7 +1,7 @@
+import { Chip, CircularProgress } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { serverURL } from '../atoms/settings'
-import { CircularProgress } from '@mui/material'
 import { useToast } from '../hooks/toast'
 
 const VersionIndicator: React.FC = () => {
@@ -26,7 +26,7 @@ const VersionIndicator: React.FC = () => {
 
   return (
     version
-      ? <div>yt-dlp v{version}</div>
+      ? <Chip label={`yt-dlp v${version}`} variant="outlined" size="small" />
       : <CircularProgress size={15} />
   )
 }