Removed unused import

custom error boundary
code refactoring
2023-07-31 19:14:50 +02:00 · 2023-07-31 19:14:50 +02:00 · 2023-07-31 19:14:50 +02:00 · 2023-07-31 19:14:50 +02:00 · 2023-07-31 08:30:09 +02:00 · 2023-07-28 11:44:38 +02:00
97 changed files with 4247 additions and 2044 deletions
--- a/.github/workflows/docker-image.yml
+++ b/.github/workflows/docker-image.yml
@@ -5,6 +5,8 @@ on:
    branches: [ master ]
  pull_request:
    branches: [ master ]
+  schedule:
+    - cron: '0 1 * * *'

 jobs:
  build:
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -13,6 +13,8 @@ on:
    branches: [ master ]
  pull_request:
    branches: [ master ]
+  schedule:
+    - cron : '0 1 * * 0'

 env:
  # Use docker.io for Docker Hub if empty
--- a/.gitignore
+++ b/.gitignore
@@ -15,3 +15,4 @@ downloads
 .DS_Store
 build/
 yt-dlp-webui
+session.dat
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -4,13 +4,19 @@
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
+        {
+            "name": "Launch file",
+            "type": "go",
+            "request": "launch",
+            "mode": "debug",
+            "program": "${file}"
+        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
-            "url": "http://localhost:1234",
+            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}",
-            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "/__parcel_source_root/*": "${webRoot}/*"
            }
--- a/14
+++ b/14
@@ -1,7 +1,4 @@
-# Multi stage build Dockerfile
-
-# There's no point in using the edge (development branch of alpine)
-FROM alpine:3.17 AS build
+FROM golang:1.20-alpine AS build
 # folder structure
 WORKDIR /usr/src/yt-dlp-webui
 # install core dependencies
@@ -15,7 +12,7 @@ RUN npm install
 RUN npm run build
 # build backend + incubator
 WORKDIR /usr/src/yt-dlp-webui
-RUN go build -o yt-dlp-webui
+RUN CGO_ENABLED=0 GOOS=linux go build -o yt-dlp-webui

 # but here yes :)
 FROM alpine:edge
@@ -28,8 +25,9 @@ WORKDIR /app
 RUN apk update && \
    apk add psmisc ffmpeg yt-dlp

-COPY --from=build /usr/src/yt-dlp-webui /app
-RUN chmod +x /app/yt-dlp-webui
+COPY --from=build /usr/src/yt-dlp-webui/yt-dlp-webui /app
+
+ENV JWT_SECRET=secret

 EXPOSE 3033
-CMD [ "./yt-dlp-webui" , "--out", "/downloads" ]
+ENTRYPOINT [ "./yt-dlp-webui" , "--out", "/downloads" ]
--- a/10
+++ b/10
@@ -1,14 +1,14 @@
 default:
-	go build -o yt-dlp-webui main.go
+	CGO_ENABLED=0 go build -o yt-dlp-webui main.go

 all:
 	cd frontend && pnpm build && cd ..
-	go build -o yt-dlp-webui main.go
+	CGO_ENABLED=0 go build -o yt-dlp-webui main.go

 multiarch:
-	GOOS=linux GOARCH=arm go build -o yt-dlp-webui_linux-arm *.go
-	GOOS=linux GOARCH=arm64 go build -o yt-dlp-webui_linux-arm64 *.go
-	GOOS=linux GOARCH=amd64 go build -o yt-dlp-webui_linux-amd64 *.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=arm go build -o yt-dlp-webui_linux-arm main.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -o yt-dlp-webui_linux-arm64 main.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o yt-dlp-webui_linux-amd64 main.go
 	mkdir -p build
 	mv yt-dlp-webui* build

