ready for v3.2.3

* editable templates

* removed unused import

.dockerignore

@@ -0,0 +1,28 @@
+.pre-commit-config.yaml
+.direnv/
+result/
+result
+dist
+.pnpm-debug.log
+node_modules
+.env
+*.mp4
+*.ytdl
+*.part
+*.db
+downloads
+.DS_Store
+build/
+yt-dlp-webui
+session.dat
+config.yml
+cookies.txt
+__debug*
+ui/
+.idea
+frontend/.pnp.cjs
+frontend/.pnp.loader.mjs
+frontend/.yarn/install-state.gz
+.db.lock
+livestreams.dat
+.git

README.md

@@ -1,3 +1,7 @@
+> [!NOTE]  
+> A poll is up to decide the future of yt-dlp-web-ui frontend! If you're interested you can take part.  
+> https://github.com/marcopeocchi/yt-dlp-web-ui/discussions/223
+
 # yt-dlp Web UI
 
 A not so terrible web ui for yt-dlp. 
@@ -151,6 +155,8 @@ Usage yt-dlp-webui:
         session file path (default ".")
   -user string
         Username required for auth
+  -web string
+        frontend web resources path
 ```
 
 ### Config file
@@ -180,7 +186,7 @@ password: my_random_secret
 queue_size: 4 # min. 2
 
 # [optional] Full path to the yt-dlp (default: "yt-dlp")
-downloaderPath: /usr/local/bin/yt-dlp
+#downloaderPath: /usr/local/bin/yt-dlp
 
 # [optional] Enable file based logging with rotation (default: false)
 #enable_file_logging: false
@@ -193,6 +199,9 @@ downloaderPath: /usr/local/bin/yt-dlp
 
 # [optional] Path where the sqlite database will be created/opened (default: "./local.db")
 #local_database_path
+
+# [optional] Path where a custom frontend will be loaded (instead of the embedded one)
+#frontend_path: ./web/solid-frontend
 ```
 
 ### Systemd integration
@@ -258,6 +267,22 @@ It is **planned** to also expose a **gRPC** server.
 
 For more information open an issue on GitHub and I will provide more info ASAP.
 
