Added favicon

Closes #139
code refactoring, added router, moved download api path
2024-03-03 20:32:20 +01:00 · 2024-02-23 10:55:33 +01:00 · 2024-02-12 12:02:23 +01:00 · 2024-02-10 09:56:50 +01:00 · 2024-02-09 18:20:22 +01:00 · 2024-02-09 11:08:47 +01:00
238 changed files with 11603 additions and 11923 deletions
--- a/.deploystack/docker-run.txt
+++ b/.deploystack/docker-run.txt
@@ -1 +0,0 @@
 docker run -d -p 3033:3033 -v /downloads:/downloads marcobaobao/yt-dlp-webui
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,27 +0,0 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/go
 {
 	"name": "Go",
 	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
 	"image": "mcr.microsoft.com/devcontainers/go:1-1.23-bookworm",
 	"features": {
 		"ghcr.io/devcontainers-extra/features/pnpm:2": {},
 		"ghcr.io/devcontainers-extra/features/ffmpeg-apt-get:1": {},
 		"ghcr.io/devcontainers-extra/features/yt-dlp:2": {}
 	}
 	// Features to add to the dev container. More info: https://containers.dev/features.
 	// "features": {},
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
 	// "forwardPorts": [],
 	// Use 'postCreateCommand' to run commands after the container is created.
 	// "postCreateCommand": "go version"
 	// Configure tool-specific properties.
 	// "customizations": {},
 	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
 	// "remoteUser": "root"
 }
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,9 +1,6 @@
 .pre-commit-config.yaml
 .direnv/
 result/
 result
 dist
-.pnpm-store/
+package-lock.json
 pnpm-lock.yaml
 .pnpm-debug.log
 node_modules
 .env
@@ -18,14 +15,4 @@ yt-dlp-webui
 session.dat
 config.yml
 cookies.txt
-__debug*
+examples/
 ui/
 .idea
 .idea/
 frontend/.pnp.cjs
 frontend/.pnp.loader.mjs
 frontend/.yarn/install-state.gz
 .db.lock
 livestreams.dat
 .vite/deps
 archive.txt
--- a/.envrc
+++ b/.envrc
@@ -1 +0,0 @@
 use flake
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,2 +0,0 @@
 *.tsx linguist-detectable=false
 *.html linguist-detectable=false
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -10,4 +10,4 @@ liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
 lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-custom: ['https://paypal.me/marcofw']
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,30 +0,0 @@
 ---
 name: Bug report
 about: Create a report to help improve the project
 title: ''
 labels: ''
 assignees: ''
 ---
 **Version running**
 Provide the docker label or release tag you're running.
 **Describe the bug**
 A clear and concise description of what the bug is.
 **To Reproduce**
 Steps to reproduce the behavior:
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 **Expected behavior**
 A clear and concise description of what you expected to happen.
 **Screenshots**
 If applicable, add screenshots to help explain your problem.
 **Additional context**
 Add any other context about the problem here.
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -25,7 +25,7 @@ jobs:
        # v3.1.2
        uses: sigstore/cosign-installer@11086d25041f77fe8fe7b9ea4e48e3b9192b8f19
        with:
-          cosign-release: 'v1.13.6'
+          cosign-release: 'v1.13.1'
      - name: Set up QEMU for ARM emulation
        # v2.2.0
--- a/.gitignore
+++ b/.gitignore
@@ -1,9 +1,4 @@
 .pre-commit-config.yaml
 .direnv/
 result/
 result
 dist
 .pnpm-store/
 .pnpm-debug.log
 node_modules
 .env
@@ -19,13 +14,4 @@ session.dat
 config.yml
 cookies.txt
 __debug*
-ui/
+app/
 .idea
 .idea/
 frontend/.pnp.cjs
 frontend/.pnp.loader.mjs
 frontend/.yarn/install-state.gz
 .db.lock
 livestreams.dat
 .vite/deps
 archive.txt
--- a/32
+++ b/32
@@ -1,39 +1,27 @@
-# Node (pnpm) ------------------------------------------------------------------
+FROM golang:alpine AS build
-FROM node:22-slim AS ui
+
-ENV PNPM_HOME="/pnpm"
+RUN apk update && \
-ENV PATH="$PNPM_HOME:$PATH"
+    apk add nodejs npm
-RUN corepack prepare pnpm@10.0.0 --activate && corepack enable
+
 COPY . /usr/src/yt-dlp-webui
 WORKDIR /usr/src/yt-dlp-webui/frontend
-RUN rm -rf node_modules
+RUN npm install
-
+RUN npm run build
 RUN pnpm install
 RUN pnpm run build
 # -----------------------------------------------------------------------------
 # Go --------------------------------------------------------------------------
 FROM golang AS build
 WORKDIR /usr/src/yt-dlp-webui
 COPY . .
 COPY --from=ui /usr/src/yt-dlp-webui/frontend /usr/src/yt-dlp-webui/frontend
 RUN CGO_ENABLED=0 GOOS=linux go build -o yt-dlp-webui
 # -----------------------------------------------------------------------------
 # dependencies ----------------------------------------------------------------
 FROM alpine:edge
 RUN apk update && \
 apk add ffmpeg yt-dlp ca-certificates curl wget psmisc
 VOLUME /downloads /config
 WORKDIR /app
 RUN apk update && \
    apk add psmisc ffmpeg yt-dlp --no-cache
 COPY --from=build /usr/src/yt-dlp-webui/yt-dlp-webui /app
 ENV JWT_SECRET=secret
--- a/674
+++ b/674
@@ -1,674 +0,0 @@
                    GNU GENERAL PUBLIC LICENSE
                       Version 3, 29 June 2007
 Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
 Everyone is permitted to copy and distribute verbatim copies
 of this license document, but changing it is not allowed.
                            Preamble
  The GNU General Public License is a free, copyleft license for
 software and other kinds of works.
  The licenses for most software and other practical works are designed
 to take away your freedom to share and change the works.  By contrast,
 the GNU General Public License is intended to guarantee your freedom to
 share and change all versions of a program--to make sure it remains free
 software for all its users.  We, the Free Software Foundation, use the
 GNU General Public License for most of our software; it applies also to
 any other work released this way by its authors.  You can apply it to
 your programs, too.
  When we speak of free software, we are referring to freedom, not
 price.  Our General Public Licenses are designed to make sure that you
 have the freedom to distribute copies of free software (and charge for
 them if you wish), that you receive source code or can get it if you
 want it, that you can change the software or use pieces of it in new
 free programs, and that you know you can do these things.
  To protect your rights, we need to prevent others from denying you
 these rights or asking you to surrender the rights.  Therefore, you have
 certain responsibilities if you distribute copies of the software, or if
 you modify it: responsibilities to respect the freedom of others.
  For example, if you distribute copies of such a program, whether
 gratis or for a fee, you must pass on to the recipients the same
 freedoms that you received.  You must make sure that they, too, receive
 or can get the source code.  And you must show them these terms so they
 know their rights.
  Developers that use the GNU GPL protect your rights with two steps:
 (1) assert copyright on the software, and (2) offer you this License
 giving you legal permission to copy, distribute and/or modify it.
  For the developers' and authors' protection, the GPL clearly explains
 that there is no warranty for this free software.  For both users' and
 authors' sake, the GPL requires that modified versions be marked as
 changed, so that their problems will not be attributed erroneously to
 authors of previous versions.
  Some devices are designed to deny users access to install or run
 modified versions of the software inside them, although the manufacturer
 can do so.  This is fundamentally incompatible with the aim of
 protecting users' freedom to change the software.  The systematic
 pattern of such abuse occurs in the area of products for individuals to
 use, which is precisely where it is most unacceptable.  Therefore, we
 have designed this version of the GPL to prohibit the practice for those
 products.  If such problems arise substantially in other domains, we
 stand ready to extend this provision to those domains in future versions
 of the GPL, as needed to protect the freedom of users.
  Finally, every program is threatened constantly by software patents.
 States should not allow patents to restrict development and use of
 software on general-purpose computers, but in those that do, we wish to
 avoid the special danger that patents applied to a free program could
 make it effectively proprietary.  To prevent this, the GPL assures that
 patents cannot be used to render the program non-free.
  The precise terms and conditions for copying, distribution and
 modification follow.
                       TERMS AND CONDITIONS
  0. Definitions.
  "This License" refers to version 3 of the GNU General Public License.
  "Copyright" also means copyright-like laws that apply to other kinds of
 works, such as semiconductor masks.
  "The Program" refers to any copyrightable work licensed under this
 License.  Each licensee is addressed as "you".  "Licensees" and
 "recipients" may be individuals or organizations.
  To "modify" a work means to copy from or adapt all or part of the work
 in a fashion requiring copyright permission, other than the making of an
 exact copy.  The resulting work is called a "modified version" of the
 earlier work or a work "based on" the earlier work.
  A "covered work" means either the unmodified Program or a work based
 on the Program.
  To "propagate" a work means to do anything with it that, without
 permission, would make you directly or secondarily liable for
 infringement under applicable copyright law, except executing it on a
 computer or modifying a private copy.  Propagation includes copying,
 distribution (with or without modification), making available to the
 public, and in some countries other activities as well.
  To "convey" a work means any kind of propagation that enables other
 parties to make or receive copies.  Mere interaction with a user through
 a computer network, with no transfer of a copy, is not conveying.
  An interactive user interface displays "Appropriate Legal Notices"
 to the extent that it includes a convenient and prominently visible
 feature that (1) displays an appropriate copyright notice, and (2)
 tells the user that there is no warranty for the work (except to the
 extent that warranties are provided), that licensees may convey the
 work under this License, and how to view a copy of this License.  If
 the interface presents a list of user commands or options, such as a
 menu, a prominent item in the list meets this criterion.
  1. Source Code.
  The "source code" for a work means the preferred form of the work
 for making modifications to it.  "Object code" means any non-source
 form of a work.
  A "Standard Interface" means an interface that either is an official
 standard defined by a recognized standards body, or, in the case of
 interfaces specified for a particular programming language, one that
 is widely used among developers working in that language.
  The "System Libraries" of an executable work include anything, other
 than the work as a whole, that (a) is included in the normal form of
 packaging a Major Component, but which is not part of that Major
 Component, and (b) serves only to enable use of the work with that
 Major Component, or to implement a Standard Interface for which an
 implementation is available to the public in source code form.  A
 "Major Component", in this context, means a major essential component
 (kernel, window system, and so on) of the specific operating system
 (if any) on which the executable work runs, or a compiler used to
 produce the work, or an object code interpreter used to run it.
  The "Corresponding Source" for a work in object code form means all
 the source code needed to generate, install, and (for an executable
 work) run the object code and to modify the work, including scripts to
 control those activities.  However, it does not include the work's
 System Libraries, or general-purpose tools or generally available free
 programs which are used unmodified in performing those activities but
 which are not part of the work.  For example, Corresponding Source
 includes interface definition files associated with source files for
 the work, and the source code for shared libraries and dynamically
 linked subprograms that the work is specifically designed to require,
 such as by intimate data communication or control flow between those
 subprograms and other parts of the work.
  The Corresponding Source need not include anything that users
 can regenerate automatically from other parts of the Corresponding
 Source.
  The Corresponding Source for a work in source code form is that
 same work.
  2. Basic Permissions.
  All rights granted under this License are granted for the term of
 copyright on the Program, and are irrevocable provided the stated
 conditions are met.  This License explicitly affirms your unlimited
 permission to run the unmodified Program.  The output from running a
 covered work is covered by this License only if the output, given its
 content, constitutes a covered work.  This License acknowledges your
 rights of fair use or other equivalent, as provided by copyright law.
  You may make, run and propagate covered works that you do not
 convey, without conditions so long as your license otherwise remains
 in force.  You may convey covered works to others for the sole purpose
 of having them make modifications exclusively for you, or provide you
 with facilities for running those works, provided that you comply with
 the terms of this License in conveying all material for which you do
 not control copyright.  Those thus making or running the covered works
 for you must do so exclusively on your behalf, under your direction
 and control, on terms that prohibit them from making any copies of
 your copyrighted material outside their relationship with you.
  Conveying under any other circumstances is permitted solely under
 the conditions stated below.  Sublicensing is not allowed; section 10
 makes it unnecessary.
  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
  No covered work shall be deemed part of an effective technological
 measure under any applicable law fulfilling obligations under article
 11 of the WIPO copyright treaty adopted on 20 December 1996, or
 similar laws prohibiting or restricting circumvention of such
 measures.
  When you convey a covered work, you waive any legal power to forbid
 circumvention of technological measures to the extent such circumvention
 is effected by exercising rights under this License with respect to
 the covered work, and you disclaim any intention to limit operation or
 modification of the work as a means of enforcing, against the work's
 users, your or third parties' legal rights to forbid circumvention of
 technological measures.
  4. Conveying Verbatim Copies.
  You may convey verbatim copies of the Program's source code as you
 receive it, in any medium, provided that you conspicuously and
 appropriately publish on each copy an appropriate copyright notice;
 keep intact all notices stating that this License and any
 non-permissive terms added in accord with section 7 apply to the code;
 keep intact all notices of the absence of any warranty; and give all
 recipients a copy of this License along with the Program.
  You may charge any price or no price for each copy that you convey,
 and you may offer support or warranty protection for a fee.
  5. Conveying Modified Source Versions.
  You may convey a work based on the Program, or the modifications to
 produce it from the Program, in the form of source code under the
 terms of section 4, provided that you also meet all of these conditions:
    a) The work must carry prominent notices stating that you modified
    it, and giving a relevant date.
    b) The work must carry prominent notices stating that it is
    released under this License and any conditions added under section
    7.  This requirement modifies the requirement in section 4 to
    "keep intact all notices".
    c) You must license the entire work, as a whole, under this
    License to anyone who comes into possession of a copy.  This
    License will therefore apply, along with any applicable section 7
    additional terms, to the whole of the work, and all its parts,
    regardless of how they are packaged.  This License gives no
    permission to license the work in any other way, but it does not
    invalidate such permission if you have separately received it.
    d) If the work has interactive user interfaces, each must display
    Appropriate Legal Notices; however, if the Program has interactive
    interfaces that do not display Appropriate Legal Notices, your
    work need not make them do so.
  A compilation of a covered work with other separate and independent
 works, which are not by their nature extensions of the covered work,
 and which are not combined with it such as to form a larger program,
 in or on a volume of a storage or distribution medium, is called an
 "aggregate" if the compilation and its resulting copyright are not
 used to limit the access or legal rights of the compilation's users
 beyond what the individual works permit.  Inclusion of a covered work
 in an aggregate does not cause this License to apply to the other
 parts of the aggregate.
  6. Conveying Non-Source Forms.
  You may convey a covered work in object code form under the terms
 of sections 4 and 5, provided that you also convey the
 machine-readable Corresponding Source under the terms of this License,
 in one of these ways:
    a) Convey the object code in, or embodied in, a physical product
    (including a physical distribution medium), accompanied by the
    Corresponding Source fixed on a durable physical medium
    customarily used for software interchange.
    b) Convey the object code in, or embodied in, a physical product
    (including a physical distribution medium), accompanied by a
    written offer, valid for at least three years and valid for as
    long as you offer spare parts or customer support for that product
    model, to give anyone who possesses the object code either (1) a
    copy of the Corresponding Source for all the software in the
    product that is covered by this License, on a durable physical
    medium customarily used for software interchange, for a price no
    more than your reasonable cost of physically performing this
    conveying of source, or (2) access to copy the
    Corresponding Source from a network server at no charge.
    c) Convey individual copies of the object code with a copy of the
    written offer to provide the Corresponding Source.  This
    alternative is allowed only occasionally and noncommercially, and
    only if you received the object code with such an offer, in accord
    with subsection 6b.
    d) Convey the object code by offering access from a designated
    place (gratis or for a charge), and offer equivalent access to the
    Corresponding Source in the same way through the same place at no
    further charge.  You need not require recipients to copy the
    Corresponding Source along with the object code.  If the place to
    copy the object code is a network server, the Corresponding Source
    may be on a different server (operated by you or a third party)
    that supports equivalent copying facilities, provided you maintain
    clear directions next to the object code saying where to find the
    Corresponding Source.  Regardless of what server hosts the
    Corresponding Source, you remain obligated to ensure that it is
    available for as long as needed to satisfy these requirements.
    e) Convey the object code using peer-to-peer transmission, provided
    you inform other peers where the object code and Corresponding
    Source of the work are being offered to the general public at no
    charge under subsection 6d.
  A separable portion of the object code, whose source code is excluded
 from the Corresponding Source as a System Library, need not be
 included in conveying the object code work.
  A "User Product" is either (1) a "consumer product", which means any
 tangible personal property which is normally used for personal, family,
 or household purposes, or (2) anything designed or sold for incorporation
 into a dwelling.  In determining whether a product is a consumer product,
 doubtful cases shall be resolved in favor of coverage.  For a particular
 product received by a particular user, "normally used" refers to a
 typical or common use of that class of product, regardless of the status
 of the particular user or of the way in which the particular user
 actually uses, or expects or is expected to use, the product.  A product
 is a consumer product regardless of whether the product has substantial
 commercial, industrial or non-consumer uses, unless such uses represent
 the only significant mode of use of the product.
  "Installation Information" for a User Product means any methods,
 procedures, authorization keys, or other information required to install
 and execute modified versions of a covered work in that User Product from
 a modified version of its Corresponding Source.  The information must
 suffice to ensure that the continued functioning of the modified object
 code is in no case prevented or interfered with solely because
 modification has been made.
  If you convey an object code work under this section in, or with, or
 specifically for use in, a User Product, and the conveying occurs as
 part of a transaction in which the right of possession and use of the
 User Product is transferred to the recipient in perpetuity or for a
 fixed term (regardless of how the transaction is characterized), the
 Corresponding Source conveyed under this section must be accompanied
 by the Installation Information.  But this requirement does not apply
 if neither you nor any third party retains the ability to install
 modified object code on the User Product (for example, the work has
 been installed in ROM).
  The requirement to provide Installation Information does not include a
 requirement to continue to provide support service, warranty, or updates
 for a work that has been modified or installed by the recipient, or for
 the User Product in which it has been modified or installed.  Access to a
 network may be denied when the modification itself materially and
 adversely affects the operation of the network or violates the rules and
 protocols for communication across the network.
  Corresponding Source conveyed, and Installation Information provided,
 in accord with this section must be in a format that is publicly
 documented (and with an implementation available to the public in
 source code form), and must require no special password or key for
 unpacking, reading or copying.
  7. Additional Terms.
  "Additional permissions" are terms that supplement the terms of this
 License by making exceptions from one or more of its conditions.
 Additional permissions that are applicable to the entire Program shall
 be treated as though they were included in this License, to the extent
 that they are valid under applicable law.  If additional permissions
 apply only to part of the Program, that part may be used separately
 under those permissions, but the entire Program remains governed by
 this License without regard to the additional permissions.
  When you convey a copy of a covered work, you may at your option
 remove any additional permissions from that copy, or from any part of
 it.  (Additional permissions may be written to require their own
 removal in certain cases when you modify the work.)  You may place
 additional permissions on material, added by you to a covered work,
 for which you have or can give appropriate copyright permission.
  Notwithstanding any other provision of this License, for material you
 add to a covered work, you may (if authorized by the copyright holders of
 that material) supplement the terms of this License with terms:
    a) Disclaiming warranty or limiting liability differently from the
    terms of sections 15 and 16 of this License; or
    b) Requiring preservation of specified reasonable legal notices or
    author attributions in that material or in the Appropriate Legal
    Notices displayed by works containing it; or
    c) Prohibiting misrepresentation of the origin of that material, or
    requiring that modified versions of such material be marked in
    reasonable ways as different from the original version; or
    d) Limiting the use for publicity purposes of names of licensors or
    authors of the material; or
    e) Declining to grant rights under trademark law for use of some
    trade names, trademarks, or service marks; or
    f) Requiring indemnification of licensors and authors of that
    material by anyone who conveys the material (or modified versions of
    it) with contractual assumptions of liability to the recipient, for
    any liability that these contractual assumptions directly impose on
    those licensors and authors.
  All other non-permissive additional terms are considered "further
 restrictions" within the meaning of section 10.  If the Program as you
 received it, or any part of it, contains a notice stating that it is
 governed by this License along with a term that is a further
 restriction, you may remove that term.  If a license document contains
 a further restriction but permits relicensing or conveying under this
 License, you may add to a covered work material governed by the terms
 of that license document, provided that the further restriction does
 not survive such relicensing or conveying.
  If you add terms to a covered work in accord with this section, you
 must place, in the relevant source files, a statement of the
 additional terms that apply to those files, or a notice indicating
 where to find the applicable terms.
  Additional terms, permissive or non-permissive, may be stated in the
 form of a separately written license, or stated as exceptions;
 the above requirements apply either way.
  8. Termination.
  You may not propagate or modify a covered work except as expressly
 provided under this License.  Any attempt otherwise to propagate or
 modify it is void, and will automatically terminate your rights under
 this License (including any patent licenses granted under the third
 paragraph of section 11).
  However, if you cease all violation of this License, then your
 license from a particular copyright holder is reinstated (a)
 provisionally, unless and until the copyright holder explicitly and
 finally terminates your license, and (b) permanently, if the copyright
 holder fails to notify you of the violation by some reasonable means
 prior to 60 days after the cessation.
  Moreover, your license from a particular copyright holder is
 reinstated permanently if the copyright holder notifies you of the
 violation by some reasonable means, this is the first time you have
 received notice of violation of this License (for any work) from that
 copyright holder, and you cure the violation prior to 30 days after
 your receipt of the notice.
  Termination of your rights under this section does not terminate the
 licenses of parties who have received copies or rights from you under
 this License.  If your rights have been terminated and not permanently
 reinstated, you do not qualify to receive new licenses for the same
 material under section 10.
  9. Acceptance Not Required for Having Copies.
  You are not required to accept this License in order to receive or
 run a copy of the Program.  Ancillary propagation of a covered work
 occurring solely as a consequence of using peer-to-peer transmission
 to receive a copy likewise does not require acceptance.  However,
 nothing other than this License grants you permission to propagate or
 modify any covered work.  These actions infringe copyright if you do
 not accept this License.  Therefore, by modifying or propagating a
 covered work, you indicate your acceptance of this License to do so.
  10. Automatic Licensing of Downstream Recipients.
  Each time you convey a covered work, the recipient automatically
 receives a license from the original licensors, to run, modify and
 propagate that work, subject to this License.  You are not responsible
 for enforcing compliance by third parties with this License.
  An "entity transaction" is a transaction transferring control of an
 organization, or substantially all assets of one, or subdividing an
 organization, or merging organizations.  If propagation of a covered
 work results from an entity transaction, each party to that
 transaction who receives a copy of the work also receives whatever
 licenses to the work the party's predecessor in interest had or could
 give under the previous paragraph, plus a right to possession of the
 Corresponding Source of the work from the predecessor in interest, if
 the predecessor has it or can get it with reasonable efforts.
  You may not impose any further restrictions on the exercise of the
 rights granted or affirmed under this License.  For example, you may
 not impose a license fee, royalty, or other charge for exercise of
 rights granted under this License, and you may not initiate litigation
 (including a cross-claim or counterclaim in a lawsuit) alleging that
 any patent claim is infringed by making, using, selling, offering for
 sale, or importing the Program or any portion of it.
  11. Patents.
  A "contributor" is a copyright holder who authorizes use under this
 License of the Program or a work on which the Program is based.  The
 work thus licensed is called the contributor's "contributor version".
  A contributor's "essential patent claims" are all patent claims
 owned or controlled by the contributor, whether already acquired or
 hereafter acquired, that would be infringed by some manner, permitted
 by this License, of making, using, or selling its contributor version,
 but do not include claims that would be infringed only as a
 consequence of further modification of the contributor version.  For
 purposes of this definition, "control" includes the right to grant
 patent sublicenses in a manner consistent with the requirements of
 this License.
  Each contributor grants you a non-exclusive, worldwide, royalty-free
 patent license under the contributor's essential patent claims, to
 make, use, sell, offer for sale, import and otherwise run, modify and
 propagate the contents of its contributor version.
  In the following three paragraphs, a "patent license" is any express
 agreement or commitment, however denominated, not to enforce a patent
 (such as an express permission to practice a patent or covenant not to
 sue for patent infringement).  To "grant" such a patent license to a
 party means to make such an agreement or commitment not to enforce a
 patent against the party.
  If you convey a covered work, knowingly relying on a patent license,
 and the Corresponding Source of the work is not available for anyone
 to copy, free of charge and under the terms of this License, through a
 publicly available network server or other readily accessible means,
 then you must either (1) cause the Corresponding Source to be so
 available, or (2) arrange to deprive yourself of the benefit of the
 patent license for this particular work, or (3) arrange, in a manner
 consistent with the requirements of this License, to extend the patent
 license to downstream recipients.  "Knowingly relying" means you have
 actual knowledge that, but for the patent license, your conveying the
 covered work in a country, or your recipient's use of the covered work
 in a country, would infringe one or more identifiable patents in that
 country that you have reason to believe are valid.
  If, pursuant to or in connection with a single transaction or
 arrangement, you convey, or propagate by procuring conveyance of, a
 covered work, and grant a patent license to some of the parties
 receiving the covered work authorizing them to use, propagate, modify
 or convey a specific copy of the covered work, then the patent license
 you grant is automatically extended to all recipients of the covered
 work and works based on it.
  A patent license is "discriminatory" if it does not include within
 the scope of its coverage, prohibits the exercise of, or is
 conditioned on the non-exercise of one or more of the rights that are
 specifically granted under this License.  You may not convey a covered
 work if you are a party to an arrangement with a third party that is
 in the business of distributing software, under which you make payment
 to the third party based on the extent of your activity of conveying
 the work, and under which the third party grants, to any of the
 parties who would receive the covered work from you, a discriminatory
 patent license (a) in connection with copies of the covered work
 conveyed by you (or copies made from those copies), or (b) primarily
 for and in connection with specific products or compilations that
 contain the covered work, unless you entered into that arrangement,
 or that patent license was granted, prior to 28 March 2007.
  Nothing in this License shall be construed as excluding or limiting
 any implied license or other defenses to infringement that may
 otherwise be available to you under applicable patent law.
  12. No Surrender of Others' Freedom.
  If conditions are imposed on you (whether by court order, agreement or
 otherwise) that contradict the conditions of this License, they do not
 excuse you from the conditions of this License.  If you cannot convey a
 covered work so as to satisfy simultaneously your obligations under this
 License and any other pertinent obligations, then as a consequence you may
 not convey it at all.  For example, if you agree to terms that obligate you
 to collect a royalty for further conveying from those to whom you convey
 the Program, the only way you could satisfy both those terms and this
 License would be to refrain entirely from conveying the Program.
  13. Use with the GNU Affero General Public License.
  Notwithstanding any other provision of this License, you have
 permission to link or combine any covered work with a work licensed
 under version 3 of the GNU Affero General Public License into a single
 combined work, and to convey the resulting work.  The terms of this
 License will continue to apply to the part which is the covered work,
 but the special requirements of the GNU Affero General Public License,
 section 13, concerning interaction through a network will apply to the
 combination as such.
  14. Revised Versions of this License.
  The Free Software Foundation may publish revised and/or new versions of
 the GNU General Public License from time to time.  Such new versions will
 be similar in spirit to the present version, but may differ in detail to
 address new problems or concerns.
  Each version is given a distinguishing version number.  If the
 Program specifies that a certain numbered version of the GNU General
 Public License "or any later version" applies to it, you have the
 option of following the terms and conditions either of that numbered
 version or of any later version published by the Free Software
 Foundation.  If the Program does not specify a version number of the
 GNU General Public License, you may choose any version ever published
 by the Free Software Foundation.
  If the Program specifies that a proxy can decide which future
 versions of the GNU General Public License can be used, that proxy's
 public statement of acceptance of a version permanently authorizes you
 to choose that version for the Program.
  Later license versions may give you additional or different
 permissions.  However, no additional obligations are imposed on any
 author or copyright holder as a result of your choosing to follow a
 later version.
  15. Disclaimer of Warranty.
  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
 APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
 HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
 OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
 THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
 IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
 ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
  16. Limitation of Liability.
  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
 WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
 THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
 GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
 USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
 DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
 PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
 EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
 SUCH DAMAGES.
  17. Interpretation of Sections 15 and 16.
  If the disclaimer of warranty and limitation of liability provided
 above cannot be given local legal effect according to their terms,
 reviewing courts shall apply local law that most closely approximates
 an absolute waiver of all civil liability in connection with the
 Program, unless a warranty or assumption of liability accompanies a
 copy of the Program in return for a fee.
                     END OF TERMS AND CONDITIONS
            How to Apply These Terms to Your New Programs
  If you develop a new program, and you want it to be of the greatest
 possible use to the public, the best way to achieve this is to make it
 free software which everyone can redistribute and change under these terms.
  To do so, attach the following notices to the program.  It is safest
 to attach them to the start of each source file to most effectively
 state the exclusion of warranty; and each file should have at least
 the "copyright" line and a pointer to where the full notice is found.
    <one line to give the program's name and a brief idea of what it does.>
    Copyright (C) <year>  <name of author>
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
 Also add information on how to contact you by electronic and paper mail.
  If the program does terminal interaction, make it output a short
 notice like this when it starts in an interactive mode:
    <program>  Copyright (C) <year>  <name of author>
    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
    This is free software, and you are welcome to redistribute it
    under certain conditions; type `show c' for details.
 The hypothetical commands `show w' and `show c' should show the appropriate
 parts of the General Public License.  Of course, your program's commands
 might be different; for a GUI interface, you would use an "about box".
  You should also get your employer (if you work as a programmer) or school,
 if any, to sign a "copyright disclaimer" for the program, if necessary.
 For more information on this, and how to apply and follow the GNU GPL, see
 <https://www.gnu.org/licenses/>.
  The GNU General Public License does not permit incorporating your program
 into proprietary programs.  If your program is a subroutine library, you
 may consider it more useful to permit linking proprietary applications with
 the library.  If this is what you want to do, use the GNU Lesser General
 Public License instead of this License.  But first, please read
 <https://www.gnu.org/licenses/why-not-lgpl.html>.
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -0,0 +1,373 @@
 Mozilla Public License Version 2.0
 ==================================
 1. Definitions
 --------------
 1.1. "Contributor"
    means each individual or legal entity that creates, contributes to
    the creation of, or owns Covered Software.
 1.2. "Contributor Version"
    means the combination of the Contributions of others (if any) used
    by a Contributor and that particular Contributor's Contribution.
 1.3. "Contribution"
    means Covered Software of a particular Contributor.
 1.4. "Covered Software"
    means Source Code Form to which the initial Contributor has attached
    the notice in Exhibit A, the Executable Form of such Source Code
    Form, and Modifications of such Source Code Form, in each case
    including portions thereof.
 1.5. "Incompatible With Secondary Licenses"
    means
    (a) that the initial Contributor has attached the notice described
        in Exhibit B to the Covered Software; or
    (b) that the Covered Software was made available under the terms of
        version 1.1 or earlier of the License, but not also under the
        terms of a Secondary License.
 1.6. "Executable Form"
    means any form of the work other than Source Code Form.
 1.7. "Larger Work"
    means a work that combines Covered Software with other material, in
    a separate file or files, that is not Covered Software.
 1.8. "License"
    means this document.
 1.9. "Licensable"
    means having the right to grant, to the maximum extent possible,
    whether at the time of the initial grant or subsequently, any and
    all of the rights conveyed by this License.
 1.10. "Modifications"
    means any of the following:
    (a) any file in Source Code Form that results from an addition to,
        deletion from, or modification of the contents of Covered
        Software; or
    (b) any new file in Source Code Form that contains any Covered
        Software.
 1.11. "Patent Claims" of a Contributor
    means any patent claim(s), including without limitation, method,
    process, and apparatus claims, in any patent Licensable by such
    Contributor that would be infringed, but for the grant of the
    License, by the making, using, selling, offering for sale, having
    made, import, or transfer of either its Contributions or its
    Contributor Version.
 1.12. "Secondary License"
    means either the GNU General Public License, Version 2.0, the GNU
    Lesser General Public License, Version 2.1, the GNU Affero General
    Public License, Version 3.0, or any later versions of those
    licenses.
 1.13. "Source Code Form"
    means the form of the work preferred for making modifications.
 1.14. "You" (or "Your")
    means an individual or a legal entity exercising rights under this
    License. For legal entities, "You" includes any entity that
    controls, is controlled by, or is under common control with You. For
    purposes of this definition, "control" means (a) the power, direct
    or indirect, to cause the direction or management of such entity,
    whether by contract or otherwise, or (b) ownership of more than
    fifty percent (50%) of the outstanding shares or beneficial
    ownership of such entity.
 2. License Grants and Conditions
 --------------------------------
 2.1. Grants
 Each Contributor hereby grants You a world-wide, royalty-free,
 non-exclusive license:
 (a) under intellectual property rights (other than patent or trademark)
    Licensable by such Contributor to use, reproduce, make available,
    modify, display, perform, distribute, and otherwise exploit its
    Contributions, either on an unmodified basis, with Modifications, or
    as part of a Larger Work; and
 (b) under Patent Claims of such Contributor to make, use, sell, offer
    for sale, have made, import, and otherwise transfer either its
    Contributions or its Contributor Version.
 2.2. Effective Date
 The licenses granted in Section 2.1 with respect to any Contribution
 become effective for each Contribution on the date the Contributor first
 distributes such Contribution.
 2.3. Limitations on Grant Scope
 The licenses granted in this Section 2 are the only rights granted under
 this License. No additional rights or licenses will be implied from the
 distribution or licensing of Covered Software under this License.
 Notwithstanding Section 2.1(b) above, no patent license is granted by a
 Contributor:
 (a) for any code that a Contributor has removed from Covered Software;
    or
 (b) for infringements caused by: (i) Your and any other third party's
    modifications of Covered Software, or (ii) the combination of its
    Contributions with other software (except as part of its Contributor
    Version); or
 (c) under Patent Claims infringed by Covered Software in the absence of
    its Contributions.
 This License does not grant any rights in the trademarks, service marks,
 or logos of any Contributor (except as may be necessary to comply with
 the notice requirements in Section 3.4).
 2.4. Subsequent Licenses
 No Contributor makes additional grants as a result of Your choice to
 distribute the Covered Software under a subsequent version of this
 License (see Section 10.2) or under the terms of a Secondary License (if
 permitted under the terms of Section 3.3).
 2.5. Representation
 Each Contributor represents that the Contributor believes its
 Contributions are its original creation(s) or it has sufficient rights
 to grant the rights to its Contributions conveyed by this License.
 2.6. Fair Use
 This License is not intended to limit any rights You have under
 applicable copyright doctrines of fair use, fair dealing, or other
 equivalents.
 2.7. Conditions
 Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
 in Section 2.1.
 3. Responsibilities
 -------------------
 3.1. Distribution of Source Form
 All distribution of Covered Software in Source Code Form, including any
 Modifications that You create or to which You contribute, must be under
 the terms of this License. You must inform recipients that the Source
 Code Form of the Covered Software is governed by the terms of this
 License, and how they can obtain a copy of this License. You may not
 attempt to alter or restrict the recipients' rights in the Source Code
 Form.
 3.2. Distribution of Executable Form
 If You distribute Covered Software in Executable Form then:
 (a) such Covered Software must also be made available in Source Code
    Form, as described in Section 3.1, and You must inform recipients of
    the Executable Form how they can obtain a copy of such Source Code
    Form by reasonable means in a timely manner, at a charge no more
    than the cost of distribution to the recipient; and
 (b) You may distribute such Executable Form under the terms of this
    License, or sublicense it under different terms, provided that the
    license for the Executable Form does not attempt to limit or alter
    the recipients' rights in the Source Code Form under this License.
 3.3. Distribution of a Larger Work
 You may create and distribute a Larger Work under terms of Your choice,
 provided that You also comply with the requirements of this License for
 the Covered Software. If the Larger Work is a combination of Covered
 Software with a work governed by one or more Secondary Licenses, and the
 Covered Software is not Incompatible With Secondary Licenses, this
 License permits You to additionally distribute such Covered Software
 under the terms of such Secondary License(s), so that the recipient of
 the Larger Work may, at their option, further distribute the Covered
 Software under the terms of either this License or such Secondary
 License(s).
 3.4. Notices
 You may not remove or alter the substance of any license notices
 (including copyright notices, patent notices, disclaimers of warranty,
 or limitations of liability) contained within the Source Code Form of
 the Covered Software, except that You may alter any license notices to
 the extent required to remedy known factual inaccuracies.
 3.5. Application of Additional Terms
 You may choose to offer, and to charge a fee for, warranty, support,
 indemnity or liability obligations to one or more recipients of Covered
 Software. However, You may do so only on Your own behalf, and not on
 behalf of any Contributor. You must make it absolutely clear that any
 such warranty, support, indemnity, or liability obligation is offered by
 You alone, and You hereby agree to indemnify every Contributor for any
 liability incurred by such Contributor as a result of warranty, support,
 indemnity or liability terms You offer. You may include additional
 disclaimers of warranty and limitations of liability specific to any
 jurisdiction.
 4. Inability to Comply Due to Statute or Regulation
 ---------------------------------------------------
 If it is impossible for You to comply with any of the terms of this
 License with respect to some or all of the Covered Software due to
 statute, judicial order, or regulation then You must: (a) comply with
 the terms of this License to the maximum extent possible; and (b)
 describe the limitations and the code they affect. Such description must
 be placed in a text file included with all distributions of the Covered
 Software under this License. Except to the extent prohibited by statute
 or regulation, such description must be sufficiently detailed for a
 recipient of ordinary skill to be able to understand it.
 5. Termination
 --------------
 5.1. The rights granted under this License will terminate automatically
 if You fail to comply with any of its terms. However, if You become
 compliant, then the rights granted under this License from a particular
 Contributor are reinstated (a) provisionally, unless and until such
 Contributor explicitly and finally terminates Your grants, and (b) on an
 ongoing basis, if such Contributor fails to notify You of the
 non-compliance by some reasonable means prior to 60 days after You have
 come back into compliance. Moreover, Your grants from a particular
 Contributor are reinstated on an ongoing basis if such Contributor
 notifies You of the non-compliance by some reasonable means, this is the
 first time You have received notice of non-compliance with this License
 from such Contributor, and You become compliant prior to 30 days after
 Your receipt of the notice.
 5.2. If You initiate litigation against any entity by asserting a patent
 infringement claim (excluding declaratory judgment actions,
 counter-claims, and cross-claims) alleging that a Contributor Version
 directly or indirectly infringes any patent, then the rights granted to
 You by any and all Contributors for the Covered Software under Section
 2.1 of this License shall terminate.
 5.3. In the event of termination under Sections 5.1 or 5.2 above, all
 end user license agreements (excluding distributors and resellers) which
 have been validly granted by You or Your distributors under this License
 prior to termination shall survive termination.
 ************************************************************************
 *                                                                      *
 *  6. Disclaimer of Warranty                                           *
 *  -------------------------                                           *
 *                                                                      *
 *  Covered Software is provided under this License on an "as is"       *
 *  basis, without warranty of any kind, either expressed, implied, or  *
 *  statutory, including, without limitation, warranties that the       *
 *  Covered Software is free of defects, merchantable, fit for a        *
 *  particular purpose or non-infringing. The entire risk as to the     *
 *  quality and performance of the Covered Software is with You.        *
 *  Should any Covered Software prove defective in any respect, You     *
 *  (not any Contributor) assume the cost of any necessary servicing,   *
 *  repair, or correction. This disclaimer of warranty constitutes an   *
 *  essential part of this License. No use of any Covered Software is   *
 *  authorized under this License except under this disclaimer.         *
 *                                                                      *
 ************************************************************************
 ************************************************************************
 *                                                                      *
 *  7. Limitation of Liability                                          *
 *  --------------------------                                          *
 *                                                                      *
 *  Under no circumstances and under no legal theory, whether tort      *
 *  (including negligence), contract, or otherwise, shall any           *
 *  Contributor, or anyone who distributes Covered Software as          *
 *  permitted above, be liable to You for any direct, indirect,         *
 *  special, incidental, or consequential damages of any character      *
 *  including, without limitation, damages for lost profits, loss of    *
 *  goodwill, work stoppage, computer failure or malfunction, or any    *
 *  and all other commercial damages or losses, even if such party      *
 *  shall have been informed of the possibility of such damages. This   *
 *  limitation of liability shall not apply to liability for death or   *
 *  personal injury resulting from such party's negligence to the       *
 *  extent applicable law prohibits such limitation. Some               *
 *  jurisdictions do not allow the exclusion or limitation of           *
 *  incidental or consequential damages, so this exclusion and          *
 *  limitation may not apply to You.                                    *
 *                                                                      *
 ************************************************************************
 8. Litigation
 -------------
 Any litigation relating to this License may be brought only in the
 courts of a jurisdiction where the defendant maintains its principal
 place of business and such litigation shall be governed by laws of that
 jurisdiction, without reference to its conflict-of-law provisions.
 Nothing in this Section shall prevent a party's ability to bring
 cross-claims or counter-claims.
 9. Miscellaneous
 ----------------
 This License represents the complete agreement concerning the subject
 matter hereof. If any provision of this License is held to be
 unenforceable, such provision shall be reformed only to the extent
 necessary to make it enforceable. Any law or regulation which provides
 that the language of a contract shall be construed against the drafter
 shall not be used to construe this License against a Contributor.
 10. Versions of the License
 ---------------------------
 10.1. New Versions
 Mozilla Foundation is the license steward. Except as provided in Section
 10.3, no one other than the license steward has the right to modify or
 publish new versions of this License. Each version will be given a
 distinguishing version number.
 10.2. Effect of New Versions
 You may distribute the Covered Software under the terms of the version
 of the License under which You originally received the Covered Software,
 or under the terms of any subsequent version published by the license
 steward.
 10.3. Modified Versions
 If you create software not governed by this License, and you want to
 create a new license for such software, you may create and use a
 modified version of this License if you rename the license and remove
 any references to the name of the license steward (except to note that
 such modified license differs from this License).
 10.4. Distributing Source Code Form that is Incompatible With Secondary
 Licenses
 If You choose to distribute Source Code Form that is Incompatible With
 Secondary Licenses under the terms of this version of the License, the
 notice described in Exhibit B of this License must be attached.
 Exhibit A - Source Code Form License Notice
 -------------------------------------------
  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
 If it is not possible or desirable to put the notice in a particular
 file, then You may include the notice in a location (such as a LICENSE
 file in a relevant directory) where a recipient would be likely to look
 for such a notice.
 You may add additional accurate notices of copyright ownership.
 Exhibit B - "Incompatible With Secondary Licenses" Notice
 ---------------------------------------------------------
  This Source Code Form is "Incompatible With Secondary Licenses", as
  defined by the Mozilla Public License, v. 2.0.