--- a/README.md
+++ b/README.md
@@ -12,15 +12,23 @@ The bottleneck remains yt-dlp startup time.
 **Docker images are available on [Docker Hub](https://hub.docker.com/r/marcobaobao/yt-dlp-webui) or [ghcr.io](https://github.com/marcopeocchi/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui)**.

 ```sh
-docker pull marcobaobao/yt-dlp-webui:latest
+docker pull marcobaobao/yt-dlp-webui
 ```
 ```sh
+# latest stable
 docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
+# latest dev version
+docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:master
 ```

 ![](https://i.ibb.co/RCpfg7q/image.png)
 ![](https://i.ibb.co/N2749CD/image.png)

+### Integrated File browser
+Stream or download your content, easily.
+
+![](https://i.ibb.co/k0qzLds/image.png)
+
 ## Changelog
 ```
 05/03/22: Korean translation by kimpig
@@ -60,6 +68,7 @@ The currently avaible settings are:
 -   Override the output filename
 -   Override the output path
 -   Pass custom yt-dlp arguments safely
+-   Download queue (limit concurrent downloads)

 ![](https://i.ibb.co/YdBVcgc/image.png)
 ![](https://i.ibb.co/Sf102b1/image.png)
@@ -76,8 +85,9 @@ Future releases will have:
 -   ~~Multi download~~ *done*
 -   ~~Exctract audio~~ *done*
 -   ~~Format selection~~ *done*
-   Download archive
+-   ~~Download archive~~ *done*
 -   ~~ARM Build~~ *done available through ghcr.io*
+-   Playlist support

 ## Troubleshooting
 -   **It says that it isn't connected/ip in the header is not defined.**
@@ -88,14 +98,8 @@ Future releases will have:
 ## [Docker](https://github.com/marcopeocchi/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui) installation
 ```sh
 # recomended for ARM and x86 devices 
-docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
-# or
-# docker pull marcobaobao/yt-dlp-webui:latest
-docker run -d -p 3033:3033 -v <your dir>:/downloads ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
-
-# or even
-docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
-docker create --name yt-dlp-webui -p 8082:3033 -v <your dir>:/downloads ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
+docker pull marcobaobao/yt-dlp-webui
+docker run -d -p 3033:3033 -v <your dir>:/downloads marcobaobao/yt-dlp-webui
 ```

 Or with docker but building the container manually.
@@ -105,6 +109,29 @@ docker build -t yt-dlp-webui .
 docker run -d -p 3033:3033 -v <your dir>:/downloads yt-dlp-webui
 ```

+If you opt to add RPC authentication...
+```sh
+docker run -d \
+    -p 3033:3033 \
+    -e JWT_SECRET randomsecret
+    -v /path/to/downloads:/downloads \
+    marcobaobao/yt-dlp-webui \
+    --auth \
+    --secret your_rpc_secret
+```
+
+If you wish for limiting the download queue size...
+
+e.g. limiting max 2 concurrent download.
+```sh
+docker run -d \
+    -p 3033:3033 \
+    -e JWT_SECRET randomsecret
+    -v /path/to/downloads:/downloads \
+    marcobaobao/yt-dlp-webui \
+    --qs 2
+```
+
 ## [Prebuilt binaries](https://github.com/marcopeocchi/yt-dlp-web-ui/releases) installation

 ```sh
@@ -121,6 +148,25 @@ yt-dlp-webui --out /home/user/downloads --driver /opt/soemdir/yt-dlp
 yt-dlp-webui --conf /home/user/.config/yt-dlp-webui.conf
 ```

+### Arguments
+```sh
+Usage yt-dlp-webui:
+  -auth
+        Enable RPC authentication
+  -conf string
+        Config file path
+  -driver string
+        yt-dlp executable path (default "yt-dlp")
+  -out string
+        Where files will be saved (default ".")
+  -port int
+        Port where server will listen at (default 3033)
+  -qs int
+        Download queue size (default 8)
+  -secret string
+        Secret required for auth
+```
+
 ### Config file
 By running `yt-dlp-webui` in standalone mode you have the ability to also specify a config file.
 The config file **will overwrite what have been passed as cli argument**.
@@ -132,6 +178,11 @@ The config file **will overwrite what have been passed as cli argument**.
 port: 8989
 downloadPath: /home/ren/archive
 downloaderPath: /usr/local/bin/yt-dlp
+
+# Optional settings
+require_auth: true
+rpc_secret: my_random_secret
+queue_size: 4
 ```

 ### Systemd integration
@@ -187,16 +238,10 @@ For more information open an issue on GitHub and I will provide more info ASAP.

 ## FAQ
 -   **Will it availabe for Raspberry Pi/ generic ARM devices?**
-    - Yes, it's currently available through ghcr.io
-      ```
-      docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:master
-      ```
+    - Yes, it's cross platform :)
      If you plan to use it on a Raspberry Pi ensure to have fast and durable storage.
 -   **Why the docker image is so heavy?**
    - Originally it was 1.8GB circa, now it has been slimmed to ~340MB compressed. This is due to the fact that it encapsule a basic Alpine linux image + FFmpeg + Node.js + Python3 + yt-dlp.
-
-   **Why is it so slow to start a download?**
-    - I genuinely don't know. I know that standalone yt-dlp is slow to start up even on my M1 Mac, so....
-
+    - **Update**: Since Golang migration and Multi-Stage builds the Docker image is now 75MB circa. A reduction of over 400% in size :D.
 ## What yt-dlp-webui is not
 `yt-dlp-webui` isn't your ordinary website where to download stuff from the internet, so don't try asking for links of where this is hosted. It's a self hosted platform for a Linux NAS.
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "yt-dlp-webui",
-  "version": "2.0.6",
+  "version": "2.10.0",
  "description": "Frontend compontent of yt-dlp-webui",
  "scripts": {
    "dev": "vite",
@@ -9,28 +9,27 @@
  "author": "marcopeocchi",
  "license": "MPL-2.0",
  "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.5",
-    "@reduxjs/toolkit": "^1.9.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
-    "react-redux": "^8.0.5",
-    "react-router-dom": "^6.7.0",
-    "rxjs": "^7.8.0",
+    "react-router-dom": "^6.13.0",
+    "recoil": "^0.7.7",
+    "rxjs": "^7.8.1",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@modyfi/vite-plugin-yaml": "^1.0.4",
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.10",
+    "@types/node": "^20.3.1",
+    "@types/react": "^18.2.13",
+    "@types/react-dom": "^18.2.6",
    "@types/react-router-dom": "^5.3.3",
-    "@types/uuid": "^9.0.0",
-    "@vitejs/plugin-react": "^3.0.1",
+    "@types/uuid": "^9.0.2",
+    "@vitejs/plugin-react": "^4.0.3",
    "buffer": "^6.0.3",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4"
+    "typescript": "^5.1.3",
+    "vite": "^4.4.7"
  }
 }
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,191 +1,11 @@
-import { ThemeProvider } from "@emotion/react";
-import {
-  ChevronLeft,
-  Dashboard,
-  // Download,
-  Menu, Settings as SettingsIcon,
-  FormatListBulleted,
-  SettingsEthernet,
-  Storage
-} from "@mui/icons-material";
-import {
-  Box,
-  CircularProgress,
-  createTheme, CssBaseline,
-  Divider,
-  IconButton, List,
-  ListItemIcon, ListItemText, Toolbar,
-  Typography
-} from "@mui/material";
-import { grey } from "@mui/material/colors";
-import ListItemButton from '@mui/material/ListItemButton';
-import { lazy, Suspense, useMemo, useState } from "react";
-import { Provider, useDispatch, useSelector } from "react-redux";
-import {
-  BrowserRouter as Router, Link, Route,
-  Routes
-} from 'react-router-dom';
-import { AppBar } from "./components/AppBar";
-import { Drawer } from "./components/Drawer";
-import { toggleListView } from "./features/settings/settingsSlice";
-import Home from "./Home";
-import { RootState, store } from './stores/store';
-import { formatGiB, getWebSocketEndpoint } from "./utils";
-
-function AppContent() {
-  const [open, setOpen] = useState(false)
-
-  const settings = useSelector((state: RootState) => state.settings)
-  const status = useSelector((state: RootState) => state.status)
-  const dispatch = useDispatch()
-
-  const socket = useMemo(() => new WebSocket(getWebSocketEndpoint()), [])
-
-  const mode = settings.theme
-  const theme = useMemo(() =>
-    createTheme({
-      palette: {
-        mode: settings.theme,
-        background: {
-          default: settings.theme === 'light' ? grey[50] : '#121212'
-        },
-      },
-    }), [settings.theme]
-  )
-
-  const toggleDrawer = () => {
-    setOpen(!open)
-  }
-
-  const Settings = lazy(() => import('./Settings'))
-
-  return (
-    <ThemeProvider theme={theme}>
-      <Router>
-        <Box sx={{ display: 'flex' }}>
-          <CssBaseline />
-          <AppBar position="absolute" open={open}>
-            <Toolbar sx={{ pr: '24px' }}>
-              <IconButton
-                edge="start"
-                color="inherit"
-                aria-label="open drawer"
-                onClick={toggleDrawer}
-                sx={{
-                  marginRight: '36px',
-                  ...(open && { display: 'none' }),
-                }}
-              >
-                <Menu />
-              </IconButton>
-              <Typography
-                component="h1"
-                variant="h6"
-                color="inherit"
-                noWrap
-                sx={{ flexGrow: 1 }}
-              >
-                yt-dlp WebUI
-              </Typography>
-              {
-                status.freeSpace ?
-                  <div style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    flexWrap: 'wrap',
-                  }}>
-                    <Storage />
-                    <span>&nbsp;{formatGiB(status.freeSpace)}&nbsp;</span>
-                  </div>
-                  : null
-              }
-              <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                flexWrap: 'wrap',
-              }}>
-                <SettingsEthernet />
-                <span>&nbsp;{status.connected ? settings.serverAddr : 'not connected'}</span>
-              </div>
-            </Toolbar>
-          </AppBar>
-          <Drawer variant="permanent" open={open}>
-            <Toolbar
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-end',
-                px: [1],
-              }}
-            >
-              <IconButton onClick={toggleDrawer}>
-                <ChevronLeft />
-              </IconButton>
-            </Toolbar>
-            <Divider />
-            <List component="nav">
-              <Link to={'/'} style={
-                {
-                  textDecoration: 'none',
-                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
-                }
-              }>
-                <ListItemButton disabled={status.downloading}>
-                  <ListItemIcon>
-                    <Dashboard />
-                  </ListItemIcon>
-                  <ListItemText primary="Home" />
-                </ListItemButton>
-              </Link>
-              <ListItemButton onClick={() => dispatch(toggleListView())}>
-                <ListItemIcon>
-                  <FormatListBulleted />
-                </ListItemIcon>
-                <ListItemText primary="List view" />
-              </ListItemButton>
-              <Link to={'/settings'} style={
-                {
-                  textDecoration: 'none',
-                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
-                }
-              }>
-                <ListItemButton disabled={status.downloading}>
-                  <ListItemIcon>
-                    <SettingsIcon />
-                  </ListItemIcon>
-                  <ListItemText primary="Settings" />
-                </ListItemButton>
-              </Link>
-            </List>
-          </Drawer>
-          <Box
-            component="main"
-            sx={{
-              flexGrow: 1,
-              height: '100vh',
-              overflow: 'auto',
-            }}
-          >
-            <Toolbar />
-            <Routes>
-              <Route path="/" element={<Home socket={socket} />} />
-              <Route path="/settings" element={
-                <Suspense fallback={<CircularProgress />}>
-                  <Settings socket={socket} />
-                </Suspense>
-              } />
-            </Routes>
-          </Box>
-        </Box>
-      </Router>
-    </ThemeProvider>
-  );
-}
+import { RouterProvider } from 'react-router-dom'
+import { RecoilRoot } from 'recoil'
+import { router } from './router'

 export function App() {
  return (
-    <Provider store={store}>
-      <AppContent />
-    </Provider>
-  );
+    <RecoilRoot>
+      <RouterProvider router={router} />
+    </RecoilRoot>
+  )
 }
--- a/frontend/src/Home.tsx
+++ b/frontend/src/Home.tsx
@@ -1,481 +0,0 @@
-import { FileUpload } from "@mui/icons-material";
-import {
-  Backdrop,
-  Button,
-  ButtonGroup,
-  CircularProgress,
-  Container,
-  FormControl,
-  Grid,
-  IconButton,
-  InputAdornment,
-  InputLabel,
-  MenuItem,
-  Paper,
-  Select,
-  Snackbar,
-  styled,
-  TextField,
-  Typography
-} from "@mui/material";
-import { Buffer } from 'buffer';
-import { useEffect, useMemo, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { DownloadsCardView } from "./components/DownloadsCardView";
-import { DownloadsListView } from "./components/DownloadsListView";
-import { CliArguments } from "./features/core/argsParser";
-import I18nBuilder from "./features/core/intl";
-import { RPCClient } from "./features/core/rpcClient";
-import { connected, setFreeSpace } from "./features/status/statusSlice";
-import { RootState } from "./stores/store";
-import { IDLMetadata, RPCResult } from "./types";
-import { isValidURL, toFormatArgs } from "./utils";
-
-type Props = {
-  socket: WebSocket
-}
-
-export default function Home({ socket }: Props) {
-  // redux state
-  const settings = useSelector((state: RootState) => state.settings)
-  const status = useSelector((state: RootState) => state.status)
-  const dispatch = useDispatch()
-
-  // ephemeral state
-  const [activeDownloads, setActiveDownloads] = useState<Array<RPCResult>>();
-  const [downloadFormats, setDownloadFormats] = useState<IDLMetadata>();
-  const [pickedVideoFormat, setPickedVideoFormat] = useState('');
-  const [pickedAudioFormat, setPickedAudioFormat] = useState('');
-  const [pickedBestFormat, setPickedBestFormat] = useState('');
-
-  const [customArgs, setCustomArgs] = useState('');
-  const [downloadPath, setDownloadPath] = useState(0);
-  const [availableDownloadPaths, setAvailableDownloadPaths] = useState<string[]>([]);
-
-  const [fileNameOverride, setFilenameOverride] = useState('');
-
-  const [url, setUrl] = useState('');
-  const [workingUrl, setWorkingUrl] = useState('');
-
-  const [showBackdrop, setShowBackdrop] = useState(true);
-  const [showToast, setShowToast] = useState(true);
-
-  // memos
-  const i18n = useMemo(() => new I18nBuilder(settings.language), [settings.language])
-  const client = useMemo(() => new RPCClient(socket), [settings.serverAddr, settings.serverPort])
-  const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [settings.cliArgs])
-
-  /* -------------------- Effects -------------------- */
-  /* WebSocket connect event handler*/
-  useEffect(() => {
-    socket.onopen = () => {
-      dispatch(connected())
-      setCustomArgs(localStorage.getItem('last-input-args') ?? '')
-      setFilenameOverride(localStorage.getItem('last-filename-override') ?? '')
-    }
-  }, [])
-
-  useEffect(() => {
-    if (status.connected) {
-      client.running()
-      const interval = setInterval(() => client.running(), 1000)
-      return () => clearInterval(interval)
-    }
-  }, [status.connected])
-
-  useEffect(() => {
-    client.freeSpace()
-      .then(bytes => dispatch(setFreeSpace(bytes.result)))
-  }, [])
-
-  useEffect(() => {
-    socket.onmessage = (event) => {
-      const res = client.decode(event.data)
-      switch (typeof res.result) {
-        case 'object':
-          setActiveDownloads(
-            (res.result ?? [])
-              .filter((r: RPCResult) => !!r.info.url)
-              .sort((a: RPCResult, b: RPCResult) => a.info.title.localeCompare(b.info.title))
-          )
-          break
-        default:
-          break
-      }
-    }
-  }, [])
-
-  useEffect(() => {
-    if (activeDownloads && activeDownloads.length >= 0) {
-      setShowBackdrop(false)
-    }
-  }, [activeDownloads?.length])
-
-  useEffect(() => {
-    client.directoryTree()
-      .then(data => {
-        setAvailableDownloadPaths(data.result)
-      })
-  }, [])
-
-  /* -------------------- component functions -------------------- */
-
-  /**
-   * Retrive url from input, cli-arguments from checkboxes and emits via WebSocket
-   */
-  const sendUrl = (immediate?: string) => {
-    const codes = new Array<string>();
-    if (pickedVideoFormat !== '') codes.push(pickedVideoFormat);
-    if (pickedAudioFormat !== '') codes.push(pickedAudioFormat);
-    if (pickedBestFormat !== '') codes.push(pickedBestFormat);
-
-    client.download(
-      immediate || url || workingUrl,
-      `${cliArgs.toString()} ${toFormatArgs(codes)} ${customArgs}`,
-      availableDownloadPaths[downloadPath] ?? '',
-      fileNameOverride
-    )
-
-    setUrl('')
-    setWorkingUrl('')
-    setShowBackdrop(true)
-
-    setTimeout(() => {
-      resetInput()
-      setShowBackdrop(true)
-      setDownloadFormats(undefined)
-    }, 250);
-  }
-
-  /**
-   * Retrive url from input and display the formats selection view
-   */
-  const sendUrlFormatSelection = () => {
-    setWorkingUrl(url)
-    setUrl('')
-    setPickedAudioFormat('')
-    setPickedVideoFormat('')
-    setPickedBestFormat('')
-
-    setShowBackdrop(true)
-
-    client.formats(url)
-      ?.then(formats => {
-        setDownloadFormats(formats.result)
-        setShowBackdrop(false)
-        resetInput()
-      })
-  }
-
-  /**
-   * Update the url state whenever the input value changes
-   * @param e Input change event
-   */
-  const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setUrl(e.target.value)
-  }
-
-  /**
-   * Update the filename override state whenever the input value changes
-   * @param e Input change event
-   */
-  const handleFilenameOverrideChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFilenameOverride(e.target.value)
-    localStorage.setItem('last-filename-override', e.target.value)
-  }
-
-  /**
-   * Update the custom args state whenever the input value changes
-   * @param e Input change event
-   */
-  const handleCustomArgsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setCustomArgs(e.target.value)
-    localStorage.setItem("last-input-args", e.target.value)
-  }
-
-  /**
-   * Abort a specific download if id's provided, other wise abort all running ones.
-   * @param id The download id / pid
-   * @returns void
-   */
-  const abort = (id?: string) => {
-    if (id) {
-      client.kill(id)
-      return
-    }
-    client.killAll()
-  }
-
-  const parseUrlListFile = (event: any) => {
-    const urlList = event.target.files
-    const reader = new FileReader()
-    reader.addEventListener('load', $event => {
-      const base64 = $event.target?.result!.toString().split(',')[1]
-      Buffer.from(base64!, 'base64')
-        .toString()
-        .trimEnd()
-        .split('\n')
-        .filter(_url => isValidURL(_url))
-        .forEach(_url => sendUrl(_url))
-    })
-    reader.readAsDataURL(urlList[0])
-  }
-
-  const resetInput = () => {
-    const input = document.getElementById('urlInput') as HTMLInputElement;
-    input.value = '';
-
-    const filename = document.getElementById('customFilenameInput') as HTMLInputElement;
-    if (filename) {
-      filename.value = '';
-    }
-  }
-
-  /* -------------------- styled components -------------------- */
-
-  const Input = styled('input')({
-    display: 'none',
-  });
-
-  return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
-      <Backdrop
-        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-        open={showBackdrop}
-      >
-        <CircularProgress color="primary" />
-      </Backdrop>
-      <Grid container spacing={2}>
-        <Grid item xs={12}>
-          <Paper
-            sx={{
-              p: 2,
-              display: 'flex',
-              flexDirection: 'column',
-            }}
-          >
-            <Grid container>
-              <TextField
-                fullWidth
-                id="urlInput"
-                label={i18n.t('urlInput')}
-                variant="outlined"
-                onChange={handleUrlChange}
-                disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <label htmlFor="icon-button-file">
-                        <Input id="icon-button-file" type="file" accept=".txt" onChange={parseUrlListFile} />
-                        <IconButton color="primary" aria-label="upload file" component="span">
-                          <FileUpload />
-                        </IconButton>
-                      </label>
-                    </InputAdornment>
-                  ),
-                }}
-              />
-            </Grid>
-            <Grid container spacing={1} sx={{ mt: 1 }}>
-              {
-                settings.enableCustomArgs ?
-                  <Grid item xs={12}>
-                    <TextField
-                      id="customArgsInput"
-                      fullWidth
-                      label={i18n.t('customArgsInput')}
-                      variant="outlined"
-                      onChange={handleCustomArgsChange}
-                      value={customArgs}
-                      disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
-                    />
-                  </Grid> :
-                  null
-              }
-              {
-                settings.fileRenaming ?
-                  <Grid item xs={8}>
-                    <TextField
-                      id="customFilenameInput"
-                      fullWidth
-                      label={i18n.t('customFilename')}
-                      variant="outlined"
-                      value={fileNameOverride}
-                      onChange={handleFilenameOverrideChange}
-                      disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
-                    />
-                  </Grid> :
-                  null
-              }
-              {
-                settings.pathOverriding ?
-                  <Grid item xs={4}>
-                    <FormControl fullWidth>
-                      <InputLabel>{i18n.t('customPath')}</InputLabel>
-                      <Select
-                        label={i18n.t('customPath')}
-                        defaultValue={0}
-                        variant={'outlined'}
-                        value={downloadPath}
-                        onChange={(e) => setDownloadPath(Number(e.target.value))}
-                      >
-                        {availableDownloadPaths.map((val: string, idx: number) => (
-                          <MenuItem key={idx} value={idx}>{val}</MenuItem>
-                        ))}
-                      </Select>
-                    </FormControl>
-                  </Grid> :
-                  null
-              }
-            </Grid>
-            <Grid container spacing={1} pt={2}>
-              <Grid item>
-                <Button
-                  variant="contained"
-                  disabled={url === ''}
-                  onClick={() => settings.formatSelection ? sendUrlFormatSelection() : sendUrl()}
-                >
-                  {settings.formatSelection ? i18n.t('selectFormatButton') : i18n.t('startButton')}
-                </Button>
-              </Grid>
-              <Grid item>
-                <Button
-                  variant="contained"
-                  onClick={() => abort()}
-                >
-                  {i18n.t('abortAllButton')}
-                </Button>
-              </Grid>
-            </Grid>
-          </Paper>
-        </Grid>
-      </Grid >
-      {/* Format Selection grid */}
-      {
-        downloadFormats ? <Grid container spacing={2} mt={2}>
-          <Grid item xs={12}>
-            <Paper
-              sx={{
-                p: 2,
-                display: 'flex',
-                flexDirection: 'column',
-              }}
-            >
-              <Grid container>
-                <Grid item xs={12}>
-                  <Typography variant="h6" component="div" pb={1}>
-                    {downloadFormats.title}
-                  </Typography>
-                  {/* <Skeleton variant="rectangular" height={180} /> */}
-                </Grid>
-                <Grid item xs={12} pb={1}>
-                  <img src={downloadFormats.thumbnail} height={260} width="100%" style={{ objectFit: 'cover' }} />
-                </Grid>
-                {/* video only */}
-                <Grid item xs={12}>
-                  <Typography variant="body1" component="div">
-                    Best quality
-                  </Typography>
-                </Grid>
-                <Grid item pr={2} py={1}>
-                  <Button
-                    variant="contained"
-                    disabled={pickedBestFormat !== ''}
-                    onClick={() => {
-                      setPickedBestFormat(downloadFormats.best.format_id)
-                      setPickedVideoFormat('')
-                      setPickedAudioFormat('')
-                    }}>
-                    {downloadFormats.best.format_note || downloadFormats.best.format_id} - {downloadFormats.best.vcodec}+{downloadFormats.best.acodec}
-                    &nbsp;({downloadFormats.best.resolution}{(downloadFormats.best.filesize_approx>0)?", ~"+Math.round(downloadFormats.best.filesize_approx/1024/1024)+" MiB":""})
-                  </Button>
-                </Grid>
-                {/* video only */}
-                {downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length ?
-                  <Grid item xs={12}>
-                    <Typography variant="body1" component="div">
-                      Video data {downloadFormats.formats[1].acodec}
-                    </Typography>
-                  </Grid>
-                  : null
-                }
-                {downloadFormats.formats
-                  .filter(format => format.acodec === 'none' && format.vcodec !== 'none')
-                  .map((format, idx) => (
-                    <Grid item pr={2} py={1} key={idx}>
-                      <Button
-                        variant="contained"
-                        onClick={() => {
-                          setPickedVideoFormat(format.format_id)
-                          setPickedBestFormat('')
-                        }}
-                        disabled={pickedVideoFormat === format.format_id}
-                      >
-                        {format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
-                        &nbsp;({format.resolution}{(format.filesize_approx>0)?", ~"+Math.round(format.filesize_approx/1024/1024)+" MiB":""})
-                      </Button>
-                    </Grid>
-                  ))
-                }
-                {downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length ?
-                  <Grid item xs={12}>
-                    <Typography variant="body1" component="div">
-                      Audio data
-                    </Typography>
-                  </Grid>
-                  : null
-                }
-                {downloadFormats.formats
-                  .filter(format => format.acodec !== 'none' && format.vcodec === 'none')
-                  .map((format, idx) => (
-                    <Grid item pr={2} py={1} key={idx}>
-                      <Button
-                        variant="contained"
-                        onClick={() => {
-                          setPickedAudioFormat(format.format_id)
-                          setPickedBestFormat('')
-                        }}
-                        disabled={pickedAudioFormat === format.format_id}
-                      >
-                        {format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
-                        {(format.filesize_approx>0)?" (~"+Math.round(format.filesize_approx/1024/1024)+" MiB)":""}
-                      </Button>
-                    </Grid>
-                  ))
-                }
-                <Grid item xs={12} pt={2}>
-                  <ButtonGroup disableElevation variant="contained">
-                    <Button
-                      onClick={() => sendUrl()}
-                      disabled={!pickedBestFormat && !(pickedAudioFormat || pickedVideoFormat)}
-                    > Download
-                    </Button>
-                    <Button
-                      onClick={() => {
-                        setPickedAudioFormat('');
-                        setPickedVideoFormat('');
-                        setPickedBestFormat('');
-                      }}
-                    > Clear
-                    </Button>
-                  </ButtonGroup>
-                </Grid>
-              </Grid>
-            </Paper>
-          </Grid>
-        </Grid> : null
-      }
-      {
-        settings.listView ?
-          <DownloadsListView downloads={activeDownloads ?? []} abortFunction={abort} /> :
-          <DownloadsCardView downloads={activeDownloads ?? []} abortFunction={abort} />
-      }
-      <Snackbar
-        open={showToast === status.connected}
-        autoHideDuration={1500}
-        message="Connected"
-        onClose={() => setShowToast(false)}
-      />
-    </Container >
-  );
-}
--- a/frontend/src/Layout.tsx
+++ b/frontend/src/Layout.tsx
@@ -0,0 +1,167 @@
+import { ThemeProvider } from '@emotion/react'
+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 SettingsEthernet from '@mui/icons-material/SettingsEthernet'
+import { Box, createTheme } from '@mui/material'
+import CssBaseline from '@mui/material/CssBaseline'
+import Divider from '@mui/material/Divider'
+import IconButton from '@mui/material/IconButton'
+import List from '@mui/material/List'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import Toolbar from '@mui/material/Toolbar'
+import Typography from '@mui/material/Typography'
+import { grey } from '@mui/material/colors'
+import { useMemo, useState } from 'react'
+import { Link, Outlet } from 'react-router-dom'
+import { useRecoilValue } from 'recoil'
+import { settingsState } from './atoms/settings'
+import { connectedState } from './atoms/status'
+import AppBar from './components/AppBar'
+import Drawer from './components/Drawer'
+import FreeSpaceIndicator from './components/FreeSpaceIndicator'
+import Logout from './components/Logout'
+import SocketSubscriber from './components/SocketSubscriber'
+import ThemeToggler from './components/ThemeToggler'
+import Toaster from './providers/ToasterProvider'
+
+export default function Layout() {
+  const [open, setOpen] = useState(false)
+
+  const settings = useRecoilValue(settingsState)
+  const isConnected = useRecoilValue(connectedState)
+
+  const mode = settings.theme
+  const theme = useMemo(() =>
+    createTheme({
+      palette: {
+        mode: settings.theme,
+        background: {
+          default: settings.theme === 'light' ? grey[50] : '#121212'
+        },
+      },
+    }), [settings.theme]
+  )
+
+  const toggleDrawer = () => setOpen(state => !state)
+
+  return (
+    <ThemeProvider theme={theme}>
+      <SocketSubscriber>
+        <Box sx={{ display: 'flex' }}>
+          <CssBaseline />
+          <AppBar position="absolute" open={open}>
+            <Toolbar sx={{ pr: '24px' }}>
+              <IconButton
+                edge="start"
+                color="inherit"
+                aria-label="open drawer"
+                onClick={toggleDrawer}
+                sx={{
+                  marginRight: '36px',
+                  ...(open && { display: 'none' }),
+                }}
+              >
+                <Menu />
+              </IconButton>
+              <Typography
+                component="h1"
+                variant="h6"
+                color="inherit"
+                noWrap
+                sx={{ flexGrow: 1 }}
+              >
+                yt-dlp WebUI
+              </Typography>
+              <FreeSpaceIndicator />
+              <div style={{
+                display: 'flex',
+                alignItems: 'center',
+                flexWrap: 'wrap',
+              }}>
+                <SettingsEthernet />
+                <span>
+                  &nbsp;{isConnected ? settings.serverAddr : 'not connected'}
+                </span>
+              </div>
+            </Toolbar>
+          </AppBar>
+          <Drawer variant="permanent" open={open}>
+            <Toolbar
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-end',
+                px: [1],
+              }}
+            >
+              <IconButton onClick={toggleDrawer}>
+                <ChevronLeft />
+              </IconButton>
+            </Toolbar>
+            <Divider />
+            <List component="nav">
+              <Link to={'/'} style={
+                {
+                  textDecoration: 'none',
+                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
+                }
+              }>
+                <ListItemButton>
+                  <ListItemIcon>
+                    <Dashboard />
+                  </ListItemIcon>
+                  <ListItemText primary="Home" />
+                </ListItemButton>
+              </Link>
+              <Link to={'/archive'} style={
+                {
+                  textDecoration: 'none',
+                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
+                }
+              }>
+                <ListItemButton>
+                  <ListItemIcon>
+                    <DownloadIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Archive" />
+                </ListItemButton>
+              </Link>
+              <Link to={'/settings'} style={
+                {
+                  textDecoration: 'none',
+                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
+                }
+              }>
+                <ListItemButton>
+                  <ListItemIcon>
+                    <SettingsIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Settings" />
+                </ListItemButton>
+              </Link>
+              <ThemeToggler />
+              <Logout />
+            </List>
+          </Drawer>
+          <Box
+            component="main"
+            sx={{
+              flexGrow: 1,
+              height: '100vh',
+              overflow: 'auto',
+            }}
+          >
+            <Toolbar />
+            <Outlet />
+          </Box>
+        </Box>
+        <Toaster />
+      </SocketSubscriber>
+    </ThemeProvider>
+  )
+}
--- a/frontend/src/assets/i18n.yaml
+++ b/frontend/src/assets/i18n.yaml
@@ -28,6 +28,11 @@ languages:
    customPath: Custom path
    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
    customArgsInput: Custom yt-dlp arguments
+    rpcConnErr: Error while conencting to RPC server
+    splashText: No active downloads
+    archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
+    playlistCheckbox: Download playlist (it will take time, after submitting you may close this window)
  italian:
    urlInput: URL di YouTube o di qualsiasi altro servizio supportato
    statusTitle: Stato
@@ -55,11 +60,17 @@ languages:
    customPath: Custom path
    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
    customArgsInput: Custom yt-dlp arguments
+    rpcConnErr: Error nella connessione al server RPC
+    splashText: Nessun download attivo
+    archiveTitle: Archivio
+    clipboardAction: URL copiato negli appunti
+    playlistCheckbox: Download playlist (richiederà tempo, puoi chiudere la finestra dopo l'inoltro)
  chinese:
    urlInput: YouTube 或其他受支持服务的视频网址
    statusTitle: 状态
-    startButton: 开始
    statusReady: 就绪
+    selectFormatButton: 选择格式
+    startButton: 开始
    abortAllButton: 全部中止
    updateBinButton: 更新 yt-dlp 可执行文件
    darkThemeButton: 黑暗主题
@@ -82,60 +93,75 @@ languages:
    customPath: 自定义路径
    customArgs: 启用自定义 yt-dlp 参数（能力越大 = 责任越大）
    customArgsInput: 自定义 yt-dlp 参数
+    rpcConnErr: 连接 RPC 服务器发生错误
+    splashText: 没有正在进行的下载
+    archiveTitle: 归档
+    clipboardAction: 复制 URL 到剪贴板
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
  spanish:
-    urlInput: YouTube or other supported service video url
-    statusTitle: Status
-    startButton: Start
-    statusReady: Ready
-    abortAllButton: Abort All
-    updateBinButton: Update yt-dlp binary
-    darkThemeButton: Dark theme
-    lightThemeButton: Light theme
-    settingsAnchor: Settings
-    serverAddressTitle: Server address
-    serverPortTitle: Port
-    extractAudioCheckbox: Extract audio
-    noMTimeCheckbox: Don't set file modification time
-    bgReminder: Once you close this page the download will continue in the background.
-    toastConnected: 'Connected to '
-    toastUpdated: Updated yt-dlp binary!
-    formatSelectionEnabler: Enable video/audio formats selection
-    themeSelect: 'Theme'
-    languageSelect: 'Language'
-    overridesAnchor: Overrides
-    pathOverrideOption: Enable output path overriding
-    filenameOverrideOption: Enable output file name overriding
-    customFilename: Custom filemame (leave blank to use default)
-    customPath: Custom path
-    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
-    customArgsInput: Custom yt-dlp arguments
+    urlInput: URL de YouTube u otro servicio compatible
+    statusTitle: Estado
+    startButton: Iniciar
+    statusReady: Listo
+    abortAllButton: Cancelar Todo
+    updateBinButton: Actualizar el binario yt-dlp
+    darkThemeButton: Tema oscuro
+    lightThemeButton: Tema claro
+    settingsAnchor: Ajustes
+    serverAddressTitle: Dirección del servidor
+    serverPortTitle: Puerto
+    extractAudioCheckbox: Extraer audio
+    noMTimeCheckbox: No guardar el tiempo de modificación del archivo
+    bgReminder: Si cierras esta página, la descarga continuará en segundo plano.
+    toastConnected: 'Conectado a'
+    toastUpdated: ¡El binario yt-dlp está actualizado!
+    formatSelectionEnabler: Habilitar la selección de formatos de video/audio
+    themeSelect: 'Tema'
+    languageSelect: 'Idiomas'
+    overridesAnchor: Anulaciones
+    pathOverrideOption: Sobreescribir en la ruta de salida
+    filenameOverrideOption: Sobreescribir el nombre del fichero
+    customFilename: Nombre de archivo personalizado (en blanco para usar el predeterminado)
+    customPath: Ruta personalizada
+    customArgs: Habilitar los argumentos yt-dlp personalizados (un gran poder conlleva una gran responsabilidad)
+    customArgsInput: Argumentos yt-dlp personalizados
+    rpcConnErr: Error al conectarse al servidor RPC
+    splashText: No active downloads
+    archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
  russian:
-    urlInput: YouTube or other supported service video url
-    statusTitle: Status
-    startButton: Start
-    statusReady: Ready
-    abortAllButton: Abort All
-    updateBinButton: Update yt-dlp binary
-    darkThemeButton: Dark theme
-    lightThemeButton: Light theme
-    settingsAnchor: Settings
-    serverAddressTitle: Server address
-    serverPortTitle: Port
-    extractAudioCheckbox: Extract audio
-    noMTimeCheckbox: Don't set file modification time
-    bgReminder: Once you close this page the download will continue in the background.
-    toastConnected: 'Connected to '
-    toastUpdated: Updated yt-dlp binary!
-    formatSelectionEnabler: Enable video/audio formats selection
-    themeSelect: 'Theme'
-    languageSelect: 'Language'
-    overridesAnchor: Overrides
-    pathOverrideOption: Enable output path overriding
-    filenameOverrideOption: Enable output file name overriding
-    customFilename: Custom filemame (leave blank to use default)
-    customPath: Custom path
-    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
-    customArgsInput: Custom yt-dlp arguments
+    urlInput: URL-адрес YouTube или любого другого поддерживаемого сервиса
+    statusTitle: Статус
+    startButton: Начать
+    statusReady: Готово
+    abortAllButton: Прервать все
+    updateBinButton: Обновить бинарный файл yt-dlp
+    darkThemeButton: Темная тема
+    lightThemeButton: Светлая тема
+    settingsAnchor: Настройки
+    serverAddressTitle: Адрес сервера
+    serverPortTitle: Порт
+    extractAudioCheckbox: Извлечь аудио
+    noMTimeCheckbox: Не устанавливать время модификации файла
+    bgReminder: Как только вы закроете эту страницу, загрузка продолжится в фоновом режиме.
+    toastConnected: 'Подключен к '
+    toastUpdated: Бинарный файл yt-dlp обновлен!
+    formatSelectionEnabler: Активировать выбор видео/аудио форматов
+    themeSelect: 'Тема'
+    languageSelect: 'Язык'
+    overridesAnchor: Переопределить
+    pathOverrideOption: Активировать переопределение выходного пути
+    filenameOverrideOption: Активировать переопределение имени выходного файла
+    customFilename: Задать имя файла (оставьте пустым, чтобы использовать значение по умолчанию)
+    customPath: Задать путь
+    customArgs: Включить настраиваемые аргументы yt-dlp (большая сила = большая ответственность)
+    customArgsInput: Пользовательские аргументы yt-dlp
+    rpcConnErr: Ошибка при подключении к серверу RPC
+    splashText: Нет активных загрузок
+    archiveTitle: Архив
+    clipboardAction: URL скопирован в буфер обмена
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
  korean:
    urlInput: YouTube나 다른 지원되는 사이트의 URL
    statusTitle: 상태
@@ -163,6 +189,11 @@ languages:
    customPath: Custom path
    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
    customArgsInput: Custom yt-dlp arguments
+    rpcConnErr: Error while conencting to RPC server
+    splashText: No active downloads
+    archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
  japanese:
    urlInput: YouTubeまたはサポート済み動画のURL
    statusTitle: 状態
@@ -190,4 +221,105 @@ languages:
    customFilename:  (空白の場合は元のファイル名)
    customPath: 保存先
    customArgs: yt-dlpのオプションの有効化 (最適設定にする場合)
-    customArgsInput: yt-dlpのオプション
+    customArgsInput: yt-dlpのオプション
+    rpcConnErr: Error while conencting to RPC server
+    splashText: No active downloads
+    archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+  catalan:
+    urlInput: URL de YouTube o d'un altre servei compatible
+    statusTitle: Estat
+    startButton: Iniciar
+    statusReady: Llest
+    abortAllButton: Cancel·lar Tot
+    updateBinButton: Actualitzar el binari yt-dlp
+    darkThemeButton: Tema fosc
+    lightThemeButton: Tema clar
+    settingsAnchor: Configuració
+    serverAddressTitle: Direcció del servidor
+    serverPortTitle: Port
+    extractAudioCheckbox: Extreure àudio
+    noMTimeCheckbox: No guardar el temps de modificació de l'arxiu
+    bgReminder: Si tanques aquesta pàgina, la descàrrega continuarà en segon pla.
+    toastConnected: 'Connectat a'
+    toastUpdated: El binari yt-dlp està actualitzat!
+    formatSelectionEnabler: Habilitar la selecció de formats de vídeo/àudio
+    themeSelect: 'Tema'
+    languageSelect: 'Idiomes'
+    overridesAnchor: Anul·lacions
+    pathOverrideOption: Sobreescriure en la ruta de sortida
+    filenameOverrideOption: Sobreescriure el nom del fitxer
+    customFilename: Nom d'arxiu personalitzat (en blanc per utilitzar el predeterminat)
+    customPath: Ruta personalitzada
+    customArgs: Habilitar els arguments yt-dlp personalitzats (un gran poder comporta una gran responsabilitat)
+    customArgsInput: Arguments yt-dlp personalitzats
+    rpcConnErr: Error en connectar-se al servidor RPC
+    splashText: No active downloads
+    archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+  ukrainian:
+    urlInput: URL-адреса YouTube або будь-якого іншого підтримуваного сервісу
+    statusTitle: Статус
+    startButton: Почати
+    statusReady: Готово
+    abortAllButton: Перервати все 
+    updateBinButton: Оновити бінарний файл yt-dlp
+    darkThemeButton: Темна тема 
+    lightThemeButton: Світла тема 
+    settingsAnchor: Налаштування 
+    serverAddressTitle: Адреса сервера
+    serverPortTitle: Порт 
+    extractAudioCheckbox: Витягти аудіо 
+    noMTimeCheckbox: Не встановлювати час модифікації файлу
+    bgReminder: Як тільки ви закриєте цю сторінку, завантаження продовжиться у фоновому режимі. 
+    toastConnected: 'Підключений до '
+    toastUpdated: Бінарний файл yt-dlp оновлено!
+    formatSelectionEnabler: Активувати вибір відео/аудіо форматів
+    themeSelect: 'Тема'
+    languageSelect: 'Мова'
+    overridesAnchor: Перевизначити
+    pathOverrideOption: Активувати перевизначення вихідного шляху
+    filenameOverrideOption: Активувати перевизначення імені вихідного файлу
+    customFilename: Введіть ім'я файлу (залишіть порожнім, щоб використовувати значення за замовчуванням)
+    customPath: Задати шлях
+    customArgs: Включити аргументи, що настроюються yt-dlp (велика сила = велика відповідальність)
+    customArgsInput: Користувальницькі аргументи yt-dlp
+    rpcConnErr: Помилка при підключенні до сервера RPC
+    splashText: Немає активних завантажень
+    archiveTitle: Архів
+    clipboardAction: URL скопійовано в буфер обміну
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+  polish:
+    urlInput: Adres URL YouTube lub innej obsługiwanej usługi
+    statusTitle: Status
+    startButton: Początek
+    statusReady: Gotowy
+    abortAllButton: Anuluj wszystko
+    updateBinButton: Zaktualizuj plik binarny yt-dlp
+    darkThemeButton: Ciemny motyw
+    lightThemeButton: Światło motyw
+    settingsAnchor: Ustawienia
+    serverAddressTitle: Adres serwera
+    serverPortTitle: Port
+    extractAudioCheckbox: Wyodrębnij dźwięk
+    noMTimeCheckbox: Nie ustawiaj czasu modyfikacji pliku
+    bgReminder: Po zamknięciu tej strony pobieranie będzie kontynuowane w tle. 
+    toastConnected: 'Połączony z '
+    toastUpdated: Zaktualizowano plik binarny yt-dlp!
+    formatSelectionEnabler: Aktywuj wybór formatów wideo/audio
+    themeSelect: 'Motyw'
+    languageSelect: 'Język'
+    overridesAnchor: Przedefiniuj
+    pathOverrideOption: Aktywuj zastąpienie ścieżki źródłowej
+    filenameOverrideOption: Aktywuj zastępowanie nazwy pliku źródłowego
+    customFilename: Wprowadź nazwę pliku (pozostaw puste, aby użyć nazwy domyślnej)
+    customPath: Ustaw ścieżkę
+    customArgs: Uwzględnij konfigurowalne argumenty yt-dlp (wielka moc = wielka odpowiedzialność)
+    customArgsInput: Niestandardowe argumenty yt-dlp
+    rpcConnErr: Wystąpił błąd podczas łączenia z serwerem RPC
+    splashText: Brak aktywnych pobrań
+    archiveTitle: Archiwum
+    clipboardAction: Adres URL zostanie skopiowany do schowka
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
--- a/frontend/src/atoms/downloadTemplate.ts
+++ b/frontend/src/atoms/downloadTemplate.ts
@@ -0,0 +1,9 @@
+import { atom } from 'recoil'
+
+export const downloadTemplateState = atom({
+  key: 'downloadTemplateState',
+  default: localStorage.getItem('lastDownloadTemplate') ?? '',
+  effects: [
+    ({ onSet }) => onSet(e => localStorage.setItem('lastDownloadTemplate', e))
+  ]
+})
--- a/frontend/src/atoms/downloads.ts
+++ b/frontend/src/atoms/downloads.ts
@@ -0,0 +1,7 @@
+import { atom } from 'recoil'
+import { RPCResult } from '../types'
+
+export const activeDownloadsState = atom<RPCResult[] | undefined>({
+  key: 'activeDownloadsState',
+  default: undefined
+})
--- 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/i18n.ts
+++ b/frontend/src/atoms/i18n.ts
@@ -0,0 +1,9 @@
+import { selector } from 'recoil'
+import I18nBuilder from '../lib/intl'
+import { languageState } from './settings'
+
+export const i18nBuilderState = selector({
+  key: 'i18nBuilderState',
+  get: ({ get }) => new I18nBuilder(get(languageState)),
+  dangerouslyAllowMutability: true,
+})
--- a/frontend/src/atoms/rpc.ts
+++ b/frontend/src/atoms/rpc.ts
@@ -0,0 +1,12 @@
+import { selector } from 'recoil'
+import { RPCClient } from '../lib/rpcClient'
+import { rpcHTTPEndpoint, rpcWebSocketEndpoint } from './settings'
+
+export const rpcClientState = selector({
+  key: 'rpcClientState',
+  get: ({ get }) =>
+    new RPCClient(get(rpcHTTPEndpoint), get(rpcWebSocketEndpoint)),
+  set: ({ get }) =>
+    new RPCClient(get(rpcHTTPEndpoint), get(rpcWebSocketEndpoint)),
+  dangerouslyAllowMutability: true,
+})
--- a/frontend/src/atoms/settings.ts
+++ b/frontend/src/atoms/settings.ts
@@ -0,0 +1,175 @@
+import { atom, selector } from 'recoil'
+
+export type Language =
+  | 'english'
+  | 'chinese'
+  | 'russian'
+  | 'italian'
+  | 'spanish'
+  | 'korean'
+  | 'japanese'
+  | 'catalan'
+  | 'ukrainian'
+  | 'polish'
+
+export const languages = [
+  'english',
+  'chinese',
+  'russian',
+  'italian',
+  'spanish',
+  'korean',
+  'japanese',
+  'catalan',
+  'ukrainian',
+  'polish',
+] as const
+
+export type Theme = 'light' | 'dark'
+
+export interface SettingsState {
+  serverAddr: string
+  serverPort: number
+  language: Language
+  theme: Theme
+  cliArgs: string
+  formatSelection: boolean
+  fileRenaming: boolean
+  pathOverriding: boolean
+  enableCustomArgs: boolean
+  listView: boolean
+}
+
+export const languageState = atom<Language>({
+  key: 'languageState',
+  default: localStorage.getItem('language') as Language || 'english',
+  effects: [
+    ({ onSet }) =>
+      onSet(l => localStorage.setItem('language', l.toString()))
+  ]
+})
+
+export const themeState = atom<Theme>({
+  key: 'themeStateState',
+  default: localStorage.getItem('theme') as Theme || 'light',
+  effects: [
+    ({ onSet }) =>
+      onSet(l => localStorage.setItem('theme', l.toString()))
+  ]
+})
+
+export const serverAddressState = atom<string>({
+  key: 'serverAddressState',
+  default: localStorage.getItem('server-addr') || window.location.hostname,
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('server-addr', a.toString()))
+  ]
+})
+
+export const serverPortState = atom<number>({
+  key: 'serverPortState',
+  default: Number(localStorage.getItem('server-port')) ||
+    Number(window.location.port),
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('server-port', a.toString()))
+  ]
+})
+
+export const latestCliArgumentsState = atom<string>({
+  key: 'latestCliArgumentsState',
+  default: localStorage.getItem('cli-args') || '',
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('cli-args', a.toString()))
+  ]
+})
+
+export const formatSelectionState = atom({
+  key: 'formatSelectionState',
+  default: localStorage.getItem('format-selection') === "true",
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('format-selection', a.toString()))
+  ]
+})
+
+export const fileRenamingState = atom({
+  key: 'fileRenamingState',
+  default: localStorage.getItem('file-renaming') === "true",
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('file-renaming', a.toString()))
+  ]
+})
+
+export const pathOverridingState = atom({
+  key: 'pathOverridingState',
+  default: localStorage.getItem('path-overriding') === "true",
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('path-overriding', a.toString()))
+  ]
+})
+
+export const enableCustomArgsState = atom({
+  key: 'enableCustomArgsState',
+  default: localStorage.getItem('enable-custom-args') === "true",
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('enable-custom-args', a.toString()))
+  ]
+})
+
+export const listViewState = atom({
+  key: 'listViewState',
+  default: localStorage.getItem('listview') === "true",
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('listview', a.toString()))
+  ]
+})
+
+export const serverAddressAndPortState = selector({
+  key: 'serverAddressAndPortState',
+  get: ({ get }) => `${get(serverAddressState)}:${get(serverPortState)}`
+})
+
+export const serverURL = selector({
+  key: 'serverURL',
+  get: ({ get }) =>
+    `${window.location.protocol}//${get(serverAddressState)}:${get(serverPortState)}`
+})
+
+export const rpcWebSocketEndpoint = selector({
+  key: 'rpcWebSocketEndpoint',
+  get: ({ get }) => {
+    const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+    return `${proto}//${get(serverAddressAndPortState)}/rpc/ws`
+  }
+})
+
+export const rpcHTTPEndpoint = selector({
+  key: 'rpcHTTPEndpoint',
+  get: ({ get }) => {
+    const proto = window.location.protocol
+    return `${proto}//${get(serverAddressAndPortState)}/rpc/http`
+  }
+})
+
+export const settingsState = selector<SettingsState>({
+  key: 'settingsState',
+  get: ({ get }) => ({
+    serverAddr: get(serverAddressState),
+    serverPort: get(serverPortState),
+    language: get(languageState),
+    theme: get(themeState),
+    cliArgs: get(latestCliArgumentsState),
+    formatSelection: get(formatSelectionState),
+    fileRenaming: get(fileRenamingState),
+    pathOverriding: get(pathOverridingState),
+    enableCustomArgs: get(enableCustomArgsState),
+    listView: get(listViewState),
+  })
+})
--- a/frontend/src/atoms/status.ts
+++ b/frontend/src/atoms/status.ts
@@ -0,0 +1,40 @@
+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
+})
+
+export const updatedBinaryState = atom({
+  key: 'updatedBinaryState',
+  default: false
+})
+
+export const isDownloadingState = atom({
+  key: 'isDownloadingState',
+  default: false
+})
+
+// export const freeSpaceBytesState = selector({
+//   key: 'freeSpaceBytesState',
+//   get: async ({ get }) => {
+//     const res = await get(rpcClientState).freeSpace()
+//     return res.result
+//   }
+// })
+
+export const availableDownloadPathsState = selector({
+  key: 'availableDownloadPathsState',
+  get: async ({ get }) => {
+    const res = await get(rpcClientState).directoryTree()
+    return res.result
+  }
+})
--- a/frontend/src/atoms/toast.ts
+++ b/frontend/src/atoms/toast.ts
@@ -0,0 +1,15 @@
+import { AlertColor } from '@mui/material'
+import { atom } from 'recoil'
+
+type Toast = {
+  open: boolean,
+  message: string
+  autoClose: boolean
+  createdAt: number,
+  severity?: AlertColor
+}
+
+export const toastListState = atom<Toast[]>({
+  key: 'toastListState',
+  default: [],
+})
--- a/frontend/src/atoms/ui.ts
+++ b/frontend/src/atoms/ui.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil'
+
+export const loadingAtom = atom({
+  key: 'loadingAtom',
+  default: false
+})
--- a/frontend/src/components/AppBar.tsx
+++ b/frontend/src/components/AppBar.tsx
@@ -7,7 +7,7 @@ interface AppBarProps extends MuiAppBarProps {

 const drawerWidth = 240;

-export const AppBar = styled(MuiAppBar, {
+const AppBar = styled(MuiAppBar, {
  shouldForwardProp: (prop) => prop !== 'open',
 })<AppBarProps>(({ theme, open }) => ({
  zIndex: theme.zIndex.drawer + 1,
@@ -23,4 +23,6 @@ export const AppBar = styled(MuiAppBar, {
      duration: theme.transitions.duration.enteringScreen,
    }),
  }),
-}));
+}));
+
+export default AppBar
--- a/frontend/src/components/ArchiveResult.tsx
+++ b/frontend/src/components/ArchiveResult.tsx
@@ -1,30 +0,0 @@
-import { Card, CardActionArea, CardContent, CardMedia, Skeleton, Typography } from "@mui/material";
-import { ellipsis } from "../utils";
-
-type Props = {
-    title: string,
-    thumbnail: string,
-    url: string,
-}
-
-export function ArchiveResult({ title, thumbnail, url }: Props) {
-    return (
-        <Card>
-            <CardActionArea onClick={() => window.open(url)}>
-                {thumbnail ?
-                    <CardMedia
-                        component="img"
-                        height={180}
-                        image={thumbnail}
-                    /> :
-                    <Skeleton variant="rectangular" height={180} />
-                }
-                <CardContent>
-                    <Typography gutterBottom variant="body2" component="div">
-                        {ellipsis(title, 72)}
-                    </Typography>
-                </CardContent>
-            </CardActionArea>
-        </Card>
-    )
-}
--- a/frontend/src/components/DownloadDialog.tsx
+++ b/frontend/src/components/DownloadDialog.tsx
@@ -0,0 +1,382 @@
+import { FileUpload } from '@mui/icons-material'
+import CloseIcon from '@mui/icons-material/Close'
+import {
+  Backdrop,
+  Button,
+  Checkbox,
+  Container,
+  FormControl,
+  FormControlLabel,
+  Grid,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
+  TextField,
+  styled
+} from '@mui/material'
+import AppBar from '@mui/material/AppBar'
+import Dialog from '@mui/material/Dialog'
+import Slide from '@mui/material/Slide'
+import Toolbar from '@mui/material/Toolbar'
+import Typography from '@mui/material/Typography'
+import { TransitionProps } from '@mui/material/transitions'
+import { Buffer } from 'buffer'
+import {
+  forwardRef,
+  useMemo,
+  useRef,
+  useState,
+  useTransition
+} from 'react'
+import { useRecoilValue } from 'recoil'
+import { settingsState } from '../atoms/settings'
+import { availableDownloadPathsState, connectedState } from '../atoms/status'
+import FormatsGrid from '../components/FormatsGrid'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+import { CliArguments } from '../lib/argsParser'
+import type { DLMetadata } from '../types'
+import { isValidURL, toFormatArgs } from '../utils'
+
+const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement
+  },
+  ref: React.Ref<unknown>,
+) {
+  return <Slide direction="up" ref={ref} {...props} />
+})
+
+type Props = {
+  open: boolean
+  onClose: () => void
+  onDownloadStart: () => void
+}
+
+export default function DownloadDialog({
+  open,
+  onClose,
+  onDownloadStart
+}: Props) {
+  // recoil state
+  const settings = useRecoilValue(settingsState)
+  const isConnected = useRecoilValue(connectedState)
+  const availableDownloadPaths = useRecoilValue(availableDownloadPathsState)
+
+  // ephemeral state
+  const [downloadFormats, setDownloadFormats] = useState<DLMetadata>()
+  const [pickedVideoFormat, setPickedVideoFormat] = useState('')
+  const [pickedAudioFormat, setPickedAudioFormat] = useState('')
+  const [pickedBestFormat, setPickedBestFormat] = useState('')
+
+  const [customArgs, setCustomArgs] = useState('')
+  const [downloadPath, setDownloadPath] = useState(0)
+
+  const [fileNameOverride, setFilenameOverride] = useState('')
+
+  const [url, setUrl] = useState('')
+  const [workingUrl, setWorkingUrl] = useState('')
+
+  const [isPlaylist, setIsPlaylist] = useState(false)
+
+  // memos
+  const cliArgs = useMemo(() =>
+    new CliArguments().fromString(settings.cliArgs), [settings.cliArgs]
+  )
+
+  // context
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+
+  // refs
+  const urlInputRef = useRef<HTMLInputElement>(null)
+  const customFilenameInputRef = useRef<HTMLInputElement>(null)
+
+  // transitions
+  const [isPending, startTransition] = useTransition()
+
+  /**
+    * Retrive url from input, cli-arguments from checkboxes and emits via WebSocket
+  */
+  const sendUrl = (immediate?: string) => {
+    const codes = new Array<string>()
+    if (pickedVideoFormat !== '') codes.push(pickedVideoFormat)
+    if (pickedAudioFormat !== '') codes.push(pickedAudioFormat)
+    if (pickedBestFormat !== '') codes.push(pickedBestFormat)
+
+    client.download(
+      immediate || url || workingUrl,
+      `${cliArgs.toString()} ${toFormatArgs(codes)} ${customArgs}`,
+      availableDownloadPaths[downloadPath] ?? '',
+      fileNameOverride,
+      isPlaylist,
+    )
+
+    setUrl('')
+    setWorkingUrl('')
+
+    setTimeout(() => {
+      resetInput()
+      setDownloadFormats(undefined)
+      onDownloadStart()
+    }, 250)
+  }
+
+  /**
+   * Retrive url from input and display the formats selection view
+   */
+  const sendUrlFormatSelection = () => {
+    setWorkingUrl(url)
+    setUrl('')
+    setPickedAudioFormat('')
+    setPickedVideoFormat('')
+    setPickedBestFormat('')
+
+    client.formats(url)
+      ?.then(formats => {
+        setDownloadFormats(formats.result)
+        resetInput()
+      })
+  }
+
+  /**
+   * Update the url state whenever the input value changes
+   * @param e Input change event
+   */
+  const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUrl(e.target.value)
+  }
+
+  /**
+   * Update the filename override state whenever the input value changes
+   * @param e Input change event
+   */
+  const handleFilenameOverrideChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFilenameOverride(e.target.value)
+    localStorage.setItem('last-filename-override', e.target.value)
+  }
+
+  /**
+   * Update the custom args state whenever the input value changes
+   * @param e Input change event
+   */
+  const handleCustomArgsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCustomArgs(e.target.value)
+    localStorage.setItem("last-input-args", e.target.value)
+  }
+
+  const parseUrlListFile = (event: any) => {
+    const urlList = event.target.files
+    const reader = new FileReader()
+    reader.addEventListener('load', $event => {
+      const base64 = $event.target?.result!.toString().split(',')[1]
+      Buffer.from(base64!, 'base64')
+        .toString()
+        .trimEnd()
+        .split('\n')
+        .filter(_url => isValidURL(_url))
+        .forEach(_url => sendUrl(_url))
+    })
+    reader.readAsDataURL(urlList[0])
+  }
+
+  const resetInput = () => {
+    urlInputRef.current!.value = ''
+    if (customFilenameInputRef.current) {
+      customFilenameInputRef.current!.value = ''
+    }
+  }
+
+  /* -------------------- styled components -------------------- */
+
+  const Input = styled('input')({
+    display: 'none',
+  })
+
+  return (
+    <div>
+      <Dialog
+        fullScreen
+        open={open}
+        onClose={onClose}
+        TransitionComponent={Transition}
+      >
+        <Backdrop
+          sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+          open={isPending}
+        />
+        <AppBar sx={{ position: 'relative' }}>
+          <Toolbar>
+            <IconButton
+              edge="start"
+              color="inherit"
+              onClick={onClose}
+              aria-label="close"
+            >
+              <CloseIcon />
+            </IconButton>
+            <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
+              Download
+            </Typography>
+          </Toolbar>
+        </AppBar>
+        <Container sx={{ my: 4 }}>
+          <Grid container spacing={2}>
+            <Grid item xs={12}>
+              <Paper
+                sx={{
+                  p: 2,
+                  display: 'flex',
+                  flexDirection: 'column',
+                }}
+              >
+                <Grid container>
+                  <TextField
+                    fullWidth
+                    ref={urlInputRef}
+                    label={i18n.t('urlInput')}
+                    variant="outlined"
+                    onChange={handleUrlChange}
+                    disabled={
+                      !isConnected
+                      || (settings.formatSelection && downloadFormats != null)
+                    }
+                    InputProps={{
+                      endAdornment: (
+                        <InputAdornment position="end">
+                          <label htmlFor="icon-button-file">
+                            <Input
+                              id="icon-button-file"
+                              type="file"
+                              accept=".txt"
+                              onChange={parseUrlListFile}
+                            />
+                            <IconButton
+                              color="primary"
+                              aria-label="upload file"
+                              component="span"
+                            >
+                              <FileUpload />
+                            </IconButton>
+                          </label>
+                        </InputAdornment>
+                      ),
+                    }}
+                  />
+                </Grid>
+                <Grid container spacing={1} sx={{ mt: 1 }}>
+                  {
+                    settings.enableCustomArgs &&
+                    <Grid item xs={12}>
+                      <TextField
+                        fullWidth
+                        label={i18n.t('customArgsInput')}
+                        variant="outlined"
+                        onChange={handleCustomArgsChange}
+                        value={customArgs}
+                        disabled={
+                          !isConnected ||
+                          (settings.formatSelection && downloadFormats != null)
+                        }
+                      />
+                    </Grid>
+                  }
+                  {
+                    settings.fileRenaming &&
+                    <Grid item xs={8}>
+                      <TextField
+                        ref={customFilenameInputRef}
+                        fullWidth
+                        label={i18n.t('customFilename')}
+                        variant="outlined"
+                        value={fileNameOverride}
+                        onChange={handleFilenameOverrideChange}
+                        disabled={
+                          !isConnected ||
+                          (settings.formatSelection && downloadFormats != null)
+                        }
+                      />
+                    </Grid>
+                  }
+                  {
+                    settings.pathOverriding &&
+                    <Grid item xs={4}>
+                      <FormControl fullWidth>
+                        <InputLabel>{i18n.t('customPath')}</InputLabel>
+                        <Select
+                          label={i18n.t('customPath')}
+                          defaultValue={0}
+                          variant={'outlined'}
+                          value={downloadPath}
+                          onChange={(e) => setDownloadPath(Number(e.target.value))}
+                        >
+                          {availableDownloadPaths.map((val: string, idx: number) => (
+                            <MenuItem key={idx} value={idx}>{val}</MenuItem>
+                          ))}
+                        </Select>
+                      </FormControl>
+                    </Grid>
+                  }
+                </Grid>
+                <Grid container spacing={1} pt={2} justifyContent="space-between">
+                  <Grid item>
+                    <Button
+                      variant="contained"
+                      disabled={url === ''}
+                      onClick={() => settings.formatSelection
+                        ? startTransition(() => sendUrlFormatSelection())
+                        : sendUrl()
+                      }
+                    >
+                      {
+                        settings.formatSelection
+                          ? i18n.t('selectFormatButton')
+                          : i18n.t('startButton')
+                      }
+                    </Button>
+                  </Grid>
+                  <Grid item>
+                    <FormControlLabel
+                      control={<Checkbox onChange={() => setIsPlaylist(state => !state)} />}
+                      checked={isPlaylist}
+                      label={i18n.t('playlistCheckbox')}
+                    />
+                  </Grid>
+                </Grid>
+              </Paper>
+            </Grid>
+          </Grid >
+          {/* Format Selection grid */}
+          {downloadFormats && <FormatsGrid
+            downloadFormats={downloadFormats}
+            onBestQualitySelected={(id) => {
+              setPickedBestFormat(id)
+              setPickedVideoFormat('')
+              setPickedAudioFormat('')
+            }}
+            onVideoSelected={(id) => {
+              setPickedVideoFormat(id)
+              setPickedBestFormat('')
+            }}
+            onAudioSelected={(id) => {
+              setPickedAudioFormat(id)
+              setPickedBestFormat('')
+            }}
+            onClear={() => {
+              setPickedAudioFormat('')
+              setPickedVideoFormat('')
+              setPickedBestFormat('')
+            }}
+            onSubmit={sendUrl}
+            pickedBestFormat={pickedBestFormat}
+            pickedVideoFormat={pickedVideoFormat}
+            pickedAudioFormat={pickedAudioFormat}
+          />}
+        </Container>
+      </Dialog>
+    </div>
+  )
+}
--- a/frontend/src/components/Downloads.tsx
+++ b/frontend/src/components/Downloads.tsx
@@ -0,0 +1,32 @@
+import { useEffect } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { activeDownloadsState } from '../atoms/downloads'
+import { listViewState } from '../atoms/settings'
+import { loadingAtom } from '../atoms/ui'
+import DownloadsCardView from './DownloadsCardView'
+import DownloadsListView from './DownloadsListView'
+
+const Downloads: React.FC = () => {
+  const listView = useRecoilValue(listViewState)
+  const active = useRecoilValue(activeDownloadsState)
+
+  const [, setIsLoading] = useRecoilState(loadingAtom)
+
+  useEffect(() => {
+    if (active) {
+      setIsLoading(true)
+    }
+  }, [active?.length])
+
+  if (listView) {
+    return (
+      <DownloadsListView />
+    )
+  }
+
+  return (
+    <DownloadsCardView />
+  )
+}
+
+export default Downloads
--- a/frontend/src/components/DownloadsCardView.tsx
+++ b/frontend/src/components/DownloadsCardView.tsx
@@ -1,14 +1,21 @@
 import { Grid } from "@mui/material"
 import { Fragment } from "react"
