Added better archive functionalty (backend side atm)

Code refactoring

frontend/src/components/ArchiveCard.tsx

@@ -0,0 +1,98 @@
+import DeleteIcon from '@mui/icons-material/Delete'
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
+import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser'
+import SaveAltIcon from '@mui/icons-material/SaveAlt'
+import {
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  CardMedia,
+  IconButton,
+  Skeleton,
+  Tooltip,
+  Typography
+} from '@mui/material'
+import { useAtomValue } from 'jotai'
+import { serverURL } from '../atoms/settings'
+import { ArchiveEntry } from '../types'
+import { base64URLEncode, ellipsis } from '../utils'
+
+type Props = {
+  entry: ArchiveEntry
+  onDelete: (id: string) => void
+  onHardDelete: (id: string) => void
+}
+
+const ArchiveCard: React.FC<Props> = ({ entry, onDelete, onHardDelete }) => {
+  const serverAddr = useAtomValue(serverURL)
+
+  const viewFile = (path: string) => {
+    const encoded = base64URLEncode(path)
+    window.open(`${serverAddr}/filebrowser/v/${encoded}?token=${localStorage.getItem('token')}`)
+  }
+
+  const downloadFile = (path: string) => {
+    const encoded = base64URLEncode(path)
+    window.open(`${serverAddr}/filebrowser/d/${encoded}?token=${localStorage.getItem('token')}`)
+  }
+
+  return (
+    <Card>
+      <CardActionArea onClick={() => navigator.clipboard.writeText(entry.source)}>
+        {entry.thumbnail !== '' ?
+          <CardMedia
+            component="img"
+            height={180}
+            image={entry.thumbnail}
+          /> :
+          <Skeleton variant="rectangular" height={180} />
+        }
+        <CardContent>
+          {entry.title !== '' ?
+            <Typography gutterBottom variant="h6" component="div">
+              {ellipsis(entry.title, 60)}
+            </Typography> :
+            <Skeleton />
+          }
+          {/* <code>
+            {JSON.stringify(JSON.parse(entry.metadata), null, 2)}
+          </code> */}
+          <p>{new Date(entry.created_at).toLocaleString()}</p>
+        </CardContent>
+      </CardActionArea>
+      <CardActions>
+        <Tooltip title="Open in browser">
+          <IconButton
+            onClick={() => viewFile(entry.path)}
+          >
+            <OpenInBrowserIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Download this file">
+          <IconButton
+            onClick={() => downloadFile(entry.path)}
+          >
+            <SaveAltIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Delete from archive">
+          <IconButton
+            onClick={() => onDelete(entry.id)}
+          >
+            <DeleteIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Delete from disk">
+          <IconButton
+            onClick={() => onHardDelete(entry.id)}
+          >
+            <DeleteForeverIcon />
+          </IconButton>
+        </Tooltip>
+      </CardActions>
+    </Card>
+  )
+}
+
+export default ArchiveCard

frontend/src/components/DownloadCard.tsx

