Added favicon

Closes #139
code refactoring, added router, moved download api path
2024-03-03 20:32:20 +01:00 · 2024-02-23 10:55:33 +01:00 · 2024-02-12 12:02:23 +01:00 · 2024-02-10 09:56:50 +01:00 · 2024-02-09 18:20:22 +01:00 · 2024-02-09 11:08:47 +01:00
95 changed files with 7260 additions and 1036 deletions
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -25,7 +25,7 @@ jobs:
        # v3.1.2
        uses: sigstore/cosign-installer@11086d25041f77fe8fe7b9ea4e48e3b9192b8f19
        with:
-          cosign-release: 'v1.13.6'
+          cosign-release: 'v1.13.1'

      - name: Set up QEMU for ARM emulation
        # v2.2.0
--- a/.gitignore
+++ b/.gitignore
@@ -14,5 +14,4 @@ session.dat
 config.yml
 cookies.txt
 __debug*
-ui/
-.idea
+app/
--- a/26
+++ b/26
@@ -1,30 +1,18 @@
-# Node (pnpm) ------------------------------------------------------------------
-FROM node:20-slim AS ui
-ENV PNPM_HOME="/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
-RUN corepack enable
+FROM golang:alpine AS build
+
+RUN apk update && \
+    apk add nodejs npm
+
 COPY . /usr/src/yt-dlp-webui

 WORKDIR /usr/src/yt-dlp-webui/frontend

-RUN rm -rf node_modules
-
-RUN pnpm install
-RUN pnpm run build
-# -----------------------------------------------------------------------------
-
-# Go --------------------------------------------------------------------------
-FROM golang AS build
+RUN npm install
+RUN npm run build

 WORKDIR /usr/src/yt-dlp-webui
-
-COPY . .
-COPY --from=ui /usr/src/yt-dlp-webui/frontend /usr/src/yt-dlp-webui/frontend
-
 RUN CGO_ENABLED=0 GOOS=linux go build -o yt-dlp-webui
-# -----------------------------------------------------------------------------

-# dependencies ----------------------------------------------------------------
 FROM alpine:edge

 VOLUME /downloads /config
--- a/5
+++ b/5
@@ -7,10 +7,9 @@ all:

 multiarch:
 	mkdir -p build
-	CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o build/yt-dlp-webui_linux-amd64 main.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=arm go build -o build/yt-dlp-webui_linux-arm main.go
 	CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -o build/yt-dlp-webui_linux-arm64 main.go
-	CGO_ENABLED=0 GOOS=linux GOARM=6 GOARCH=arm go build -o build/yt-dlp-webui_linux-armv6 main.go
-	CGO_ENABLED=0 GOOS=linux GOARM=7 GOARCH=arm go build -o build/yt-dlp-webui_linux-armv7 main.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o build/yt-dlp-webui_linux-amd64 main.go

 clean:
 	rm -rf build
--- a/README.md
+++ b/README.md
@@ -23,9 +23,7 @@ docker pull marcobaobao/yt-dlp-webui
 # latest dev
 docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
 ```
-
-[app.webm](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/91545bc4-233d-4dde-8504-27422cb26964)
-
+![output](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/82bcecaf-4ced-441f-9384-105653abfae4)

 ![image](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/a32fbdaa-b033-4aed-b914-a66701ace0ce)
 ![image](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/782c559a-f552-40be-a6fd-10e22f38e85d)
@@ -182,31 +180,16 @@ The config file **will overwrite what have been passed as cli argument**.
 # Simple configuration file for yt-dlp webui

 ---
-# Host where server will listen at (default: "0.0.0.0")
-#host: 0.0.0.0
-
-# Port where server will listen at (default: 3033)
 port: 8989
-
-# Directory where downloaded files will be stored (default: ".")
 downloadPath: /home/ren/archive
+downloaderPath: /usr/local/bin/yt-dlp

-# [optional] Enable RPC authentication (requires username and password)
+# Optional settings
 require_auth: true
 username: my_username
 password: my_random_secret

-# [optional] The download queue size (default: 8)
 queue_size: 4
-
-# [optional] Full path to the yt-dlp (default: "yt-dlp")
-downloaderPath: /usr/local/bin/yt-dlp
-
-# [optional] Directory where the log file will be stored (default: ".")
-#log_path: .
-
-# [optional] Directory where the session database file will be stored (default: ".")
-#session_file_path: .
 ```

 ### Systemd integration
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,7 +5,7 @@
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/x-icon" href="./src/assets/favicon.ico">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <title>yt-dlp Web UI</title>
 </head>

--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
    "@mui/icons-material": "^5.15.4",
    "@mui/material": "^5.15.4",
    "fp-ts": "^2.16.2",
+    "million": "^2.6.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.2",
@@ -24,15 +25,14 @@
    "rxjs": "^7.8.1"
  },
  "devDependencies": {
-    "@modyfi/vite-plugin-yaml": "^1.1.0",
+    "@modyfi/vite-plugin-yaml": "^1.0.4",
    "@types/node": "^20.11.4",
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
    "@types/react-helmet": "^6.1.11",
    "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react-swc": "^3.6.0",
-    "typescript": "^5.4.3",
-    "vite": "^5.2.6",
-    "million": "^3.0.6"
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
  }
 }
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/src/assets/favicon.ico
+++ b/frontend/src/assets/favicon.ico
--- a/frontend/src/Layout.tsx
+++ b/frontend/src/Layout.tsx
@@ -1,10 +1,10 @@
 import { ThemeProvider } from '@emotion/react'
-import ArchiveIcon from '@mui/icons-material/Archive'
 import ChevronLeft from '@mui/icons-material/ChevronLeft'
 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 TerminalIcon from '@mui/icons-material/Terminal'
+import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
 import { Box, createTheme } from '@mui/material'
 import CssBaseline from '@mui/material/CssBaseline'
 import Divider from '@mui/material/Divider'