-import type { RPCResult } from "../types"
+import { useRecoilValue } from 'recoil'
+import { activeDownloadsState } from '../atoms/downloads'
+import { useToast } from "../hooks/toast"
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
 import { StackableResult } from "./StackableResult"

-type Props = {
-  downloads: RPCResult[]
-  abortFunction: Function
-}
+const DownloadsCardView: React.FC = () => {
+  const downloads = useRecoilValue(activeDownloadsState) ?? []
+
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+  const { pushMessage } = useToast()
+
+  const abort = (id: string) => client.kill(id)

-export function DownloadsCardView({ downloads, abortFunction }: Props) {
  return (
    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
      {
@@ -16,13 +23,16 @@ export function DownloadsCardView({ downloads, abortFunction }: Props) {
          <Grid item xs={4} sm={8} md={6} key={download.id}>
            <Fragment>
              <StackableResult
+                url={download.info.url}
                title={download.info.title}
                thumbnail={download.info.thumbnail}
                percentage={download.progress.percentage}
-                stopCallback={() => abortFunction(download.id)}
+                onStop={() => abort(download.id)}
+                onCopy={() => pushMessage(i18n.t('clipboardAction'))}
                resolution={download.info.resolution ?? ''}
                speed={download.progress.speed}
                size={download.info.filesize_approx ?? 0}
+                status={download.progress.process_status}
              />
            </Fragment>
          </Grid>
@@ -30,4 +40,6 @@ export function DownloadsCardView({ downloads, abortFunction }: Props) {
      }
    </Grid>
  )
-}
+}
+
+export default DownloadsCardView
--- a/frontend/src/components/DownloadsListView.tsx
+++ b/frontend/src/components/DownloadsListView.tsx
@@ -1,19 +1,35 @@
-import { Button, CircularProgress, Grid, LinearProgress, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from "@mui/material"
-import { RPCResult } from "../types"
+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"

-type Props = {
-  downloads: RPCResult[]
-  abortFunction: Function
-}

-export function DownloadsListView({ downloads, abortFunction }: Props) {
+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: '65vh' }} elevation={2}>
+        <TableContainer component={Paper} sx={{ minHeight: '100%' }} elevation={2}>
          <Table>
-            <TableHead>
+            <TableHead hidden={downloads.length === 0}>
              <TableRow>
                <TableCell>
                  <Typography fontWeight={500} fontSize={15}>Title</Typography>
@@ -40,10 +56,15 @@ export function DownloadsListView({ downloads, abortFunction }: Props) {
                    <TableCell>
                      <LinearProgress
                        value={
-                          download.progress.percentage === '-1' ? 100 :
-                            Number(download.progress.percentage.replace('%', ''))
+                          download.progress.percentage === '-1'
+                            ? 100
+                            : Number(download.progress.percentage.replace('%', ''))
+                        }
+                        variant={
+                          download.progress.process_status === 0
+                            ? 'indeterminate'
+                            : 'determinate'
                        }
-                        variant="determinate"
                        color={download.progress.percentage === '-1' ? 'success' : 'primary'}
                      />
                    </TableCell>
@@ -53,7 +74,7 @@ export function DownloadsListView({ downloads, abortFunction }: Props) {
                      <Button
                        variant="contained"
                        size="small"
-                        onClick={() => abortFunction(download.id)}
+                        onClick={() => abort(download.id)}
                      >
                        {download.progress.percentage === '-1' ? 'Remove' : 'Stop'}
                      </Button>
@@ -67,4 +88,6 @@ export function DownloadsListView({ downloads, abortFunction }: Props) {
      </Grid>
    </Grid>
  )
-}
+}
+
+export default DownloadsListView
--- a/frontend/src/components/Drawer.tsx
+++ b/frontend/src/components/Drawer.tsx
@@ -1,9 +1,9 @@
-import { styled } from '@mui/material';
-import MuiDrawer from '@mui/material/Drawer';
+import { styled } from '@mui/material'
+import MuiDrawer from '@mui/material/Drawer'

-const drawerWidth = 240;
+const drawerWidth = 240

-export const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
+const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
  ({ theme, open }) => ({
    '& .MuiDrawer-paper': {
      position: 'relative',
@@ -27,4 +27,6 @@ export const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !==
      }),
    },
  }),