--- a/22
+++ b/22
@@ -1,23 +1,15 @@
 .PHONY : fe clean all
 default:
 	go run main.go
 fe:
 	cd frontend && pnpm install && pnpm build
 dev:
 	cd frontend && pnpm install && pnpm dev
 all: fe
 	CGO_ENABLED=0 go build -o yt-dlp-webui main.go
-multiarch: fe
+all:
 	cd frontend && pnpm build && cd ..
 	CGO_ENABLED=0 go build -o yt-dlp-webui main.go
 multiarch:
 	mkdir -p build
-	CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o build/yt-dlp-webui_linux-amd64 main.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=arm go build -o build/yt-dlp-webui_linux-arm main.go
 	CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -o build/yt-dlp-webui_linux-arm64 main.go
-	CGO_ENABLED=0 GOOS=linux GOARM=6 GOARCH=arm go build -o build/yt-dlp-webui_linux-armv6 main.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o build/yt-dlp-webui_linux-amd64 main.go
 	CGO_ENABLED=0 GOOS=linux GOARM=7 GOARCH=arm go build -o build/yt-dlp-webui_linux-armv7 main.go
 clean:
 	rm -rf build
--- a/README.md
+++ b/README.md
@@ -1,42 +1,65 @@
-> [!NOTE]  
+> [!IMPORTANT]
-> A poll is up to decide the future of yt-dlp-web-ui frontend! If you're interested you can take part.  
+> Major frontend refactoring in progress.  
-> https://github.com/marcopiovanello/yt-dlp-web-ui/discussions/223
+> I won't add features or fix minor issues until completition.
 ---
 # yt-dlp Web UI
 A not so terrible web ui for yt-dlp.  
 Created for the only purpose of *fetching* videos from my server/nas. 
