code and layout refactoring

frontend/src/Layout.tsx

@@ -4,7 +4,7 @@ import Dashboard from '@mui/icons-material/Dashboard'
 import DownloadIcon from '@mui/icons-material/Download'
 import Menu from '@mui/icons-material/Menu'
 import SettingsIcon from '@mui/icons-material/Settings'
-import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
+import TerminalIcon from '@mui/icons-material/Terminal'
 import { Box, createTheme } from '@mui/material'
 import CssBaseline from '@mui/material/CssBaseline'
 import Divider from '@mui/material/Divider'
@@ -16,26 +16,23 @@ import ListItemText from '@mui/material/ListItemText'
 import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
 import { grey } from '@mui/material/colors'
-import { Suspense, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { Link, Outlet } from 'react-router-dom'
 import { useRecoilValue } from 'recoil'
 import { settingsState } from './atoms/settings'
-import { connectedState } from './atoms/status'
 import AppBar from './components/AppBar'
 import Drawer from './components/Drawer'
-import FreeSpaceIndicator from './components/FreeSpaceIndicator'
+import Footer from './components/Footer'
 import Logout from './components/Logout'
 import SocketSubscriber from './components/SocketSubscriber'
 import ThemeToggler from './components/ThemeToggler'
 import { useI18n } from './hooks/useI18n'
 import Toaster from './providers/ToasterProvider'
-import TerminalIcon from '@mui/icons-material/Terminal'
 
 export default function Layout() {
   const [open, setOpen] = useState(false)
 
   const settings = useRecoilValue(settingsState)
-  const isConnected = useRecoilValue(connectedState)
 
   const mode = settings.theme
   const theme = useMemo(() =>
@@ -81,21 +78,6 @@ export default function Layout() {
             >
               {settings.appTitle}
             </Typography>
-            <Suspense fallback={i18n.t('loadingLabel')}>
-              <FreeSpaceIndicator />
-            </Suspense>
-            <div style={{
-              display: 'flex',
-              alignItems: 'center',
-              flexWrap: 'wrap',
-              marginLeft: '4px',
-              gap: 3,
-            }}>
-              <SettingsEthernet />
-              <span>
-                {isConnected ? settings.serverAddr : i18n.t('notConnectedText')}
-              </span>
-            </div>
           </Toolbar>
         </AppBar>
         <Drawer variant="permanent" open={open}>
@@ -181,6 +163,7 @@ export default function Layout() {
           <Outlet />
         </Box>
       </Box>
+      <Footer></Footer>
       <Toaster />
     </ThemeProvider>
   )

frontend/src/components/Downloads.tsx

@@ -4,7 +4,7 @@ import { loadingDownloadsState } from '../atoms/downloads'
 import { listViewState } from '../atoms/settings'
 import { loadingAtom } from '../atoms/ui'
 import DownloadsCardView from './DownloadsCardView'
-import DownloadsListView from './DownloadsListView'
+import DownloadsListView from './DownloadsTableView'
 
 const Downloads: React.FC = () => {
   const listView = useRecoilValue(listViewState)

frontend/src/components/DownloadsListView.tsx

@@ -1,98 +0,0 @@
-import {
-  Button,
-  Grid,
-  LinearProgress,
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Typography
-} from "@mui/material"
-import { useRecoilValue } from 'recoil'
-import { activeDownloadsState } from '../atoms/downloads'
-import { useRPC } from '../hooks/useRPC'
-import { ellipsis, formatSpeedMiB, formatSize } from "../utils"
-
-
-const DownloadsListView: React.FC = () => {
-  const downloads = useRecoilValue(activeDownloadsState)
-
-  const { client } = useRPC()
-
-  const abort = (id: string) => client.kill(id)
-
-  return (
-    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
-      <Grid item xs={12}>
-        <TableContainer
-          component={Paper}
-          sx={{ minHeight: '100%' }}
-          elevation={2}
-          hidden={downloads.length === 0}
-        >
-          <Table>
-            <TableHead>
-              <TableRow>
-                <TableCell>
-                  <Typography fontWeight={500} fontSize={15}>Title</Typography>
-                </TableCell>
-                <TableCell>
-                  <Typography fontWeight={500} fontSize={15}>Progress</Typography>
-                </TableCell>
-                <TableCell>
-                  <Typography fontWeight={500} fontSize={15}>Speed</Typography>
-                </TableCell>
-                <TableCell>
-                  <Typography fontWeight={500} fontSize={15}>Size</Typography>
-                </TableCell>
-                <TableCell>
-                  <Typography fontWeight={500} fontSize={15}>Actions</Typography>
-                </TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {
-                downloads.map(download => (
-                  <TableRow key={download.id}>
-                    <TableCell>{ellipsis(download.info.title, 80)}</TableCell>
-                    <TableCell>
-                      <LinearProgress
-                        value={
-                          download.progress.percentage === '-1'
-                            ? 100
-                            : Number(download.progress.percentage.replace('%', ''))
-                        }
-                        variant={
-                          download.progress.process_status === 0
-                            ? 'indeterminate'
-                            : 'determinate'
-                        }
-                        color={download.progress.percentage === '-1' ? 'success' : 'primary'}
-                      />
-                    </TableCell>
-                    <TableCell>{formatSpeedMiB(download.progress.speed)}</TableCell>
-                    <TableCell>{formatSize(download.info.filesize_approx ?? 0)}</TableCell>
-                    <TableCell>
-                      <Button
-                        variant="contained"
-                        size="small"
-                        onClick={() => abort(download.id)}
-                      >
-                        {download.progress.percentage === '-1' ? 'Remove' : 'Stop'}
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))
-              }
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </Grid>
-    </Grid>
-  )
-}
-
-export default DownloadsListView

frontend/src/components/DownloadsTableView.tsx

@@ -0,0 +1,135 @@
+import {
+  Box,
+  Button,
+  Grid,
+  IconButton,
+  LinearProgress,
+  LinearProgressProps,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography
+} from "@mui/material"
+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'
+
+function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 1 }}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+      <Box sx={{ minWidth: 35 }}>
+        <Typography variant="body2" color="text.secondary">{`${Math.round(
+          props.value,
+        )}%`}</Typography>
+      </Box>
+    </Box>
+  )
+}
+
+const DownloadsListView: React.FC = () => {
+  const downloads = useRecoilValue(activeDownloadsState)
+
+  const { client } = useRPC()
+
+  const abort = (id: string) => client.kill(id)
+
+  return (
+    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
+      <Grid item xs={12}>
+        <TableContainer
+          component={Paper}
+          sx={{ minHeight: '80vh' }}
+          elevation={2}
+          hidden={downloads.length === 0}
+        >
+          <Table size="small">
+            <TableHead>
+              <TableRow>
+                <TableCell width={8}>
+                  <Typography fontWeight={500} fontSize={13}>Status</Typography>
+                </TableCell>
+                <TableCell>
+                  <Typography fontWeight={500} fontSize={13}>Title</Typography>
+                </TableCell>
+                <TableCell align="right">
+                  <Typography fontWeight={500} fontSize={13}>Speed</Typography>
+                </TableCell>
+                <TableCell align="center" width={200}>
+                  <Typography fontWeight={500} fontSize={13}>Progress</Typography>
+                </TableCell>
+                <TableCell align="right">
+                  <Typography fontWeight={500} fontSize={13}>Size</Typography>
+                </TableCell>
+                <TableCell align="right" width={180}>
+                  <Typography fontWeight={500} fontSize={13}>Added on</Typography>
+                </TableCell>
+                <TableCell align="right" width={8}>
+                  <Typography fontWeight={500} fontSize={13}>Actions</Typography>
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {
+                downloads.map(download => (
+                  <TableRow key={download.id}>
+                    <TableCell>
+                      {download.progress.percentage === '-1'
+                        ? <DownloadDoneIcon color="primary" />
+                        : <DownloadIcon color="primary" />
+                      }
+                    </TableCell>
+                    <TableCell>{ellipsis(download.info.title, 75)}</TableCell>
+                    <TableCell align="right">{formatSpeedMiB(download.progress.speed)}</TableCell>
+                    <TableCell align="right">
+                      <LinearProgressWithLabel
+                        sx={{ height: '16px' }}
+                        value={
+                          download.progress.percentage === '-1'
+                            ? 100
+                            : Number(download.progress.percentage.replace('%', ''))
+                        }
+                        variant={
+                          download.progress.process_status === 0
+                            ? 'indeterminate'
+                            : 'determinate'
+                        }
+                        color={download.progress.percentage === '-1' ? 'primary' : 'primary'}
+                      />
+                    </TableCell>
+                    <TableCell align="right">{formatSize(download.info.filesize_approx ?? 0)}</TableCell>
+                    <TableCell align="right">
+                      {new Date(download.info.created_at).toLocaleString()}
+                    </TableCell>
+                    <TableCell align="right">
+                      <IconButton
+                        size="small"
+                        onClick={() => abort(download.id)}
+                      >
+                        {download.progress.percentage === '-1' ? <DeleteIcon /> : <StopCircleIcon />}
+
+                      </IconButton>
+                    </TableCell>
+                  </TableRow>
+                ))
+              }
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Grid>
+    </Grid>
+  )
+}
+
+export default DownloadsListView

frontend/src/components/Footer.tsx

@@ -0,0 +1,56 @@
+import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
+import { AppBar, Toolbar } from '@mui/material'
+import { Suspense } from 'react'
+import { useRecoilValue } from 'recoil'
+import { settingsState } from '../atoms/settings'
+import { connectedState } from '../atoms/status'
+import { useI18n } from '../hooks/useI18n'
+import FreeSpaceIndicator from './FreeSpaceIndicator'
+import GitHubIcon from '@mui/icons-material/GitHub'
+
+const Footer: React.FC = () => {
+  const settings = useRecoilValue(settingsState)
+  const isConnected = useRecoilValue(connectedState)
+
+  const mode = settings.theme
+  const { i18n } = useI18n()
+
+  return (
+    <AppBar position="fixed" color="default" sx={{
+      top: 'auto',
+      bottom: 0,
+      height: 48,
+      zIndex: 1200,
+      borderTop: mode === 'light'
+        ? '1px solid rgba(0, 0, 0, 0.12)'
+        : '1px solid rgba(255, 255, 255, 0.12)',
+    }}>
+      <Toolbar sx={{
+        paddingBottom: 2,
+        fontSize: 14,
+        display: 'flex', gap: 1, justifyContent: 'space-between'
+      }}>
+        <div>v3.0.6</div>
+        <div style={{ display: 'flex', gap: 1 }}>
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            marginRight: '8px',
+            gap: 3,
+          }}>
+            <SettingsEthernet />
+            <span>
+              {isConnected ? settings.serverAddr : i18n.t('notConnectedText')}
+            </span>
+          </div>
+          <Suspense fallback={i18n.t('loadingLabel')}>
+            <FreeSpaceIndicator />
+          </Suspense>
+        </div>
+      </Toolbar>
+    </AppBar>
+  )
+}
+
+export default Footer