-);
+)
+
+export default Drawer
--- a/frontend/src/components/ErrorBoundary.tsx
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -0,0 +1,45 @@
+import ErrorIcon from '@mui/icons-material/Error'
+import { Button, Container, SvgIcon, Typography, styled } from '@mui/material'
+import { Link } from 'react-router-dom'
+
+const FlexContainer = styled(Container)({
+  display: 'flex',
+  minWidth: '100%',
+  minHeight: '80vh',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column'
+})
+
+const Title = styled(Typography)({
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingBottom: '0.5rem'
+})
+
+const ErrorBoundary: React.FC = () => {
+  return (
+    <FlexContainer>
+      <Title fontWeight={'500'} fontSize={72} color={'gray'}>
+        <SvgIcon sx={{ fontSize: '200px' }}>
+          <ErrorIcon />
+        </SvgIcon>
+      </Title>
+      <Title fontWeight={'500'} fontSize={36} color={'gray'}>
+        An error occurred :\
+      </Title>
+      <Title fontWeight={'400'} fontSize={28} color={'gray'}>
+        Check your settings!
+      </Title>
+      <Link to={'/settings'} >
+        <Button variant='contained' sx={{ mt: 2 }}>
+          Goto Settings
+        </Button>
+      </Link>
+    </FlexContainer>
+  )
+}
+
+export default ErrorBoundary
--- a/frontend/src/components/FormatsGrid.tsx
+++ b/frontend/src/components/FormatsGrid.tsx
@@ -0,0 +1,126 @@
+import { Button, ButtonGroup, Grid, Paper, Typography } from "@mui/material"
+import type { DLMetadata } from '../types'
+
+type Props = {
+  downloadFormats: DLMetadata
+  onAudioSelected: (format: string) => void
+  onVideoSelected: (format: string) => void
+  onBestQualitySelected: (format: string) => void
+  onSubmit: () => void
+  onClear: () => void
+  pickedBestFormat: string
+  pickedAudioFormat: string
+  pickedVideoFormat: string
+}
+
+export default function FormatsGrid({
+  downloadFormats,
+  onAudioSelected,
+  onVideoSelected,
+  onBestQualitySelected,
+  onSubmit,
+  onClear,
+  pickedBestFormat,
+  pickedAudioFormat,
+  pickedVideoFormat,
+}: Props) {
+  return (
+    <Grid container spacing={2} mt={2}>
+      <Grid item xs={12}>
+        <Paper
+          sx={{
+            p: 2,
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <Grid container>
+            <Grid item xs={12}>
+              <Typography variant="h6" component="div" pb={1}>
+                {downloadFormats.title}
+              </Typography>
+              {/* <Skeleton variant="rectangular" height={180} /> */}
+            </Grid>
+            <Grid item xs={12} pb={1}>
+              <img src={downloadFormats.thumbnail} height={260} width="100%" style={{ objectFit: 'cover' }} />
+            </Grid>
+            {/* video only */}
+            <Grid item xs={12}>
+              <Typography variant="body1" component="div">
+                Best quality
+              </Typography>
+            </Grid>
+            <Grid item pr={2} py={1}>
+              <Button
+                variant="contained"
+                disabled={pickedBestFormat !== ''}
+                onClick={() => onBestQualitySelected(downloadFormats.best.format_id)}
+              >
+                {downloadFormats.best.format_note || downloadFormats.best.format_id} - {downloadFormats.best.vcodec}+{downloadFormats.best.acodec}
+                &nbsp;({downloadFormats.best.resolution}{(downloadFormats.best.filesize_approx > 0) ? ", ~" + Math.round(downloadFormats.best.filesize_approx / 1024 / 1024) + " MiB" : ""})
+              </Button>
+            </Grid>
+            {/* video only */}
+            {downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length &&
+              <Grid item xs={12}>
+                <Typography variant="body1" component="div">
+                  Video data {downloadFormats.formats[1].acodec}
+                </Typography>
+              </Grid>
+            }
+            {downloadFormats.formats
+              .filter(format => format.acodec === 'none' && format.vcodec !== 'none')
+              .map((format, idx) => (
+                <Grid item pr={2} py={1} key={idx}>
+                  <Button
+                    variant="contained"
+                    onClick={() => onVideoSelected(format.format_id)}
+                    disabled={pickedVideoFormat === format.format_id}
+                  >
+                    {format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
+                    &nbsp;({format.resolution}{(format.filesize_approx > 0) ? ", ~" + Math.round(format.filesize_approx / 1024 / 1024) + " MiB" : ""})
+                  </Button>
+                </Grid>
+              ))
+            }
+            {downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length &&
+              <Grid item xs={12}>
+                <Typography variant="body1" component="div">
+                  Audio data
+                </Typography>
+              </Grid>
+            }
+            {downloadFormats.formats
+              .filter(format => format.acodec !== 'none' && format.vcodec === 'none')
+              .map((format, idx) => (
+                <Grid item pr={2} py={1} key={idx}>
+                  <Button
+                    variant="contained"
+                    onClick={() => onAudioSelected(format.format_id)}
+                    disabled={pickedAudioFormat === format.format_id}
+                  >
+                    {format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
+                    {(format.filesize_approx > 0) ? " (~" + Math.round(format.filesize_approx / 1024 / 1024) + " MiB)" : ""}
+                  </Button>
+                </Grid>
+              ))
+            }
+            <Grid item xs={12} pt={2}>
+              <ButtonGroup disableElevation variant="contained">
+                <Button
+                  onClick={() => onSubmit()}
+                  disabled={!pickedBestFormat && !(pickedAudioFormat || pickedVideoFormat)}
+                > Download
+                </Button>
+                <Button
+                  onClick={() => onClear()}
+                > Clear
+                </Button>
+              </ButtonGroup>
+            </Grid>
+          </Grid>
+        </Paper>
+      </Grid>
+    </Grid>
+  )
+}
--- a/frontend/src/components/FreeSpaceIndicator.tsx
+++ b/frontend/src/components/FreeSpaceIndicator.tsx
@@ -0,0 +1,29 @@
+import StorageIcon from '@mui/icons-material/Storage'
+import { useEffect, useState } from 'react'
+import { formatGiB } from '../utils'
+import { useRPC } from '../hooks/useRPC'
+
+const FreeSpaceIndicator = () => {
+  const [freeSpace, setFreeSpace] = useState(0)
+
+  const { client } = useRPC()
+
+  useEffect(() => {
+    client.freeSpace().then(r => setFreeSpace(r.result))
+  }, [client])
+
+  return (
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+    }}>
+      <StorageIcon />
+      <span>
+        &nbsp;{formatGiB(freeSpace)}&nbsp;
+      </span>
+    </div>
+  )
+}
+
+export default FreeSpaceIndicator
--- a/frontend/src/components/HomeActions.tsx
+++ b/frontend/src/components/HomeActions.tsx
@@ -0,0 +1,31 @@
+import { useState } from 'react'
+import { useRecoilState } from 'recoil'
+import { loadingAtom } from '../atoms/ui'
+import DownloadDialog from './DownloadDialog'
+import HomeSpeedDial from './HomeSpeedDial'
+
+const HomeActions: React.FC = () => {
+  const [, setIsLoading] = useRecoilState(loadingAtom)
+  const [openDialog, setOpenDialog] = useState(false)
+
+  return (
+    <>
+      <HomeSpeedDial
+        onOpen={() => setOpenDialog(true)}
+      />
+      <DownloadDialog
+        open={openDialog}
+        onClose={() => {
+          setOpenDialog(false)
+          setIsLoading(true)
+        }}
+        onDownloadStart={() => {
+          setOpenDialog(false)
+          setIsLoading(true)
+        }}
+      />
+    </>
+  )
+}
+
+export default HomeActions
--- a/frontend/src/components/HomeSpeedDial.tsx
+++ b/frontend/src/components/HomeSpeedDial.tsx
@@ -0,0 +1,51 @@
+import AddCircleIcon from '@mui/icons-material/AddCircle'
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
+import FormatListBulleted from '@mui/icons-material/FormatListBulleted'
+import {
+  SpeedDial,
+  SpeedDialAction,
+  SpeedDialIcon
+} from '@mui/material'
+import { useRecoilState } from 'recoil'
+import { listViewState } from '../atoms/settings'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+
+type Props = {
+  onOpen: () => void
+}
+
+const HomeSpeedDial: React.FC<Props> = ({ onOpen }) => {
+  const [, setListView] = useRecoilState(listViewState)
+
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+
+  const abort = () => client.killAll()
+
+  return (
+    <SpeedDial
+      ariaLabel="Home speed dial"
+      sx={{ position: 'absolute', bottom: 32, right: 32 }}
+      icon={<SpeedDialIcon />}
+    >
+      <SpeedDialAction
+        icon={<FormatListBulleted />}
+        tooltipTitle={`Table view`}
+        onClick={() => setListView(state => !state)}
+      />
+      <SpeedDialAction
+        icon={<DeleteForeverIcon />}
+        tooltipTitle={i18n.t('abortAllButton')}
+        onClick={abort}
+      />
+      <SpeedDialAction
+        icon={<AddCircleIcon />}
+        tooltipTitle={`New download`}
+        onClick={onOpen}
+      />
+    </SpeedDial>
+  )
+}
+
+export default HomeSpeedDial
--- a/frontend/src/components/LoadingBackdrop.tsx
+++ b/frontend/src/components/LoadingBackdrop.tsx
@@ -0,0 +1,18 @@
+import { Backdrop, CircularProgress } from '@mui/material'
+import { useRecoilValue } from 'recoil'
+import { loadingAtom } from '../atoms/ui'
+
+const LoadingBackdrop: React.FC = () => {
+  const isLoading = useRecoilValue(loadingAtom)
+
+  return (
+    <Backdrop
+      sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+      open={!isLoading}
+    >
+      <CircularProgress color="primary" />
+    </Backdrop>
+  )
+}
+
+export default LoadingBackdrop
--- a/frontend/src/components/Logout.tsx
+++ b/frontend/src/components/Logout.tsx
@@ -0,0 +1,26 @@
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
+import LogoutIcon from '@mui/icons-material/Logout'
+import { useNavigate } from 'react-router-dom'
+import { useRecoilValue } from 'recoil'
+import { serverURL } from '../atoms/settings'
+
+export default function Logout() {
+  const navigate = useNavigate()
+  const url = useRecoilValue(serverURL)
+
+  const logout = async () => {
+    const res = await fetch(`${url}/auth/logout`)
+    if (res.ok) {
+      navigate('/login')
+    }
+  }
+
+  return (
+    <ListItemButton onClick={logout}>
+      <ListItemIcon>
+        <LogoutIcon />
+      </ListItemIcon>
+      <ListItemText primary="RPC authentication" />
+    </ListItemButton>
+  )
+}
--- a/frontend/src/components/SocketSubscriber.tsx
+++ b/frontend/src/components/SocketSubscriber.tsx
@@ -0,0 +1,66 @@
+import { useMemo } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { interval, share, take } from 'rxjs'
+import { activeDownloadsState } from '../atoms/downloads'
+import { serverAddressAndPortState } from '../atoms/settings'
+import { connectedState } from '../atoms/status'
+import { useSubscription } from '../hooks/observable'
+import { useToast } from '../hooks/toast'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+import { datetimeCompareFunc, isRPCResponse } from '../utils'
+
+interface Props extends React.HTMLAttributes<HTMLBaseElement> { }
+
+const SocketSubscriber: React.FC<Props> = ({ children }) => {
+  const [, setIsConnected] = useRecoilState(connectedState)
+  const [, setActive] = useRecoilState(activeDownloadsState)
+
+  const serverAddressAndPort = useRecoilValue(serverAddressAndPortState)
+
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+  const { pushMessage } = useToast()
+
+  const sharedSocket$ = useMemo(() => client.socket$.pipe(share()), [])
+  const socketOnce$ = useMemo(() => sharedSocket$.pipe(take(1)), [])
+
+  useSubscription(socketOnce$, () => {
+    setIsConnected(true)
+    pushMessage(
+      `${i18n.t('toastConnected')} (${serverAddressAndPort})`,
+      "success"
+    )
+  })
+
+  useSubscription(sharedSocket$,
+    (event) => {
+      if (!isRPCResponse(event)) { return }
+      if (!Array.isArray(event.result)) { return }
+
+      setActive(
+        (event.result || [])
+          .filter(f => !!f.info.url)
+          .sort((a, b) => datetimeCompareFunc(
+            b.info.created_at,
+            a.info.created_at,
+          ))
+      )
+    },
+    (err) => {
+      console.error(err)
+      pushMessage(
+        `${i18n.t('rpcConnErr')} (${serverAddressAndPort})`,
+        "error"
+      )
+    }
+  )
+
+  useSubscription(interval(1000), () => client.running())
+
+  return (
+    <>{children}</>
+  )
+}
+
+export default SocketSubscriber
--- a/frontend/src/components/Splash.tsx
+++ b/frontend/src/components/Splash.tsx
@@ -0,0 +1,44 @@
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload'
+import { Container, SvgIcon, Typography, styled } from '@mui/material'
+import { useRecoilValue } from 'recoil'
+import { activeDownloadsState } from '../atoms/downloads'
+import { useI18n } from '../hooks/useI18n'
+
+const FlexContainer = styled(Container)({
+  display: 'flex',
+  minWidth: '100%',
+  minHeight: '80vh',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column'
+})
+
+const Title = styled(Typography)({
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingBottom: '0.5rem'
+})
+
+export default function Splash() {
+  const { i18n } = useI18n()
+  const activeDownloads = useRecoilValue(activeDownloadsState)
+
+  if (!activeDownloads || activeDownloads.length !== 0) {
+    return null
+  }
+
+  return (
+    <FlexContainer>
+      <Title fontWeight={'500'} fontSize={72} color={'gray'}>
+        <SvgIcon sx={{ fontSize: '200px' }}>
+          <CloudDownloadIcon />
+        </SvgIcon>
+      </Title>
+      <Title fontWeight={'500'} fontSize={36} color={'gray'}>
+        {i18n.t('splashText')}
+      </Title>
+    </FlexContainer>
+  )
+}
--- a/frontend/src/components/StackableResult.tsx
+++ b/frontend/src/components/StackableResult.tsx
@@ -1,4 +1,4 @@
-import { EightK, FourK, Hd, Sd } from "@mui/icons-material";
+import { EightK, FourK, Hd, Sd } from '@mui/icons-material'
 import {
  Button,
  Card,
@@ -11,51 +11,55 @@ import {
  Skeleton,
  Stack,
  Typography
-} from "@mui/material";
-import { useEffect, useState } from "react";
-import { ellipsis, formatSpeedMiB, roundMiB } from "../utils";
+} from '@mui/material'
+import { ellipsis, formatSpeedMiB, mapProcessStatus, roundMiB } from '../utils'

 type Props = {
-  title: string,
-  thumbnail: string,
+  title: string
+  url: string
+  thumbnail: string
  resolution: string
-  percentage: string,
-  size: number,
-  speed: number,
-  stopCallback: VoidFunction,
+  percentage: string
+  size: number
+  speed: number
+  status: number
+  onStop: () => void
+  onCopy: () => void
 }

 export function StackableResult({
  title,
+  url,
  thumbnail,
  resolution,
  percentage,
  speed,
  size,
-  stopCallback
+  status,
+  onStop,
+  onCopy,
 }: Props) {
-  const [isCompleted, setIsCompleted] = useState(false)
+  const isCompleted = () => percentage === '-1'

-  useEffect(() => {
-    if (percentage === '-1') {
-      setIsCompleted(true)
-    }
-  }, [percentage])
-
-  const percentageToNumber = () => isCompleted ? 100 : Number(percentage.replace('%', ''))
+  const percentageToNumber = () => isCompleted()
+    ? 100
+    : Number(percentage.replace('%', ''))

  const guessResolution = (xByY: string): any => {
-    if (!xByY) return null;
-    if (xByY.includes('4320')) return (<EightK color="primary" />);
-    if (xByY.includes('2160')) return (<FourK color="primary" />);
-    if (xByY.includes('1080')) return (<Hd color="primary" />);
-    if (xByY.includes('720')) return (<Sd color="primary" />);
-    return null;
+    if (!xByY) return null
+    if (xByY.includes('4320')) return (<EightK color="primary" />)
+    if (xByY.includes('2160')) return (<FourK color="primary" />)
+    if (xByY.includes('1080')) return (<Hd color="primary" />)
+    if (xByY.includes('720')) return (<Sd color="primary" />)
+    return null
  }

  return (
    <Card>
-      <CardActionArea>
+      <CardActionArea onClick={() => {
+        navigator.clipboard.writeText(url)
+        onCopy()
+      }}>
        {thumbnail !== '' ?
          <CardMedia
            component="img"
@@ -73,12 +77,12 @@ export function StackableResult({
          }
          <Stack direction="row" spacing={1} py={2}>
            <Chip
-              label={isCompleted ? 'Completed' : 'Downloading'}
+              label={isCompleted() ? 'Completed' : mapProcessStatus(status)}
              color="primary"
              size="small"
            />
-            <Typography>{!isCompleted ? percentage : ''}</Typography>
-            <Typography> {!isCompleted ? formatSpeedMiB(speed) : ''}</Typography>
+            <Typography>{!isCompleted() ? percentage : ''}</Typography>
+            <Typography> {!isCompleted() ? formatSpeedMiB(speed) : ''}</Typography>
            <Typography>{roundMiB(size ?? 0)}</Typography>
            {guessResolution(resolution)}
          </Stack>
@@ -86,7 +90,7 @@ export function StackableResult({
            <LinearProgress
              variant="determinate"
              value={percentageToNumber()}
-              color={isCompleted ? "secondary" : "primary"}
+              color={isCompleted() ? "secondary" : "primary"}
            /> :
            null
          }
@@ -97,8 +101,9 @@ export function StackableResult({
          variant="contained"
          size="small"
          color="primary"
-          onClick={stopCallback}>
-          {isCompleted ? "Clear" : "Stop"}
+          onClick={onStop}
+        >
+          {isCompleted() ? "Clear" : "Stop"}
        </Button>
      </CardActions>
    </Card>
--- a/frontend/src/components/ThemeToggler.tsx
+++ b/frontend/src/components/ThemeToggler.tsx
@@ -0,0 +1,25 @@
+import { Brightness4, Brightness5 } from '@mui/icons-material'
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
+import { useRecoilState } from 'recoil'
+import { themeState } from '../atoms/settings'
+
+export default function ThemeToggler() {
+  const [theme, setTheme] = useRecoilState(themeState)
+
+  return (
+    <ListItemButton onClick={() => {
+      theme === 'light'
+        ? setTheme('dark')
+        : setTheme('light')
+    }}>
+      <ListItemIcon>
+        {
+          theme === 'light'
+            ? <Brightness4 />
+            : <Brightness5 />
+        }
+      </ListItemIcon>
+      <ListItemText primary="Toggle theme" />
+    </ListItemButton>
+  )
+}
--- a/frontend/src/features/core/argsParser.ts
+++ b/frontend/src/features/core/argsParser.ts
@@ -1,61 +0,0 @@
-export class CliArguments {
-    private _extractAudio: boolean;
-    private _noMTime: boolean;
-    private _proxy: string;
-
-    constructor(extractAudio = false, noMTime = false) {
-        this._extractAudio = extractAudio;
-        this._noMTime = noMTime;
-        this._proxy = ""
-    }
-
-    public get extractAudio(): boolean {
-        return this._extractAudio;
-    }
-
-    public toggleExtractAudio() {
-        this._extractAudio = !this._extractAudio;
-        return this;
-    }
-
-    public disableExtractAudio() {
-        this._extractAudio = false;
-        return this;
-    }
-
-    public get noMTime(): boolean {
-        return this._noMTime;
-    }
-
-    public toggleNoMTime() {
-        this._noMTime = !this._noMTime;
-        return this;
-    }
-
-    public toString(): string {
-        let args = '';
-
-        if (this._extractAudio) {
-            args += '-x '
-        }
-
-        if (this._noMTime) {
-            args += '--no-mtime '
-        }
-
-        return args.trim();
-    }
-
-    public fromString(str: string): CliArguments {
-        if (str) {
-            if (str.includes('-x')) {
-                this._extractAudio = true;
-            }
-
-            if (str.includes('--no-mtime')) {
-                this._noMTime = true;
-            }
-        }
-        return this;
-    }
-}
--- a/frontend/src/features/core/events.ts
+++ b/frontend/src/features/core/events.ts
@@ -1,10 +0,0 @@
-export function on(eventType: string, listener: any) {
-    document.addEventListener(eventType, listener)
-}
-
-export const serverStates = {
-    PROC_DOWNLOAD: 'download',
-    PROC_MERGING: 'merging',
-    PROC_ABORT: 'abort',
-    PROG_DONE: 'status_done',
-}
--- a/frontend/src/features/core/intl.ts
+++ b/frontend/src/features/core/intl.ts
@@ -1,28 +0,0 @@
-// @ts-nocheck
-import i18n from "../../assets/i18n.yaml"
-
-export default class I18nBuilder {
-    private language: string
-    private textMap = i18n.languages
-
-    constructor(language: string) {
-        this.language = language
-    }
-
-    getLanguage(): string {
-        return this.language
-    }
-
-    setLanguage(language: string): void {
-        this.language = language
-    }
-
-    t(key: string): string {
-        const map = this.textMap[this.language]
-        if (map) {
-            const translation = map[key]
-            return translation ?? 'caption not defined'
-        }
-        return 'caption not defined'
-    }
-}
--- a/frontend/src/features/core/rpcClient.ts
+++ b/frontend/src/features/core/rpcClient.ts
@@ -1,109 +0,0 @@
-import type { RPCRequest, RPCResponse, IDLMetadata } from "../../types"
-
-import { getHttpRPCEndpoint } from '../../utils'
-
-export class RPCClient {
-  private socket: WebSocket
-  private seq: number
-
-  constructor(socket: WebSocket) {
-    this.socket = socket
-    this.seq = 0
-  }
-
-  private incrementSeq() {
-    return String(this.seq++)
-  }
-
-  private send(req: RPCRequest) {
-    this.socket.send(JSON.stringify(req))
-  }
-
-  private sendHTTP<T>(req: RPCRequest) {
-    return new Promise<RPCResponse<T>>((resolve) => {
-      fetch(getHttpRPCEndpoint(), {
-        method: 'POST',
-        body: JSON.stringify({
-          id: this.incrementSeq(),
-          ...req
-        })
-      })
-        .then(res => res.json())
-        .then(data => resolve(data))
-    })
-  }
-
-  public download(url: string, args: string, pathOverride = '', renameTo = '') {
-    if (url) {
-      this.send({
-        id: this.incrementSeq(),
-        method: 'Service.Exec',
-        params: [{
-          URL: url.split("?list").at(0)!,
-          Params: args.split(" ").map(a => a.trim()),
-          Path: pathOverride,
-          Rename: renameTo,
-        }]
-      })
-    }
-  }
-
-  public formats(url: string) {
-    if (url) {
-      return this.sendHTTP<IDLMetadata>({
-        id: this.incrementSeq(),
-        method: 'Service.Formats',
-        params: [{
-          URL: url.split("?list").at(0)!,
-        }]
-      })
-    }
-  }
-
-  public running() {
-    this.send({
-      id: this.incrementSeq(),
-      method: 'Service.Running',
-      params: [],
-    })
-  }
-
-  public kill(id: string) {
-    this.send({
-      method: 'Service.Kill',
-      params: [id],
-    })
-  }
-
-  public killAll() {
-    this.send({
-      method: 'Service.KillAll',
-      params: [],
-    })
-  }
-
-  public freeSpace() {
-    return this.sendHTTP<number>({
-      method: 'Service.FreeSpace',
-      params: [],
-    })
-  }
-
-  public directoryTree() {
-    return this.sendHTTP<string[]>({
-      method: 'Service.DirectoryTree',
-      params: [],
-    })
-  }
-
-  public updateExecutable() {
-    return this.sendHTTP({
-      method: 'Service.UpdateExecutable',
-      params: []
-    })
-  }
-
-  public decode(data: any): RPCResponse<any> {
-    return JSON.parse(data)
-  }
-}
--- a/frontend/src/features/settings/settingsSlice.ts
+++ b/frontend/src/features/settings/settingsSlice.ts
@@ -1,99 +0,0 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit"
-
-export type LanguageUnion = "english" | "chinese" | "russian" | "italian" | "spanish" | "korean" | "japanese"
-export type ThemeUnion = "light" | "dark"
-
-export interface SettingsState {
-    serverAddr: string
-    serverPort: string
-    language: LanguageUnion
-    theme: ThemeUnion
-    cliArgs: string
-    formatSelection: boolean
-    ratelimit: string
-    fileRenaming: boolean
-    pathOverriding: boolean
-    enableCustomArgs: boolean
-    listView: boolean
-}
-
-const initialState: SettingsState = {
-    serverAddr: localStorage.getItem("server-addr") || window.location.hostname,
-    serverPort: localStorage.getItem("server-port") || window.location.port,
-    language: (localStorage.getItem("language") || "english") as LanguageUnion,
-    theme: (localStorage.getItem("theme") || "light") as ThemeUnion,
-    cliArgs: localStorage.getItem("cli-args") ?? "",
-    formatSelection: localStorage.getItem("format-selection") === "true",
-    ratelimit: localStorage.getItem("rate-limit") ?? "",
-    fileRenaming: localStorage.getItem("file-renaming") === "true",
-    pathOverriding: localStorage.getItem("path-overriding") === "true",
-    enableCustomArgs: localStorage.getItem("enable-custom-args") === "true",
-    listView: localStorage.getItem("listview") === "true",
-}
-
-export const settingsSlice = createSlice({
-    name: "settings",
-    initialState,
-    reducers: {
-        setServerAddr: (state, action: PayloadAction<string>) => {
-            state.serverAddr = action.payload
-            localStorage.setItem("server-addr", action.payload)
-        },
-        setServerPort: (state, action: PayloadAction<string>) => {
-            state.serverPort = action.payload
-            localStorage.setItem("server-port", action.payload)
-        },
-        setLanguage: (state, action: PayloadAction<LanguageUnion>) => {
-            state.language = action.payload
-            localStorage.setItem("language", action.payload)
-        },
-        setCliArgs: (state, action: PayloadAction<string>) => {
-            state.cliArgs = action.payload
-            localStorage.setItem("cli-args", action.payload)
-        },
-        setTheme: (state, action: PayloadAction<ThemeUnion>) => {
-            state.theme = action.payload
-            localStorage.setItem("theme", action.payload)
-        },
-        setFormatSelection: (state, action: PayloadAction<boolean>) => {
-            state.formatSelection = action.payload
-            localStorage.setItem("format-selection", action.payload.toString())
-        },
-        setRateLimit: (state, action: PayloadAction<string>) => {
-            state.ratelimit = action.payload
-            localStorage.setItem("rate-limit", action.payload)
-        },
-        setPathOverriding: (state, action: PayloadAction<boolean>) => {
-            state.pathOverriding = action.payload
-            localStorage.setItem("path-overriding", action.payload.toString())
-        },
-        setFileRenaming: (state, action: PayloadAction<boolean>) => {
-            state.fileRenaming = action.payload
-            localStorage.setItem("file-renaming", action.payload.toString())
-        },
-        setEnableCustomArgs: (state, action: PayloadAction<boolean>) => {
-            state.enableCustomArgs = action.payload
-            localStorage.setItem("enable-custom-args", action.payload.toString())
-        },
-        toggleListView: (state) => {
-            state.listView = !state.listView
-            localStorage.setItem("listview", state.listView.toString())
-        },
-    }
-})
-
-export const {
-    setLanguage,
-    setCliArgs,
-    setTheme,
-    setServerAddr,
-    setServerPort,
-    setFormatSelection,
-    setRateLimit,
-    setFileRenaming,
-    setPathOverriding,
-    setEnableCustomArgs,
-    toggleListView
-} = settingsSlice.actions
-
-export default settingsSlice.reducer
--- a/frontend/src/features/status/statusSlice.ts
+++ b/frontend/src/features/status/statusSlice.ts
@@ -1,55 +0,0 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit"
-
-export interface StatusState {
-    connected: boolean,
-    updated: boolean,
-    downloading: boolean,
-    freeSpace: number,
-}
-
-const initialState: StatusState = {
-    connected: false,
-    updated: false,
-    downloading: false,
-    freeSpace: 0,
-}
-
-export const statusSlice = createSlice({
-    name: 'status',
-    initialState,
-    reducers: {
-        connected: (state) => {
-            state.connected = true
-        },
-        disconnected: (state) => {
-            state.connected = false
-        },
-        updated: (state) => {
-            state.updated = true
-        },
-        alreadyUpdated: (state) => {
-            state.updated = false
-        },
-        downloading: (state) => {
-            state.downloading = true
-        },
-        finished: (state) => {
-            state.downloading = false
-        },
-        setFreeSpace: (state, action: PayloadAction<number>) => {
-            state.freeSpace = action.payload
-        }
-    }
-})
-
-export const {
-    connected,
-    disconnected,
-    updated,
-    alreadyUpdated,
-    downloading,
-    finished,
-    setFreeSpace
-} = statusSlice.actions
-
-export default statusSlice.reducer 
--- a/frontend/src/hooks/observable.ts
+++ b/frontend/src/hooks/observable.ts
@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react'
+import { Observable } from 'rxjs'
+
+/**
+ * Handles the subscription and unsubscription from an observable.
+ * Automatically disposes the subscription.
+ * @param source$ source observable
+ * @param nextHandler subscriber function
+ * @param errHandler error catching callback
+ */
+export function useSubscription<T>(
+  source$: Observable<T>,
+  nextHandler: (value: T) => void,
+  errHandler?: (err: any) => void,
+) {
+  useEffect(() => {
+    if (source$) {
+      const sub = source$.subscribe({
+        next: nextHandler,
+        error: errHandler,
+      })
+      return () => sub.unsubscribe()
+    }
+  }, [source$])
+}
+
+/**
+ * Use an observable as state
+ * @param source$ source observable
+ * @param initialState the initial state prior to the emission
+ * @param errHandler error catching callback
+ * @returns value emitted to the observable
+ */
+export function useObservable<T>(
+  source$: Observable<T>,
+  initialState: T,
+  errHandler?: (err: any) => void,
+): T {
+  const [value, setValue] = useState(initialState)
+
+  useSubscription(source$, setValue, errHandler)
+
+  return value
+}
--- a/frontend/src/hooks/toast.ts
+++ b/frontend/src/hooks/toast.ts
@@ -0,0 +1,19 @@
+import { AlertColor } from '@mui/material'
+import { useRecoilState } from 'recoil'
+import { toastListState } from '../atoms/toast'
+
+export const useToast = () => {
+  const [toasts, setToasts] = useRecoilState(toastListState)
+
+  return {
+    pushMessage: (message: string, severity?: AlertColor) => {
+      setToasts([{
+        open: true,
+        message: message,
+        severity: severity,
+        autoClose: true,
+        createdAt: Date.now()
+      }, ...toasts])
+    }
+  }
+}
--- a/frontend/src/hooks/useI18n.ts
+++ b/frontend/src/hooks/useI18n.ts
@@ -0,0 +1,10 @@
+import { useRecoilValue } from 'recoil'
+import { i18nBuilderState } from '../atoms/i18n'
+
+export const useI18n = () => {
+  const instance = useRecoilValue(i18nBuilderState)
+
+  return {
+    i18n: instance
+  }
+}
--- a/frontend/src/hooks/useRPC.ts
+++ b/frontend/src/hooks/useRPC.ts
@@ -0,0 +1,10 @@
+import { useRecoilValue } from 'recoil'
+import { rpcClientState } from '../atoms/rpc'
+
+export const useRPC = () => {
+  const client = useRecoilValue(rpcClientState)
+
+  return {
+    client
+  }
+}
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,10 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
 import { App } from './App'

-const root = ReactDOM.createRoot(document.getElementById('root')!)
+const root = createRoot(document.getElementById('root')!)
+
 root.render(
-    <React.StrictMode>
-        <App></App>
-    </React.StrictMode>
+  <StrictMode>
+    <App />
+  </StrictMode>
 )
--- a/frontend/src/lib/argsParser.ts
+++ b/frontend/src/lib/argsParser.ts
@@ -0,0 +1,61 @@
+export class CliArguments {
+  private _extractAudio: boolean
+  private _noMTime: boolean
+  private _proxy: string
+
+  constructor(extractAudio = false, noMTime = true) {
+    this._extractAudio = extractAudio
+    this._noMTime = noMTime
+    this._proxy = ""
+  }
+
+  public get extractAudio(): boolean {
+    return this._extractAudio
+  }
+
+  public toggleExtractAudio() {
+    this._extractAudio = !this._extractAudio
+    return this
+  }
+
+  public disableExtractAudio() {
+    this._extractAudio = false
+    return this
+  }
+
+  public get noMTime(): boolean {
+    return this._noMTime
+  }
+
+  public toggleNoMTime() {
+    this._noMTime = !this._noMTime
+    return this
+  }
+
+  public toString(): string {
+    let args = ''
+
+    if (this._extractAudio) {
+      args += '-x '
+    }
+
+    if (this._noMTime) {
+      args += '--no-mtime '
+    }
+
+    return args.trim()
+  }
+
+  public fromString(str: string): CliArguments {
+    if (str) {
+      if (str.includes('-x')) {
+        this._extractAudio = true
+      }
+
+      if (str.includes('--no-mtime')) {
+        this._noMTime = true
+      }
+    }
+    return this
+  }
+}
--- a/frontend/src/lib/httpClient.ts
+++ b/frontend/src/lib/httpClient.ts
@@ -0,0 +1,13 @@
+export async function ffetch<T>(
+  url: string,
+  onSuccess: (res: T) => void,
+  onError: (err: string) => void,
+  opt?: RequestInit,
+) {
+  const res = await fetch(url, opt)
+  if (!res.ok) {
+    onError(await res.text())
+    return
+  }
+  onSuccess(await res.json() as T)
+}
--- a/frontend/src/lib/intl.ts
+++ b/frontend/src/lib/intl.ts
@@ -0,0 +1,28 @@
+// @ts-nocheck
+import i18n from "../assets/i18n.yaml"
+
+export default class I18nBuilder {
+  private language: string
+  private textMap = i18n.languages
+
+  constructor(language: string) {
+    this.language = language
+  }
+
+  getLanguage(): string {
+    return this.language
+  }
+
+  setLanguage(language: string): void {
+    this.language = language
+  }
+
+  t(key: string): string {
+    const map = this.textMap[this.language]
+    if (map) {
+      const translation = map[key]
+      return translation ?? 'caption not defined'
+    }
+    return 'caption not defined'
+  }
+}
--- a/frontend/src/lib/rpcClient.ts
+++ b/frontend/src/lib/rpcClient.ts
@@ -0,0 +1,128 @@
+import { Observable, share } from 'rxjs'
+import type { DLMetadata, RPCRequest, RPCResponse, RPCResult } from '../types'
+
+import { WebSocketSubject, webSocket } from 'rxjs/webSocket'
+
+export class RPCClient {
+  private seq: number
+  private httpEndpoint: string
+  private readonly _socket$: WebSocketSubject<any>
+
+  constructor(httpEndpoint: string, webSocketEndpoint: string) {
+    this.seq = 0
+    this.httpEndpoint = httpEndpoint
+    this._socket$ = webSocket<any>(webSocketEndpoint)
+  }
+
+  public get socket$(): Observable<RPCResponse<RPCResult[]>> {
+    return this._socket$.asObservable()
+  }
+
+  private incrementSeq() {
+    return String(this.seq++)
+  }
+
+  private send(req: RPCRequest) {
+    this._socket$.next({
+      ...req,
+      id: this.incrementSeq(),
+    })
+  }
+
+  private async sendHTTP<T>(req: RPCRequest) {
+    const res = await fetch(this.httpEndpoint, {
+      method: 'POST',
+      body: JSON.stringify({
+        ...req,
+        id: this.incrementSeq(),
+      })
+    })
+    const data: RPCResponse<T> = await res.json()
+
+    return data
+  }
+
+  public download(
+    url: string,
+    args: string,
+    pathOverride = '',
+    renameTo = '',
+    playlist?: boolean
+  ) {
+    if (!url) {
+      return
+    }
+    if (playlist) {
+      return this.sendHTTP({
+        method: 'Service.ExecPlaylist',
+        params: [{
+          URL: url,
+          Params: args.split(" ").map(a => a.trim()),
+          Path: pathOverride,
+        }]
+      })
+    }
+    this.sendHTTP({
+      method: 'Service.Exec',
+      params: [{
+        URL: url.split("?list").at(0)!,
+        Params: args.split(" ").map(a => a.trim()),
+        Path: pathOverride,
+        Rename: renameTo,
+      }]
+    })
+  }
+
+  public formats(url: string) {
+    if (url) {
+      return this.sendHTTP<DLMetadata>({
+        method: 'Service.Formats',
+        params: [{
+          URL: url.split("?list").at(0)!,
+        }]
+      })
+    }
+  }
+
+  public running() {
+    this.send({
+      method: 'Service.Running',
+      params: [],
+    })
+  }
+
+  public kill(id: string) {
+    this.sendHTTP({
+      method: 'Service.Kill',
+      params: [id],
+    })
+  }
+
+  public killAll() {
+    this.sendHTTP({
+      method: 'Service.KillAll',
+      params: [],
+    })
+  }
+
+  public freeSpace() {
+    return this.sendHTTP<number>({
+      method: 'Service.FreeSpace',
+      params: [],
+    })
+  }
+
+  public directoryTree() {
+    return this.sendHTTP<string[]>({
+      method: 'Service.DirectoryTree',
+      params: [],
+    })
+  }
+
+  public updateExecutable() {
+    return this.sendHTTP({
+      method: 'Service.UpdateExecutable',
+      params: []
+    })
+  }
+}
--- a/frontend/src/providers/ToasterProvider.tsx
+++ b/frontend/src/providers/ToasterProvider.tsx
@@ -0,0 +1,35 @@
+import { Alert, Snackbar } from "@mui/material"
+import { useRecoilState } from 'recoil'
+import { toastListState } from '../atoms/toast'
+import { useEffect } from 'react'
+
+const Toaster: React.FC = () => {
+  const [toasts, setToasts] = useRecoilState(toastListState)
+
+  useEffect(() => {
+    if (toasts.length > 0) {
+      const interval = setInterval(() => {
+        setToasts(t => t.filter((x) => (Date.now() - x.createdAt) < 1500))
+      }, 1500)
+
+      return () => clearInterval(interval)
+    }
+  }, [setToasts, toasts])
+
+  return (
+    <>
+      {toasts.map((toast, index) => (
+        <Snackbar
+          key={index}
+          open={toast.open}
+        >
+          <Alert variant="filled" severity={toast.severity}>
+            {toast.message}
+          </Alert>
+        </Snackbar>
+      ))}
+    </>
+  )
+}
+
+export default Toaster
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -0,0 +1,62 @@
+import { CircularProgress } from '@mui/material'
+import { Suspense, lazy } from 'react'
+import { createBrowserRouter } from 'react-router-dom'
+import Layout from './Layout'
+
+const Home = lazy(() => import('./views/Home'))
+const Login = lazy(() => import('./views/Login'))
+const Archive = lazy(() => import('./views/Archive'))
+const Settings = lazy(() => import('./views/Settings'))
+
+const ErrorBoundary = lazy(() => import('./components/ErrorBoundary'))
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    Component: () => <Layout />,
+    children: [
+      {
+        path: '/',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <Home />
+          </Suspense >
+        ),
+        errorElement: (
+          <Suspense fallback={<CircularProgress />}>
+            <ErrorBoundary />
+          </Suspense >
+        )
+      },
+      {
+        path: '/settings',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <Settings />
+          </Suspense >
+        )
+      },
+      {
+        path: '/archive',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <Archive />
+          </Suspense >
+        ),
+        errorElement: (
+          <Suspense fallback={<CircularProgress />}>
+            <ErrorBoundary />
+          </Suspense >
+        )
+      },
+      {
+        path: '/login',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <Login />
+          </Suspense >
+        )
+      },
+    ]
+  },
+])
--- a/frontend/src/stores/store.ts
+++ b/frontend/src/stores/store.ts
@@ -1,15 +0,0 @@
-import { configureStore } from '@reduxjs/toolkit'
-import settingsReducer from '../features/settings/settingsSlice'
-import statussReducer from '../features/status/statusSlice'
-
-export const store = configureStore({
-    reducer: {
-        settings: settingsReducer,
-        status: statussReducer,
-    },
-})
-
-export type RootState = ReturnType<typeof store.getState>
-
-export type AppDispatch = typeof store.dispatch
-
--- a/frontend/src/types.d.ts
+++ b/frontend/src/types.d.ts
@@ -1,63 +0,0 @@
-export type RPCMethods =
-  | "Service.Exec"
-  | "Service.Kill"
-  | "Service.Clear"
-  | "Service.Running"
-  | "Service.KillAll"
-  | "Service.FreeSpace"
-  | "Service.Formats"
-  | "Service.DirectoryTree"
-  | "Service.UpdateExecutable"
-
-export type RPCRequest = {
-  method: RPCMethods,
-  params?: any[],
-  id?: string
-}
-
-export type RPCResponse<T> = {
-  result: T,
-  error: number | null
-  id?: string
-}
-
-export type RPCResult = {
-  id: string
-  progress: {
-    speed: number
-    eta: number
-    percentage: string
-  }
-  info: {
-    url: string
-    filesize_approx?: number
-    resolution?: string
-    thumbnail: string
-    title: string
-    vcodec?: string
-    acodec?: string
-    ext?: string
-  }
-}
-
-export type RPCParams = {
-  URL: string
-  Params?: string
-}
-
-export interface IDLMetadata {
-  formats: Array<IDLFormat>,
-  best: IDLFormat,
-  thumbnail: string,
-  title: string,
-}
-
-export interface IDLFormat {
-  format_id: string,
-  format_note: string,
-  fps: number,
-  resolution: string,
-  vcodec: string,
-  acodec: string,
-  filesize_approx: number,
-}
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,85 @@
+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> = {
+  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 = {
+  id: string
+  progress: DownloadProgress
+  info: DownloadInfo
+}
+
+export type RPCParams = {
+  URL: string
+  Params?: string
+}
+
+export interface 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'>
+
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -1,11 +1,13 @@
+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)
+  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)
 }

 /**
@@ -18,8 +20,8 @@ export function validateIP(ipAddr: string): boolean {
 * @returns domain validity test
 */
 export function validateDomain(domainName: string): boolean {
-    let domainRegex = /[^@ \t\r\n]+.[^@ \t\r\n]+\.[^@ \t\r\n]+/
-    return domainRegex.test(domainName) || domainName === 'localhost'
+  let domainRegex = /[^@ \t\r\n]+.[^@ \t\r\n]+\.[^@ \t\r\n]+/
+  return domainRegex.test(domainName) || domainName === 'localhost'
 }

 /**
@@ -34,15 +36,15 @@ export function validateDomain(domainName: string): boolean {
 * @returns url validity test
 */
 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)