@@ -1,7 +1,3 @@
-import EightK from '@mui/icons-material/EightK'
-import FourK from '@mui/icons-material/FourK'
-import Hd from '@mui/icons-material/Hd'
-import Sd from '@mui/icons-material/Sd'
 import {
   Button,
   Card,
@@ -10,16 +6,23 @@ import {
   CardContent,
   CardMedia,
   Chip,
+  IconButton,
   LinearProgress,
   Skeleton,
   Stack,
+  Tooltip,
   Typography
 } from '@mui/material'
+import { useAtomValue } from 'jotai'
 import { useCallback } from 'react'
 import { serverURL } from '../atoms/settings'
 import { RPCResult } from '../types'
 import { base64URLEncode, ellipsis, formatSize, formatSpeedMiB, mapProcessStatus } from '../utils'
-import { useAtomValue } from 'jotai'
+import ResolutionBadge from './ResolutionBadge'
+import ClearIcon from '@mui/icons-material/Clear'
+import StopCircleIcon from '@mui/icons-material/StopCircle'
+import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser'
+import SaveAltIcon from '@mui/icons-material/SaveAlt'
 
 type Props = {
   download: RPCResult
@@ -27,15 +30,6 @@ type Props = {
   onCopy: () => void
 }
 
-const Resolution: React.FC<{ resolution?: string }> = ({ resolution }) => {
-  if (!resolution) return null
-  if (resolution.includes('4320')) return <EightK color="primary" />
-  if (resolution.includes('2160')) return <FourK color="primary" />
-  if (resolution.includes('1080')) return <Hd color="primary" />
-  if (resolution.includes('720')) return <Sd color="primary" />
-  return null
-}
-
 const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
   const serverAddr = useAtomValue(serverURL)
 
@@ -53,12 +47,12 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
 
   const viewFile = (path: string) => {
     const encoded = base64URLEncode(path)
-    window.open(`${serverAddr}/archive/v/${encoded}?token=${localStorage.getItem('token')}`)
+    window.open(`${serverAddr}/filebrowser/v/${encoded}?token=${localStorage.getItem('token')}`)
   }
 
   const downloadFile = (path: string) => {
     const encoded = base64URLEncode(path)
-    window.open(`${serverAddr}/archive/d/${encoded}?token=${localStorage.getItem('token')}`)
+    window.open(`${serverAddr}/filebrowser/d/${encoded}?token=${localStorage.getItem('token')}`)
   }
 
   return (
@@ -110,37 +104,44 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
             <Typography>
               {formatSize(download.info.filesize_approx ?? 0)}
             </Typography>
-            <Resolution resolution={download.info.resolution} />
+            <ResolutionBadge resolution={download.info.resolution} />
           </Stack>
         </CardContent>
       </CardActionArea>
       <CardActions>
-        <Button
-          variant="contained"
-          size="small"
-          color="primary"
-          onClick={onStop}
-        >
-          {isCompleted() ? "Clear" : "Stop"}
-        </Button>
+        {isCompleted() ?
+          <Tooltip title="Clear from the view">
+            <IconButton
+              onClick={onStop}
+            >
+              <ClearIcon />
+            </IconButton>
+          </Tooltip>
+          :
+          <Tooltip title="Stop this download">
+            <IconButton
+              onClick={onStop}
+            >
+              <StopCircleIcon />
+            </IconButton>
+          </Tooltip>
+        }
         {isCompleted() &&
           <>
-            <Button
-              variant="contained"
-              size="small"
-              color="primary"
-              onClick={() => downloadFile(download.output.savedFilePath)}
-            >
-              Download
-            </Button>
-            <Button
-              variant="contained"
-              size="small"
-              color="primary"
-              onClick={() => viewFile(download.output.savedFilePath)}
-            >
-              View
-            </Button>
+            <Tooltip title="Download this file">
+              <IconButton
+                onClick={() => downloadFile(download.output.savedFilePath)}
+              >
+                <SaveAltIcon />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Open in a new tab">
+              <IconButton
+                onClick={() => viewFile(download.output.savedFilePath)}
+              >
+                <OpenInBrowserIcon />
+              </IconButton>
+            </Tooltip>
           </>
         }
       </CardActions>

frontend/src/components/DownloadDialog.tsx

@@ -348,7 +348,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
                       disabled={url === ''}
                       onClick={() => settings.formatSelection
                         ? startTransition(() => sendUrlFormatSelection())
-                        : sendUrl()
+                        : startTransition(async () => await sendUrl())
                       }
                     >
                       {

frontend/src/components/DownloadsGridView.tsx

@@ -1,11 +1,13 @@
-import { Grid } from '@mui/material'
+import { Grid2 } from '@mui/material'
 import { useAtomValue } from 'jotai'
+import { useTransition } from 'react'
 import { activeDownloadsState } from '../atoms/downloads'
 import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
 import { ProcessStatus, RPCResult } from '../types'
 import DownloadCard from './DownloadCard'
+import LoadingBackdrop from './LoadingBackdrop'
 
 const DownloadsGridView: React.FC = () => {
   const downloads = useAtomValue(activeDownloadsState)
@@ -14,24 +16,31 @@ const DownloadsGridView: React.FC = () => {
   const { client } = useRPC()
   const { pushMessage } = useToast()
 
-  const stop = (r: RPCResult) => r.progress.process_status === ProcessStatus.COMPLETED
-    ? client.clear(r.id)
-    : client.kill(r.id)
+  const [isPending, startTransition] = useTransition()
+
+  const stop = async (r: RPCResult) => r.progress.process_status === ProcessStatus.COMPLETED
+    ? await client.clear(r.id)
+    : await client.kill(r.id)
 
   return (
-    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12, xl: 12 }} pt={2}>
-      {
-        downloads.map(download => (
-          <Grid item xs={4} sm={8} md={6} xl={4} key={download.id}>
-            <DownloadCard
-              download={download}
-              onStop={() => stop(download)}
-              onCopy={() => pushMessage(i18n.t('clipboardAction'), 'info')}
-            />
-          </Grid>
-        ))
-      }
-    </Grid>
+    <>
+      <LoadingBackdrop isLoading={isPending} />
+      <Grid2 container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12, xl: 12 }} pt={2}>
+        {
+          downloads.map(download => (
+            <Grid2 size={{ xs: 4, sm: 8, md: 6, xl: 4 }} key={download.id}>
+              <DownloadCard
+                download={download}
+                onStop={() => startTransition(async () => {
+                  await stop(download)
+                })}
+                onCopy={() => pushMessage(i18n.t('clipboardAction'), 'info')}
+              />
+            </Grid2>
+          ))
+        }
+      </Grid2>
+    </>
   )
 }
 

frontend/src/components/DownloadsTableView.tsx

@@ -125,12 +125,12 @@ const DownloadsTableView: React.FC = () => {
 
   const viewFile = (path: string) => {
     const encoded = base64URLEncode(path)
-    window.open(`${serverAddr}/archive/v/${encoded}?token=${localStorage.getItem('token')}`)
+    window.open(`${serverAddr}/filebrowser/v/${encoded}?token=${localStorage.getItem('token')}`)
   }
 
   const downloadFile = (path: string) => {
     const encoded = base64URLEncode(path)
-    window.open(`${serverAddr}/archive/d/${encoded}?token=${localStorage.getItem('token')}`)
+    window.open(`${serverAddr}/filebrowser/d/${encoded}?token=${localStorage.getItem('token')}`)
   }
 
   const stop = (r: RPCResult) => r.progress.process_status === ProcessStatus.COMPLETED

frontend/src/components/EmptyArchive.tsx

@@ -0,0 +1,45 @@
+import ArchiveIcon from '@mui/icons-material/Archive'
+import { Container, SvgIcon, Typography, styled } from '@mui/material'
+import { activeDownloadsState } from '../atoms/downloads'
+import { useI18n } from '../hooks/useI18n'
+import { useAtomValue } from 'jotai'
+
+const FlexContainer = styled(Container)({
+  display: 'flex',
+  minWidth: '100%',
+  minHeight: '80vh',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column'
+})
+
+const Title = styled(Typography)({
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingBottom: '0.5rem'
+})
+
+export default function EmptyArchive() {
+  const { i18n } = useI18n()
+  const activeDownloads = useAtomValue(activeDownloadsState)
+
+  if (activeDownloads.length !== 0) {
+    return null
+  }
+
+  return (
+    <FlexContainer>
+      <Title fontWeight={'500'} fontSize={72} color={'gray'}>
+        <SvgIcon sx={{ fontSize: '200px' }}>
+          <ArchiveIcon />
+        </SvgIcon>
+      </Title>
+      <Title fontWeight={'500'} fontSize={36} color={'gray'}>
+        {/* {i18n.t('splashText')} */}
+        Empty Archive
+      </Title>
+    </FlexContainer>
+  )
+}

frontend/src/components/ResolutionBadge.tsx

@@ -0,0 +1,15 @@
+import EightK from '@mui/icons-material/EightK'
+import FourK from '@mui/icons-material/FourK'
+import Hd from '@mui/icons-material/Hd'
+import Sd from '@mui/icons-material/Sd'
+
+const ResolutionBadge: React.FC<{ resolution?: string }> = ({ resolution }) => {
+  if (!resolution) return null
+  if (resolution.includes('4320')) return <EightK color="primary" />
+  if (resolution.includes('2160')) return <FourK color="primary" />
+  if (resolution.includes('1080')) return <Hd color="primary" />
+  if (resolution.includes('720')) return <Sd color="primary" />
+  return null
+}
+
+export default ResolutionBadge

frontend/src/components/TemplatesEditor.tsx

@@ -201,7 +201,7 @@ const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
                     InputProps={{
                       endAdornment: <Button
                         variant='contained'
-                        onClick={() => startTransition(() => { addTemplate() })}
+                        onClick={() => startTransition(async () => await addTemplate())}
                       >
                         <AddIcon />
                       </Button>