@@ -16,23 +16,26 @@ 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 { useMemo, useState } from 'react'
+import { Suspense, 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 Footer from './components/Footer'
+import FreeSpaceIndicator from './components/FreeSpaceIndicator'
 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(() =>
@@ -78,6 +81,21 @@ 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}>
@@ -116,7 +134,7 @@ export default function Layout() {
            }>
              <ListItemButton>
                <ListItemIcon>
-                  <ArchiveIcon />
+                  <DownloadIcon />
                </ListItemIcon>
                <ListItemText primary={i18n.t('archiveButtonLabel')} />
              </ListItemButton>
@@ -163,7 +181,6 @@ export default function Layout() {
          <Outlet />
        </Box>
      </Box>
-      <Footer />
      <Toaster />
    </ThemeProvider>
  )
--- a/frontend/src/assets/i18n.yaml
+++ b/frontend/src/assets/i18n.yaml
@@ -1,7 +1,7 @@
 ---
 languages:
  english:
-    urlInput: Video URL (one per line)
+    urlInput: Video URL
    statusTitle: Status
    statusReady: Ready
    selectFormatButton: Select format
@@ -150,7 +150,7 @@ languages:
    logsTitle: 'Logs'
    awaitingLogs: 'Awaiting logs...'
  italian:
-    urlInput: URL Video (uno per linea)
+    urlInput: URL Video
    statusTitle: Stato
    startButton: Inizia
    statusReady: Pronto
--- a/frontend/src/atoms/format.ts
+++ b/frontend/src/atoms/format.ts
@@ -0,0 +1,7 @@
+import { atom } from 'recoil'
+import { DLMetadata } from '../types'
+
+export const selectedFormatState = atom<Partial<DLMetadata>>({
+  key: 'selectedFormatState',
+  default: {},
+})
--- a/frontend/src/atoms/status.ts
+++ b/frontend/src/atoms/status.ts
@@ -1,6 +1,13 @@
 import { atom, selector } from 'recoil'
 import { rpcClientState } from './rpc'

+type StatusState = {
+  connected: boolean,
+  updated: boolean,
+  downloading: boolean,
+}
+
+
 export const connectedState = atom({
  key: 'connectedState',
  default: false
--- a/frontend/src/atoms/ui.ts
+++ b/frontend/src/atoms/ui.ts
@@ -1,20 +1,6 @@
-import { atom, selector } from 'recoil'
-import { RPCResult } from '../types'
-import { activeDownloadsState } from './downloads'
+import { atom } from 'recoil'

 export const loadingAtom = atom({
  key: 'loadingAtom',
  default: true
 })
-
-export const optimisticDownloadsState = atom<RPCResult[]>({
-  key: 'optimisticDownloadsState',
-  default: []
-})
-
-export const totalDownloadSpeedState = selector<number>({
-  key: 'totalDownloadSpeedState',
-  get: ({ get }) => get(activeDownloadsState)
-    .map(d => d.progress.speed)
-    .reduce((curr, next) => curr + next, 0)
-})
--- a/frontend/src/components/DownloadCard.tsx
+++ b/frontend/src/components/DownloadCard.tsx
@@ -17,7 +17,7 @@ import {
 } from '@mui/material'
 import { useCallback } from 'react'
 import { RPCResult } from '../types'
-import { ellipsis, formatSpeedMiB, mapProcessStatus, formatSize } from '../utils'
+import { ellipsis, formatSpeedMiB, mapProcessStatus, roundMiB } from '../utils'

 type Props = {
  download: RPCResult
@@ -61,22 +61,14 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
          /> :
          <Skeleton variant="rectangular" height={180} />
        }
-        {download.progress.percentage ?
-          <LinearProgress
-            variant="determinate"
-            value={percentageToNumber()}
-            color={isCompleted() ? "success" : "primary"}
-          /> :
-          null
-        }
        <CardContent>
          {download.info.title !== '' ?
            <Typography gutterBottom variant="h6" component="div">
-              {ellipsis(download.info.title, 100)}
+              {ellipsis(download.info.title, 54)}
            </Typography> :
            <Skeleton />
          }
-          <Stack direction="row" spacing={0.5} py={1}>
+          <Stack direction="row" spacing={1} py={2}>
            <Chip
              label={
                isCompleted()
@@ -94,10 +86,18 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
              {!isCompleted() ? formatSpeedMiB(download.progress.speed) : ''}
            </Typography>
            <Typography>
-              {formatSize(download.info.filesize_approx ?? 0)}
+              {roundMiB(download.info.filesize_approx ?? 0)}
            </Typography>
            <Resolution resolution={download.info.resolution} />
          </Stack>
+          {download.progress.percentage ?
+            <LinearProgress
+              variant="determinate"
+              value={percentageToNumber()}
+              color={isCompleted() ? "secondary" : "primary"}
+            /> :
+            null
+          }
        </CardContent>
      </CardActionArea>
      <CardActions>
--- a/frontend/src/components/DownloadDialog.tsx
+++ b/frontend/src/components/DownloadDialog.tsx
@@ -80,6 +80,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
  )

  const [url, setUrl] = useState('')
+  const [workingUrl, setWorkingUrl] = useState('')

  const [isPlaylist, setIsPlaylist] = useState(false)

@@ -102,36 +103,35 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
  /**
    * Retrive url from input, cli-arguments from checkboxes and emits via WebSocket
  */
-  const sendUrl = async (immediate?: string) => {
-    for (const line of url.split('\n')) {
-      const codes = new Array<string>()
-      if (pickedVideoFormat !== '') codes.push(pickedVideoFormat)
-      if (pickedAudioFormat !== '') codes.push(pickedAudioFormat)
-      if (pickedBestFormat !== '') codes.push(pickedBestFormat)
+  const sendUrl = (immediate?: string) => {
+    const codes = new Array<string>()
+    if (pickedVideoFormat !== '') codes.push(pickedVideoFormat)
+    if (pickedAudioFormat !== '') codes.push(pickedAudioFormat)
+    if (pickedBestFormat !== '') codes.push(pickedBestFormat)

-      await new Promise(r => setTimeout(r, 10))
-      await client.download({
-        url: immediate || line,
-        args: `${argsBuilder.toString()} ${toFormatArgs(codes)} ${downloadTemplate}`,
-        pathOverride: downloadPath ?? '',
-        renameTo: settings.fileRenaming ? filenameTemplate : '',
-        playlist: isPlaylist,
-      })
-
-      setTimeout(() => {
-        resetInput()
-        setDownloadFormats(undefined)
-        onDownloadStart(immediate || line)
-      }, 250)
-    }
+    client.download({
+      url: immediate || url || workingUrl,
+      args: `${argsBuilder.toString()} ${toFormatArgs(codes)} ${downloadTemplate}`,
+      pathOverride: downloadPath ?? '',
+      renameTo: settings.fileRenaming ? filenameTemplate : '',
+      playlist: isPlaylist,
+    })

    setUrl('')
+    setWorkingUrl('')
+
+    setTimeout(() => {
+      resetInput()
+      setDownloadFormats(undefined)
+      onDownloadStart(immediate || url || workingUrl)
+    }, 250)
  }

  /**
   * Retrive url from input and display the formats selection view
   */
  const sendUrlFormatSelection = () => {
+    setWorkingUrl(url)
    setUrl('')
    setPickedAudioFormat('')
    setPickedVideoFormat('')
@@ -207,7 +207,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
        backgroundColor: (theme) => theme.palette.background.default,
        minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
      }}>
-        <Container sx={{ my: 4 }}>
+        <Container sx={{ my: 4 }} >
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <Paper
@@ -220,7 +220,6 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
              >
                <Grid container>
                  <TextField
-                    multiline
                    fullWidth
                    ref={urlInputRef}
                    label={i18n.t('urlInput')}
--- a/frontend/src/components/Downloads.tsx
+++ b/frontend/src/components/Downloads.tsx
@@ -4,24 +4,31 @@ import { loadingDownloadsState } from '../atoms/downloads'
 import { listViewState } from '../atoms/settings'
 import { loadingAtom } from '../atoms/ui'
 import DownloadsCardView from './DownloadsCardView'
-import DownloadsTableView from './DownloadsTableView'
+import DownloadsListView from './DownloadsListView'

 const Downloads: React.FC = () => {
-  const tableView = useRecoilValue(listViewState)
+  const listView = useRecoilValue(listViewState)
  const loadingDownloads = useRecoilValue(loadingDownloadsState)

  const [isLoading, setIsLoading] = useRecoilState(loadingAtom)

  useEffect(() => {
    if (loadingDownloads) {
-      return setIsLoading(true)
+      setIsLoading(true)
+      return
    }
    setIsLoading(false)
  }, [loadingDownloads, isLoading])

-  if (tableView) return <DownloadsTableView />
+  if (listView) {
+    return (
+      <DownloadsListView />
+    )
+  }

-  return <DownloadsCardView />
+  return (
+    <DownloadsCardView />
+  )
 }

 export default Downloads
--- a/frontend/src/components/DownloadsCardView.tsx
+++ b/frontend/src/components/DownloadsCardView.tsx
@@ -16,10 +16,10 @@ const DownloadsCardView: React.FC = () => {
  const abort = (id: string) => client.kill(id)

  return (
-    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12, xl: 12 }} pt={2}>
+    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
      {
        downloads.map(download => (
-          <Grid item xs={4} sm={8} md={6} xl={4} key={download.id}>
+          <Grid item xs={4} sm={8} md={6} key={download.id}>
            <DownloadCard
              download={download}
              onStop={() => abort(download.id)}
--- a/frontend/src/components/DownloadsListView.tsx
+++ b/frontend/src/components/DownloadsListView.tsx
@@ -0,0 +1,98 @@
+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, roundMiB } 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>{roundMiB(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
--- a/frontend/src/components/DownloadsTableView.tsx
+++ b/frontend/src/components/DownloadsTableView.tsx
@@ -1,128 +0,0 @@
-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,
-  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 { formatSize, formatSpeedMiB } from "../utils"
-
-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 DownloadsTableView: React.FC = () => {
-  const downloads = useRecoilValue(activeDownloadsState)
-
-  const { client } = useRPC()
-
-  const abort = (id: string) => client.kill(id)
-
-  return (
-    <TableContainer
-      sx={{ minHeight: '80vh', mt: 4 }}
-      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>{download.info.title}</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>
-  )
-}
-
-export default DownloadsTableView
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -1,69 +0,0 @@
-import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
-import { AppBar, Chip, Divider, 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 VersionIndicator from './VersionIndicator'
-import DownloadIcon from '@mui/icons-material/Download'
-import { totalDownloadSpeedState } from '../atoms/ui'
-import { formatSpeedMiB } from '../utils'
-
-const Footer: React.FC = () => {
-  const settings = useRecoilValue(settingsState)
-  const isConnected = useRecoilValue(connectedState)
-  const totalDownloadSpeed = useRecoilValue(totalDownloadSpeedState)
-
-  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 style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-          <Chip label="RPC v3.0.6" variant="outlined" size="small" />
-          <VersionIndicator />
-        </div>
-        <div style={{ display: 'flex', gap: 4, 'alignItems': 'center' }}>
-          <div style={{
-            display: 'flex',
-            alignItems: 'center',
-            flexWrap: 'wrap',
-            marginRight: 'px',
-            gap: 3,
-          }}>
-            <DownloadIcon />
-            <span>
-              {formatSpeedMiB(totalDownloadSpeed)}
-            </span>
-            <Divider orientation="vertical" flexItem />
-            <SettingsEthernet />
-            <span>
-              {isConnected ? settings.serverAddr : i18n.t('notConnectedText')}
-            </span>
-          </div>
-          <Divider orientation="vertical" flexItem />
-          <Suspense fallback={i18n.t('loadingLabel')}>
-            <FreeSpaceIndicator />
-          </Suspense>
-        </div>
-      </Toolbar>
-    </AppBar>
-  )
-}
-
-export default Footer
--- a/frontend/src/components/FreeSpaceIndicator.tsx
+++ b/frontend/src/components/FreeSpaceIndicator.tsx
@@ -1,7 +1,7 @@
 import StorageIcon from '@mui/icons-material/Storage'
 import { useRecoilValue } from 'recoil'
 import { freeSpaceBytesState } from '../atoms/status'
-import { formatSize } from '../utils'
+import { formatGiB } from '../utils'

 const FreeSpaceIndicator = () => {
  const freeSpace = useRecoilValue(freeSpaceBytesState)
@@ -15,7 +15,7 @@ const FreeSpaceIndicator = () => {
    }}>
      <StorageIcon />
      <span>
-        {formatSize(freeSpace)}
+        {formatGiB(freeSpace)}
      </span>
    </div>
  )
--- a/frontend/src/components/HomeActions.tsx
+++ b/frontend/src/components/HomeActions.tsx
@@ -1,6 +1,6 @@
 import { Suspense, useState } from 'react'
 import { useRecoilState } from 'recoil'
-import { loadingAtom, optimisticDownloadsState } from '../atoms/ui'
+import { loadingAtom } from '../atoms/ui'
 import { useToast } from '../hooks/toast'
 import DownloadDialog from './DownloadDialog'
 import HomeSpeedDial from './HomeSpeedDial'
@@ -8,32 +8,12 @@ import TemplatesEditor from './TemplatesEditor'

 const HomeActions: React.FC = () => {
  const [, setIsLoading] = useRecoilState(loadingAtom)
-  const [optimistic, setOptimistic] = useRecoilState(optimisticDownloadsState)

  const [openDownload, setOpenDownload] = useState(false)
  const [openEditor, setOpenEditor] = useState(false)

  const { pushMessage } = useToast()

-  // it's stupid because it will be overriden on the next server tick
-  const handleOptimisticUpdate = (url: string) => setOptimistic([
-    ...optimistic, {
-      id: url,
-      info: {
-        created_at: new Date().toISOString(),
-        thumbnail: '',
-        title: url,
-        url: url
-      },
-      progress: {
-        eta: Number.MAX_SAFE_INTEGER,
-        percentage: '0%',
-        process_status: 0,
-        speed: 0
-      }
-    }
-  ])
-
  return (
    <>
      <HomeSpeedDial
@@ -47,9 +27,7 @@ const HomeActions: React.FC = () => {
            setOpenDownload(false)
            setIsLoading(true)
          }}
-          // TODO: handle optimistic UI update
          onDownloadStart={(url) => {
-            handleOptimisticUpdate(url)
            pushMessage(`Requested ${url}`, 'info')
            setOpenDownload(false)
            setIsLoading(true)
--- a/frontend/src/components/HomeSpeedDial.tsx
+++ b/frontend/src/components/HomeSpeedDial.tsx
@@ -2,7 +2,6 @@ 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,
@@ -19,7 +18,7 @@ type Props = {
 }

 const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
-  const [listView, setListView] = useRecoilState(listViewState)
+  const [, setListView] = useRecoilState(listViewState)

  const { i18n } = useI18n()
  const { client } = useRPC()
@@ -29,12 +28,12 @@ const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
  return (
    <SpeedDial
      ariaLabel="Home speed dial"
-      sx={{ position: 'absolute', bottom: 64, right: 24 }}
+      sx={{ position: 'absolute', bottom: 32, right: 32 }}
      icon={<SpeedDialIcon />}
    >
      <SpeedDialAction
-        icon={listView ? <ViewAgendaIcon /> : <FormatListBulleted />}
-        tooltipTitle={listView ? 'Card view' : 'Table view'}
+        icon={<FormatListBulleted />}
+        tooltipTitle={`Table view`}
        onClick={() => setListView(state => !state)}
      />
      <SpeedDialAction
--- a/frontend/src/components/LogTerminal.tsx
+++ b/frontend/src/components/LogTerminal.tsx
@@ -1,3 +1,4 @@
+import { Box, CircularProgress, Container, Paper, Typography } from '@mui/material'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { serverURL } from '../atoms/settings'
@@ -6,15 +7,14 @@ import { useI18n } from '../hooks/useI18n'
 const token = localStorage.getItem('token')

 const LogTerminal: React.FC = () => {
-  const [logBuffer, setLogBuffer] = useState<string[]>([])
-  const [isConnecting, setIsConnecting] = useState(true)
-
-  const boxRef = useRef<HTMLDivElement>(null)
-
  const serverAddr = useRecoilValue(serverURL)

  const { i18n } = useI18n()

+  const [logBuffer, setLogBuffer] = useState<string[]>([])
+
+  const boxRef = useRef<HTMLDivElement>(null)
+
  const eventSource = useMemo(
    () => new EventSource(`${serverAddr}/log/sse?token=${token}`),
    [serverAddr]
@@ -23,7 +23,7 @@ const LogTerminal: React.FC = () => {
  useEffect(() => {
    eventSource.addEventListener('log', event => {
      const msg: string[] = JSON.parse(event.data)
-      setLogBuffer(buff => [...buff, ...msg].slice(-500))
+      setLogBuffer(buff => [...buff, ...msg].slice(-100))

      boxRef.current?.scrollTo(0, boxRef.current.scrollHeight)
    })
@@ -32,51 +32,59 @@ const LogTerminal: React.FC = () => {
    return () => eventSource.close()
  }, [eventSource])

-  useEffect(() => {
-    eventSource.onopen = () => setIsConnecting(false)
-  }, [eventSource])
-
  const logEntryStyle = (data: string) => {
-    const sx = {}
-
    if (data.includes("level=ERROR")) {
-      return { ...sx, color: 'red' }
+      return { color: 'red' }
    }
    if (data.includes("level=WARN")) {
-      return { ...sx, color: 'orange' }
+      return { color: 'orange' }
    }
-
-    return sx
+    return {}
  }

  return (
-
-    <div
-      ref={boxRef}
-      style={{
-        fontFamily: 'Roboto Mono',
-        height: '70.5vh',
-        overflowY: 'auto',
-        overflowX: 'auto',
-        fontSize: '13.5px',
-        fontWeight: '600',
-        backgroundColor: 'black',
-        color: 'white',
-        padding: '0.5rem',
-        borderRadius: '0.25rem'
-      }}
-    >
-      {isConnecting ? <div>{'Connecting...'}</div> : <div>{'Connected!'}</div>}
-
-      {logBuffer.length === 0 && <div>{i18n.t('awaitingLogs')}</div>}
-
-      {logBuffer.map((log, idx) => (
-        <div key={idx} style={logEntryStyle(log)}>
-          {log}
-        </div>
-      ))}
-    </div>
-
+    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+      <Paper
+        sx={{
+          p: 2.5,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Typography py={1} variant="h5" color="primary">
+          {i18n.t('logsTitle')}
+        </Typography>
+        {(logBuffer.length === 0) && <Box sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyItems: 'center',
+          alignItems: 'center',
+          gap: 1
+        }}>
+          <CircularProgress color="primary" size={32} />
+          <Typography py={1} variant="subtitle2" >
+            {i18n.t('awaitingLogs')}
+          </Typography>
+        </Box>
+        }
+        <Box
+          ref={boxRef}
+          sx={{
+            fontFamily: 'Roboto Mono',
+            height: '75.5vh',
+            overflowY: 'auto',
+            overflowX: 'auto',
+            fontSize: '15px'
+          }}
+        >
+          {logBuffer.map((log, idx) => (
+            <Box key={idx} sx={logEntryStyle(log)}>
+              {log}
+            </Box>
+          ))}
+        </Box>
+      </Paper>
+    </Container >
  )
 }

--- a/frontend/src/components/SocketSubscriber.tsx
+++ b/frontend/src/components/SocketSubscriber.tsx
@@ -52,7 +52,7 @@ const SocketSubscriber: React.FC<Props> = () => {
            .filter(f => !!f.info.url).sort((a, b) => datetimeCompareFunc(
              b.info.created_at,
              a.info.created_at,
-            )),
+            ))
          )
        )
      }
--- a/frontend/src/components/VersionIndicator.tsx
+++ b/frontend/src/components/VersionIndicator.tsx
@@ -1,38 +0,0 @@
-import { Chip, CircularProgress } from '@mui/material'
-import { useEffect, useState } from 'react'
-import { useRecoilValue } from 'recoil'
-import { serverURL } from '../atoms/settings'
-import { useToast } from '../hooks/toast'
-
-const VersionIndicator: React.FC = () => {
-  const serverAddr = useRecoilValue(serverURL)
-
-  const [version, setVersion] = useState('')
-  const { pushMessage } = useToast()
-
-  const fetchVersion = async () => {
-    const res = await fetch(`${serverAddr}/api/v1/version`, {
-      headers: {
-        'X-Authentication': localStorage.getItem('token') ?? ''
-      }
-    })
-
-    if (!res.ok) {
-      return pushMessage(await res.text(), 'error')
-    }
-
-    setVersion(await res.json())
-  }
-
-  useEffect(() => {
-    fetchVersion()
-  }, [])
-
-  return (
-    version
-      ? <Chip label={`yt-dlp v${version}`} variant="outlined" size="small" />
-      : <CircularProgress size={15} />
-  )
-}
-
-export default VersionIndicator
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -42,21 +42,14 @@ export function toFormatArgs(codes: string[]): string {
  return ''
 }

-export function formatSize(bytes: number): string {
-  const threshold = 1024
-  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+export const formatGiB = (bytes: number) =>
+  `${(bytes / 1_000_000_000).toFixed(0)}GiB`

-  let i = 0
-  while (bytes >= threshold) {
-    bytes /= threshold
-    i = i + 1
-  }
-
-  return `${bytes.toFixed(i == 0 ? 0 : 2)} ${units.at(i)}`
-}
+export const roundMiB = (bytes: number) =>
+  `${(bytes / 1_000_000).toFixed(2)} MiB`

 export const formatSpeedMiB = (val: number) =>
-  `${(val / 1_048_576).toFixed(2)} MiB/s`
+  `${roundMiB(val)}/s`

 export const datetimeCompareFunc = (a: string, b: string) =>
  new Date(a).getTime() - new Date(b).getTime()
--- a/frontend/src/views/Archive.tsx
+++ b/frontend/src/views/Archive.tsx
@@ -41,7 +41,7 @@ import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { ffetch } from '../lib/httpClient'
 import { DirectoryEntry } from '../types'
-import { base64URLEncode, formatSize } from '../utils'
+import { base64URLEncode, roundMiB } from '../utils'

 export default function Downloaded() {
  const [menuPos, setMenuPos] = useState({ x: 0, y: 0 })
@@ -182,7 +182,7 @@ export default function Downloaded() {

  return (
    <Container
-      maxWidth="xl"
+      maxWidth="lg"
      sx={{ mt: 4, mb: 4, height: '100%' }}
      onClick={() => setShowMenu(false)}
    >
@@ -237,7 +237,7 @@ export default function Downloaded() {
                    variant="caption"
                    component="span"
                  >
-                    {formatSize(file.size)}
+                    {roundMiB(file.size)}
                  </Typography>
                  }
                  {!file.isDirectory && <>
@@ -274,8 +274,8 @@ export default function Downloaded() {
        </List>
      </Paper>
      <SpeedDial
-        ariaLabel='archive actions'
-        sx={{ position: 'absolute', bottom: 64, right: 24 }}
+        ariaLabel="SpeedDial basic example"
+        sx={{ position: 'absolute', bottom: 32, right: 32 }}
        icon={<SpeedDialIcon />}
      >
        <SpeedDialAction
--- a/frontend/src/views/Home.tsx
+++ b/frontend/src/views/Home.tsx
@@ -8,7 +8,7 @@ import Splash from '../components/Splash'

 export default function Home() {
  return (
-    <Container maxWidth="xl" sx={{ mt: 2, mb: 8 }}>
+    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
      <LoadingBackdrop />
      <Splash />
      <Downloads />
--- a/frontend/src/views/Settings.tsx
+++ b/frontend/src/views/Settings.tsx
@@ -130,16 +130,16 @@ export default function Settings() {
   * Updates yt-dlp binary via RPC
   */
  const updateBinary = () => {
-    client.updateExecutable().then(() => pushMessage(i18n.t('toastUpdated'), 'success'))
+    client.updateExecutable().then(() => pushMessage(i18n.t('toastUpdated')))
  }

  return (
-    <Container maxWidth="xl" sx={{ mt: 4, mb: 8 }}>
+    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
      <Grid container spacing={3}>
        <Grid item xs={12} md={12} lg={12}>
          <Paper
            sx={{
-              p: 2.5,
+              p: 2,
              display: 'flex',
              flexDirection: 'column',
              minHeight: 240,
@@ -204,7 +204,7 @@ export default function Settings() {
                      label={i18n.t('languageSelect')}
                      onChange={handleLanguageChange}
                    >
-                      {languages.toSorted((a, b) => a.localeCompare(b)).map(l => (
+                      {languages.map(l => (
                        <MenuItem value={l} key={l}>
                          {capitalize(l)}
                        </MenuItem>
--- a/frontend/src/views/Terminal.tsx
+++ b/frontend/src/views/Terminal.tsx
@@ -1,25 +1,8 @@
-import { Container, Paper, Typography } from '@mui/material'
 import LogTerminal from '../components/LogTerminal'
-import { useI18n } from '../hooks/useI18n'

 const Terminal: React.FC = () => {
-  const { i18n } = useI18n()
-
  return (
-    <Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
-      <Paper
-        sx={{
-          p: 2.5,
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        <Typography pb={2} variant="h5" color="primary">
-          {i18n.t('logsTitle')}
-        </Typography>
-        <LogTerminal />
-      </Paper>
-    </Container >
+    <LogTerminal />
  )
 }

--- a/go.mod
+++ b/go.mod
@@ -1,38 +1,43 @@
 module github.com/marcopeocchi/yt-dlp-web-ui

-go 1.22
+go 1.20

 require (
-	github.com/go-chi/chi/v5 v5.0.12
+	github.com/go-chi/chi/v5 v5.0.11
 	github.com/go-chi/cors v1.2.1
-	github.com/golang-jwt/jwt/v5 v5.2.1
-	github.com/google/uuid v1.6.0
+	github.com/golang-jwt/jwt/v5 v5.2.0
+	github.com/google/uuid v1.5.0
 	github.com/gorilla/websocket v1.5.1
+	github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa
 	github.com/reactivex/rxgo/v2 v2.5.0
-	golang.org/x/sys v0.18.0
+	golang.org/x/sys v0.15.0
 	gopkg.in/yaml.v3 v3.0.1
-	modernc.org/sqlite v1.29.5
+	modernc.org/sqlite v1.28.0
 )

 require (
-	github.com/cenkalti/backoff/v4 v4.2.1 // indirect
-	github.com/davecgh/go-spew v1.1.1 // indirect
+	github.com/cenkalti/backoff/v4 v4.0.0 // indirect
+	github.com/davecgh/go-spew v1.1.0 // indirect
 	github.com/dustin/go-humanize v1.0.1 // indirect
-	github.com/emirpasic/gods v1.18.1 // indirect
-	github.com/hashicorp/golang-lru/v2 v2.0.7 // indirect
+	github.com/emirpasic/gods v1.12.0 // indirect
+	github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
-	github.com/ncruces/go-strftime v0.1.9 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
-	github.com/stretchr/objx v0.5.2 // indirect
-	github.com/stretchr/testify v1.9.0 // indirect
-	github.com/teivah/onecontext v1.3.0 // indirect
-	golang.org/x/net v0.22.0 // indirect
-	golang.org/x/sync v0.6.0 // indirect
-	modernc.org/gc/v3 v3.0.0-20240304020402-f0dba7c97c2b // indirect
-	modernc.org/libc v1.47.0 // indirect
+	github.com/stretchr/objx v0.1.0 // indirect
+	github.com/stretchr/testify v1.4.0 // indirect
+	github.com/teivah/onecontext v0.0.0-20200513185103-40f981bfd775 // indirect
+	golang.org/x/mod v0.14.0 // indirect
+	golang.org/x/net v0.19.0 // indirect
+	golang.org/x/tools v0.16.1 // indirect
+	gopkg.in/yaml.v2 v2.2.2 // indirect
+	lukechampine.com/uint128 v1.3.0 // indirect
+	modernc.org/cc/v3 v3.41.0 // indirect
+	modernc.org/ccgo/v3 v3.16.15 // indirect
+	modernc.org/libc v1.38.0 // indirect
 	modernc.org/mathutil v1.6.0 // indirect
 	modernc.org/memory v1.7.2 // indirect
+	modernc.org/opt v0.1.3 // indirect
 	modernc.org/strutil v1.2.0 // indirect
 	modernc.org/token v1.1.0 // indirect
 )
--- a/go.sum
+++ b/go.sum
@@ -1,109 +1,100 @@
+github.com/cenkalti/backoff/v4 v4.0.0 h1:6VeaLF9aI+MAUQ95106HwWzYZgJJpZ4stumjj6RFYAU=
 github.com/cenkalti/backoff/v4 v4.0.0/go.mod h1:eEew/i+1Q6OrCDZh3WiXYv3+nJwBASZ8Bog/87DQnVg=
-github.com/cenkalti/backoff/v4 v4.2.1 h1:y4OZtCnogmCPw98Zjyt5a6+QwPLGkiQsYW5oUqylYbM=
-github.com/cenkalti/backoff/v4 v4.2.1/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
+github.com/davecgh/go-spew v1.1.0 h1:ZDRjVQ15GmhC3fiQ8ni8+OwkZQO4DARzQgrnXU1Liz8=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
-github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
 github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
+github.com/emirpasic/gods v1.12.0 h1:QAUIPSaCu4G+POclxeqb3F+WPpdKqFGlw36+yOzGlrg=
 github.com/emirpasic/gods v1.12.0/go.mod h1:YfzfFFoVP/catgzJb4IKIqXjX78Ha8FMSDh3ymbK86o=
-github.com/emirpasic/gods v1.18.1 h1:FXtiHYKDGKCW2KzwZKx0iC0PQmdlorYgdFG9jPXJ1Bc=
-github.com/emirpasic/gods v1.18.1/go.mod h1:8tpGGwCnJ5H4r6BWwaV6OrWmMoPhUl5jm/FMNAnJvWQ=
-github.com/go-chi/chi/v5 v5.0.12 h1:9euLV5sTrTNTRUU9POmDUvfxyj6LAABLUcEWO+JJb4s=
-github.com/go-chi/chi/v5 v5.0.12/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
+github.com/go-chi/chi/v5 v5.0.11 h1:BnpYbFZ3T3S1WMpD79r7R5ThWX40TaFB7L31Y8xqSwA=
+github.com/go-chi/chi/v5 v5.0.11/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
 github.com/go-chi/cors v1.2.1 h1:xEC8UT3Rlp2QuWNEr4Fs/c2EAGVKBwy/1vHx3bppil4=
 github.com/go-chi/cors v1.2.1/go.mod h1:sSbTewc+6wYHBBCW7ytsFSn836hqM7JxpglAy2Vzc58=
-github.com/golang-jwt/jwt/v5 v5.2.1 h1:OuVbFODueb089Lh128TAcimifWaLhJwVflnrgM17wHk=
-github.com/golang-jwt/jwt/v5 v5.2.1/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
+github.com/golang-jwt/jwt/v5 v5.2.0 h1:d/ix8ftRUorsN+5eMIlF4T6J8CAt9rch3My2winC1Jw=
+github.com/golang-jwt/jwt/v5 v5.2.0/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
+github.com/google/go-cmp v0.5.9 h1:O2Tfq5qg4qc4AmwVlvv0oLiVAGB7enBSJ2x2DqQFi38=
 github.com/google/pprof v0.0.0-20221118152302-e6195bd50e26 h1:Xim43kblpZXfIBQsbuBVKCudVG457BR2GZFIz3uw3hQ=
-github.com/google/pprof v0.0.0-20221118152302-e6195bd50e26/go.mod h1:dDKJzRmX4S37WGHujM7tX//fmj1uioxKzKxz3lo4HJo=
-github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
-github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/google/uuid v1.5.0 h1:1p67kYwdtXjb0gL0BPiP1Av9wiZPo5A8z2cWkTZ+eyU=
+github.com/google/uuid v1.5.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/gorilla/websocket v1.5.1 h1:gmztn0JnHVt9JZquRuzLw3g4wouNVzKL15iLr/zn/QY=
 github.com/gorilla/websocket v1.5.1/go.mod h1:x3kM2JMyaluk02fnUJpQuwD2dCS5NDG2ZHL0uE0tcaY=
-github.com/hashicorp/golang-lru/v2 v2.0.7 h1:a+bsQ5rvGLjzHuww6tVxozPZFVghXaHOwFs4luLUK2k=
-github.com/hashicorp/golang-lru/v2 v2.0.7/go.mod h1:QeFd9opnmA6QUJc5vARoKUSoFhyfM2/ZepoAG6RGpeM=
+github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 h1:Z9n2FFNUXsshfwJMBgNA0RU6/i7WVaAegv3PtuIHPMs=
+github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51/go.mod h1:CzGEWj7cYgsdH8dAjBGEr58BoE7ScuLd+fwFZ44+/x8=
 github.com/kr/pretty v0.1.0 h1:L/CwN0zerZDmRFUapSPitk6f+Q3+0za1rQkzVuMiMFI=
 github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
 github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
 github.com/kr/text v0.1.0 h1:45sCR5RtlFHMR4UwH9sdQ5TC8v0qDQCHnXt+kaKSTVE=
 github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
+github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa h1:uaAQLGhN4SesB9inOQ1Q6EH+BwTWHQOvwhR0TIJvnYc=
+github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa/go.mod h1:RvfVo/6Sbnfra9kkvIxDW8NYOOaYsHjF0DdtMCs9cdo=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
-github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
-github.com/ncruces/go-strftime v0.1.9 h1:bY0MQC28UADQmHmaF5dgpLmImcShSi2kHU9XLdhx/f4=
-github.com/ncruces/go-strftime v0.1.9/go.mod h1:Fwc5htZGVVkseilnfgOVb9mKy6w1naJmn9CehxcKcls=
+github.com/mattn/go-sqlite3 v1.14.16 h1:yOQRA0RpS5PFz/oikGwBEqvAWhWg5ufRz4ETLjwpU1Y=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/reactivex/rxgo/v2 v2.5.0 h1:FhPgHwX9vKdNQB2gq9EPt+EKk9QrrzoeztGbEEnZam4=
 github.com/reactivex/rxgo/v2 v2.5.0/go.mod h1:bs4fVZxcb5ZckLIOeIeVH942yunJLWDABWGbrHAW+qU=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
+github.com/stretchr/objx v0.1.0 h1:4G4v2dO3VZwixGIRoQ5Lfboy6nUhCyYzaqnIAPPhYs4=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
-github.com/stretchr/objx v0.5.2 h1:xuMeJ0Sdp5ZMRXx/aWO6RZxdr3beISkG5/G/aIRr3pY=
-github.com/stretchr/objx v0.5.2/go.mod h1:FRsXN1f5AsAjCGJKqEizvkpNtU+EGNCLh3NxZ/8L+MA=
 github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
+github.com/stretchr/testify v1.4.0 h1:2E4SXV/wtOkTonXsotYi4li6zVWxYlZuYNCXe9XRJyk=
 github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
-github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
-github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/teivah/onecontext v0.0.0-20200513185103-40f981bfd775 h1:BLNsFR8l/hj/oGjnJXkd4Vi3s4kQD3/3x8HSAE4bzN0=
 github.com/teivah/onecontext v0.0.0-20200513185103-40f981bfd775/go.mod h1:XUZ4x3oGhWfiOnUvTslnKKs39AWUct3g3yJvXTQSJOQ=
-github.com/teivah/onecontext v1.3.0 h1:tbikMhAlo6VhAuEGCvhc8HlTnpX4xTNPTOseWuhO1J0=
-github.com/teivah/onecontext v1.3.0/go.mod h1:hoW1nmdPVK/0jrvGtcx8sCKYs2PiS4z0zzfdeuEVyb0=
 go.uber.org/goleak v1.1.10 h1:z+mqJhf6ss6BSfSM671tgKyZBFPTTJM+HLxnhPC3wu0=
 go.uber.org/goleak v1.1.10/go.mod h1:8a7PlsEVH3e/a/GLqe5IIrQx6GzcnRmZEufDUTk4A7A=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/lint v0.0.0-20190930215403-16217165b5de h1:5hukYrvBGR8/eNkX5mdUezrA6JiaEZDtJb9Ei+1LlBs=
 golang.org/x/lint v0.0.0-20190930215403-16217165b5de/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
-golang.org/x/mod v0.16.0 h1:QX4fJ0Rr5cPQCF7O9lh9Se4pmwfwskqZfq5moyldzic=
-golang.org/x/mod v0.16.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
+golang.org/x/mod v0.14.0 h1:dGoOF9QVLYng8IHTm7BAyWqCqSheQ5pYWGhzW00YJr0=
+golang.org/x/mod v0.14.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
 golang.org/x/net v0.0.0-20190311183353-d8887717615a/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
-golang.org/x/net v0.22.0 h1:9sGLhx7iRIHEiX0oAJ3MRZMUCElJgy7Br1nO+AMN3Tc=
-golang.org/x/net v0.22.0/go.mod h1:JKghWKKOSdJwpW2GEx0Ja7fmaKnMsbu+MWVZTokSYmg=
+golang.org/x/net v0.19.0 h1:zTwKpTd2XuCqf8huc7Fo2iSy+4RHPd10s4KzeTnVr1c=
+golang.org/x/net v0.19.0/go.mod h1:CfAk/cbD4CthTvqiEl8NpboMuiuOYsAr/7NOjZJtv1U=
 golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20190911185100-cd5d95a43a6e/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.6.0 h1:5BMeUDZ7vkXGfEr1x9B4bRcTH4lpkTkpdh0T/J+qjbQ=
-golang.org/x/sync v0.6.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
+golang.org/x/sync v0.5.0 h1:60k92dhOjHxJkrqnwsfl8KuaHbn/5dl0lUPUklKo3qE=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.18.0 h1:DBdB3niSjOA/O0blCZBqDefyWNYveAYMNF1Wum0DYQ4=
-golang.org/x/sys v0.18.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.15.0 h1:h48lPFYpsTvQJZF4EKyI4aLHaev3CxivZmv7yZig9pc=
+golang.org/x/sys v0.15.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/tools v0.0.0-20190311212946-11955173bddd/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
 golang.org/x/tools v0.0.0-20191108193012-7d206e10da11/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
-golang.org/x/tools v0.19.0 h1:tfGCXNR1OsFG+sVdLAitlpjAvD/I6dHDKnYrpEZUHkw=
-golang.org/x/tools v0.19.0/go.mod h1:qoJWxmGSIBmAeriMx19ogtrEPrGtDbPK634QFIcLAhc=
+golang.org/x/tools v0.16.1 h1:TLyB3WofjdOEepBHAU20JdNC1Zbg87elYofWYAY5oZA=
+golang.org/x/tools v0.16.1/go.mod h1:kYVVN6I1mBNoB1OX+noeBjbRk4IUEPa7JJ+TJMEooJ0=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127 h1:qIbj1fsPNlZgppZ+VLlY7N33q108Sa+fhmuc+sWQYwY=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v2 v2.2.2 h1:ZCJp+EgiOT7lHqUV2J862kp8Qj64Jo6az82+3Td9dZw=
 gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
-modernc.org/cc/v4 v4.19.5 h1:QlsZyQ1zf78DGeqnQ9ILi9hXyMdoC5e1qoGNUyBjHQw=
-modernc.org/cc/v4 v4.19.5/go.mod h1:HM7VJTZbUCR3rV8EYBi9wxnJ0ZBRiGE5OeGXNA0IsLQ=
-modernc.org/ccgo/v4 v4.13.0 h1:99E8QHRoPrXN8VpS0zgAgJ5nSjpXrPKpsJIMvGL/2Oc=
-modernc.org/ccgo/v4 v4.13.0/go.mod h1:Td6RI9W9G2ZpKHaJ7UeGEiB2aIpoDqLBnm4wtkbJTbQ=
-modernc.org/fileutil v1.3.0 h1:gQ5SIzK3H9kdfai/5x41oQiKValumqNTDXMvKo62HvE=
-modernc.org/fileutil v1.3.0/go.mod h1:XatxS8fZi3pS8/hKG2GH/ArUogfxjpEKs3Ku3aK4JyQ=
-modernc.org/gc/v2 v2.4.1 h1:9cNzOqPyMJBvrUipmynX0ZohMhcxPtMccYgGOJdOiBw=
-modernc.org/gc/v2 v2.4.1/go.mod h1:wzN5dK1AzVGoH6XOzc3YZ+ey/jPgYHLuVckd62P0GYU=
-modernc.org/gc/v3 v3.0.0-20240304020402-f0dba7c97c2b h1:BnN1t+pb1cy61zbvSUV7SeI0PwosMhlAEi/vBY4qxp8=
-modernc.org/gc/v3 v3.0.0-20240304020402-f0dba7c97c2b/go.mod h1:Qz0X07sNOR1jWYCrJMEnbW/X55x206Q7Vt4mz6/wHp4=
-modernc.org/libc v1.47.0 h1:BXrzId9fOOkBtS+uFQ5aZyVGmt7WcSEPrXF5Kwsho90=
-modernc.org/libc v1.47.0/go.mod h1:gzCncw0a74aCiVqHeWAYHHaW//fkSHHS/3S/gfhLlCI=
+lukechampine.com/uint128 v1.3.0 h1:cDdUVfRwDUDovz610ABgFD17nXD4/uDgVHl2sC3+sbo=
+lukechampine.com/uint128 v1.3.0/go.mod h1:c4eWIwlEGaxC/+H1VguhU4PHXNWDCDMUlWdIWl2j1gk=
+modernc.org/cc/v3 v3.41.0 h1:QoR1Sn3YWlmA1T4vLaKZfawdVtSiGx8H+cEojbC7v1Q=
+modernc.org/cc/v3 v3.41.0/go.mod h1:Ni4zjJYJ04CDOhG7dn640WGfwBzfE0ecX8TyMB0Fv0Y=
+modernc.org/ccgo/v3 v3.16.15 h1:KbDR3ZAVU+wiLyMESPtbtE/Add4elztFyfsWoNTgxS0=
+modernc.org/ccgo/v3 v3.16.15/go.mod h1:yT7B+/E2m43tmMOT51GMoM98/MtHIcQQSleGnddkUNI=
+modernc.org/ccorpus v1.11.6 h1:J16RXiiqiCgua6+ZvQot4yUuUy8zxgqbqEEUuGPlISk=
+modernc.org/httpfs v1.0.6 h1:AAgIpFZRXuYnkjftxTAZwMIiwEqAfk8aVB2/oA6nAeM=
+modernc.org/libc v1.38.0 h1:o4Lpk0zNDSdsjfEXnF1FGXWQ9PDi1NOdWcLP5n13FGo=
+modernc.org/libc v1.38.0/go.mod h1:YAXkAZ8ktnkCKaN9sw/UDeUVkGYJ/YquGO4FTi5nmHE=
 modernc.org/mathutil v1.6.0 h1:fRe9+AmYlaej+64JsEEhoWuAYBkOtQiMEU7n/XgfYi4=
 modernc.org/mathutil v1.6.0/go.mod h1:Ui5Q9q1TR2gFm0AQRqQUaBWFLAhQpCwNcuhBOSedWPo=
 modernc.org/memory v1.7.2 h1:Klh90S215mmH8c9gO98QxQFsY+W451E8AnzjoE2ee1E=
 modernc.org/memory v1.7.2/go.mod h1:NO4NVCQy0N7ln+T9ngWqOQfi7ley4vpwvARR+Hjw95E=
 modernc.org/opt v0.1.3 h1:3XOZf2yznlhC+ibLltsDGzABUGVx8J6pnFMS3E4dcq4=
 modernc.org/opt v0.1.3/go.mod h1:WdSiB5evDcignE70guQKxYUl14mgWtbClRi5wmkkTX0=
-modernc.org/sortutil v1.2.0 h1:jQiD3PfS2REGJNzNCMMaLSp/wdMNieTbKX920Cqdgqc=
-modernc.org/sortutil v1.2.0/go.mod h1:TKU2s7kJMf1AE84OoiGppNHJwvB753OYfNl2WRb++Ss=
-modernc.org/sqlite v1.29.5 h1:8l/SQKAjDtZFo9lkJLdk8g9JEOeYRG4/ghStDCCTiTE=
-modernc.org/sqlite v1.29.5/go.mod h1:S02dvcmm7TnTRvGhv8IGYyLnIt7AS2KPaB1F/71p75U=
+modernc.org/sqlite v1.28.0 h1:Zx+LyDDmXczNnEQdvPuEfcFVA2ZPyaD7UCZDjef3BHQ=
+modernc.org/sqlite v1.28.0/go.mod h1:Qxpazz0zH8Z1xCFyi5GSL3FzbtZ3fvbjmywNogldEW0=
 modernc.org/strutil v1.2.0 h1:agBi9dp1I+eOnxXeiZawM8F4LawKv4NzGWSaLfyeNZA=
 modernc.org/strutil v1.2.0/go.mod h1:/mdcBmfOibveCTBxUl5B5l6W+TTH1FXPLHZE6bTosX0=
+modernc.org/tcl v1.15.2 h1:C4ybAYCGJw968e+Me18oW55kD/FexcHbqH2xak1ROSY=
 modernc.org/token v1.1.0 h1:Xl7Ap9dKaEs5kLoOQeQmPWevfnk/DM5qcLcYlA8ys6Y=
 modernc.org/token v1.1.0/go.mod h1:UGzOrNV1mAFSEB63lOFHIpNRUVMvYTc6yu1SMY/XTDM=
+modernc.org/z v1.7.3 h1:zDJf6iHjrnB+WRD88stbXokugjyc0/pB91ri1gO6LZY=
--- a/main.go
+++ b/main.go
@@ -30,9 +30,6 @@ var (
 	userFromEnv = os.Getenv("USERNAME")
 	passFromEnv = os.Getenv("PASSWORD")

-	logFile           string
-	enableFileLogging bool
-
 	//go:embed frontend/dist/index.html
 	//go:embed frontend/dist/assets/*
 	frontend embed.FS
@@ -50,9 +47,6 @@ func init() {
 	flag.StringVar(&sessionFilePath, "session", ".", "session file path")
 	flag.StringVar(&localDatabasePath, "db", "local.db", "local database path")

-	flag.BoolVar(&enableFileLogging, "fl", false, "enable outputting logs to a file")
-	flag.StringVar(&logFile, "lf", "yt-dlp-webui.log", "set log file location")
-
 	flag.BoolVar(&requireAuth, "auth", false, "Enable RPC authentication")
 	flag.StringVar(&username, "user", userFromEnv, "Username required for auth")
 	flag.StringVar(&password, "pass", passFromEnv, "Password required for auth")
@@ -85,12 +79,5 @@ func main() {
 		log.Println(cli.BgRed, "config", cli.Reset, err)
 	}

-	server.RunBlocking(&server.RunConfig{
-		Host:        c.Host,
-		Port:        c.Port,
-		App:         frontend,
-		DBPath:      localDatabasePath,
-		FileLogging: enableFileLogging,
-		LogFile:     logFile,
-	})
+	server.RunBlocking(c.Host, c.Port, frontend, localDatabasePath)
 }
--- a/server/config/parser.go
+++ b/server/config/parser.go
@@ -35,7 +35,6 @@ func Instance() *Config {
 	return instance
 }

-// Initialises the Config struct given its config file
 func (c *Config) LoadFile(filename string) error {
 	fd, err := os.Open(filename)
 	if err != nil {
--- a/server/dbutils/migrate.go
+++ b/server/dbutils/migrate.go
@@ -5,7 +5,6 @@ import (
 	"database/sql"
 )

-// Run the table migration
 func AutoMigrate(ctx context.Context, db *sql.DB) error {
 	conn, err := db.Conn(ctx)
 	if err != nil {
--- a/server/handlers/archive.go
+++ b/server/handlers/archive.go
@@ -17,11 +17,6 @@ import (
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/utils"
 )

-/*
-	File based operation handlers (should be moved to rest/handlers.go) or in
-	a entirely self-contained package
-*/
-
 type DirectoryEntry struct {
 	Name        string    `json:"name"`
 	Path        string    `json:"path"`
--- a/server/internal/process.go
+++ b/server/internal/process.go
@@ -6,7 +6,6 @@ import (
 	"fmt"
 	"log/slog"
 	"regexp"
-	"slices"
 	"sync"
 	"syscall"

@@ -16,6 +15,7 @@ import (
 	"strings"
 	"time"

+	"github.com/marcopeocchi/fazzoletti/slices"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/rx"
@@ -67,13 +67,13 @@ type DownloadOutput struct {
 func (p *Process) Start() {
 	// escape bash variable escaping and command piping, you'll never know
 	// what they might come with...
-	p.Params = slices.DeleteFunc(p.Params, func(e string) bool {
+	p.Params = slices.Filter(p.Params, func(e string) bool {
 		match, _ := regexp.MatchString(`(\$\{)|(\&\&)`, e)
-		return match
+		return !match
 	})

-	p.Params = slices.DeleteFunc(p.Params, func(e string) bool {
-		return e == ""
+	p.Params = slices.Filter(p.Params, func(e string) bool {
+		return e != ""
 	})

 	out := DownloadOutput{
@@ -101,7 +101,7 @@ func (p *Process) Start() {
 	}

 	// if user asked to manually override the output path...
-	if !(slices.Contains(params, "-P") || slices.Contains(params, "--paths")) {
+	if !(slices.Includes(params, "-P") || slices.Includes(params, "--paths")) {
 		params = append(params, "-o")
 		params = append(params, fmt.Sprintf("%s/%s", out.Path, out.Filename))
 	}
@@ -236,6 +236,10 @@ func (p *Process) GetFormatsSync() (DownloadFormats, error) {

 	wg.Add(2)

+	if err != nil {
+		return DownloadFormats{}, err
+	}
+
 	log.Println(
 		cli.BgRed, "Metadata", cli.Reset,
 		cli.BgBlue, "Formats", cli.Reset,
@@ -270,12 +274,6 @@ func (p *Process) GetFormatsSync() (DownloadFormats, error) {
 }

 func (p *Process) SetPending() {
-	// Since video's title isn't available yet, fill in with the URL.
-	p.Info = DownloadInfo{
-		URL:       p.Url,
-		Title:     p.Url,
-		CreatedAt: time.Now(),
-	}
 	p.Progress.Status = StatusPending
 }

--- a/server/internal/stack.go
+++ b/server/internal/stack.go
@@ -1,37 +1,33 @@
 package internal

-type Node[T any] struct {
-	Value T
-}
-
 type Stack[T any] struct {
-	Nodes []*Node[T]
-	count int
+	Elements []*T
+	count    int
 }

 func NewStack[T any]() *Stack[T] {
 	return &Stack[T]{
-		Nodes: make([]*Node[T], 10),
+		Elements: make([]*T, 10),
 	}
 }

 func (s *Stack[T]) Push(val T) {
-	if s.count >= len(s.Nodes) {
-		Nodes := make([]*Node[T], len(s.Nodes)*2)
-		copy(Nodes, s.Nodes)
-		s.Nodes = Nodes
+	if s.count >= len(s.Elements) {
+		Elements := make([]*T, len(s.Elements)*2)
+		copy(Elements, s.Elements)
+		s.Elements = Elements
 	}
-	s.Nodes[s.count] = &Node[T]{Value: val}
+	s.Elements[s.count] = &val
 	s.count++
 }

-func (s *Stack[T]) Pop() *Node[T] {
+func (s *Stack[T]) Pop() *T {
 	if s.count == 0 {
 		return nil
 	}
-	node := s.Nodes[s.count-1]
+	Element := s.Elements[s.count-1]
 	s.count--
-	return node
+	return Element
 }

 func (s *Stack[T]) IsEmpty() bool {
--- a/server/logging/file_logger.go
+++ b/server/logging/file_logger.go
@@ -1,80 +0,0 @@
-package logging
-
-import (
-	"compress/gzip"
-	"io"
-	"os"
-	"sync"
-	"time"
-)
-
-// implements io.Writer interface
-type LogRotateWriter struct {
-	mu       sync.Mutex
-	fd       *os.File
-	filename string
-}
-
-func NewRotableLogger(filename string) (*LogRotateWriter, error) {
-	fd, err := os.Create(filename)
-	if err != nil {
-		return nil, err
-	}
-	w := &LogRotateWriter{filename: filename, fd: fd}
-	return w, nil
-}
-
-func (w *LogRotateWriter) Write(b []byte) (int, error) {
-	w.mu.Lock()
-	defer w.mu.Unlock()
-	return w.fd.Write(b)
-}
-
-func (w *LogRotateWriter) Rotate() error {
-	var err error
-	w.mu.Lock()
-
-	gzFile, err := os.Create(w.filename + "." + time.Now().Format(time.RFC3339) + ".gz")
-	if err != nil {
-		return err
-	}
-
-	data, err := io.ReadAll(w.fd)
-	if err != nil {
-		return err
-	}
-
-	defer func() {
-		w.mu.Unlock()
-		w.gzipLog(gzFile, &data)
-	}()
-
-	_, err = os.Stat(w.filename)
-	if err != nil {
-		return err
-	}
-
-	if w.fd != nil {
-		err = w.fd.Close()
-		w.fd = nil
-		if err != nil {
-			return err
-		}
-	}
-
-	err = os.Remove(w.filename)
-	if err != nil {
-		return err
-	}
-
-	w.fd, err = os.Create(w.filename)
-	return err
-}
-
-func (w *LogRotateWriter) gzipLog(wr io.Writer, data *[]byte) error {
-	if _, err := gzip.NewWriter(wr).Write(*data); err != nil {
-		return err
-	}
-
-	return nil
-}
--- a/server/logging/observable_logger.go
+++ b/server/logging/observable_logger.go
@@ -20,9 +20,7 @@ func NewObservableLogger() *ObservableLogger {
 }

 func (o *ObservableLogger) Write(p []byte) (n int, err error) {
-	go func() {
-		logsChan <- rxgo.Of(string(p))
-	}()
+	logsChan <- rxgo.Of(string(p))

 	n = len(p)
 	err = nil
--- a/server/middleware/jwt.go
+++ b/server/middleware/jwt.go
@@ -39,9 +39,6 @@ func validateToken(tokenValue string) error {
 	return nil
 }

-// Authentication does NOT use http-Only cookies since there's not risk for XSS
-// By exposing the server through https it's completely safe to use httpheaders
-
 func Authenticated(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		token := r.Header.Get("X-Authentication")
--- a/server/middleware/spa_handler.go
+++ b/server/middleware/spa_handler.go
@@ -0,0 +1,93 @@
+package middlewares
+
+import (
+	"fmt"
+	"io"
+	"io/fs"
+	"mime"
+	"net/http"
+	"os"
+	"path/filepath"
+	"strings"
+)
+
+type SpaHandler struct {
+	Entrypoint string
+	Filesystem fs.FS
+	routes     []string
+}
+
+func NewSpaHandler(index string, fs fs.FS) *SpaHandler {
+	return &SpaHandler{
+		Entrypoint: index,
+		Filesystem: fs,
+	}
+}
+
+func (s *SpaHandler) AddClientRoute(route string) *SpaHandler {
+	s.routes = append(s.routes, route)
+	return s
+}
+
+// Handler for serving a compiled react frontend
+// each client-side routes must be provided
+func (s *SpaHandler) Handler() http.HandlerFunc {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if r.Method != http.MethodGet {
+			http.Error(
+				w,
+				http.StatusText(http.StatusMethodNotAllowed),
+				http.StatusMethodNotAllowed,
+			)
+			return
+		}
+
+		path := filepath.Clean(r.URL.Path)
+
+		// basically all frontend routes are needed :/
+		hasRoute := false
+		for _, route := range s.routes {
+			hasRoute = strings.HasPrefix(path, route)
+			if hasRoute {
+				break
+			}
+		}
+
+		if path == "/" || hasRoute {
+			path = s.Entrypoint
+		}
+
+		path = strings.TrimPrefix(path, "/")
+
+		file, err := s.Filesystem.Open(path)
+
+		if err != nil {
+			if os.IsNotExist(err) {
+				http.NotFound(w, r)
+				return
+			}
+			http.Error(
+				w,
+				http.StatusText(http.StatusInternalServerError),
+				http.StatusInternalServerError,
+			)
+			return
+		}
+
+		contentType := mime.TypeByExtension(filepath.Ext(path))
+		w.Header().Set("Content-Type", contentType)
+
+		if strings.HasPrefix(path, "assets/") {
+			w.Header().Set("Cache-Control", "public, max-age=2592000")
+		}
+
+		stat, err := file.Stat()
+		if err == nil && stat.Size() > 0 {
+			w.Header().Set("Content-Length", fmt.Sprintf("%d", stat.Size()))
+		}
+
+		w.WriteHeader(http.StatusOK)
+
+		io.Copy(w, file)
+	})
+}
--- a/server/rest/container.go
+++ b/server/rest/container.go
@@ -26,10 +26,12 @@ func ApplyRouter(db *sql.DB, mdb *internal.MemoryDB, mq *internal.MessageQueue)
 		}
 		r.Post("/exec", h.Exec())
 		r.Get("/running", h.Running())
-		r.Get("/version", h.GetVersion())
 		r.Post("/cookies", h.SetCookies())
 		r.Post("/template", h.AddTemplate())
 		r.Get("/template/all", h.GetTemplates())
 		r.Delete("/template/{id}", h.DeleteTemplate())
+
+		r.Get("/tree", h.DirectoryTree())
+		r.Get("/d/{id}", h.DownloadFile())
 	}
 }
--- a/server/rest/handlers.go
+++ b/server/rest/handlers.go
@@ -2,7 +2,10 @@ package rest

 import (
 	"encoding/json"
+	"io"
 	"net/http"
+	"os"
+	"path/filepath"

 	"github.com/go-chi/chi/v5"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
@@ -12,10 +15,6 @@ type Handler struct {
 	service *Service
 }

-/*
-	REST version of the JSON-RPC interface
-*/
-
 func (h *Handler) Exec() http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		defer r.Body.Close()
@@ -159,20 +158,54 @@ func (h *Handler) DeleteTemplate() http.HandlerFunc {
 	}
 }

-func (h *Handler) GetVersion() http.HandlerFunc {
+func (h *Handler) DirectoryTree() http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		defer r.Body.Close()

 		w.Header().Set("Content-Type", "application/json")

-		version, err := h.service.GetVersion(r.Context())
+		tree, err := h.service.DirectoryTree(r.Context())
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}

-		if err := json.NewEncoder(w).Encode(version); err != nil {
+		err = json.NewEncoder(w).Encode(tree)
+		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 		}
 	}
 }
+
+func (h *Handler) DownloadFile() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		defer r.Body.Close()
+
+		w.Header().Set("Content-Type", "application/json")
+
+		id := chi.URLParam(r, "id")
+
+		path, err := h.service.DownloadFile(r.Context(), id)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		w.Header().Add(
+			"Content-Disposition",
+			"inline; filename="+filepath.Base(*path),
+		)
+		w.Header().Set(
+			"Content-Type",
+			"application/octet-stream",
+		)
+
+		fd, err := os.Open(*path)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		io.Copy(w, fd)
+	}
+}
--- a/server/rest/service.go
+++ b/server/rest/service.go
@@ -6,12 +6,10 @@ import (
 	"errors"
 	"log/slog"
 	"os"
-	"os/exec"
-	"time"

 	"github.com/google/uuid"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/sys"
 )

 type Service struct {
@@ -122,22 +120,15 @@ func (s *Service) DeleteTemplate(ctx context.Context, id string) error {
 	return err
 }

-func (s *Service) GetVersion(ctx context.Context) (string, error) {
-	ch := make(chan string, 1)
-
-	c, cancel := context.WithTimeout(ctx, time.Second*10)
-	defer cancel()
-
-	cmd := exec.CommandContext(c, config.Instance().DownloaderPath, "--version")
-	go func() {
-		stdout, _ := cmd.Output()
-		ch <- string(stdout)
-	}()
-
-	select {
-	case <-c.Done():
-		return "", errors.New("requesting yt-dlp version took too long")
-	case res := <-ch:
-		return res, nil
-	}
+func (s *Service) DirectoryTree(ctx context.Context) (*internal.Stack[sys.FSNode], error) {
+	return sys.DirectoryTree()
+}
+
+func (s *Service) DownloadFile(ctx context.Context, id string) (*string, error) {
+	p, err := s.mdb.Get(id)
+	if err != nil {
+		return nil, err
+	}
+
+	return &p.Output.Path, nil
 }
--- a/server/rpc/handlers.go
+++ b/server/rpc/handlers.go
@@ -14,7 +14,6 @@ var upgrader = websocket.Upgrader{
 	},
 }

-// WebSockets JSON-RPC handler
 func WebSocket(w http.ResponseWriter, r *http.Request) {
 	c, err := upgrader.Upgrade(w, r, nil)
 	if err != nil {
@@ -48,7 +47,6 @@ func WebSocket(w http.ResponseWriter, r *http.Request) {
 	}
 }

-// HTTP-POST JSON-RPC handler
 func Post(w http.ResponseWriter, r *http.Request) {
 	defer r.Body.Close()

--- a/server/rpc/service.go
+++ b/server/rpc/service.go
@@ -140,7 +140,7 @@ func (s *Service) FreeSpace(args NoArgs, free *uint64) error {
 }

 // Return a flattned tree of the download directory
-func (s *Service) DirectoryTree(args NoArgs, tree *[]string) error {
+func (s *Service) DirectoryTree(args NoArgs, tree *internal.Stack[sys.FSNode]) error {
 	dfsTree, err := sys.DirectoryTree()
 	if dfsTree != nil {
 		*tree = *dfsTree
--- a/server/rpc/wrapper.go
+++ b/server/rpc/wrapper.go
@@ -6,16 +6,13 @@ import (
 	"net/rpc/jsonrpc"
 )

-// Wrapper for jsonrpc.ServeConn that simplifies its usage
+// Wrapper for HTTP RPC request that implements io.Reader interface
 type rpcRequest struct {
 	r    io.Reader
 	rw   io.ReadWriter
 	done chan bool
 }

-// Takes a reader that can be an *http.Request or anthing that implements
-// io.ReadWriter interface.
-// Call() will perform the jsonRPC call and write or read from the ReadWriter
 func newRequest(r io.Reader) *rpcRequest {
 	var buf bytes.Buffer
 	done := make(chan bool)
--- a/server/rx/extensions.go
+++ b/server/rx/extensions.go
@@ -6,9 +6,6 @@ import "time"
 //
 // Debounce emits the most recently emitted value from the source
 // withing the timespan set by the span time.Duration
-//
-// Soon it will be deprecated since it doesn't add anything useful.
-// (It lowers the CPU usage by a negligible margin)
 func Sample(span time.Duration, source chan []byte, done chan struct{}, fn func(e []byte)) {
 	var (
 		item   []byte
--- a/server/server.go
+++ b/server/server.go
@@ -7,12 +7,10 @@ import (
 	"io"
 	"io/fs"
 	"log/slog"
-	"net"
 	"net/http"
 	"net/rpc"
 	"os"
 	"os/signal"
-	"strings"
 	"syscall"
 	"time"

@@ -30,15 +28,6 @@ import (
 	_ "modernc.org/sqlite"
 )

-type RunConfig struct {
-	Host        string
-	Port        int
-	App         fs.FS
-	DBPath      string
-	LogFile     string
-	FileLogging bool
-}
-
 type serverConfig struct {
 	frontend fs.FS
 	logger   *slog.Logger
@@ -49,37 +38,19 @@ type serverConfig struct {
 	mq       *internal.MessageQueue
 }

-func RunBlocking(cfg *RunConfig) {
+func RunBlocking(host string, port int, frontend fs.FS, dbPath string) {
 	var mdb internal.MemoryDB

-	logWriters := []io.Writer{
-		os.Stdout,
-		logging.NewObservableLogger(),
-	}
-
-	if cfg.FileLogging {
-		logger, err := logging.NewRotableLogger(cfg.LogFile)
-		if err != nil {
-			panic(err)
-		}
-
-		go func() {
-			for {
-				time.Sleep(time.Hour * 24)
-				logger.Rotate()
-			}
-		}()
-
-		logWriters = append(logWriters, logger)
-	}
-
 	logger := slog.New(
-		slog.NewTextHandler(io.MultiWriter(logWriters...), &slog.HandlerOptions{}),
+		slog.NewTextHandler(
+			io.MultiWriter(os.Stdout, logging.NewObservableLogger()),
+			nil,
+		),
 	)

 	mdb.Restore(logger)

-	db, err := sql.Open("sqlite", cfg.DBPath)
+	db, err := sql.Open("sqlite", dbPath)
 	if err != nil {
 		logger.Error("failed to open database", slog.String("err", err.Error()))
 	}
@@ -93,10 +64,10 @@ func RunBlocking(cfg *RunConfig) {
 	go mq.Subscriber()

 	srv := newServer(serverConfig{
-		frontend: cfg.App,
+		frontend: frontend,
 		logger:   logger,
-		host:     cfg.Host,
-		port:     cfg.Port,
+		host:     host,
+		port:     port,
 		mdb:      &mdb,
 		mq:       mq,
 		db:       db,
@@ -105,25 +76,9 @@ func RunBlocking(cfg *RunConfig) {
 	go gracefulShutdown(srv, &mdb)
 	go autoPersist(time.Minute*5, &mdb, logger)

-	var (
-		network = "tcp"
-		address = fmt.Sprintf("%s:%d", cfg.Host, cfg.Port)
-	)
+	logger.Info("yt-dlp-webui started", slog.Int("port", port))

-	if strings.HasPrefix(cfg.Host, "/") {
-		network = "unix"
-		address = cfg.Host
-	}
-
-	listener, err := net.Listen(network, address)
-	if err != nil {
-		logger.Error("failed to listen", slog.String("err", err.Error()))
-		return
-	}
-
-	logger.Info("yt-dlp-webui started", slog.String("address", address))
-
-	if err := srv.Serve(listener); err != nil {
+	if err := srv.ListenAndServe(); err != nil {
 		logger.Warn("http server stopped", slog.String("err", err.Error()))
 	}
 }
@@ -180,7 +135,10 @@ func newServer(c serverConfig) *http.Server {
 	// Logging
 	r.Route("/log", logging.ApplyRouter())

-	return &http.Server{Handler: r}
+	return &http.Server{
+		Addr:    fmt.Sprintf("%s:%d", c.host, c.port),
+		Handler: r,
+	}
 }

 func gracefulShutdown(srv *http.Server, db *internal.MemoryDB) {
--- a/server/sys/fs.go
+++ b/server/sys/fs.go
@@ -18,39 +18,35 @@ func FreeSpace() (uint64, error) {
 	return (stat.Bavail * uint64(stat.Bsize)), nil
 }

+type FSNode struct {
+	path     string
+	children []FSNode
+}
+
 // Build a directory tree started from the specified path using DFS.
 // Then return the flattened tree represented as a list.
-func DirectoryTree() (*[]string, error) {
-	type Node struct {
-		path     string
-		children []Node
-	}
-
+func DirectoryTree() (*internal.Stack[FSNode], error) {
 	rootPath := config.Instance().DownloadPath

-	stack := internal.NewStack[Node]()
-	flattened := make([]string, 0)
+	stack := internal.NewStack[FSNode]()

-	stack.Push(Node{path: rootPath})
-
-	flattened = append(flattened, rootPath)
+	stack.Push(FSNode{path: rootPath})

 	for stack.IsNotEmpty() {
-		current := stack.Pop().Value
+		current := stack.Pop()
 		children, err := os.ReadDir(current.path)
 		if err != nil {
 			return nil, err
 		}
 		for _, entry := range children {
 			childPath := filepath.Join(current.path, entry.Name())
-			childNode := Node{path: childPath}
+			childNode := FSNode{path: childPath}

 			if entry.IsDir() {
 				current.children = append(current.children, childNode)
 				stack.Push(childNode)
-				flattened = append(flattened, childNode.path)
 			}
 		}
 	}
-	return &flattened, nil
+	return stack, nil
 }
--- a/server/utils/file.go
+++ b/server/utils/file.go
@@ -1,6 +1,8 @@
 package utils

 import (
+	"crypto/sha256"
+	"encoding/hex"
 	"io/fs"
 	"regexp"
 	"strings"
@@ -19,3 +21,9 @@ func IsValidEntry(d fs.DirEntry) bool {
 		!strings.HasSuffix(d.Name(), ".part") &&
 		!strings.HasSuffix(d.Name(), ".ytdl")
 }
+
+func ShaSumString(path string) string {
+	h := sha256.New()
+	h.Write([]byte(path))
+	return hex.EncodeToString(h.Sum(nil))
+}
--- a/server/utils/logrotate.go
+++ b/server/utils/logrotate.go
@@ -0,0 +1,55 @@
+package utils
+
+import (
+	"io"
+	"io/fs"
+	"os"
+	"path/filepath"
+	"time"
+
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+)
+
+func LogRotate() (*os.File, error) {
+	logs := findLogs()
+
+	for _, log := range logs {
+		logfd, err := os.Open(log)
+		if err != nil {
+			return nil, err
+		}
+
+		gzWriter, err := os.Create(log + ".gz")
+		if err != nil {
+			return nil, err
+		}
+
+		_, err = io.Copy(gzWriter, logfd)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	logfile := time.Now().String() + ".log"
+	config.Instance().CurrentLogFile = logfile
+
+	return os.Create(logfile)
+}
+
+func findLogs() []string {
+	var (
+		logfiles []string
+		root     = config.Instance().LogPath
+	)
+
+	filepath.WalkDir(root, func(path string, d fs.DirEntry, err error) error {
+		if err != nil {
+			return err
+		}
+		if filepath.Ext(d.Name()) == ".log" {
+			logfiles = append(logfiles, path)
+		}
+		return nil
+	})
+	return logfiles
+}
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/ui/.vscode/extensions.json
+++ b/ui/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}
--- a/ui/README.md
+++ b/ui/README.md
@@ -0,0 +1,47 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```
--- a/ui/index.html
+++ b/ui/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/svelte.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>yt-dlp WebUI</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
--- a/ui/package.json
+++ b/ui/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@tsconfig/svelte": "^5.0.2",
+    "@zerodevx/svelte-toast": "^0.9.5",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.34",
+    "svelte": "^4.2.8",
+    "svelte-check": "^3.6.2",
+    "tailwindcss": "^3.4.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  },
+  "dependencies": {
+    "@fontsource/roboto": "^5.0.8",
+    "fp-ts": "^2.16.2",
+    "lucide-svelte": "^0.323.0",
+    "svelte-spa-router": "^4.0.1"
+  }
+}
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
--- a/ui/postcss.config.js
+++ b/ui/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/ui/public/svelte.svg
+++ b/ui/public/svelte.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
--- a/ui/public/vite.svg
+++ b/ui/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { SvelteToast } from '@zerodevx/svelte-toast';
+  import Router from 'svelte-spa-router';
+  import { wrap } from 'svelte-spa-router/wrap';
+  import Footer from './lib/Footer.svelte';
+  import Home from './views/Home.svelte';
+  import Navbar from './lib/Navbar.svelte';
+
+  const routes = {
+    '/': Home,
+    '/settings': wrap({
+      asyncComponent: () => import('./views/SettingsView.svelte'),
+    }),
+  };
+</script>
+
+<main
+  class="bg-neutral-50 dark:bg-neutral-900 h-screen text-neutral-950 dark:text-neutral-50"
+>
+  <Navbar />
+  <Router {routes} />
+  <Footer />
+  <SvelteToast />
+  <!-- <FloatingAction /> -->
+</main>
--- a/ui/src/app.css
+++ b/ui/src/app.css
@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* body {
+  font-family: "Roboto";
+} */
--- a/ui/src/lib/Button.svelte
+++ b/ui/src/lib/Button.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  let clazz: string = '';
+  export let disabled: boolean = false;
+  export { clazz as class };
+</script>
+
+<button
+  class={`px-2.5 py-2 rounded-lg bg-blue-300 hover:bg-blue-400 hover:duration-150 text-sm font-semibold ${
+    disabled && 'bg-neutral-300 hover:bg-neutral-300'
+  } ${clazz}`}
+  {disabled}
+  on:click
+>
+  <slot />
+</button>
--- a/ui/src/lib/Chip.svelte
+++ b/ui/src/lib/Chip.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let text: string;
+</script>
+
+<div
+  class="flex items-center gap-1.5 p-1 bg-blue-200 rounded-lg text-neutral-900"
+>
+  <slot />
+  {text}
+</div>
--- a/ui/src/lib/CookiesTextField.svelte
+++ b/ui/src/lib/CookiesTextField.svelte
@@ -0,0 +1,137 @@
+<script lang="ts">
+  import { toast } from '@zerodevx/svelte-toast';
+  import * as A from 'fp-ts/Array';
+  import * as E from 'fp-ts/Either';
+  import * as O from 'fp-ts/Option';
+  import { pipe } from 'fp-ts/lib/function';
+  import { get } from 'svelte/store';
+  import { ffetch } from './ffetch';
+  import { cookiesTemplate, serverApiEndpoint } from './store';
+  import { debounce } from './utils';
+
+  const flag = '--cookies=cookies.txt';
+
+  let cookies = localStorage.getItem('cookies') ?? '';
+
+  const validateCookie = (cookie: string) =>
+    pipe(
+      cookie,
+      (cookie) => cookie.replace(/\s\s+/g, ' '),
+      (cookie) => cookie.replaceAll('\t', ' '),
+      (cookie) => cookie.split(' '),
+      E.of,
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f.length === 7,
+          () => `missing parts`,
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[0].length > 0,
+          () => 'missing domain',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[1] === 'TRUE' || f[1] === 'FALSE',
+          () => `invalid include subdomains`,
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[2].length > 0,
+          () => 'invalid path',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[3] === 'TRUE' || f[3] === 'FALSE',
+          () => 'invalid secure flag',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => isFinite(Number(f[4])),
+          () => 'invalid expiration',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[5].length > 0,
+          () => 'invalid name',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[6].length > 0,
+          () => 'invalid value',
+        ),
+      ),
+    );
+
+  const validateNetscapeCookies = (cookies: string) =>
+    pipe(
+      cookies,
+      (cookies) => cookies.split('\n'),
+      (cookies) => cookies.filter((f) => !f.startsWith('\n')), // empty lines
+      (cookies) => cookies.filter((f) => !f.startsWith('# ')), // comments
+      (cookies) => cookies.filter(Boolean), // empty lines
+      A.map(validateCookie),
+      A.mapWithIndex((i, either) =>
+        pipe(
+          either,
+          E.matchW(
+            (l) => toast.push(`Error in line ${i + 1}: ${l}`),
+            () => E.isRight(either),
+          ),
+        ),
+      ),
+      A.filter(Boolean),
+      A.match(
+        () => false,
+        (c) => {
+          toast.push(`Valid ${c.length} Netscape cookies`);
+          return true;
+        },
+      ),
+    );
+
+  const submitCookies = (cookies: string) =>
+    ffetch(`${get(serverApiEndpoint)}/api/v1/cookies`, {
+      method: 'POST',
+      body: JSON.stringify({
+        cookies,
+      }),
+    })();
+
+  const execute = (cookies: KeyboardEvent) =>
+    pipe(
+      cookies.target as HTMLTextAreaElement,
+      (cookies) => cookies.value,
+      O.fromPredicate(validateNetscapeCookies),
+      O.match(
+        () => cookiesTemplate.set(''),
+        async (cookies) => {
+          pipe(
+            await submitCookies(cookies),
+            E.match(
+              (l) => toast.push(l),
+              () => {
+                toast.push(`Saved Netscape cookies`);
+                cookiesTemplate.set(flag);
+                localStorage.setItem('cookies', cookies);
+              },
+            ),
+          );
+        },
+      ),
+    );
+</script>
+
+<textarea
+  cols="80"
+  rows="8"
+  value={cookies}
+  on:keyup={debounce(execute, 500)}
+/>
--- a/ui/src/lib/DownloadCard.svelte
+++ b/ui/src/lib/DownloadCard.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { get } from 'svelte/store';
+  import Button from './Button.svelte';
+  import Chip from './Chip.svelte';
+  import { rpcClient, serverApiEndpoint } from './store';
+  import type { RPCResult } from './types';
+  import { formatSpeedMiB, roundMiB } from './utils';
+
+  export let download: RPCResult;
+
+  const remove = (id: string) => get(rpcClient).kill(id);
+</script>
+
+<div
+  class="flex gap-4
+  bg-neutral-100 dark:bg-neutral-800
+  p-2 md:p-4
+  rounded-lg shadow-lg
+  border dark:border-neutral-700"
+>
+  <div
+    class="h-full hidden sm:block w-96 bg-cover bg-center rounded"
+    style="background-image: url({download.info.thumbnail})"
+  />
+
+  <div class="flex flex-col justify-between gap-2 w-full">
+    <div>
+      <h2 class="font-bold text-lg">{download.info.title}</h2>
+      <p
+        class="font-mono text-sm mt-2 p-1 break-all bg-neutral-200 dark:bg-neutral-700 rounded"
+      >
+        {download.info.url}
+      </p>
+    </div>
+
+    <div class="flex flex-col justify-end gap-2 select-none flex-wrap">
+      <div class="hidden sm:flex items-center gap-2 text-sm">
+        {#if download.info.vcodec}
+          <Chip text={download.info.vcodec} />
+        {/if}
+        {#if download.info.acodec}
+          <Chip text={download.info.acodec} />
+        {/if}
+        {#if download.info.ext}
+          <Chip text={download.info.ext} />
+        {/if}
+        {#if download.info.resolution}
+          <Chip text={download.info.resolution} />
+        {/if}
+        {#if download.info.filesize_approx}
+          <Chip text={roundMiB(download.info.filesize_approx)} />
+        {/if}
+        <!-- {#if download.progress.process_status}
+          <Chip text={mapProcessStatus(download.progress.process_status)} />
+        {/if} -->
+        {#if download.progress.speed}
+          <Chip text={formatSpeedMiB(download.progress.speed)} />
+        {/if}
+      </div>
+
+      <div class="flex gap-2">
+        <Button class="w-14" on:click={() => remove(download.id)}>Stop</Button>
+        {#if download.progress.process_status === 2}
+          <Button class="w-18">Download</Button>
+          <!-- <a href={`${$serverApiEndpoint}/api/v1/d/${download.id}`}>d</a> -->
+        {/if}
+      </div>
+
+      <div
+        class="w-full mt-4 h-2 rounded-full bg-neutral-200 dark:bg-neutral-700"
+      >
+        <div
+          class={`h-2 rounded-full ${
+            download.progress.process_status === 2
+              ? 'bg-green-600'
+              : 'bg-blue-500'
+          }`}
+          style="width: {download.progress.percentage}"
+        />
+      </div>
+    </div>
+  </div>
+</div>
--- a/ui/src/lib/FloatingAction.svelte
+++ b/ui/src/lib/FloatingAction.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Plus } from 'lucide-svelte';
+</script>
+
+<div class="absolute bottom-10 right-10">
+  <!-- <div class="relative mb-4 flex flex-col justify-center items-center gap-2">
+    <button
+      class="relative flex items-center justify-center bg-blue-500 h-8 w-8 z-10 rounded-2xl shadow-xl text-neutral-100"
+    >
+      <Plus size={18} />
+    </button>
+    <button
+      class="relative flex items-center justify-center bg-blue-500 h-8 w-8 z-10 rounded-2xl shadow-xl text-neutral-100"
+    >
+      <Plus size={18} />
+    </button>
+  </div> -->
+  <button
+    class="relative bg-blue-500 p-5 z-10 rounded-2xl shadow-xl text-neutral-100"
+  >
+    <Plus />
+  </button>
+</div>
--- a/ui/src/lib/Footer.svelte
+++ b/ui/src/lib/Footer.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { ChevronDown, ChevronUp } from 'lucide-svelte';
+  import { cubicOut } from 'svelte/easing';
+  import { tweened } from 'svelte/motion';
+  import NewDownload from './NewDownload.svelte';
+
+  const height = tweened(52, {
+    duration: 300,
+    easing: cubicOut,
+  });
+
+  const minHeight = 52;
+  const maxHeight = window.innerHeight / 1.5;
+
+  let open = false;
+  $: open = $height > minHeight;
+</script>
+
+<footer
+  class="
+  fixed bottom-0 z-10
+  w-full
+  p-2
+  bg-neutral-100 dark:bg-neutral-800
+  border-t dark:border-t-neutral-700
+  shadow-lg
+  rounded-t-xl"
+  style="min-height: {$height}px;"
+>
+  <button
+    class="p-1 bg-neutral-200 dark:bg-neutral-700 rounded-lg border dark:border-neutral-700"
+    on:click={() => (open ? height.set(minHeight) : height.set(maxHeight))}
+  >
+    {#if open}
+      <ChevronDown />
+    {:else}
+      <ChevronUp />
+    {/if}
+  </button>
+
+  <div />
+
+  {#if $height > 100}
+    <div class="mt-2">
+      <NewDownload />
+    </div>
+  {/if}
+</footer>
--- a/ui/src/lib/FormatsList.svelte
+++ b/ui/src/lib/FormatsList.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { DLFormat } from './types';
+
+  let group = '';
+  export let formats: DLFormat[];
+
+  $: console.log(group);
+</script>
+
+<div class="w-full mt-4">
+  <div class="mx-auto w-full">
+    <fieldset class="grid grid-cols-7 gap-2">
+      {#each formats as format}
+        <div class="relative">
+          <input
+            id="formats"
+            class="absolute opacity-0 w-0 h-0 peer"
+            type="radio"
+            bind:group
+            name="type"
+            value="formats"
+          />
+          <label
+            for="formats"
+            class="
+            [&_p]:text-gray-900 [&_span]:text-gray-500
+            peer-checked:[&_p]:text-white peer-checked:[&_span]:text-blue-100
+            peer-focus:ring-2 peer-focus:ring-white
+            peer-focus:ring-opacity-60 peer-focus:ring-offset-2 peer-focus:ring-offset-blue-300
+            bg-white
+            relative flex
+            cursor-pointer
+            rounded-lg px-5 py-4
+            shadow-md
+            focus:outline-none
+            peer-checked:bg-blue-700/75
+            peer-checked:text-white"
+          >
+            <div class="flex w-full items-center justify-between">
+              <div class="flex items-center">
+                <div class="text-sm">
+                  <p class="font-medium" id={format.format_id}>
+                    {format.resolution}
+                  </p>
+                  <span class="inline" id={format.format_id}>
+                    <span>{format.vcodec}</span>
+                    <span aria-hidden="true">·</span>
+                    <span>{format.acodec}</span>
+                  </span>
+                </div>
+              </div>
+              <div class="shrink-0 text-white">
+                <svg viewBox="0 0 24 24" fill="none" class="h-6 w-6">
+                  <circle cx="12" cy="12" r="12" fill="#fff" opacity="0.2" />
+                  <path
+                    d="M7 13l3 3 7-7"
+                    stroke="#fff"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+            </div>
+          </label>
+        </div>
+      {/each}
+    </fieldset>
+  </div>
+</div>
--- a/ui/src/lib/FullscreenSpinner.svelte
+++ b/ui/src/lib/FullscreenSpinner.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Spinner from './Spinner.svelte';
+</script>
+
+<div
+  class="top-0 left-0 absolute w-full h-full bg-neutral-950/20 flex items-center justify-center z-50"
+>
+  <Spinner />
+</div>
--- a/ui/src/lib/Navbar.svelte
+++ b/ui/src/lib/Navbar.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+  import {
+    ArrowDownUp,
+    Github,
+    HardDrive,
+    Network,
+    Settings,
+  } from 'lucide-svelte';
+  import { downloads, rpcClient, serverApiEndpoint } from './store';
+  import { formatGiB, formatSpeedMiB } from './utils';
+  import * as O from 'fp-ts/Option';
+  import { pipe } from 'fp-ts/lib/function';
+  import { onDestroy } from 'svelte';
+  import { link } from 'svelte-spa-router';
+
+  let downloadSpeed = 0;
+
+  const unsubscribe = downloads.subscribe((downloads) =>
+    pipe(
+      downloads,
+      O.matchW(
+        () => (downloadSpeed = 0),
+        (d) =>
+          (downloadSpeed = d
+            .map((d) => d.progress.speed)
+            .reduce((a, b) => a + b)),
+      ),
+    ),
+  );
+
+  onDestroy(unsubscribe);
+</script>
+
+<nav
+  class="
+  p-4
+  flex justify-between items-center
+  bg-neutral-100 dark:bg-neutral-800
+  rounded-b-xl
+  border-b dark:border-b-neutral-700
+  shadow-lg
+  select-none"
+>
+  <a use:link={'/'} href="/" class="font-semibold text-lg">yt-dlp WebUI</a>
+
+  <div />
+
+  <div class="flex items-center gap-2 text-sm">
+    <div
+      class="hidden sm:flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+    >
+      <ArrowDownUp size={18} />
+      <div>
+        {formatSpeedMiB(downloadSpeed)}
+      </div>
+    </div>
+
+    <div class="flex items-center gap-2 text-sm">
+      <div
+        class="flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+      >
+        <HardDrive size={18} />
+        <div>
+          {#await $rpcClient.freeSpace()}
+            Loading...
+          {:then freeSpace}
+            {formatGiB(freeSpace.result)}
+          {/await}
+        </div>
+      </div>
+
+      <div
+        class="flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+      >
+        <Network size={18} />
+        <div>
+          {$serverApiEndpoint.split('//')[1]}
+        </div>
+      </div>
+
+      <a
+        href="https://github.com/marcopeocchi/yt-dlp-web-ui"
+        class="flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+      >
+        <Github size={18} />
+      </a>
+
+      <a
+        use:link={'/settings'}
+        href="/settings"
+        class="flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+      >
+        <Settings size={18} />
+      </a>
+    </div>
+  </div>
+</nav>
--- a/ui/src/lib/NewDownload.svelte
+++ b/ui/src/lib/NewDownload.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { get } from 'svelte/store';
+  import Button from './Button.svelte';
+  import TextField from './TextField.svelte';
+  import { downloadTemplates, rpcClient } from './store';
+  import Select from './Select.svelte';
+  import type { DLMetadata } from './types';
+  import FormatsList from './FormatsList.svelte';
+
+  let url: string = '';
+  let args: string = '';
+  let metadata: DLMetadata;
+
+  const download = () =>
+    get(rpcClient).download({
+      url,
+      args,
+    });
+
+  const getFormats = () =>
+    get(rpcClient)
+      .formats(url)
+      ?.then((f) => (metadata = f.result));
+</script>
+
+<div class="w-full px-8">
+  <div class="my-4 font-semibold text-xl">New download</div>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-2 w-full mb-2">
+    <TextField placeholder="https://..." label="URL" bind:value={url} />
+    <TextField
+      placeholder="arguments separated by space"
+      label="yt-dlp arguments"
+      bind:value={args}
+    />
+    <Select bind:value={args}>
+      <option selected disabled value=""> Select download template </option>
+      {#each $downloadTemplates as template}
+        <option id={template.id} value={template.content}>
+          {template.name}
+        </option>
+      {/each}
+    </Select>
+  </div>
+  <Button class="mt-2" on:click={download}>Download</Button>
+  <Button class="mt-2" on:click={getFormats}>Select format</Button>
+  {#if metadata}
+    <FormatsList formats={metadata.formats} />
+  {/if}
+</div>
--- a/ui/src/lib/RPCClient.ts
+++ b/ui/src/lib/RPCClient.ts
@@ -0,0 +1,195 @@
+import type { DLMetadata, RPCRequest, RPCResponse, RPCResult } from './types'
+
+type DownloadRequestArgs = {
+  url: string,
+  args: string,
+  pathOverride?: string,
+  renameTo?: string,
+  playlist?: boolean
+}
+
+export class RPCClient {
+  private seq: number
+  private httpEndpoint: string
+  private readonly _socket$: WebSocket
+  private readonly token?: string
+
+  constructor(httpEndpoint: string, webSocketEndpoint: string, token?: string) {
+    this.seq = 0
+    this.httpEndpoint = httpEndpoint
+    this.token = token
+    this._socket$ = new WebSocket(
+      token ? `${webSocketEndpoint}?token=${token}` : webSocketEndpoint
+    )
+  }
+
+  /**
+   * Websocket connection
+   */
+  public get socket() {
+    return this._socket$
+  }
+
+  private incrementSeq() {
+    return String(this.seq++)
+  }
+
+  private send(req: RPCRequest) {
+    this._socket$.send(JSON.stringify({
+      ...req,
+      id: this.incrementSeq(),
+    }))
+  }
+
+  private argsSanitizer(args: string) {
+    return args
+      .split(' ')
+      .map(a => a.trim().replaceAll("'", '').replaceAll('"', ''))
+      .filter(Boolean)
+  }
+
+  private async sendHTTP<T>(req: RPCRequest) {
+    const res = await fetch(this.httpEndpoint, {
+      method: 'POST',
+      headers: {
+        'X-Authentication': this.token ?? ''
+      },
+      body: JSON.stringify({
+        ...req,
+        id: this.incrementSeq(),
+      })
+    })
+    const data: RPCResponse<T> = await res.json()
+
+    return data
+  }
+
+  /**
+   * Request a new download. Handles arguments sanitization.
+   * @param req payload
+   * @returns 
+   */
+  public download(req: DownloadRequestArgs) {
+    if (!req.url) {
+      return
+    }
+
+    const rename = req.args.includes('-o')
+      ? req.args
+        .substring(req.args.indexOf('-o'))
+        .replaceAll("'", '')
+        .replaceAll('"', '')
+        .split('-o')
+        .map(s => s.trim())
+        .join('')
+        .split(' ')
+        .at(0) ?? ''
+      : ''
+
+    const sanitizedArgs = this.argsSanitizer(
+      req.args.replace('-o', '').replace(rename, '')
+    )
+
+    if (req.playlist) {
+      return this.sendHTTP({
+        method: 'Service.ExecPlaylist',
+        params: [{
+          URL: req.url,
+          Params: sanitizedArgs,
+          Path: req.pathOverride,
+          Rename: req.renameTo || rename,
+        }]
+      })
+    }
+
+    this.sendHTTP({
+      method: 'Service.Exec',
+      params: [{
+        URL: req.url.split('?list').at(0)!,
+        Params: sanitizedArgs,
+        Path: req.pathOverride,
+        Rename: req.renameTo || rename,
+      }]
+    })
+  }
+
+  /**
+   * Requests the available formats for a given url (-f arg)
+   * @param url requested url
+   * @returns 
+   */
+  public formats(url: string) {
+    if (url) {
+      return this.sendHTTP<DLMetadata>({
+        method: 'Service.Formats',
+        params: [{
+          URL: url.split('?list').at(0)!,
+        }]
+      })
+    }
+  }
+
+  /**
+   * Requests all downloads
+   */
+  public running() {
+    this.send({
+      method: 'Service.Running',
+      params: [],
+    })
+  }
+
+  /**
+   * Stops and removes a download asynchronously
+   * @param id download id
+   */
+  public kill(id: string) {
+    this.sendHTTP({
+      method: 'Service.Kill',
+      params: [id],
+    })
+  }
+
+  /**
+   * Stops and removes all downloads
+   */
+  public killAll() {
+    this.sendHTTP({
+      method: 'Service.KillAll',
+      params: [],
+    })
+  }
+
+  /**
+   * Get asynchronously the avaliable space on downloads directory
+   * @returns free space in bytes
+   */
+  public freeSpace() {
+    return this.sendHTTP<number>({
+      method: 'Service.FreeSpace',
+      params: [],
+    })
+  }
+
+  /**
+   * Get asynchronously the tree view of the download directory
+   * @returns free space in bytes
+   */
+  public directoryTree() {
+    return this.sendHTTP<string[]>({
+      method: 'Service.DirectoryTree',
+      params: [],
+    })
+  }
+
+  /**
+   * Updates synchronously yt-dlp executable
+   * @returns free space in bytes
+   */
+  public updateExecutable() {
+    return this.sendHTTP({
+      method: 'Service.UpdateExecutable',
+      params: []
+    })
+  }
+}
--- a/ui/src/lib/Select.svelte
+++ b/ui/src/lib/Select.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let value: any;
+
+  export let disabled: boolean = false;
+  export let placeholder: string = '';
+  export { clazz as class };
+</script>
+
+<select
+  class="
+  p-2
+  bg-neutral-50
+  border rounded-lg
+  appearance-none
+  text-sm font-semibold
+  focus:outline-blue-300
+  "
+  bind:value
+  {disabled}
+  {placeholder}
+>
+  <slot />
+</select>
--- a/ui/src/lib/Settings.svelte
+++ b/ui/src/lib/Settings.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { get } from 'svelte/store';
+  import Button from './Button.svelte';
+  import TextField from './TextField.svelte';
+  import { rpcClient, rpcHost, rpcPort } from './store';
+  import FullscreenSpinner from './FullscreenSpinner.svelte';
+
+  let loading: Promise<any>;
+
+  const update = () => (loading = get(rpcClient).updateExecutable());
+</script>
+
+<div class="w-full">
+  <div class="font-semibold text-lg mb-4">Settings</div>
+
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+    <TextField
+      label="Server address"
+      bind:value={$rpcHost}
+      placeholder="localhost"
+    />
+    <TextField label="Server port" bind:value={$rpcPort} placeholder="3033" />
+  </div>
+
+  <Button class="mt-4" on:click={update}>Update yt-dlp</Button>
+
+  {#if loading}
+    {#await loading}
+      <FullscreenSpinner />
+    {/await}
+  {/if}
+
+  <!-- <CookiesTextField /> -->
+</div>
--- a/ui/src/lib/Spinner.svelte
+++ b/ui/src/lib/Spinner.svelte
@@ -0,0 +1,19 @@
+<div role="status">
+  <svg
+    aria-hidden="true"
+    class="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-400"
+    viewBox="0 0 100 101"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+      fill="currentColor"
+    />
+    <path
+      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+      fill="currentFill"
+    />
+  </svg>
+  <span class="sr-only">Loading...</span>
+</div>
--- a/ui/src/lib/TextField.svelte
+++ b/ui/src/lib/TextField.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  let clazz: string = '';
+  export let label: string;
+  export let value: any;
+
+  export let disabled: boolean = false;
+  export let placeholder: string = '';
+  export { clazz as class };
+</script>
+
+<div class="flex flex-col gap-0.5 text-sm font-semibold">
+  <label for=""> {label} </label>
+  <input
+    type="text"
+    class={`p-2 
+    bg-neutral-50 border 
+    rounded-lg 
+    focus:outline-blue-300 
+    dark:bg-neutral-700 dark:border-neutral-900
+    ${clazz}
+    `}
+    on:keyup
+    bind:value
+    {placeholder}
+    {disabled}
+  />
+</div>
--- a/ui/src/lib/ffetch.ts
+++ b/ui/src/lib/ffetch.ts
@@ -0,0 +1,32 @@
+import { tryCatch } from 'fp-ts/TaskEither'
+
+/**
+ *  functional fetch(): composable as TaskEither
+*/
+export const ffetch = <T>(url: string, opt?: RequestInit) => tryCatch(
+  () => fetcher<T>(url, opt),
+  (e) => `error while fetching: ${e}`
+)
+
+const fetcher = async <T>(url: string, opt?: RequestInit) => {
+  const jwt = localStorage.getItem('token')
+
+  if (opt && !opt.headers) {
+    opt.headers = {
+      'Content-Type': 'application/json',
+    }
+  }
+
+  const res = await fetch(url, {
+    ...opt,
+    headers: {
+      ...opt?.headers,
+      'X-Authentication': jwt ?? ''
+    }
+  })
+
+  if (!res.ok) {
+    throw await res.text()
+  }
+  return res.json() as T
+}
--- a/ui/src/lib/store.ts
+++ b/ui/src/lib/store.ts
@@ -0,0 +1,57 @@
+import * as O from 'fp-ts/lib/Option'
+import { derived, readable, writable } from 'svelte/store'
+import { RPCClient } from './RPCClient'
+import { type CustomTemplate, type RPCResult } from './types'
+
+export const rpcHost = writable<string>(localStorage.getItem('rpcHost') ?? 'localhost')
+export const rpcPort = writable<number>(Number(localStorage.getItem('rpcPort')) || 3033)
+
+// if authentication is enabled...
+export const rpcWebToken = writable<string>(localStorage.getItem('rpcWebToken') ?? '')
+
+// will be used to access the api and archive endpoints
+export const serverApiEndpoint = derived(
+  [rpcHost, rpcPort],
+  ([$host, $port]) => window.location.port == ''
+    ? `${window.location.protocol}//${$host}`
+    : `${window.location.protocol}//${$host}:${$port}`
+)
+
+// access the websocket JSON-RPC 1.0 to gather downloads state
+export const websocketRpcEndpoint = derived(
+  [rpcHost, rpcPort],
+  ([$host, $port]) => window.location.port == ''
+    ? `${window.location.protocol.startsWith('https') ? 'wss:' : 'ws:'}//${$host}/rpc/ws`
+    : `${window.location.protocol.startsWith('https') ? 'wss:' : 'ws:'}//${$host}:${$port}/rpc/ws`
+)
+
+// same as websocket one but using HTTP-POST mainly used to send commands (download, stop, ...)
+export const httpPostRpcEndpoint = derived(
+  serverApiEndpoint,
+  $ep => window.location.port == '' ? `${$ep}/rpc/http` : `${$ep}/rpc/http`
+)
+
+/**
+ * Will handle Websocket and HTTP-POST communications based on the requested method
+*/
+export const rpcClient = derived(
+  [httpPostRpcEndpoint, websocketRpcEndpoint, rpcWebToken],
+  ([$http, $ws, $token]) => new RPCClient($http, $ws, $token)
+)
+
+/**
+ * Stores all the downloads returned by the rpc
+ */
+export const downloads = writable<O.Option<RPCResult[]>>(O.none)
+
+export const cookiesTemplate = writable<string>('')
+
+/**
+ * fetches download templates, needs manual update
+ */
+export const downloadTemplates = readable<CustomTemplate[]>([], (set) => {
+  serverApiEndpoint
+    .subscribe(ep => fetch(`${ep}/api/v1/template/all`)
+      .then(res => res.json())
+      .then(data => set(data)))
+})
--- a/ui/src/lib/types.ts
+++ b/ui/src/lib/types.ts
@@ -0,0 +1,90 @@
+export type RPCMethods =
+  | "Service.Exec"
+  | "Service.Kill"
+  | "Service.Clear"
+  | "Service.Running"
+  | "Service.KillAll"
+  | "Service.FreeSpace"
+  | "Service.Formats"
+  | "Service.ExecPlaylist"
+  | "Service.DirectoryTree"
+  | "Service.UpdateExecutable"
+
+export type RPCRequest = {
+  method: RPCMethods
+  params?: any[]
+  id?: string
+}
+
+export type RPCResponse<T> = Readonly<{
+  result: T
+  error: number | null
+  id?: string
+}>
+
+type DownloadInfo = {
+  url: string
+  filesize_approx?: number
+  resolution?: string
+  thumbnail: string
+  title: string
+  vcodec?: string
+  acodec?: string
+  ext?: string
+  created_at: string
+}
+
+type DownloadProgress = {
+  speed: number
+  eta: number
+  percentage: string
+  process_status: number
+}
+
+export type RPCResult = Readonly<{
+  id: string
+  progress: DownloadProgress
+  info: DownloadInfo
+}>
+
+export type RPCParams = {
+  URL: string
+  Params?: string
+}
+
+export type DLMetadata = {
+  formats: Array<DLFormat>
+  best: DLFormat
+  thumbnail: string
+  title: string
+}
+
+export type DLFormat = {
+  format_id: string
+  format_note: string
+  fps: number
+  resolution: string
+  vcodec: string
+  acodec: string
+  filesize_approx: number
+}
+
+export type DirectoryEntry = {
+  name: string
+  path: string
+  size: number
+  shaSum: string
+  modTime: string
+  isVideo: boolean
+  isDirectory: boolean
+}
+
+export type DeleteRequest = Pick<DirectoryEntry, 'path' | 'shaSum'>
+
+export type PlayRequest = Pick<DirectoryEntry, 'path'>
+
+export type CustomTemplate = {
+  id: string
+  name: string
+  content: string
+}
--- a/ui/src/lib/utils.ts
+++ b/ui/src/lib/utils.ts
@@ -0,0 +1,93 @@
+import { pipe } from 'fp-ts/lib/function'
+import type { RPCResponse } from "./types"
+
+/**
+ * Validate an ip v4 via regex
+ * @param {string} ipAddr 
+ * @returns ip validity test
+ */
+export function validateIP(ipAddr: string): boolean {
+  let ipRegex = /^(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}$/gm
+  return ipRegex.test(ipAddr)
+}
+
+export function validateDomain(url: string): boolean {
+  const urlRegex = /(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/
+  const slugRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
+
+  const [name, slug] = url.split('/')
+
+  return urlRegex.test(url) || name === 'localhost' && slugRegex.test(slug)
+}
+
+export function isValidURL(url: string): boolean {
+  let urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/
+  return urlRegex.test(url)
+}
+
+export function ellipsis(str: string, lim: number): string {
+  if (str) {
+    return str.length > lim ? `${str.substring(0, lim)}...` : str
+  }
+  return ''
+}
+
+export function toFormatArgs(codes: string[]): string {
+  if (codes.length > 1) {
+    return codes.reduce((v, a) => ` -f ${v}+${a}`)
+  }
+  if (codes.length === 1) {
+    return ` -f ${codes[0]}`
+  }
+  return ''
+}
+
+export const formatGiB = (bytes: number) =>
+  `${(bytes / 1_000_000_000).toFixed(0)}GiB`
+
+export const roundMiB = (bytes: number) =>
+  `${(bytes / 1_000_000).toFixed(2)} MiB`
+
+export const formatSpeedMiB = (val: number) =>
+  `${roundMiB(val)}/s`
+
+export const datetimeCompareFunc = (a: string, b: string) =>
+  new Date(a).getTime() - new Date(b).getTime()
+
+export function isRPCResponse(object: any): object is RPCResponse<any> {
+  return 'result' in object && 'id' in object
+}
+
+export function mapProcessStatus(status: number) {
+  switch (status) {
+    case 0:
+      return 'Pending'
+    case 1:
+      return 'Downloading'
+    case 2:
+      return 'Completed'
+    case 3:
+      return 'Error'
+    default:
+      return 'Pending'
+  }
+}
+
+export const prefersDarkMode = () =>
+  window.matchMedia('(prefers-color-scheme: dark)').matches
+
+export const base64URLEncode = (s: string) => pipe(
+  s,
+  s => String.fromCodePoint(...new TextEncoder().encode(s)),
+  btoa,
+  encodeURIComponent
+)
+
+export const debounce = (callback: Function, wait = 300) => {
+  let timeout: ReturnType<typeof setTimeout>
+
+  return (...args: any[]) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => callback(...args), wait)
+  }
+}
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -0,0 +1,11 @@
+import './app.css'
+import '@fontsource/roboto'
+import '@fontsource/roboto/400-italic.css'
+import '@fontsource/roboto/400.css'
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app'),
+})
+
+export default app
--- a/ui/src/views/Home.svelte
+++ b/ui/src/views/Home.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import * as O from 'fp-ts/Option';
+  import { pipe } from 'fp-ts/lib/function';
+  import { onDestroy } from 'svelte';
+  import DownloadCard from '../lib/DownloadCard.svelte';
+  import Spinner from '../lib/Spinner.svelte';
+  import { downloads, rpcClient } from '../lib/store';
+  import { datetimeCompareFunc, isRPCResponse } from '../lib/utils';
+
+  const unsubscribe = rpcClient.subscribe(($client) => {
+    setInterval(() => $client.running(), 750);
+
+    $client.socket.onmessage = (ev: any) => {
+      const event = JSON.parse(ev.data);
+      // guards
+      if (!isRPCResponse(event)) {
+        return;
+      }
+      if (!Array.isArray(event.result)) {
+        return;
+      }
+
+      if (event.result) {
+        return downloads.set(
+          O.of(
+            event.result
+              .filter((f) => !!f.info.url)
+              .sort((a, b) =>
+                datetimeCompareFunc(b.info.created_at, a.info.created_at),
+              ),
+          ),
+        );
+      }
+
+      downloads.set(O.none);
+    };
+  });
+
+  onDestroy(unsubscribe);
+</script>
+
+{#if O.isNone($downloads)}
+  <div class="h-[90vh] w-full flex justify-center items-center">
+    <Spinner />
+  </div>
+{:else}
+  <div class="grid grid-cols-1 xl:grid-cols-2 gap-2 p-8">
+    {#each pipe( $downloads, O.getOrElseW(() => []), ) as download}
+      <DownloadCard {download} />
+    {/each}
+  </div>
+{/if}
--- a/ui/src/views/SettingsView.svelte
+++ b/ui/src/views/SettingsView.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Settings from '../lib/Settings.svelte';
+</script>
+
+<main
+  class="bg-neutral-100 dark:bg-neutral-800
+  rounded-xl
+  border dark:border-neutral-700
+  shadow-lg
+  m-8 p-4"
+>
+  <Settings />
+</main>
--- a/ui/src/vite-env.d.ts
+++ b/ui/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
--- a/ui/svelte.config.js
+++ b/ui/svelte.config.js
@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{svelte,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/ui/tsconfig.node.json
+++ b/ui/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["vite.config.ts"]
+}
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+})
Author	SHA1	Message	Date
marcobaobao	46bfb1e80f	Added favicon Closes #139	2024-03-03 20:32:20 +01:00
marcobaobao	1cfda047cb	code refactoring, added router, moved download api path	2024-02-23 10:55:33 +01:00
marcobaobao	65b0c8bc0e	code refactoring	2024-02-12 12:02:23 +01:00
marcobaobao	cc06487b0a	layout refactoring	2024-02-10 09:56:50 +01:00
marcobaobao	63b5f00320	formats selection	2024-02-09 18:20:22 +01:00
marcobaobao	b5c627da28	download templates	2024-02-09 11:08:47 +01:00
marcobaobao	453cd2a373	implementing download	2024-02-09 10:47:18 +01:00
marcobaobao	e7e4d03baf	comments	2024-02-07 15:39:44 +01:00
marcobaobao	834664184b	core functionalities	2024-02-07 15:23:52 +01:00
marcobaobao	9bc8734ef0	test	2024-02-07 15:05:03 +01:00
marcobaobao	49152aa641	core functionalities	2024-02-07 15:03:12 +01:00
marcobaobao	6785ead452	code refactoring	2024-02-07 14:40:27 +01:00
marcobaobao	00df98233d	implemented core stores	2024-02-07 14:35:04 +01:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>