frontend/src/components/HomeSpeedDial.tsx

@@ -2,6 +2,7 @@ import AddCircleIcon from '@mui/icons-material/AddCircle'
 import BuildCircleIcon from '@mui/icons-material/BuildCircle'
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
 import FormatListBulleted from '@mui/icons-material/FormatListBulleted'
+import ViewAgendaIcon from '@mui/icons-material/ViewAgenda'
 import {
   SpeedDial,
   SpeedDialAction,
@@ -18,7 +19,7 @@ type Props = {
 }
 
 const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
-  const [, setListView] = useRecoilState(listViewState)
+  const [listView, setListView] = useRecoilState(listViewState)
 
   const { i18n } = useI18n()
   const { client } = useRPC()
@@ -28,12 +29,12 @@ const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
   return (
     <SpeedDial
       ariaLabel="Home speed dial"
-      sx={{ position: 'absolute', bottom: 32, right: 32 }}
+      sx={{ position: 'absolute', bottom: 64, right: 24 }}
       icon={<SpeedDialIcon />}
     >
       <SpeedDialAction
-        icon={<FormatListBulleted />}
+        icon={listView ? <ViewAgendaIcon /> : <FormatListBulleted />}
-        tooltipTitle={`Table view`}
+        tooltipTitle={listView ? 'Card view' : 'Table view'}
         onClick={() => setListView(state => !state)}
       />
       <SpeedDialAction

frontend/src/components/LogTerminal.tsx

@@ -61,7 +61,7 @@ const LogTerminal: React.FC = () => {
           ref={boxRef}
           sx={{
             fontFamily: 'Roboto Mono',
-            height: '75.5vh',
+            height: '70.5vh',
             overflowY: 'auto',
             overflowX: 'auto',
             fontSize: '13.5px',

frontend/src/views/Archive.tsx

@@ -275,7 +275,7 @@ export default function Downloaded() {
       </Paper>
       <SpeedDial
         ariaLabel="SpeedDial basic example"
-        sx={{ position: 'absolute', bottom: 32, right: 32 }}
+        sx={{ position: 'absolute', bottom: 64, right: 24 }}
         icon={<SpeedDialIcon />}
       >
         <SpeedDialAction

frontend/src/views/Home.tsx

@@ -8,7 +8,7 @@ import Splash from '../components/Splash'
 
 export default function Home() {
   return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+    <Container maxWidth="lg" sx={{ mt: 2, mb: 8 }}>
       <LoadingBackdrop />
       <Splash />
       <Downloads />

frontend/src/views/Settings.tsx

@@ -134,7 +134,7 @@ export default function Settings() {
   }
 
   return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+    <Container maxWidth="lg" sx={{ mt: 4, mb: 8 }}>
       <Grid container spacing={3}>
         <Grid item xs={12} md={12} lg={12}>
           <Paper

server/server.go

@@ -44,7 +44,7 @@ func RunBlocking(host string, port int, frontend fs.FS, dbPath string) {
 	logger := slog.New(
 		slog.NewTextHandler(
 			io.MultiWriter(os.Stdout, logging.NewObservableLogger()),
-			nil,
+			&slog.HandlerOptions{},
 		),
 	)