-High performance extendeable web ui and RPC server for yt-dlp with low impact on resources.
+Intended to be used with docker and in standalone mode. 😎👍
-Created for the only purpose of *fetching* videos from my server/nas and monitor upcoming livestreams. 
+Developed to be as lightweight as possible (because my server is basically an intel atom sbc). 
-**Docker images are available on [Docker Hub](https://hub.docker.com/r/marcobaobao/yt-dlp-webui) or [ghcr.io](https://github.com/marcopiovanello/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui)**.
+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
 ```
 ```sh
 # latest dev
-docker pull ghcr.io/marcopiovanello/yt-dlp-web-ui:latest
+docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
 ```
 ![output](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/82bcecaf-4ced-441f-9384-105653abfae4)
-## Donate to yt-dlp-webui development
+![image](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/a32fbdaa-b033-4aed-b914-a66701ace0ce)
-[PayPal](https://paypal.me/marcofw)
+![image](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/782c559a-f552-40be-a6fd-10e22f38e85d)
-*Keeps the project alive!* 😃
+### Integrated File browser
 Stream or download your content, easily.
-## Community stuff
+![](https://i.ibb.co/k0qzLds/image.png)
 Feel free to join :)
-[![Discord Banner](https://api.weblutions.com/discord/invite/3Sj9ZZHv/)](https://discord.gg/WRnVWr4y)
+## Changelog
 ```
 05/03/22: Korean translation by kimpig
-## Some screeshots
+03/03/22: cut-down image size by switching to Alpine linux based container
 ![image](https://github.com/user-attachments/assets/fc43a3fb-ecf9-449d-b5cb-5d5635020c00)
 ![image](https://github.com/user-attachments/assets/3210f6ac-0dd8-403c-b839-3c24ff7d7d00)
 ![image](https://github.com/user-attachments/assets/16450a40-cda6-4c8b-9d20-8ec36282f6ed)
-## Video showcase
+01/03/22: Chinese translation by deluxghost
-[app.webm](https://github.com/marcopiovanello/yt-dlp-web-ui/assets/35533749/91545bc4-233d-4dde-8504-27422cb26964)
+
 03/02/22: i18n enabled! I need help with the translations :/
 27/01/22: Multidownload implemented!
 26/01/22: Multiple downloads are being implemented. Maybe by next release they will be there.
 Refactoring and JSDoc.
 04/01/22: Background jobs now are retrieved!! It's still rudimentary but it leverages on yt-dlp resume feature.
 05/05/22: Material UI update.
 03/06/22: The most requested feature finally implemented: Format Selection!!
 08/06/22: ARM builds.
 28/06/22: Reworked resume download feature. Now it's pratically instantaneous. It no longer stops and restarts each process, references to each process are saved in memory.
 12/01/23: Switched from TypeScript to Golang on the backend. It was a great effort but it was worth it.
 ```
 ## Settings
@@ -51,13 +74,22 @@ The currently avaible settings are:
 -   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)
 ## Format selection
 This feature is disabled by default as this intended to be used to retrieve the best quality automatically.
 To enable it just go to the settings page and enable the **Enable video/audio formats selection** flag!
-## [Docker](https://github.com/marcopiovanello/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui) run
+## Troubleshooting
 -   **It says that it isn't connected/ip in the header is not defined.**
    - You must set the server ip address in the settings section (gear icon).
 -   **The download  doesn't start.**
    - As before server address is not specified or simply yt-dlp process takes a lot of time to fire up. (Forking yt-dlp isn't fast especially if you have a lower-end/low-power NAS/server/desktop where the server is running)
 ## [Docker](https://github.com/marcopeocchi/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui) installation
 ```sh
 docker pull marcobaobao/yt-dlp-webui
 docker run -d -p 3033:3033 -v <your dir>:/downloads marcobaobao/yt-dlp-webui
@@ -101,31 +133,7 @@ docker run -d \
    --qs 2
 ```
-### Docker Compose
+## [Prebuilt binaries](https://github.com/marcopeocchi/yt-dlp-web-ui/releases) installation
 ```yaml
 services:
  yt-dlp-webui:
    image: marcobaobao/yt-dlp-webui
    ports:
      - 3033:3033
    volumes:
      - <your dir>:/downloads # replace <your dir> with a directory on your host system
    healthcheck:
      test: curl -f http://localhost:3033 || exit 1
    restart: unless-stopped
 ```
 ### ⚡ One-Click Deploy
 | Cloud Provider | Deploy Button |
 |----------------|---------------|
 | AWS | <a href="https://deploystack.io/deploy/marcopiovanello-yt-dlp-web-ui?provider=aws&language=cfn"><img src="https://raw.githubusercontent.com/deploystackio/deploy-templates/refs/heads/main/.assets/img/aws.svg" height="38"></a> |
 | DigitalOcean | <a href="https://deploystack.io/deploy/marcopiovanello-yt-dlp-web-ui?provider=do&language=dop"><img src="https://raw.githubusercontent.com/deploystackio/deploy-templates/refs/heads/main/.assets/img/do.svg" height="38"></a> |
 | Render | <a href="https://deploystack.io/deploy/marcopiovanello-yt-dlp-web-ui?provider=rnd&language=rnd"><img src="https://raw.githubusercontent.com/deploystackio/deploy-templates/refs/heads/main/.assets/img/rnd.svg" height="38"></a> |
 <sub>Generated by <a href="https://deploystack.io/c/marcopiovanello-yt-dlp-web-ui" target="_blank">DeployStack.io</a></sub>
 ## [Prebuilt binaries](https://github.com/marcopiovanello/yt-dlp-web-ui/releases) installation
 ```sh
 # download the latest release from the releases page
@@ -147,76 +155,41 @@ Usage yt-dlp-webui:
  -auth
        Enable RPC authentication
  -conf string
-        Config file path (default "./config.yml")
+        Config file path
  -db string
        local database path (default "local.db")
  -driver string
        yt-dlp executable path (default "yt-dlp")
  -fl
        enable file based logging
  -host string
        Host where server will listen at (default "0.0.0.0")
  -lf string
        set log file location (default "yt-dlp-webui.log")
  -out string
        Where files will be saved (default ".")
-  -pass string
+  -host string
-        Password required for auth
+        Host where server will listen at (default "0.0.0.0")
  -port int
        Port where server will listen at (default 3033)
  -qs int
-        Queue size (concurrent downloads) (default 2)
+        Download queue size (default 8)
  -session string
        session file path (default ".")
  -user string
        Username required for auth
-  -web string
+  -pass string
-        frontend web resources path
+        Password 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**.
 With Docker, inside the mounted `/conf` volume inside there must be a file named `config.yml`.
 ```yaml
 # Simple configuration file for yt-dlp webui
 ---
 # Host where server will listen at (default: "0.0.0.0")
 #host: 0.0.0.0
 # Port where server will listen at (default: 3033)
 port: 8989
 # Directory where downloaded files will be stored (default: ".")
 downloadPath: /home/ren/archive
 downloaderPath: /usr/local/bin/yt-dlp
-# [optional] Enable RPC authentication (requires username and password)
+# Optional settings
 require_auth: true
 username: my_username
 password: my_random_secret
-# [optional] The download queue size (default: logical cpu cores)
+queue_size: 4
 queue_size: 4 # min. 2
 # [optional] Full path to the yt-dlp (default: "yt-dlp")
 #downloaderPath: /usr/local/bin/yt-dlp
 # [optional] Enable file based logging with rotation (default: false)
 #enable_file_logging: false
 # [optional] Directory where the log file will be stored (default: ".")
 #log_path: .
 # [optional] Directory where the session database file will be stored (default: ".")
 #session_file_path: .
 # [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
@@ -239,39 +212,17 @@ WantedBy=multi-user.target
 systemctl enable yt-dlp-webui
 systemctl start yt-dlp-webui
 ```
 It could be that yt-dlp-webui works correctly when started manually from the console, but with systemd, it does not see the yt-dlp executable, or has issues writing to the database file. One way to fix these issues could be as follows:
 ```shell
 cd
 mkdir yt-dlp-webui-workingdir
 # optionally move the already existing database file there:
 mv local.db yt-dlp-webui-workingdir
 nano yt-dlp-webui-workingdir/my.conf
 ```
 The config file format is described above; make sure to include the `downloaderPath` setting (the path can possibly be found by running `which yt-dlp`). For example, one could have:
 ```
 downloadPath: /stuff/media
 downloaderPath: /home/your_user/.local/bin/yt-dlp
 log_path: /home/your_user/yt-dlp-webui-workingdir
 session_file_path: /home/your_user/yt-dlp-webui-workingdir
 ```
 Adjust the Service section in the `/etc/systemd/system/yt-dlp-webui.service` file as follows:
 ```
 [Service]
 User=your_user
 Group=your_user
 WorkingDirectory=/home/your_user/yt-dlp-webui-workingdir
 ExecStart=/usr/local/bin/yt-dlp-webui --conf /home/your_user/yt-dlp-webui-workingdir/my.conf
 ```
 ## Manual installation
 ```sh
-# the dependencies are: yt-dlp, ffmpeg, nodejs, go, make.
+# the dependencies are: python3, ffmpeg, nodejs, psmisc, go.
-make all
+cd frontend
 npm i
 npm run build
 go build -o yt-dlp-webui main.go
 ```
 ## Open-API
 Navigate to `/openapi` to see the related swagger.
 ## Extendable
 You dont'like the Material feel?
@@ -280,33 +231,17 @@ Want to build your own frontend? We got you covered 🤠
 `yt-dlp-webui` now exposes a nice **JSON-RPC 1.0** interface through Websockets and HTTP-POST
 It is **planned** to also expose a **gRPC** server.
 Just as an overview, these are the available methods:
 -   Service.Exec
 -   Service.Progress
 -   Service.Formats
 -   Service.Pending
 -   Service.Running
 -   Service.Kill
 -   Service.KillAll
 -   Service.Clear
 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/).
 ## 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.
 ## Troubleshooting
 -   **It says that it isn't connected.**
    - In some circumstances, you must set the server ip address or hostname in the settings section (gear icon).
 -   **The download  doesn't start.**
    - Simply, yt-dlp process takes a lot of time to fire up. (yt-dlp isn't fast especially if you have a lower-end/low-power NAS/server/desktop. Furthermore some yt-dlp builds are slower than others)
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,11 +0,0 @@
 services:
  yt-dlp-webui:
    image: marcobaobao/yt-dlp-webui
    ports:
      - 3033:3033
    volumes:
      - <your dir>:/downloads # replace <your dir> with a directory on your host system
      - <your dir>:/config    # directory where config.yml will be stored
    healthcheck:
      test: curl -f http://localhost:3033 || exit 1
    restart: unless-stopped
--- a/examples/docker-compose-nginx/app.conf
+++ b/examples/docker-compose-nginx/app.conf
@@ -1,27 +0,0 @@
 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;
    }
 }
--- a/examples/docker-compose-nginx/docker-compose.yml
+++ b/examples/docker-compose-nginx/docker-compose.yml
@@ -1,15 +0,0 @@
 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
--- a/flake.lock
+++ b/flake.lock
@@ -1,149 +0,0 @@
 {
  "nodes": {
    "flake-compat": {
      "flake": false,
      "locked": {
        "lastModified": 1696426674,
        "narHash": "sha256-kvjfFW7WAETZlt09AgDn1MrtKzP7t90Vf7vypd3OL1U=",
        "owner": "edolstra",
        "repo": "flake-compat",
        "rev": "0f9255e01c2351cc7d116c072cb317785dd33b33",
        "type": "github"
      },
      "original": {
        "owner": "edolstra",
        "repo": "flake-compat",
        "type": "github"
      }
    },
    "flake-parts": {
      "inputs": {
        "nixpkgs-lib": "nixpkgs-lib"
      },
      "locked": {
        "lastModified": 1722555600,
        "narHash": "sha256-XOQkdLafnb/p9ij77byFQjDf5m5QYl9b2REiVClC+x4=",
        "owner": "hercules-ci",
        "repo": "flake-parts",
        "rev": "8471fe90ad337a8074e957b69ca4d0089218391d",
        "type": "github"
      },
      "original": {
        "owner": "hercules-ci",
        "repo": "flake-parts",
        "type": "github"
      }
    },
    "gitignore": {
      "inputs": {
        "nixpkgs": [
          "pre-commit-hooks-nix",
          "nixpkgs"
        ]
      },
      "locked": {
        "lastModified": 1709087332,
        "narHash": "sha256-HG2cCnktfHsKV0s4XW83gU3F57gaTljL9KNSuG6bnQs=",
        "owner": "hercules-ci",
        "repo": "gitignore.nix",
        "rev": "637db329424fd7e46cf4185293b9cc8c88c95394",
        "type": "github"
      },
      "original": {
        "owner": "hercules-ci",
        "repo": "gitignore.nix",
        "type": "github"
      }
    },
    "nixpkgs": {
      "locked": {
        "lastModified": 1723637854,
        "narHash": "sha256-med8+5DSWa2UnOqtdICndjDAEjxr5D7zaIiK4pn0Q7c=",
        "owner": "NixOS",
        "repo": "nixpkgs",
        "rev": "c3aa7b8938b17aebd2deecf7be0636000d62a2b9",
        "type": "github"
      },
      "original": {
        "owner": "NixOS",
        "ref": "nixos-unstable",
        "repo": "nixpkgs",
        "type": "github"
      }
    },
    "nixpkgs-lib": {
      "locked": {
        "lastModified": 1722555339,
        "narHash": "sha256-uFf2QeW7eAHlYXuDktm9c25OxOyCoUOQmh5SZ9amE5Q=",
        "type": "tarball",
        "url": "https://github.com/NixOS/nixpkgs/archive/a5d394176e64ab29c852d03346c1fc9b0b7d33eb.tar.gz"
      },
      "original": {
        "type": "tarball",
        "url": "https://github.com/NixOS/nixpkgs/archive/a5d394176e64ab29c852d03346c1fc9b0b7d33eb.tar.gz"
      }
    },
    "nixpkgs-stable": {
      "locked": {
        "lastModified": 1720386169,
        "narHash": "sha256-NGKVY4PjzwAa4upkGtAMz1npHGoRzWotlSnVlqI40mo=",
        "owner": "NixOS",
        "repo": "nixpkgs",
        "rev": "194846768975b7ad2c4988bdb82572c00222c0d7",
        "type": "github"
      },
      "original": {
        "owner": "NixOS",
        "ref": "nixos-24.05",
        "repo": "nixpkgs",
        "type": "github"
      }
    },
    "nixpkgs_2": {
      "locked": {
        "lastModified": 1719082008,
        "narHash": "sha256-jHJSUH619zBQ6WdC21fFAlDxHErKVDJ5fpN0Hgx4sjs=",
        "owner": "NixOS",
        "repo": "nixpkgs",
        "rev": "9693852a2070b398ee123a329e68f0dab5526681",
        "type": "github"
      },
      "original": {
        "owner": "NixOS",
        "ref": "nixpkgs-unstable",
        "repo": "nixpkgs",
        "type": "github"
      }
    },
    "pre-commit-hooks-nix": {
      "inputs": {
        "flake-compat": "flake-compat",
        "gitignore": "gitignore",
        "nixpkgs": "nixpkgs_2",
        "nixpkgs-stable": "nixpkgs-stable"
      },
      "locked": {
        "lastModified": 1723803910,
        "narHash": "sha256-yezvUuFiEnCFbGuwj/bQcqg7RykIEqudOy/RBrId0pc=",
        "owner": "cachix",
        "repo": "pre-commit-hooks.nix",
        "rev": "bfef0ada09e2c8ac55bbcd0831bd0c9d42e651ba",
        "type": "github"
      },
      "original": {
        "owner": "cachix",
        "repo": "pre-commit-hooks.nix",
        "type": "github"
      }
    },
    "root": {
      "inputs": {
        "flake-parts": "flake-parts",
        "nixpkgs": "nixpkgs",
        "pre-commit-hooks-nix": "pre-commit-hooks-nix"
      }
    }
  },
  "root": "root",
  "version": 7
 }
--- a/flake.nix
+++ b/flake.nix
@@ -1,51 +0,0 @@
 {
  description = "A terrible web ui for yt-dlp. Designed to be self-hosted.";
  inputs = {
    flake-parts.url = "github:hercules-ci/flake-parts";
    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
    pre-commit-hooks-nix.url = "github:cachix/pre-commit-hooks.nix";
  };
  outputs = inputs@{ self, flake-parts, ... }:
    flake-parts.lib.mkFlake { inherit inputs; } {
      imports = [
        inputs.pre-commit-hooks-nix.flakeModule
      ];
      systems = [
        "x86_64-linux"
      ];
      perSystem = { config, self', pkgs, ... }: {
        packages = {
          yt-dlp-web-ui-frontend = pkgs.callPackage ./nix/frontend.nix { };
          default = pkgs.callPackage ./nix/server.nix {
            inherit (self'.packages) yt-dlp-web-ui-frontend;
          };
        };
        checks = import ./nix/tests { inherit self pkgs; };
        pre-commit = {
          check.enable = true;
          settings = {
            hooks = {
              ${self'.formatter.pname}.enable = true;
              deadnix.enable = true;
              nil.enable = true;
              statix.enable = true;
            };
          };
        };
        devShells.default = pkgs.callPackage ./nix/devShell.nix {
          inputsFrom = [ config.pre-commit.devShell ];
        };
        formatter = pkgs.nixpkgs-fmt;
      };
      flake = {
        nixosModules.default = import ./nix/module.nix self.packages;
      };
    };
 }
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,7 +5,7 @@
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/x-icon" href="./src/assets/favicon.ico">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <title>yt-dlp Web UI</title>
 </head>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,39 +1,38 @@
 {
  "name": "yt-dlp-webui",
-  "version": "3.2.5",
+  "version": "2.10.0",
  "description": "Frontend compontent of yt-dlp-webui",
  "scripts": {
-    "dev": "vite --host 0.0.0.0",
+    "dev": "vite",
    "build": "vite build"
  },
-  "type": "module",
+  "author": "marcopeocchi",
-  "author": "marcopiovanello",
+  "license": "MPL-2.0",
  "license": "GPL-3.0-only",
  "private": true,
  "dependencies": {
-    "@emotion/react": "^11.14.0",
+    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.14.0",
+    "@emotion/styled": "^11.11.0",
-    "@fontsource/roboto": "^5.0.13",
+    "@fontsource/roboto": "^5.0.8",
-    "@fontsource/roboto-mono": "^5.0.18",
+    "@fontsource/roboto-mono": "^5.0.16",
-    "@mui/icons-material": "^6.2.0",
+    "@mui/icons-material": "^5.15.4",
-    "@mui/material": "^6.2.0",
+    "@mui/material": "^5.15.4",
-    "fp-ts": "^2.16.5",
+    "fp-ts": "^2.16.2",
-    "react": "^19.0.0",
+    "million": "^2.6.4",
-    "react-dom": "^19.0.0",
+    "react": "^18.2.0",
-    "react-router-dom": "^6.23.1",
+    "react-dom": "^18.2.0",
-    "react-virtuoso": "^4.7.11",
+    "react-router-dom": "^6.21.2",
-    "jotai": "^2.10.3",
+    "recoil": "^0.7.7",
    "rxjs": "^7.8.1"
  },
  "devDependencies": {
-    "@modyfi/vite-plugin-yaml": "^1.1.0",
+    "@modyfi/vite-plugin-yaml": "^1.0.4",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.11.4",
-    "@types/react": "^19.0.1",
+    "@types/react": "^18.2.48",
-    "@types/react-dom": "^19.0.2",
+    "@types/react-dom": "^18.2.18",
    "@types/react-helmet": "^6.1.11",
    "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react-swc": "^3.7.2",
+    "@vitejs/plugin-react-swc": "^3.5.0",
-    "typescript": "^5.7.2",
+    "typescript": "^5.3.3",
-    "vite": "^6.0.3"
+    "vite": "^5.0.11"
  }
 }
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/src/assets/favicon.ico
+++ b/frontend/src/assets/favicon.ico
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,11 +1,11 @@
 import { RouterProvider } from 'react-router-dom'
-import { Provider } from 'jotai'
+import { RecoilRoot } from 'recoil'
 import { router } from './router'
 export function App() {
  return (
-    <Provider>
+    <RecoilRoot>
      <RouterProvider router={router} />
-    </Provider>
+    </RecoilRoot>
  )
 }
--- a/frontend/src/Layout.tsx
+++ b/frontend/src/Layout.tsx
@@ -1,12 +1,10 @@
 import { ThemeProvider } from '@emotion/react'
 import ChevronLeft from '@mui/icons-material/ChevronLeft'
 import CloudDownloadIcon from '@mui/icons-material/CloudDownload'
 import Dashboard from '@mui/icons-material/Dashboard'
-import LiveTvIcon from '@mui/icons-material/LiveTv'
+import DownloadIcon from '@mui/icons-material/Download'
 import Menu from '@mui/icons-material/Menu'
 import SettingsIcon from '@mui/icons-material/Settings'
-import TerminalIcon from '@mui/icons-material/Terminal'
+import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
 import UpdateIcon from '@mui/icons-material/Update'
 import { Box, createTheme } from '@mui/material'
 import CssBaseline from '@mui/material/CssBaseline'
 import Divider from '@mui/material/Divider'
@@ -18,38 +16,37 @@ 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 { useAtomValue } from 'jotai'
+import { Suspense, useMemo, useState } from 'react'
 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 Footer from './components/Footer'
+import FreeSpaceIndicator from './components/FreeSpaceIndicator'
 import Logout from './components/Logout'
 import SocketSubscriber from './components/SocketSubscriber'
 import ThemeToggler from './components/ThemeToggler'
 import { useI18n } from './hooks/useI18n'
 import Toaster from './providers/ToasterProvider'
-import { getAccentValue } from './utils'
+import TerminalIcon from '@mui/icons-material/Terminal'
 export default function Layout() {
  const [open, setOpen] = useState(false)
-  const settings = useAtomValue(settingsState)
+  const settings = useRecoilValue(settingsState)
  const isConnected = useRecoilValue(connectedState)
  const mode = settings.theme
  const theme = useMemo(() =>
    createTheme({
      palette: {
        mode: settings.theme,
        primary: {
          main: getAccentValue(settings.accent, settings.theme)
        },
        background: {
          default: settings.theme === 'light' ? grey[50] : '#121212'
        },
      },
-    }), [settings.theme, settings.accent]
+    }), [settings.theme]
  )
  const toggleDrawer = () => setOpen(state => !state)
@@ -58,7 +55,6 @@ export default function Layout() {
  return (
    <ThemeProvider theme={theme}>
      <title>{settings.appTitle}</title>
      <SocketSubscriber />
      <Box sx={{ display: 'flex' }}>
        <CssBaseline />
@@ -85,6 +81,21 @@ export default function Layout() {
            >
              {settings.appTitle}
            </Typography>
            <Suspense fallback={i18n.t('loadingLabel')}>
              <FreeSpaceIndicator />
            </Suspense>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              flexWrap: 'wrap',
              marginLeft: '4px',
              gap: 3,
            }}>
              <SettingsEthernet />
              <span>
                {isConnected ? settings.serverAddr : i18n.t('notConnectedText')}
              </span>
            </div>
          </Toolbar>
        </AppBar>
        <Drawer variant="permanent" open={open}>
@@ -115,7 +126,7 @@ export default function Layout() {
                <ListItemText primary={i18n.t('homeButtonLabel')} />
              </ListItemButton>
            </Link>
-            {/* <Link to={'/archive'} style={
+            <Link to={'/archive'} style={
              {
                textDecoration: 'none',
                color: mode === 'dark' ? '#ffffff' : '#000000DE'
@@ -123,46 +134,7 @@ export default function Layout() {
            }>
              <ListItemButton>
                <ListItemIcon>
-                  <ArchiveIcon />
+                  <DownloadIcon />
                </ListItemIcon>
                <ListItemText primary={i18n.t('archiveButtonLabel')} />
              </ListItemButton>
            </Link> */}
            <Link to={'/filebrowser'} style={
              {
                textDecoration: 'none',
                color: mode === 'dark' ? '#ffffff' : '#000000DE'
              }
            }>
              <ListItemButton>
                <ListItemIcon>
                  <CloudDownloadIcon />
                </ListItemIcon>
                <ListItemText primary={i18n.t('archiveButtonLabel')} />
              </ListItemButton>
            </Link>
            <Link to={'/subscriptions'} style={
              {
                textDecoration: 'none',
                color: mode === 'dark' ? '#ffffff' : '#000000DE'
              }
            }>
              <ListItemButton>
                <ListItemIcon>
                  <UpdateIcon />
                </ListItemIcon>
                <ListItemText primary={i18n.t('subscriptionsButtonLabel')} />
              </ListItemButton>
            </Link>
            <Link to={'/monitor'} style={
              {
                textDecoration: 'none',
                color: mode === 'dark' ? '#ffffff' : '#000000DE'
              }
            }>
              <ListItemButton>
                <ListItemIcon>
                  <LiveTvIcon />
                </ListItemIcon>
                <ListItemText primary={i18n.t('archiveButtonLabel')} />
              </ListItemButton>
@@ -209,7 +181,6 @@ export default function Layout() {
          <Outlet />
        </Box>
      </Box>
      <Footer />
      <Toaster />
    </ThemeProvider>
  )
--- a/frontend/src/assets/i18n.yaml
+++ b/frontend/src/assets/i18n.yaml
@@ -1,22 +1,578 @@
 ---
 # Check the i18n src/assets/i18n folder.
 #
 # This file maps the language name to its translations file
 # english -> /src/assets/i18n/en_US.yaml
 languages:
-  catalan: ca.yaml
+  english:
-  german: de.yaml
+    urlInput: Video URL
-  english: en_US.yaml
+    statusTitle: Status
-  spanish: es.yaml
+    statusReady: Ready
-  french: fr.yaml
+    selectFormatButton: Select format
-  italian: it_IT.yaml
+    startButton: Start
-  japanese: ja.yaml
+    abortAllButton: Abort All
-  korean: ko.yaml
+    updateBinButton: Update yt-dlp binary
-  polish: pl.yaml
+    darkThemeButton: Dark theme
-  portuguese-br: pt_BR.yaml
+    lightThemeButton: Light theme
-  russian: ru.yaml
+    settingsAnchor: Settings
-  swedish: sv.yaml
+    serverAddressTitle: Server address
-  ukrainian: uk.yaml
+    serverPortTitle: Port
-  chinese: zh_CN.yaml
+    extractAudioCheckbox: Extract audio
-  hungarian: hu.yaml
+    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
    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)
    restartAppMessage: Needs a page reload to take effect
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    newDownloadButton: New download
    homeButtonLabel: Home
    archiveButtonLabel: Archive
    settingsButtonLabel: Settings
    rpcAuthenticationLabel: RPC authentication
    themeTogglerLabel: Theme toggler
    loadingLabel: Loading...
    appTitle: App title
    savedTemplates: Saved templates
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
    logsTitle: 'Logs'
    awaitingLogs: 'Awaiting logs...'
  german:
    urlInput: Video URL
    statusTitle: Status
    statusReady: Bereit
    selectFormatButton: Format auswählen
    startButton: Start
    abortAllButton: Alle Abbrechen
    updateBinButton: yt-dlp Binärdatei aktualisieren
    darkThemeButton: Dunkel Modus
    lightThemeButton: Hell Modus
    settingsAnchor: Einstellungen
    serverAddressTitle: Server Adresse
    serverPortTitle: Port
    extractAudioCheckbox: Audio extrahieren
    noMTimeCheckbox: Datei-Änderungszeitpunkt nicht festlegen
    bgReminder: Sobald Sie diese Seite schließen, wird der Download im Hintergrund fortgesetzt.
    toastConnected: 'Verbunden mit '
    toastUpdated: yt-dlp Binärdatei aktualisiert!
    formatSelectionEnabler: Video/Audio Format auswählbar
    themeSelect: 'Modus'
    languageSelect: 'Sprache'
    overridesAnchor: Überschreibungen
    pathOverrideOption: Ausgabe-Pfad Überschreibung aktivieren
    filenameOverrideOption: Ausgabe-Dateiname Überschreibung aktivieren
    customFilename: Custom filemame (leave blank to use default)
    customPath: Benutzerdefinierter Pfad
    customArgs: Benutzerdefinierte yt-dlp Argumente aktivieren (viel Macht = viel Verantwortung)
    customArgsInput: Benutzerdefinierte yt-dlp Argumente
    rpcConnErr: Fehler beim Verbinden mit RPC Server
    splashText: Keine aktiven Downloads
    archiveTitle: Archiv
    clipboardAction: URL in Zwischenablage kopiert
    playlistCheckbox: Playlist herunterladen (es wird einige Zeit dauern, nach dem Absenden können Sie dieses Fenster schließen)
    restartAppMessage: Erfordert ein Neuladen der Seite, um wirksam zu werden
    servedFromReverseProxyCheckbox: Ist hinter einem Reverse Proxy Unterordner
    newDownloadButton: Neuer Download
    homeButtonLabel: Home
    archiveButtonLabel: Archiv
    settingsButtonLabel: Einstellungen
    rpcAuthenticationLabel: RPC Authentifizierung
    themeTogglerLabel: Modus Umschalter
    loadingLabel: Lädt...
    appTitle: App Titel
    savedTemplates: Gespeicherte Vorlage
    templatesEditor: Vorlagen Bearbeiter
    templatesEditorNameLabel: Vorlagen Name
    templatesEditorContentLabel: Vorlagen Inhalt
    logsTitle: 'Logs'
    awaitingLogs: 'Awaiting logs...'
  french:
    urlInput: URL vidéo de YouTube ou d'un autre service pris en charge
    statusTitle: Statut
    statusReady: Prêt
    selectFormatButton: Sélectionner le format
    startButton: Démarrer
    abortAllButton: Tout arrêter
    updateBinButton: Mettre à jour l'exécutable yt-dlp
    darkThemeButton: Thème sombre
    lightThemeButton: Thème clair
    settingsAnchor: Paramètres
    serverAddressTitle: Adresse du serveur
    serverPortTitle: Port
    extractAudioCheckbox: Extraire l'audio
    noMTimeCheckbox: Ne pas définir le temps de modification du fichier
    bgReminder: Une fois que vous aurez fermé cette page, le téléchargement continuera en arrière-plan.
    toastConnected: 'Connecté à '
    toastUpdated: L'exécutable yt-dlp a été mis à jour !
    formatSelectionEnabler: Activer la sélection des formats vidéo/audio
    themeSelect: 'Thème'
    languageSelect: 'Langue'
    overridesAnchor: Remplacer
    pathOverrideOption: Activer le remplacement du chemin de sortie
    filenameOverrideOption: Activer le remplacement du nom du fichier de sortie
    customFilename: Nom de fichier personnalisé (laisser vide pour utiliser le nom par défaut)
    customPath: Chemin personnalisé
    customArgs: Activer les args personnalisés yt-dlp (grand pouvoir = grandes responsabilités)
    customArgsInput: Arguments yt-dlp personnalisés
    rpcConnErr: Erreur lors de la connexion au serveur RPC
    splashText: Aucun téléchargement actif
    archiveTitle: Archive
    clipboardAction: URL copiée dans le presse-papiers
    playlistCheckbox: Télécharger la liste de lecture (cela prendra du temps, vous pouvez fermer cette fenêtre après l'avoir validée)
    restartAppMessage: Nécessite un rechargement de la page pour prendre effet
    servedFromReverseProxyCheckbox: Est derrière un sous-dossier de proxy inverse
    notConnectedText: not connected
    settingsLabel: Settings
    newDownloadButton: New download
    homeButtonLabel: Home
    archiveButtonLabel: Archive
    settingsButtonLabel: Settings
    rpcAuthenticationLabel: RPC authentication
    themeTogglerLabel: Theme toggler
    loadingLabel: Loading...
    appTitle: Nom de l'application
    savedTemplates: Saved templates
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
    logsTitle: 'Logs'
    awaitingLogs: 'Awaiting logs...'
  italian:
    urlInput: URL Video
    statusTitle: Stato
    startButton: Inizia
    statusReady: Pronto
    abortAllButton: Termina tutto
    updateBinButton: Aggiorna yt-dlp
    darkThemeButton: Tema scuro
    lightThemeButton: Tema chiaro
    settingsAnchor: Impostazioni
    serverAddressTitle: Indirizzo server
    serverPortTitle: Porta
    extractAudioCheckbox: Estrai l'audio
    noMTimeCheckbox: Non impostare la proprietà "Data ultima modifica"
    bgReminder: Chiusa questa UI il download continuerà in background.
    toastConnected: 'Connesso a '
    toastUpdated: yt-dlp aggiornato con successo!
    formatSelectionEnabler: Abilita la selezione dei formati audio/video
    themeSelect: 'Tema'
    languageSelect: 'Lingua'
    overridesAnchor: Sovrascritture
    pathOverrideOption: Abilita sovrascrittura percorso di output
    filenameOverrideOption: Abilita sovrascrittura del nome del file di output
    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
    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)
    restartAppMessage: La finestra deve essere ricaricata perché abbia effetto
    servedFromReverseProxyCheckbox: Is behind a reverse proxy
    newDownloadButton: Nuovo download
    homeButtonLabel: Home
    archiveButtonLabel: Archive
    settingsButtonLabel: Settings
    rpcAuthenticationLabel: RPC authentication
    themeTogglerLabel: Theme toggler
    loadingLabel: Loading...
    appTitle: Titolo applicazione
    savedTemplates: Template salvati
    templatesEditor: Editor template
    templatesEditorNameLabel: Nome template
    templatesEditorContentLabel: Contentunto template
    logsTitle: 'Logs'
    awaitingLogs: 'Awaiting logs...'
  chinese:
    urlInput: 视频 URL
    statusTitle: 状态
    statusReady: 就绪
    selectFormatButton: 选择格式
    startButton: 开始
    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: 下载播放列表（可能需要一段时间，提交后可以关闭页面等待）
    restartAppMessage: 需要刷新页面才能生效
    servedFromReverseProxyCheckbox: 处于反向代理的子目录后
    newDownloadButton: 新下载
    homeButtonLabel: 主页
    archiveButtonLabel: 归档
    settingsButtonLabel: 设置
    rpcAuthenticationLabel: RPC 身份验证
    themeTogglerLabel: 主题切换
    loadingLabel: 正在加载…
    appTitle: App 标题
    savedTemplates: 保存模板
    templatesEditor: 模板编辑器
    templatesEditorNameLabel: 模板名称
    templatesEditorContentLabel: 模板内容
    logsTitle: '日志'
    awaitingLogs: '正在等待日志…'
  spanish:
    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)
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    newDownloadButton: New download
    homeButtonLabel: Home
    archiveButtonLabel: Archive
    settingsButtonLabel: Settings
    rpcAuthenticationLabel: RPC authentication
    themeTogglerLabel: Theme toggler
    loadingLabel: Loading...
    appTitle: App title
    savedTemplates: Saved templates
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
    logsTitle: 'Logs'
    awaitingLogs: 'Awaiting logs...'
  russian:
    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)
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    newDownloadButton: New download
    homeButtonLabel: Home
    archiveButtonLabel: Archive
    settingsButtonLabel: Settings
    rpcAuthenticationLabel: RPC authentication
    themeTogglerLabel: Theme toggler
    loadingLabel: Loading...
    appTitle: App title
    savedTemplates: Saved templates
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
    logsTitle: 'Logs'
    awaitingLogs: 'Awaiting logs...'
  korean:
    urlInput: YouTube나 다른 지원되는 사이트의 URL
    statusTitle: 상태
    startButton: 시작
    statusReady: 준비됨
    abortAllButton: 모두 중단
    updateBinButton: yt-dlp 바이너리 업데이트
    darkThemeButton: 다크 모드
    lightThemeButton: 라이트 모드
    settingsAnchor: 설정
    serverAddressTitle: 서버 주소
    serverPortTitle: Port
    extractAudioCheckbox: 오디오 추출
    noMTimeCheckbox: 파일 수정 시간을 설정하지 않음
    bgReminder: 이 페이지를 닫아도 백그라운드에서 다운로드가 계속됩니다
    toastConnected: '다음으로 연결됨 '
    toastUpdated: yt-dlp 바이너리를 업데이트 했습니다
    formatSelectionEnabler: 비디오/오디오 포멧 옵션 표시
    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
    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)
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    newDownloadButton: New download
    homeButtonLabel: Home
    archiveButtonLabel: Archive
    settingsButtonLabel: Settings
    rpcAuthenticationLabel: RPC authentication
    themeTogglerLabel: Theme toggler
    loadingLabel: Loading...
    appTitle: App title
    savedTemplates: Saved templates
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
    logsTitle: 'Logs'
    awaitingLogs: 'Awaiting logs...'
  japanese:
    urlInput: YouTubeまたはサポート済み動画のURL
    statusTitle: 状態
    statusReady: 準備
    selectFormatButton: フォーマット選択
    startButton: 開始
    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: 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)
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    newDownloadButton: New download
    homeButtonLabel: Home
    archiveButtonLabel: Archive
    settingsButtonLabel: Settings
    rpcAuthenticationLabel: RPC authentication
    themeTogglerLabel: Theme toggler
    loadingLabel: Loading...
    appTitle: App title
    savedTemplates: Saved templates
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
    logsTitle: 'Logs'
    awaitingLogs: 'Awaiting logs...'
  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)
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    newDownloadButton: New download
    homeButtonLabel: Home
    archiveButtonLabel: Archive
    settingsButtonLabel: Settings
    rpcAuthenticationLabel: RPC authentication
    themeTogglerLabel: Theme toggler
    loadingLabel: Loading...
    appTitle: App title
    savedTemplates: Saved templates
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
    logsTitle: 'Logs'
    awaitingLogs: 'Awaiting logs...'
  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)
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    newDownloadButton: New download
    homeButtonLabel: Home
    archiveButtonLabel: Archive
    settingsButtonLabel: Settings
    rpcAuthenticationLabel: RPC authentication
    themeTogglerLabel: Theme toggler
    loadingLabel: Loading...
    appTitle: App title
    savedTemplates: Saved templates
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
    logsTitle: 'Logs'
    awaitingLogs: 'Awaiting logs...'
  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)
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    newDownloadButton: New download
    homeButtonLabel: Home
    archiveButtonLabel: Archive
    settingsButtonLabel: Settings
    rpcAuthenticationLabel: RPC authentication
    themeTogglerLabel: Theme toggler
    loadingLabel: Loading...
    appTitle: App title
    savedTemplates: Saved templates
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
    logsTitle: 'Logs'
    awaitingLogs: 'Awaiting logs...'
--- a/frontend/src/assets/i18n/ca.yaml
+++ b/frontend/src/assets/i18n/ca.yaml
@@ -1,80 +0,0 @@
 keys:
  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
  autoFileExtensionOption: Afegeix l'extensió de fitxer automàticament
  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)
  servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
  newDownloadButton: New download
  homeButtonLabel: Home
  archiveButtonLabel: Archive
  settingsButtonLabel: Settings
  rpcAuthenticationLabel: RPC authentication
  themeTogglerLabel: Theme toggler
  loadingLabel: Loading...
  appTitle: App title
  savedTemplates: Saved templates
  templatesEditor: Templates editor
  templatesEditorNameLabel: Template name
  templatesEditorContentLabel: Template content
  logsTitle: 'Logs'
  awaitingLogs: 'Awaiting logs...'
  bulkDownload: 'Download files in a zip archive'
  templatesReloadInfo: To register a new template it might need a page reload.
  livestreamURLInput: Livestream URL
  livestreamStatusWaiting: Waiting/Wait start
  livestreamStatusDownloading: Downloading
  livestreamStatusCompleted: Completed
  livestreamStatusErrored: Errored
  livestreamStatusUnknown: Unknown
  livestreamNoMonitoring: No livestreams monitored
  livestreamDownloadInfo: |
    This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
    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'
  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
  rpcPollingTimeTitle: RPC polling time
  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
  generalDownloadSettings: 'Ajustes generales de descarga'
  deleteCookies: Delete Cookies
  noFilesFound: 'No Files Found'
  tableView: 'Table View'
  deleteSelected: 'Delete selected'
  subscriptionsButtonLabel: 'Subscriptions'
  subscriptionsEmptyLabel: 'No subscriptions'
  subscriptionsURLInput: 'Channel URL'
  subscriptionsInfo: |
    Subscribes to a defined channel. Only the last video will be downloaded.
    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
  cronExpressionLabel: 'Cron expression'
  editButtonLabel: 'Edit'
  newSubscriptionButton: New subscription
