ui refactor, downloaded files view enabled

frontend/src/App.tsx

@@ -2,7 +2,6 @@ import { ThemeProvider } from '@emotion/react'
 
 import ChevronLeft from '@mui/icons-material/ChevronLeft'
 import Dashboard from '@mui/icons-material/Dashboard'
-import FormatListBulleted from '@mui/icons-material/FormatListBulleted'
 import Menu from '@mui/icons-material/Menu'
 import SettingsIcon from '@mui/icons-material/Settings'
 import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
@@ -15,33 +14,32 @@ import CssBaseline from '@mui/material/CssBaseline'
 import Divider from '@mui/material/Divider'
 import IconButton from '@mui/material/IconButton'
 import List from '@mui/material/List'
+import ListItemButton from '@mui/material/ListItemButton'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
 import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
-import ListItemButton from '@mui/material/ListItemButton'
+import DownloadIcon from '@mui/icons-material/Download';
 
 import { grey } from '@mui/material/colors'
 
 import { Suspense, lazy, useMemo, useState } from 'react'
 import { Provider, useDispatch, useSelector } from 'react-redux'
 
-import { Link, Route, BrowserRouter, Routes } from 'react-router-dom'
-import { toggleListView } from './features/settings/settingsSlice'
+import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
 import { RootState, store } from './stores/store'
 
 import AppBar from './components/AppBar'
 import Drawer from './components/Drawer'
 
-import { formatGiB } from './utils'
 import Downloaded from './Downloaded'
+import { formatGiB } from './utils'
 
 function AppContent() {
   const [open, setOpen] = useState(false)
 
   const settings = useSelector((state: RootState) => state.settings)
   const status = useSelector((state: RootState) => state.status)
-  const dispatch = useDispatch()
 
   const mode = settings.theme
   const theme = useMemo(() =>
@@ -140,12 +138,19 @@ function AppContent() {
                   <ListItemText primary="Home" />
                 </ListItemButton>
               </Link>
-              <ListItemButton onClick={() => dispatch(toggleListView())}>
-                <ListItemIcon>
-                  <FormatListBulleted />
-                </ListItemIcon>
-                <ListItemText primary="List view" />
-              </ListItemButton>
+              <Link to={'/downloaded'} style={
+                {
+                  textDecoration: 'none',
+                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
+                }
+              }>
+                <ListItemButton disabled={status.downloading}>
+                  <ListItemIcon>
+                    <DownloadIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Downloaded" />
+                </ListItemButton>
+              </Link>
               <Link to={'/settings'} style={
                 {
                   textDecoration: 'none',

frontend/src/Downloaded.tsx

@@ -20,15 +20,15 @@ import {
   SpeedDialIcon
 } from '@mui/material'
 
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
 import VideoFileIcon from '@mui/icons-material/VideoFile'
 import { Buffer } from 'buffer'
 import { useEffect, useMemo, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { BehaviorSubject, combineLatestWith, map, share } from 'rxjs'
+import { BehaviorSubject, Subject, combineLatestWith, map, share } from 'rxjs'
 import { useObservable } from './hooks/observable'
 import { RootState } from './stores/store'
 import { DeleteRequest, DirectoryEntry } from './types'
-import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
 
 export default function Downloaded() {
   const settings = useSelector((state: RootState) => state.settings)
@@ -38,7 +38,7 @@ export default function Downloaded() {
   const serverAddr =
     `${window.location.protocol}//${settings.serverAddr}:${settings.serverPort}`
 
-  const files$ = useMemo(() => new BehaviorSubject<DirectoryEntry[]>([]), [])
+  const files$ = useMemo(() => new Subject<DirectoryEntry[]>(), [])
   const selected$ = useMemo(() => new BehaviorSubject<string[]>([]), [])
 
   const fetcher = () => fetch(`${serverAddr}/downloaded`)
@@ -86,7 +86,7 @@ export default function Downloaded() {
     <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
       <Backdrop
         sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-        open={selectable.length === 0}
+        open={!(files$.observed)}
       >
         <CircularProgress color="primary" />
       </Backdrop>
@@ -96,6 +96,7 @@ export default function Downloaded() {
         flexDirection: 'column',
       }}>
         <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
+          {selectable.length === 0 && 'No files found'}
           {selectable.map((file) => (
             <ListItem
               key={file.shaSum}

frontend/src/Home.tsx

@@ -1,4 +1,5 @@
 import { FileUpload } from '@mui/icons-material'
+import FormatListBulleted from '@mui/icons-material/FormatListBulleted'
 import {
   Alert,
   Backdrop,
@@ -14,6 +15,9 @@ import {
   Paper,
   Select,
   Snackbar,
+  SpeedDial,
+  SpeedDialAction,
+  SpeedDialIcon,
   styled,
   TextField
 } from '@mui/material'
@@ -26,6 +30,7 @@ import FormatsGrid from './components/FormatsGrid'
 import { CliArguments } from './features/core/argsParser'
 import I18nBuilder from './features/core/intl'
 import { RPCClient, socket$ } from './features/core/rpcClient'
+import { toggleListView } from './features/settings/settingsSlice'
 import { connected, setFreeSpace } from './features/status/statusSlice'
 import { RootState } from './stores/store'
 import type { DLMetadata, RPCResponse, RPCResult } from './types'
@@ -405,6 +410,18 @@ export default function Home() {
           {`${i18n.t('rpcConnErr')} (${settings.serverAddr}:${settings.serverPort})`}
         </Alert>
       </Snackbar>
+      <SpeedDial
+        ariaLabel="SpeedDial basic example"
+        sx={{ position: 'absolute', bottom: 32, right: 32 }}
+        icon={<SpeedDialIcon />}
+      >
+        <SpeedDialAction
+          icon={<FormatListBulleted />}
+          tooltipTitle={`Table view`}
+          tooltipOpen
+          onClick={() => dispatch(toggleListView())}
+        />
+      </SpeedDial>
     </Container>
   );
 }