+  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 ''
+  if (str) {
+    return str.length > lim ? `${str.substring(0, lim)}...` : str
+  }
+  return ''
 }

 /**
@@ -51,40 +53,52 @@ export function ellipsis(str: string, lim: number): string {
 * @returns download speed in KiB/s
 */
 export function detectSpeed(str: string): number {
-    let effective = str.match(/[\d,]+(\.\d+)?/)![0]
-    const unit = str.replace(effective, '')
-    switch (unit) {
-        case 'MiB/s':
-            return Number(effective) * 1000
-        case 'KiB/s':
-            return Number(effective)
-        default:
-            return 0
-    }
+  let effective = str.match(/[\d,]+(\.\d+)?/)![0]
+  const unit = str.replace(effective, '')
+  switch (unit) {
+    case 'MiB/s':
+      return Number(effective) * 1000
+    case 'KiB/s':
+      return Number(effective)
+    default:
+      return 0
+  }
 }

 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 function getWebSocketEndpoint() {
-    const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
-    return `${protocol}://${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}/ws-rpc`
-}
-
-export function getHttpRPCEndpoint() {
-    return `${window.location.protocol}//${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}/http-rpc`
+  if (codes.length > 1) {
+    return codes.reduce((v, a) => ` -f ${v}+${a}`)
+  }
+  if (codes.length === 1) {
+    return ` -f ${codes[0]}`
+  }
+  return ''
 }

 export function formatGiB(bytes: number) {
-    return `${(bytes / 1_000_000_000).toFixed(0)}GiB`
+  return `${(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 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'
+  }
+}
--- a/frontend/src/views/Archive.tsx
+++ b/frontend/src/views/Archive.tsx
@@ -0,0 +1,255 @@
+import {
+  Backdrop,
+  Button,
+  Checkbox,
+  CircularProgress,
+  Container,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Paper,
+  SpeedDial,
+  SpeedDialAction,
+  SpeedDialIcon,
+  Typography
+} from '@mui/material'
+
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
+import FolderIcon from '@mui/icons-material/Folder'
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile'
+import VideoFileIcon from '@mui/icons-material/VideoFile'
+
+import { Buffer } from 'buffer'
+import { useEffect, useMemo, useState, useTransition } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useRecoilValue } from 'recoil'
+import { BehaviorSubject, Subject, combineLatestWith, map, share } from 'rxjs'
+import { serverURL } from '../atoms/settings'
+import { useObservable } from '../hooks/observable'
+import { useI18n } from '../hooks/useI18n'
+import { ffetch } from '../lib/httpClient'
+import { DeleteRequest, DirectoryEntry } from '../types'
+import { roundMiB } from '../utils'
+
+export default function Downloaded() {
+  const serverAddr = useRecoilValue(serverURL)
+  const navigate = useNavigate()
+
+  const { i18n } = useI18n()
+
+  const [openDialog, setOpenDialog] = useState(false)
+
+  const files$ = useMemo(() => new Subject<DirectoryEntry[]>(), [])
+  const selected$ = useMemo(() => new BehaviorSubject<string[]>([]), [])
+
+  const [isPending, startTransition] = useTransition()
+
+  const fetcher = () => ffetch<DirectoryEntry[]>(
+    `${serverAddr}/archive/downloaded`,
+    (d) => files$.next(d),
+    () => navigate('/login'),
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        subdir: '',
+      })
+    }
+  )
+
+  const fetcherSubfolder = (sub: string) => {
+    const folders = sub.startsWith('/')
+      ? sub.substring(1).split('/')
+      : sub.split('/')
+
+    const relpath = folders.length >= 2
+      ? folders.slice(-(folders.length - 1)).join('/')
+      : folders.pop()
+
+    const _upperLevel = folders.slice(1, -1)
+    const upperLevel = _upperLevel.length === 2
+      ? ['.', ..._upperLevel].join('/')
+      : _upperLevel.join('/')
+
+    fetch(`${serverAddr}/archive/downloaded`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ subdir: relpath })
+    })
+      .then(res => res.json())
+      .then(data => {
+        files$.next(sub
+          ? [{
+            name: '..',
+            isDirectory: true,
+            path: upperLevel,
+          }, ...data]
+          : data
+        )
+      })
+  }
+
+  const selectable$ = useMemo(() => files$.pipe(
+    combineLatestWith(selected$),
+    map(([data, selected]) => data.map(x => ({
+      ...x,
+      selected: selected.includes(x.name)
+    }))),
+    share()
+  ), [])
+
+  const selectable = useObservable(selectable$, [])
+
+  const addSelected = (name: string) => {
+    selected$.value.includes(name)
+      ? selected$.next(selected$.value.filter(val => val !== name))
+      : selected$.next([...selected$.value, name])
+  }
+
+  const deleteSelected = () => {
+    Promise.all(selectable
+      .filter(entry => entry.selected)
+      .map(entry => fetch(`${serverAddr}/archive/delete`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          path: entry.path,
+          shaSum: entry.shaSum,
+        } as DeleteRequest)
+      }))
+    ).then(fetcher)
+  }
+
+  useEffect(() => {
+    fetcher()
+  }, [serverAddr])
+
+  const onFileClick = (path: string) => startTransition(() => {
+    window.open(`${serverAddr}/archive/d/${Buffer.from(path).toString('hex')}`)
+  })
+
+  const onFolderClick = (path: string) => startTransition(() => {
+    fetcherSubfolder(path)
+  })
+
+  return (
+    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+      <Backdrop
+        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={!(files$.observed) || isPending}
+      >
+        <CircularProgress color="primary" />
+      </Backdrop>
+      <Paper sx={{
+        p: 2,
+        display: 'flex',
+        flexDirection: 'column',
+      }}>
+        <Typography py={1} variant="h5" color="primary">
+          {i18n.t('archiveTitle')}
+        </Typography>
+        <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
+          {selectable.length === 0 && 'No files found'}
+          {selectable.map((file, idx) => (
+            <ListItem
+              key={idx}
+              secondaryAction={
+                <div>
+                  {!file.isDirectory && <Typography
+                    variant="caption"
+                    component="span"
+                  >
+                    {roundMiB(file.size)}
+                  </Typography>
+                  }
+                  {!file.isDirectory && <Checkbox
+                    edge="end"
+                    checked={file.selected}
+                    onChange={() => addSelected(file.name)}
+                  />}
+                </div>
+              }
+              disablePadding
+            >
+              <ListItemButton onClick={
+                () => file.isDirectory
+                  ? onFolderClick(file.path)
+                  : onFileClick(file.path)
+              }>
+                <ListItemIcon>
+                  {file.isDirectory
+                    ? <FolderIcon />
+                    : file.isVideo
+                      ? <VideoFileIcon />
+                      : <InsertDriveFileIcon />
+                  }
+                </ListItemIcon>
+                <ListItemText
+                  primary={file.name}
+                  secondary={file.name != '..' && new Date(file.modTime).toLocaleString()}
+                />
+              </ListItemButton>
+            </ListItem>
+          ))}
+        </List>
+      </Paper>
+      <SpeedDial
+        ariaLabel="SpeedDial basic example"
+        sx={{ position: 'absolute', bottom: 32, right: 32 }}
+        icon={<SpeedDialIcon />}
+      >
+        <SpeedDialAction
+          icon={<DeleteForeverIcon />}
+          tooltipTitle={`Delete selected`}
+          tooltipOpen
+          onClick={() => {
+            if (selected$.value.length > 0) {
+              setOpenDialog(true)
+            }
+          }}
+        />
+      </SpeedDial>
+      <Dialog
+        open={openDialog}
+        onClose={() => setOpenDialog(false)}
+      >
+        <DialogTitle>
+          Are you sure?
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            You're deleting:
+          </DialogContentText>
+          <ul>
+            {selected$.value.map((entry, idx) => (
+              <li key={idx}>{entry}</li>
+            ))}
+          </ul>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpenDialog(false)}>Cancel</Button>
+          <Button onClick={() => {
+            deleteSelected()
+            setOpenDialog(false)
+          }} autoFocus
+          >
+            Ok
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Container>
+  )
+}
--- a/frontend/src/views/Home.tsx
+++ b/frontend/src/views/Home.tsx
@@ -0,0 +1,18 @@
+import {
+  Container
+} from '@mui/material'
+import Downloads from '../components/Downloads'
+import HomeActions from '../components/HomeActions'
+import LoadingBackdrop from '../components/LoadingBackdrop'
+import Splash from '../components/Splash'
+
+export default function Home() {
+  return (
+    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+      <LoadingBackdrop />
+      <Splash />
+      <Downloads />
+      <HomeActions />
+    </Container>
+  )
+}
--- a/frontend/src/views/Login.tsx
+++ b/frontend/src/views/Login.tsx
@@ -0,0 +1,84 @@
+/*
+  Login view component
+*/
+
+import styled from '@emotion/styled'
+import {
+  Button,
+  Container,
+  Paper,
+  Stack,
+  TextField,
+  Typography
+} from '@mui/material'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useRecoilValue } from 'recoil'
+import { serverURL } from '../atoms/settings'
+
+const LoginContainer = styled(Container)({
+  display: 'flex',
+  minWidth: '100%',
+  minHeight: '100vh',
+  alignItems: 'center',
+  justifyContent: 'center',
+})
+
+const Title = styled(Typography)({
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingBottom: '0.5rem'
+})
+
+export default function Login() {
+  const [secret, setSecret] = useState('')
+  const [formHasError, setFormHasError] = useState(false)
+
+  const url = useRecoilValue(serverURL)
+
+  const navigate = useNavigate()
+
+  const login = async () => {
+    const res = await fetch(`${url}/auth/login`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ secret })
+    })
+    res.ok ? navigate('/') : setFormHasError(true)
+  }
+
+  return (
+    <LoginContainer>
+      <Paper sx={{ padding: '1.5rem', minWidth: '25%' }}>
+        <Stack direction="column" spacing={2}>
+          <Title fontWeight={'700'} fontSize={32} color={'primary'}>
+            yt-dlp WebUI
+          </Title>
+          <Title fontWeight={'500'} fontSize={16} color={'gray'}>
+            Authentication token will expire after 30 days.
+          </Title>
+          <Title fontWeight={'500'} fontSize={16} color={'gray'}>
+            In order to enable RPC authentication append the --auth
+            <br />
+            and --secret [secret] flags.
+          </Title>
+          <TextField
+            id="outlined-password-input"
+            label="RPC secret"
+            type="password"
+            autoComplete="current-password"
+            error={formHasError}
+            onChange={e => setSecret(e.currentTarget.value)}
+          />
+          <Button variant="contained" size="large" onClick={() => login()}>
+            Submit
+          </Button>
+        </Stack>
+      </Paper>
+    </LoginContainer>
+  )
+}
--- a/frontend/src/views/Settings.tsx
+++ b/frontend/src/views/Settings.tsx
@@ -11,106 +11,117 @@ import {
  Paper,
  Select,
  SelectChangeEvent,
-  Snackbar,
  Stack,
  Switch,
  TextField,
-  Typography
-} from "@mui/material";
-import { useMemo, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { debounceTime, distinctUntilChanged, map, of, takeWhile } from "rxjs";
-import { CliArguments } from "./features/core/argsParser";
-import I18nBuilder from "./features/core/intl";
-import { RPCClient } from "./features/core/rpcClient";
+  Typography,
+  capitalize
+} from '@mui/material'
+import { useEffect, useMemo, useState } from 'react'
+import { useRecoilState } from 'recoil'
 import {
-  LanguageUnion,
-  setCliArgs,
-  setEnableCustomArgs,
-  setFileRenaming,
-  setFormatSelection,
-  setLanguage,
-  setPathOverriding,
-  setServerAddr,
-  setServerPort,
-  setTheme,
-  ThemeUnion
-} from "./features/settings/settingsSlice";
-import { updated } from "./features/status/statusSlice";
-import { RootState } from "./stores/store";
-import { validateDomain, validateIP } from "./utils";
+  Subject,
+  debounceTime,
+  distinctUntilChanged,
+  map,
+  takeWhile
+} from 'rxjs'
+import {
+  Language,
+  Theme,
+  enableCustomArgsState,
+  fileRenamingState,
+  formatSelectionState,
+  languageState,
+  languages,
+  latestCliArgumentsState,
+  pathOverridingState,
+  serverAddressState,
+  serverPortState,
+  themeState
+} from '../atoms/settings'
+import { useToast } from '../hooks/toast'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+import { CliArguments } from '../lib/argsParser'
+import { validateDomain, validateIP } from '../utils'

-export default function Settings({ socket }: { socket: WebSocket }) {
-  const settings = useSelector((state: RootState) => state.settings)
-  const status = useSelector((state: RootState) => state.status)
-  const dispatch = useDispatch()
+// NEED ABSOLUTELY TO BE SPLIT IN MULTIPLE COMPONENTS
+export default function Settings() {
+  const [formatSelection, setFormatSelection] = useRecoilState(formatSelectionState)
+  const [pathOverriding, setPathOverriding] = useRecoilState(pathOverridingState)
+  const [fileRenaming, setFileRenaming] = useRecoilState(fileRenamingState)
+  const [enableArgs, setEnableArgs] = useRecoilState(enableCustomArgsState)
+  const [serverAddr, setServerAddr] = useRecoilState(serverAddressState)
+  const [serverPort, setServerPort] = useRecoilState(serverPortState)
+  const [language, setLanguage] = useRecoilState(languageState)
+  const [cliArgs, setCliArgs] = useRecoilState(latestCliArgumentsState)
+  const [theme, setTheme] = useRecoilState(themeState)

-  const [invalidIP, setInvalidIP] = useState(false);
+  const [invalidIP, setInvalidIP] = useState(false)

-  const i18n = useMemo(() => new I18nBuilder(settings.language), [settings.language])
-  const client = useMemo(() => new RPCClient(socket), [settings.serverAddr, settings.serverPort])
-  const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [settings.cliArgs])
-  /**
-   * Update the server ip address state and localstorage whenever the input value changes.  
-   * Validate the ip-addr then set.s
-   * @param event Input change event
-   */
-  const handleAddrChange = (event: any) => {
-    const $serverAddr = of(event)
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+
+  const { pushMessage } = useToast()
+
+  const argsBuilder = useMemo(() => new CliArguments().fromString(cliArgs), [])
+
+  const serverAddr$ = useMemo(() => new Subject<string>(), [])
+  const serverPort$ = useMemo(() => new Subject<string>(), [])
+
+  useEffect(() => {
+    const sub = serverAddr$
      .pipe(
-        map(event => event.target.value),
        debounceTime(500),
        distinctUntilChanged()
      )
      .subscribe(addr => {
        if (validateIP(addr)) {
          setInvalidIP(false)
-          dispatch(setServerAddr(addr))
+          setServerAddr(addr)
        } else if (validateDomain(addr)) {
          setInvalidIP(false)
-          dispatch(setServerAddr(addr))
+          setServerAddr(addr)
        } else {
          setInvalidIP(true)
        }
      })
-    return $serverAddr.unsubscribe()
-  }
+    return () => sub.unsubscribe()
+  }, [serverAddr$])

-  /**
-   * Set server port
-   */
-  const handlePortChange = (event: any) => {
-    const $port = of(event)
+  useEffect(() => {
+    const sub = serverPort$
      .pipe(
-        map(event => event.target.value),
+        debounceTime(500),
        map(val => Number(val)),
        takeWhile(val => isFinite(val) && val <= 65535),
      )
      .subscribe(port => {
-        dispatch(setServerPort(port.toString()))
+        setServerPort(port)
      })
-    return $port.unsubscribe()
-  }
+    return () => sub.unsubscribe()
+  }, [])

  /**
   * Language toggler handler 
   */
-  const handleLanguageChange = (event: SelectChangeEvent<LanguageUnion>) => {
-    dispatch(setLanguage(event.target.value as LanguageUnion));
+  const handleLanguageChange = (event: SelectChangeEvent<Language>) => {
+    setLanguage(event.target.value as Language)
  }

  /**
   * Theme toggler handler 
   */
-  const handleThemeChange = (event: SelectChangeEvent<ThemeUnion>) => {
-    dispatch(setTheme(event.target.value as ThemeUnion));
+  const handleThemeChange = (event: SelectChangeEvent<Theme>) => {
+    setTheme(event.target.value as Theme)
  }

  /**
-   * Send via WebSocket a message in order to update the yt-dlp binary from server
+   * Updates yt-dlp binary via RPC
   */
  const updateBinary = () => {
-    client.updateExecutable().then(() => dispatch(updated()))
+    client.updateExecutable().then(() => pushMessage(i18n.t('toastUpdated')))
  }

  return (
@@ -125,7 +136,7 @@ export default function Settings({ socket }: { socket: WebSocket }) {
              minHeight: 240,
            }}
          >
-            <Typography pb={2} variant="h6" color="primary">
+            <Typography pb={3} variant="h5" color="primary">
              {i18n.t('settingsAnchor')}
            </Typography>
            <FormGroup>
@@ -134,9 +145,9 @@ export default function Settings({ socket }: { socket: WebSocket }) {
                  <TextField
                    fullWidth
                    label={i18n.t('serverAddressTitle')}
-                    defaultValue={settings.serverAddr}
+                    defaultValue={serverAddr}
                    error={invalidIP}
-                    onChange={handleAddrChange}
+                    onChange={(e) => serverAddr$.next(e.currentTarget.value)}
                    InputProps={{
                      startAdornment: <InputAdornment position="start">ws://</InputAdornment>,
                    }}
@@ -147,9 +158,9 @@ export default function Settings({ socket }: { socket: WebSocket }) {
                  <TextField
                    fullWidth
                    label={i18n.t('serverPortTitle')}
-                    defaultValue={settings.serverPort}
-                    onChange={handlePortChange}
-                    error={isNaN(Number(settings.serverPort)) || Number(settings.serverPort) > 65535}
+                    defaultValue={serverPort}
+                    onChange={(e) => serverPort$.next(e.currentTarget.value)}
+                    error={isNaN(Number(serverPort)) || Number(serverPort) > 65535}
                    sx={{ mb: 2 }}
                  />
                </Grid>
@@ -159,17 +170,15 @@ export default function Settings({ socket }: { socket: WebSocket }) {
                  <FormControl fullWidth>
                    <InputLabel>{i18n.t('languageSelect')}</InputLabel>
                    <Select
-                      defaultValue={settings.language}
+                      defaultValue={language}
                      label={i18n.t('languageSelect')}
                      onChange={handleLanguageChange}
                    >
-                      <MenuItem value="english">English</MenuItem>
-                      <MenuItem value="spanish">Spanish</MenuItem>
-                      <MenuItem value="italian">Italian</MenuItem>
-                      <MenuItem value="chinese">Chinese</MenuItem>
-                      <MenuItem value="russian">Russian</MenuItem>
-                      <MenuItem value="korean">Korean</MenuItem>
-                      <MenuItem value="japanese">Japanese</MenuItem>
+                      {languages.map(l => (
+                        <MenuItem value={l} key={l}>
+                          {capitalize(l)}
+                        </MenuItem>
+                      ))}
                    </Select>
                  </FormControl>
                </Grid>
@@ -177,7 +186,7 @@ export default function Settings({ socket }: { socket: WebSocket }) {
                  <FormControl fullWidth>
                    <InputLabel>{i18n.t('themeSelect')}</InputLabel>
                    <Select
-                      defaultValue={settings.theme}
+                      defaultValue={theme}
                      label={i18n.t('themeSelect')}
                      onChange={handleThemeChange}
                    >
@@ -186,22 +195,12 @@ export default function Settings({ socket }: { socket: WebSocket }) {
                    </Select>
                  </FormControl>
                </Grid>
-                {/* <Grid item xs={12} md={6}>
-                  <TextField
-                    fullWidth
-                    label={'Max download speed' || i18n.t('serverPortTitle')}
-                    defaultValue={settings.serverPort}
-                    onChange={handlePortChange}
-                    error={isNaN(Number(settings.serverPort)) || Number(settings.serverPort) > 65535}
-                    sx={{ mb: 2 }}
-                  />
-                </Grid> */}
              </Grid>
              <FormControlLabel
                control={
                  <Switch
-                    defaultChecked={cliArgs.noMTime}
-                    onChange={() => dispatch(setCliArgs(cliArgs.toggleNoMTime().toString()))}
+                    defaultChecked={argsBuilder.noMTime}
+                    onChange={() => setCliArgs(argsBuilder.toggleNoMTime().toString())}
                  />
                }
                label={i18n.t('noMTimeCheckbox')}
@@ -210,9 +209,9 @@ export default function Settings({ socket }: { socket: WebSocket }) {
              <FormControlLabel
                control={
                  <Switch
-                    defaultChecked={cliArgs.extractAudio}
-                    onChange={() => dispatch(setCliArgs(cliArgs.toggleExtractAudio().toString()))}
-                    disabled={settings.formatSelection}
+                    defaultChecked={argsBuilder.extractAudio}
+                    onChange={() => setCliArgs(argsBuilder.toggleExtractAudio().toString())}
+                    disabled={formatSelection}
                  />
                }
                label={i18n.t('extractAudioCheckbox')}
@@ -220,10 +219,10 @@ export default function Settings({ socket }: { socket: WebSocket }) {
              <FormControlLabel
                control={
                  <Switch
-                    defaultChecked={settings.formatSelection}
+                    defaultChecked={formatSelection}
                    onChange={() => {
-                      dispatch(setCliArgs(cliArgs.disableExtractAudio().toString()))
-                      dispatch(setFormatSelection(!settings.formatSelection))
+                      setCliArgs(argsBuilder.disableExtractAudio().toString())
+                      setFormatSelection(!formatSelection)
                    }}
                  />
                }
@@ -237,9 +236,9 @@ export default function Settings({ socket }: { socket: WebSocket }) {
                  <FormControlLabel
                    control={
                      <Switch
-                        defaultChecked={settings.pathOverriding}
+                        defaultChecked={!!pathOverriding}
                        onChange={() => {
-                          dispatch(setPathOverriding(!settings.pathOverriding))
+                          setPathOverriding(state => !state)
                        }}
                      />
                    }
@@ -248,9 +247,9 @@ export default function Settings({ socket }: { socket: WebSocket }) {
                  <FormControlLabel
                    control={
                      <Switch
-                        defaultChecked={settings.fileRenaming}
+                        defaultChecked={fileRenaming}
                        onChange={() => {
-                          dispatch(setFileRenaming(!settings.fileRenaming))
+                          setFileRenaming(state => !state)
                        }}
                      />
                    }
@@ -259,9 +258,9 @@ export default function Settings({ socket }: { socket: WebSocket }) {
                  <FormControlLabel
                    control={
                      <Switch
-                        defaultChecked={settings.enableCustomArgs}
+                        defaultChecked={enableArgs}
                        onChange={() => {
-                          dispatch(setEnableCustomArgs(!settings.enableCustomArgs))
+                          setEnableArgs(state => !state)
                        }}
                      />
                    }
@@ -274,7 +273,7 @@ export default function Settings({ socket }: { socket: WebSocket }) {
                  <Button
                    sx={{ mr: 1, mt: 3 }}
                    variant="contained"
-                    onClick={() => dispatch(updated())}
+                    onClick={() => updateBinary()}
                  >
                    {i18n.t('updateBinButton')}
                  </Button>
@@ -284,12 +283,6 @@ export default function Settings({ socket }: { socket: WebSocket }) {
          </Paper>
        </Grid>
      </Grid>
-      <Snackbar
-        open={status.updated}
-        autoHideDuration={1500}
-        message={i18n.t('toastUpdated')}
-        onClose={updateBinary}
-      />
    </Container>
-  );
-}
+  )
+}
--- a/go.mod
+++ b/go.mod
@@ -1,27 +1,16 @@
 module github.com/marcopeocchi/yt-dlp-web-ui

-go 1.19
+go 1.20

 require (
-	github.com/goccy/go-json v0.10.0
-	github.com/gofiber/fiber/v2 v2.41.0
-	github.com/gofiber/websocket/v2 v2.1.2
+	github.com/go-chi/chi/v5 v5.0.10
+	github.com/goccy/go-json v0.10.2
+	github.com/golang-jwt/jwt/v5 v5.0.0
 	github.com/google/uuid v1.3.0
-	github.com/marcopeocchi/fazzoletti v0.0.0-20221114144444-1e802380a7db
-	golang.org/x/sys v0.4.0
+	github.com/gorilla/websocket v1.5.0
+	github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa
+	golang.org/x/sys v0.9.0
 	gopkg.in/yaml.v3 v3.0.1
 )

-require (
-	github.com/andybalholm/brotli v1.0.4 // indirect
-	github.com/fasthttp/websocket v1.5.0 // indirect
-	github.com/klauspost/compress v1.15.14 // indirect
-	github.com/mattn/go-colorable v0.1.13 // indirect
-	github.com/mattn/go-isatty v0.0.17 // indirect
-	github.com/mattn/go-runewidth v0.0.14 // indirect
-	github.com/rivo/uniseg v0.4.3 // indirect
-	github.com/savsgio/gotils v0.0.0-20220530130905-52f3993e8d6d // indirect
-	github.com/valyala/bytebufferpool v1.0.0 // indirect
-	github.com/valyala/fasthttp v1.43.0 // indirect
-	github.com/valyala/tcplisten v1.0.0 // indirect
-)
+require github.com/go-chi/cors v1.2.1
--- a/go.sum
+++ b/go.sum
@@ -1,61 +1,19 @@
-github.com/andybalholm/brotli v1.0.4 h1:V7DdXeJtZscaqfNuAdSRuRFzuiKlHSC/Zh3zl9qY3JY=
-github.com/andybalholm/brotli v1.0.4/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
-github.com/fasthttp/websocket v1.5.0 h1:B4zbe3xXyvIdnqjOZrafVFklCUq5ZLo/TqCt5JA1wLE=
-github.com/fasthttp/websocket v1.5.0/go.mod h1:n0BlOQvJdPbTuBkZT0O5+jk/sp/1/VCzquR1BehI2F4=
-github.com/goccy/go-json v0.10.0 h1:mXKd9Qw4NuzShiRlOXKews24ufknHO7gx30lsDyokKA=
-github.com/goccy/go-json v0.10.0/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
-github.com/gofiber/fiber/v2 v2.40.1/go.mod h1:Gko04sLksnHbzLSRBFWPFdzM9Ws9pRxvvIaohJK1dsk=
-github.com/gofiber/fiber/v2 v2.41.0 h1:YhNoUS/OTjEz+/WLYuQ01xI7RXgKEFnGBKMagAu5f0M=
-github.com/gofiber/fiber/v2 v2.41.0/go.mod h1:RdebcCuCRFp4W6hr3968/XxwJVg0K+jr9/Ae0PFzZ0Q=
-github.com/gofiber/websocket/v2 v2.1.2 h1:EulKyLB/fJgui5+6c8irwEnYQ9FRsrLZfkrq9OfTDGc=
-github.com/gofiber/websocket/v2 v2.1.2/go.mod h1:S+sKWo0xeC7Wnz5h4/8f6D/NxsrLFIdWDYB3SyVO9pE=
+github.com/go-chi/chi/v5 v5.0.10 h1:rLz5avzKpjqxrYwXNfmjkrYYXOyLJd37pz53UFHC6vk=
+github.com/go-chi/chi/v5 v5.0.10/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/goccy/go-json v0.10.2 h1:CrxCmQqYDkv1z7lO7Wbh2HN93uovUHgrECaO5ZrCXAU=
+github.com/goccy/go-json v0.10.2/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
+github.com/golang-jwt/jwt/v5 v5.0.0 h1:1n1XNM9hk7O9mnQoNBGolZvzebBQ7p93ULHRc28XJUE=
+github.com/golang-jwt/jwt/v5 v5.0.0/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
 github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
 github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
-github.com/klauspost/compress v1.14.1/go.mod h1:/3/Vjq9QcHkK5uEr5lBEmyoZ1iFhe47etQ6QUkpK6sk=
-github.com/klauspost/compress v1.15.9/go.mod h1:PhcZ0MbTNciWF3rruxRgKxI5NkcHHrHUDtV4Yw2GlzU=
-github.com/klauspost/compress v1.15.14 h1:i7WCKDToww0wA+9qrUZ1xOjp218vfFo3nTU6UHp+gOc=
-github.com/klauspost/compress v1.15.14/go.mod h1:QPwzmACJjUTFsnSHH934V6woptycfrDDJnH7hvFVbGM=
-github.com/marcopeocchi/fazzoletti v0.0.0-20221114144444-1e802380a7db h1:SmKRgCLsImPxBTIzmUpbQyv+7FembiZaq/QTwtDqar4=
-github.com/marcopeocchi/fazzoletti v0.0.0-20221114144444-1e802380a7db/go.mod h1:RvfVo/6Sbnfra9kkvIxDW8NYOOaYsHjF0DdtMCs9cdo=
-github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
-github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
-github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-isatty v0.0.17 h1:BTarxUcIeDqL27Mc+vyvdWYSL28zpIhv3RoTdsLMPng=
-github.com/mattn/go-isatty v0.0.17/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-runewidth v0.0.14 h1:+xnbZSEeDbOIg5/mE6JF0w6n9duR1l3/WmbinWVwUuU=
-github.com/mattn/go-runewidth v0.0.14/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
-github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
-github.com/rivo/uniseg v0.4.3 h1:utMvzDsuh3suAEnhH0RdHmoPbU648o6CvXxTx4SBMOw=
-github.com/rivo/uniseg v0.4.3/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
-github.com/savsgio/gotils v0.0.0-20211223103454-d0aaa54c5899/go.mod h1:oejLrk1Y/5zOF+c/aHtXqn3TFlzzbAgPWg8zBiAHDas=
-github.com/savsgio/gotils v0.0.0-20220530130905-52f3993e8d6d h1:Q+gqLBOPkFGHyCJxXMRqtUgUbTjI8/Ze8vu8GGyNFwo=
-github.com/savsgio/gotils v0.0.0-20220530130905-52f3993e8d6d/go.mod h1:Gy+0tqhJvgGlqnTF8CVGP0AaGRjwBtXs/a5PA0Y3+A4=
-github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
-github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
-github.com/valyala/fasthttp v1.33.0/go.mod h1:KJRK/MXx0J+yd0c5hlR+s1tIHD72sniU8ZJjl97LIw4=
-github.com/valyala/fasthttp v1.41.0/go.mod h1:f6VbjjoI3z1NDOZOv17o6RvtRSWxC77seBFc2uWtgiY=
-github.com/valyala/fasthttp v1.43.0 h1:Gy4sb32C98fbzVWZlTM1oTMdLWGyvxR03VhM6cBIU4g=
-github.com/valyala/fasthttp v1.43.0/go.mod h1:f6VbjjoI3z1NDOZOv17o6RvtRSWxC77seBFc2uWtgiY=
-github.com/valyala/tcplisten v1.0.0 h1:rBHj/Xf+E1tRGZyWIWwJDiRY0zc1Js+CV5DqwacVSA8=
-github.com/valyala/tcplisten v1.0.0/go.mod h1:T0xQ8SeCZGxckz9qRXTfG43PvQ/mcWh7FwZEA7Ioqkc=
-golang.org/x/crypto v0.0.0-20220112180741-5e0467b6c7ce/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
-golang.org/x/crypto v0.0.0-20220214200702-86341886e292/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
-golang.org/x/net v0.0.0-20211112202133-69e39bad7dc2/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
-golang.org/x/net v0.0.0-20220111093109-d55c255bac03/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
-golang.org/x/net v0.0.0-20220906165146-f3363e06e74c/go.mod h1:YDH+HFinaLZZlnHAfSS6ZXJJ9M9t4Dl22yv3iI2vPwk=
-golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220111092808-5a964db01320/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220728004956-3c1f35247d10/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.4.0 h1:Zr2JFtRQNX3BCZ8YtxRE9hNJYC8J6I1MVbMg6owUp18=
-golang.org/x/sys v0.4.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
-golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
-golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
-golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+github.com/gorilla/websocket v1.5.0 h1:PPwGk2jz7EePpoHN/+ClbZu8SPxiqlu12wZP/3sWmnc=
+github.com/gorilla/websocket v1.5.0/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
+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=
+golang.org/x/sys v0.9.0 h1:KS/R3tvhPqvJvwcKfnBHJwwthS11LRhmM5D59eEXa0s=
+golang.org/x/sys v0.9.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
--- a/main.go
+++ b/main.go
@@ -1,23 +1,25 @@
 package main

 import (
-	"context"
 	"embed"
 	"flag"
 	"io/fs"
 	"log"
+	"runtime"

 	"github.com/marcopeocchi/yt-dlp-web-ui/server"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 )

-type ContextKey interface{}
-
 var (
 	port           int
+	queueSize      int
+	configFile     string
 	downloadPath   string
 	downloaderPath string
-	configFile     string
+
+	requireAuth bool
+	rpcSecret   string

 	//go:embed frontend/dist
 	frontend embed.FS
@@ -25,9 +27,15 @@ var (

 func init() {
 	flag.IntVar(&port, "port", 3033, "Port where server will listen at")
-	flag.StringVar(&downloadPath, "out", ".", "Directory where files will be saved")
+	flag.IntVar(&queueSize, "qs", runtime.NumCPU(), "Download queue size")
+
+	flag.StringVar(&configFile, "conf", "", "Config file path")
+	flag.StringVar(&downloadPath, "out", ".", "Where files will be saved")
 	flag.StringVar(&downloaderPath, "driver", "yt-dlp", "yt-dlp executable path")
-	flag.StringVar(&configFile, "conf", "", "yt-dlp-WebUI config file path")
+
+	flag.BoolVar(&requireAuth, "auth", false, "Enable RPC authentication")
+	flag.StringVar(&rpcSecret, "secret", "", "Secret required for auth")
+
 	flag.Parse()
 }

@@ -38,19 +46,19 @@ func main() {
 		log.Fatalln(err)
 	}

-	cfg := config.Instance()
+	c := config.Instance()
+
+	c.SetPort(port)
+	c.QueueSize(queueSize)
+	c.DownloadPath(downloadPath)
+	c.DownloaderPath(downloaderPath)
+
+	c.RequireAuth(requireAuth)
+	c.RPCSecret(rpcSecret)

 	if configFile != "" {
-		cfg.LoadFromFile(configFile)
+		c.LoadFromFile(configFile)
 	}

-	cfg.SetPort(port)
-	cfg.DownloadPath(downloadPath)
-	cfg.DownloaderPath(downloaderPath)
-
-	ctx := context.Background()
-	ctx = context.WithValue(ctx, ContextKey("port"), port)
-	ctx = context.WithValue(ctx, ContextKey("frontend"), frontend)
-
-	server.RunBlocking(ctx)
+	server.RunBlocking(port, frontend)
 }
--- a/server/cli/ascii.go
+++ b/server/cli/ascii.go
@@ -1,7 +1,5 @@
 package cli

-import "fmt"
-
 const (
 	// FG
 	Red     = "\033[31m"
@@ -12,12 +10,8 @@ const (
 	Cyan    = "\033[36m"
 	Reset   = "\033[0m"
 	// BG
-	BgRed   = "\033[1;41m"
-	BgBlue  = "\033[1;44m"
-	BgGreen = "\033[1;42m"
+	BgRed     = "\033[1;41m"
+	BgBlue    = "\033[1;44m"
+	BgGreen   = "\033[1;42m"
+	BgMagenta = "\033[1;45m"
 )
-
-// Formats a message with the specified ascii escape code, then reset.
-func Format(message string, code string) string {
-	return fmt.Sprintf("%s%s%s", code, message, Reset)
-}
--- a/server/config/config_singleton.go
+++ b/server/config/config_singleton.go
@@ -7,12 +7,15 @@ import (
 	"gopkg.in/yaml.v3"
 )

-var lock = &sync.Mutex{}
+var lock sync.Mutex

 type serverConfig struct {
 	Port           int    `yaml:"port"`
 	DownloadPath   string `yaml:"downloadPath"`
 	DownloaderPath string `yaml:"downloaderPath"`
+	RequireAuth    bool   `yaml:"require_auth"`
+	RPCSecret      string `yaml:"rpc_secret"`
+	QueueSize      int    `yaml:"queue_size"`
 }

 type config struct {
@@ -46,6 +49,18 @@ func (c *config) DownloaderPath(path string) {
 	c.cfg.DownloaderPath = path
 }

+func (c *config) RequireAuth(value bool) {
+	c.cfg.RequireAuth = value
+}
+
+func (c *config) RPCSecret(secret string) {
+	c.cfg.RPCSecret = secret
+}
+
+func (c *config) QueueSize(size int) {
+	c.cfg.QueueSize = size
+}
+
 var instance *config

 func Instance() *config {
--- a/server/handlers/archive.go
+++ b/server/handlers/archive.go
@@ -0,0 +1,157 @@
+package handlers
+
+import (
+	"encoding/hex"
+	"net/http"
+	"os"
+	"path/filepath"
+	"sort"
+	"strings"
+	"time"
+
+	"github.com/go-chi/chi/v5"
+	"github.com/goccy/go-json"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/utils"
+)
+
+const (
+	TOKEN_COOKIE_NAME = "jwt"
+)
+
+type DirectoryEntry struct {
+	Name        string    `json:"name"`
+	Path        string    `json:"path"`
+	Size        int64     `json:"size"`
+	SHASum      string    `json:"shaSum"`
+	ModTime     time.Time `json:"modTime"`
+	IsVideo     bool      `json:"isVideo"`
+	IsDirectory bool      `json:"isDirectory"`
+}
+
+func walkDir(root string) (*[]DirectoryEntry, error) {
+	files := []DirectoryEntry{}
+
+	dirs, err := os.ReadDir(root)
+	if err != nil {
+		return nil, err
+	}
+
+	for _, d := range dirs {
+		if !utils.IsValidEntry(d) {
+			continue
+		}
+
+		path := filepath.Join(root, d.Name())
+
+		info, err := d.Info()
+		if err != nil {
+			return nil, err
+		}
+
+		files = append(files, DirectoryEntry{
+			Path:        path,
+			Name:        d.Name(),
+			Size:        info.Size(),
+			SHASum:      utils.ShaSumString(path),
+			IsVideo:     utils.IsVideo(d),
+			IsDirectory: d.IsDir(),
+			ModTime:     info.ModTime(),
+		})
+	}
+
+	return &files, err
+}
+
+type ListRequest struct {
+	SubDir  string `json:"subdir"`
+	OrderBy string `json:"orderBy"`
+}
+
+func ListDownloaded(w http.ResponseWriter, r *http.Request) {
+	root := config.Instance().GetConfig().DownloadPath
+	req := new(ListRequest)
+
+	err := json.NewDecoder(r.Body).Decode(&req)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	files, err := walkDir(filepath.Join(root, req.SubDir))
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	if req.OrderBy == "modtime" {
+		sort.SliceStable(*files, func(i, j int) bool {
+			return (*files)[i].ModTime.After((*files)[j].ModTime)
+		})
+	}
+
+	w.WriteHeader(http.StatusOK)
+	err = json.NewEncoder(w).Encode(files)
+
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+	}
+}
+
+type DeleteRequest = DirectoryEntry
+
+func DeleteFile(w http.ResponseWriter, r *http.Request) {
+	req := new(DeleteRequest)
+
+	err := json.NewDecoder(r.Body).Decode(&req)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	sum := utils.ShaSumString(req.Path)
+	if sum != req.SHASum {
+		http.Error(w, "shasum mismatch", http.StatusBadRequest)
+		return
+	}
+
+	err = os.Remove(req.Path)
+	if err != nil {
+		http.Error(w, "shasum mismatch", http.StatusBadRequest)
+		return
+	}
+
+	w.WriteHeader(http.StatusOK)
+	json.NewEncoder(w).Encode("ok")
+}
+
+func SendFile(w http.ResponseWriter, r *http.Request) {
+	path := chi.URLParam(r, "id")
+
+	if path == "" {
+		http.Error(w, "inexistent path", http.StatusBadRequest)
+		return
+	}
+
+	decoded, err := hex.DecodeString(path)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	decodedStr := string(decoded)
+
+	root := config.Instance().GetConfig().DownloadPath
+
+	// TODO: further path / file validations
+	if strings.Contains(filepath.Dir(decodedStr), root) {
+		// ctx.Response().Header.Set(
+		// 	"Content-Disposition",
+		// 	"inline; filename="+filepath.Base(decodedStr),
+		// )
+
+		http.ServeFile(w, r, decodedStr)
+	}
+
+	w.WriteHeader(http.StatusUnauthorized)
+}
--- a/server/handlers/login.go
+++ b/server/handlers/login.go
@@ -0,0 +1,65 @@
+package handlers
+
+import (
+	"net/http"
+	"os"
+	"time"
+
+	"github.com/goccy/go-json"
+	"github.com/golang-jwt/jwt/v5"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+)
+
+type LoginRequest struct {
+	Secret string `json:"secret"`
+}
+
+func Login(w http.ResponseWriter, r *http.Request) {
+	req := new(LoginRequest)
+	err := json.NewDecoder(r.Body).Decode(&req)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	if config.Instance().GetConfig().RPCSecret != req.Secret {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	expiresAt := time.Now().Add(time.Hour * 24 * 30)
+
+	token := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
+		"expiresAt": expiresAt,
+	})
+
+	tokenString, err := token.SignedString([]byte(os.Getenv("JWT_SECRET")))
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	cookie := &http.Cookie{
+		Name:     TOKEN_COOKIE_NAME,
+		HttpOnly: true,
+		Secure:   false,
+		Expires:  expiresAt, // 30 days
+		Value:    tokenString,
+		Path:     "/",
+	}
+
+	http.SetCookie(w, cookie)
+}
+
+func Logout(w http.ResponseWriter, r *http.Request) {
+	cookie := &http.Cookie{
+		Name:     TOKEN_COOKIE_NAME,
+		HttpOnly: true,
+		Secure:   false,
+		Expires:  time.Now(),
+		Value:    "",
+		Path:     "/",
+	}
+
+	http.SetCookie(w, cookie)
+}
--- a/server/internal/common.go
+++ b/server/internal/common.go
@@ -1,7 +1,10 @@
-package server
+package internal
+
+import "time"

 // Progress for the Running call
 type DownloadProgress struct {
+	Status     int     `json:"process_status"`
 	Percentage string  `json:"percentage"`
 	Speed      float32 `json:"speed"`
 	ETA        int     `json:"eta"`
@@ -9,14 +12,16 @@ type DownloadProgress struct {

 // Used to deser the yt-dlp -J output
 type DownloadInfo struct {
-	URL        string `json:"url"`
-	Title      string `json:"title"`
-	Thumbnail  string `json:"thumbnail"`
-	Resolution string `json:"resolution"`
-	Size       int32  `json:"filesize_approx"`
-	VCodec     string `json:"vcodec"`
-	ACodec     string `json:"acodec"`
-	Extension  string `json:"ext"`
+	URL         string    `json:"url"`
+	Title       string    `json:"title"`
+	Thumbnail   string    `json:"thumbnail"`
+	Resolution  string    `json:"resolution"`
+	Size        int32     `json:"filesize_approx"`
+	VCodec      string    `json:"vcodec"`
+	ACodec      string    `json:"acodec"`
+	Extension   string    `json:"ext"`
+	OriginalURL string    `json:"original_url"`
+	CreatedAt   time.Time `json:"created_at"`
 }

 // Used to deser the formats in the -J output
@@ -60,7 +65,9 @@ type AbortRequest struct {

 // struct representing the intent to start a download
 type DownloadRequest struct {
-	Url      string   `json:"url"`
-	Params   []string `json:"params"`
-	RenameTo string   `json:"renameTo"`
+	Id     string
+	URL    string   `json:"url"`
+	Path   string   `json:"path"`
+	Rename string   `json:"rename"`
+	Params []string `json:"params"`
 }
--- a/server/internal/memory_db.go
+++ b/server/internal/memory_db.go
@@ -1,26 +1,25 @@
-package server
+package internal

 import (
+	"encoding/gob"
 	"errors"
 	"fmt"
 	"log"
 	"os"
 	"sync"

-	"github.com/goccy/go-json"
-
 	"github.com/google/uuid"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
 )

-// In-Memory volatile Thread-Safe Key-Value Storage
+// In-Memory Thread-Safe Key-Value Storage with optional persistence
 type MemoryDB struct {
 	table sync.Map
 }

 // Get a process pointer given its id
 func (m *MemoryDB) Get(id string) (*Process, error) {
-	entry, ok := db.table.Load(id)
+	entry, ok := m.table.Load(id)
 	if !ok {
 		return nil, errors.New("no process found for the given key")
 	}
@@ -30,28 +29,33 @@ func (m *MemoryDB) Get(id string) (*Process, error) {
 // Store a pointer of a process and return its id
 func (m *MemoryDB) Set(process *Process) string {
 	id := uuid.Must(uuid.NewRandom()).String()
-	db.table.Store(id, process)
+	m.table.Store(id, process)
+	process.Id = id
 	return id
 }

 // Update a process info/metadata, given the process id
+//
+// Deprecated: will be removed anytime soon.
 func (m *MemoryDB) UpdateInfo(id string, info DownloadInfo) error {
-	entry, ok := db.table.Load(id)
+	entry, ok := m.table.Load(id)
 	if ok {
 		entry.(*Process).Info = info
-		db.table.Store(id, entry)
+		m.table.Store(id, entry)
 		return nil
 	}
 	return fmt.Errorf("can't update row with id %s", id)
 }

 // Update a process progress data, given the process id
-// Used for updating completition percentage or ETA
+// Used for updating completition percentage or ETA.
+//
+// Deprecated: will be removed anytime soon.
 func (m *MemoryDB) UpdateProgress(id string, progress DownloadProgress) error {
-	entry, ok := db.table.Load(id)
+	entry, ok := m.table.Load(id)
 	if ok {
 		entry.(*Process).Progress = progress
-		db.table.Store(id, entry)
+		m.table.Store(id, entry)
 		return nil
 	}
 	return fmt.Errorf("can't update row with id %s", id)
@@ -59,12 +63,12 @@ func (m *MemoryDB) UpdateProgress(id string, progress DownloadProgress) error {

 // Removes a process progress, given the process id
 func (m *MemoryDB) Delete(id string) {
-	db.table.Delete(id)
+	m.table.Delete(id)
 }

 func (m *MemoryDB) Keys() *[]string {
 	running := []string{}
-	db.table.Range(func(key, value any) bool {
+	m.table.Range(func(key, value any) bool {
 		running = append(running, key.(string))
 		return true
 	})
@@ -74,7 +78,7 @@ func (m *MemoryDB) Keys() *[]string {
 // Returns a slice of all currently stored processes progess
 func (m *MemoryDB) All() *[]ProcessResponse {
 	running := []ProcessResponse{}
-	db.table.Range(func(key, value any) bool {
+	m.table.Range(func(key, value any) bool {
 		running = append(running, ProcessResponse{
 			Id:       key.(string),
 			Info:     value.(*Process).Info,
@@ -89,23 +93,51 @@ func (m *MemoryDB) All() *[]ProcessResponse {
 func (m *MemoryDB) Persist() {
 	running := m.All()

-	session, err := json.Marshal(Session{
-		Processes: *running,
-	})
+	fd, err := os.Create("session.dat")
 	if err != nil {
-		log.Println(cli.Red, "Failed to persist database", cli.Reset)
-		return
+		log.Println(cli.Red, "Failed to persist session", cli.Reset)
 	}

-	err = os.WriteFile("session.dat", session, 0700)
-	if err != nil {
-		log.Println(cli.Red, "Failed to persist database", cli.Reset)
+	session := Session{
+		Processes: *running,
 	}
+
+	err = gob.NewEncoder(fd).Encode(session)
+	if err != nil {
+		log.Println(cli.Red, "Failed to persist session", cli.Reset)
+	}
+
+	log.Println(cli.BgBlue, "Successfully serialized session", cli.Reset)
 }

 // WIP: Restore a persisted state
 func (m *MemoryDB) Restore() {
-	feed, _ := os.ReadFile("session.dat")
+	fd, err := os.Open("session.dat")
+	if err != nil {
+		return
+	}
+
 	session := Session{}
-	json.Unmarshal(feed, &session)
+
+	err = gob.NewDecoder(fd).Decode(&session)
+	if err != nil {
+		return
+	}
+
+	for _, proc := range session.Processes {
+		restored := &Process{
+			Id:       proc.Id,
+			Url:      proc.Info.URL,
+			Info:     proc.Info,
+			Progress: proc.Progress,
+		}
+
+		m.table.Store(proc.Id, restored)
+
+		if restored.Progress.Percentage != "-1" {
+			go restored.Start()
+		}
+	}
+
+	log.Println(cli.BgGreen, "Successfully restored session", cli.Reset)
 }
--- a/server/internal/message_queue.go
+++ b/server/internal/message_queue.go
@@ -0,0 +1,65 @@
+package internal
+
+import (
+	"log"
+
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+)
+
+type MessageQueue struct {
+	producerCh chan *Process
+	consumerCh chan struct{}
+}
+
+// Creates a new message queue.
+// By default it will be created with a size equals to nthe number of logical
+// CPU cores.
+// The queue size can be set via the qs flag.
+func NewMessageQueue() *MessageQueue {
+	size := config.Instance().GetConfig().QueueSize
+
+	if size <= 0 {
+		log.Fatalln("invalid queue size")
+	}
+
+	return &MessageQueue{
+		producerCh: make(chan *Process, size),
+		consumerCh: make(chan struct{}, size),
+	}
+}
+
+// Publish a message to the queue and set the task to a peding state.
+func (m *MessageQueue) Publish(p *Process) {
+	p.SetPending()
+	go p.SetMetadata()
+	m.producerCh <- p
+}
+
+// Publish a message to the queue and set the task to a peding state.
+// ENSURE P IS PART OF A PLAYLIST
+// Needs a further review
+func (m *MessageQueue) PublishPlaylistEntry(p *Process) {
+	m.producerCh <- p
+}
+
+// Setup the consumer listener which subscribes to the changes to the producer
+// channel and triggers the "download" action.
+func (m *MessageQueue) Subscriber() {
+	for msg := range m.producerCh {
+		m.consumerCh <- struct{}{}
+		go func(p *Process) {
+			p.Start()
+			<-m.consumerCh
+		}(msg)
+	}
+}
+
+// Empties the message queue
+func (m *MessageQueue) Empty() {
+	for range m.producerCh {
+		<-m.producerCh
+	}
+	for range m.consumerCh {
+		<-m.consumerCh
+	}
+}
--- a/server/internal/playlist.go
+++ b/server/internal/playlist.go
@@ -0,0 +1,81 @@
+package internal
+
+import (
+	"errors"
+	"log"
+	"os/exec"
+	"time"
+
+	"github.com/goccy/go-json"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
+)
+
+type metadata struct {
+	Entries []DownloadInfo `json:"entries"`
+	Count   int            `json:"playlist_count"`
+	Type    string         `json:"_type"`
+}
+
+func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB) error {
+	cmd := exec.Command(cfg.GetConfig().DownloaderPath, req.URL, "-J")
+
+	stdout, err := cmd.StdoutPipe()
+	if err != nil {
+		return err
+	}
+
+	m := metadata{}
+
+	err = cmd.Start()
+	if err != nil {
+		return err
+	}
+
+	log.Println(cli.BgRed, "Decoding metadata", cli.Reset, req.URL)
+
+	err = json.NewDecoder(stdout).Decode(&m)
+	if err != nil {
+		return err
+	}
+
+	log.Println(cli.BgGreen, "Decoded metadata", cli.Reset, req.URL)
+
+	if m.Type == "" {
+		cmd.Wait()
+		return errors.New("probably not a valid URL")
+	}
+
+	if m.Type == "playlist" {
+		log.Println(
+			cli.BgGreen, "Playlist detected", cli.Reset, m.Count, "entries",
+		)
+
+		for _, meta := range m.Entries {
+			proc := &Process{
+				Url:      meta.OriginalURL,
+				Progress: DownloadProgress{},
+				Output:   DownloadOutput{},
+				Info:     meta,
+				Params:   req.Params,
+			}
+
+			proc.Info.URL = meta.OriginalURL
+			proc.Info.CreatedAt = time.Now().Add(time.Second)
+
+			db.Set(proc)
+			proc.SetPending()
+			mq.PublishPlaylistEntry(proc)
+		}
+
+		err = cmd.Wait()
+		return err
+	}
+
+	proc := &Process{Url: req.URL, Params: req.Params}
+
+	mq.Publish(proc)
+	log.Println("Sending new process to message queue", proc.Url)
+
+	err = cmd.Wait()
+	return err
+}
--- a/server/internal/process.go
+++ b/server/internal/process.go
@@ -0,0 +1,290 @@
+package internal
+
+import (
+	"bufio"
+	"fmt"
+	"regexp"
+	"sync"
+	"syscall"
+
+	"github.com/goccy/go-json"
+
+	"log"
+	"os"
+	"os/exec"
+	"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"
+)
+
+const template = `download:
+{
+	"eta":%(progress.eta)s, 
+	"percentage":"%(progress._percent_str)s",
+	"speed":%(progress.speed)s
+}`
+
+var (
+	cfg = config.Instance()
+)
+
+const (
+	StatusPending = iota
+	StatusDownloading
+	StatusCompleted
+	StatusErrored
+)
+
+type ProgressTemplate struct {
+	Percentage string  `json:"percentage"`
+	Speed      float32 `json:"speed"`
+	Size       string  `json:"size"`
+	Eta        int     `json:"eta"`
+}
+
+// Process descriptor
+type Process struct {
+	Id       string
+	Url      string
+	Params   []string
+	Info     DownloadInfo
+	Progress DownloadProgress
+	Output   DownloadOutput
+	proc     *os.Process
+}
+
+type DownloadOutput struct {
+	Path     string
+	Filename string
+}
+
+// Starts spawns/forks a new yt-dlp process and parse its stdout.
+// The process is spawned to outputting a custom progress text that
+// Resembles a JSON Object in order to Unmarshal it later.
+// This approach is anyhow not perfect: quotes are not escaped properly.
+// Each process is not identified by its PID but by a UUIDv4
+func (p *Process) Start() {
+	// escape bash variable escaping and command piping, you'll never know
+	// what they might come with...
+	p.Params = slices.Filter(p.Params, func(e string) bool {
+		match, _ := regexp.MatchString(`(\$\{)|(\&\&)`, e)
+		return !match
+	})
+
+	out := DownloadOutput{
+		Path:     cfg.GetConfig().DownloadPath,
+		Filename: "%(title)s.%(ext)s",
+	}
+
+	if p.Output.Path != "" {
+		out.Path = p.Output.Path
+	}
+	if p.Output.Filename != "" {
+		out.Filename = p.Output.Filename + ".%(ext)s"
+	}
+
+	params := append([]string{
+		strings.Split(p.Url, "?list")[0], //no playlist
+		"--newline",
+		"--no-colors",
+		"--no-playlist",
+		"--progress-template", strings.ReplaceAll(template, "\n", ""),
+		"-o",
+		fmt.Sprintf("%s/%s", out.Path, out.Filename),
+	}, p.Params...)
+
+	// ----------------- main block ----------------- //
+	cmd := exec.Command(cfg.GetConfig().DownloaderPath, params...)
+	cmd.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
+
+	r, err := cmd.StdoutPipe()
+	if err != nil {
+		log.Panicln(err)
+	}
+	scan := bufio.NewScanner(r)
+
+	err = cmd.Start()
+	if err != nil {
+		log.Panicln(err)
+	}
+
+	p.proc = cmd.Process
+
+	// ----------------- info block ----------------- //
+	// spawn a goroutine that retrieves the info for the download
+
+	// --------------- progress block --------------- //
+	// unbuffered channel connected to stdout
+
+	// spawn a goroutine that does the dirty job of parsing the stdout
+	// filling the channel with as many stdout line as yt-dlp produces (producer)
+	go func() {
+		defer func() {
+			r.Close()
+			p.Complete()
+		}()
+
+		for scan.Scan() {
+			stdout := ProgressTemplate{}
+			err := json.Unmarshal(scan.Bytes(), &stdout)
+			if err == nil {
+				p.Progress = DownloadProgress{
+					Status:     StatusDownloading,
+					Percentage: stdout.Percentage,
+					Speed:      stdout.Speed,
+					ETA:        stdout.Eta,
+				}
+				log.Println(
+					cli.BgGreen, "DL", cli.Reset,
+					cli.BgBlue, p.getShortId(), cli.Reset,
+					p.Url, stdout.Percentage,
+				)
+			}
+		}
+	}()
+
+	// ------------- end progress block ------------- //
+	cmd.Wait()
+}
+
+// Keep process in the memoryDB but marks it as complete
+// Convention: All completed processes has progress -1
+// and speed 0 bps.
+func (p *Process) Complete() {
+	p.Progress = DownloadProgress{
+		Status:     StatusCompleted,
+		Percentage: "-1",
+		Speed:      0,
+		ETA:        0,
+	}
+
+	shortId := p.getShortId()
+
+	log.Println(
+		cli.BgMagenta, "FINISH", cli.Reset,
+		cli.BgBlue, shortId, cli.Reset,
+		p.Url,
+	)
+}
+
+// Kill a process and remove it from the memory
+func (p *Process) Kill() error {
+	// yt-dlp uses multiple child process the parent process
+	// has been spawned with setPgid = true. To properly kill
+	// all subprocesses a SIGTERM need to be sent to the correct
+	// process group
+	if p.proc != nil {
+		pgid, err := syscall.Getpgid(p.proc.Pid)
+		if err != nil {
+			return err
+		}
+		err = syscall.Kill(-pgid, syscall.SIGTERM)
+
+		log.Println("Killed process", p.Id)
+		return err
+	}
+
+	return nil
+}
+
+// Returns the available format for this URL
+func (p *Process) GetFormatsSync() (DownloadFormats, error) {
+	cmd := exec.Command(cfg.GetConfig().DownloaderPath, p.Url, "-J")
+	stdout, err := cmd.StdoutPipe()
+
+	if err != nil {
+		return DownloadFormats{}, err
+	}
+
+	info := DownloadFormats{URL: p.Url}
+	best := Format{}
+
+	var (
+		wg            sync.WaitGroup
+		decodingError error
+	)
+
+	wg.Add(2)
+
+	err = cmd.Start()
+	if err != nil {
+		return DownloadFormats{}, err
+	}
+
+	log.Println(
+		cli.BgRed, "Metadata", cli.Reset,
+		cli.BgBlue, p.getShortId(), cli.Reset,
+		p.Url,
+	)
+
+	go func() {
+		decodingError = json.NewDecoder(stdout).Decode(&info)
+		wg.Done()
+	}()
+
+	go func() {
+		decodingError = json.NewDecoder(stdout).Decode(&best)
+		wg.Done()
+	}()
+
+	wg.Wait()
+	cmd.Wait()
+
+	if decodingError != nil {
+		return DownloadFormats{}, err
+	}
+
+	info.Best = best
+
+	return info, nil
+}
+
+func (p *Process) SetPending() {
+	p.Progress.Status = StatusPending
+}
+
+func (p *Process) SetMetadata() error {
+	cmd := exec.Command(cfg.GetConfig().DownloaderPath, p.Url, "-J")
+	cmd.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
+
+	stdout, err := cmd.StdoutPipe()
+	if err != nil {
+		log.Println("Cannot retrieve info for", p.Url)
+		return err
+	}
+
+	info := DownloadInfo{
+		URL:       p.Url,
+		CreatedAt: time.Now(),
+	}
+
+	err = cmd.Start()
+	if err != nil {
+		return err
+	}
+
+	log.Println(
+		cli.BgRed, "Metadata", cli.Reset,
+		cli.BgBlue, p.getShortId(), cli.Reset,
+		p.Url,
+	)
+
+	err = json.NewDecoder(stdout).Decode(&info)
+	if err != nil {
+		return err
+	}
+
+	p.Info = info
+	p.Progress.Status = StatusPending
+
+	err = cmd.Wait()
+
+	return err
+}
+
+func (p *Process) getShortId() string {
+	return strings.Split(p.Id, "-")[0]
+}
--- a/server/internal/stack.go
+++ b/server/internal/stack.go
@@ -9,13 +9,19 @@ type Stack[T any] struct {
 	count int
 }

-func (s *Stack[T]) Push(n *Node[T]) {
+func NewStack[T any]() *Stack[T] {
+	return &Stack[T]{
+		Nodes: make([]*Node[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
 	}
-	s.Nodes[s.count] = n
+	s.Nodes[s.count] = &Node[T]{Value: val}
 	s.count++
 }

--- a/server/middleware/cors.go
+++ b/server/middleware/cors.go
@@ -0,0 +1,15 @@
+package middlewares
+
+import "net/http"
+
+// Middleware for applying CORS policy for ALL hosts and for
+// allowing ALL request headers.
+func CORS(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Access-Control-Allow-Origin", "*")
+		w.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")
+		w.Header().Set("Access-Control-Allow-Headers", "*")
+		w.Header().Set("Access-Control-Allow-Credentials", "true")
+		next.ServeHTTP(w, r)
+	})
+}
--- a/server/middleware/jwt.go
+++ b/server/middleware/jwt.go
@@ -0,0 +1,62 @@
+package middlewares
+
+import (
+	"fmt"
+	"net/http"
+	"os"
+	"time"
+
+	"github.com/golang-jwt/jwt/v5"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+)
+
+const (
+	TOKEN_COOKIE_NAME = "jwt"
+)
+
+func Authenticated(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if !config.Instance().GetConfig().RequireAuth {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		cookie, err := r.Cookie(TOKEN_COOKIE_NAME)
+
+		if err != nil {
+			http.Error(w, "invalid token", http.StatusBadRequest)
+			return
+		}
+
+		if cookie == nil {
+			http.Error(w, "invalid token", http.StatusBadRequest)
+			return
+		}
+
+		token, _ := jwt.Parse(cookie.Value, func(t *jwt.Token) (interface{}, error) {
+			if _, ok := t.Method.(*jwt.SigningMethodHMAC); !ok {
+				return nil, fmt.Errorf("unexpected signing method: %v", t.Header["alg"])
+			}
+			return []byte(os.Getenv("JWTSECRET")), nil
+		})
+
+		if claims, ok := token.Claims.(jwt.MapClaims); ok && token.Valid {
+			expiresAt, err := time.Parse(time.RFC3339, claims["expiresAt"].(string))
+
+			if err != nil {
+				http.Error(w, err.Error(), http.StatusInternalServerError)
+				return
+			}
+
+			if time.Now().After(expiresAt) {
+				http.Error(w, "token expired", http.StatusBadRequest)
+				return
+			}
+		} else {
+			http.Error(w, "invalid token", http.StatusBadRequest)
+			return
+		}
+
+		next.ServeHTTP(w, r)
+	})
+}
--- 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/process.go
+++ b/server/process.go
@@ -1,204 +0,0 @@
-package server
-
-import (
-	"bufio"
-	"fmt"
-	"regexp"
-	"syscall"
-
-	"github.com/goccy/go-json"
-
-	"log"
-	"os"
-	"os/exec"
-	"strings"
-	"time"
-
-	"github.com/marcopeocchi/fazzoletti/slices"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/rx"
-)
-
-const template = `download:
-{
-	"eta":%(progress.eta)s, 
-	"percentage":"%(progress._percent_str)s",
-	"speed":%(progress.speed)s
-}`
-
-var (
-	cfg = config.Instance()
-)
-
-type ProgressTemplate struct {
-	Percentage string  `json:"percentage"`
-	Speed      float32 `json:"speed"`
-	Size       string  `json:"size"`
-	Eta        int     `json:"eta"`
-}
-
-// Process descriptor
-type Process struct {
-	id       string
-	url      string
-	params   []string
-	Info     DownloadInfo
-	Progress DownloadProgress
-	mem      *MemoryDB
-	proc     *os.Process
-}
-
-type downloadOutput struct {
-	path     string
-	filaneme string
-}
-
-// Starts spawns/forks a new yt-dlp process and parse its stdout.
-// The process is spawned to outputting a custom progress text that
-// Resembles a JSON Object in order to Unmarshal it later.
-// This approach is anyhow not perfect: quotes are not escaped properly.
-// Each process is not identified by its PID but by a UUIDv2
-func (p *Process) Start(path, filename string) {
-	// escape bash variable escaping and command piping, you'll never know
-	// what they might come with...
-	p.params = slices.Filter(p.params, func(e string) bool {
-		match, _ := regexp.MatchString(`(\$\{)|(\&\&)`, e)
-		return !match
-	})
-
-	out := downloadOutput{
-		path:     cfg.GetConfig().DownloadPath,
-		filaneme: "%(title)s.%(ext)s",
-	}
-
-	if path != "" {
-		out.path = path
-	}
-	if filename != "" {
-		out.filaneme = filename + ".%(ext)s"
-	}
-
-	params := append([]string{
-		strings.Split(p.url, "?list")[0], //no playlist
-		"--newline",
-		"--no-colors",
-		"--no-playlist",
-		"--progress-template", strings.ReplaceAll(template, "\n", ""),
-		"-o",
-		fmt.Sprintf("%s/%s", out.path, out.filaneme),
-	}, p.params...)
-
-	// ----------------- main block ----------------- //
-	cmd := exec.Command(cfg.GetConfig().DownloaderPath, params...)
-	cmd.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
-
-	r, err := cmd.StdoutPipe()
-	if err != nil {
-		log.Panicln(err)
-	}
-	scan := bufio.NewScanner(r)
-
-	err = cmd.Start()
-	if err != nil {
-		log.Panicln(err)
-	}
-
-	p.id = p.mem.Set(p)
-	p.proc = cmd.Process
-
-	// ----------------- info block ----------------- //
-	// spawn a goroutine that retrieves the info for the download
-	go func() {
-		cmd := exec.Command(cfg.GetConfig().DownloaderPath, p.url, "-J")
-		cmd.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
-
-		stdout, err := cmd.Output()
-		if err != nil {
-			log.Println("Cannot retrieve info for", p.url)
-		}
-		info := DownloadInfo{URL: p.url}
-		json.Unmarshal(stdout, &info)
-		p.mem.UpdateInfo(p.id, info)
-	}()
-
-	// --------------- progress block --------------- //
-	// unbuffered channel connected to stdout
-	eventChan := make(chan string)
-
-	// spawn a goroutine that does the dirty job of parsing the stdout
-	// filling the channel with as many stdout line as yt-dlp produces (producer)
-	go func() {
-		defer r.Close()
-		defer p.Complete()
-		for scan.Scan() {
-			eventChan <- scan.Text()
-		}
-		cmd.Wait()
-	}()
-
-	// do the unmarshal operation every 250ms (consumer)
-	go rx.Debounce(time.Millisecond*250, eventChan, func(text string) {
-		stdout := ProgressTemplate{}
-		err := json.Unmarshal([]byte(text), &stdout)
-		if err == nil {
-			p.mem.UpdateProgress(p.id, DownloadProgress{
-				Percentage: stdout.Percentage,
-				Speed:      stdout.Speed,
-				ETA:        stdout.Eta,
-			})
-			shortId := strings.Split(p.id, "-")[0]
-			log.Printf("[%s] %s %s\n", shortId, p.url, p.Progress.Percentage)
-		}
-	})
-	// ------------- end progress block ------------- //
-}
-
-// Keep process in the memoryDB but marks it as complete
-// Convention: All completed processes has progress -1
-// and speed 0 bps.
-func (p *Process) Complete() {
-	p.mem.UpdateProgress(p.id, DownloadProgress{
-		Percentage: "-1",
-		Speed:      0,
-		ETA:        0,
-	})
-}
-
-// Kill a process and remove it from the memory
-func (p *Process) Kill() error {
-	p.mem.Delete(p.id)
-	// yt-dlp uses multiple child process the parent process
-	// has been spawned with setPgid = true. To properly kill
-	// all subprocesses a SIGTERM need to be sent to the correct
-	// process group
-	pgid, err := syscall.Getpgid(p.proc.Pid)
-	if err != nil {
-		return err
-	}
-	err = syscall.Kill(-pgid, syscall.SIGTERM)
-
-	log.Println("Killed process", p.id)
-	return err
-}
-
-// Returns the available format for this URL
-func (p *Process) GetFormatsSync() (DownloadFormats, error) {
-	cmd := exec.Command(cfg.GetConfig().DownloaderPath, p.url, "-J")
-	stdout, err := cmd.Output()
-
-	if err != nil {
-		return DownloadFormats{}, err
-	}
-
-	cmd.Wait()
-
-	info := DownloadFormats{URL: p.url}
-	best := Format{}
-
-	json.Unmarshal(stdout, &info)
-	json.Unmarshal(stdout, &best)
-
-	info.Best = best
-
-	return info, nil
-}
--- a/server/rest/container.go
+++ b/server/rest/container.go
@@ -0,0 +1,25 @@
+package rest
+
+import (
+	"github.com/go-chi/chi/v5"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+	middlewares "github.com/marcopeocchi/yt-dlp-web-ui/server/middleware"
+)
+
+func Container(db *internal.MemoryDB, mq *internal.MessageQueue) *Handler {
+	var (
+		service = ProvideService(db, mq)
+		handler = ProvideHandler(service)
+	)
+	return handler
+}
+
+func ApplyRouter(db *internal.MemoryDB, mq *internal.MessageQueue) func(chi.Router) {
+	h := Container(db, mq)
+
+	return func(r chi.Router) {
+		r.Use(middlewares.Authenticated)
+		r.Post("/exec", h.Exec())
+		r.Get("/running", h.Running())
+	}
+}
--- a/server/rest/handlers.go
+++ b/server/rest/handlers.go
@@ -0,0 +1,56 @@
+package rest
+
+import (
+	"net/http"
+
+	"github.com/goccy/go-json"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+)
+
+type Handler struct {
+	service *Service
+}
+
+func (h *Handler) Exec() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		defer r.Body.Close()
+
+		w.Header().Set("Content-Type", "application/json")
+
+		req := internal.DownloadRequest{}
+
+		if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+
+		id, err := h.service.Exec(req)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		err = json.NewEncoder(w).Encode(id)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+	}
+}
+
+func (h *Handler) Running() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		defer r.Body.Close()
+
+		w.Header().Set("Content-Type", "application/json")
+
+		res, err := h.service.Running(r.Context())
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		err = json.NewEncoder(w).Encode(res)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+	}
+}
--- a/server/rest/provider.go
+++ b/server/rest/provider.go
@@ -0,0 +1,34 @@
+package rest
+
+import (
+	"sync"
+
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+)
+
+var (
+	service *Service
+	handler *Handler
+
+	serviceOnce sync.Once
+	handlerOnce sync.Once
+)
+
+func ProvideService(db *internal.MemoryDB, mq *internal.MessageQueue) *Service {
+	serviceOnce.Do(func() {
+		service = &Service{
+			db: db,
+			mq: mq,
+		}
+	})
+	return service
+}
+
+func ProvideHandler(svc *Service) *Handler {
+	handlerOnce.Do(func() {
+		handler = &Handler{
+			service: svc,
+		}
+	})
+	return handler
+}
--- a/server/rest/service.go
+++ b/server/rest/service.go
@@ -0,0 +1,38 @@
+package rest
+
+import (
+	"context"
+	"errors"
+
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+)
+
+type Service struct {
+	db *internal.MemoryDB
+	mq *internal.MessageQueue
+}
+
+func (s *Service) Exec(req internal.DownloadRequest) (string, error) {
+	p := &internal.Process{
+		Url:    req.URL,
+		Params: req.Params,
+		Output: internal.DownloadOutput{
+			Path:     req.Path,
+			Filename: req.Rename,
+		},
+	}
+
+	id := s.db.Set(p)
+	s.mq.Publish(p)
+
+	return id, nil
+}
+
+func (s *Service) Running(ctx context.Context) (*[]internal.ProcessResponse, error) {
+	select {
+	case <-ctx.Done():
+		return nil, errors.New("context cancelled")
+	default:
+		return s.db.All(), nil
+	}
+}
--- a/server/rpc/container.go
+++ b/server/rpc/container.go
@@ -0,0 +1,24 @@
+package rpc
+
+import (
+	"github.com/go-chi/chi/v5"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+	middlewares "github.com/marcopeocchi/yt-dlp-web-ui/server/middleware"
+)
+
+// Dependency injection container.
+func Container(db *internal.MemoryDB, mq *internal.MessageQueue) *Service {
+	return &Service{
+		db: db,
+		mq: mq,
+	}
+}
+
+// RPC service must be registered before applying this router!
+func ApplyRouter() func(chi.Router) {
+	return func(r chi.Router) {
+		r.Use(middlewares.Authenticated)
+		r.Get("/ws", WebSocket)
+		r.Post("/http", Post)
+	}
+}
--- a/server/rpc/handlers.go
+++ b/server/rpc/handlers.go
@@ -0,0 +1,57 @@
+package rpc
+
+import (
+	"io"
+	"net/http"
+
+	"github.com/gorilla/websocket"
+)
+
+var upgrader = websocket.Upgrader{
+	CheckOrigin: func(r *http.Request) bool {
+		return true
+	},
+}
+
+func WebSocket(w http.ResponseWriter, r *http.Request) {
+	c, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	defer c.Close()
+
+	// notify client that conn is open and ok
+	c.WriteJSON(struct{ Status string }{Status: "connected"})
+
+	for {
+		mtype, reader, err := c.NextReader()
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			break
+		}
+
+		res := newRequest(reader).Call()
+
+		writer, err := c.NextWriter(mtype)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			break
+		}
+
+		io.Copy(writer, res)
+	}
+}
+
+func Post(w http.ResponseWriter, r *http.Request) {
+	defer r.Body.Close()
+
+	res := newRequest(r.Body).Call()
+	_, err := io.Copy(w, res)
+
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+}
--- a/server/rpc/service.go
+++ b/server/rpc/service.go
@@ -0,0 +1,159 @@
+package rpc
+
+import (
+	"log"
+
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/sys"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/updater"
+)
+
+type Service struct {
+	db *internal.MemoryDB
+	mq *internal.MessageQueue
+}
+
+type Running []internal.ProcessResponse
+type Pending []string
+
+type NoArgs struct{}
+
+type Args struct {
+	Id     string
+	URL    string
+	Params []string
+}
+
+// Exec spawns a Process.
+// The result of the execution is the newly spawned process Id.
+func (s *Service) Exec(args internal.DownloadRequest, result *string) error {
+	p := &internal.Process{
+		Url:    args.URL,
+		Params: args.Params,
+		Output: internal.DownloadOutput{
+			Path:     args.Path,
+			Filename: args.Rename,
+		},
+	}
+
+	s.db.Set(p)
+	s.mq.Publish(p)
+
+	*result = p.Id
+	return nil
+}
+
+// Exec spawns a Process.
+// The result of the execution is the newly spawned process Id.
+func (s *Service) ExecPlaylist(args internal.DownloadRequest, result *string) error {
+	err := internal.PlaylistDetect(args, s.mq, s.db)
+	if err != nil {
+		return err
+	}
+
+	*result = ""
+
+	return nil
+}
+
+// Progess retrieves the Progress of a specific Process given its Id
+func (s *Service) Progess(args Args, progress *internal.DownloadProgress) error {
+	proc, err := s.db.Get(args.Id)
+	if err != nil {
+		return err
+	}
+	*progress = proc.Progress
+	return nil
+}
+
+// Progess retrieves available format for a given resource
+func (s *Service) Formats(args Args, progress *internal.DownloadFormats) error {
+	var err error
+	p := internal.Process{Url: args.URL}
+	*progress, err = p.GetFormatsSync()
+	return err
+}
+
+// Pending retrieves a slice of all Pending/Running processes ids
+func (s *Service) Pending(args NoArgs, pending *Pending) error {
+	*pending = *s.db.Keys()
+	return nil
+}
+
+// Running retrieves a slice of all Processes progress
+func (s *Service) Running(args NoArgs, running *Running) error {
+	*running = *s.db.All()
+	return nil
+}
+
+// Kill kills a process given its id and remove it from the memoryDB
+func (s *Service) Kill(args string, killed *string) error {
+	log.Println("Trying killing process with id", args)
+	proc, err := s.db.Get(args)
+
+	if err != nil {
+		return err
+	}
+	if proc != nil {
+		err = proc.Kill()
+		s.db.Delete(proc.Id)
+	}
+
+	s.db.Delete(proc.Id)
+	return err
+}
+
+// KillAll kills all process unconditionally and removes them from
+// the memory db
+func (s *Service) KillAll(args NoArgs, killed *string) error {
+	log.Println("Killing all spawned processes", args)
+	keys := s.db.Keys()
+	var err error
+	for _, key := range *keys {
+		proc, err := s.db.Get(key)
+		if err != nil {
+			return err
+		}
+		if proc != nil {
+			proc.Kill()
+			s.db.Delete(proc.Id)
+		}
+	}
+	s.mq.Empty()
+	return err
+}
+
+// Remove a process from the db rendering it unusable if active
+func (s *Service) Clear(args string, killed *string) error {
+	log.Println("Clearing process with id", args)
+	s.db.Delete(args)
+	return nil
+}
+
+// FreeSpace gets the available from package sys util
+func (s *Service) FreeSpace(args NoArgs, free *uint64) error {
+	freeSpace, err := sys.FreeSpace()
+	*free = freeSpace
+	return err
+}
+
+// Return a flattned tree of the download directory
+func (s *Service) DirectoryTree(args NoArgs, tree *[]string) error {
+	dfsTree, err := sys.DirectoryTree()
+	if dfsTree != nil {
+		*tree = *dfsTree
+	}
+	return err
+}
+
+// Updates the yt-dlp binary using its builtin function
+func (s *Service) UpdateExecutable(args NoArgs, updated *bool) error {
+	log.Println("Updating yt-dlp executable to the latest release")
+	err := updater.UpdateExecutable()
+	if err != nil {
+		*updated = true
+		return err
+	}
+	*updated = false
+	return err
+}
--- a/server/rpc/wrapper.go
+++ b/server/rpc/wrapper.go
@@ -1,4 +1,4 @@
-package server
+package rpc

 import (
 	"bytes"
@@ -13,7 +13,7 @@ type rpcRequest struct {
 	done chan bool
 }

-func NewRPCRequest(r io.Reader) *rpcRequest {
+func newRequest(r io.Reader) *rpcRequest {
 	var buf bytes.Buffer
 	done := make(chan bool)
 	return &rpcRequest{r, &buf, done}
--- a/server/rx/extensions.go
+++ b/server/rx/extensions.go
@@ -11,6 +11,7 @@ import "time"
 //
 // Debounce emits a string from the source channel only after a particular
 // time span determined a Go Interval
+//
 // --A--B--CD--EFG-------|>
 //
 //	-t->                 |>
--- a/server/server.go
+++ b/server/server.go
@@ -3,61 +3,117 @@ package server
 import (
 	"context"
 	"fmt"
-	"io"
 	"io/fs"
 	"log"
 	"net/http"
 	"net/rpc"
+	"os"
+	"os/signal"
+	"syscall"
+	"time"

-	"github.com/gofiber/fiber/v2"
-	"github.com/gofiber/fiber/v2/middleware/cors"
-	"github.com/gofiber/fiber/v2/middleware/filesystem"
-	"github.com/gofiber/websocket/v2"
+	"github.com/go-chi/chi/v5"
+	"github.com/go-chi/chi/v5/middleware"
+	"github.com/go-chi/cors"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/handlers"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+	middlewares "github.com/marcopeocchi/yt-dlp-web-ui/server/middleware"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/rest"
+	ytdlpRPC "github.com/marcopeocchi/yt-dlp-web-ui/server/rpc"
 )

-var db MemoryDB
+type serverConfig struct {
+	frontend fs.FS
+	port     int
+	db       *internal.MemoryDB
+	mq       *internal.MessageQueue
+}

-func RunBlocking(ctx context.Context) {
-	fe := ctx.Value("frontend").(fs.SubFS)
-	port := ctx.Value("port").(int)
+func RunBlocking(port int, frontend fs.FS) {
+	var db internal.MemoryDB
+	db.Restore()

-	service := new(Service)
-	rpc.Register(service)
+	mq := internal.NewMessageQueue()
+	go mq.Subscriber()

-	app := fiber.New()
-
-	app.Use(cors.New())
-	app.Use("/", filesystem.New(filesystem.Config{
-		Root: http.FS(fe),
-	}))
-
-	// RPC handlers
-	// websocket
-	app.Get("/ws-rpc", websocket.New(func(c *websocket.Conn) {
-		for {
-			mtype, reader, err := c.NextReader()
-			if err != nil {
-				break
-			}
-			res := NewRPCRequest(reader).Call()
-
-			writer, err := c.NextWriter(mtype)
-			if err != nil {
-				break
-			}
-			io.Copy(writer, res)
-		}
-	}))
-	// http-post
-	app.Post("/http-rpc", func(c *fiber.Ctx) error {
-		reader := c.Context().RequestBodyStream()
-		writer := c.Response().BodyWriter()
-		res := NewRPCRequest(reader).Call()
-		io.Copy(writer, res)
-		return nil
+	srv := newServer(serverConfig{
+		frontend: frontend,
+		port:     port,
+		db:       &db,
+		mq:       mq,
 	})

-	app.Server().StreamRequestBody = true
+	// http-post
+	go gracefulShutdown(srv, &db)
+	go autoPersist(time.Minute*5, &db)

-	log.Fatal(app.Listen(fmt.Sprintf(":%d", port)))
+	log.Fatal(srv.ListenAndServe())
+}
+
+func newServer(c serverConfig) *http.Server {
+	service := ytdlpRPC.Container(c.db, c.mq)
+	rpc.Register(service)
+
+	r := chi.NewRouter()
+
+	r.Use(cors.AllowAll().Handler)
+	r.Use(middleware.Logger)
+
+	sh := middlewares.NewSpaHandler("index.html", c.frontend)
+	sh.AddClientRoute("/settings")
+	sh.AddClientRoute("/archive")
+	sh.AddClientRoute("/login")
+
+	r.Get("/*", sh.Handler())
+
+	// Archive routes
+	r.Route("/archive", func(r chi.Router) {
+		r.Use(middlewares.Authenticated)
+		r.Post("/downloaded", handlers.ListDownloaded)
+		r.Post("/delete", handlers.DeleteFile)
+		r.Get("/d/{id}", handlers.SendFile)
+	})
+
+	// Authentication routes
+	r.Route("/auth", func(r chi.Router) {
+		r.Post("/login", handlers.Login)
+		r.Get("/logout", handlers.Logout)
+	})
+
+	// RPC handlers
+	r.Route("/rpc", ytdlpRPC.ApplyRouter())
+
+	// REST API handlers
+	r.Route("/api/v1", rest.ApplyRouter(c.db, c.mq))
+
+	return &http.Server{
+		Addr:    fmt.Sprintf(":%d", c.port),
+		Handler: r,
+	}
+}
+
+func gracefulShutdown(srv *http.Server, db *internal.MemoryDB) {
+	ctx, stop := signal.NotifyContext(context.Background(),
+		os.Interrupt,
+		syscall.SIGTERM,
+		syscall.SIGQUIT,
+	)
+
+	go func() {
+		<-ctx.Done()
+		log.Println("shutdown signal received")
+
+		defer func() {
+			db.Persist()
+			stop()
+			srv.Shutdown(context.TODO())
+		}()
+	}()
+}
+
+func autoPersist(d time.Duration, db *internal.MemoryDB) {
+	for {
+		db.Persist()
+		time.Sleep(d)
+	}
 }
--- a/server/service.go
+++ b/server/service.go
@@ -1,133 +0,0 @@
-package server
-
-import (
-	"log"
-
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/sys"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/updater"
-)
-
-type Service int
-
-type Running []ProcessResponse
-type Pending []string
-
-type NoArgs struct{}
-
-type Args struct {
-	Id     string
-	URL    string
-	Params []string
-}
-
-type DownloadSpecificArgs struct {
-	Id     string
-	URL    string
-	Path   string
-	Rename string
-	Params []string
-}
-
-// Exec spawns a Process.
-// The result of the execution is the newly spawned process Id.
-func (t *Service) Exec(args DownloadSpecificArgs, result *string) error {
-	log.Println("Spawning new process for", args.URL)
-	p := Process{mem: &db, url: args.URL, params: args.Params}
-	p.Start(args.Path, args.Rename)
-	*result = p.id
-	return nil
-}
-
-// Progess retrieves the Progress of a specific Process given its Id
-func (t *Service) Progess(args Args, progress *DownloadProgress) error {
-	proc, err := db.Get(args.Id)
-	if err != nil {
-		return err
-	}
-	*progress = proc.Progress
-	return nil
-}
-
-// Progess retrieves the Progress of a specific Process given its Id
-func (t *Service) Formats(args Args, progress *DownloadFormats) error {
-	var err error
-	p := Process{url: args.URL}
-	*progress, err = p.GetFormatsSync()
-	return err
-}
-
-// Pending retrieves a slice of all Pending/Running processes ids
-func (t *Service) Pending(args NoArgs, pending *Pending) error {
-	*pending = *db.Keys()
-	return nil
-}
-
-// Running retrieves a slice of all Processes progress
-func (t *Service) Running(args NoArgs, running *Running) error {
-	*running = *db.All()
-	return nil
-}
-
-// Kill kills a process given its id and remove it from the memoryDB
-func (t *Service) Kill(args string, killed *string) error {
-	log.Println("Trying killing process with id", args)
-	proc, err := db.Get(args)
-	if err != nil {
-		return err
-	}
-	if proc != nil {
-		err = proc.Kill()
-	}
-	return err
-}
-
-// KillAll kills all process unconditionally and removes them from
-// the memory db
-func (t *Service) KillAll(args NoArgs, killed *string) error {
-	log.Println("Killing all spawned processes", args)
-	keys := db.Keys()
-	var err error
-	for _, key := range *keys {
-		proc, err := db.Get(key)
-		if err != nil {
-			return err
-		}
-		if proc != nil {
-			proc.Kill()
-		}
-	}
-	return err
-}
-
-// Remove a process from the db rendering it unusable if active
-func (t *Service) Clear(args string, killed *string) error {
-	log.Println("Clearing process with id", args)
-	db.Delete(args)
-	return nil
-}
-
-// FreeSpace gets the available from package sys util
-func (t *Service) FreeSpace(args NoArgs, free *uint64) error {
-	freeSpace, err := sys.FreeSpace()
-	*free = freeSpace
-	return err
-}
-
-// Return a flattned tree of the download directory
-func (t *Service) DirectoryTree(args NoArgs, tree *[]string) error {
-	dfsTree, err := sys.DirectoryTree()
-	*tree = *dfsTree
-	return err
-}
-
-// Updates the yt-dlp binary using its builtin function
-func (t *Service) UpdateExecutable(args NoArgs, updated *bool) error {
-	log.Println("Updating yt-dlp executable to the latest release")
-	err := updater.UpdateExecutable()
-	if err != nil {
-		*updated = true
-		return err
-	}
-	*updated = false
-	return err
-}
--- a/server/sys/fs.go
+++ b/server/sys/fs.go
@@ -28,15 +28,11 @@ func DirectoryTree() (*[]string, error) {

 	rootPath := config.Instance().GetConfig().DownloadPath

-	stack := internal.Stack[Node]{
-		Nodes: make([]*internal.Node[Node], 5),
-	}
+	stack := internal.NewStack[Node]()
 	flattened := make([]string, 0)

-	root := Node{path: rootPath}
-	stack.Push(&internal.Node[Node]{
-		Value: root,
-	})
+	stack.Push(Node{path: rootPath})
+
 	flattened = append(flattened, rootPath)

 	for stack.IsNotEmpty() {
@@ -51,9 +47,7 @@ func DirectoryTree() (*[]string, error) {

 			if entry.IsDir() {
 				current.children = append(current.children, childNode)
-				stack.Push(&internal.Node[Node]{
-					Value: childNode,
-				})
+				stack.Push(childNode)
 				flattened = append(flattened, childNode.path)
 			}
 		}
--- a/server/updater/forced_update.go
+++ b/server/updater/forced_update.go
@@ -1,45 +0,0 @@
-package updater
-
-import (
-	"io"
-	"log"
-	"net/http"
-
-	"github.com/goccy/go-json"
-)
-
-const (
-	gitHubAPILatest   = "https://api.github.com/repos/yt-dlp/yt-dlp/releases/latest"
-	gitHubAPIDownload = "https://api.github.com/repos/yt-dlp/yt-dlp/releases/download"
-)
-
-var (
-	client = &http.Client{
-		CheckRedirect: http.DefaultClient.CheckRedirect,
-	}
-)
-
-func getLatestReleaseTag() (string, error) {
-	res, err := client.Get(gitHubAPILatest)
-	if err != nil {
-		log.Println("Cannot get release tag from GitHub API")
-		return "", err
-	}
-	defer res.Body.Close()
-
-	body, err := io.ReadAll(res.Body)
-
-	if err != nil {
-		log.Println("Cannot parse response from GitHub API")
-		return "", err
-	}
-
-	tag := ReleaseLatestResponse{}
-	json.Unmarshal(body, &tag)
-
-	return tag.TagName, nil
-}
-
-func ForceUpdate() {
-	getLatestReleaseTag()
-}
--- a/server/updater/types.go
+++ b/server/updater/types.go
@@ -1,6 +0,0 @@
-package updater
-
-type ReleaseLatestResponse struct {
-	Name    string `json:"name"`
-	TagName string `json:"tag_name"`
-}
--- a/server/updater/update.go
+++ b/server/updater/update.go
@@ -6,13 +6,14 @@ import (
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 )

-var path = config.Instance().GetConfig().DownloaderPath
-
 // Update using the builtin function of yt-dlp
 func UpdateExecutable() error {
-	cmd := exec.Command(path, "-U")
-	cmd.Start()
+	cmd := exec.Command(config.Instance().GetConfig().DownloaderPath, "-U")

-	err := cmd.Wait()
-	return err
+	err := cmd.Start()
+	if err != nil {
+		return err
+	}
+
+	return cmd.Wait()
 }
--- a/server/utils/file.go
+++ b/server/utils/file.go
@@ -0,0 +1,29 @@
+package utils
+
+import (
+	"crypto/sha256"
+	"encoding/hex"
+	"io/fs"
+	"regexp"
+	"strings"
+)
+
+var (
+	videoRe = regexp.MustCompile(`(?i)/\.mov|\.mp4|\.webm|\.mvk|/gmi`)
+)
+
+func IsVideo(d fs.DirEntry) bool {
+	return videoRe.MatchString(d.Name())
+}
+
+func IsValidEntry(d fs.DirEntry) bool {
+	return !strings.HasPrefix(d.Name(), ".") &&
+		!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))
+}
Author	SHA1	Message	Date
marcobaobao	13dd9526e2	Removed unused import	2023-07-31 19:14:50 +02:00
marcobaobao	055f71f4f1	custom error boundary	2023-07-31 19:14:50 +02:00
marcobaobao	c0a424410e	code refactoring	2023-07-31 19:14:50 +02:00
marcobaobao	b5731759b0	migrated from redux to recoil	2023-07-31 19:14:50 +02:00
Marco	8327d1e94c	Download REST API endpoints (#72 ) * backend and frontend hotfixes, see message Improved rendering on the frontend by cutting unecessary useStates. Backend side, downloads now auto resume even on application kill. * download rest api endpoints, general code refactor * download request json mappings	2023-07-31 08:30:09 +02:00
Marco	68c829c40e	10 playlist download (#71 ) * leveraging message queue for playlist entries DL * playlist support implemented It's a little bit slow but solid enough :D	2023-07-28 11:44:38 +02:00
marcobaobao	d4f656fd87	code refactoring	2023-07-26 16:21:10 +02:00
Alexandro	a4d586a3a0	Added Polish language (#68 ) * Update i18n.yaml Added Russian language * Update settingsSlice.ts * Update i18n.yaml * Update Settings.tsx * Update i18n.yaml, Added Polish language * Update settingsSlice.ts, added Polish language * Update Settings.tsx, added Polish language	2023-07-26 15:55:03 +02:00
marcobaobao	e1510d28d2	dropped fiber for std http + gorilla websocket Session serialization will use gob encoding instead of json. Binary size will likely be reduced. General backend code refactoring.	2023-07-26 11:48:54 +02:00
marcobaobao	82b22db7ae	code refactor	2023-07-26 09:51:00 +02:00
deluxghost	49ded2e0f6	Update chinese (#67 )	2023-07-19 07:56:55 +02:00
Alexandro	58f0e67aac	Added Ukrainian language (#63 ) * Update i18n.yaml Added Russian language * Update settingsSlice.ts * Update i18n.yaml * Update Settings.tsx	2023-07-08 17:50:06 +02:00
Alexandro	00c6e5aaf2	Update i18n.yaml (#61 ) Added Russian language	2023-07-07 07:42:57 +02:00
Marco	3ded768a6f	10 feat download queue (#59 ) * testing message queue * better mq syncronisation * major code refactoring, concern separation. * bugfix * code refactoring * queuesize configurable via flags * code refactoring * comments * code refactoring, updated readme	2023-06-26 11:27:15 +02:00
marcobaobao	dd753c5f26	code refactoring	2023-06-24 15:02:47 +02:00
marcobaobao	2c9d4b0a9b	bugfix	2023-06-23 17:46:47 +02:00
marcobaobao	3067cee08c	code refactoring, fixed wrong jwt expire time	2023-06-23 15:18:40 +02:00
marcobaobao	7d510fd2d4	code refactoring, deps bump	2023-06-23 14:49:58 +02:00
marcobaobao	12300d43c5	copy url to clipboard, code refactoring	2023-06-23 11:58:11 +02:00
marcobaobao	53045be65c	code refactoring	2023-06-23 11:46:44 +02:00
marcobaobao	765b36cc98	code refactoring	2023-06-23 11:41:55 +02:00
marcobaobao	e9df173aef	removed dead code	2023-06-23 11:02:08 +02:00
Marco	2ae4a5da3d	New home view layout (#58 ) * Home layout refactor, moved new download to dialog * sort downloads by date	2023-06-23 10:48:38 +02:00
marcobaobao	13cc89fe3b	Merge remote-tracking branch 'origin/master' into feat-authentication	2023-06-23 09:29:11 +02:00
marcobaobao	32844bbe3e	updated readme	2023-06-23 09:28:38 +02:00
marcobaobao	e69829fcef	code refactoring, updated dockerfile	2023-06-23 09:21:09 +02:00
marcobaobao	d6c0646756	frontend performance, rpc/rest jwt authentication	2023-06-22 11:31:24 +02:00
Pachi23	1df308f388	Added Catalan Language (#57 ) * Updated Spanish Language * Fix spanish * Added Catalan Language	2023-06-04 11:05:22 +02:00
Pachi23	6a11249fbc	Updated Spanish Language (#56 ) * Updated Spanish Language * Fix spanish	2023-06-04 08:37:40 +02:00
marcobaobao	78c1559e84	code refactoring	2023-05-31 10:21:30 +02:00
Marco	cfd6b78695	Update README.md	2023-05-26 17:47:33 +02:00
marcobaobao	5d97873748	file browser overhaul	2023-05-26 17:31:00 +02:00
marcobaobao	58b05e1403	code refactoring	2023-05-26 15:10:23 +02:00
marcobaobao	985629fd2e	code refactoring	2023-05-26 14:55:14 +02:00
marcobaobao	cafaf2707e	filebrowser upper level bugfix	2023-05-26 14:41:12 +02:00
Marco	823a725df4	Update README.md	2023-05-26 14:24:03 +02:00
marcobaobao	40b25ed385	handle "upper level" on file browser	2023-05-26 14:14:30 +02:00
marcobaobao	8632d313c3	handle "upper level" on file browser	2023-05-26 14:07:17 +02:00
Marco	98f794c822	Update README.md	2023-05-26 13:17:25 +02:00
Marco	c2a02bb0b7	Update README.md	2023-05-26 13:16:38 +02:00
marcobaobao	f19718d46c	bugfix	2023-05-26 13:02:18 +02:00
marcobaobao	1e0e625d1a	code refactoring, dependencies update	2023-05-26 11:29:59 +02:00
Marco	5b70d25bef	Improved filebrowser (#52 ) * file archive refactor, list dir perf optimization * code refactoring	2023-05-26 11:10:10 +02:00
Marco	8cf130ec23	Merge pull request #51 from marcopeocchi/50-request-for-download-link-and-option-to-delete-downloadded-video 50 request for download link and option to delete downloadded video	2023-05-25 11:42:01 +02:00
marcobaobao	fd0b40ac46	code refactoring, enabled memory db persist to fs.	2023-05-25 11:13:46 +02:00
marcobaobao	acfc5aa064	code refactoring	2023-05-24 13:31:48 +02:00
marcobaobao	b1c6f7248c	code refactoring	2023-05-24 13:31:05 +02:00
marcobaobao	ac6fe98dc8	ui refactor, downloaded files view enabled	2023-05-24 13:29:54 +02:00
marcobaobao	908f4c6636	first implementation of downloaded files viewer	2023-05-24 13:19:04 +02:00
marcobaobao	3737e86de3	backend functions for list, download, and delete local files	2023-05-17 18:32:46 +02:00
Marco	77f9eb0c2a	Update Home.tsx	2023-04-19 18:24:08 +02:00
marcobaobao	e00333a97e	reduced chunks size	2023-04-19 15:01:37 +02:00
marcobaobao	3d86b4c372	bug fix	2023-04-19 14:16:43 +02:00
marcobaobao	fa7cd1a691	code refactoring, switch to rxjs websocket wrapper	2023-04-19 14:14:15 +02:00
marcobaobao	621164589f	Code refactoring and bump deps	2023-04-13 11:13:40 +02:00
Marco	7f602f1e20	Update docker-publish.yml	2023-03-21 22:58:14 +01:00
Marco	5977a57686	Update docker-image.yml	2023-03-21 22:57:43 +01:00