--- a/frontend/src/assets/i18n/de.yaml
+++ b/frontend/src/assets/i18n/de.yaml
@@ -1,82 +0,0 @@
 keys:
  urlInput: Video URL
  statusTitle: Status
  statusReady: Bereit
  selectFormatButton: Format auswählen
  startButton: Start
  abortAllButton: Alle Abbrechen
  updateBinButton: yt-dlp Binärdatei aktualisieren
  darkThemeButton: Dunkler Modus
  lightThemeButton: Heller Modus
  settingsAnchor: Einstellungen
  serverAddressTitle: Adresse des Servers
  serverPortTitle: Port
  extractAudioCheckbox: Audio extrahieren
  noMTimeCheckbox: Datei-Änderungszeitpunkt nicht festlegen
  bgReminder: Sobald Sie diese Seite schließen, wird der Download im Hintergrund fortgesetzt.
  toastConnected: 'Verbunden mit '
  toastUpdated: yt-dlp Binärdatei aktualisiert!
  formatSelectionEnabler: Video/Audio Format auswählbar
  themeSelect: 'Modus'
  languageSelect: 'Sprache'
  overridesAnchor: Überschreibungen
  pathOverrideOption: Ausgabe-Pfad Überschreibung aktivieren
  filenameOverrideOption: Ausgabe-Dateiname Überschreibung aktivieren
  autoFileExtensionOption: Dateierweiterung automatisch hinzufügen
  customFilename: Benutzerdefinierter Dateiname (Leer lassen um Standardwert zu nutzen)
  customPath: Benutzerdefinierter Pfad
  customArgs: Benutzerdefinierte yt-dlp Argumente aktivieren (Auf viel Macht folgt große Verantwortung)
  customArgsInput: Benutzerdefinierte yt-dlp Argumente
  rpcConnErr: Fehler beim Verbinden mit RPC Server
  splashText: Keine aktiven Downloads
  archiveTitle: Archiv
  clipboardAction: URL in Zwischenablage kopiert
  playlistCheckbox: Playlist herunterladen (es wird einige Zeit dauern, nach dem Absenden können Sie dieses Fenster schließen)
  restartAppMessage: Erfordert ein Neuladen der Seite, um wirksam zu werden
  servedFromReverseProxyCheckbox: Ist hinter einem Reverse Proxy Unterordner
  newDownloadButton: Neuer Download
  homeButtonLabel: Home
  archiveButtonLabel: Archiv
  settingsButtonLabel: Einstellungen
  rpcAuthenticationLabel: RPC Authentifizierung
  themeTogglerLabel: Modus Umschalter
  loadingLabel: Lädt...
  appTitle: App Titel
  savedTemplates: Gespeicherte Vorlage
  templatesEditor: Vorlageneditor
  templatesEditorNameLabel: Vorlagen Name
  templatesEditorContentLabel: Vorlagen Inhalt
  logsTitle: 'Logausgabe'
  awaitingLogs: 'Warte auf Log ...'
  bulkDownload: 'Alles in einem ZIP-Archiv herunterladen'
  rpcPollingTimeTitle: RPC-Abfragezeit
  rpcPollingTimeDescription: Ein kürzerer Intervall führt zu einer höheren CPU-Auslastung (Server- und Clientseite)
  templatesReloadInfo: Um eine neue Vorlage zu registrieren, muss die Seite möglicherweise neu geladen werden.
  livestreamURLInput: Livestream URL
  livestreamStatusWaiting: Warte auf Start
  livestreamStatusDownloading: Herunterladen
  livestreamStatusCompleted: Abgeschlossen
  livestreamStatusErrored: Fehlerhaft
  livestreamStatusUnknown: Status unbekannt
  livestreamNoMonitoring: Aktuell wird kein Livestream überwacht
  livestreamDownloadInfo: |
    Damit wird der noch nicht gestartete Livestream überwacht. Jeder Prozess wird mit --wait-for-video 10 ausgeführt.
    Wenn ein bereits gestarteter Livestream vorhanden ist, wird er zwar heruntergeladen, aber sein Fortschritt wird nicht verfolgt.
    Sobald der Livestream gestartet ist, wird er auf der Download-Seite angezeigt.
  livestreamExperimentalWarning: Dieses Feature ist aktuell noch experimentell, sei vorsichtig, denn es könnte sein, dass etwas nicht genau funktioniert!
  accentSelect: 'Farbtöne'
  urlBase: URL-Basis für Reverse-Proxy-Unterstützung (Unterverzeichnis), standardmäßig leer
  generalDownloadSettings: 'Allgemeine Download Einstellungen'
  deleteCookies: 'Cookies löschen'
  noFilesFound: 'Keine Dateien gefunden'
  tableView: 'Tabellenansicht'
  deleteSelected: 'Ausgewählte löschen'
  subscriptionsButtonLabel: 'Subscriptions'
  subscriptionsEmptyLabel: 'No subscriptions'
  subscriptionsURLInput: 'Channel URL'
  subscriptionsInfo: |
    Subscribes to a defined channel. Only the last video will be downloaded.
    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
  cronExpressionLabel: 'Cron expression'
  editButtonLabel: 'Edit'
  newSubscriptionButton: New subscription
--- a/frontend/src/assets/i18n/en_US.yaml
+++ b/frontend/src/assets/i18n/en_US.yaml
@@ -1,83 +0,0 @@
 keys:
  urlInput: Video URL (one per line)
  statusTitle: Status
  statusReady: Ready
  selectFormatButton: Select format
  startButton: Start
  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
  autoFileExtensionOption: Automatically add file extension
  customFilename: Custom filename (leave blank to use default)
  customPath: Custom path
  customArgs: Enable custom yt-dlp args (great power = great responsibilities)
  customArgsInput: Custom yt-dlp arguments
  rpcConnErr: Error while connecting to RPC server
  splashText: No active downloads
  archiveTitle: Archive
  clipboardAction: Copied URL to clipboard
  playlistCheckbox: Download playlist
  restartAppMessage: Needs a page reload to take effect
  servedFromReverseProxyCheckbox: Is behind a reverse proxy
  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
  newDownloadButton: New download
  homeButtonLabel: Home
  archiveButtonLabel: Archive
  settingsButtonLabel: Settings
  rpcAuthenticationLabel: RPC authentication
  themeTogglerLabel: Theme toggler
  loadingLabel: Loading...
  appTitle: App title
  savedTemplates: Saved templates
  templatesEditor: Templates editor
  templatesEditorNameLabel: Template name
  templatesEditorContentLabel: Template content
  logsTitle: 'Logs'
  awaitingLogs: 'Awaiting logs...'
  bulkDownload: 'Download files in a zip archive'
  rpcPollingTimeTitle: RPC polling time
  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
  templatesReloadInfo: To register a new template it might need a page reload.
  livestreamURLInput: Livestream URL
  livestreamStatusWaiting: Waiting/Wait start
  livestreamStatusDownloading: Downloading
  livestreamStatusCompleted: Completed
  livestreamStatusErrored: Errored
  livestreamStatusUnknown: Unknown
  livestreamNoMonitoring: No livestreams monitored
  livestreamDownloadInfo: |
    This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
    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'
  generalDownloadSettings: 'General Download Settings'
  deleteCookies: Delete Cookies
  noFilesFound: 'No Files Found'
  tableView: 'Table View'
  deleteSelected: 'Delete selected'
  subscriptionsButtonLabel: 'Subscriptions'
  subscriptionsEmptyLabel: 'No subscriptions'
  subscriptionsURLInput: 'Channel URL'
  subscriptionsInfo: |
    Subscribes to a defined channel. Only the last video will be downloaded.
    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
  cronExpressionLabel: 'Cron expression'
  editButtonLabel: 'Edit'
  newSubscriptionButton: New subscription
  clearCompletedButton: 'Clear completed'
--- a/frontend/src/assets/i18n/es.yaml
+++ b/frontend/src/assets/i18n/es.yaml
@@ -1,80 +0,0 @@
 keys:
  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
  autoFileExtensionOption: Agregar extensión de archivo automáticamente
  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)
  servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
  newDownloadButton: New download
  homeButtonLabel: Home
  archiveButtonLabel: Archive
  settingsButtonLabel: Settings
  rpcAuthenticationLabel: RPC authentication
  themeTogglerLabel: Theme toggler
  loadingLabel: Loading...
  appTitle: App title
  savedTemplates: Saved templates
  templatesEditor: Templates editor
  templatesEditorNameLabel: Template name
  templatesEditorContentLabel: Template content
  logsTitle: 'Logs'
  awaitingLogs: 'Awaiting logs...'
  bulkDownload: 'Download files in a zip archive'
  templatesReloadInfo: To register a new template it might need a page reload.
  livestreamURLInput: Livestream URL
  livestreamStatusWaiting: Waiting/Wait start
  livestreamStatusDownloading: Downloading
  livestreamStatusCompleted: Completed
  livestreamStatusErrored: Errored
  livestreamStatusUnknown: Unknown
  livestreamNoMonitoring: No livestreams monitored
  livestreamDownloadInfo: |
    This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
    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'
  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
  rpcPollingTimeTitle: RPC polling time
  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
  generalDownloadSettings: 'General Download Settings'
  deleteCookies: Delete Cookies
  noFilesFound: 'No Files Found'
  tableView: 'Table View'
  deleteSelected: 'Delete selected'
  subscriptionsButtonLabel: 'Subscriptions'
  subscriptionsEmptyLabel: 'No subscriptions'
  subscriptionsURLInput: 'Channel URL'
  subscriptionsInfo: |
    Subscribes to a defined channel. Only the last video will be downloaded.
    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
  cronExpressionLabel: 'Cron expression'
  editButtonLabel: 'Edit'
  newSubscriptionButton: New subscription
--- a/frontend/src/assets/i18n/fr.yaml
+++ b/frontend/src/assets/i18n/fr.yaml
@@ -1,84 +0,0 @@
 keys:
  urlInput: URL vidéo de YouTube ou d'un autre service pris en charge
  statusTitle: Statut
  statusReady: Prêt
  selectFormatButton: Sélectionner le format
  startButton: Démarrer
  abortAllButton: Tout arrêter
  updateBinButton: Mettre à jour l'exécutable yt-dlp
  darkThemeButton: Thème sombre
  lightThemeButton: Thème clair
  settingsAnchor: Paramètres
  serverAddressTitle: Adresse du serveur
  serverPortTitle: Port
  extractAudioCheckbox: Extraire l'audio
  noMTimeCheckbox: Ne pas définir le temps de modification du fichier
  bgReminder: Une fois que vous aurez fermé cette page, le téléchargement continuera en arrière-plan.
  toastConnected: 'Connecté à '
  toastUpdated: L'exécutable yt-dlp a été mis à jour !
  formatSelectionEnabler: Activer la sélection des formats vidéo/audio
  themeSelect: 'Thème'
  languageSelect: 'Langue'
  overridesAnchor: Remplacer
  pathOverrideOption: Activer le remplacement du chemin de sortie
  filenameOverrideOption: Activer le remplacement du nom du fichier de sortie
  autoFileExtensionOption: Ajouter automatiquement l'extension de fichier
  customFilename: Nom de fichier personnalisé (laisser vide pour utiliser le nom par défaut)
  customPath: Chemin personnalisé
  customArgs: Activer les args personnalisés yt-dlp (grand pouvoir = grandes responsabilités)
  customArgsInput: Arguments yt-dlp personnalisés
  rpcConnErr: Erreur lors de la connexion au serveur RPC
  splashText: Aucun téléchargement actif
  archiveTitle: Archive
  clipboardAction: URL copiée dans le presse-papiers
  playlistCheckbox: Télécharger la liste de lecture (cela prendra du temps, vous pouvez fermer cette fenêtre après l'avoir validée)
  restartAppMessage: Nécessite un rechargement de la page pour prendre effet
  servedFromReverseProxyCheckbox: Est derrière un sous-dossier de proxy inverse
  notConnectedText: not connected
  settingsLabel: Settings
  newDownloadButton: New download
  homeButtonLabel: Home
  archiveButtonLabel: Archive
  settingsButtonLabel: Settings
  rpcAuthenticationLabel: RPC authentication
  themeTogglerLabel: Theme toggler
  loadingLabel: Loading...
  appTitle: Nom de l'application
  savedTemplates: Saved templates
  templatesEditor: Templates editor
  templatesEditorNameLabel: Template name
  templatesEditorContentLabel: Template content
  logsTitle: 'Logs'
  awaitingLogs: 'Awaiting logs...'
  bulkDownload: 'Download files in a zip archive'
  templatesReloadInfo: To register a new template it might need a page reload.
  livestreamURLInput: Livestream URL
  livestreamStatusWaiting: Waiting/Wait start
  livestreamStatusDownloading: Downloading
  livestreamStatusCompleted: Completed
  livestreamStatusErrored: Errored
  livestreamStatusUnknown: Unknown
  livestreamNoMonitoring: No livestreams monitored
  livestreamDownloadInfo: |
    This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
    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'
  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
  rpcPollingTimeTitle: RPC polling time
  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
  generalDownloadSettings: 'General Download Settings'
  deleteCookies: Delete Cookies
  noFilesFound: 'No Files Found'
  tableView: 'Table View'
  deleteSelected: 'Delete selected'
  subscriptionsButtonLabel: 'Subscriptions'
  subscriptionsEmptyLabel: 'No subscriptions'
  subscriptionsURLInput: 'Channel URL'
  subscriptionsInfo: |
    Subscribes to a defined channel. Only the last video will be downloaded.
    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
  cronExpressionLabel: 'Cron expression'
  editButtonLabel: 'Edit'
  newSubscriptionButton: New subscription
--- a/frontend/src/assets/i18n/hu.yaml
+++ b/frontend/src/assets/i18n/hu.yaml
@@ -1,82 +0,0 @@
 keys:
  urlInput: Video URL (soronként egy)
  statusTitle: Állapot
  statusReady: Előkészítve
  selectFormatButton: Válassz formátumot
  startButton: Indítás
  abortAllButton: Összes megszakítása
  updateBinButton: yt-dlp bináris frissítése
  darkThemeButton: Sötét téma
  lightThemeButton: Világos téma
  settingsAnchor: Beállítások
  serverAddressTitle: Szerver címe
  serverPortTitle: Port
  extractAudioCheckbox: Audio konvertálása
  noMTimeCheckbox: Fájl módosítás időpontja ne legyen beállítva
  bgReminder: Miután a lap bezárásra kerül, a letöltés folytatódni fog a háttérben.
  toastConnected: 'Kapcsolódva: '
  toastUpdated: yt-dlp bináris frissítése sikeres volt!
  formatSelectionEnabler: Video/audio formátum manuális kiválasztásának engedélyezése
  themeSelect: 'Téma'
  languageSelect: 'Nyelv'
  overridesAnchor: Felülbírálások
  pathOverrideOption: Letöltési útvonal felülbírálása
  filenameOverrideOption: Letöltési fájlnév felülbírálása
  autoFileExtensionOption: Automatikus fájlkiterjesztés
  customFilename: Egyedi fájlnév (hagyd üresen, hogy a fájlnév automatikusan generálódjon)
  customPath: Egyedi útvonal
  customArgs: Egyedi yt-dlp argumentumok (Nagy hatalommal nagy felelősség jár.)
  customArgsInput: Egyedi yt-dlp argumentumok
  rpcConnErr: Hiba történt az RPC szerver történő kapcsolódáskor
  splashText: Nincs aktív letöltés
  archiveTitle: Archívum
  clipboardAction: URL a vágólapra másolva.
  playlistCheckbox: Lejátszási lista letöltése (Több időt vehet igénybe. A letöltés a háttérben történik, a böngészőablak szabadon bezárható.)
  restartAppMessage: Az oldal újratöltése lehet szükséges a változtatások megjelenítéséhez.
  servedFromReverseProxyCheckbox: Reverse proxy mögötti működés
  urlBase: URL base, reverse proxy támogatásához (subdir), alapból üres
  newDownloadButton: Új letöltés
  homeButtonLabel: Kezdőlap
  archiveButtonLabel: Archívum
  settingsButtonLabel: Beállítások
  rpcAuthenticationLabel: RPC bejelentkezés
  themeTogglerLabel: Témaválasztó
  loadingLabel: Betöltés...
  appTitle: Alkalmazás címe
  savedTemplates: Mentett sablonok
  templatesEditor: Sablonszerkesztő
  templatesEditorNameLabel: Sablon neve
  templatesEditorContentLabel: Sablon tartalma
  logsTitle: 'Naplók'
  awaitingLogs: 'Napló letöltése...'
  bulkDownload: 'Fájlok letöltése ZIP archívumként'
  rpcPollingTimeTitle: RPC lekérdezési időköz
  rpcPollingTimeDescription: Rövidebb időköz nagyobb processzor terheléssel járhat (mind szerver és böngésző oldalon is)
  templatesReloadInfo: Az új sablon megjelenéséhez újra kell tölteni az oldalt.
  livestreamURLInput: Élő stream URL
  livestreamStatusWaiting: Várakozás a kezdésre
  livestreamStatusDownloading: Letöltés
  livestreamStatusCompleted: Letöltve
  livestreamStatusErrored: Hiba
  livestreamStatusUnknown: Ismeretlen
  livestreamNoMonitoring: Nincsenek figyelt élő adások
  livestreamDownloadInfo: |
    Ez figyelni fog egy még el nem indított élő közvetítést. Minden folyamat a --wait-for-video 10 paraméterrel lesz végrehajtva.
    Ha egy már elindított élő közvetítés van megadva, az továbbra is letöltésre kerül, de a folyamatát nem követi nyomon.
    Amint elindul, az élő közvetítés átkerül a letöltések oldalra..
  livestreamExperimentalWarning: Ez a funkció még kísérleti. Nem garantált a hibamentes működés.
  accentSelect: 'Kiemelt szín'
  generalDownloadSettings: 'Általános letöltési beállítások'
  deleteCookies: Sütik törlése
  noFilesFound: 'Nem található fájlok'
  tableView: 'Táblázatos Nézet'
  deleteSelected: 'Kiválasztottak törlése'
  subscriptionsButtonLabel: 'Subscriptions'
  subscriptionsEmptyLabel: 'No subscriptions'
  subscriptionsURLInput: 'Channel URL'
  subscriptionsInfo: |
    Subscribes to a defined channel. Only the last video will be downloaded.
    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
  cronExpressionLabel: 'Cron expression'
  editButtonLabel: 'Edit'
  newSubscriptionButton: New subscription
--- a/frontend/src/assets/i18n/it_IT.yaml
+++ b/frontend/src/assets/i18n/it_IT.yaml
@@ -1,82 +0,0 @@
 keys:
  urlInput: URL Video (uno per linea)
  statusTitle: Stato
  statusReady: Pronto
  selectFormatButton: Seziona formato
  startButton: Inizia
  abortAllButton: Termina tutto
  updateBinButton: Aggiorna yt-dlp
  darkThemeButton: Tema scuro
  lightThemeButton: Tema chiaro
  settingsAnchor: Impostazioni
  serverAddressTitle: Indirizzo server
  serverPortTitle: Porta
  extractAudioCheckbox: Estrai l'audio
  noMTimeCheckbox: Non impostare la proprietà "Data ultima modifica"
  bgReminder: Chiusa questa UI il download continuerà in background.
  toastConnected: 'Connesso a '
  toastUpdated: yt-dlp aggiornato con successo!
  formatSelectionEnabler: Abilita la selezione dei formati audio/video
  themeSelect: 'Tema'
  languageSelect: 'Lingua'
  overridesAnchor: Sovrascritture
  pathOverrideOption: Abilita sovrascrittura percorso di output
  filenameOverrideOption: Abilita sovrascrittura del nome del file di output
  autoFileExtensionOption: Aggiungi estensione automaticamente
  customFilename: Nome file personalizzato (lascia vuoto per utilizzare quello predefinito)
  customPath: Percorso personalizzato
  customArgs: Abilita argomenti yt-dlp personalizzati (grande potere = grandi responsabilità)
  customArgsInput: Argomenti yt-dlp personalizzati
  rpcConnErr: Errore 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)
  restartAppMessage: La finestra deve essere ricaricata affinché abbia effetto
  servedFromReverseProxyCheckbox: È dietro un reverse proxy
  urlBase: base URL, per supporto a reverse proxy (subdir), default vuoto
  newDownloadButton: Nuovo download
  homeButtonLabel: Home
  archiveButtonLabel: Archivio
  settingsButtonLabel: Impostazioni
  rpcAuthenticationLabel: Autenticazione RPC
  themeTogglerLabel: Selettore Tema
  loadingLabel: Caricamento...
  appTitle: Titolo applicazione
  savedTemplates: Modelli salvati
  templatesEditor: Editor modelli
  templatesEditorNameLabel: Nome modello
  templatesEditorContentLabel: Contenuto del modello
  logsTitle: 'Logs'
  awaitingLogs: 'Awaiting logs...'
  bulkDownload: 'Scaricare i file in un archivio zip'
  rpcPollingTimeTitle: Intervallo di polling RPC
  rpcPollingTimeDescription: Un intervallo più corto implica un maggior utilizzo di CPU (lato client e server)
  templatesReloadInfo: Per registrare un nuovo modello potrebbe essere necessario ricaricare la pagina.
  livestreamURLInput: Livestream URL
  livestreamStatusWaiting: Attesa inizio
  livestreamStatusDownloading: Downloading
  livestreamStatusCompleted: Completato
  livestreamStatusErrored: Errore
  livestreamStatusUnknown: Sconosciuto
  livestreamNoMonitoring: Nessun livestream monitorato
  livestreamDownloadInfo: |
    Questo monitorerà il livestream ancora da avviare. Ogni processo verrà eseguito con --wait-for-video 10.
    Se viene fornito un livestream già avviato, questo verrà comunque scaricato, ma il suo progresso non verrà monitorato.
    Una volta avviato, il livestream verrà migrato nella pagina dei download.
  livestreamExperimentalWarning: Questa funzione è ancora sperimentale. Qualcosa potrebbe rompersi!
  accentSelect: 'Accent'
  generalDownloadSettings: 'Impostazioni generali di download'
  deleteCookies: Elimina Cookies
  noFilesFound: 'Nessun file trovato'
  tableView: 'Vista Tabella'
  deleteSelected: 'Elimina selezionati'
  subscriptionsButtonLabel: 'Abbonamenti'
  subscriptionsEmptyLabel: 'Nessuna iscrizione'
  subscriptionsURLInput: 'URL Canale'
  subscriptionsInfo: |
    Iscrive a un canale definito. Verrà scaricato solo l'ultimo video.
    Il lavoro di monitoraggio sarà programmato/attivato da un'espressione cron definita (se lasciata vuota, l'impostazione predefinita è ogni 5 minuti).
  cronExpressionLabel: 'Espressione Cron'
  editButtonLabel: 'Modifica'
  newSubscriptionButton: Nuova iscrizione
--- a/frontend/src/assets/i18n/ja.yaml
+++ b/frontend/src/assets/i18n/ja.yaml
@@ -1,81 +0,0 @@
 keys:
  urlInput: YouTubeまたはサポート済み動画のURL
  statusTitle: 状態
  statusReady: 準備
  selectFormatButton: フォーマット選択
  startButton: 開始
  abortAllButton: すべて中止
  updateBinButton: yt-dlp更新
  darkThemeButton: 黒テーマ
  lightThemeButton: 白テーマ
  settingsAnchor: 設定
  serverAddressTitle: サーバーアドレス
  serverPortTitle: ポート番号
  extractAudioCheckbox: 音質
  noMTimeCheckbox: ファイル時間の修正をしない
  bgReminder: このページを閉じてもバックグラウンドでダウンロードを続けます
  toastConnected: '接続中 '
  toastUpdated: yt-dlpを更新しました!
  formatSelectionEnabler: 選択可能な動画/音源
  themeSelect: 'テーマ'
  languageSelect: '言語'
  overridesAnchor: 上書き
  pathOverrideOption: 保存するディレクトリ
  filenameOverrideOption: ファイル名の上書き
  autoFileExtensionOption: 自動ファイル拡張子
  customFilename:  (空白の場合は元のファイル名)
  customPath: 保存先
  customArgs: yt-dlpのオプションの有効化 (最適設定にする場合)
  customArgsInput: yt-dlpのオプション
  rpcConnErr: RPCサーバーへの接続中にエラーが発生しました
  splashText: アクティブなダウンロードはありません
  archiveTitle: アーカイブ
  clipboardAction: URLをクリップボードにコピーしました
  playlistCheckbox: プレイリストをダウンロード (これには時間がかかりますが、処理中はウィンドウを閉じることができます)
  servedFromReverseProxyCheckbox: リバースプロキシのサブフォルダにあります
  newDownloadButton: 新しくダウンロード
  homeButtonLabel: ホーム
  archiveButtonLabel: アーカイブ
  settingsButtonLabel: 設定
  rpcAuthenticationLabel: RPC認証
  themeTogglerLabel: テーマ切り替え
  loadingLabel: 読み込み中...
  appTitle: アプリタイトル
  savedTemplates: 保存したテンプレート
  templatesEditor: テンプレートエディター
  templatesEditorNameLabel: テンプレート名
  templatesEditorContentLabel: テンプレート内容
  logsTitle: 'ログ'
  awaitingLogs: 'ログを待機中...'
  bulkDownload: 'ダウンロードしたファイルをZIPで保存'
  templatesReloadInfo: To register a new template it might need a page reload.
  livestreamURLInput: ライブストリームURL
  livestreamStatusWaiting: 開始を待っています
  livestreamStatusDownloading: ダウンロード中
  livestreamStatusCompleted: 完了
  livestreamStatusErrored: エラー
  livestreamStatusUnknown: 不明
  livestreamNoMonitoring: No livestreams monitored
  livestreamDownloadInfo: |
    まだ開始されていないライブストリームを監視します。各プロセスは、--wait-for-video 10 で実行されます。
    すでに開始されているライブストリームが提供された場合、ダウンロードは継続されますが進行状況は追跡されません。
    ライブストリームが開始されると、ダウンロードページに移動されます。
  livestreamExperimentalWarning: この機能は実験的なものです。何かが壊れるかもしれません！
  accentSelect: 'Accent'
  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
  rpcPollingTimeTitle: RPC polling time
  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
  generalDownloadSettings: 'General Download Settings'
  deleteCookies: Delete Cookies
  noFilesFound: 'No Files Found'
  tableView: 'Table View'
  deleteSelected: 'Delete selected'
  subscriptionsButtonLabel: 'Subscriptions'
  subscriptionsEmptyLabel: 'No subscriptions'
  subscriptionsURLInput: 'Channel URL'
  subscriptionsInfo: |
    Subscribes to a defined channel. Only the last video will be downloaded.
    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
  cronExpressionLabel: 'Cron expression'
  editButtonLabel: 'Edit'
  newSubscriptionButton: New subscription
--- a/frontend/src/assets/i18n/ko.yaml
+++ b/frontend/src/assets/i18n/ko.yaml
@@ -1,80 +0,0 @@
 keys:
  urlInput: YouTube나 다른 지원되는 사이트의 URL
  statusTitle: 상태
  startButton: 시작
  statusReady: 준비됨
  abortAllButton: 모두 중단
  updateBinButton: yt-dlp 바이너리 업데이트
  darkThemeButton: 다크 모드
  lightThemeButton: 라이트 모드
  settingsAnchor: 설정
  serverAddressTitle: 서버 주소
  serverPortTitle: Port
  extractAudioCheckbox: 오디오 추출
  noMTimeCheckbox: 파일 수정 시간을 설정하지 않음
  bgReminder: 이 페이지를 닫아도 백그라운드에서 다운로드가 계속됩니다
  toastConnected: '다음으로 연결됨 '
  toastUpdated: yt-dlp 바이너리를 업데이트 했습니다
  formatSelectionEnabler: 비디오/오디오 포멧 옵션 표시
  themeSelect: 'Theme'
  languageSelect: 'Language'
  overridesAnchor: Overrides
  pathOverrideOption: Enable output path overriding
  filenameOverrideOption: Enable output file name overriding
  autoFileExtensionOption: 자동으로 파일 확장자 추가
  customFilename: Custom filename (leave blank to use default)
  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)
  servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
  newDownloadButton: New download
  homeButtonLabel: Home
  archiveButtonLabel: Archive
  settingsButtonLabel: Settings
  rpcAuthenticationLabel: RPC authentication
  themeTogglerLabel: Theme toggler
  loadingLabel: Loading...
  appTitle: App title
  savedTemplates: Saved templates
  templatesEditor: Templates editor
  templatesEditorNameLabel: Template name
  templatesEditorContentLabel: Template content
  logsTitle: 'Logs'
  awaitingLogs: 'Awaiting logs...'
  bulkDownload: 'Download files in a zip archive'
  templatesReloadInfo: To register a new template it might need a page reload.
  livestreamURLInput: Livestream URL
  livestreamStatusWaiting: Waiting/Wait start
  livestreamStatusDownloading: Downloading
  livestreamStatusCompleted: Completed
  livestreamStatusErrored: Errored
  livestreamStatusUnknown: Unknown
  livestreamNoMonitoring: No livestreams monitored
  livestreamDownloadInfo: |
    This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
    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'
  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
  rpcPollingTimeTitle: RPC polling time
  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
  generalDownloadSettings: 'General Download Settings'
  deleteCookies: Delete Cookies
  noFilesFound: 'No Files Found'
  tableView: 'Table View'
  deleteSelected: 'Delete selected'
  subscriptionsButtonLabel: 'Subscriptions'
  subscriptionsEmptyLabel: 'No subscriptions'
  subscriptionsURLInput: 'Channel URL'
  subscriptionsInfo: |
    Subscribes to a defined channel. Only the last video will be downloaded.
    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
  cronExpressionLabel: 'Cron expression'
  editButtonLabel: 'Edit'
  newSubscriptionButton: New subscription
--- a/frontend/src/assets/i18n/pl.yaml
+++ b/frontend/src/assets/i18n/pl.yaml
@@ -1,80 +0,0 @@
 keys:
  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
  autoFileExtensionOption: Automatyczne rozszerzenie pliku
  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)
  servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
  newDownloadButton: New download
  homeButtonLabel: Home
  archiveButtonLabel: Archive
  settingsButtonLabel: Settings
  rpcAuthenticationLabel: RPC authentication
  themeTogglerLabel: Theme toggler
  loadingLabel: Loading...
  appTitle: App title
  savedTemplates: Saved templates
  templatesEditor: Templates editor
  templatesEditorNameLabel: Template name
  templatesEditorContentLabel: Template content
  logsTitle: 'Logs'
  awaitingLogs: 'Awaiting logs...'
  bulkDownload: 'Download files in a zip archive'
  templatesReloadInfo: To register a new template it might need a page reload.
  livestreamURLInput: Livestream URL
  livestreamStatusWaiting: Waiting/Wait start
  livestreamStatusDownloading: Downloading
  livestreamStatusCompleted: Completed
  livestreamStatusErrored: Errored
  livestreamStatusUnknown: Unknown
  livestreamNoMonitoring: No livestreams monitored
  livestreamDownloadInfo: |
    This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
    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'
  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
  rpcPollingTimeTitle: RPC polling time
  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
  generalDownloadSettings: 'General Download Settings'
  deleteCookies: Delete Cookies
  noFilesFound: 'No Files Found'
  tableView: 'Table View'
  deleteSelected: 'Delete selected'
  subscriptionsButtonLabel: 'Subscriptions'
  subscriptionsEmptyLabel: 'No subscriptions'
  subscriptionsURLInput: 'Channel URL'
  subscriptionsInfo: |
    Subscribes to a defined channel. Only the last video will be downloaded.
    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
  cronExpressionLabel: 'Cron expression'
  editButtonLabel: 'Edit'
  newSubscriptionButton: New subscription