+## Custom frontend
+To load a custom frontend you need to specify its path either in the config file ([see config file](#config-file)) or via flags.
+
+The frontend needs to follow this structure:
+```
+path/to/my/frontend
+├── assets
+│   ├── js-chunk-1.js (example)
+│   ├── js-chunk-2.js (example)
+│   ├── style.css (example)
+└── index.html
+```
+
+`assets` is where the resources will be loaded.  
+`index.html` is the entrypoint.
+
 ## Nix
 This repo adds support for Nix(OS) in various ways through a `flake-parts` flake. 
 For more info, please refer to the [official documentation](https://nixos.org/learn/).

examples/docker-compose-nginx/app.conf

@@ -0,0 +1,27 @@
+map $http_upgrade $connection_upgrade {
+    default upgrade;
+    '' close;
+}
+
+server {
+    listen 80;
+    server_name localhost;
+
+    location / {
+        proxy_pass http://app:3033;
+        proxy_redirect off;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection $connection_upgrade;
+
+        client_max_body_size    20000m;
+        proxy_connect_timeout   5000;
+        proxy_send_timeout      5000;
+        proxy_read_timeout      5000;
+        send_timeout            5000;
+    }
+}

examples/docker-compose-nginx/docker-compose.yml

@@ -0,0 +1,15 @@
+services:
+  app:
+    image: marcobaobao/yt-dlp-webui
+    volumes:
+      - ./downloads:/downloads
+    restart: unless-stopped
+  nginx:
+    image: nginx:alpine
+    restart: unless-stopped
+    volumes:
+      - ./app.conf:/etc/nginx/conf.d/app.conf
+    depends_on: 
+      - app
+    ports: 
+      - 80:80

frontend/package.json

@@ -1,39 +1,38 @@
 {
   "name": "yt-dlp-webui",
-  "version": "3.2.1",
+  "version": "3.2.3",
   "description": "Frontend compontent of yt-dlp-webui",
   "scripts": {
     "dev": "vite",
     "build": "vite build"
   },
   "author": "marcopeocchi",
-  "license": "MPL-2.0",
+  "license": "GPL-3.0-only",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.4",
+    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.11.5",
+    "@emotion/styled": "^11.14.0",
     "@fontsource/roboto": "^5.0.13",
     "@fontsource/roboto-mono": "^5.0.18",
-    "@mui/icons-material": "^5.15.16",
+    "@mui/icons-material": "^6.2.0",
-    "@mui/material": "^5.15.16",
+    "@mui/material": "^6.2.0",
     "fp-ts": "^2.16.5",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
     "react-router-dom": "^6.23.1",
     "react-virtuoso": "^4.7.11",
-    "recoil": "^0.7.7",
+    "jotai": "^2.10.3",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@modyfi/vite-plugin-yaml": "^1.1.0",
     "@types/node": "^20.14.2",
-    "@types/react": "^18.3.3",
+    "@types/react": "^19.0.1",
-    "@types/react-dom": "^18.2.18",
+    "@types/react-dom": "^19.0.2",
     "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react-swc": "^3.7.0",
+    "@vitejs/plugin-react-swc": "^3.7.2",
-    "million": "^3.1.11",
+    "typescript": "^5.7.2",
-    "typescript": "^5.4.5",
+    "vite": "^6.0.3"
-    "vite": "^5.2.11"
   }
 }

frontend/src/App.tsx

@@ -1,11 +1,11 @@
 import { RouterProvider } from 'react-router-dom'
-import { RecoilRoot } from 'recoil'
+import { Provider } from 'jotai'
 import { router } from './router'
 
 export function App() {
   return (
-    <RecoilRoot>
+    <Provider>
       <RouterProvider router={router} />
-    </RecoilRoot>
+    </Provider>
   )
 }

frontend/src/Layout.tsx

@@ -16,10 +16,9 @@ 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 { grey, red } 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 AppBar from './components/AppBar'
 import Drawer from './components/Drawer'
@@ -29,22 +28,27 @@ import SocketSubscriber from './components/SocketSubscriber'
 import ThemeToggler from './components/ThemeToggler'
 import { useI18n } from './hooks/useI18n'
 import Toaster from './providers/ToasterProvider'
+import { useAtomValue } from 'jotai'
+import { getAccentValue } from './utils'
 
 export default function Layout() {
   const [open, setOpen] = useState(false)
 
-  const settings = useRecoilValue(settingsState)
+  const settings = useAtomValue(settingsState)
 
   const mode = settings.theme
   const theme = useMemo(() =>
     createTheme({
       palette: {
         mode: settings.theme,
+        primary: {
+          main: getAccentValue(settings.accent)
+        },
         background: {
           default: settings.theme === 'light' ? grey[50] : '#121212'
         },
       },
-    }), [settings.theme]
+    }), [settings.theme, settings.accent]
   )
 
   const toggleDrawer = () => setOpen(state => !state)

frontend/src/assets/i18n.yaml

@@ -65,6 +65,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   german:
     urlInput: Video URL
     statusTitle: Status
@@ -126,6 +127,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   french:
     urlInput: URL vidéo de YouTube ou d'un autre service pris en charge
     statusTitle: Statut
@@ -189,6 +191,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   italian:
     urlInput: URL Video (uno per linea)
     statusTitle: Stato
@@ -249,6 +252,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   chinese:
     urlInput: 视频 URL
     statusTitle: 状态
@@ -310,6 +314,7 @@ languages:
       如果直播已经开始，那么依然可以下载，但是不会记录下载进度。
       直播开始后，将会转移到下载页面
     livestreamExperimentalWarning: 实验性功能，可能存在未知Bug，请谨慎使用
+    accentSelect: 'Accent'
   spanish:
     urlInput: URL de YouTube u otro servicio compatible
     statusTitle: Estado
@@ -369,6 +374,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   russian:
     urlInput: URL-адрес YouTube или любого другого поддерживаемого сервиса
     statusTitle: Статус
@@ -428,6 +434,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   korean:
     urlInput: YouTube나 다른 지원되는 사이트의 URL
     statusTitle: 상태
@@ -487,6 +494,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   japanese:
     urlInput: YouTubeまたはサポート済み動画のURL
     statusTitle: 状態
@@ -547,6 +555,7 @@ languages:
       すでに開始されているライブストリームが提供された場合、ダウンロードは継続されますが進行状況は追跡されません。
       ライブストリームが開始されると、ダウンロードページに移動されます。
     livestreamExperimentalWarning: この機能は実験的なものです。何かが壊れるかもしれません！
+    accentSelect: 'Accent'
   catalan:
     urlInput: URL de YouTube o d'un altre servei compatible
     statusTitle: Estat
@@ -606,6 +615,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   ukrainian:
     urlInput: URL-адреса YouTube або будь-якого іншого підтримуваного сервісу
     statusTitle: Статус
@@ -665,6 +675,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   polish:
     urlInput: Adres URL YouTube lub innej obsługiwanej usługi
     statusTitle: Status
@@ -724,6 +735,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   swedish:
     urlInput: Videolänk (en per rad)
     statusTitle: Status
@@ -789,3 +801,4 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'

frontend/src/atoms/downloadTemplate.ts

@@ -1,44 +1,34 @@
 import { getOrElse } from 'fp-ts/lib/Either'
 import { pipe } from 'fp-ts/lib/function'
-import { atom, selector } from 'recoil'
 import { ffetch } from '../lib/httpClient'
 import { CustomTemplate } from '../types'
 import { serverSideCookiesState, serverURL } from './settings'
+import { atom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
 
-export const cookiesTemplateState = selector({
+export const cookiesTemplateState = atom<Promise<string>>(async (get) =>
-  key: 'cookiesTemplateState',
+  await get(serverSideCookiesState)
-  get: ({ get }) => get(serverSideCookiesState)
     ? '--cookies=cookies.txt'
     : ''
-})
+)
 
-export const customArgsState = atom({
+export const customArgsState = atomWithStorage(
-  key: 'customArgsState',
+  'customArgs',
-  default: localStorage.getItem('customArgs') ?? '',
+  localStorage.getItem('customArgs') ?? ''
-  effects: [
+)
-    ({ onSet }) => onSet(e => localStorage.setItem('customArgs', e))
-  ]
-})
 
-export const filenameTemplateState = atom({
+export const filenameTemplateState = atomWithStorage(
-  key: 'filenameTemplateState',
+  'lastFilenameTemplate',
-  default: localStorage.getItem('lastFilenameTemplate') ?? '',
+  localStorage.getItem('lastFilenameTemplate') ?? ''
-  effects: [
+)
-    ({ onSet }) => onSet(e => localStorage.setItem('lastFilenameTemplate', e))
-  ]
-})
 
-export const downloadTemplateState = selector({
+export const downloadTemplateState = atom<Promise<string>>(async (get) =>
-  key: 'downloadTemplateState',
+  `${get(customArgsState)} ${await get(cookiesTemplateState)}`
-  get: ({ get }) =>
-    `${get(customArgsState)} ${get(cookiesTemplateState)}`
     .replace(/  +/g, ' ')
     .trim()
-})
+)
 
-export const savedTemplatesState = selector<CustomTemplate[]>({
+export const savedTemplatesState = atom<Promise<CustomTemplate[]>>(async (get) => {
-  key: 'savedTemplatesState',
-  get: async ({ get }) => {
   const task = ffetch<CustomTemplate[]>(`${get(serverURL)}/api/v1/template/all`)
   const either = await task()
 
@@ -47,4 +37,4 @@ export const savedTemplatesState = selector<CustomTemplate[]>({
     getOrElse(() => new Array<CustomTemplate>())
   )
 }
-})
+)

frontend/src/atoms/downloads.ts

@@ -1,22 +1,13 @@
 import * as O from 'fp-ts/Option'
 import { pipe } from 'fp-ts/lib/function'
-import { atom, selector } from 'recoil'
 import { RPCResult } from '../types'
+import { atom } from 'jotai'
 
-export const downloadsState = atom<O.Option<RPCResult[]>>({
+export const downloadsState = atom<O.Option<RPCResult[]>>(O.none)
-  key: 'downloadsState',
-  default: O.none
-})
 
-export const loadingDownloadsState = selector<boolean>({
+export const loadingDownloadsState = atom<boolean>((get) => O.isNone(get(downloadsState)))
-  key: 'loadingDownloadsState',
-  get: ({ get }) => O.isNone(get(downloadsState))
-})
 
-export const activeDownloadsState = selector<RPCResult[]>({
+export const activeDownloadsState = atom<RPCResult[]>((get) => pipe(
-  key: 'activeDownloadsState',
-  get: ({ get }) => pipe(
   get(downloadsState),
   O.getOrElse(() => new Array<RPCResult>())
-  )
+))
-})

frontend/src/atoms/i18n.ts

@@ -1,9 +1,5 @@
-import { selector } from 'recoil'
+import { atom } from 'jotai'
 import I18nBuilder from '../lib/intl'
 import { languageState } from './settings'
 
-export const i18nBuilderState = selector({
+export const i18nBuilderState = atom((get) => new I18nBuilder(get(languageState)))
-  key: 'i18nBuilderState',
-  get: ({ get }) => new I18nBuilder(get(languageState)),
-  dangerouslyAllowMutability: true,
-})

frontend/src/atoms/rpc.ts

@@ -1,23 +1,17 @@
-import { atom, selector } from 'recoil'
+import { atom } from 'jotai'
 import { RPCClient } from '../lib/rpcClient'
 import { rpcHTTPEndpoint, rpcWebSocketEndpoint } from './settings'
+import { atomWithStorage } from 'jotai/utils'
 
-export const rpcClientState = selector({
+export const rpcClientState = atom((get) =>
-  key: 'rpcClientState',
-  get: ({ get }) =>
   new RPCClient(
     get(rpcHTTPEndpoint),
     get(rpcWebSocketEndpoint),
     localStorage.getItem('token') ?? ''
   ),
-  dangerouslyAllowMutability: true,
+)
-})
 
-export const rpcPollingTimeState = atom({
+export const rpcPollingTimeState = atomWithStorage(
-  key: 'rpcPollingTimeState',
+  'rpc-polling-time',
-  default: Number(localStorage.getItem('rpc-polling-time')) || 1000,
+  Number(localStorage.getItem('rpc-polling-time')) || 1000
-  effects: [
+)
-    ({ onSet }) =>
-      onSet(a => localStorage.setItem('rpc-polling-time', a.toString()))
-  ]
-})

frontend/src/atoms/settings.ts

@@ -1,8 +1,9 @@
 import { pipe } from 'fp-ts/lib/function'
 import { matchW } from 'fp-ts/lib/TaskEither'
-import { atom, selector } from 'recoil'
 import { ffetch } from '../lib/httpClient'
 import { prefersDarkMode } from '../utils'
+import { atomWithStorage } from 'jotai/utils'
+import { atom } from 'jotai'
 
 export const languages = [
   'english',
@@ -25,11 +26,15 @@ export type Language = (typeof languages)[number]
 export type Theme = 'light' | 'dark' | 'system'
 export type ThemeNarrowed = 'light' | 'dark'
 
+export const accents = ['default', 'red'] as const
+export type Accent = (typeof accents)[number]
+
 export interface SettingsState {
   serverAddr: string
   serverPort: number
   language: Language
   theme: ThemeNarrowed
+  accent: Accent
   cliArgs: string
   formatSelection: boolean
   fileRenaming: boolean
@@ -40,126 +45,72 @@ export interface SettingsState {
   appTitle: string
 }
 
-export const languageState = atom<Language>({
+export const languageState = atomWithStorage<Language>(
-  key: 'languageState',
+  'language',
-  default: localStorage.getItem('language') as Language || 'english',
+  localStorage.getItem('language') as Language || 'english'
-  effects: [
+)
-    ({ onSet }) =>
-      onSet(l => localStorage.setItem('language', l.toString()))
-  ]
-})
 
-export const themeState = atom<Theme>({
+export const themeState = atomWithStorage<Theme>(
-  key: 'themeStateState',
+  'theme',
-  default: localStorage.getItem('theme') as Theme || 'system',
+  localStorage.getItem('theme') as Theme || 'system'
-  effects: [
+)
-    ({ onSet }) =>
-      onSet(l => localStorage.setItem('theme', l.toString()))
-  ]
-})
 
-export const serverAddressState = atom<string>({
+export const serverAddressState = atomWithStorage<string>(
-  key: 'serverAddressState',
+  'server-addr',
-  default: localStorage.getItem('server-addr') || window.location.hostname,
+  localStorage.getItem('server-addr') || window.location.hostname
-  effects: [
+)
-    ({ onSet }) =>
-      onSet(a => localStorage.setItem('server-addr', a.toString()))
-  ]
-})
 
-export const serverPortState = atom<number>({
+export const serverPortState = atomWithStorage<number>(
-  key: 'serverPortState',
+  'server-port',
-  default: Number(localStorage.getItem('server-port')) || Number(window.location.port),
+  Number(localStorage.getItem('server-port')) || Number(window.location.port)
-  effects: [
+)
-    ({ onSet }) =>
-      onSet(a => localStorage.setItem('server-port', a.toString()))
-  ]
-})
 
-export const latestCliArgumentsState = atom<string>({
+export const latestCliArgumentsState = atomWithStorage<string>(
-  key: 'latestCliArgumentsState',
+  'cli-args',
-  default: localStorage.getItem('cli-args') || '--no-mtime',
+  localStorage.getItem('cli-args') || '--no-mtime'
-  effects: [
+)
-    ({ onSet }) =>
-      onSet(a => localStorage.setItem('cli-args', a.toString()))
-  ]
-})
 
-export const formatSelectionState = atom({
+export const formatSelectionState = atomWithStorage(
-  key: 'formatSelectionState',
+  'format-selection',
-  default: localStorage.getItem('format-selection') === "true",
+  localStorage.getItem('format-selection') === 'true'
-  effects: [
+)
-    ({ onSet }) =>
-      onSet(a => localStorage.setItem('format-selection', a.toString()))
-  ]
-})
 
-export const fileRenamingState = atom({
+export const fileRenamingState = atomWithStorage(
-  key: 'fileRenamingState',
+  'file-renaming',
-  default: localStorage.getItem('file-renaming') === "true",
+  localStorage.getItem('file-renaming') === 'true'
-  effects: [
+)
-    ({ onSet }) =>
-      onSet(a => localStorage.setItem('file-renaming', a.toString()))
-  ]
-})
 
-export const pathOverridingState = atom({
+export const pathOverridingState = atomWithStorage(
-  key: 'pathOverridingState',
+  'path-overriding',
-  default: localStorage.getItem('path-overriding') === "true",
+  localStorage.getItem('path-overriding') === 'true'
-  effects: [
+)
-    ({ onSet }) =>
-      onSet(a => localStorage.setItem('path-overriding', a.toString()))
-  ]
-})
 
-export const enableCustomArgsState = atom({
+export const enableCustomArgsState = atomWithStorage(
-  key: 'enableCustomArgsState',
+  'enable-custom-args',
-  default: localStorage.getItem('enable-custom-args') === "true",
+  localStorage.getItem('enable-custom-args') === 'true'
-  effects: [
+)
-    ({ onSet }) =>
-      onSet(a => localStorage.setItem('enable-custom-args', a.toString()))
-  ]
-})
 
-export const listViewState = atom({
+export const listViewState = atomWithStorage(
-  key: 'listViewState',
+  'listview',
-  default: localStorage.getItem('listview') === "true",
+  localStorage.getItem('listview') === 'true'
-  effects: [
+)
-    ({ onSet }) =>
-      onSet(a => localStorage.setItem('listview', a.toString()))
-  ]
-})
 
-export const servedFromReverseProxyState = atom({
+export const servedFromReverseProxyState = atomWithStorage(
-  key: 'servedFromReverseProxyState',
+  'reverseProxy',
-  default: localStorage.getItem('reverseProxy') === "true" || window.location.port == "",
+  localStorage.getItem('reverseProxy') === 'true' || window.location.port == ''
-  effects: [
+)
-    ({ onSet }) =>
-      onSet(a => localStorage.setItem('reverseProxy', a.toString()))
-  ]
-})
 
-export const servedFromReverseProxySubDirState = atom<string>({
+export const servedFromReverseProxySubDirState = atomWithStorage<string>(
-  key: 'servedFromReverseProxySubDirState',
+  'reverseProxySubDir',
-  default: localStorage.getItem('reverseProxySubDir') ?? '',
+  localStorage.getItem('reverseProxySubDir') ?? ''
-  effects: [
+)
-    ({ onSet }) =>
-      onSet(a => localStorage.setItem('reverseProxySubDir', a))
-  ]
-})
 
-export const appTitleState = atom({
+export const appTitleState = atomWithStorage(
-  key: 'appTitleState',
+  'appTitle',
-  default: localStorage.getItem('appTitle') ?? 'yt-dlp Web UI',
+  localStorage.getItem('appTitle') ?? 'yt-dlp Web UI'
-  effects: [
+)
-    ({ onSet }) =>
-      onSet(a => localStorage.setItem('appTitle', a.toString()))
-  ]
-})
 
-export const serverAddressAndPortState = selector({
+export const serverAddressAndPortState = atom((get) => {
-  key: 'serverAddressAndPortState',
-  get: ({ get }) => {
   if (get(servedFromReverseProxySubDirState)) {
     return `${get(serverAddressState)}/${get(servedFromReverseProxySubDirState)}/`
   }
@@ -167,60 +118,51 @@ export const serverAddressAndPortState = selector({
     return `${get(serverAddressState)}`
   }
   return `${get(serverAddressState)}:${get(serverPortState)}`
-  }
 })
 
-export const serverURL = selector({
+export const serverURL = atom((get) =>
-  key: 'serverURL',
-  get: ({ get }) =>
   `${window.location.protocol}//${get(serverAddressAndPortState)}`
-})
+)
 
-export const rpcWebSocketEndpoint = selector({
+export const rpcWebSocketEndpoint = atom((get) => {
-  key: 'rpcWebSocketEndpoint',
-  get: ({ get }) => {
   const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
   return `${proto}//${get(serverAddressAndPortState)}/rpc/ws`
 }
-})
+)
 
-export const rpcHTTPEndpoint = selector({
+export const rpcHTTPEndpoint = atom((get) => {
-  key: 'rpcHTTPEndpoint',
-  get: ({ get }) => {
   const proto = window.location.protocol
   return `${proto}//${get(serverAddressAndPortState)}/rpc/http`
 }
-})
+)
 
-export const serverSideCookiesState = selector<string>({
+export const serverSideCookiesState = atom<Promise<string>>(async (get) => await pipe(
-  key: 'serverSideCookiesState',
-  get: async ({ get }) => await pipe(
   ffetch<Readonly<{ cookies: string }>>(`${get(serverURL)}/api/v1/cookies`),
   matchW(
     () => '',
     (r) => r.cookies
   )
-  )()
+)())
-})
 
-const themeSelector = selector<ThemeNarrowed>({
+const themeSelector = atom<ThemeNarrowed>((get) => {
-  key: 'themeSelector',
-  get: ({ get }) => {
   const theme = get(themeState)
   if ((theme === 'system' && prefersDarkMode()) || theme === 'dark') {
     return 'dark'
   }
   return 'light'
-  }
 })
 
-export const settingsState = selector<SettingsState>({
+export const accentState = atomWithStorage<Accent>(
-  key: 'settingsState',
+  'accent-color',
-  get: ({ get }) => ({
+  localStorage.getItem('accent-color') as Accent ?? 'default',
+)
+
+export const settingsState = atom<SettingsState>((get) => ({
   serverAddr: get(serverAddressState),
   serverPort: get(serverPortState),
   language: get(languageState),
   theme: get(themeSelector),
+  accent: get(accentState),
   cliArgs: get(latestCliArgumentsState),
   formatSelection: get(formatSelectionState),
   fileRenaming: get(fileRenamingState),
@@ -230,4 +172,4 @@ export const settingsState = selector<SettingsState>({
   servedFromReverseProxy: get(servedFromReverseProxyState),
   appTitle: get(appTitleState)
 })
-})
+)

frontend/src/atoms/status.ts

@@ -1,38 +1,28 @@
 import { pipe } from 'fp-ts/lib/function'
 import { of } from 'fp-ts/lib/Task'
 import { getOrElse } from 'fp-ts/lib/TaskEither'
-import { atom, selector } from 'recoil'
 import { ffetch } from '../lib/httpClient'
 import { RPCVersion } from '../types'
 import { rpcClientState } from './rpc'
 import { serverURL } from './settings'
+import { atom } from 'jotai'
 
-export const connectedState = atom({
+export const connectedState = atom(false)
-  key: 'connectedState',
-  default: false
-})
 
-export const freeSpaceBytesState = selector({
+export const freeSpaceBytesState = atom(async (get) => {
-  key: 'freeSpaceBytesState',
+  const res = await get(rpcClientState)
-  get: async ({ get }) => {
+    .freeSpace()
-    const res = await get(rpcClientState).freeSpace()
     .catch(() => ({ result: 0 }))
   return res.result
-  }
 })
 
-export const availableDownloadPathsState = selector({
+export const availableDownloadPathsState = atom(async (get) => {
-  key: 'availableDownloadPathsState',
-  get: async ({ get }) => {
   const res = await get(rpcClientState).directoryTree()
     .catch(() => ({ result: [] }))
   return res.result
-  }
 })
 
-export const ytdlpRpcVersionState = selector<RPCVersion>({
+export const ytdlpRpcVersionState = atom<Promise<RPCVersion>>(async (get) => await pipe(
-  key: 'ytdlpRpcVersionState',
-  get: async ({ get }) => await pipe(
   ffetch<RPCVersion>(`${get(serverURL)}/api/v1/version`),
   getOrElse(() => pipe(
     {
@@ -41,5 +31,4 @@ export const ytdlpRpcVersionState = selector<RPCVersion>({
     },
     of
   )),
-  )()
+)())
-})

frontend/src/atoms/toast.ts

@@ -1,5 +1,5 @@
 import { AlertColor } from '@mui/material'
-import { atom } from 'recoil'
+import { atom } from 'jotai'
 
 export type Toast = {
   open: boolean,
@@ -9,7 +9,4 @@ export type Toast = {
   severity?: AlertColor
 }
 
-export const toastListState = atom<Toast[]>({
+export const toastListState = atom<Toast[]>([])
-  key: 'toastListState',
-  default: [],
-})

frontend/src/atoms/ui.ts

@@ -1,14 +1,10 @@
-import { atom, selector } from 'recoil'
+import { atom } from 'jotai'
 import { activeDownloadsState } from './downloads'
 
-export const loadingAtom = atom({
+export const loadingAtom = atom(true)
-  key: 'loadingAtom',
-  default: true
-})
 
-export const totalDownloadSpeedState = selector<number>({
+export const totalDownloadSpeedState = atom<number>((get) =>
-  key: 'totalDownloadSpeedState',
+  get(activeDownloadsState)
-  get: ({ get }) => get(activeDownloadsState)
     .map(d => d.progress.speed)
     .reduce((curr, next) => curr + next, 0)
-})
+)

frontend/src/components/CookiesTextField.tsx

@@ -5,12 +5,12 @@ import * as O from 'fp-ts/Option'
 import { matchW } from 'fp-ts/lib/TaskEither'
 import { pipe } from 'fp-ts/lib/function'
 import { useMemo } from 'react'
-import { useRecoilValue } from 'recoil'
 import { Subject, debounceTime, distinctUntilChanged } from 'rxjs'
 import { serverSideCookiesState, serverURL } from '../atoms/settings'
 import { useSubscription } from '../hooks/observable'
 import { useToast } from '../hooks/toast'
 import { ffetch } from '../lib/httpClient'
+import { useAtomValue } from 'jotai'
 
 const validateCookie = (cookie: string) => pipe(
   cookie,
@@ -75,8 +75,8 @@ const noopValidator = (s: string): E.Either<string, string[]> => pipe(
 const isCommentOrNewLine = (s: string) => s === '' || s.startsWith('\n') || s.startsWith('#')
 
 const CookiesTextField: React.FC = () => {
-  const serverAddr = useRecoilValue(serverURL)
+  const serverAddr = useAtomValue(serverURL)
-  const savedCookies = useRecoilValue(serverSideCookiesState)
+  const savedCookies = useAtomValue(serverSideCookiesState)
 
   const { pushMessage } = useToast()
 

frontend/src/components/DownloadCard.tsx

@@ -16,10 +16,10 @@ import {
   Typography
 } from '@mui/material'
 import { useCallback } from 'react'
-import { useRecoilValue } from 'recoil'
 import { serverURL } from '../atoms/settings'
 import { RPCResult } from '../types'
 import { base64URLEncode, ellipsis, formatSize, formatSpeedMiB, mapProcessStatus } from '../utils'
+import { useAtomValue } from 'jotai'
 
 type Props = {
   download: RPCResult
@@ -37,7 +37,7 @@ const Resolution: React.FC<{ resolution?: string }> = ({ resolution }) => {
 }
 
 const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
-  const serverAddr = useRecoilValue(serverURL)
+  const serverAddr = useAtomValue(serverURL)
 
   const isCompleted = useCallback(
     () => download.progress.percentage === '-1',

frontend/src/components/DownloadDialog.tsx

@@ -2,7 +2,6 @@ import { FileUpload } from '@mui/icons-material'
 import CloseIcon from '@mui/icons-material/Close'
 import {
   Autocomplete,
-  Backdrop,
   Box,
   Button,
   Checkbox,
@@ -21,6 +20,7 @@ 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 { useAtom, useAtomValue } from 'jotai'
 import {
   FC,
   Suspense,
@@ -30,17 +30,21 @@ import {
   useState,
   useTransition
 } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import {
-import { customArgsState, downloadTemplateState, filenameTemplateState, savedTemplatesState } from '../atoms/downloadTemplate'
+  customArgsState,
+  downloadTemplateState,
+  filenameTemplateState,
+  savedTemplatesState
+} from '../atoms/downloadTemplate'
 import { settingsState } from '../atoms/settings'
 import { availableDownloadPathsState, connectedState } from '../atoms/status'
 import FormatsGrid from '../components/FormatsGrid'
+import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
 import type { DLMetadata } from '../types'
 import { toFormatArgs } from '../utils'
 import ExtraDownloadOptions from './ExtraDownloadOptions'
-import { useToast } from '../hooks/toast'
 import LoadingBackdrop from './LoadingBackdrop'
 
 const Transition = forwardRef(function Transition(
@@ -59,11 +63,11 @@ type Props = {
 }
 
 const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
-  const settings = useRecoilValue(settingsState)
+  const settings = useAtomValue(settingsState)
-  const isConnected = useRecoilValue(connectedState)
+  const isConnected = useAtomValue(connectedState)
-  const availableDownloadPaths = useRecoilValue(availableDownloadPathsState)
+  const availableDownloadPaths = useAtomValue(availableDownloadPathsState)
-  const downloadTemplate = useRecoilValue(downloadTemplateState)
+  const downloadTemplate = useAtomValue(downloadTemplateState)
-  const savedTemplates = useRecoilValue(savedTemplatesState)
+  const savedTemplates = useAtomValue(savedTemplatesState)
 
   const [downloadFormats, setDownloadFormats] = useState<DLMetadata>()
   const [pickedVideoFormat, setPickedVideoFormat] = useState('')
@@ -71,11 +75,11 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
   const [pickedBestFormat, setPickedBestFormat] = useState('')
   const [isFormatsLoading, setIsFormatsLoading] = useState(false)
 
-  const [customArgs, setCustomArgs] = useRecoilState(customArgsState)
+  const [customArgs, setCustomArgs] = useAtom(customArgsState)
 
   const [downloadPath, setDownloadPath] = useState('')
 
-  const [filenameTemplate, setFilenameTemplate] = useRecoilState(
+  const [filenameTemplate, setFilenameTemplate] = useAtom(
     filenameTemplateState
   )
 

frontend/src/components/Downloads.tsx

@@ -1,5 +1,5 @@
+import { useAtom, useAtomValue } from 'jotai'
 import { useEffect } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
 import { loadingDownloadsState } from '../atoms/downloads'
 import { listViewState } from '../atoms/settings'
 import { loadingAtom } from '../atoms/ui'
@@ -7,10 +7,10 @@ import DownloadsGridView from './DownloadsGridView'
 import DownloadsTableView from './DownloadsTableView'
 
 const Downloads: React.FC = () => {
-  const tableView = useRecoilValue(listViewState)
+  const tableView = useAtomValue(listViewState)
-  const loadingDownloads = useRecoilValue(loadingDownloadsState)
+  const loadingDownloads = useAtomValue(loadingDownloadsState)
 
-  const [isLoading, setIsLoading] = useRecoilState(loadingAtom)
+  const [isLoading, setIsLoading] = useAtom(loadingAtom)
 
   useEffect(() => {
     if (loadingDownloads) {

frontend/src/components/DownloadsGridView.tsx

@@ -1,5 +1,5 @@
 import { Grid } from '@mui/material'
-import { useRecoilValue } from 'recoil'
+import { useAtomValue } from 'jotai'
 import { activeDownloadsState } from '../atoms/downloads'
 import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
@@ -8,7 +8,7 @@ import { ProcessStatus, RPCResult } from '../types'
 import DownloadCard from './DownloadCard'
 
 const DownloadsGridView: React.FC = () => {
-  const downloads = useRecoilValue(activeDownloadsState)
+  const downloads = useAtomValue(activeDownloadsState)
 
   const { i18n } = useI18n()
   const { client } = useRPC()

frontend/src/components/DownloadsTableView.tsx

@@ -20,12 +20,12 @@ import {
 } from "@mui/material"
 import { forwardRef } from 'react'
 import { TableComponents, TableVirtuoso } from 'react-virtuoso'
-import { useRecoilValue } from 'recoil'
 import { activeDownloadsState } from '../atoms/downloads'
 import { serverURL } from '../atoms/settings'
 import { useRPC } from '../hooks/useRPC'
 import { ProcessStatus, RPCResult } from '../types'
 import { base64URLEncode, formatSize, formatSpeedMiB } from "../utils"
+import { useAtomValue } from 'jotai'
 
 const columns = [
   {
@@ -119,8 +119,8 @@ function fixedHeaderContent() {
 }
 
 const DownloadsTableView: React.FC = () => {
-  const downloads = useRecoilValue(activeDownloadsState)
+  const downloads = useAtomValue(activeDownloadsState)
-  const serverAddr = useRecoilValue(serverURL)
+  const serverAddr = useAtomValue(serverURL)
   const { client } = useRPC()
 
   const viewFile = (path: string) => {

frontend/src/components/ExtraDownloadOptions.tsx

@@ -1,13 +1,13 @@
 import { Autocomplete, Box, TextField, Typography } from '@mui/material'
-import { useRecoilState, useRecoilValue } from 'recoil'
 import { customArgsState, savedTemplatesState } from '../atoms/downloadTemplate'
 import { useI18n } from '../hooks/useI18n'
+import { useAtom, useAtomValue } from 'jotai'
 
 const ExtraDownloadOptions: React.FC = () => {
   const { i18n } = useI18n()
 
-  const customTemplates = useRecoilValue(savedTemplatesState)
+  const customTemplates = useAtomValue(savedTemplatesState)
-  const [, setCustomArgs] = useRecoilState(customArgsState)
+  const [, setCustomArgs] = useAtom(customArgsState)
 
   return (
     <>

frontend/src/components/Footer.tsx

@@ -2,7 +2,6 @@ import DownloadIcon from '@mui/icons-material/Download'
 import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
 import { AppBar, CircularProgress, Divider, Toolbar } from '@mui/material'
 import { Suspense } from 'react'
-import { useRecoilValue } from 'recoil'
 import { settingsState } from '../atoms/settings'
 import { connectedState } from '../atoms/status'
 import { totalDownloadSpeedState } from '../atoms/ui'
@@ -10,11 +9,12 @@ import { useI18n } from '../hooks/useI18n'
 import { formatSpeedMiB } from '../utils'
 import FreeSpaceIndicator from './FreeSpaceIndicator'
 import VersionIndicator from './VersionIndicator'
+import { useAtomValue } from 'jotai'
 
 const Footer: React.FC = () => {
-  const settings = useRecoilValue(settingsState)
+  const settings = useAtomValue(settingsState)
-  const isConnected = useRecoilValue(connectedState)
+  const isConnected = useAtomValue(connectedState)
-  const totalDownloadSpeed = useRecoilValue(totalDownloadSpeedState)
+  const totalDownloadSpeed = useAtomValue(totalDownloadSpeedState)
 
   const mode = settings.theme
   const { i18n } = useI18n()

frontend/src/components/FreeSpaceIndicator.tsx

@@ -1,10 +1,10 @@
 import StorageIcon from '@mui/icons-material/Storage'
-import { useRecoilValue } from 'recoil'
 import { freeSpaceBytesState } from '../atoms/status'
 import { formatSize } from '../utils'
+import { useAtomValue } from 'jotai'
 
 const FreeSpaceIndicator = () => {
-  const freeSpace = useRecoilValue(freeSpaceBytesState)
+  const freeSpace = useAtomValue(freeSpaceBytesState)
 
   return (
     <div style={{

frontend/src/components/HomeActions.tsx

@@ -1,5 +1,5 @@
+import { useSetAtom } from 'jotai'
 import { Suspense, useState } from 'react'
-import { useRecoilState } from 'recoil'
 import { loadingAtom } from '../atoms/ui'
 import { useToast } from '../hooks/toast'
 import DownloadDialog from './DownloadDialog'
@@ -7,7 +7,7 @@ import HomeSpeedDial from './HomeSpeedDial'
 import TemplatesEditor from './TemplatesEditor'
 
 const HomeActions: React.FC = () => {
-  const [, setIsLoading] = useRecoilState(loadingAtom)
+  const setIsLoading = useSetAtom(loadingAtom)
 
   const [openDownload, setOpenDownload] = useState(false)
   const [openEditor, setOpenEditor] = useState(false)

frontend/src/components/HomeSpeedDial.tsx

@@ -9,7 +9,7 @@ import {
   SpeedDialAction,
   SpeedDialIcon
 } from '@mui/material'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useAtom, useAtomValue } from 'jotai'
 import { listViewState, serverURL } from '../atoms/settings'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
@@ -20,8 +20,8 @@ type Props = {
 }
 
 const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
-  const serverAddr = useRecoilValue(serverURL)
+  const serverAddr = useAtomValue(serverURL)
-  const [listView, setListView] = useRecoilState(listViewState)
+  const [listView, setListView] = useAtom(listViewState)
 
   const { i18n } = useI18n()
   const { client } = useRPC()

frontend/src/components/LogTerminal.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { useRecoilValue } from 'recoil'
 import { serverURL } from '../atoms/settings'
 import { useI18n } from '../hooks/useI18n'
+import { useAtomValue } from 'jotai'
 
 const token = localStorage.getItem('token')
 
@@ -11,7 +11,7 @@ const LogTerminal: React.FC = () => {
 
   const boxRef = useRef<HTMLDivElement>(null)
 
-  const serverAddr = useRecoilValue(serverURL)
+  const serverAddr = useAtomValue(serverURL)
 
   const { i18n } = useI18n()
 

frontend/src/components/SocketSubscriber.tsx

@@ -1,7 +1,6 @@
 import * as O from 'fp-ts/Option'
 import { useEffect, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useRecoilState, useRecoilValue } from 'recoil'
 import { take, timer } from 'rxjs'
 import { downloadsState } from '../atoms/downloads'
 import { rpcPollingTimeState } from '../atoms/rpc'
@@ -12,15 +11,16 @@ import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
 import { datetimeCompareFunc, isRPCResponse } from '../utils'
+import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 
 interface Props extends React.HTMLAttributes<HTMLBaseElement> { }
 
 const SocketSubscriber: React.FC<Props> = () => {
-  const [connected, setIsConnected] = useRecoilState(connectedState)
+  const [connected, setIsConnected] = useAtom(connectedState)
-  const [, setDownloads] = useRecoilState(downloadsState)
+  const setDownloads = useSetAtom(downloadsState)
 
-  const serverAddressAndPort = useRecoilValue(serverAddressAndPortState)
+  const serverAddressAndPort = useAtomValue(serverAddressAndPortState)
-  const rpcPollingTime = useRecoilValue(rpcPollingTimeState)
+  const rpcPollingTime = useAtomValue(rpcPollingTimeState)
 
   const { i18n } = useI18n()
   const { client } = useRPC()

frontend/src/components/Splash.tsx

@@ -1,8 +1,8 @@
 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'
+import { useAtomValue } from 'jotai'
 
 const FlexContainer = styled(Container)({
   display: 'flex',
@@ -23,7 +23,7 @@ const Title = styled(Typography)({
 
 export default function Splash() {
   const { i18n } = useI18n()
-  const activeDownloads = useRecoilValue(activeDownloadsState)
+  const activeDownloads = useAtomValue(activeDownloadsState)
 
   if (activeDownloads.length !== 0) {
     return null

frontend/src/components/TemplateTextField.tsx

@@ -0,0 +1,67 @@
+import { FC, useState } from 'react'
+
+import DeleteIcon from '@mui/icons-material/Delete'
+import EditIcon from '@mui/icons-material/Edit'
+import {
+  Button,
+  Grid,
+  TextField
+} from '@mui/material'
+import { useI18n } from '../hooks/useI18n'
+import { CustomTemplate } from '../types'
+
+interface Props {
+  template: CustomTemplate
+  onChange: (template: CustomTemplate) => void
+  onDelete: (id: string) => void
+}
+
+const TemplateTextField: FC<Props> = ({ template, onChange, onDelete }) => {
+  const { i18n } = useI18n()
+
+  const [editedTemplate, setEditedTemplate] = useState(template)
+
+  return (
+    <Grid
+      container
+      spacing={2}
+      justifyContent="center"
+      alignItems="center"
+      key={template.id}
+      sx={{ mt: 1 }}
+    >
+      <Grid item xs={3}>
+        <TextField
+          fullWidth
+          label={i18n.t('templatesEditorNameLabel')}
+          defaultValue={template.name}
+          onChange={(e) => setEditedTemplate({ ...editedTemplate, name: e.target.value })}
+        />
+      </Grid>
+      <Grid item xs={9}>
+        <TextField
+          fullWidth
+          label={i18n.t('templatesEditorContentLabel')}
+          defaultValue={template.content}
+          onChange={(e) => setEditedTemplate({ ...editedTemplate, content: e.target.value })}
+          InputProps={{
+            endAdornment: <div style={{ display: 'flex', gap: 2 }}>
+              <Button
+                variant='contained'
+                onClick={() => onChange(editedTemplate)}>
+                <EditIcon />
+              </Button>
+              <Button
+                variant='contained'
+                onClick={() => onDelete(editedTemplate.id)}>
+                <DeleteIcon />
+              </Button>
+            </div>
+          }}
+        />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default TemplateTextField

frontend/src/components/TemplatesEditor.tsx

@@ -1,6 +1,7 @@
 import AddIcon from '@mui/icons-material/Add'
 import CloseIcon from '@mui/icons-material/Close'
 import DeleteIcon from '@mui/icons-material/Delete'
+import EditIcon from '@mui/icons-material/Edit'
 import {
   Alert,
   AppBar,
@@ -20,12 +21,13 @@ import { TransitionProps } from '@mui/material/transitions'
 import { matchW } from 'fp-ts/lib/Either'
 import { pipe } from 'fp-ts/lib/function'
 import { forwardRef, useEffect, useState, useTransition } from 'react'
-import { useRecoilValue } from 'recoil'
 import { serverURL } from '../atoms/settings'
 import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { ffetch } from '../lib/httpClient'
 import { CustomTemplate } from '../types'
+import { useAtomValue } from 'jotai'
+import TemplateTextField from './TemplateTextField'
 
 const Transition = forwardRef(function Transition(
   props: TransitionProps & {
@@ -45,7 +47,7 @@ const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
   const [templateName, setTemplateName] = useState('')
   const [templateContent, setTemplateContent] = useState('')
 
-  const serverAddr = useRecoilValue(serverURL)
+  const serverAddr = useAtomValue(serverURL)
   const [isPending, startTransition] = useTransition()
 
   const [templates, setTemplates] = useState<CustomTemplate[]>([])
@@ -55,11 +57,11 @@ const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
 
   useEffect(() => {
     if (open) {
-      getTemplates()
+      fetchTemplates()
     }
   }, [open])
 
-  const getTemplates = async () => {
+  const fetchTemplates = async () => {
     const task = ffetch<CustomTemplate[]>(`${serverAddr}/api/v1/template/all`)
     const either = await task()
 
@@ -89,7 +91,7 @@ const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
         (l) => pushMessage(l, 'warning'),
         () => {
           pushMessage('Added template')
-          getTemplates()
+          fetchTemplates()
           setTemplateName('')
           setTemplateContent('')
         }
@@ -97,6 +99,26 @@ const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
     )
   }
 
+  const updateTemplate = async (template: CustomTemplate) => {
+    const task = ffetch<CustomTemplate>(`${serverAddr}/api/v1/template`, {
+      method: 'PATCH',
+      body: JSON.stringify(template)
+    })
+
+    const either = await task()
+
+    pipe(
+      either,
+      matchW(
+        (l) => pushMessage(l, 'warning'),
+        (r) => {
+          pushMessage(`Updated template ${r.name}`)
+          fetchTemplates()
+        }
+      )
+    )
+  }
+
   const deleteTemplate = async (id: string) => {
     const task = ffetch<unknown>(`${serverAddr}/api/v1/template/${id}`, {
       method: 'DELETE',
@@ -110,7 +132,7 @@ const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
         (l) => pushMessage(l, 'warning'),
         () => {
           pushMessage('Deleted template')
-          getTemplates()
+          fetchTemplates()
         }
       )
     )
@@ -188,38 +210,12 @@ const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
                 </Grid>
               </Grid>
               {templates.map(template => (
-                <Grid
+                <TemplateTextField
-                  container
-                  spacing={2}
-                  justifyContent="center"
-                  alignItems="center"
                   key={template.id}
-                  sx={{ mt: 1 }}
+                  template={template}
-                >
+                  onChange={updateTemplate}
-                  <Grid item xs={3}>
+                  onDelete={deleteTemplate}
-                    <TextField
-                      fullWidth
-                      label={i18n.t('templatesEditorNameLabel')}
-                      value={template.name}
                 />
-                  </Grid>
-                  <Grid item xs={9}>
-                    <TextField
-                      fullWidth
-                      label={i18n.t('templatesEditorContentLabel')}
-                      value={template.content}
-                      InputProps={{
-                        endAdornment: <Button
-                          variant='contained'
-                          onClick={() => {
-                            startTransition(() => { deleteTemplate(template.id) })
-                          }}>
-                          <DeleteIcon />
-                        </Button>
-                      }}
-                    />
-                  </Grid>
-                </Grid>
               ))}
             </Paper>
           </Grid>

frontend/src/components/ThemeToggler.tsx

@@ -2,12 +2,12 @@ import Brightness4 from '@mui/icons-material/Brightness4'
 import Brightness5 from '@mui/icons-material/Brightness5'
 import BrightnessAuto from '@mui/icons-material/BrightnessAuto'
 import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
-import { useRecoilState } from 'recoil'
 import { Theme, themeState } from '../atoms/settings'
 import { useI18n } from '../hooks/useI18n'
+import { useAtom } from 'jotai'
 
 const ThemeToggler: React.FC = () => {
-  const [theme, setTheme] = useRecoilState(themeState)
+  const [theme, setTheme] = useAtom(themeState)
 
   const actions: Record<Theme, React.ReactNode> = {
     system: <BrightnessAuto />,

frontend/src/components/UpdateBinaryButton.tsx

@@ -0,0 +1,33 @@
+import { Button, CircularProgress } from '@mui/material'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+import { useState } from 'react'
+import { useToast } from '../hooks/toast'
+
+const UpdateBinaryButton: React.FC = () => {
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+  const { pushMessage } = useToast()
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  const updateBinary = () => {
+    setIsLoading(true)
+    client
+      .updateExecutable()
+      .then(() => pushMessage(i18n.t('toastUpdated'), 'success'))
+      .then(() => setIsLoading(false))
+  }
+
+  return (
+    <Button
+      variant="contained"
+      endIcon={isLoading ? <CircularProgress size={16} color='secondary' /> : <></>}
+      onClick={updateBinary}
+    >
+      {i18n.t('updateBinButton')}
+    </Button>
+  )
+}
+
+export default UpdateBinaryButton

frontend/src/components/VersionIndicator.tsx

@@ -1,9 +1,9 @@
 import { Chip } from '@mui/material'
-import { useRecoilValue } from 'recoil'
 import { ytdlpRpcVersionState } from '../atoms/status'
+import { useAtomValue } from 'jotai'
 
 const VersionIndicator: React.FC = () => {
-  const version = useRecoilValue(ytdlpRpcVersionState)
+  const version = useAtomValue(ytdlpRpcVersionState)
 
   return (
     <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>

frontend/src/hooks/toast.ts

@@ -1,9 +1,9 @@
 import { AlertColor } from '@mui/material'
-import { useRecoilState } from 'recoil'
 import { toastListState } from '../atoms/toast'
+import { useSetAtom } from 'jotai'
 
 export const useToast = () => {
-  const [, setToasts] = useRecoilState(toastListState)
+  const setToasts = useSetAtom(toastListState)
 
   return {
     pushMessage: (message: string, severity?: AlertColor) => {

frontend/src/hooks/useI18n.ts

@@ -1,10 +1,11 @@
-import { useRecoilValue } from 'recoil'
+import { useAtomValue } from 'jotai'
 import { i18nBuilderState } from '../atoms/i18n'
 
 export const useI18n = () => {
-  const instance = useRecoilValue(i18nBuilderState)
+  const instance = useAtomValue(i18nBuilderState)
 
   return {
-    i18n: instance
+    i18n: instance,
+    t: instance.t
   }
 }

frontend/src/hooks/useRPC.ts

@@ -1,8 +1,8 @@
-import { useRecoilValue } from 'recoil'
+import { useAtomValue } from 'jotai'
 import { rpcClientState } from '../atoms/rpc'
 
 export const useRPC = () => {
-  const client = useRecoilValue(rpcClientState)
+  const client = useAtomValue(rpcClientState)
 
   return {
     client

frontend/src/lib/rpcClient.ts

@@ -191,4 +191,11 @@ export class RPCClient {
       params: []
     })
   }
+
+  public updateExecutable() {
+    return this.sendHTTP({
+      method: 'Service.UpdateExecutable',
+      params: []
+    })
+  }
 }

frontend/src/providers/ToasterProvider.tsx

@@ -1,10 +1,10 @@
 import { Alert, Snackbar } from "@mui/material"
-import { useRecoilState } from 'recoil'
 import { Toast, toastListState } from '../atoms/toast'
 import { useEffect } from 'react'
+import { useAtom } from 'jotai'
 
 const Toaster: React.FC = () => {
-  const [toasts, setToasts] = useRecoilState(toastListState)
+  const [toasts, setToasts] = useAtom(toastListState)
 
   const deletePredicate = (t: Toast) => (Date.now() - t.createdAt) < 2000
 

frontend/src/utils.ts

@@ -1,4 +1,6 @@
+import { blue, red } from '@mui/material/colors'
 import { pipe } from 'fp-ts/lib/function'
+import { Accent } from './atoms/settings'
 import type { RPCResponse } from "./types"
 import { ProcessStatus } from './types'
 
@@ -80,3 +82,14 @@ export const base64URLEncode = (s: string) => pipe(
   btoa,
   encodeURIComponent
 )
+
+export const getAccentValue = (accent: Accent) => {
+  switch (accent) {
+    case 'default':
+      return blue[700]
+    case 'red':
+      return red[600]
+    default:
+      return blue[700]
+  }
+}

frontend/src/views/Archive.tsx

@@ -33,7 +33,6 @@ import { matchW } from 'fp-ts/lib/TaskEither'
 import { pipe } from 'fp-ts/lib/function'
 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'
@@ -42,13 +41,14 @@ import { useI18n } from '../hooks/useI18n'
 import { ffetch } from '../lib/httpClient'
 import { DirectoryEntry } from '../types'
 import { base64URLEncode, formatSize } from '../utils'
+import { useAtomValue } from 'jotai'
 
 export default function Downloaded() {
   const [menuPos, setMenuPos] = useState({ x: 0, y: 0 })
   const [showMenu, setShowMenu] = useState(false)
   const [currentFile, setCurrentFile] = useState<DirectoryEntry>()
 
-  const serverAddr = useRecoilValue(serverURL)
+  const serverAddr = useAtomValue(serverURL)
   const navigate = useNavigate()
 
   const { i18n } = useI18n()

frontend/src/views/Home.tsx

@@ -1,15 +1,15 @@
 import {
   Container
 } from '@mui/material'
-import { useRecoilValue } from 'recoil'
 import { loadingAtom } from '../atoms/ui'
 import Downloads from '../components/Downloads'
 import HomeActions from '../components/HomeActions'
 import LoadingBackdrop from '../components/LoadingBackdrop'
 import Splash from '../components/Splash'
+import { useAtomValue } from 'jotai'
 
 export default function Home() {
-  const isLoading = useRecoilValue(loadingAtom)
+  const isLoading = useAtomValue(loadingAtom)
 
   return (
     <Container maxWidth="xl" sx={{ mt: 2, mb: 8 }}>

frontend/src/views/Login.tsx

@@ -16,10 +16,10 @@ import { matchW } from 'fp-ts/lib/TaskEither'
 import { pipe } from 'fp-ts/lib/function'
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useRecoilValue } from 'recoil'
 import { serverURL } from '../atoms/settings'
 import { useToast } from '../hooks/toast'
 import { ffetch } from '../lib/httpClient'
+import { useAtomValue } from 'jotai'
 
 const LoginContainer = styled(Container)({
   display: 'flex',
@@ -43,7 +43,7 @@ export default function Login() {
 
   const [formHasError, setFormHasError] = useState(false)
 
-  const url = useRecoilValue(serverURL)
+  const url = useAtomValue(serverURL)
 
   const navigate = useNavigate()
 

frontend/src/views/Settings.tsx

@@ -1,5 +1,4 @@
 import {
-  Button,
   Checkbox,
   Container,
   FormControl,
@@ -18,8 +17,8 @@ import {
   Typography,
   capitalize
 } from '@mui/material'
+import { useAtom } from 'jotai'
 import { Suspense, useEffect, useMemo, useState } from 'react'
-import { useRecoilState } from 'recoil'
 import {
   Subject,
   debounceTime,
@@ -29,8 +28,11 @@ import {
 } from 'rxjs'
 import { rpcPollingTimeState } from '../atoms/rpc'
 import {
+  Accent,
   Language,
   Theme,
+  accentState,
+  accents,
   appTitleState,
   enableCustomArgsState,
   fileRenamingState,
@@ -45,34 +47,34 @@ import {
   themeState
 } from '../atoms/settings'
 import CookiesTextField from '../components/CookiesTextField'
+import UpdateBinaryButton from '../components/UpdateBinaryButton'
 import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
-import { useRPC } from '../hooks/useRPC'
 import { validateDomain, validateIP } from '../utils'
 
 // NEED ABSOLUTELY TO BE SPLIT IN MULTIPLE COMPONENTS
 export default function Settings() {
-  const [reverseProxy, setReverseProxy] = useRecoilState(servedFromReverseProxyState)
+  const [reverseProxy, setReverseProxy] = useAtom(servedFromReverseProxyState)
-  const [baseURL, setBaseURL] = useRecoilState(servedFromReverseProxySubDirState)
+  const [baseURL, setBaseURL] = useAtom(servedFromReverseProxySubDirState)
 
-  const [formatSelection, setFormatSelection] = useRecoilState(formatSelectionState)
+  const [formatSelection, setFormatSelection] = useAtom(formatSelectionState)
-  const [pathOverriding, setPathOverriding] = useRecoilState(pathOverridingState)
+  const [pathOverriding, setPathOverriding] = useAtom(pathOverridingState)
-  const [fileRenaming, setFileRenaming] = useRecoilState(fileRenamingState)
+  const [fileRenaming, setFileRenaming] = useAtom(fileRenamingState)
-  const [enableArgs, setEnableArgs] = useRecoilState(enableCustomArgsState)
+  const [enableArgs, setEnableArgs] = useAtom(enableCustomArgsState)
 
-  const [serverAddr, setServerAddr] = useRecoilState(serverAddressState)
+  const [serverAddr, setServerAddr] = useAtom(serverAddressState)
-  const [serverPort, setServerPort] = useRecoilState(serverPortState)
+  const [serverPort, setServerPort] = useAtom(serverPortState)
 
-  const [pollingTime, setPollingTime] = useRecoilState(rpcPollingTimeState)
+  const [pollingTime, setPollingTime] = useAtom(rpcPollingTimeState)
-  const [language, setLanguage] = useRecoilState(languageState)
+  const [language, setLanguage] = useAtom(languageState)
-  const [appTitle, setApptitle] = useRecoilState(appTitleState)
+  const [appTitle, setApptitle] = useAtom(appTitleState)
+  const [accent, setAccent] = useAtom(accentState)
 
-  const [theme, setTheme] = useRecoilState(themeState)
+  const [theme, setTheme] = useAtom(themeState)
 
   const [invalidIP, setInvalidIP] = useState(false)
 
   const { i18n } = useI18n()
-  const { client } = useRPC()
 
   const { pushMessage } = useToast()
 
@@ -140,13 +142,6 @@ export default function Settings() {
     setTheme(event.target.value as Theme)
   }
 
-  /**
-   * Updates yt-dlp binary via RPC
-   */
-  const updateBinary = () => {
-    client.updateExecutable().then(() => pushMessage(i18n.t('toastUpdated'), 'success'))
-  }
-
   return (
     <Container maxWidth="xl" sx={{ mt: 4, mb: 8 }}>
       <Paper
@@ -257,7 +252,7 @@ export default function Settings() {
           Appearance
         </Typography>
         <Grid container spacing={2}>
-          <Grid item xs={12} md={6}>
+          <Grid item xs={12}>
             <FormControl fullWidth>
               <InputLabel>{i18n.t('languageSelect')}</InputLabel>
               <Select
@@ -287,6 +282,22 @@ export default function Settings() {
               </Select>
             </FormControl>
           </Grid>
+          <Grid item xs={12} md={6}>
+            <FormControl fullWidth>
+              <InputLabel>{i18n.t('accentSelect')}</InputLabel>
+              <Select
+                defaultValue={accent}
+                label={i18n.t('accentSelect')}
+                onChange={(e) => setAccent(e.target.value as Accent)}
+              >
+                {accents.map((accent) => (
+                  <MenuItem key={accent} value={accent}>
+                    {capitalize(accent)}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
         </Grid>
         <Typography variant="h6" color="primary" sx={{ mt: 2, mb: 0.5 }}>
           General download settings
@@ -352,14 +363,8 @@ export default function Settings() {
           </Suspense>
         </Grid>
         <Grid>
-          <Stack direction="row">
+          <Stack direction="row" sx={{ pt: 2 }}>
-            <Button
+            <UpdateBinaryButton />
-              sx={{ mr: 1, mt: 3 }}
-              variant="contained"
-              onClick={() => updateBinary()}
-            >
-              {i18n.t('updateBinButton')}
-            </Button>
           </Stack>
         </Grid>
       </Paper>

frontend/vite.config.ts

@@ -1,12 +1,10 @@
 import react from '@vitejs/plugin-react-swc'
-import million from 'million/compiler'
 import ViteYaml from '@modyfi/vite-plugin-yaml'
 import { defineConfig } from 'vite'
 
 export default defineConfig(() => {
   return {
     plugins: [
-      million.vite({ auto: true }),
       react(),
       ViteYaml(),
     ],

main.go

@@ -23,6 +23,7 @@ var (
 	downloaderPath    string
 	sessionFilePath   string
 	localDatabasePath string
+	frontendPath      string
 
 	requireAuth bool
 	username    string
@@ -52,6 +53,7 @@ func init() {
 	flag.StringVar(&downloaderPath, "driver", "yt-dlp", "yt-dlp executable path")
 	flag.StringVar(&sessionFilePath, "session", ".", "session file path")
 	flag.StringVar(&localDatabasePath, "db", "local.db", "local database path")
+	flag.StringVar(&frontendPath, "web", "", "frontend web resources path")
 
 	flag.BoolVar(&enableFileLogging, "fl", false, "enable outputting logs to a file")
 	flag.StringVar(&logFile, "lf", "yt-dlp-webui.log", "set log file location")
@@ -69,6 +71,10 @@ func main() {
 		log.Fatalln(err)
 	}
 
+	if frontendPath != "" {
+		frontend = os.DirFS(frontendPath)
+	}
+
 	c := config.Instance()
 
 	{

server/config/config.go

@@ -22,13 +22,13 @@ type Config struct {
 	QueueSize          int    `yaml:"queue_size"`
 	LocalDatabasePath  string `yaml:"local_database_path"`
 	SessionFilePath    string `yaml:"session_file_path"`
-	path              string
+	path               string // private
-
 	UseOpenId          bool   `yaml:"use_openid"`
 	OpenIdProviderURL  string `yaml:"openid_provider_url"`
 	OpenIdClientId     string `yaml:"openid_client_id"`
 	OpenIdClientSecret string `yaml:"openid_client_secret"`
 	OpenIdRedirectURL  string `yaml:"openid_redirect_url"`
+	FrontendPath       string `yaml:"frontend_path"`
 }
 
 var (

server/rest/container.go

@@ -34,6 +34,7 @@ func ApplyRouter(args *ContainerArgs) func(chi.Router) {
 		r.Post("/cookies", h.SetCookies())
 		r.Delete("/cookies", h.DeleteCookies())
 		r.Post("/template", h.AddTemplate())
+		r.Patch("/template", h.UpdateTemplate())
 		r.Get("/template/all", h.GetTemplates())
 		r.Delete("/template/{id}", h.DeleteTemplate())
 	}

server/rest/handlers.go

@@ -34,9 +34,9 @@ func (h *Handler) Exec() http.HandlerFunc {
 			return
 		}
 
-		err = json.NewEncoder(w).Encode(id)
+		if err := json.NewEncoder(w).Encode(id); err != nil {
-		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
 		}
 	}
 }
@@ -61,6 +61,7 @@ func (h *Handler) ExecPlaylist() http.HandlerFunc {
 
 		if err := json.NewEncoder(w).Encode("ok"); err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
 		}
 	}
 }
@@ -75,13 +76,14 @@ func (h *Handler) ExecLivestream() http.HandlerFunc {
 
 		if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
 		}
 
 		h.service.ExecLivestream(req)
 
-		err := json.NewEncoder(w).Encode("ok")
+		if err := json.NewEncoder(w).Encode("ok"); err != nil {
-		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
 		}
 	}
 }
@@ -98,9 +100,9 @@ func (h *Handler) Running() http.HandlerFunc {
 			return
 		}
 
-		err = json.NewEncoder(w).Encode(res)
+		if err := json.NewEncoder(w).Encode(res); err != nil {
-		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
 		}
 	}
 }
@@ -134,21 +136,19 @@ func (h *Handler) SetCookies() http.HandlerFunc {
 
 		req := new(internal.SetCookiesRequest)
 
-		err := json.NewDecoder(r.Body).Decode(req)
+		if err := json.NewDecoder(r.Body).Decode(req); err != nil {
-		if err != nil {
 			http.Error(w, err.Error(), http.StatusBadRequest)
 			return
 		}
 
-		err = h.service.SetCookies(r.Context(), req.Cookies)
+		if err := h.service.SetCookies(r.Context(), req.Cookies); err != nil {
-		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
 
-		err = json.NewEncoder(w).Encode("ok")
+		if err := json.NewEncoder(w).Encode("ok"); err != nil {
-		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
 		}
 	}
 }
@@ -157,15 +157,14 @@ func (h *Handler) DeleteCookies() http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		w.Header().Set("Content-Type", "application/json")
 
-		err := h.service.SetCookies(r.Context(), "")
+		if err := h.service.SetCookies(r.Context(), ""); err != nil {
-		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
 
-		err = json.NewEncoder(w).Encode("ok")
+		if err := json.NewEncoder(w).Encode("ok"); err != nil {
-		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
 		}
 	}
 }
@@ -178,8 +177,7 @@ func (h *Handler) AddTemplate() http.HandlerFunc {
 
 		req := new(internal.CustomTemplate)
 
-		err := json.NewDecoder(r.Body).Decode(req)
+		if err := json.NewDecoder(r.Body).Decode(req); err != nil {
-		if err != nil {
 			http.Error(w, err.Error(), http.StatusBadRequest)
 			return
 		}
@@ -189,15 +187,14 @@ func (h *Handler) AddTemplate() http.HandlerFunc {
 			return
 		}
 
-		err = h.service.SaveTemplate(r.Context(), req)
+		if err := h.service.SaveTemplate(r.Context(), req); err != nil {
-		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
 
-		err = json.NewEncoder(w).Encode("ok")
+		if err := json.NewEncoder(w).Encode("ok"); err != nil {
-		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
 		}
 	}
 }
@@ -221,6 +218,33 @@ func (h *Handler) GetTemplates() http.HandlerFunc {
 	}
 }
 
+func (h *Handler) UpdateTemplate() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		defer r.Body.Close()
+
+		w.Header().Set("Content-Type", "application/json")
+
+		req := &internal.CustomTemplate{}
+
+		if err := json.NewDecoder(r.Body).Decode(req); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		res, err := h.service.UpdateTemplate(r.Context(), req)
+
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		if err := json.NewEncoder(w).Encode(res); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+	}
+}
+
 func (h *Handler) DeleteTemplate() http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		defer r.Body.Close()
@@ -229,15 +253,14 @@ func (h *Handler) DeleteTemplate() http.HandlerFunc {
 
 		id := chi.URLParam(r, "id")
 
-		err := h.service.DeleteTemplate(r.Context(), id)
+		if err := h.service.DeleteTemplate(r.Context(), id); err != nil {
-		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
 
-		err = json.NewEncoder(w).Encode("ok")
+		if err := json.NewEncoder(w).Encode("ok"); err != nil {
-		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
 		}
 	}
 }
@@ -266,6 +289,7 @@ func (h *Handler) GetVersion() http.HandlerFunc {
 
 		if err := json.NewEncoder(w).Encode(res); err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
 		}
 	}
 }

server/rest/service.go

@@ -133,6 +133,22 @@ func (s *Service) GetTemplates(ctx context.Context) (*[]internal.CustomTemplate,
 	return &templates, nil
 }
 
+func (s *Service) UpdateTemplate(ctx context.Context, t *internal.CustomTemplate) (*internal.CustomTemplate, error) {
+	conn, err := s.db.Conn(ctx)
+	if err != nil {
+		return nil, err
+	}
+
+	defer conn.Close()
+
+	_, err = conn.ExecContext(ctx, "UPDATE templates SET name = ?, content = ? WHERE id = ?", t.Name, t.Content, t.Id)
+	if err != nil {
+		return nil, err
+	}
+
+	return t, nil
+}
+
 func (s *Service) DeleteTemplate(ctx context.Context, id string) error {
 	conn, err := s.db.Conn(ctx)
 	if err != nil {
@@ -148,7 +164,7 @@ func (s *Service) DeleteTemplate(ctx context.Context, id string) error {
 
 func (s *Service) GetVersion(ctx context.Context) (string, string, error) {
 	//TODO: load from realease properties file, or anything else outside code
-	const CURRENT_RPC_VERSION = "3.2.1"
+	const CURRENT_RPC_VERSION = "3.2.3"
 
 	result := make(chan string, 1)