--- a/frontend/src/assets/i18n/pt_BR.yaml
+++ b/frontend/src/assets/i18n/pt_BR.yaml
@@ -1,82 +0,0 @@
 keys:
  urlInput: URL do vídeo (uma por linha)
  statusTitle: Status
  statusReady: Pronto
  selectFormatButton: Selecionar formato
  startButton: Iniciar
  abortAllButton: Cancelar tudo
  updateBinButton: Atualizar binário yt-dlp
  darkThemeButton: Tema escuro
  lightThemeButton: Tema claro
  settingsAnchor: Configurações
  serverAddressTitle: Endereço do servidor
  serverPortTitle: Porta
  extractAudioCheckbox: Extrair áudio
  noMTimeCheckbox: Não definir hora de modificação do arquivo
  bgReminder: Uma vez que você feche esta página, o download continuará em segundo plano.
  toastConnected: 'Conectado a '
  toastUpdated: Binário yt-dlp atualizado!
  formatSelectionEnabler: Habilitar seleção de formatos de vídeo/aúdio
  themeSelect: 'Tema'
  languageSelect: 'Idioma'
  overridesAnchor: Substituições
  pathOverrideOption: Habilitar substituição do caminho de saída
  filenameOverrideOption: Habilitar substituição do nome do arquivo de saída
  autoFileExtensionOption: Adicionar extensão de arquivo automaticamente
  customFilename: Nome de arquivo personalizado (deixe em branco para usar o padrão)
  customPath: Caminho personalizado
  customArgs: Habilitar argumentos personalizados do yt-dlp (grandes poderes = grandes responsabilidades)
  customArgsInput: Argumentos personalizados do yt-dlp
  rpcConnErr: Erro ao conectar ao servidor RPC
  splashText: Nenhum download ativo
  archiveTitle: Arquivo
  clipboardAction: URL copiada para a área de transferência
  playlistCheckbox: Baixar playlist (isso pode levar algum tempo, depois de enviar você pode fechar esta janela)
  restartAppMessage: Necessário recarregar a página para que a mudança tenha efeito
  servedFromReverseProxyCheckbox: Está atrás de um proxy reverso
  urlBase: Base da URL, para suporte de proxy reverso (subdiretório), padrão vazio
  newDownloadButton: Novo download
  homeButtonLabel: Início
  archiveButtonLabel: Arquivo
  settingsButtonLabel: Configurações
  rpcAuthenticationLabel: Autenticação RPC
  themeTogglerLabel: Alternador de tema
  loadingLabel: Carregando...
  appTitle: Título do aplicativo
  savedTemplates: Modelos salvos
  templatesEditor: Editor de modelos
  templatesEditorNameLabel: Nome do modelo
  templatesEditorContentLabel: Conteúdo do modelo
  logsTitle: 'Logs'
  awaitingLogs: 'Aguardando logs...'
  bulkDownload: 'Baixar arquivos em um arquivo zip'
  rpcPollingTimeTitle: Tempo de polling RPC
  rpcPollingTimeDescription: Um intervalo menor resulta em maior uso de CPU (lado do servidor e do cliente)
  templatesReloadInfo: Para registrar um novo modelo, pode ser necessário recarregar a página.
  livestreamURLInput: URL da transmissão ao vivo
  livestreamStatusWaiting: Aguardando/Aguarde o início
  livestreamStatusDownloading: Baixando
  livestreamStatusCompleted: Concluído
  livestreamStatusErrored: Erro
  livestreamStatusUnknown: Desconhecido
  livestreamNoMonitoring: No livestreams monitored
  livestreamDownloadInfo: |
    Isso monitorará uma transmissão ao vivo que ainda não começou. Cada processo será executado com --wait-for-video 10.
    Se uma transmissão ao vivo já iniciada for fornecida, ela ainda será baixada, mas seu progresso não será rastreado.
    Uma vez iniciada, a transmissão ao vivo será migrada para a página de downloads.
  livestreamExperimentalWarning: Este recurso ainda é experimental. Algo pode quebrar!
  accentSelect: 'Accent'
  generalDownloadSettings: 'General Download Settings'
  deleteCookies: Delete Cookies
  noFilesFound: 'No Files Found'
  tableView: 'Table View'
  deleteSelected: 'Delete selected'
  subscriptionsButtonLabel: 'Subscriptions'
  subscriptionsEmptyLabel: 'No subscriptions'
  subscriptionsURLInput: 'Channel URL'
  subscriptionsInfo: |
    Subscribes to a defined channel. Only the last video will be downloaded.
    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
  cronExpressionLabel: 'Cron expression'
  editButtonLabel: 'Edit'
  newSubscriptionButton: New subscription
--- a/frontend/src/assets/i18n/ru.yaml
+++ b/frontend/src/assets/i18n/ru.yaml
@@ -1,80 +0,0 @@
 keys:
  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: Активировать переопределение имени выходного файла
  autoFileExtensionOption: Автоматическое расширение файла
  customFilename: Задать имя файла (оставьте пустым, чтобы использовать значение по умолчанию)
  customPath: Задать путь
  customArgs: Включить настраиваемые аргументы yt-dlp (большая сила = большая ответственность)
  customArgsInput: Пользовательские аргументы yt-dlp
  rpcConnErr: Ошибка при подключении к серверу RPC
  splashText: Нет активных загрузок
  archiveTitle: Архив
  clipboardAction: URL скопирован в буфер обмена
  playlistCheckbox: Скачать плейлист. Это займет время, после отправки вы сможете закрыть окно
  servedFromReverseProxyCheckbox: Находится за обратным прокси
  newDownloadButton: Новая загрузка
  homeButtonLabel: Home
  archiveButtonLabel: Архив
  settingsButtonLabel: Настройки
  rpcAuthenticationLabel: RPC-аутентификация
  themeTogglerLabel: Переключить тему
  loadingLabel: Загрузка...
  appTitle: Название приложения
  savedTemplates: Сохраненные шаблоны
  templatesEditor: Редактор шаблонов
  templatesEditorNameLabel: Имя шаблона
  templatesEditorContentLabel: Содержание шаблона
  logsTitle: 'Логи'
  awaitingLogs: 'Ожидание логов...'
  bulkDownload: 'Скачать файлы в zip архиве'
  templatesReloadInfo: To register a new template it might need a page reload.
  livestreamURLInput: Livestream URL
  livestreamStatusWaiting: Waiting/Wait start
  livestreamStatusDownloading: Downloading
  livestreamStatusCompleted: Completed
  livestreamStatusErrored: Errored
  livestreamStatusUnknown: Unknown
  livestreamNoMonitoring: No livestreams monitored
  livestreamDownloadInfo: |
    This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
    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'
  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
  rpcPollingTimeTitle: RPC polling time
  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
  generalDownloadSettings: 'General Download Settings'
  deleteCookies: Delete Cookies
  noFilesFound: 'No Files Found'
  tableView: 'Table View'
  deleteSelected: 'Delete selected'
  subscriptionsButtonLabel: 'Subscriptions'
  subscriptionsEmptyLabel: 'No subscriptions'
  subscriptionsURLInput: 'Channel URL'
  subscriptionsInfo: |
    Subscribes to a defined channel. Only the last video will be downloaded.
    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
  cronExpressionLabel: 'Cron expression'
  editButtonLabel: 'Edit'
  newSubscriptionButton: New subscription
--- a/frontend/src/assets/i18n/sv.yaml
+++ b/frontend/src/assets/i18n/sv.yaml
@@ -1,82 +0,0 @@
 keys:
  urlInput: Videolänk (en per rad)
  statusTitle: Status
  statusReady: Redo
  selectFormatButton: Välj format
  startButton: Start
  abortAllButton: Avbryt alla
  updateBinButton: Uppdatera yt-dlp
  darkThemeButton: Mörkt tema
  lightThemeButton: Ljust tema
  settingsAnchor: Inställningar
  serverAddressTitle: Serveraddress
  serverPortTitle: Port
  extractAudioCheckbox: Extrahera ljud
  noMTimeCheckbox: Lägg inte till info om när filen senast modifierades
  bgReminder: När du stänger denna sida så kommer nedladdningen att fortsätta i bakgrunden.
  toastConnected: 'Ansluten till '
  toastUpdated: Uppdaterade yt-dlp!
  formatSelectionEnabler: Tillåt val av ljud- och bildformat
  themeSelect: 'Tema'
  languageSelect: 'Språk'
  overridesAnchor: Överskrivningar
  pathOverrideOption: Tillåt överskrivning av filsökvägen
  filenameOverrideOption: Tillåt överskrivning av filnamn
  autoFileExtensionOption: Lägg till filändelse automatiskt
  customFilename: Eget filnamn (lämna blankt för standardnamn)
  customPath: Egen filsökväg
  customArgs: Tillåt egna yt-dlp-argument (frihet under ansvar!)
  customArgsInput: Egna yt-dlp-argument
  rpcConnErr: Ett fel inträffade vid anslutning till RPC-server
  splashText: Inga pågående nedladdningar
  archiveTitle: Arkiv
  clipboardAction: Kopierade länken
  playlistCheckbox: Ladda ner spellista (detta kommer ta did, efter start så kan du stänga detta fönster)
  restartAppMessage: En sidomladdning behövs innan förändringen får effekt
  servedFromReverseProxyCheckbox: Servern befinner sig bakom en omvänd proxy
  urlBase: "URL-bas, måste anges när en omvänd proxy används. Standardinställning: lämna blank"
  newDownloadButton: Ny nedladdning
  homeButtonLabel: Hem
  archiveButtonLabel: Arkiv
  settingsButtonLabel: Inställningar
  rpcAuthenticationLabel: RPC-Autentisering
  themeTogglerLabel: Tema-knapp
  loadingLabel: Laddar...
  appTitle: Apptitel
  savedTemplates: Sparade mallar
  templatesEditor: Mallredigerare
  templatesEditorNameLabel: Namn
  templatesEditorContentLabel: Innehåll 
  logsTitle: 'Loggar'
  awaitingLogs: 'Väntar på loggar...'
  bulkDownload: 'Ladda ner filer i ett zip-arkiv'
  rpcPollingTimeTitle: Frekvens av RPC-uppdateringar
  rpcPollingTimeDescription: En högre frekvens kräver mer CPU-resurser för både server och klient
  templatesReloadInfo: För att registrera en ny mall så kan en sidomladdning krävas.
  livestreamURLInput: Livestream URL
  livestreamStatusWaiting: Waiting/Wait start
  livestreamStatusDownloading: Downloading
  livestreamStatusCompleted: Completed
  livestreamStatusErrored: Errored
  livestreamStatusUnknown: Unknown
  livestreamNoMonitoring: No livestreams monitored
  livestreamDownloadInfo: |
    This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
    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'
  generalDownloadSettings: 'General Download Settings'
  deleteCookies: Delete Cookies
  noFilesFound: 'No Files Found'
  tableView: 'Table View'
  deleteSelected: 'Delete selected'
  subscriptionsButtonLabel: 'Subscriptions'
  subscriptionsEmptyLabel: 'No subscriptions'
  subscriptionsURLInput: 'Channel URL'
  subscriptionsInfo: |
    Subscribes to a defined channel. Only the last video will be downloaded.
    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
  cronExpressionLabel: 'Cron expression'
  editButtonLabel: 'Edit'
  newSubscriptionButton: New subscription
--- a/frontend/src/assets/i18n/uk.yaml
+++ b/frontend/src/assets/i18n/uk.yaml
@@ -1,80 +0,0 @@
 keys:
  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: Активувати перевизначення імені вихідного файлу
  autoFileExtensionOption: Автоматичне додавання розширення файлу
  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)
  servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
  newDownloadButton: New download
  homeButtonLabel: Home
  archiveButtonLabel: Archive
  settingsButtonLabel: Settings
  rpcAuthenticationLabel: RPC authentication
  themeTogglerLabel: Theme toggler
  loadingLabel: Loading...
  appTitle: App title
  savedTemplates: Saved templates
  templatesEditor: Templates editor
  templatesEditorNameLabel: Template name
  templatesEditorContentLabel: Template content
  logsTitle: 'Logs'
  awaitingLogs: 'Awaiting logs...'
  bulkDownload: 'Download files in a zip archive'
  templatesReloadInfo: To register a new template it might need a page reload.
  livestreamURLInput: Livestream URL
  livestreamStatusWaiting: Waiting/Wait start
  livestreamStatusDownloading: Downloading
  livestreamStatusCompleted: Completed
  livestreamStatusErrored: Errored
  livestreamStatusUnknown: Unknown
  livestreamNoMonitoring: No livestreams monitored
  livestreamDownloadInfo: |
    This will monitor yet to start livestream. Each process will be executed with --wait-for-video 10.
    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'
  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
  rpcPollingTimeTitle: RPC polling time
  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
  generalDownloadSettings: 'General Download Settings'
  deleteCookies: Delete Cookies
  noFilesFound: 'No Files Found'
  tableView: 'Table View'
  deleteSelected: 'Delete selected'
  subscriptionsButtonLabel: 'Subscriptions'
  subscriptionsEmptyLabel: 'No subscriptions'
  subscriptionsURLInput: 'Channel URL'
  subscriptionsInfo: |
    Subscribes to a defined channel. Only the last video will be downloaded.
    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
  cronExpressionLabel: 'Cron expression'
  editButtonLabel: 'Edit'
  newSubscriptionButton: New subscription
--- a/frontend/src/assets/i18n/zh_CN.yaml
+++ b/frontend/src/assets/i18n/zh_CN.yaml
@@ -1,82 +0,0 @@
 keys:
  urlInput: 视频 URL
  statusTitle: 状态
  statusReady: 就绪
  selectFormatButton: 选择格式
  startButton: 开始
  abortAllButton: 全部中止
  updateBinButton: 更新 yt-dlp 可执行文件
  darkThemeButton: 黑暗主题
  lightThemeButton: 明亮主题
  settingsAnchor: 设置
  serverAddressTitle: 服务器地址
  serverPortTitle: 端口
  extractAudioCheckbox: 提取音频
  noMTimeCheckbox: 不设置文件修改时间
  bgReminder: 关闭页面后，下载会继续在后台运行。
  toastConnected: '已连接到 '
  toastUpdated: 已更新 yt-dlp 可执行文件！
  formatSelectionEnabler: 启用视频/音频格式选择
  themeSelect: '主题'
  languageSelect: '语言'
  overridesAnchor: 覆盖
  pathOverrideOption: 启用输出路径覆盖
  filenameOverrideOption: 启用输出文件名覆盖
  autoFileExtensionOption: 自动文件扩展名
  customFilename: 自定义文件名（留空使用默认值）
  customPath: 自定义路径
  customArgs: 启用自定义 yt-dlp 参数（能力越大 = 责任越大）
  customArgsInput: 自定义 yt-dlp 参数
  rpcConnErr: 连接 RPC 服务器发生错误
  splashText: 没有正在进行的下载
  archiveTitle: 归档
  clipboardAction: 复制 URL 到剪贴板
  playlistCheckbox: 下载播放列表（可能需要一段时间，提交后可以关闭页面等待）
  restartAppMessage: 需要刷新页面才能生效
  servedFromReverseProxyCheckbox: 处于反向代理的子目录后
  newDownloadButton: 新下载
  homeButtonLabel: 主页
  archiveButtonLabel: 归档
  settingsButtonLabel: 设置
  rpcAuthenticationLabel: RPC 身份验证
  themeTogglerLabel: 主题切换
  loadingLabel: 正在加载…
  appTitle: App 标题
  savedTemplates: 保存模板
  templatesEditor: 模板编辑器
  templatesEditorNameLabel: 模板名称
  templatesEditorContentLabel: 模板内容
  logsTitle: '日志'
  awaitingLogs: '正在等待日志…'
  bulkDownload: '下载 zip 压缩包中的文件'
  templatesReloadInfo: To register a new template it might need a page reload.
  livestreamURLInput: 直播 URL
  livestreamStatusWaiting: 等待直播开始
  livestreamStatusDownloading: 下载中
  livestreamStatusCompleted: 已完成
  livestreamStatusErrored: 发生错误
  livestreamStatusUnknown: 未知
  livestreamNoMonitoring: No livestreams monitored
  livestreamDownloadInfo: |
    本功能将会监控即将开始的直播流，每个进程都会传入参数：--wait-for-video 10 （重试间隔10秒）
    如果直播已经开始，那么依然可以下载，但是不会记录下载进度。
    直播开始后，将会转移到下载页面
  livestreamExperimentalWarning: 实验性功能，可能存在未知Bug，请谨慎使用
  accentSelect: 'Accent'
  urlBase: URL base, for reverse proxy support (subdir), defaults to empty
  rpcPollingTimeTitle: RPC polling time
  rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
  generalDownloadSettings: 'General Download Settings'
  deleteCookies: Delete Cookies
  noFilesFound: 'No Files Found'
  tableView: 'Table View'
  deleteSelected: 'Delete selected'
  subscriptionsButtonLabel: 'Subscriptions'
  subscriptionsEmptyLabel: 'No subscriptions'
  subscriptionsURLInput: 'Channel URL'
  subscriptionsInfo: |
    Subscribes to a defined channel. Only the last video will be downloaded.
    The monitor job will be scheduled/triggered by a defined cron expression (defaults to every 5 minutes if left blank).
  cronExpressionLabel: 'Cron expression'
  editButtonLabel: 'Edit'
  newSubscriptionButton: New subscription
--- a/frontend/src/atoms/downloadTemplate.ts
+++ b/frontend/src/atoms/downloadTemplate.ts
@@ -1,28 +1,45 @@
-import { getOrElse } from 'fp-ts/lib/Either'
+import { atom, selector } from 'recoil'
 import { pipe } from 'fp-ts/lib/function'
 import { atom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 import { ffetch } from '../lib/httpClient'
 import { CustomTemplate } from '../types'
-import { serverSideCookiesState, serverURL } from './settings'
+import { ffetch } from '../lib/httpClient'
 import { serverURL } from './settings'
 import { pipe } from 'fp-ts/lib/function'
 import { getOrElse } from 'fp-ts/lib/Either'
-export const cookiesTemplateState = atom<Promise<string>>(async (get) =>
+export const cookiesTemplateState = atom({
-  await get(serverSideCookiesState)
+  key: 'cookiesTemplateState',
-    ? '--cookies=cookies.txt'
+  default: localStorage.getItem('cookiesTemplate') ?? '',
-    : ''
+  effects: [
-)
+    ({ onSet }) => onSet(e => localStorage.setItem('cookiesTemplate', e))
  ]
 })
-export const customArgsState = atomWithStorage(
+export const customArgsState = atom({
-  'customArgs',
+  key: 'customArgsState',
-  localStorage.getItem('customArgs') ?? ''
+  default: localStorage.getItem('customArgs') ?? '',
-)
+  effects: [
    ({ onSet }) => onSet(e => localStorage.setItem('customArgs', e))
  ]
 })
-export const filenameTemplateState = atomWithStorage(
+export const filenameTemplateState = atom({
-  'lastFilenameTemplate',
+  key: 'filenameTemplateState',
-  localStorage.getItem('lastFilenameTemplate') ?? ''
+  default: localStorage.getItem('lastFilenameTemplate') ?? '',
-)
+  effects: [
    ({ onSet }) => onSet(e => localStorage.setItem('lastFilenameTemplate', e))
  ]
 })
-export const savedTemplatesState = atom<Promise<CustomTemplate[]>>(async (get) => {
+export const downloadTemplateState = selector({
  key: 'downloadTemplateState',
  get: ({ get }) =>
    `${get(customArgsState)} ${get(cookiesTemplateState)}`
      .replace(/  +/g, ' ')
      .trim()
 })
 export const savedTemplatesState = selector<CustomTemplate[]>({
  key: 'savedTemplatesState',
  get: async ({ get }) => {
    const task = ffetch<CustomTemplate[]>(`${get(serverURL)}/api/v1/template/all`)
    const either = await task()
@@ -30,5 +47,5 @@ export const savedTemplatesState = atom<Promise<CustomTemplate[]>>(async (get) =
      either,
      getOrElse(() => new Array<CustomTemplate>())
    )
-}
+  }
-)
+})
--- a/frontend/src/atoms/downloads.ts
+++ b/frontend/src/atoms/downloads.ts
@@ -1,13 +1,22 @@
 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[]>>(O.none)
+export const downloadsState = atom<O.Option<RPCResult[]>>({
  key: 'downloadsState',
  default: O.none
 })
-export const loadingDownloadsState = atom<boolean>((get) => O.isNone(get(downloadsState)))
+export const loadingDownloadsState = selector<boolean>({
  key: 'loadingDownloadsState',
  get: ({ get }) => O.isNone(get(downloadsState))
 })
-export const activeDownloadsState = atom<RPCResult[]>((get) => pipe(
+export const activeDownloadsState = selector<RPCResult[]>({
  key: 'activeDownloadsState',
  get: ({ get }) => pipe(
    get(downloadsState),
    O.getOrElse(() => new Array<RPCResult>())
-))
+  )
 })
--- 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
@@ -1,17 +1,14 @@
-import { atom } from 'jotai'
+import { selector } from 'recoil'
 import { RPCClient } from '../lib/rpcClient'
 import { rpcHTTPEndpoint, rpcWebSocketEndpoint } from './settings'
 import { atomWithStorage } from 'jotai/utils'
-export const rpcClientState = atom((get) =>
+export const rpcClientState = selector({
  key: 'rpcClientState',
  get: ({ get }) =>
    new RPCClient(
      get(rpcHTTPEndpoint),
      get(rpcWebSocketEndpoint),
      localStorage.getItem('token') ?? ''
    ),
-)
+  dangerouslyAllowMutability: true,
-
+})
 export const rpcPollingTimeState = atomWithStorage(
  'rpc-polling-time',
  Number(localStorage.getItem('rpc-polling-time')) || 1000
 )
--- a/frontend/src/atoms/settings.ts
+++ b/frontend/src/atoms/settings.ts
@@ -1,26 +1,18 @@
-import { pipe } from 'fp-ts/lib/function'
+import { atom, selector } from 'recoil'
 import { matchW } from 'fp-ts/lib/TaskEither'
 import { ffetch } from '../lib/httpClient'
 import { prefersDarkMode } from '../utils'
 import { atomWithStorage } from 'jotai/utils'
 import { atom } from 'jotai'
 export const languages = [
  'catalan',
  'chinese',
  'english',
-  'french',
+  'chinese',
  'german',
  'italian',
  'japanese',
  'korean',
  'polish',
  'portuguese-br',
  'russian',
  'italian',
  'spanish',
-  'swedish',
+  'korean',
  'japanese',
  'catalan',
  'ukrainian',
-  'hungarian'
+  'polish',
  'german'
 ] as const
 export type Language = (typeof languages)[number]
@@ -28,19 +20,14 @@ 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
  autoFileExtension: boolean
  pathOverriding: boolean
  enableCustomArgs: boolean
  listView: boolean
@@ -48,137 +35,178 @@ export interface SettingsState {
  appTitle: string
 }
-export const languageState = atomWithStorage<Language>(
+export const languageState = atom<Language>({
-  'language',
+  key: 'languageState',
-  localStorage.getItem('language') as Language || 'english'
+  default: localStorage.getItem('language') as Language || 'english',
-)
+  effects: [
-
+    ({ onSet }) =>
-export const themeState = atomWithStorage<Theme>(
+      onSet(l => localStorage.setItem('language', l.toString()))
-  'theme',
+  ]
  localStorage.getItem('theme') as Theme || 'system'
 )
 export const serverAddressState = atomWithStorage<string>(
  'server-addr',
  localStorage.getItem('server-addr') || window.location.hostname
 )
 export const serverPortState = atomWithStorage<number>(
  'server-port',
  Number(localStorage.getItem('server-port')) || Number(window.location.port)
 )
 export const latestCliArgumentsState = atomWithStorage<string>(
  'cli-args',
  localStorage.getItem('cli-args') || '--no-mtime'
 )
 export const formatSelectionState = atomWithStorage(
  'format-selection',
  localStorage.getItem('format-selection') === 'true'
 )
 export const fileRenamingState = atomWithStorage(
  'file-renaming',
  localStorage.getItem('file-renaming') === 'true'
 )
 export const autoFileExtensionState = atomWithStorage(
  'auto-file-extension',
  localStorage.getItem('auto-file-extension') === 'true'
 )
 export const pathOverridingState = atomWithStorage(
  'path-overriding',
  localStorage.getItem('path-overriding') === 'true'
 )
 export const enableCustomArgsState = atomWithStorage(
  'enable-custom-args',
  localStorage.getItem('enable-custom-args') === 'true'
 )
 export const listViewState = atomWithStorage(
  'listview',
  localStorage.getItem('listview') === 'true'
 )
 export const servedFromReverseProxyState = atomWithStorage(
  'reverseProxy',
  localStorage.getItem('reverseProxy') === 'true' || window.location.port == ''
 )
 export const servedFromReverseProxySubDirState = atomWithStorage<string>(
  'reverseProxySubDir',
  localStorage.getItem('reverseProxySubDir') ?? ''
 )
 export const appTitleState = atomWithStorage(
  'appTitle',
  localStorage.getItem('appTitle') ?? 'yt-dlp Web UI'
 )
 export const serverAddressAndPortState = atom((get) => {
  if (get(servedFromReverseProxySubDirState)) {
    return `${get(serverAddressState)}/${get(servedFromReverseProxySubDirState)}/`
      .replaceAll('"', '') // TODO: atomWithStorage put extra double quotes on strings
  }
  if (get(servedFromReverseProxyState)) {
    return `${get(serverAddressState)}`
      .replaceAll('"', '')
  }
  return `${get(serverAddressState)}:${get(serverPortState)}`
    .replaceAll('"', '')
 })
-export const serverURL = atom((get) =>
+export const themeState = atom<Theme>({
-  `${window.location.protocol}//${get(serverAddressAndPortState)}`
+  key: 'themeStateState',
-)
+  default: localStorage.getItem('theme') as Theme || 'system',
  effects: [
    ({ onSet }) =>
      onSet(l => localStorage.setItem('theme', l.toString()))
  ]
 })
-export const rpcWebSocketEndpoint = atom((get) => {
+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') || '--no-mtime',
  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 servedFromReverseProxyState = atom({
  key: 'servedFromReverseProxyState',
  default: localStorage.getItem('reverseProxy') === "true" || window.location.port == "",
  effects: [
    ({ onSet }) =>
      onSet(a => localStorage.setItem('reverseProxy', a.toString()))
  ]
 })
 export const appTitleState = atom({
  key: 'appTitleState',
  default: localStorage.getItem('appTitle') ?? 'yt-dlp Web UI',
  effects: [
    ({ onSet }) =>
      onSet(a => localStorage.setItem('appTitle', a.toString()))
  ]
 })
 export const serverAddressAndPortState = selector({
  key: 'serverAddressAndPortState',
  get: ({ get }) => get(servedFromReverseProxyState)
    ? `${get(serverAddressState)}`
    : `${get(serverAddressState)}:${get(serverPortState)}`
 })
 export const serverURL = selector({
  key: 'serverURL',
  get: ({ get }) =>
    `${window.location.protocol}//${get(serverAddressAndPortState)}`
 })
 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 = atom((get) => {
+export const rpcHTTPEndpoint = selector({
  key: 'rpcHTTPEndpoint',
  get: ({ get }) => {
    const proto = window.location.protocol
    return `${proto}//${get(serverAddressAndPortState)}/rpc/http`
  }
 })
-export const serverSideCookiesState = atom<Promise<string>>(async (get) => await pipe(
+export const cookiesState = atom({
-  ffetch<Readonly<{ cookies: string }>>(`${get(serverURL)}/api/v1/cookies`),
+  key: 'cookiesState',
-  matchW(
+  default: localStorage.getItem('yt-dlp-cookies') ?? '',
-    () => '',
+  effects: [
-    (r) => r.cookies
+    ({ onSet }) =>
-  )
+      onSet(c => localStorage.setItem('yt-dlp-cookies', c))
-)())
+  ]
 })
-const themeSelector = atom<ThemeNarrowed>((get) => {
+export const themeSelector = selector<ThemeNarrowed>({
  key: 'themeSelector',
  get: ({ get }) => {
    const theme = get(themeState)
    if ((theme === 'system' && prefersDarkMode()) || theme === 'dark') {
      return 'dark'
    }
    return 'light'
  }
 })
-export const accentState = atomWithStorage<Accent>(
+export const settingsState = selector<SettingsState>({
-  'accent-color',
+  key: 'settingsState',
-  localStorage.getItem('accent-color') as Accent ?? 'default',
+  get: ({ get }) => ({
 )
 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),
  autoFileExtension: get(autoFileExtensionState),
    pathOverriding: get(pathOverridingState),
    enableCustomArgs: get(enableCustomArgsState),
    listView: get(listViewState),
    servedFromReverseProxy: get(servedFromReverseProxyState),
    appTitle: get(appTitleState)
-}))
+  })
 })
--- a/frontend/src/atoms/status.ts
+++ b/frontend/src/atoms/status.ts
@@ -1,34 +1,42 @@
-import { pipe } from 'fp-ts/lib/function'
+import { atom, selector } from 'recoil'
 import { of } from 'fp-ts/lib/Task'
 import { getOrElse } from 'fp-ts/lib/TaskEither'
 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(false)
+type StatusState = {
  connected: boolean,
  updated: boolean,
  downloading: boolean,
 }
-export const freeSpaceBytesState = atom(async (get) => {
+
-  const res = await get(rpcClientState)
+export const connectedState = atom({
-    .freeSpace()
+  key: 'connectedState',
-    .catch(() => ({ result: 0 }))
+  default: false
  return res.result
 })
-export const availableDownloadPathsState = atom(async (get) => {
+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()
      .catch(() => ({ result: 0 }))
    return res.result
  }
 })
 export const availableDownloadPathsState = selector({
  key: 'availableDownloadPathsState',
  get: async ({ get }) => {
    const res = await get(rpcClientState).directoryTree()
      .catch(() => ({ result: [] }))
    return res.result
  }
 })
 export const ytdlpRpcVersionState = atom<Promise<RPCVersion>>(async (get) => await pipe(
  ffetch<RPCVersion>(`${get(serverURL)}/api/v1/version`),
  getOrElse(() => pipe(
    {
      rpcVersion: 'unknown version',
      ytdlpVersion: 'unknown version',
    },
    of
  )),
 )())
--- a/frontend/src/atoms/toast.ts
+++ b/frontend/src/atoms/toast.ts
@@ -1,5 +1,5 @@
 import { AlertColor } from '@mui/material'
-import { atom } from 'jotai'
+import { atom } from 'recoil'
 export type Toast = {
  open: boolean,
@@ -9,4 +9,7 @@ export type Toast = {
  severity?: AlertColor
 }
-export const toastListState = atom<Toast[]>([])
+export const toastListState = atom<Toast[]>({
  key: 'toastListState',
  default: [],
 })
--- a/frontend/src/atoms/ui.ts
+++ b/frontend/src/atoms/ui.ts
@@ -1,10 +1,6 @@
-import { atom } from 'jotai'
+import { atom } from 'recoil'
 import { activeDownloadsState } from './downloads'
-export const loadingAtom = atom(true)
+export const loadingAtom = atom({
-
+  key: 'loadingAtom',
-export const totalDownloadSpeedState = atom<number>((get) =>
+  default: true
-  get(activeDownloadsState)
+})
    .map(d => d.progress.speed)
    .reduce((curr, next) => curr + next, 0)
 )
--- a/frontend/src/components/AppBar.tsx
+++ b/frontend/src/components/AppBar.tsx
@@ -1,11 +1,11 @@
-import { styled } from '@mui/material'
+import { styled } from '@mui/material';
-import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
 interface AppBarProps extends MuiAppBarProps {
  open?: boolean
 }
-const drawerWidth = 240
+const drawerWidth = 240;
 const AppBar = styled(MuiAppBar, {
  shouldForwardProp: (prop) => prop !== 'open',
@@ -23,6 +23,6 @@ const AppBar = styled(MuiAppBar, {
      duration: theme.transitions.duration.enteringScreen,
    }),
  }),
-}))
+}));
 export default AppBar
--- a/frontend/src/components/ArchiveCard.tsx
+++ b/frontend/src/components/ArchiveCard.tsx
@@ -1,98 +0,0 @@
 import DeleteIcon from '@mui/icons-material/Delete'
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
 import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser'
 import SaveAltIcon from '@mui/icons-material/SaveAlt'
 import {
  Card,
  CardActionArea,
  CardActions,
  CardContent,
  CardMedia,
  IconButton,
  Skeleton,
  Tooltip,
  Typography
 } from '@mui/material'
 import { useAtomValue } from 'jotai'
 import { serverURL } from '../atoms/settings'
 import { ArchiveEntry } from '../types'
 import { base64URLEncode, ellipsis } from '../utils'
 type Props = {
  entry: ArchiveEntry
  onDelete: (id: string) => void
  onHardDelete: (id: string) => void
 }
 const ArchiveCard: React.FC<Props> = ({ entry, onDelete, onHardDelete }) => {
  const serverAddr = useAtomValue(serverURL)
  const viewFile = (path: string) => {
    const encoded = base64URLEncode(path)
    window.open(`${serverAddr}/filebrowser/v/${encoded}?token=${localStorage.getItem('token')}`)
  }
  const downloadFile = (path: string) => {
    const encoded = base64URLEncode(path)
    window.open(`${serverAddr}/filebrowser/d/${encoded}?token=${localStorage.getItem('token')}`)
  }
  return (
    <Card>
      <CardActionArea onClick={() => navigator.clipboard.writeText(entry.source)}>
        {entry.thumbnail !== '' ?
          <CardMedia
            component="img"
            height={180}
            image={entry.thumbnail}
          /> :
          <Skeleton variant="rectangular" height={180} />
        }
        <CardContent>
          {entry.title !== '' ?
            <Typography gutterBottom variant="h6" component="div">
              {ellipsis(entry.title, 60)}
            </Typography> :
            <Skeleton />
          }
          {/* <code>
            {JSON.stringify(JSON.parse(entry.metadata), null, 2)}
          </code> */}
          <p>{new Date(entry.created_at).toLocaleString()}</p>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Tooltip title="Open in browser">
          <IconButton
            onClick={() => viewFile(entry.path)}
          >
            <OpenInBrowserIcon />
          </IconButton>
        </Tooltip>
        <Tooltip title="Download this file">
          <IconButton
            onClick={() => downloadFile(entry.path)}
          >
            <SaveAltIcon />
          </IconButton>
        </Tooltip>
        <Tooltip title="Delete from archive">
          <IconButton
            onClick={() => onDelete(entry.id)}
          >
            <DeleteIcon />
          </IconButton>
        </Tooltip>
        <Tooltip title="Delete from disk">
          <IconButton
            onClick={() => onHardDelete(entry.id)}
          >
            <DeleteForeverIcon />
          </IconButton>
        </Tooltip>
      </CardActions>
    </Card>
  )
 }
 export default ArchiveCard
--- a/frontend/src/components/CookiesTextField.tsx
+++ b/frontend/src/components/CookiesTextField.tsx
@@ -1,23 +1,22 @@
-import { Button, TextField } from '@mui/material'
+import { TextField } from '@mui/material'
 import * as A from 'fp-ts/Array'
 import * as E from 'fp-ts/Either'
 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 { useRecoilState, useRecoilValue } from 'recoil'
 import { Subject, debounceTime, distinctUntilChanged } from 'rxjs'
-import { serverSideCookiesState, serverURL } from '../atoms/settings'
+import { cookiesTemplateState } from '../atoms/downloadTemplate'
 import { cookiesState, serverURL } from '../atoms/settings'
 import { useSubscription } from '../hooks/observable'
 import { useToast } from '../hooks/toast'
 import { ffetch } from '../lib/httpClient'
 import { useAtomValue } from 'jotai'
 import { useI18n } from '../hooks/useI18n'
 const { i18n } = useI18n()
 const validateCookie = (cookie: string) => pipe(
  cookie,
-  cookie => cookie.split('\t'),
+  cookie => cookie.replace(/\s\s+/g, ' '),
  cookie => cookie.replaceAll('\t', ' '),
  cookie => cookie.split(' '),
  E.of,
  E.flatMap(
    E.fromPredicate(
@@ -69,19 +68,13 @@ const validateCookie = (cookie: string) => pipe(
  ),
 )
 const noopValidator = (s: string): E.Either<string, string[]> => pipe(
  s,
  s => s.split('\t'),
  E.of
 )
 const isCommentOrNewLine = (s: string) => s === '' || s.startsWith('\n') || s.startsWith('#')
 const CookiesTextField: React.FC = () => {
-  const serverAddr = useAtomValue(serverURL)
+  const serverAddr = useRecoilValue(serverURL)
-  const savedCookies = useAtomValue(serverSideCookiesState)
+  const [, setCookies] = useRecoilState(cookiesTemplateState)
  const [savedCookies, setSavedCookies] = useRecoilState(cookiesState)
  const { pushMessage } = useToast()
  const flag = '--cookies=cookies.txt'
  const cookies$ = useMemo(() => new Subject<string>(), [])
@@ -93,41 +86,28 @@ const CookiesTextField: React.FC = () => {
      })
    })()
  const deleteCookies = () => pipe(
    ffetch(`${serverAddr}/api/v1/cookies`, {
      method: 'DELETE',
    }),
    matchW(
      (l) => pushMessage(l, 'error'),
      (_) => {
        pushMessage('Deleted cookies', 'success')
        pushMessage(`Reload the page to apply the changes`, 'info')
      }
    )
  )()
  const validateNetscapeCookies = (cookies: string) => pipe(
    cookies,
    cookies => cookies.split('\n'),
-    A.map(c => isCommentOrNewLine(c) ? noopValidator(c) : validateCookie(c)), // validate line
+    cookies => cookies.filter(f => !f.startsWith('\n')), // empty lines
-    A.mapWithIndex((i, either) => pipe(                  // detect errors and return the either
+    cookies => cookies.filter(f => !f.startsWith('# ')), // comments
    cookies => cookies.filter(Boolean), // empty lines
    A.map(validateCookie),
    A.mapWithIndex((i, either) => pipe(
      either,
-      E.match(
+      E.matchW(
-        (l) => {
+        (l) => pushMessage(`Error in line ${i + 1}: ${l}`, 'warning'),
-          pushMessage(`Error in line ${i + 1}: ${l}`, 'warning')
+        () => E.isRight(either)
          return either
        },
        (_) => either
      ),
    )),
-    A.filter(c => E.isRight(c)),                         // filter the line who didn't pass the validation
+    A.filter(Boolean),
-    A.map(E.getOrElse(() => new Array<string>())),       // cast the array of eithers to an array of tokens
+    A.match(
-    A.filter(f => f.length > 0),                         // filter the empty tokens
+      () => false,
-    A.map(f => f.join('\t')),                            // join the tokens in a TAB separated string
+      (c) => {
-    A.reduce('', (c, n) => `${c}${n}\n`),                // reduce all to a single string separated by \n
+        pushMessage(`Valid ${c.length} Netscape cookies`, 'info')
-    parsed => parsed.length > 0                          // if nothing has passed the validation return none
+        return true
-      ? O.some(parsed)
+      }
-      : O.none
+    )
  )
  useSubscription(
@@ -137,17 +117,22 @@ const CookiesTextField: React.FC = () => {
    ),
    (cookies) => pipe(
      cookies,
      cookies => {
        setSavedCookies(cookies)
        return cookies
      },
      validateNetscapeCookies,
      O.fromPredicate(f => f === true),
      O.match(
-        () => pushMessage('No valid cookies', 'warning'),
+        () => setCookies(''),
-        async (some) => {
+        async () => {
          pipe(
-            await submitCookies(some.trimEnd()),
+            await submitCookies(cookies),
            E.match(
              (l) => pushMessage(`${l}`, 'error'),
              () => {
-                pushMessage(`Saved ${some.split('\n').length} Netscape cookies`, 'success')
+                pushMessage(`Saved Netscape cookies`, 'success')
-                pushMessage('Reload the page to apply the changes', 'info')
+                setCookies(flag)
              }
            )
          )
@@ -157,7 +142,6 @@ const CookiesTextField: React.FC = () => {
  )
  return (
    <>
    <TextField
      label="Netscape Cookies"
      multiline
@@ -167,8 +151,6 @@ const CookiesTextField: React.FC = () => {
      defaultValue={savedCookies}
      onChange={(e) => cookies$.next(e.currentTarget.value)}
    />
      <Button onClick={deleteCookies}>{i18n.t('deleteCookies')}</Button>
    </>
  )
 }
--- a/frontend/src/components/CustomArgsTextField.tsx
+++ b/frontend/src/components/CustomArgsTextField.tsx
@@ -1,35 +0,0 @@
 import { TextField } from '@mui/material'
 import { useAtom, useAtomValue } from 'jotai'
 import { customArgsState } from '../atoms/downloadTemplate'
 import { settingsState } from '../atoms/settings'
 import { useI18n } from '../hooks/useI18n'
 import { useEffect } from 'react'
 const CustomArgsTextField: React.FC = () => {
  const { i18n } = useI18n()
  const settings = useAtomValue(settingsState)
  const [customArgs, setCustomArgs] = useAtom(customArgsState)
  useEffect(() => {
    setCustomArgs('')
  }, [])
  const handleCustomArgsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setCustomArgs(e.target.value)
  }
  return (
    <TextField
      fullWidth
      label={i18n.t('customArgsInput')}
      variant="outlined"
      onChange={handleCustomArgsChange}
      value={customArgs}
      disabled={settings.formatSelection}
    />
  )
 }
 export default CustomArgsTextField
--- a/frontend/src/components/DownloadCard.tsx
+++ b/frontend/src/components/DownloadCard.tsx
@@ -1,3 +1,7 @@
 import EightK from '@mui/icons-material/EightK'
 import FourK from '@mui/icons-material/FourK'
 import Hd from '@mui/icons-material/Hd'
 import Sd from '@mui/icons-material/Sd'
 import {
  Button,
  Card,
@@ -6,23 +10,14 @@ import {
  CardContent,
  CardMedia,
  Chip,
  IconButton,
  LinearProgress,
  Skeleton,
  Stack,
  Tooltip,
  Typography
 } from '@mui/material'
 import { useAtomValue } from 'jotai'
 import { useCallback } from 'react'
 import { serverURL } from '../atoms/settings'
 import { RPCResult } from '../types'
-import { base64URLEncode, ellipsis, formatSize, formatSpeedMiB, mapProcessStatus } from '../utils'
+import { ellipsis, formatSpeedMiB, mapProcessStatus, roundMiB } from '../utils'
 import ResolutionBadge from './ResolutionBadge'
 import ClearIcon from '@mui/icons-material/Clear'
 import StopCircleIcon from '@mui/icons-material/StopCircle'
 import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser'
 import SaveAltIcon from '@mui/icons-material/SaveAlt'
 type Props = {
  download: RPCResult
@@ -30,9 +25,16 @@ type Props = {
  onCopy: () => void
 }
-const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
+const Resolution: React.FC<{ resolution?: string }> = ({ resolution }) => {
-  const serverAddr = useAtomValue(serverURL)
+  if (!resolution) return null
  if (resolution.includes('4320')) return <EightK color="primary" />
  if (resolution.includes('2160')) return <FourK color="primary" />
  if (resolution.includes('1080')) return <Hd color="primary" />
  if (resolution.includes('720')) return <Sd color="primary" />
  return null
 }
 const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
  const isCompleted = useCallback(
    () => download.progress.percentage === '-1',
    [download.progress.percentage]
@@ -45,16 +47,6 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
    [download.progress.percentage, isCompleted]
  )
  const viewFile = (path: string) => {
    const encoded = base64URLEncode(path)
    window.open(`${serverAddr}/filebrowser/v/${encoded}?token=${localStorage.getItem('token')}`)
  }
  const downloadFile = (path: string) => {
    const encoded = base64URLEncode(path)
    window.open(`${serverAddr}/filebrowser/d/${encoded}?token=${localStorage.getItem('token')}`)
  }
  return (
    <Card>
      <CardActionArea onClick={() => {
@@ -69,22 +61,14 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
          /> :
          <Skeleton variant="rectangular" height={180} />
        }
        {download.progress.percentage ?
          <LinearProgress
            variant="determinate"
            value={percentageToNumber()}
            color={isCompleted() ? "success" : "primary"}
          /> :
          null
        }
        <CardContent>
          {download.info.title !== '' ?
            <Typography gutterBottom variant="h6" component="div">
-              {ellipsis(download.info.title, 100)}
+              {ellipsis(download.info.title, 54)}
            </Typography> :
            <Skeleton />
          }
-          <Stack direction="row" spacing={0.5} py={1}>
+          <Stack direction="row" spacing={1} py={2}>
            <Chip
              label={
                isCompleted()
@@ -102,48 +86,29 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
              {!isCompleted() ? formatSpeedMiB(download.progress.speed) : ''}
            </Typography>
            <Typography>
-              {formatSize(download.info.filesize_approx ?? 0)}
+              {roundMiB(download.info.filesize_approx ?? 0)}
            </Typography>
-            <ResolutionBadge resolution={download.info.resolution} />
+            <Resolution resolution={download.info.resolution} />
          </Stack>
          {download.progress.percentage ?
            <LinearProgress
              variant="determinate"
              value={percentageToNumber()}
              color={isCompleted() ? "secondary" : "primary"}
            /> :
            null
          }
        </CardContent>
      </CardActionArea>
      <CardActions>
-        {isCompleted() ?
+        <Button
-          <Tooltip title="Clear from the view">
+          variant="contained"
-            <IconButton
+          size="small"
          color="primary"
          onClick={onStop}
        >
-              <ClearIcon />
+          {isCompleted() ? "Clear" : "Stop"}
-            </IconButton>
+        </Button>
          </Tooltip>
          :
          <Tooltip title="Stop this download">
            <IconButton
              onClick={onStop}
            >
              <StopCircleIcon />
            </IconButton>
          </Tooltip>
        }
        {isCompleted() &&
          <>
            <Tooltip title="Download this file">
              <IconButton
                onClick={() => downloadFile(download.output.savedFilePath)}
              >
                <SaveAltIcon />
              </IconButton>
            </Tooltip>
            <Tooltip title="Open in a new tab">
              <IconButton
                onClick={() => viewFile(download.output.savedFilePath)}
              >
                <OpenInBrowserIcon />
              </IconButton>
            </Tooltip>
          </>
        }
      </CardActions>
    </Card>
  )
--- a/frontend/src/components/DownloadDialog.tsx
+++ b/frontend/src/components/DownloadDialog.tsx
@@ -2,6 +2,7 @@ import { FileUpload } from '@mui/icons-material'
 import CloseIcon from '@mui/icons-material/Close'
 import {
  Autocomplete,
  Backdrop,
  Box,
  Button,
  Checkbox,
@@ -11,10 +12,7 @@ import {
  Grid,
  IconButton,
  InputAdornment,
  MenuItem,
  Paper,
  Select,
  SelectChangeEvent,
  TextField
 } from '@mui/material'
 import AppBar from '@mui/material/AppBar'
@@ -23,32 +21,27 @@ 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,
  forwardRef,
  useEffect,
  useMemo,
  useRef,
  useState,
  useTransition
 } from 'react'
-import {
+import { useRecoilState, useRecoilValue } from 'recoil'
-  cookiesTemplateState,
+import { customArgsState, downloadTemplateState, filenameTemplateState, savedTemplatesState } from '../atoms/downloadTemplate'
-  customArgsState,
+import { latestCliArgumentsState, settingsState } from '../atoms/settings'
  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 { CliArguments } from '../lib/argsParser'
 import type { DLMetadata } from '../types'
-import { toFormatArgs } from '../utils'
+import { isValidURL, toFormatArgs } from '../utils'
 import CustomArgsTextField from './CustomArgsTextField'
 import ExtraDownloadOptions from './ExtraDownloadOptions'
 import LoadingBackdrop from './LoadingBackdrop'
 const Transition = forwardRef(function Transition(
  props: TransitionProps & {
@@ -66,103 +59,89 @@ type Props = {
 }
 const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
-  const settings = useAtomValue(settingsState)
+  const settings = useRecoilValue(settingsState)
-  const isConnected = useAtomValue(connectedState)
+  const isConnected = useRecoilValue(connectedState)
-  const availableDownloadPaths = useAtomValue(availableDownloadPathsState)
+  const availableDownloadPaths = useRecoilValue(availableDownloadPathsState)
-  const savedTemplates = useAtomValue(savedTemplatesState)
+  const downloadTemplate = useRecoilValue(downloadTemplateState)
-  const customArgs = useAtomValue(customArgsState)
+  const savedTemplates = useRecoilValue(savedTemplatesState)
  const cookies = useAtomValue(cookiesTemplateState)
  const [downloadFormats, setDownloadFormats] = useState<DLMetadata>()
  const [pickedVideoFormat, setPickedVideoFormat] = useState('')
  const [pickedAudioFormat, setPickedAudioFormat] = useState('')
  const [pickedBestFormat, setPickedBestFormat] = useState('')
-  const [isFormatsLoading, setIsFormatsLoading] = useState(false)
+
  const [customArgs, setCustomArgs] = useRecoilState(customArgsState)
  const [, setCliArgs] = useRecoilState(latestCliArgumentsState)
  const [downloadPath, setDownloadPath] = useState('')
-  const [filenameTemplate, setFilenameTemplate] = useAtom(
+  const [filenameTemplate, setFilenameTemplate] = useRecoilState(
    filenameTemplateState
  )
  const [fileExtension, setFileExtension] = useState('.%(ext)s')
  const [url, setUrl] = useState('')
  const [workingUrl, setWorkingUrl] = useState('')
  const [isPlaylist, setIsPlaylist] = useState(false)
  const argsBuilder = useMemo(() =>
    new CliArguments().fromString(settings.cliArgs), [settings.cliArgs]
  )
  const { i18n } = useI18n()
  const { client } = useRPC()
  const { pushMessage } = useToast()
  const urlInputRef = useRef<HTMLInputElement>(null)
  const customFilenameInputRef = useRef<HTMLInputElement>(null)
  const [isPending, startTransition] = useTransition()
  useEffect(() => {
    setCustomArgs('')
  }, [open])
  /**
    * Retrive url from input, cli-arguments from checkboxes and emits via WebSocket
  */
-  const sendUrl = async (immediate?: string) => {
+  const sendUrl = (immediate?: string) => {
    for (const line of url.split('\n')) {
    const codes = new Array<string>()
    if (pickedVideoFormat !== '') codes.push(pickedVideoFormat)
    if (pickedAudioFormat !== '') codes.push(pickedAudioFormat)
    if (pickedBestFormat !== '') codes.push(pickedBestFormat)
      const downloadTemplate = `${customArgs} ${cookies}`
        .replace(/  +/g, ' ')
        .trim()
      await new Promise(r => setTimeout(r, 10))
    client.download({
-        url: immediate || line,
+      url: immediate || url || workingUrl,
-        args: `${toFormatArgs(codes)} ${downloadTemplate}`,
+      args: `${argsBuilder.toString()} ${toFormatArgs(codes)} ${downloadTemplate}`,
      pathOverride: downloadPath ?? '',
-        renameTo: settings.fileRenaming ? filenameTemplate + (settings.autoFileExtension ? fileExtension : '') : '',
+      renameTo: settings.fileRenaming ? filenameTemplate : '',
      playlist: isPlaylist,
    })
    setUrl('')
    setWorkingUrl('')
    setTimeout(() => {
      resetInput()
      setDownloadFormats(undefined)
-        onDownloadStart(immediate || line)
+      onDownloadStart(immediate || url || workingUrl)
-      }, 100)
+    }, 250)
    }
    setUrl('')
  }
  /**
   * Retrive url from input and display the formats selection view
   */
  const sendUrlFormatSelection = () => {
    setWorkingUrl(url)
    setUrl('')
    setPickedAudioFormat('')
    setPickedVideoFormat('')
    setPickedBestFormat('')
    if (isPlaylist) {
      pushMessage('Format selection on playlist is not supported', 'warning')
      resetInput()
      onClose()
      return
    }
    setIsFormatsLoading(true)
    client.formats(url)
      ?.then(formats => {
        if (formats.result._type === 'playlist') {
          pushMessage('Format selection on playlist is not supported. Downloading as playlist.', 'info')
          resetInput()
          onClose()
          return
        }
        setDownloadFormats(formats.result)
        resetInput()
      })
      .then(() => setIsFormatsLoading(false))
  }
  const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -173,8 +152,8 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
    setFilenameTemplate(e.target.value)
  }
-  const handleFileExtensionChange = (e: SelectChangeEvent<string>) => {
+  const handleCustomArgsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFileExtension(e.target.value)
+    setCustomArgs(e.target.value)
  }
  const parseUrlListFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -187,6 +166,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
    file
      .split('\n')
      .filter(u => isValidURL(u))
      .forEach(u => sendUrl(u))
  }
@@ -204,7 +184,10 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
      onClose={onClose}
      TransitionComponent={Transition}
    >
-      <LoadingBackdrop isLoading={isPending || isFormatsLoading} />
+      <Backdrop
        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={isPending}
      />
      <AppBar sx={{ position: 'relative' }}>
        <Toolbar>
          <IconButton
@@ -224,7 +207,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
        backgroundColor: (theme) => theme.palette.background.default,
        minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
      }}>
-        <Container sx={{ my: 4 }}>
+        <Container sx={{ my: 4 }} >
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <Paper
@@ -237,7 +220,6 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
              >
                <Grid container>
                  <TextField
                    multiline
                    fullWidth
                    ref={urlInputRef}
                    label={i18n.t('urlInput')}
@@ -272,22 +254,25 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
                  />
                </Grid>
                <Grid container spacing={1} sx={{ mt: 1 }}>
-                  {settings.enableCustomArgs &&
+                  {
                    settings.enableCustomArgs &&
                    <Grid item xs={12}>
-                      <CustomArgsTextField />
+                      <TextField
                        fullWidth
                        label={i18n.t('customArgsInput')}
                        variant="outlined"
                        onChange={handleCustomArgsChange}
                        value={customArgs}
                        disabled={
                          !isConnected ||
                          (settings.formatSelection && downloadFormats != null)
                        }
                      />
                    </Grid>
                  }
                  {
                    settings.fileRenaming &&
-                    <Grid item xs={
+                    <Grid item xs={settings.pathOverriding ? 8 : 12}>
                      !settings.autoFileExtension && !settings.pathOverriding
                        ? 12
                        : !settings.autoFileExtension && settings.pathOverriding
                          ? 8
                          : settings.autoFileExtension && !settings.pathOverriding
                            ? 10
                            : 6
                    }>
                      <TextField
                        sx={{ mt: 1 }}
                        ref={customFilenameInputRef}
@@ -303,22 +288,6 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
                      />
                    </Grid>
                  }
                  {
                    settings.autoFileExtension &&
                    <Grid item xs={2}>
                      <Select
                        sx={{ mt: 1 }}
                        fullWidth
                        label={i18n.t('autoFileExtension')}
                        value={fileExtension}
                        onChange={handleFileExtensionChange}
                        variant="outlined">
                        <MenuItem value=".%(ext)s">Auto</MenuItem>
                        <MenuItem value=".mp4">mp4</MenuItem>
                        <MenuItem value=".mkv">mkv</MenuItem>
                      </Select>
                    </Grid>
                  }
                  {
                    settings.pathOverriding &&
                    <Grid item xs={4}>
@@ -358,6 +327,19 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
                        label={i18n.t('playlistCheckbox')}
                      />
                    </Grid>
                    <Grid item>
                      <FormControlLabel
                        control={
                          <Checkbox
                            onChange={() => setCliArgs(argsBuilder.toggleExtractAudio().toString())}
                          />
                        }
                        checked={argsBuilder.extractAudio}
                        onChange={() => setCliArgs(argsBuilder.toggleExtractAudio().toString())}
                        disabled={settings.formatSelection}
                        label={i18n.t('extractAudioCheckbox')}
                      />
                    </Grid>
                  </Grid>
                  <Grid item>
                    <Button
@@ -365,7 +347,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
                      disabled={url === ''}
                      onClick={() => settings.formatSelection
                        ? startTransition(() => sendUrlFormatSelection())
-                        : startTransition(async () => await sendUrl())
+                        : sendUrl()
                      }
                    >
                      {
--- a/frontend/src/components/Downloads.tsx
+++ b/frontend/src/components/Downloads.tsx
@@ -1,27 +1,34 @@
 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'
-import DownloadsGridView from './DownloadsGridView'
+import DownloadsCardView from './DownloadsCardView'
-import DownloadsTableView from './DownloadsTableView'
+import DownloadsListView from './DownloadsListView'
 const Downloads: React.FC = () => {
-  const tableView = useAtomValue(listViewState)
+  const listView = useRecoilValue(listViewState)
-  const loadingDownloads = useAtomValue(loadingDownloadsState)
+  const loadingDownloads = useRecoilValue(loadingDownloadsState)
-  const [isLoading, setIsLoading] = useAtom(loadingAtom)
+  const [isLoading, setIsLoading] = useRecoilState(loadingAtom)
  useEffect(() => {
    if (loadingDownloads) {
-      return setIsLoading(true)
+      setIsLoading(true)
      return
    }
    setIsLoading(false)
  }, [loadingDownloads, isLoading])
-  if (tableView) return <DownloadsTableView />
+  if (listView) {
    return (
      <DownloadsListView />
    )
  }
-  return <DownloadsGridView />
+  return (
    <DownloadsCardView />
  )
 }
 export default Downloads
--- a/frontend/src/components/DownloadsCardView.tsx
+++ b/frontend/src/components/DownloadsCardView.tsx
@@ -0,0 +1,35 @@
 import { Grid } from '@mui/material'
 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 DownloadCard from './DownloadCard'
 const DownloadsCardView: React.FC = () => {
  const downloads = useRecoilValue(activeDownloadsState)
  const { i18n } = useI18n()
  const { client } = useRPC()
  const { pushMessage } = useToast()
  const abort = (id: string) => client.kill(id)
  return (
    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
      {
        downloads.map(download => (
          <Grid item xs={4} sm={8} md={6} key={download.id}>
            <DownloadCard
              download={download}
              onStop={() => abort(download.id)}
              onCopy={() => pushMessage(i18n.t('clipboardAction'), 'info')}
            />
          </Grid>
        ))
      }
    </Grid>
  )
 }
 export default DownloadsCardView
--- a/frontend/src/components/DownloadsGridView.tsx
+++ b/frontend/src/components/DownloadsGridView.tsx
@@ -1,47 +0,0 @@
 import { Grid2 } from '@mui/material'
 import { useAtomValue } from 'jotai'
 import { useTransition } from 'react'
 import { activeDownloadsState } from '../atoms/downloads'
 import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
 import { ProcessStatus, RPCResult } from '../types'
 import DownloadCard from './DownloadCard'
 import LoadingBackdrop from './LoadingBackdrop'
 const DownloadsGridView: React.FC = () => {
  const downloads = useAtomValue(activeDownloadsState)
  const { i18n } = useI18n()
  const { client } = useRPC()
  const { pushMessage } = useToast()
  const [isPending, startTransition] = useTransition()
  const stop = async (r: RPCResult) => r.progress.process_status === ProcessStatus.COMPLETED
    ? await client.clear(r.id)
    : await client.kill(r.id)
  return (
    <>
      <LoadingBackdrop isLoading={isPending} />
      <Grid2 container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12, xl: 12 }} pt={2}>
        {
          downloads.map(download => (
            <Grid2 size={{ xs: 4, sm: 8, md: 6, xl: 4 }} key={download.id}>
              <DownloadCard
                download={download}
                onStop={() => startTransition(async () => {
                  await stop(download)
                })}
                onCopy={() => pushMessage(i18n.t('clipboardAction'), 'info')}
              />
            </Grid2>
          ))
        }
      </Grid2>
    </>
  )
 }
 export default DownloadsGridView
--- a/frontend/src/components/DownloadsListView.tsx
+++ b/frontend/src/components/DownloadsListView.tsx
@@ -0,0 +1,98 @@
 import {
  Button,
  Grid,
  LinearProgress,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography
 } from "@mui/material"
 import { useRecoilValue } from 'recoil'
 import { activeDownloadsState } from '../atoms/downloads'
 import { useRPC } from '../hooks/useRPC'
 import { ellipsis, formatSpeedMiB, roundMiB } from "../utils"
 const DownloadsListView: React.FC = () => {
  const downloads = useRecoilValue(activeDownloadsState)
  const { client } = useRPC()
  const abort = (id: string) => client.kill(id)
  return (
    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
      <Grid item xs={12}>
        <TableContainer
          component={Paper}
          sx={{ minHeight: '100%' }}
          elevation={2}
          hidden={downloads.length === 0}
        >
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>
                  <Typography fontWeight={500} fontSize={15}>Title</Typography>
                </TableCell>
                <TableCell>
                  <Typography fontWeight={500} fontSize={15}>Progress</Typography>
                </TableCell>
                <TableCell>
                  <Typography fontWeight={500} fontSize={15}>Speed</Typography>
                </TableCell>
                <TableCell>
                  <Typography fontWeight={500} fontSize={15}>Size</Typography>
                </TableCell>
                <TableCell>
                  <Typography fontWeight={500} fontSize={15}>Actions</Typography>
                </TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {
                downloads.map(download => (
                  <TableRow key={download.id}>
                    <TableCell>{ellipsis(download.info.title, 80)}</TableCell>
                    <TableCell>
                      <LinearProgress
                        value={
                          download.progress.percentage === '-1'
                            ? 100
                            : Number(download.progress.percentage.replace('%', ''))
                        }
                        variant={
                          download.progress.process_status === 0
                            ? 'indeterminate'
                            : 'determinate'
                        }
                        color={download.progress.percentage === '-1' ? 'success' : 'primary'}
                      />
                    </TableCell>
                    <TableCell>{formatSpeedMiB(download.progress.speed)}</TableCell>
                    <TableCell>{roundMiB(download.info.filesize_approx ?? 0)}</TableCell>
                    <TableCell>
                      <Button
                        variant="contained"
                        size="small"
                        onClick={() => abort(download.id)}
                      >
                        {download.progress.percentage === '-1' ? 'Remove' : 'Stop'}
                      </Button>
                    </TableCell>
                  </TableRow>
                ))
              }
            </TableBody>
          </Table>
        </TableContainer>
      </Grid>
    </Grid>
  )
 }
 export default DownloadsListView
--- a/frontend/src/components/DownloadsTableView.tsx
+++ b/frontend/src/components/DownloadsTableView.tsx
@@ -1,216 +0,0 @@
 import DeleteIcon from '@mui/icons-material/Delete'
 import DownloadIcon from '@mui/icons-material/Download'
 import DownloadDoneIcon from '@mui/icons-material/DownloadDone'
 import FileDownloadIcon from '@mui/icons-material/FileDownload'
 import SmartDisplayIcon from '@mui/icons-material/SmartDisplay'
 import StopCircleIcon from '@mui/icons-material/StopCircle'
 import {
  Box,
  ButtonGroup,
  IconButton,
  LinearProgress,
  LinearProgressProps,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography
 } from "@mui/material"
 import { forwardRef } from 'react'
 import { TableComponents, TableVirtuoso } from 'react-virtuoso'
 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 = [
  {
    width: 8,
    label: 'Status',
    dataKey: 'status',
    numeric: false,
  },
  {
    width: 500,
    label: 'Title',
    dataKey: 'title',
    numeric: false,
  },
  {
    width: 50,
    label: 'Speed',
    dataKey: 'speed',
    numeric: true,
  },
  {
    width: 150,
    label: 'Progress',
    dataKey: 'progress',
    numeric: true,
  },
  {
    width: 80,
    label: 'Size',
    dataKey: 'size',
    numeric: true,
  },
  {
    width: 100,
    label: 'Added on',
    dataKey: 'addedon',
    numeric: true,
  },
  {
    width: 80,
    label: 'Actions',
    dataKey: 'actions',
    numeric: true,
  },
 ] as const
 function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
  return (
    <Box sx={{ display: 'flex', alignItems: 'center' }}>
      <Box sx={{ width: '100%', mr: 1 }}>
        <LinearProgress variant="determinate" {...props} />
      </Box>
      <Box sx={{ minWidth: 35 }}>
        <Typography variant="body2" color="text.secondary">{`${Math.round(
          props.value,
        )}%`}</Typography>
      </Box>
    </Box>
  )
 }
 const VirtuosoTableComponents: TableComponents<RPCResult> = {
  Scroller: forwardRef<HTMLDivElement>((props, ref) => (
    <TableContainer {...props} ref={ref} />
  )),
  Table: (props) => (
    <Table {...props} sx={{ borderCollapse: 'separate', tableLayout: 'fixed', mt: 2 }} size='small' />
  ),
  TableHead,
  TableRow: ({ item: _item, ...props }) => <TableRow {...props} />,
  TableBody: forwardRef<HTMLTableSectionElement>((props, ref) => (
    <TableBody {...props} ref={ref} />
  )),
 }
 function fixedHeaderContent() {
  return (
    <TableRow>
      {columns.map((column) => (
        <TableCell
          key={column.dataKey}
          variant="head"
          align={column.numeric || false ? 'right' : 'left'}
          style={{ width: column.width }}
        >
          {column.label}
        </TableCell>
      ))}
    </TableRow>
  )
 }
 const DownloadsTableView: React.FC = () => {
  const downloads = useAtomValue(activeDownloadsState)
  const serverAddr = useAtomValue(serverURL)
  const { client } = useRPC()
  const viewFile = (path: string) => {
    const encoded = base64URLEncode(path)
    window.open(`${serverAddr}/filebrowser/v/${encoded}?token=${localStorage.getItem('token')}`)
  }
  const downloadFile = (path: string) => {
    const encoded = base64URLEncode(path)
    window.open(`${serverAddr}/filebrowser/d/${encoded}?token=${localStorage.getItem('token')}`)
  }
  const stop = (r: RPCResult) => r.progress.process_status === ProcessStatus.COMPLETED
    ? client.clear(r.id)
    : client.kill(r.id)
  function rowContent(_index: number, download: RPCResult) {
    return (
      <>
        <TableCell>
          {download.progress.percentage === '-1'
            ? <DownloadDoneIcon color="primary" />
            : <DownloadIcon color="primary" />
          }
        </TableCell>
        <TableCell>{download.info.title}</TableCell>
        <TableCell align="right">{formatSpeedMiB(download.progress.speed)}</TableCell>
        <TableCell align="right">
          <LinearProgressWithLabel
            sx={{ height: '16px' }}
            value={
              download.progress.percentage === '-1'
                ? 100
                : Number(download.progress.percentage.replace('%', ''))
            }
            variant={
              download.progress.process_status === 0
                ? 'indeterminate'
                : 'determinate'
            }
            color={download.progress.percentage === '-1' ? 'primary' : 'primary'}
          />
        </TableCell>
        <TableCell align="right">{formatSize(download.info.filesize_approx ?? 0)}</TableCell>
        <TableCell align="right">
          {new Date(download.info.created_at).toLocaleString()}
        </TableCell>
        <TableCell align="right">
          <ButtonGroup>
            <IconButton
              size="small"
              onClick={() => stop(download)}
            >
              {download.progress.percentage === '-1' ? <DeleteIcon /> : <StopCircleIcon />}
            </IconButton>
            {download.progress.percentage === '-1' &&
              <>
                <IconButton
                  size="small"
                  onClick={() => viewFile(download.output.savedFilePath)}
                >
                  <SmartDisplayIcon />
                </IconButton>
                <IconButton
                  size="small"
                  onClick={() => downloadFile(download.output.savedFilePath)}
                >
                  <FileDownloadIcon />
                </IconButton>
              </>
            }
          </ButtonGroup>
        </TableCell>
      </>
    )
  }
  return (
    <Box style={{ height: downloads.length === 0 ? '0vh' : '80vh', width: '100%' }}>
      <TableVirtuoso
        hidden={downloads.length === 0}
        data={downloads}
        components={VirtuosoTableComponents}
        fixedHeaderContent={fixedHeaderContent}
        itemContent={rowContent}
      />
    </Box>
  )
 }
 export default DownloadsTableView
--- a/frontend/src/components/EmptyArchive.tsx
+++ b/frontend/src/components/EmptyArchive.tsx
@@ -1,45 +0,0 @@
 import ArchiveIcon from '@mui/icons-material/Archive'
 import { Container, SvgIcon, Typography, styled } from '@mui/material'
 import { activeDownloadsState } from '../atoms/downloads'
 import { useI18n } from '../hooks/useI18n'
 import { useAtomValue } from 'jotai'
 const FlexContainer = styled(Container)({
  display: 'flex',
  minWidth: '100%',
  minHeight: '80vh',
  alignItems: 'center',
  justifyContent: 'center',
  flexDirection: 'column'
 })
 const Title = styled(Typography)({
  display: 'flex',
  width: '100%',
  alignItems: 'center',
  justifyContent: 'center',
  paddingBottom: '0.5rem'
 })
 export default function EmptyArchive() {
  const { i18n } = useI18n()
  const activeDownloads = useAtomValue(activeDownloadsState)
  if (activeDownloads.length !== 0) {
    return null
  }
  return (
    <FlexContainer>
      <Title fontWeight={'500'} fontSize={72} color={'gray'}>
        <SvgIcon sx={{ fontSize: '200px' }}>
          <ArchiveIcon />
        </SvgIcon>
      </Title>
      <Title fontWeight={'500'} fontSize={36} color={'gray'}>
        {/* {i18n.t('splashText')} */}
        Empty Archive
      </Title>
    </FlexContainer>
  )
 }
--- a/frontend/src/components/ErrorBoundary.tsx
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -39,7 +39,7 @@ const ErrorBoundary: React.FC = () => {
        </Button>
      </Link>
      <Typography sx={{ mt: 2 }} color={'gray'} fontWeight={500}>
-        Or login if authentification is enabled
+        Or login if authentication is enabled
      </Typography>
      <Link to={'/login'} >
        <Button variant='contained' sx={{ mt: 2 }}>
--- a/frontend/src/components/ExtraDownloadOptions.tsx
+++ b/frontend/src/components/ExtraDownloadOptions.tsx
@@ -1,22 +1,13 @@
 import { Autocomplete, Box, TextField, Typography } from '@mui/material'
-import { useAtomValue, useSetAtom } from 'jotai'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import { useEffect } from 'react'
 import { customArgsState, savedTemplatesState } from '../atoms/downloadTemplate'
 import { useI18n } from '../hooks/useI18n'
 const ExtraDownloadOptions: React.FC = () => {
  const { i18n } = useI18n()
-  const customTemplates = useAtomValue(savedTemplatesState)
+  const customTemplates = useRecoilValue(savedTemplatesState)
-  const setCustomArgs = useSetAtom(customArgsState)
+  const [, setCustomArgs] = useRecoilState(customArgsState)
  useEffect(() => {
    setCustomArgs(
      customTemplates
        .find(f => f.name.toLocaleLowerCase() === 'default')
        ?.content ?? ''
    )
  }, [])
  return (
    <>
@@ -24,12 +15,6 @@ const ExtraDownloadOptions: React.FC = () => {
        disablePortal
        options={customTemplates.map(({ name, content }) => ({ label: name, content }))}
        autoHighlight
        defaultValue={
          customTemplates
            .filter(({ id, name }) => id === "0" || name.toLowerCase() === "default")
            .map(({ name, content }) => ({ label: name, content }))
            .at(0)
        }
        getOptionLabel={(option) => option.label}
        onChange={(_, value) => {
          setCustomArgs(value?.content!)
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -1,68 +0,0 @@
 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 { settingsState } from '../atoms/settings'
 import { connectedState } from '../atoms/status'
 import { totalDownloadSpeedState } from '../atoms/ui'
 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 = useAtomValue(settingsState)
  const isConnected = useAtomValue(connectedState)
  const totalDownloadSpeed = useAtomValue(totalDownloadSpeedState)
  const mode = settings.theme
  const { i18n } = useI18n()
  return (
    <AppBar position="fixed" color="default" sx={{
      top: 'auto',
      bottom: 0,
      height: 48,
      zIndex: 1200,
      borderTop: mode === 'light'
        ? '1px solid rgba(0, 0, 0, 0.12)'
        : '1px solid rgba(255, 255, 255, 0.12)',
    }}>
      <Toolbar sx={{
        paddingBottom: 2,
        fontSize: 14,
        display: 'flex', gap: 1, justifyContent: 'space-between'
      }}>
        <Suspense fallback={<CircularProgress size={15} />}>
          <VersionIndicator />
        </Suspense>
        <div style={{ display: 'flex', gap: 4, 'alignItems': 'center' }}>
          <div style={{
            display: 'flex',
            alignItems: 'center',
            flexWrap: 'wrap',
            marginRight: 'px',
            gap: 3,
          }}>
            <DownloadIcon />
            <span>
              {formatSpeedMiB(totalDownloadSpeed)}
            </span>
            <Divider orientation="vertical" flexItem />
            <SettingsEthernet />
            <span>
              {isConnected ? settings.serverAddr : i18n.t('notConnectedText')}
            </span>
          </div>
          <Divider orientation="vertical" flexItem />
          <Suspense fallback={i18n.t('loadingLabel')}>
            <FreeSpaceIndicator />
          </Suspense>
        </div>
      </Toolbar>
    </AppBar>
  )
 }
 export default Footer
--- a/frontend/src/components/FormatsGrid.tsx
+++ b/frontend/src/components/FormatsGrid.tsx
@@ -101,7 +101,6 @@ export default function FormatsGrid({
                  >
                    {format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
                    {(format.filesize_approx > 0) ? " (~" + Math.round(format.filesize_approx / 1024 / 1024) + " MiB)" : ""}
                    {format.language}
                  </Button>
                </Grid>
              ))
--- a/frontend/src/components/FreeSpaceIndicator.tsx
+++ b/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 { formatGiB } from '../utils'
 import { useAtomValue } from 'jotai'
 const FreeSpaceIndicator = () => {
-  const freeSpace = useAtomValue(freeSpaceBytesState)
+  const freeSpace = useRecoilValue(freeSpaceBytesState)
  return (
    <div style={{
@@ -15,7 +15,7 @@ const FreeSpaceIndicator = () => {
    }}>
      <StorageIcon />
      <span>
-        {formatSize(freeSpace)}
+        {formatGiB(freeSpace)}
      </span>
    </div>
  )
--- a/frontend/src/components/HomeActions.tsx
+++ b/frontend/src/components/HomeActions.tsx
@@ -1,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 = useSetAtom(loadingAtom)
+  const [, setIsLoading] = useRecoilState(loadingAtom)
  const [openDownload, setOpenDownload] = useState(false)
  const [openEditor, setOpenEditor] = useState(false)
@@ -27,7 +27,6 @@ const HomeActions: React.FC = () => {
            setOpenDownload(false)
            setIsLoading(true)
          }}
          // TODO: handle optimistic UI update
          onDownloadStart={(url) => {
            pushMessage(`Requested ${url}`, 'info')
            setOpenDownload(false)
--- a/frontend/src/components/HomeSpeedDial.tsx
+++ b/frontend/src/components/HomeSpeedDial.tsx
@@ -1,17 +1,14 @@
 import AddCircleIcon from '@mui/icons-material/AddCircle'
 import BuildCircleIcon from '@mui/icons-material/BuildCircle'
 import ClearAllIcon from '@mui/icons-material/ClearAll'
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
 import FolderZipIcon from '@mui/icons-material/FolderZip'
 import FormatListBulleted from '@mui/icons-material/FormatListBulleted'
 import ViewAgendaIcon from '@mui/icons-material/ViewAgenda'
 import {
  SpeedDial,
  SpeedDialAction,
  SpeedDialIcon
 } from '@mui/material'
-import { useAtom, useAtomValue } from 'jotai'
+import { useRecoilState } from 'recoil'
-import { listViewState, serverURL } from '../atoms/settings'
+import { listViewState } from '../atoms/settings'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
@@ -21,37 +18,28 @@ type Props = {
 }
 const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
-  const serverAddr = useAtomValue(serverURL)
+  const [, setListView] = useRecoilState(listViewState)
  const [listView, setListView] = useAtom(listViewState)
  const { i18n } = useI18n()
  const { client } = useRPC()
  const abort = () => client.killAll()
  return (
    <SpeedDial
      ariaLabel="Home speed dial"
-      sx={{ position: 'absolute', bottom: 64, right: 24 }}
+      sx={{ position: 'absolute', bottom: 32, right: 32 }}
      icon={<SpeedDialIcon />}
    >
      <SpeedDialAction
-        icon={listView ? <ViewAgendaIcon /> : <FormatListBulleted />}
+        icon={<FormatListBulleted />}
-        tooltipTitle={listView ? 'Card view' : i18n.t('tableView')}
+        tooltipTitle={`Table view`}
        onClick={() => setListView(state => !state)}
      />
      <SpeedDialAction
        icon={<FolderZipIcon />}
        tooltipTitle={i18n.t('bulkDownload')}
        onClick={() => window.open(`${serverAddr}/archive/bulk?token=${localStorage.getItem('token')}`)}
      />
      <SpeedDialAction
        icon={<ClearAllIcon />}
        tooltipTitle={i18n.t('clearCompletedButton')}
        onClick={() => client.clearCompleted()}
      />
      <SpeedDialAction
        icon={<DeleteForeverIcon />}
        tooltipTitle={i18n.t('abortAllButton')}
-        onClick={() => client.killAll()}
+        onClick={abort}
      />
      <SpeedDialAction
        icon={<BuildCircleIcon />}
--- a/frontend/src/components/LoadingBackdrop.tsx
+++ b/frontend/src/components/LoadingBackdrop.tsx
@@ -1,10 +1,10 @@
 import { Backdrop, CircularProgress } from '@mui/material'
 import { useRecoilValue } from 'recoil'
 import { loadingAtom } from '../atoms/ui'
-type Props = {
+const LoadingBackdrop: React.FC = () => {
-  isLoading: boolean
+  const isLoading = useRecoilValue(loadingAtom)
 }
 const LoadingBackdrop: React.FC<Props> = ({ isLoading }) => {
  return (
    <Backdrop
      sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
--- a/frontend/src/components/LogTerminal.tsx
+++ b/frontend/src/components/LogTerminal.tsx
@@ -1,20 +1,20 @@
 import { Box, CircularProgress, Container, Paper, Typography } from '@mui/material'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { serverURL } from '../atoms/settings'
 import { useI18n } from '../hooks/useI18n'
 import { useAtomValue } from 'jotai'
 const token = localStorage.getItem('token')
 const LogTerminal: React.FC = () => {
-  const [logBuffer, setLogBuffer] = useState<string[]>([])
+  const serverAddr = useRecoilValue(serverURL)
  const [isConnecting, setIsConnecting] = useState(true)
  const boxRef = useRef<HTMLDivElement>(null)
  const serverAddr = useAtomValue(serverURL)
  const { i18n } = useI18n()
  const [logBuffer, setLogBuffer] = useState<string[]>([])
  const boxRef = useRef<HTMLDivElement>(null)
  const eventSource = useMemo(
    () => new EventSource(`${serverAddr}/log/sse?token=${token}`),
    [serverAddr]
@@ -22,8 +22,8 @@ const LogTerminal: React.FC = () => {
  useEffect(() => {
    eventSource.addEventListener('log', event => {
-      const msg: string = JSON.parse(event.data)
+      const msg: string[] = JSON.parse(event.data)
-      setLogBuffer(buff => [...buff, msg].slice(-500))
+      setLogBuffer(buff => [...buff, ...msg].slice(-100))
      boxRef.current?.scrollTo(0, boxRef.current.scrollHeight)
    })
@@ -32,51 +32,59 @@ const LogTerminal: React.FC = () => {
    return () => eventSource.close()
  }, [eventSource])
  useEffect(() => {
    eventSource.onopen = () => setIsConnecting(false)
  }, [eventSource])
  const logEntryStyle = (data: string) => {
    const sx = {}
    if (data.includes("level=ERROR")) {
-      return { ...sx, color: 'red' }
+      return { color: 'red' }
    }
    if (data.includes("level=WARN")) {
-      return { ...sx, color: 'orange' }
+      return { color: 'orange' }
    }
-
+    return {}
    return sx
  }
  return (
-
+    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
-    <div
+      <Paper
-      ref={boxRef}
+        sx={{
-      style={{
+          p: 2.5,
-        fontFamily: 'Roboto Mono',
+          display: 'flex',
-        height: '70.5vh',
+          flexDirection: 'column',
-        overflowY: 'auto',
+        }}
-        overflowX: 'auto',
+      >
-        fontSize: '13.5px',
+        <Typography py={1} variant="h5" color="primary">
-        fontWeight: '600',
+          {i18n.t('logsTitle')}
-        backgroundColor: 'black',
+        </Typography>
-        color: 'white',
+        {(logBuffer.length === 0) && <Box sx={{
-        padding: '0.5rem',
+          display: 'flex',
-        borderRadius: '0.25rem'
+          flexDirection: 'column',
          justifyItems: 'center',
          alignItems: 'center',
          gap: 1
        }}>
          <CircularProgress color="primary" size={32} />
          <Typography py={1} variant="subtitle2" >
            {i18n.t('awaitingLogs')}
          </Typography>
        </Box>
        }
        <Box
          ref={boxRef}
          sx={{
            fontFamily: 'Roboto Mono',
            height: '75.5vh',
            overflowY: 'auto',
            overflowX: 'auto',
            fontSize: '15px'
          }}
        >
      {isConnecting ? <div>{'Connecting...'}</div> : <div>{'Connected!'}</div>}
      {logBuffer.length === 0 && <div>{i18n.t('awaitingLogs')}</div>}
          {logBuffer.map((log, idx) => (
-        <div key={idx} style={logEntryStyle(log)}>
+            <Box key={idx} sx={logEntryStyle(log)}>
              {log}
-        </div>
+            </Box>
          ))}
-    </div>
+        </Box>
-
+      </Paper>
    </Container >
  )
 }
--- a/frontend/src/components/Logout.tsx
+++ b/frontend/src/components/Logout.tsx
@@ -1,10 +1,13 @@
 import LogoutIcon from '@mui/icons-material/Logout'
 import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import { useRecoilValue } from 'recoil'
 import { serverURL } from '../atoms/settings'
 import { useI18n } from '../hooks/useI18n'
 export default function Logout() {
  const navigate = useNavigate()
  const url = useRecoilValue(serverURL)
  const logout = async () => {
    localStorage.removeItem('token')
--- a/frontend/src/components/ResolutionBadge.tsx
+++ b/frontend/src/components/ResolutionBadge.tsx
@@ -1,15 +0,0 @@
 import EightK from '@mui/icons-material/EightK'
 import FourK from '@mui/icons-material/FourK'
 import Hd from '@mui/icons-material/Hd'
 import Sd from '@mui/icons-material/Sd'
 const ResolutionBadge: React.FC<{ resolution?: string }> = ({ resolution }) => {
  if (!resolution) return null
  if (resolution.includes('4320')) return <EightK color="primary" />
  if (resolution.includes('2160')) return <FourK color="primary" />
  if (resolution.includes('1080')) return <Hd color="primary" />
  if (resolution.includes('720')) return <Sd color="primary" />
  return null
 }
 export default ResolutionBadge
--- a/frontend/src/components/SocketSubscriber.tsx
+++ b/frontend/src/components/SocketSubscriber.tsx
@@ -1,9 +1,9 @@
 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'
 import { serverAddressAndPortState } from '../atoms/settings'
 import { connectedState } from '../atoms/status'
 import { useSubscription } from '../hooks/observable'
@@ -11,16 +11,14 @@ 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] = useAtom(connectedState)
+  const [connected, setIsConnected] = useRecoilState(connectedState)
-  const setDownloads = useSetAtom(downloadsState)
+  const [, setDownloads] = useRecoilState(downloadsState)
-  const serverAddressAndPort = useAtomValue(serverAddressAndPortState)
+  const serverAddressAndPort = useRecoilValue(serverAddressAndPortState)
  const rpcPollingTime = useAtomValue(rpcPollingTimeState)
  const { i18n } = useI18n()
  const { client } = useRPC()
@@ -54,7 +52,7 @@ const SocketSubscriber: React.FC<Props> = () => {
            .filter(f => !!f.info.url).sort((a, b) => datetimeCompareFunc(
              b.info.created_at,
              a.info.created_at,
-            )),
+            ))
          )
        )
      }
@@ -72,10 +70,11 @@ const SocketSubscriber: React.FC<Props> = () => {
  useEffect(() => {
    if (connected) {
-      const sub = timer(0, rpcPollingTime).subscribe(() => client.running())
+      const sub = timer(0, 1000).subscribe(() => client.running())
      return () => sub.unsubscribe()
    }
-  }, [connected, client, rpcPollingTime])
+  }, [connected, client])
  return null
 }
--- a/frontend/src/components/Splash.tsx
+++ b/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 = useAtomValue(activeDownloadsState)
+  const activeDownloads = useRecoilValue(activeDownloadsState)
  if (activeDownloads.length !== 0) {
    return null
--- a/frontend/src/components/TemplateTextField.tsx
+++ b/frontend/src/components/TemplateTextField.tsx
@@ -1,67 +0,0 @@
 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
--- a/frontend/src/components/TemplatesEditor.tsx
+++ b/frontend/src/components/TemplatesEditor.tsx
@@ -1,7 +1,7 @@
 import AddIcon from '@mui/icons-material/Add'
 import CloseIcon from '@mui/icons-material/Close'
 import DeleteIcon from '@mui/icons-material/Delete'
 import {
  Alert,
  AppBar,
  Backdrop,
  Box,
@@ -18,14 +18,13 @@ import {
 import { TransitionProps } from '@mui/material/transitions'
 import { matchW } from 'fp-ts/lib/Either'
 import { pipe } from 'fp-ts/lib/function'
 import { useAtomValue } from 'jotai'
 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 TemplateTextField from './TemplateTextField'
 const Transition = forwardRef(function Transition(
  props: TransitionProps & {
@@ -45,7 +44,7 @@ const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
  const [templateName, setTemplateName] = useState('')
  const [templateContent, setTemplateContent] = useState('')
-  const serverAddr = useAtomValue(serverURL)
+  const serverAddr = useRecoilValue(serverURL)
  const [isPending, startTransition] = useTransition()
  const [templates, setTemplates] = useState<CustomTemplate[]>([])
@@ -55,11 +54,11 @@ const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
  useEffect(() => {
    if (open) {
-      fetchTemplates()
+      getTemplates()
    }
  }, [open])
-  const fetchTemplates = async () => {
+  const getTemplates = async () => {
    const task = ffetch<CustomTemplate[]>(`${serverAddr}/api/v1/template/all`)
    const either = await task()
@@ -89,7 +88,7 @@ const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
        (l) => pushMessage(l, 'warning'),
        () => {
          pushMessage('Added template')
-          fetchTemplates()
+          getTemplates()
          setTemplateName('')
          setTemplateContent('')
        }
@@ -97,26 +96,6 @@ 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',
@@ -130,7 +109,7 @@ const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
        (l) => pushMessage(l, 'warning'),
        () => {
          pushMessage('Deleted template')
-          fetchTemplates()
+          getTemplates()
        }
      )
    )
@@ -166,12 +145,7 @@ const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
        backgroundColor: (theme) => theme.palette.background.default,
        minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
      }}>
-        <Grid container spacing={2} sx={{ px: 4, pt: 3, pb: 4 }}>
+        <Grid container spacing={2} sx={{ p: 4 }}>
          <Grid item>
            <Alert severity="info">
              {i18n.t('templatesReloadInfo')}
            </Alert>
          </Grid>
          <Grid item xs={12}>
            <Paper
              elevation={4}
@@ -199,7 +173,7 @@ const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
                    InputProps={{
                      endAdornment: <Button
                        variant='contained'
-                        onClick={() => startTransition(async () => await addTemplate())}
+                        onClick={() => startTransition(() => { addTemplate() })}
                      >
                        <AddIcon />
                      </Button>
@@ -208,12 +182,38 @@ const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
                </Grid>
              </Grid>
              {templates.map(template => (
-                <TemplateTextField
+                <Grid
                  container
                  spacing={2}
                  justifyContent="center"
                  alignItems="center"
                  key={template.id}
-                  template={template}
+                  sx={{ mt: 1 }}
-                  onChange={updateTemplate}
+                >
-                  onDelete={deleteTemplate}
+                  <Grid item xs={3}>
                    <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>
--- a/frontend/src/components/ThemeToggler.tsx
+++ b/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] = useAtom(themeState)
+  const [theme, setTheme] = useRecoilState(themeState)
  const actions: Record<Theme, React.ReactNode> = {
    system: <BrightnessAuto />,
--- a/frontend/src/components/UpdateBinaryButton.tsx
+++ b/frontend/src/components/UpdateBinaryButton.tsx
@@ -1,33 +0,0 @@
 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
--- a/frontend/src/components/VersionIndicator.tsx
+++ b/frontend/src/components/VersionIndicator.tsx
@@ -1,17 +0,0 @@
 import { Chip } from '@mui/material'
 import { ytdlpRpcVersionState } from '../atoms/status'
 import { useAtomValue } from 'jotai'
 const VersionIndicator: React.FC = () => {
  const version = useAtomValue(ytdlpRpcVersionState)
  return (
    <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
      <Chip label={`UI v3.2.5`} variant="outlined" size="small" />
      <Chip label={`RPC v${version.rpcVersion}`} variant="outlined" size="small" />
      <Chip label={`yt-dlp v${version.ytdlpVersion}`} variant="outlined" size="small" />
    </div>
  )
 }
 export default VersionIndicator
--- a/frontend/src/components/livestream/LivestreamDialog.tsx
+++ b/frontend/src/components/livestream/LivestreamDialog.tsx
@@ -1,125 +0,0 @@
 import CloseIcon from '@mui/icons-material/Close'
 import {
  Alert,
  AppBar,
  Box,
  Button,
  Container,
  Dialog,
  Grid,
  IconButton,
  Paper,
  Slide,
  TextField,
  Toolbar,
  Typography
 } from '@mui/material'
 import { TransitionProps } from '@mui/material/transitions'
 import { forwardRef, useState } from 'react'
 import { useToast } from '../../hooks/toast'
 import { useI18n } from '../../hooks/useI18n'
 import { useRPC } from '../../hooks/useRPC'
 type Props = {
  open: boolean
  onClose: () => void
 }
 const Transition = forwardRef(function Transition(
  props: TransitionProps & {
    children: React.ReactElement
  },
  ref: React.Ref<unknown>,
 ) {
  return <Slide direction="up" ref={ref} {...props} />
 })
 const LivestreamDialog: React.FC<Props> = ({ open, onClose }) => {
  const [livestreamURL, setLivestreamURL] = useState('')
  const { i18n } = useI18n()
  const { client } = useRPC()
  const { pushMessage } = useToast()
  const exec = (url: string) => client.execLivestream(url)
  return (
    <Dialog
      fullScreen
      open={open}
      onClose={onClose}
      TransitionComponent={Transition}
    >
      <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">
            Livestream monitor
          </Typography>
        </Toolbar>
      </AppBar>
      <Box sx={{
        backgroundColor: (theme) => theme.palette.background.default,
        minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
      }}>
        <Container sx={{ my: 4 }}>
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <Paper
                elevation={4}
                sx={{
                  p: 2,
                  display: 'flex',
                  flexDirection: 'column',
                }}
              >
                <Grid container>
                  <Grid item xs={12} mb={2}>
                    <Alert severity="info">
                      {i18n.t('livestreamDownloadInfo')}
                    </Alert>
                    <Alert severity="warning" sx={{ mt: 1 }}>
                      {i18n.t('livestreamExperimentalWarning')}
                    </Alert>
                  </Grid>
                  <Grid item xs={12}>
                    <TextField
                      multiline
                      fullWidth
                      label={i18n.t('livestreamURLInput')}
                      variant="outlined"
                      onChange={(e) => setLivestreamURL(e.target.value)}
                    />
                  </Grid>
                  <Grid item>
                    <Button
                      sx={{ mt: 2 }}
                      variant="contained"
                      disabled={livestreamURL === ''}
                      onClick={() => {
                        exec(livestreamURL)
                        onClose()
                        pushMessage(`Monitoring ${livestreamURL}`, 'info')
                      }}
                    >
                      {i18n.t('startButton')}
                    </Button>
                  </Grid>
                </Grid>
              </Paper>
            </Grid>
          </Grid>
        </Container>
      </Box>
    </Dialog>
  )
 }
 export default LivestreamDialog
--- a/frontend/src/components/livestream/LivestreamSpeedDial.tsx
+++ b/frontend/src/components/livestream/LivestreamSpeedDial.tsx
@@ -1,34 +0,0 @@
 import AddCircleIcon from '@mui/icons-material/AddCircle'
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
 import { SpeedDial, SpeedDialAction, SpeedDialIcon } from '@mui/material'
 import { useI18n } from '../../hooks/useI18n'
 type Props = {
  onOpen: () => void
  onStopAll: () => void
 }
 const LivestreamSpeedDial: React.FC<Props> = ({ onOpen, onStopAll }) => {
  const { i18n } = useI18n()
  return (
    <SpeedDial
      ariaLabel="Home speed dial"
      sx={{ position: 'absolute', bottom: 64, right: 24 }}
      icon={<SpeedDialIcon />}
    >
      <SpeedDialAction
        icon={<DeleteForeverIcon />}
        tooltipTitle={i18n.t('abortAllButton')}
        onClick={onStopAll}
      />
      <SpeedDialAction
        icon={<AddCircleIcon />}
        tooltipTitle={i18n.t('newDownloadButton')}
        onClick={onOpen}
      />
    </SpeedDial>
  )
 }
 export default LivestreamSpeedDial
--- a/frontend/src/components/livestream/NoLivestreams.tsx
+++ b/frontend/src/components/livestream/NoLivestreams.tsx
@@ -1,38 +0,0 @@
 import LiveTvIcon from '@mui/icons-material/LiveTv'
 import { Container, SvgIcon, Typography, styled } from '@mui/material'
 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 NoLivestreams() {
  const { i18n } = useI18n()
  return (
    <FlexContainer>
      <Title fontWeight={'500'} fontSize={72} color={'gray'}>
        <SvgIcon sx={{ fontSize: '200px' }}>
          <LiveTvIcon />
        </SvgIcon>
      </Title>
      <Title fontWeight={'500'} fontSize={36} color={'gray'}>
        {i18n.t('livestreamNoMonitoring')}
      </Title>
    </FlexContainer>
  )
 }
--- a/frontend/src/components/subscriptions/NoSubscriptions.tsx
+++ b/frontend/src/components/subscriptions/NoSubscriptions.tsx
@@ -1,38 +0,0 @@
 import UpdateIcon from '@mui/icons-material/Update'
 import { Container, SvgIcon, Typography, styled } from '@mui/material'
 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 NoSubscriptions() {
  const { i18n } = useI18n()
  return (
    <FlexContainer>
      <Title fontWeight={'500'} fontSize={72} color={'gray'}>
        <SvgIcon sx={{ fontSize: '200px' }}>
          <UpdateIcon />
        </SvgIcon>
      </Title>
      <Title fontWeight={'500'} fontSize={36} color={'gray'}>
        {i18n.t('subscriptionsEmptyLabel')}
      </Title>
    </FlexContainer>
  )
 }
--- a/frontend/src/components/subscriptions/SubscriptionsDialog.tsx
+++ b/frontend/src/components/subscriptions/SubscriptionsDialog.tsx
@@ -1,164 +0,0 @@
 import CloseIcon from '@mui/icons-material/Close'
 import {
  Alert,
  AppBar,
  Box,
  Button,
  Container,
  Dialog,
  Grid,
  IconButton,
  Paper,
  Slide,
  TextField,
  Toolbar,
  Typography
 } from '@mui/material'
 import { TransitionProps } from '@mui/material/transitions'
 import { matchW } from 'fp-ts/lib/Either'
 import { pipe } from 'fp-ts/lib/function'
 import { useAtomValue } from 'jotai'
 import { forwardRef, startTransition, useState } from 'react'
 import { customArgsState } from '../../atoms/downloadTemplate'
 import { serverURL } from '../../atoms/settings'
 import { useToast } from '../../hooks/toast'
 import { useI18n } from '../../hooks/useI18n'
 import { ffetch } from '../../lib/httpClient'
 import { Subscription } from '../../services/subscriptions'
 import ExtraDownloadOptions from '../ExtraDownloadOptions'
 type Props = {
  open: boolean
  onClose: () => void
 }
 const Transition = forwardRef(function Transition(
  props: TransitionProps & {
    children: React.ReactElement
  },
  ref: React.Ref<unknown>,
 ) {
  return <Slide direction="up" ref={ref} {...props} />
 })
 const SubscriptionsDialog: React.FC<Props> = ({ open, onClose }) => {
  const [subscriptionURL, setSubscriptionURL] = useState('')
  const [subscriptionCron, setSubscriptionCron] = useState('')
  const customArgs = useAtomValue(customArgsState)
  const { i18n } = useI18n()
  const { pushMessage } = useToast()
  const baseURL = useAtomValue(serverURL)
  const submit = async (sub: Omit<Subscription, 'id'>) => {
    const task = ffetch<void>(`${baseURL}/subscriptions`, {
      method: 'POST',
      body: JSON.stringify(sub)
    })
    const either = await task()
    pipe(
      either,
      matchW(
        (l) => pushMessage(l, 'error'),
        (_) => onClose()
      )
    )
  }
  return (
    <Dialog
      fullScreen
      open={open}
      onClose={onClose}
      TransitionComponent={Transition}
    >
      <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">
            {i18n.t('subscriptionsButtonLabel')}
          </Typography>
        </Toolbar>
      </AppBar>
      <Box sx={{
        backgroundColor: (theme) => theme.palette.background.default,
        minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
      }}>
        <Container sx={{ my: 4 }}>
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <Paper
                elevation={4}
                sx={{
                  p: 2,
                  display: 'flex',
                  flexDirection: 'column',
                }}
              >
                <Grid container gap={1.5}>
                  <Grid item xs={12}>
                    <Alert severity="info">
                      {i18n.t('subscriptionsInfo')}
                    </Alert>
                    <Alert severity="warning" sx={{ mt: 1 }}>
                      {i18n.t('livestreamExperimentalWarning')}
                    </Alert>
                  </Grid>
                  <Grid item xs={12} mt={1}>
                    <TextField
                      multiline
                      fullWidth
                      label={i18n.t('subscriptionsURLInput')}
                      variant="outlined"
                      placeholder="https://www.youtube.com/@SomeChannelThatExists/videos"
                      onChange={(e) => setSubscriptionURL(e.target.value)}
                    />
                  </Grid>
                  <Grid item xs={8} mt={-2}>
                    <ExtraDownloadOptions />
                  </Grid>
                  <Grid item xs={3.871}>
                    <TextField
                      multiline
                      fullWidth
                      label={i18n.t('cronExpressionLabel')}
                      variant="outlined"
                      placeholder="*/5 * * * *"
                      onChange={(e) => setSubscriptionCron(e.target.value)}
                    />
                  </Grid>
                  <Grid item xs={12}>
                    <Button
                      sx={{ mt: 2 }}
                      variant="contained"
                      disabled={subscriptionURL === ''}
                      onClick={() => startTransition(() => submit({
                        url: subscriptionURL,
                        params: customArgs,
                        cron_expression: subscriptionCron
                      }))}
                    >
                      {i18n.t('startButton')}
                    </Button>
                  </Grid>
                </Grid>
              </Paper>
            </Grid>
          </Grid>
        </Container>
      </Box>
    </Dialog>
  )
 }
 export default SubscriptionsDialog
--- a/frontend/src/components/subscriptions/SubscriptionsEditDialog.tsx
+++ b/frontend/src/components/subscriptions/SubscriptionsEditDialog.tsx
@@ -1,162 +0,0 @@
 import CloseIcon from '@mui/icons-material/Close'
 import {
  Alert,
  AppBar,
  Box,
  Button,
  Container,
  Dialog,
  Grid,
  IconButton,
  Paper,
  Slide,
  TextField,
  Toolbar,
  Typography
 } from '@mui/material'
 import { TransitionProps } from '@mui/material/transitions'
 import { matchW } from 'fp-ts/lib/Either'
 import { pipe } from 'fp-ts/lib/function'
 import { useAtomValue } from 'jotai'
 import { forwardRef, startTransition, useState } from 'react'
 import { customArgsState } from '../../atoms/downloadTemplate'
 import { serverURL } from '../../atoms/settings'
 import { useToast } from '../../hooks/toast'
 import { useI18n } from '../../hooks/useI18n'
 import { ffetch } from '../../lib/httpClient'
 import { Subscription } from '../../services/subscriptions'
 import ExtraDownloadOptions from '../ExtraDownloadOptions'
 type Props = {
  subscription: Subscription | undefined
  onClose: () => void
 }
 const Transition = forwardRef(function Transition(
  props: TransitionProps & {
    children: React.ReactElement
  },
  ref: React.Ref<unknown>,
 ) {
  return <Slide direction="up" ref={ref} {...props} />
 })
 const SubscriptionsEditDialog: React.FC<Props> = ({ subscription, onClose }) => {
  const [subscriptionURL, setSubscriptionURL] = useState('')
  const [subscriptionCron, setSubscriptionCron] = useState('')
  const customArgs = useAtomValue(customArgsState)
  const { i18n } = useI18n()
  const { pushMessage } = useToast()
  const baseURL = useAtomValue(serverURL)
  const editSubscription = async (sub: Subscription) => {
    const task = ffetch<void>(`${baseURL}/subscriptions`, {
      method: 'PATCH',
      body: JSON.stringify(sub)
    })
    const either = await task()
    pipe(
      either,
      matchW(
        (l) => pushMessage(l, 'error'),
        (_) => onClose()
      )
    )
  }
  return (
    <Dialog
      fullScreen
      open={!!subscription}
      TransitionComponent={Transition}
    >
      <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">
            {i18n.t('subscriptionsButtonLabel')}
          </Typography>
        </Toolbar>
      </AppBar>
      <Box sx={{
        backgroundColor: (theme) => theme.palette.background.default,
        minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
      }}>
        <Container sx={{ my: 4 }}>
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <Paper
                elevation={4}
                sx={{
                  p: 2,
                  display: 'flex',
                  flexDirection: 'column',
                }}
              >
                <Grid container gap={1.5}>
                  <Grid item xs={12}>
                    <Alert severity="info">
                      Editing {subscription?.url}
                    </Alert>
                  </Grid>
                  <Grid item xs={12} mt={1}>
                    <TextField
                      multiline
                      fullWidth
                      label={i18n.t('subscriptionsURLInput')}
                      variant="outlined"
                      defaultValue={subscription?.url}
                      placeholder="https://www.youtube.com/@SomeChannelThatExists/videos"
                      onChange={(e) => setSubscriptionURL(e.target.value)}
                    />
                  </Grid>
                  <Grid item xs={8} mt={-2}>
                    <ExtraDownloadOptions />
                  </Grid>
                  <Grid item xs={3.871}>
                    <TextField
                      multiline
                      fullWidth
                      label={i18n.t('cronExpressionLabel')}
                      variant="outlined"
                      placeholder="*/5 * * * *"
                      defaultValue={subscription?.cron_expression}
                      onChange={(e) => setSubscriptionCron(e.target.value)}
                    />
                  </Grid>
                  <Grid item xs={12}>
                    <Button
                      sx={{ mt: 2 }}
                      variant="contained"
                      onClick={() => startTransition(async () => await editSubscription({
                        id: subscription?.id ?? '',
                        url: subscriptionURL || subscription?.url!,
                        params: customArgs || subscription?.params!,
                        cron_expression: subscriptionCron || subscription?.cron_expression!
                      }))}
                    >
                      {i18n.t('editButtonLabel')}
                    </Button>
                  </Grid>
                </Grid>
              </Paper>
            </Grid>
          </Grid>
        </Container>
      </Box>
    </Dialog>
  )
 }
 export default SubscriptionsEditDialog
--- a/frontend/src/components/subscriptions/SubscriptionsSpeedDial.tsx
+++ b/frontend/src/components/subscriptions/SubscriptionsSpeedDial.tsx
@@ -1,27 +0,0 @@
 import AddCircleIcon from '@mui/icons-material/AddCircle'
 import { SpeedDial, SpeedDialAction, SpeedDialIcon } from '@mui/material'
 import { useI18n } from '../../hooks/useI18n'
 type Props = {
  onOpen: () => void
 }
 const SubscriptionsSpeedDial: React.FC<Props> = ({ onOpen }) => {
  const { i18n } = useI18n()
  return (
    <SpeedDial
      ariaLabel="Subscriptions speed dial"
      sx={{ position: 'absolute', bottom: 64, right: 24 }}
      icon={<SpeedDialIcon />}
    >
      <SpeedDialAction
        icon={<AddCircleIcon />}
        tooltipTitle={i18n.t('newSubscriptionButton')}
        onClick={onOpen}
      />
    </SpeedDial>
  )
 }
 export default SubscriptionsSpeedDial
--- a/frontend/src/hooks/toast.ts
+++ b/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 = useSetAtom(toastListState)
+  const [, setToasts] = useRecoilState(toastListState)
  return {
    pushMessage: (message: string, severity?: AlertColor) => {
--- a/frontend/src/hooks/useFetch.ts
+++ b/frontend/src/hooks/useFetch.ts
@@ -1,35 +0,0 @@
 import { pipe } from 'fp-ts/lib/function'
 import { matchW } from 'fp-ts/lib/TaskEither'
 import { useAtomValue } from 'jotai'
 import { useEffect, useState } from 'react'
 import { serverURL } from '../atoms/settings'
 import { ffetch } from '../lib/httpClient'
 import { useToast } from './toast'
 const useFetch = <R>(resource: string) => {
  const base = useAtomValue(serverURL)
  const { pushMessage } = useToast()
  const [data, setData] = useState<R>()
  const [error, setError] = useState<string>()
  const fetcher = () => pipe(
    ffetch<R>(`${base}${resource}`),
    matchW(
      (l) => {
        setError(l)
        pushMessage(l, 'error')
      },
      (r) => setData(r)
    )
  )()
  useEffect(() => {
    fetcher()
  }, [])
  return { data, error, fetcher }
 }
 export default useFetch
--- a/frontend/src/hooks/useI18n.ts
+++ b/frontend/src/hooks/useI18n.ts
@@ -1,10 +1,10 @@
-import Translator from '../lib/i18n'
+import { useRecoilValue } from 'recoil'
 import { i18nBuilderState } from '../atoms/i18n'
 export const useI18n = () => {
-  const instance = Translator.instance
+  const instance = useRecoilValue(i18nBuilderState)
  return {
-    i18n: instance,
+    i18n: instance
    t: instance.t
  }
 }
--- a/frontend/src/hooks/useRPC.ts
+++ b/frontend/src/hooks/useRPC.ts
@@ -1,8 +1,8 @@
-import { useAtomValue } from 'jotai'
+import { useRecoilValue } from 'recoil'
 import { rpcClientState } from '../atoms/rpc'
 export const useRPC = () => {
-  const client = useAtomValue(rpcClientState)
+  const client = useRecoilValue(rpcClientState)
  return {
    client
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -6,6 +6,7 @@ import '@fontsource/roboto/300.css'
 import '@fontsource/roboto/400.css'
 import '@fontsource/roboto/500.css'
 import '@fontsource/roboto/700.css'
 import '@fontsource/roboto/700.css'
 import '@fontsource/roboto-mono'
--- a/frontend/src/lib/argsParser.ts
+++ b/frontend/src/lib/argsParser.ts
@@ -0,0 +1,66 @@
 export class CliArguments {
  private _extractAudio: boolean
  private _noMTime: boolean
  constructor(extractAudio = false, noMTime = true) {
    this._extractAudio = extractAudio
    this._noMTime = noMTime
  }
  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()
  }
  private reset() {
    this._extractAudio = false
    this._noMTime = false
  }
  public fromString(str: string): CliArguments {
    this.reset()
    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
@@ -1,6 +1,12 @@
 import { tryCatch } from 'fp-ts/TaskEither'
-async function fetcher<T>(url: string, opt?: RequestInit): Promise<T> {
+export const ffetch = <T>(url: string, opt?: RequestInit) => tryCatch(
  () => fetcher<T>(url, opt),
  (e) => `error while fetching: ${e}`
 )
 const fetcher = async <T>(url: string, opt?: RequestInit) => {
  const jwt = localStorage.getItem('token')
  if (opt && !opt.headers) {
@@ -20,11 +26,5 @@ async function fetcher<T>(url: string, opt?: RequestInit): Promise<T> {
  if (!res.ok) {
    throw await res.text()
  }
  return res.json() as T
 }
 export const ffetch = <T>(url: string, opt?: RequestInit) => tryCatch(
  () => fetcher<T>(url, opt),
  (e) => `error while fetching: ${e}`
 )
--- a/frontend/src/lib/i18n.ts
+++ b/frontend/src/lib/i18n.ts
@@ -1,53 +0,0 @@
 //@ts-ignore
 import i18n from '../assets/i18n.yaml'
 //@ts-ignore
 import fallback from '../assets/i18n/en_US.yaml'
 export default class Translator {
  static #instance: Translator
  private language: string
  private current: string[] = []
  constructor() {
    this.language = localStorage.getItem('language')?.replaceAll('"', '') ?? 'english'
    this.setLanguage(this.language)
  }
  getLanguage(): string {
    return this.language
  }
  async setLanguage(language: string): Promise<void> {
    this.language = language
    let isoCodeFile: string = i18n.languages[language]
    // extension needs to be in source code to help vite bundle all yaml files
    if (isoCodeFile.endsWith('.yaml')) {
      isoCodeFile = isoCodeFile.replaceAll('.yaml', '')
    }
    if (isoCodeFile) {
      const { default: translations } = await import(`../assets/i18n/${isoCodeFile}.yaml`)
      this.current = translations.keys
    }
  }
  t(key: string): string {
    if (this.current) {
      //@ts-ignore
      return this.current[key] ?? fallback.keys[key] ?? 'caption not defined'
    }
    return 'caption not defined'
  }
  public static get instance(): Translator {
    if (!Translator.#instance) {
      Translator.#instance = new Translator()
    }
    return Translator.#instance
  }
 }
--- 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
  private current: string[]
  constructor(language: string) {
    this.setLanguage(language)
  }
  getLanguage(): string {
    return this.language
  }
  setLanguage(language: string): void {
    this.language = language
    this.current = this.textMap[this.language]
  }
  t(key: string): string {
    if (this.current) {
      return this.current[key] ?? 'caption not defined'
    }
    return 'caption not defined'
  }
 }
--- a/frontend/src/lib/rpcClient.ts
+++ b/frontend/src/lib/rpcClient.ts
@@ -1,5 +1,5 @@
 import { Observable } from 'rxjs'
-import type { DLMetadata, LiveStreamProgress, RPCRequest, RPCResponse, RPCResult } from '../types'
+import type { DLMetadata, RPCRequest, RPCResponse, RPCResult } from '../types'
 import { WebSocketSubject, webSocket } from 'rxjs/webSocket'
@@ -41,13 +41,11 @@ export class RPCClient {
    })
  }
-  private argsSanitizer(args: string): string[] {
+  private argsSanitizer(args: string) {
    const splitOnlyWhitespaces = /[^\s"']+|"([^"]*)"|'([^']*)'/gm
    return args
-      .match(splitOnlyWhitespaces)
+      .split(' ')
-      ?.map(a => a.trim())
+      .map(a => a.trim().replaceAll("'", '').replaceAll('"', ''))
-      .filter(Boolean) ?? []
+      .filter(Boolean)
  }
  private async sendHTTP<T>(req: RPCRequest) {
@@ -84,9 +82,7 @@ export class RPCClient {
      : ''
    const sanitizedArgs = this.argsSanitizer(
-      req.args
+      req.args.replace('-o', '').replace(rename, '')
        .replace('-o', '')
        .replace(rename, '')
    )
    if (req.playlist) {
@@ -130,21 +126,14 @@ export class RPCClient {
  }
  public kill(id: string) {
-    return this.sendHTTP({
+    this.sendHTTP({
      method: 'Service.Kill',
      params: [id],
    })
  }
  public clear(id: string) {
    return this.sendHTTP({
      method: 'Service.Clear',
      params: [id],
    })
  }
  public killAll() {
-    return this.sendHTTP({
+    this.sendHTTP({
      method: 'Service.KillAll',
      params: [],
    })
@@ -164,47 +153,10 @@ export class RPCClient {
    })
  }
  public execLivestream(url: string) {
    return this.sendHTTP({
      method: 'Service.ExecLivestream',
      params: [{
        URL: url
      }]
    })
  }
  public progressLivestream() {
    return this.sendHTTP<LiveStreamProgress>({
      method: 'Service.ProgressLivestream',
      params: []
    })
  }
  public killLivestream(url: string) {
    return this.sendHTTP({
      method: 'Service.KillLivestream',
      params: [url]
    })
  }
  public killAllLivestream() {
    return this.sendHTTP({
      method: 'Service.KillAllLivestream',
      params: []
    })
  }
  public updateExecutable() {
    return this.sendHTTP({
      method: 'Service.UpdateExecutable',
      params: []
    })
  }
  public clearCompleted() {
    return this.sendHTTP({
      method: 'Service.ClearCompleted',
      params: []
    })
  }
 }
--- a/frontend/src/providers/ToasterProvider.tsx
+++ b/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] = useAtom(toastListState)
+  const [toasts, setToasts] = useRecoilState(toastListState)
  const deletePredicate = (t: Toast) => (Date.now() - t.createdAt) < 2000
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -8,9 +8,6 @@ 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 LiveStream = lazy(() => import('./views/Livestream'))
 const Filebrowser = lazy(() => import('./views/Filebrowser'))
 const Subscriptions = lazy(() => import('./views/Subscriptions'))
 const ErrorBoundary = lazy(() => import('./components/ErrorBoundary'))
@@ -61,32 +58,6 @@ export const router = createHashRouter([
          </Suspense >
        )
      },
      {
        path: '/filebrowser',
        element: (
          <Suspense fallback={<CircularProgress />}>
            <Filebrowser />
          </Suspense >
        ),
        errorElement: (
          <Suspense fallback={<CircularProgress />}>
            <ErrorBoundary />
          </Suspense >
        )
      },
      {
        path: '/subscriptions',
        element: (
          <Suspense fallback={<CircularProgress />}>
            <Subscriptions />
          </Suspense >
        ),
        errorElement: (
          <Suspense fallback={<CircularProgress />}>
            <ErrorBoundary />
          </Suspense >
        )
      },
      {
        path: '/login',
        element: (
@@ -103,14 +74,6 @@ export const router = createHashRouter([
          </Suspense >
        )
      },
      {
        path: '/monitor',
        element: (
          <Suspense fallback={<CircularProgress />}>
            <LiveStream />
          </Suspense >
        )
      },
    ]
  },
 ])
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
marcobaobao	46bfb1e80f	Added favicon Closes #139	2024-03-03 20:32:20 +01:00
marcobaobao	1cfda047cb	code refactoring, added router, moved download api path	2024-02-23 10:55:33 +01:00
marcobaobao	65b0c8bc0e	code refactoring	2024-02-12 12:02:23 +01:00
marcobaobao	cc06487b0a	layout refactoring	2024-02-10 09:56:50 +01:00
marcobaobao	63b5f00320	formats selection	2024-02-09 18:20:22 +01:00
marcobaobao	b5c627da28	download templates	2024-02-09 11:08:47 +01:00
marcobaobao	453cd2a373	implementing download	2024-02-09 10:47:18 +01:00
marcobaobao	e7e4d03baf	comments	2024-02-07 15:39:44 +01:00
marcobaobao	834664184b	core functionalities	2024-02-07 15:23:52 +01:00
marcobaobao	9bc8734ef0	test	2024-02-07 15:05:03 +01:00
marcobaobao	49152aa641	core functionalities	2024-02-07 15:03:12 +01:00
marcobaobao	6785ead452	code refactoring	2024-02-07 14:40:27 +01:00
marcobaobao	00df98233d	implemented core stores	2024-02-07 14:35:04 +01:00
		`@@ -1 +0,0 @@`
			`docker run -d -p 3033:3033 -v /downloads:/downloads marcobaobao/yt-dlp-webui`
		`@@ -1,2 +0,0 @@`
			`*.tsx linguist-detectable=false`
			`*.html linguist-detectable=false`