License and Readme

Update endpoints
Server v2 is cuttingedge
2025-09-10 20:08:19 +02:00 · 2025-09-06 17:34:02 +02:00 · 2025-09-06 17:11:37 +02:00 · 2025-09-06 16:12:29 +02:00 · 2025-09-05 20:36:58 +02:00 · 2025-09-05 17:45:17 +02:00
78 changed files with 10922 additions and 11389 deletions
--- a/.github/workflows/docker-image-cuttingedge.yml
+++ b/.github/workflows/docker-image-cuttingedge.yml
@@ -3,8 +3,6 @@ name: Docker Image CI
 on:
  push:
    branches: [ "cuttingedge" ]
-  pull_request:
-    branches: [ "cuttingedge" ] 
  workflow_dispatch:

 jobs:
@@ -39,8 +37,8 @@ jobs:
        with:
          context: .
          file: ./Dockerfile
-          #platforms: linux/amd64,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
-          platforms: linux/amd64,linux/arm64
+          #platforms: linux/amd64,linux/amd64/v2,linux/amd64/v3,linux/arm64,linux/arm/v7
+          platforms: linux/amd64,linux/amd64/v2,linux/amd64/v3,linux/arm64,linux/arm/v7
          pull: true
          push: true
          tags: |
--- a/.github/workflows/docker-image-vite-react-ts.yml
+++ b/.github/workflows/docker-image-vite-react-ts.yml
@@ -2,7 +2,7 @@ name: Docker Image CI

 on:
  push:
-    branches: [ "vite-react-ts" ]
+    branches: [ "testing" ]
  workflow_dispatch:

 jobs:
@@ -35,11 +35,11 @@ jobs:
      - name: Build and push Website
        uses: docker/build-push-action@v6.18.0
        with:
-          context: .
+          context: ./
          file: ./Dockerfile
-          #platforms: linux/amd64,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
-          platforms: linux/amd64,linux/arm64
+          #platforms: linux/amd64,linux/amd64/v2,linux/amd64/v3,linux/arm64,linux/arm/v7
+          platforms: linux/amd64,linux/amd64/v2,linux/amd64/v3,linux/arm64,linux/arm/v7
          pull: true
          push: true
          tags: |
-            glax/tranga-website:Server-V2
+            glax/tranga-website:testing
--- a/LICENSE.txt
+++ b/LICENSE.txt
@@ -1,674 +1,4 @@
-                    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>.
+Tranga-Website
+Web-Frontend for Tranga https://github.com/C9Glax/tranga
+Copyright (C) 2025 C9Glax
+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 <http://www.gnu.org/licenses/>.
--- a/README.md
+++ b/README.md
@@ -22,8 +22,12 @@
      <td><img alt="Last Run" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fc9glax%2Ftranga-website%2Factions%2Fworkflows%2Fdocker-image-cuttingedge.yml%2Fruns%3Fper_page%3D1&query=workflow_runs%5B0%5D.created_at&label=Last%20Run"></td>
    </tr>
    <tr>
-      <th><img alt="GitHub branch check runs" src="https://img.shields.io/github/check-runs/c9glax/tranga-website/vite-react-ts?label=vite-react-ts"></th>
-      <td><img alt="Last Run" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fc9glax%2Ftranga-website%2Factions%2Fworkflows%2Fdocker-image-vite-react-ts.yml%2Fruns%3Fper_page%3D1&query=workflow_runs%5B0%5D.created_at&label=Last%20Run"></td>
+      <th><img alt="GitHub branch check runs" src="https://img.shields.io/github/check-runs/c9glax/tranga-website/testing?label=testing"></th>
+      <td><img alt="Last Run" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fc9glax%2Ftranga-website%2Factions%2Fworkflows%2Fdocker-image-testing.yml%2Fruns%3Fper_page%3D1&query=workflow_runs%5B0%5D.created_at&label=Last%20Run"></td>
+    </tr>
+    <tr>
+      <th><img alt="GitHub branch check runs" src="https://img.shields.io/github/check-runs/c9glax/tranga-website/oldstable?label=oldstable"></th>
+      <td><img alt="Last Run" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fc9glax%2Ftranga-website%2Factions%2Fworkflows%2Fdocker-image-oldstable.yml%2Fruns%3Fper_page%3D1&query=workflow_runs%5B0%5D.created_at&label=Last%20Run"></td>
    </tr>
  </table>
 </div>
@@ -33,9 +37,9 @@
 <!-- ABOUT THE PROJECT -->
 ## Screenshots

-| ![Main Page](Screenshots/Screenshot%202025-06-17%20at%2001-15-08%20Tranga.png)      | ![Settings](Screenshots/Screenshot%202025-06-17%20at%2001-15-23%20Tranga.png)    | ![Search Empty](Screenshots/Screenshot%202025-06-17%20at%2001-15-36%20Tranga.png) |
-|-------------------------------------------------------------------------------------|----------------------------------------------------------------------------------|-----------------------------------------------------------------------------------|
-| ![Search Results](Screenshots/Screenshot%202025-06-17%20at%2001-16-32%20Tranga.png) | ![Manga Popup](Screenshots/Screenshot%202025-06-17%20at%2001-16-43%20Tranga.png) | ![Jobs Drawer](Screenshots/Screenshot%202025-06-17%20at%2001-17-37%20Tranga.png)  |
+| ![Main Page](Screenshots/Overview.png) | ![Search](Screenshots/Search%20Modal.png) | ![Manga Detail](Screenshots/Manga%20Detail.png) |
+|----------------------------------------|-------------------------------------------|-------------------------------------------------|
+| Overview                               | Search Dialog                             | Manga Detail                                    |

 ## About The Project

--- a/Screenshots/Manga
+++ b/Screenshots/Manga
--- a/Screenshots/Overview.png
+++ b/Screenshots/Overview.png
--- a/Screenshots/Screenshot
+++ b/Screenshots/Screenshot
--- a/Screenshots/Screenshot
+++ b/Screenshots/Screenshot
--- a/Screenshots/Screenshot
+++ b/Screenshots/Screenshot
--- a/Screenshots/Screenshot
+++ b/Screenshots/Screenshot
--- a/Screenshots/Screenshot
+++ b/Screenshots/Screenshot
--- a/Screenshots/Screenshot
+++ b/Screenshots/Screenshot
--- a/Screenshots/Screenshot
+++ b/Screenshots/Screenshot
--- a/Screenshots/Screenshot
+++ b/Screenshots/Screenshot
--- a/Screenshots/Search
+++ b/Screenshots/Search
--- a/tranga-website/.prettierrc
+++ b/tranga-website/.prettierrc
@@ -0,0 +1,11 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "singleQuote": true,
+    "printWidth": 100,
+    "semi": true,
+    "bracketSpacing": true,
+    "objectWrap": "collapse",
+    "bracketSameLine": true,
+    "singleAttributePerLine": true
+}
--- a/tranga-website/README.md
+++ b/tranga-website/README.md
@@ -13,42 +13,42 @@ If you are developing a production application, we recommend updating the config

 ```js
 export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
+    extends: [
+        // Remove ...tseslint.configs.recommended and replace with this
+        ...tseslint.configs.recommendedTypeChecked,
+        // Alternatively, use this for stricter rules
+        ...tseslint.configs.strictTypeChecked,
+        // Optionally, add this for stylistic rules
+        ...tseslint.configs.stylisticTypeChecked,
+    ],
+    languageOptions: {
+        // other options...
+        parserOptions: {
+            project: ['./tsconfig.node.json', './tsconfig.app.json'],
+            tsconfigRootDir: import.meta.dirname,
+        },
    },
-  },
-})
+});
 ```

 You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

 ```js
 // eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+import reactX from 'eslint-plugin-react-x';
+import reactDom from 'eslint-plugin-react-dom';

 export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
+    plugins: {
+        // Add the react-x and react-dom plugins
+        'react-x': reactX,
+        'react-dom': reactDom,
+    },
+    rules: {
+        // other rules...
+        // Enable its recommended typescript rules
+        ...reactX.configs['recommended-typescript'].rules,
+        ...reactDom.configs.recommended.rules,
+    },
+});
 ```
--- a/tranga-website/eslint.config.js
+++ b/tranga-website/eslint.config.js
@@ -1,28 +1,19 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';

 export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-)
+    { ignores: ['dist'] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ['**/*.{ts,tsx}'],
+        languageOptions: { ecmaVersion: 2020, globals: globals.browser },
+        plugins: { 'react-hooks': reactHooks, 'react-refresh': reactRefresh },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+        },
+    }
+);
--- a/tranga-website/index.html
+++ b/tranga-website/index.html
@@ -1,13 +1,20 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/blahaj.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tranga</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <link
+            rel="icon"
+            type="image/png"
+            href="/blahaj.png" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0" />
+        <title>Tranga</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script
+            type="module"
+            src="/src/main.tsx"></script>
+    </body>
 </html>
--- a/tranga-website/package-lock.json
+++ b/tranga-website/package-lock.json
--- a/tranga-website/package.json
+++ b/tranga-website/package.json
@@ -1,36 +1,39 @@
 {
-  "name": "tranga-website",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@fontsource/inter": "^5.2.5",
-    "@mui/icons-material": "^7.0.1",
-    "@mui/joy": "^5.0.0-beta.52",
-    "@uiw/react-markdown-preview": "^5.1.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.21.0",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.21.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "globals": "^15.15.0",
-    "swagger-typescript-api": "^13.2.7",
-    "typescript": "~5.7.2",
-    "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.0"
-  }
+    "name": "tranga-website",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc -b && vite build",
+        "lint": "eslint . --fix",
+        "swagger-api": "swagger-typescript-api generate -p http://127.0.0.1:6531/swagger/v2/swagger.json -o ./src/api --modular && prettier ./src/api --write",
+        "prettier:check": "prettier . --check",
+        "prettier": "prettier . --write"
+    },
+    "dependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@fontsource/inter": "^5.2.5",
+        "@mui/icons-material": "^7.0.1",
+        "@mui/joy": "^5.0.0-beta.52",
+        "@uiw/react-markdown-preview": "^5.1.4",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.21.0",
+        "@types/react": "^19.0.10",
+        "@types/react-dom": "^19.0.4",
+        "@vitejs/plugin-react": "^4.3.4",
+        "eslint": "^9.21.0",
+        "eslint-plugin-react-hooks": "^5.1.0",
+        "eslint-plugin-react-refresh": "^0.4.19",
+        "globals": "^15.15.0",
+        "prettier": "3.6.2",
+        "swagger-typescript-api": "^13.2.7",
+        "typescript": "~5.7.2",
+        "typescript-eslint": "^8.24.1",
+        "vite": "^6.2.0"
+    }
 }
--- a/tranga-website/src/App.css
+++ b/tranga-website/src/App.css
@@ -1,13 +1,13 @@
 .app {
-  position: absolute;
-  height: 100%;
-  top: 0;
-  width: 100%;
-  left: 0;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    width: 100%;
+    left: 0;
 }

 .app-content {
-  position: absolute;
-  width: 100%;
-  left: 0;
+    position: absolute;
+    width: 100%;
+    left: 0;
 }
--- a/tranga-website/src/App.tsx
+++ b/tranga-website/src/App.tsx
@@ -1,85 +1,84 @@
 import Sheet from '@mui/joy/Sheet';
-import './App.css'
-import Settings from "./Components/Settings/Settings.tsx";
-import Header from "./Header.tsx";
-import {createContext, ReactNode, useEffect, useState} from "react";
-import {V2} from "./apiClient/V2.ts";
-import { ApiContext } from './apiClient/ApiContext.tsx';
-import MangaList from "./Components/Mangas/MangaList.tsx";
-import {FileLibrary, Manga, MangaConnector} from "./apiClient/data-contracts.ts";
-import Search from "./Components/Search.tsx";
-import {Typography} from "@mui/joy";
-
-export const MangaConnectorContext = createContext<MangaConnector[]>([]);
-export const MangaContext = createContext<Manga[]>([]);
-export const FileLibraryContext = createContext<FileLibrary[]>([]);
-
-export default function App () {
-    const apiUriStr = localStorage.getItem("apiUri") ?? window.location.href.substring(0, window.location.href.lastIndexOf("/")) + "/api";
-    const [apiUri, setApiUri] = useState<string>(apiUriStr);
-    const [Api, setApi] = useState<V2>(new V2({
-        baseUrl: apiUri
-    }));
-
-    const [mangaConnectors, setMangaConnectors] = useState<MangaConnector[]>([]);
-    const [manga, setManga] = useState<Manga[]>([]);
-    const [fileLibraries, setFileLibraries] = useState<FileLibrary[]>([]);
+import Header from './Header.tsx';
+import Settings from './Components/Settings/Settings.tsx';
+import ApiProvider, { ApiContext } from './contexts/ApiContext.tsx';
+import { useContext, useEffect, useState } from 'react';
+import { ApiConfig } from './api/http-client.ts';
+import MangaProvider from './contexts/MangaContext.tsx';
+import MangaList from './Components/Mangas/MangaList.tsx';
+import { Search } from './Search.tsx';
+import MangaConnectorProvider from './contexts/MangaConnectorContext.tsx';
+import LibraryProvider from './contexts/FileLibraryContext.tsx';
+import MangaDetail from './Components/Mangas/Detail/MangaDetail.tsx';
+import TButton from './Components/Inputs/TButton.tsx';

+export function App() {
+    const [apiUri, setApiUri] = useState<string>(
+        localStorage.getItem('apiUri') ??
+            window.location.href.substring(0, window.location.href.lastIndexOf('/')) + '/api'
+    );
+    const [apiConfig, setApiConfig] = useState<ApiConfig>({ baseUrl: apiUri });
    useEffect(() => {
-        Api.mangaConnectorList().then(response => {
-            if (response.ok)
-                setMangaConnectors(response.data);
-        });
-        
-        Api.fileLibraryList().then(response => {
-            if (response.ok)
-                setFileLibraries(response.data);
-        })
-        
-        Api.queryMangaDownloadingList()
-            .then(response => {
-                if (response.ok)
-                    setManga(response.data);
-            });
-    }, []);
-    
-    
-    useEffect(() => {
-        localStorage.setItem("apiUri", apiUri);
-        if (Api.baseUrl != apiUri)
-            setApi(new V2({
-                baseUrl: apiUri
-            }));
+        setApiConfig({ baseUrl: apiUri });
    }, [apiUri]);

-    return (
-        <ApiContext.Provider value={Api}>
-            <FileLibraryContext value={fileLibraries}>
-                <MangaConnectorContext.Provider value={mangaConnectors}>
-                    <MangaContext.Provider value={manga}>
-                        {
-                            Api ?
-                                <Sheet className={"app"}>
-                                    <Header>
-                                        <Settings setApiUri={setApiUri} />
-                                    </Header>
-                                    <Sheet className={"app-content"}>
-                                        <MangaList mangas={manga}>
-                                            <Search />
-                                        </MangaList>
-                                    </Sheet>
-                                </Sheet>
-                                : <Loading />
-                        }
-                    </MangaContext.Provider>
-                </MangaConnectorContext.Provider>
-            </FileLibraryContext>
-        </ApiContext.Provider>
-    );
-}
+    const Api = useContext(ApiContext);
+
+    const [searchOpen, setSearchOpen] = useState<boolean>(false);
+    const [downloadDrawerOpen, setDownloadDrawerOpen] = useState(false);
+    const [selectedMangaKey, setSelectedMangaKey] = useState<string>();
+    const [downloadSectionOpen, setDownloadSectionOpen] = useState(false);
+
+    function openMangaDownloadDrawer(mangaKey: string, downloadSectionOpen?: boolean) {
+        setDownloadDrawerOpen(true);
+        setSelectedMangaKey(mangaKey);
+        setDownloadSectionOpen(downloadSectionOpen ?? false);
+    }
+
+    const removeManga = async (mangaKey?: string): Promise<void> => {
+        if (!mangaKey) return Promise.reject();
+        try {
+            let r = await Api.mangaDelete(mangaKey);
+            if (r.ok) return Promise.resolve();
+            else return Promise.reject();
+        } catch (reason) {
+            return await Promise.reject(reason);
+        }
+    };

-function Loading () : ReactNode{
    return (
-        <Typography>Loading</Typography>
+        <ApiProvider apiConfig={apiConfig}>
+            <MangaConnectorProvider>
+                <LibraryProvider>
+                    <MangaProvider>
+                        <Sheet className={'app'}>
+                            <Header>
+                                <Settings setApiUri={setApiUri} />
+                            </Header>
+                            <Sheet className={'app-content'}>
+                                <MangaList
+                                    mangaOnClick={(m) => openMangaDownloadDrawer(m.key)}
+                                    openSearch={() => setSearchOpen(true)}
+                                />
+                                <Search
+                                    open={searchOpen}
+                                    setOpen={setSearchOpen}
+                                    mangaOnClick={(m) => openMangaDownloadDrawer(m.key, true)}
+                                />
+                                <MangaDetail
+                                    open={downloadDrawerOpen}
+                                    setOpen={setDownloadDrawerOpen}
+                                    mangaKey={selectedMangaKey}
+                                    downloadOpen={downloadSectionOpen}>
+                                    <TButton onClick={() => removeManga(selectedMangaKey)}>
+                                        Remove
+                                    </TButton>
+                                </MangaDetail>
+                            </Sheet>
+                        </Sheet>
+                    </MangaProvider>
+                </LibraryProvider>
+            </MangaConnectorProvider>
+        </ApiProvider>
    );
 }
--- a/tranga-website/src/Components/Inputs/TButton.tsx
+++ b/tranga-website/src/Components/Inputs/TButton.tsx
@@ -0,0 +1,33 @@
+import { Button } from '@mui/joy';
+import TProps, { TColor, TDisabled, TState } from './TProps.ts';
+import { MouseEventHandler, ReactNode, useState } from 'react';
+
+export default function TButton(props: TButtonProps) {
+    const [state, setState] = useState<TState>(TState.clean);
+
+    const clicked: MouseEventHandler<HTMLAnchorElement> = (e) => {
+        setState(TState.busy);
+        e.preventDefault();
+        if (props.onClick)
+            props
+                .onClick()
+                .then(() => setState(TState.success))
+                .catch(() => setState(TState.failure));
+    };
+
+    return (
+        <Button
+            color={TColor(state)}
+            disabled={props.disabled ?? TDisabled(state)}
+            aria-disabled={props.disabled ?? TDisabled(state)}
+            onClick={clicked}
+            className={'t-loadable'}>
+            {props.children}
+        </Button>
+    );
+}
+
+export interface TButtonProps extends TProps {
+    children?: ReactNode;
+    onClick?: () => Promise<void>;
+}
--- a/tranga-website/src/Components/Inputs/TCheckbox.tsx
+++ b/tranga-website/src/Components/Inputs/TCheckbox.tsx
@@ -0,0 +1,35 @@
+import { Checkbox } from '@mui/joy';
+import TProps, { TColor, TDisabled, TState } from './TProps.ts';
+import { ChangeEvent, ReactNode, useState } from 'react';
+
+export default function TCheckbox(props: TCheckboxProps) {
+    const [state, setState] = useState<TState>(TState.clean);
+
+    const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+        setState(TState.busy);
+        e.preventDefault();
+        if (props.onCheckChanged)
+            props
+                .onCheckChanged(e.target.checked)
+                .then(() => setState(TState.success))
+                .catch(() => setState(TState.failure));
+    };
+
+    return (
+        <Checkbox
+            color={TColor(state)}
+            disabled={props.disabled ?? TDisabled(state)}
+            aria-disabled={props.disabled ?? TDisabled(state)}
+            onChange={onChange}
+            className={'t-loadable'}
+            defaultChecked={props.defaultChecked}
+            label={props.label}
+        />
+    );
+}
+
+export interface TCheckboxProps extends TProps {
+    label?: ReactNode;
+    defaultChecked?: boolean;
+    onCheckChanged?: (value: boolean) => Promise<void>;
+}
--- a/tranga-website/src/Components/Inputs/TInput.tsx
+++ b/tranga-website/src/Components/Inputs/TInput.tsx
@@ -0,0 +1,89 @@
+import { Button, Input } from '@mui/joy';
+import { MouseEventHandler, useEffect, useState } from 'react';
+import * as React from 'react';
+import TProps, { TColor, TDisabled, TState } from './TProps.ts';
+import './loadingBorder.css';
+
+export default function TInput(props: TInputProps) {
+    const [state, setState] = useState<TState>(TState.clean);
+    const [value, setValue] = useState<string | number | undefined>(props.defaultValue);
+    const [initialValue, setInitialValue] = useState<string | number | undefined>(
+        props.defaultValue
+    );
+
+    const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
+
+    const inputValueChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+        e.preventDefault();
+        setValue(e.target.value);
+        clearTimeout(timerRef.current);
+
+        if (!props.autoSubmit) return;
+
+        timerRef.current = setTimeout(() => {
+            submit();
+        }, props.actionDelay ?? 1500);
+    };
+
+    const submitClicked: MouseEventHandler<HTMLAnchorElement> = (e) => {
+        e.preventDefault();
+        submit();
+    };
+
+    const keyDownHandler = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') submit();
+    };
+
+    const submit = () => {
+        setState(TState.busy);
+        clearTimeout(timerRef.current);
+        if (props.onSubmit)
+            props
+                .onSubmit(value)
+                .then(() => {
+                    setState(TState.success);
+                    setInitialValue(value);
+                })
+                .catch(() => setState(TState.failure));
+    };
+
+    useEffect(() => {
+        if (value == initialValue) {
+            setState(TState.clean);
+        }
+    }, [value, initialValue]);
+
+    return (
+        <Input
+            color={TColor(state)}
+            disabled={props.disabled ?? TDisabled(state)}
+            aria-disabled={props.disabled ?? TDisabled(state)}
+            placeholder={props.placeholder}
+            value={value}
+            onChange={inputValueChanged}
+            onKeyDown={keyDownHandler}
+            className={'t-loadable'}
+            endDecorator={
+                props.submitButtonHidden ? null : (
+                    <Button
+                        onClick={submitClicked}
+                        disabled={props.disabled ?? TDisabled(state)}
+                        aria-disabled={props.disabled ?? TDisabled(state)}
+                        className={'t-loadable'}>
+                        {props.submitButtonText ?? 'Submit'}
+                    </Button>
+                )
+            }
+        />
+    );
+}
+
+export interface TInputProps extends TProps {
+    placeholder?: string;
+    defaultValue?: string | number;
+    actionDelay?: number;
+    autoSubmit?: boolean;
+    submitButtonHidden?: boolean;
+    submitButtonText?: string;
+    onSubmit?: (value?: string | number) => Promise<void>;
+}
--- a/tranga-website/src/Components/Inputs/TProps.ts
+++ b/tranga-website/src/Components/Inputs/TProps.ts
@@ -0,0 +1,37 @@
+import { ColorPaletteProp } from '@mui/joy';
+
+export enum TState {
+    clean,
+    dirty,
+    busy,
+    success,
+    failure,
+}
+
+export const TDisabled = (state: TState): boolean => {
+    switch (state) {
+        case TState.busy:
+            return true;
+        default:
+            return false;
+    }
+};
+
+export const TColor = (state: TState): ColorPaletteProp => {
+    switch (state) {
+        case TState.clean:
+            return 'primary';
+        case TState.dirty:
+            return 'warning';
+        case TState.busy:
+            return 'neutral';
+        case TState.success:
+            return 'success';
+        case TState.failure:
+            return 'warning';
+    }
+};
+
+export default interface TProps {
+    disabled?: boolean;
+}
--- a/tranga-website/src/Components/Inputs/loadingBorder.css
+++ b/tranga-website/src/Components/Inputs/loadingBorder.css
@@ -0,0 +1,54 @@
+@keyframes spin {
+    from {
+        transform: translate(-50%, -50%) rotate(0);
+    }
+    to {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+.t-loadable[aria-disabled='true'] {
+    --border-radius: 5px;
+    --border-size: 2px;
+    --border-bg: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
+
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--border-radius);
+    border: none;
+    z-index: 0;
+
+    &::before {
+        content: '';
+        display: block;
+        background: var(--border-bg);
+        width: calc(100% * 1.41421356237);
+        padding-bottom: calc(100% * 1.41421356237);
+        position: absolute;
+        left: 50% !important;
+        top: 50% !important;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        z-index: -1 !important;
+        animation: spin 5s linear infinite;
+    }
+    &--reverse::before {
+        animation-direction: reverse;
+    }
+    &::after {
+        content: '';
+        position: absolute;
+        inset: var(--border-size);
+        z-index: -1;
+        border-radius: calc(var(--border-radius) - var(--border-size));
+        background: var(--joy-palette-primary-500);
+    }
+}
+
+.t-loadable[aria-disabled='true']:has(input)::after {
+    background: black;
+}
+
+.t-loadable[aria-disabled='true']:is(button) {
+    color: var(--joy-palette-text-primary);
+}
--- a/tranga-website/src/Components/Loading.tsx
+++ b/tranga-website/src/Components/Loading.tsx
@@ -1,32 +0,0 @@
-import {Close, Done} from "@mui/icons-material";
-import {CircularProgress, ColorPaletteProp} from "@mui/joy";
-import {ReactNode} from "react";
-
-export enum LoadingState {
-    none,
-    loading,
-    success,
-    failure
-}
-
-export function StateIndicator(state : LoadingState) : ReactNode  {
-    switch (state) {
-        case LoadingState.loading:
-            return (<CircularProgress />);
-        case LoadingState.failure:
-            return (<Close />);
-        case LoadingState.success:
-            return (<Done />);
-        default: return null;
-    }
-}
-
-export function StateColor(state : LoadingState) : ColorPaletteProp | undefined  {
-    switch (state) {
-        case LoadingState.failure:
-            return "danger";
-        case LoadingState.success:
-            return "success";
-        default: return undefined;
-    }
-}
--- a/tranga-website/src/Components/MangaConnectorLink.tsx
+++ b/tranga-website/src/Components/MangaConnectorLink.tsx
@@ -1,42 +0,0 @@
-import {CSSProperties, ReactNode, useContext, useEffect, useRef, useState} from "react";
-import {ChapterMangaConnectorId, MangaConnector, MangaMangaConnectorId} from "../apiClient/data-contracts.ts";
-import {Link, Tooltip, Typography} from "@mui/joy";
-import {MangaConnectorContext} from "../App.tsx";
-import {ApiContext} from "../apiClient/ApiContext.tsx";
-
-export default function MangaConnectorLink({MangaConnectorId, imageStyle, printName} : {MangaConnectorId : MangaMangaConnectorId | ChapterMangaConnectorId, imageStyle? : CSSProperties, printName?: boolean}) : ReactNode{
-    const mangaConnectorContext = useContext(MangaConnectorContext);
-    const [mangaConnector, setMangaConnector] = useState<MangaConnector | undefined>(mangaConnectorContext?.find(c => c.name == MangaConnectorId.mangaConnectorName));
-    const imageRef = useRef<HTMLImageElement | null>(null);
-    
-    useEffect(() => {
-        const connector = mangaConnectorContext?.find(c => c.name == MangaConnectorId.mangaConnectorName);
-        setMangaConnector(connector);
-        if (imageRef?.current != null)
-            imageRef.current.setHTMLUnsafe(`<img ref=${imageRef} src=${mangaConnector?.iconUrl} style=${imageStyle}/>`);
-    }, []);
-    
-    return (
-        <Tooltip title={<Typography>{MangaConnectorId.mangaConnectorName}: <Link href={MangaConnectorId.websiteUrl as string}>{MangaConnectorId.websiteUrl}</Link></Typography>}>
-            <Link href={MangaConnectorId.websiteUrl as string}>
-                <img ref={imageRef} src={mangaConnector?.iconUrl} style={imageStyle}/>
-                {printName ? <Typography>{mangaConnector?.name}</Typography> : null}
-            </Link>
-        </Tooltip>
-    );
-}
-
-export function MangaConnectorLinkFromId({MangaConnectorIdId, imageStyle, printName} : {MangaConnectorIdId: string, imageStyle? : CSSProperties, printName?: boolean}) : ReactNode {
-    const Api = useContext(ApiContext);
-    
-    const [node, setNode] = useState<ReactNode>(null);
-
-    useEffect(() => {
-        Api.queryMangaMangaConnectorIdDetail(MangaConnectorIdId).then(response => {
-            if (response.ok)
-                setNode(<MangaConnectorLink key={response.data.key} MangaConnectorId={response.data} imageStyle={{...imageStyle, width: "25px"}} printName={printName} />);
-        });
-    }, []);
-    
-    return node;
-}
--- a/tranga-website/src/Components/Mangas/Detail/ChaptersSection.tsx
+++ b/tranga-website/src/Components/Mangas/Detail/ChaptersSection.tsx
@@ -0,0 +1,79 @@
+import { ReactNode, useContext, useEffect, useState } from 'react';
+import { Chapter, Manga, MangaConnector, MangaConnectorId } from '../../../api/data-contracts.ts';
+import { Accordion, AccordionDetails, AccordionSummary, Table, Typography } from '@mui/joy';
+import { ApiContext } from '../../../contexts/ApiContext.tsx';
+import { MangaConnectorContext } from '../../../contexts/MangaConnectorContext.tsx';
+import MangaConnectorIcon from '../MangaConnectorIcon.tsx';
+import TCheckbox from '../../Inputs/TCheckbox.tsx';
+
+export default function ChaptersSection(props: ChaptersSectionProps): ReactNode {
+    const Api = useContext(ApiContext);
+    const MangaConnectors = useContext(MangaConnectorContext);
+
+    const [chapters, setChapters] = useState<Chapter[]>([]);
+    useEffect(() => {
+        if (!props.manga) return;
+        Api.mangaChaptersList(props.manga.key).then((data) => {
+            if (!data.ok) return;
+            setChapters(data.data);
+        });
+    }, [props]);
+
+    const chapterConnectorCheckbox = (chapter: Chapter, connector: MangaConnector): ReactNode => {
+        const id = chapter.mangaConnectorIds.find((id) => id.mangaConnectorName == connector.key);
+        if (!id) return null;
+        return (
+            <TCheckbox
+                onCheckChanged={(value) => setDownloadingFrom(id, value)}
+                defaultChecked={id.useForDownload}
+            />
+        );
+    };
+
+    const setDownloadingFrom = (id: MangaConnectorId, value: boolean): Promise<void> => {
+        console.log(id, value);
+        return Promise.reject();
+    };
+
+    return (
+        <Accordion sx={{ maxHeight: '50vh' }}>
+            <AccordionSummary>
+                <Typography level={'h3'}>Chapters</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+                <Typography level={'body-md'}>Set source for chapter</Typography>
+                <Table>
+                    <thead>
+                        <tr>
+                            <th>Vol</th>
+                            <th>Ch</th>
+                            <th>Title</th>
+                            {MangaConnectors.map((con) => (
+                                <th>
+                                    <MangaConnectorIcon mangaConnector={con} />
+                                    {con.name}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {chapters.map((ch) => (
+                            <tr>
+                                <td>{ch.volume}</td>
+                                <td>{ch.chapterNumber}</td>
+                                <td>{ch.title}</td>
+                                {MangaConnectors.map((con) => (
+                                    <td>{chapterConnectorCheckbox(ch, con)}</td>
+                                ))}
+                            </tr>
+                        ))}
+                    </tbody>
+                </Table>
+            </AccordionDetails>
+        </Accordion>
+    );
+}
+
+export interface ChaptersSectionProps {
+    manga?: Manga;
+}
--- a/tranga-website/src/Components/Mangas/Detail/DownloadSection.tsx
+++ b/tranga-website/src/Components/Mangas/Detail/DownloadSection.tsx
@@ -0,0 +1,131 @@
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Box,
+    Checkbox,
+    List,
+    ListItem,
+    Option,
+    Select,
+    Stack,
+    Typography,
+} from '@mui/joy';
+import { ReactNode, useContext, useEffect, useState } from 'react';
+import TButton from '../../Inputs/TButton.tsx';
+import MangaConnectorIcon from '../MangaConnectorIcon.tsx';
+import { FileLibrary, Manga, MangaConnectorId } from '../../../api/data-contracts.ts';
+import { FileLibraryContext } from '../../../contexts/FileLibraryContext.tsx';
+import { ApiContext } from '../../../contexts/ApiContext.tsx';
+
+export function DownloadSection(props: DownloadSectionProps): ReactNode {
+    const Api = useContext(ApiContext);
+    const Libraries = useContext(FileLibraryContext);
+
+    const [manga, setManga] = useState<Manga>();
+    const [library, setLibrary] = useState<FileLibrary | undefined>();
+    const [downloadFromMap, setDownloadFromMap] = useState<Map<MangaConnectorId, boolean>>(
+        new Map()
+    );
+
+    useEffect(() => {
+        const newMap = new Map();
+        setLibrary(Libraries.find((library) => library.key == manga?.fileLibraryId));
+        manga?.mangaConnectorIds.forEach((id) => {
+            newMap.set(id, id.useForDownload);
+        });
+        setDownloadFromMap(newMap);
+    }, [manga, Libraries]);
+
+    useEffect(() => {
+        setManga(props.manga);
+    }, [props]);
+
+    const onLibraryChange = (_: any, value: string | null) => {
+        setLibrary(Libraries.find((library) => library.key == value));
+    };
+
+    const setDownload = async (): Promise<void> => {
+        if (!manga) return Promise.reject();
+        if (library) {
+            const s = await Api.mangaChangeLibraryCreate(manga.key, library?.key)
+                .then((result) => result.ok)
+                .catch(() => false);
+            if (!s) return Promise.reject();
+        }
+        for (const kv of downloadFromMap) {
+            const s = await Api.mangaSetAsDownloadFromCreate(
+                manga?.key,
+                kv[0].mangaConnectorName,
+                kv[1]
+            )
+                .then((result) => result.ok)
+                .catch(() => false);
+            if (!s) return Promise.reject();
+        }
+        return Promise.resolve();
+    };
+
+    return (
+        <Accordion defaultExpanded={props.downloadOpen}>
+            <AccordionSummary>
+                <Typography level={'h3'}>Download</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+                <Stack
+                    direction={'column'}
+                    gap={2}
+                    sx={{ flexBasis: 0 }}>
+                    <Box>
+                        <Typography>Select a Library to Download to:</Typography>
+                        <Select
+                            placeholder={'Select a Library'}
+                            value={library?.key}
+                            onChange={onLibraryChange}>
+                            {Libraries.map((l) => (
+                                <Option
+                                    key={l.key}
+                                    value={l.key}>
+                                    {l.libraryName} ({l.basePath})
+                                </Option>
+                            ))}
+                        </Select>
+                    </Box>
+                    <Box>
+                        <Typography>
+                            Select which connectors you want to download this Manga from:
+                        </Typography>
+                        <List>
+                            {props.manga?.mangaConnectorIds.map((id) => (
+                                <ListItem key={id.key}>
+                                    <Checkbox
+                                        defaultChecked={id.useForDownload}
+                                        onChange={(c) => downloadFromMap.set(id, c.target.checked)}
+                                        label={
+                                            <div
+                                                style={{
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: 5,
+                                                }}>
+                                                <MangaConnectorIcon
+                                                    mangaConnectorName={id.mangaConnectorName}
+                                                />
+                                                <Typography>{id.mangaConnectorName}</Typography>
+                                            </div>
+                                        }
+                                    />
+                                </ListItem>
+                            ))}
+                        </List>
+                    </Box>
+                    <TButton onClick={setDownload}>Download All</TButton>
+                </Stack>
+            </AccordionDetails>
+        </Accordion>
+    );
+}
+export interface DownloadSectionProps {
+    manga?: Manga;
+    downloadOpen: boolean;
+}
--- a/tranga-website/src/Components/Mangas/Detail/LibrarySection.tsx
+++ b/tranga-website/src/Components/Mangas/Detail/LibrarySection.tsx
@@ -0,0 +1,73 @@
+import { ReactNode, useContext, useEffect, useState } from 'react';
+import { FileLibrary, Manga } from '../../../api/data-contracts.ts';
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Option,
+    Select,
+    Stack,
+    Typography,
+} from '@mui/joy';
+import { ApiContext } from '../../../contexts/ApiContext.tsx';
+import { FileLibraryContext } from '../../../contexts/FileLibraryContext.tsx';
+import TButton from '../../Inputs/TButton.tsx';
+
+export function LibrarySection(props: LibrarySectionProps): ReactNode {
+    const Api = useContext(ApiContext);
+    const Libraries = useContext(FileLibraryContext);
+
+    const [library, setLibrary] = useState<FileLibrary | undefined>();
+
+    useEffect(() => {
+        if (!props.manga) return;
+        setLibrary(Libraries.find((library) => library.key == props.manga?.fileLibraryId));
+    }, [props]);
+
+    const onLibraryChange = (_: any, value: string | null) => {
+        setLibrary(Libraries.find((library) => library.key == value));
+    };
+
+    const submit = async (): Promise<void> => {
+        if (!props.manga || !library) return Promise.reject();
+        try {
+            let result = await Api.mangaChangeLibraryCreate(props.manga?.key, library?.key);
+            if (!result.ok) return Promise.reject();
+            else return Promise.resolve();
+        } catch (reason) {
+            return await Promise.reject(reason);
+        }
+    };
+
+    return (
+        <Accordion sx={{ maxHeight: '50vh' }}>
+            <AccordionSummary>
+                <Typography level={'h3'}>Library</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+                <Stack
+                    direction={'row'}
+                    gap={2}>
+                    <Select
+                        placeholder={'Select a Library'}
+                        value={library?.key}
+                        onChange={onLibraryChange}
+                        sx={{ flexGrow: 1 }}>
+                        {Libraries.map((l) => (
+                            <Option
+                                key={l.key}
+                                value={l.key}>
+                                {l.libraryName} ({l.basePath})
+                            </Option>
+                        ))}
+                    </Select>
+                    <TButton onClick={submit}>Move Manga to Library</TButton>
+                </Stack>
+            </AccordionDetails>
+        </Accordion>
+    );
+}
+
+export interface LibrarySectionProps {
+    manga?: Manga;
+}
--- a/tranga-website/src/Components/Mangas/Detail/MangaDetail.tsx
+++ b/tranga-website/src/Components/Mangas/Detail/MangaDetail.tsx
@@ -0,0 +1,119 @@
+import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react';
+import { Card, CardCover, Chip, Modal, ModalDialog, Stack, Typography, useTheme } from '@mui/joy';
+import ModalClose from '@mui/joy/ModalClose';
+import { Manga } from '../../../api/data-contracts.ts';
+import { ApiContext } from '../../../contexts/ApiContext.tsx';
+import { MangaContext } from '../../../contexts/MangaContext.tsx';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import { DownloadSection } from './DownloadSection.tsx';
+import ChaptersSection from './ChaptersSection.tsx';
+import { LibrarySection } from './LibrarySection.tsx';
+
+export default function MangaDetail(props: MangaDetailProps): ReactNode {
+    const Api = useContext(ApiContext);
+    const Manga = useContext(MangaContext);
+    const theme = useTheme();
+
+    const [manga, setManga] = useState<Manga | undefined>(props.manga);
+
+    useEffect(() => {
+        if (!props.open) return;
+        if (!props.mangaKey) return;
+        if (props.manga != undefined) return;
+        Manga.GetManga(props.mangaKey).then(setManga);
+    }, [Api, Manga, props]);
+
+    return (
+        <Modal
+            open={props.open}
+            onClose={() => props.setOpen(false)}>
+            <ModalDialog>
+                <ModalClose />
+                <Typography
+                    level={'h3'}
+                    sx={{ width: '100%' }}>
+                    {manga?.name}
+                </Typography>
+                <Stack
+                    direction={'row'}
+                    gap={1}>
+                    <Card
+                        className={'manga-card'}
+                        sx={{ flexShrink: 0 }}>
+                        <CardCover className={'manga-card-cover'}>
+                            <img
+                                src={
+                                    manga
+                                        ? `${Api.baseUrl}/v2/Manga/${manga.key}/Cover/Medium`
+                                        : '/blahaj.png'
+                                }
+                            />
+                        </CardCover>
+                    </Card>
+                    <Stack
+                        direction={'column'}
+                        gap={2}
+                        sx={{ flexShrink: 1 }}>
+                        <Stack
+                            direction={'row'}
+                            gap={0.5}
+                            flexWrap={'wrap'}>
+                            {manga?.tags.map((tag) => (
+                                <Chip
+                                    key={tag}
+                                    size={'sm'}
+                                    sx={{ backgroundColor: theme.palette.primary.plainColor }}>
+                                    {tag}
+                                </Chip>
+                            ))}
+                            {manga?.authors.map((author) => (
+                                <Chip
+                                    key={author.key}
+                                    size={'sm'}
+                                    sx={{ backgroundColor: theme.palette.success.plainColor }}>
+                                    {author.name}
+                                </Chip>
+                            ))}
+                            {manga?.links.map((link) => (
+                                <Chip
+                                    key={link.provider}
+                                    size={'sm'}
+                                    sx={{ backgroundColor: theme.palette.neutral.plainColor }}>
+                                    <a href={link.url}>{link.provider}</a>
+                                </Chip>
+                            ))}
+                        </Stack>
+                        <MarkdownPreview
+                            source={manga?.description}
+                            style={{
+                                backgroundColor: 'transparent',
+                                color: theme.palette.text.primary,
+                                overflowY: 'auto',
+                            }}
+                        />
+                        <Stack
+                            direction={'row-reverse'}
+                            gap={1}>
+                            {props.children}
+                        </Stack>
+                    </Stack>
+                </Stack>
+                <DownloadSection
+                    downloadOpen={props.downloadOpen ?? false}
+                    manga={manga}
+                />
+                <LibrarySection manga={manga} />
+                <ChaptersSection manga={manga} />
+            </ModalDialog>
+        </Modal>
+    );
+}
+
+export interface MangaDetailProps {
+    manga?: Manga;
+    mangaKey?: string;
+    open: boolean;
+    setOpen: Dispatch<boolean>;
+    downloadOpen?: boolean;
+    children?: ReactNode;
+}
--- a/tranga-website/src/Components/Mangas/MangaCard.css
+++ b/tranga-website/src/Components/Mangas/MangaCard.css
@@ -1,21 +1,21 @@
+.manga-card-badge {
+    margin: 16px 18px 0 0;
+}
+
 .manga-card {
    width: 220px;
    height: 300px;
 }

-.manga-cover-blur {
-    background: linear-gradient(135deg, rgba(245, 169, 184, 0.9) 20%, rgba(91, 206, 250, 0.6));
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);)
-    backdrop-filter: blur(6px);
-    -webkit-backdrop-filter: blur(6px);
+.manga-card-cover {
 }

-.manga-card-badge-icon {
-    width: 25px;
-    height: 25px;
+.manga-card-cover-blur {
+    background: linear-gradient(150deg, rgba(245, 169, 184, 0.8) 50%, rgba(91, 206, 250, 0.3));
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(2px) brightness(70%);
+    -webkit-backdrop-filter: blur(2px) brightness(70%);
 }

-.manga-modal {
-    width: 90%;
-    margin: auto;
+.manga-card-content {
 }
--- a/tranga-website/src/Components/Mangas/MangaCard.tsx
+++ b/tranga-website/src/Components/Mangas/MangaCard.tsx
@@ -1,105 +1,73 @@
 import {
    Badge,
-    Box,
    Card,
    CardContent,
    CardCover,
-    Chip,
-    Link,
-    Modal,
-    ModalDialog,
-    Stack, Tooltip,
-    Typography
-} from "@mui/joy";
-import {Manga} from "../../apiClient/data-contracts.ts";
-import {Dispatch, ReactNode, SetStateAction, useContext, useState} from "react";
-import "./MangaCard.css";
-import MangaConnectorBadge from "./MangaConnectorBadge.tsx";
-import ModalClose from "@mui/joy/ModalClose";
-import {ApiContext} from "../../apiClient/ApiContext.tsx";
-import MarkdownPreview from '@uiw/react-markdown-preview';
-import {MangaContext} from "../../App.tsx";
-import {MangaConnectorLinkFromId} from "../MangaConnectorLink.tsx";
+    ColorPaletteProp,
+    Skeleton,
+    Typography,
+} from '@mui/joy';
+import { EventHandler, ReactNode, useContext } from 'react';
+import './MangaCard.css';
+import MangaConnectorIcon from './MangaConnectorIcon.tsx';
+import { Manga, MangaReleaseStatus, MinimalManga } from '../../api/data-contracts.ts';
+import { ApiContext } from '../../contexts/ApiContext.tsx';

-export function MangaCardFromId({mangaId} : {mangaId: string}) {
-    const mangas = useContext(MangaContext);
-    const manga = mangas.find(manga => manga.key === mangaId);
-    
-    return <MangaCard manga={manga} />
-}
-
-export function MangaCard({manga, children} : {manga: Manga | undefined, children? : ReactNode}) {
-    if (manga === undefined)
-        return PlaceHolderCard();
-
-    const [open, setOpen] = useState(false);
+export default function MangaCard(props: MangaCardProps): ReactNode {
+    const Api = useContext(ApiContext);

    return (
-        <MangaConnectorBadge manga={manga}>
-            <Card className={"manga-card"} onClick={() => setOpen(true)}>
-                <CardCover className={"manga-cover"}>
-                    <MangaCover manga={manga} />
+        <Badge
+            badgeContent={props.manga?.mangaConnectorIds.map((id) => (
+                <MangaConnectorIcon mangaConnectorName={id.mangaConnectorName} />
+            ))}
+            className={'manga-card-badge'}
+            color={releaseColor(props.manga?.releaseStatus ?? MangaReleaseStatus.Unreleased)}>
+            <Card
+                className={'manga-card'}
+                onClick={props.onClick}>
+                <CardCover className={'manga-card-cover'}>
+                    <img
+                        src={
+                            props.manga && props.manga.key != 'Search'
+                                ? `${Api.baseUrl}/v2/Manga/${props.manga?.key}/Cover/Medium`
+                                : '/blahaj.png'
+                        }
+                    />
                </CardCover>
-                <CardCover className={"manga-cover-blur"} />
-                <CardContent className={"manga-content"}>
-                    <Typography level={"title-lg"}>{manga?.name}</Typography>
+                <CardCover className={'manga-card-cover-blur'} />
+                <CardContent className={'manga-card-content'}>
+                    <Typography level={'h4'}>
+                        {props.manga?.name ?? <Skeleton>{stringWithRandomLength()}</Skeleton>}
+                    </Typography>
                </CardContent>
            </Card>
-            <MangaModal manga={manga} open={open} setOpen={setOpen}>
-                {children}
-            </MangaModal>
-        </MangaConnectorBadge>
-    );
-}
-
-export function MangaModal({manga, open, setOpen, children}: {manga: Manga | undefined, open: boolean, setOpen: Dispatch<SetStateAction<boolean>>, children?: ReactNode}) {
-
-    return (
-        <Modal open={open} onClose={() => setOpen(false)} className={"manga-modal"}>
-            <ModalDialog style={{width:'100%'}}>
-                <ModalClose />
-                <Tooltip title={<Stack spacing={1}>{manga?.altTitles?.map(title => <Chip>{title.title}</Chip>)}</Stack>}>
-                    <Typography level={"h4"} width={"fit-content"}>{manga?.name}</Typography>
-                </Tooltip>
-                <Stack direction={"row"} spacing={2}>
-                    <Box key={"Cover"} className={"manga-card"}>
-                        <MangaCover manga={manga} />
-                    </Box>
-                    <Stack key={"Description"} direction={"column"} sx={{width: "calc(100% - 230px)"}}>
-                        <Stack key={"Tags"} direction={"row"} flexWrap={"wrap"} useFlexGap spacing={0.5}>
-                            {manga?.mangaConnectorIdsIds?.map((idid) => <MangaConnectorLinkFromId key={idid} MangaConnectorIdId={idid} />)}
-                            {manga?.mangaTags?.map((tag) => <Chip key={tag.tag}>{tag.tag}</Chip>)}
-                            {manga?.links?.map((link) => <Chip key={link.key}><Link href={link.linkUrl}>{link.linkProvider}</Link></Chip>)}
-                        </Stack>
-                        <Box sx={{flexGrow: 1}}>
-                            <MarkdownPreview source={manga?.description} style={{background: "transparent"}}/>
-                        </Box>
-                        <Stack sx={{justifySelf: "flex-end", alignSelf: "flex-end"}} spacing={2} direction={"row"}>{children}</Stack>
-                    </Stack>
-                </Stack>
-            </ModalDialog>
-        </Modal>
-    );
-}
-
-function PlaceHolderCard(){
-    return (
-        <Badge>
-            <Card className={"manga-card"}>
-                <CardCover className={"manga-cover"}>
-                    <img src={"/blahaj.png"} />
-                </CardCover>
-                <CardCover className={"manga-cover-blur"} />
-            </Card>
        </Badge>
-        );
-}
-
-function MangaCover({manga}: {manga: Manga | undefined}) {
-    const api = useContext(ApiContext);
-    const uri = manga ? `${api.baseUrl}/v2/Manga/${manga?.key}/Cover` : "blahaj.png";
-        
-    return (
-        <img src={uri} style={{width: "100%", height: "100%", objectFit: "cover", borderRadius: "var(--CardCover-radius)"}} />
    );
 }
+
+export interface MangaCardProps {
+    manga?: Manga | MinimalManga;
+    onClick?: EventHandler<any>;
+}
+
+const stringWithRandomLength = (): string => {
+    return 'wow';
+};
+
+const releaseColor = (status: MangaReleaseStatus): ColorPaletteProp => {
+    switch (status) {
+        case MangaReleaseStatus.Cancelled:
+            return 'danger';
+        case MangaReleaseStatus.Completed:
+            return 'success';
+        case MangaReleaseStatus.Unreleased:
+            return 'neutral';
+        case MangaReleaseStatus.Continuing:
+            return 'primary';
+        case MangaReleaseStatus.OnHiatus:
+            return 'neutral';
+        default:
+            return 'neutral';
+    }
+};
--- a/tranga-website/src/Components/Mangas/MangaConnectorBadge.tsx
+++ b/tranga-website/src/Components/Mangas/MangaConnectorBadge.tsx
@@ -1,14 +0,0 @@
-import { Badge } from "@mui/joy";
-import {Manga} from "../../apiClient/data-contracts.ts";
-import {ReactElement} from "react";
-import "./MangaCard.css"
-import  {MangaConnectorLinkFromId} from "../MangaConnectorLink.tsx";
-
-export default function MangaConnectorBadge ({manga, children} : {manga: Manga, children? : ReactElement<any, any> | ReactElement<any,any>[] | undefined}) {
-   
-    return (
-        <Badge badgeContent={manga.mangaConnectorIdsIds?.map(id => <MangaConnectorLinkFromId key={id}  MangaConnectorIdId={id} />)}>
-            {children}
-        </Badge>
-    );
-}
--- a/tranga-website/src/Components/Mangas/MangaConnectorIcon.tsx
+++ b/tranga-website/src/Components/Mangas/MangaConnectorIcon.tsx
@@ -0,0 +1,40 @@
+import { ReactNode, useContext, useEffect, useState } from 'react';
+import { MangaConnector } from '../../api/data-contracts.ts';
+import { Tooltip } from '@mui/joy';
+import { ApiContext } from '../../contexts/ApiContext.tsx';
+
+export default function MangaConnectorIcon({
+    mangaConnector,
+    mangaConnectorName,
+}: {
+    mangaConnector?: MangaConnector;
+    mangaConnectorName?: string;
+}): ReactNode {
+    const Api = useContext(ApiContext);
+
+    const [connector, setConnector] = useState<MangaConnector | undefined>(mangaConnector);
+
+    useEffect(() => {
+        if (mangaConnector) {
+            setConnector(mangaConnector);
+            return;
+        }
+        if (!mangaConnectorName) return;
+        Api.mangaConnectorDetail(mangaConnectorName).then((result) => {
+            if (result.ok) {
+                setConnector(result.data);
+            }
+        });
+    }, [Api, mangaConnectorName, mangaConnector]);
+
+    return (
+        <Tooltip title={connector?.name ?? 'loading'}>
+            <img
+                src={connector?.iconUrl ?? '/blahaj.png'}
+                width={'25px'}
+                height={'25px'}
+                style={{ borderRadius: '100%' }}
+            />
+        </Tooltip>
+    );
+}
--- a/tranga-website/src/Components/Mangas/MangaDownloadDialog.tsx
+++ b/tranga-website/src/Components/Mangas/MangaDownloadDialog.tsx
@@ -1,100 +0,0 @@
-import {Manga} from "../../apiClient/data-contracts.ts";
-import {ChangeEvent, Dispatch, ReactNode, useContext, useEffect, useState} from "react";
-import {Button, Checkbox, Option, Select, Stack, Typography} from "@mui/joy";
-import Drawer from "@mui/joy/Drawer";
-import ModalClose from "@mui/joy/ModalClose";
-import {MangaConnectorLinkFromId} from "../MangaConnectorLink.tsx";
-import Sheet from "@mui/joy/Sheet";
-import {FileLibraryContext} from "../../App.tsx";
-import {ApiContext} from "../../apiClient/ApiContext.tsx";
-import {LoadingState, StateIndicator} from "../Loading.tsx";
-
-export default function ({manga} : {manga: Manga}) : ReactNode{
-    const [open, setOpen] = useState(false);
-    
-    return (
-        <>
-            <Button onClick={() => setOpen(true)}>Download</Button>
-            <DownloadDrawer manga={manga} open={open} setOpen={setOpen} />
-        </>
-    );
-}
-
-function DownloadDrawer({manga, open, setOpen}: {manga: Manga, open: boolean, setOpen: Dispatch<boolean>}): ReactNode  {
-    const fileLibraries = useContext(FileLibraryContext);
-    const Api = useContext(ApiContext);
-    
-    const onLibraryChange = (_ :any, value: ({} | null)) => {
-        if (value === undefined)
-            return;
-        Api.mangaChangeLibraryCreate(manga.key as string, value as string);
-    }
-    
-    return (
-        <Drawer open={open} onClose={() => setOpen(false)}>
-            <ModalClose />
-            <Sheet sx={{width: "calc(95% - 60px)", margin: "30px"}}>
-                <Typography>Download to Library:</Typography>
-                <Select placeholder={"Library"} onChange={onLibraryChange} value={manga.libraryId}>
-                    {fileLibraries?.map(library => (
-                        <Option value={library.key} key={library.key}><Typography>{library.libraryName}</Typography> <Typography>({library.basePath})</Typography></Option>
-                    ))}
-                </Select>
-                <Typography>Download from:</Typography>
-                <Stack>
-                    {manga.mangaConnectorIdsIds?.map(id => <DownloadCheckBox key={id} mangaConnectorIdId={id} />)}
-                </Stack>
-            </Sheet>
-        </Drawer>
-    );
-}
-
-function DownloadCheckBox({mangaConnectorIdId} : {mangaConnectorIdId : string}) : ReactNode {
-    const Api = useContext(ApiContext);
-    const [useForDownloading, setUseForDownloading] = useState<boolean>(false);
-    const [loading, setLoading] = useState<LoadingState>(LoadingState.none);
-    
-    useEffect(() => {
-        setLoading(LoadingState.loading);
-        Api.queryMangaMangaConnectorIdDetail(mangaConnectorIdId).then(response => {
-            if (response.ok){
-                setUseForDownloading(response.data.useForDownload as boolean);
-                setLoading(LoadingState.none);
-            }else 
-                setLoading(LoadingState.failure);
-        }).catch(_ => setLoading(LoadingState.failure));
-    }, []);
-    
-    const onSelected = (event: ChangeEvent<HTMLInputElement>) => {
-        setLoading(LoadingState.loading);
-        const val = event.currentTarget.checked;
-        Api.queryMangaMangaConnectorIdDetail(mangaConnectorIdId).then(response => {
-            if (!response.ok){
-                setLoading(LoadingState.failure);
-                return;
-            }
-            Api.mangaSetAsDownloadFromCreate(response.data.objId, response.data.mangaConnectorName, val)
-                .then(response => {
-                    if (response.ok){
-                        setUseForDownloading(val);
-                        setLoading(LoadingState.success);
-                    }else
-                        setLoading(LoadingState.failure);
-                }).catch(_ => setLoading(LoadingState.failure));
-        }).catch(_ => setLoading(LoadingState.failure));
-    }
-    
-    return (
-        <Checkbox
-            indeterminateIcon={StateIndicator(LoadingState.loading)}
-            indeterminate={loading === LoadingState.loading}
-            disabled={loading === LoadingState.loading}
-            checked={useForDownloading}
-            onChange={onSelected}
-            label={
-                <Typography>
-                    <MangaConnectorLinkFromId MangaConnectorIdId={mangaConnectorIdId} printName={true} />
-                </Typography>
-        } />
-    );
-}
--- a/tranga-website/src/Components/Mangas/MangaList.css
+++ b/tranga-website/src/Components/Mangas/MangaList.css
@@ -1,3 +0,0 @@
-.manga-list {
-    padding-top: calc(1em * var(--joy-lineHeight-md, 1.5) / 2);;
-}
--- a/tranga-website/src/Components/Mangas/MangaList.tsx
+++ b/tranga-website/src/Components/Mangas/MangaList.tsx
@@ -1,28 +1,84 @@
-import {ReactNode} from "react";
-import {MangaCard} from "./MangaCard.tsx";
-import {Stack} from "@mui/joy";
-import "./MangaList.css";
-import {Manga} from "../../apiClient/data-contracts.ts";
-import MangaDownloadDialog from "./MangaDownloadDialog.tsx";
-import MangaMerge from "./MangaMerge.tsx";
+import { Stack } from '@mui/joy';
+import './MangaList.css';
+import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react';
+import { Manga, MangaReleaseStatus, MinimalManga } from '../../api/data-contracts.ts';
+import { ApiContext } from '../../contexts/ApiContext.tsx';
+import MangaCard from './MangaCard.tsx';

-export default function MangaList ({mangas, children} : {mangas: Manga[], children?: ReactNode}) {
+export default function MangaList(props: MangaListProps): ReactNode {
+    const Api = useContext(ApiContext);
+    const [downloadingManga, setDownloadingManga] = useState<MinimalManga[]>([]);
+
+    const [interval, setIntervalState] = useState<number>();
+    useEffect(() => {
+        if (interval) {
+            clearInterval(interval);
+            setIntervalState(undefined);
+        }
+        if (!Api) return;
+        updateDownloadingManga();
+        setIntervalState(setInterval(updateDownloadingManga, 5000));
+    }, [Api]);
+
+    const updateDownloadingManga = () => {
+        Api.mangaDownloadingList().then((data) => {
+            if (data.ok) {
+                setDownloadingManga(data.data);
+            }
+        });
+    };

    return (
-        <Stack className={"manga-list"} direction={"row"} useFlexGap={true} spacing={2} flexWrap={"wrap"} sx={
-            {
+        <MangaCardList
+            manga={downloadingManga}
+            mangaOnClick={props.mangaOnClick}>
+            <MangaCard
+                onClick={props.openSearch}
+                manga={{
+                    name: 'Search',
+                    description: 'Search for a new Manga',
+                    releaseStatus: MangaReleaseStatus.Continuing,
+                    mangaConnectorIds: [],
+                    key: 'Search',
+                }}
+            />
+        </MangaCardList>
+    );
+}
+
+export interface MangaListProps {
+    openSearch: () => void;
+    mangaOnClick?: Dispatch<Manga | MinimalManga>;
+}
+
+export function MangaCardList(props: MangaCardListProps): ReactNode {
+    return (
+        <Stack
+            className={'manga-list'}
+            direction={'row'}
+            flexWrap={'wrap'}
+            sx={{
                mx: 'calc(-1 * var(--ModalDialog-padding))',
                px: 'var(--ModalDialog-padding)',
-                overflowY: 'scroll'
+                overflowY: 'scroll',
+                justifyItems: 'space-between',
            }}>
-            {children}
-            {mangas?.map(manga => (
-                <MangaCard key={manga.key} manga={manga}>
-                    <MangaDownloadDialog manga={manga} />
-                    <MangaMerge manga={manga} />
-                </MangaCard>
+            {props.children}
+            {props.manga.map((m) => (
+                <MangaCard
+                    key={m.key}
+                    manga={m}
+                    onClick={() => {
+                        if (props.mangaOnClick) props.mangaOnClick(m);
+                    }}
+                />
            ))}
        </Stack>
    );
-    
+}
+
+export interface MangaCardListProps {
+    manga: (Manga | MinimalManga)[];
+    children?: ReactNode;
+    mangaOnClick?: Dispatch<Manga | MinimalManga>;
 }
--- a/tranga-website/src/Components/Mangas/MangaMerge.tsx
+++ b/tranga-website/src/Components/Mangas/MangaMerge.tsx
@@ -1,105 +0,0 @@
-import {ReactNode, useContext, useEffect, useState} from "react";
-import {Manga} from "../../apiClient/data-contracts.ts";
-import Drawer from "@mui/joy/Drawer";
-import ModalClose from "@mui/joy/ModalClose";
-import {ApiContext} from "../../apiClient/ApiContext.tsx";
-import {MangaCard} from "./MangaCard.tsx";
-import {Alert, Button, Modal, ModalDialog, Stack, Tooltip, Typography} from "@mui/joy";
-import {KeyboardDoubleArrowRight, Warning} from "@mui/icons-material";
-import {LoadingState, StateIndicator} from "../Loading.tsx";
-
-export default function ({manga} : {manga : Manga | undefined}) : ReactNode {
-    const Api = useContext(ApiContext);
-    
-    const [similar, setSimilar] = useState<Manga[]>([]);
-    const [open, setOpen] = useState<boolean>(false);
-    
-    useEffect(()=> {
-        if (manga === undefined || !open)
-            return;
-        Api.queryMangaSimilarNameList(manga.key as string).then(response => {
-            if (response.ok)
-                Api.mangaWithIDsCreate(response.data).then(response => {
-                   if (response.ok)
-                       setSimilar(response.data);
-                });
-        });
-    }, [open]);
-    
-    const exit = (manga : Manga) => {
-        setOpen(false);
-        setSimilar(similar.filter(m => m.key != manga.key));
-    }
-    
-    return (
-        <>
-            <Button onClick={_ => setOpen(true)}>
-                Merge
-            </Button>
-            <Drawer size={"lg"} open={open} onClose={() => setOpen(false)} anchor={"bottom"}>
-                <ModalClose />
-                <Stack direction={"row"} spacing={2} flexWrap={"wrap"} useFlexGap>
-                    {similar.map(similarManga => <MangaCard manga={similarManga}>
-                        <ConfirmationModal manga={manga as Manga} similarManga={similarManga} exit={() => exit(similarManga)} />
-                    </MangaCard>)}
-                </Stack>
-            </Drawer>
-        </>
-    );
-}
-
-function ConfirmationModal({manga, similarManga, exit} : {manga : Manga, similarManga : Manga, exit: ()=>void}) : ReactNode {
-    const [open, setOpen] = useState<boolean>(false);
-    const Api = useContext(ApiContext);
-
-    const [loadingState, setLoadingState] = useState<LoadingState>(LoadingState.none);
-    
-    const merge = () => {
-        setLoadingState(LoadingState.loading);
-        Api.mangaMergeIntoPartialUpdate(manga.key as string, similarManga.key as string).then(response => {
-            if (response.ok){
-                setLoadingState(LoadingState.success);
-                setOpen(false);
-                exit();
-            }else
-                setLoadingState(LoadingState.failure);
-        }).catch(_ => setLoadingState(LoadingState.failure));
-    }
-    
-    return <>
-        {
-            loadingState == LoadingState.success ?
-                <Alert
-                    color="success"
-                    startDecorator={StateIndicator(LoadingState.success)}
-                >
-                    Merged Successfully!
-                </Alert>
-                :
-                <Button onClick={_ => setOpen(true)}>
-                    Merge into
-                </Button>
-        }
-        <Modal open={open} onClose={_ => setOpen(false)}>
-            <ModalDialog>
-                <ModalClose />
-                <Typography level={"h2"}>Confirm Merge</Typography>
-                <Stack direction={"row"} spacing={3} alignItems={"center"}>
-                    <MangaCard manga={manga} />
-                    <Typography color={"danger"} level={"h1"}><KeyboardDoubleArrowRight /></Typography>
-                    <MangaCard manga={similarManga} />
-                </Stack>
-                <Tooltip title={"THIS CAN NOT BE UNDONE!"}>
-                    <Button
-                        onClick={merge}
-                        disabled={loadingState === LoadingState.loading}
-                        endDecorator={StateIndicator(loadingState)}
-                        color={"danger"}
-                        startDecorator={<Warning />}>
-                        Merge
-                    </Button>
-                </Tooltip>
-            </ModalDialog>
-        </Modal>
-        </>;
-}
--- a/tranga-website/src/Components/Search.tsx
+++ b/tranga-website/src/Components/Search.tsx
@@ -1,141 +0,0 @@
-import {Dispatch, KeyboardEventHandler, ReactNode, useContext, useState} from "react";
-import {
-    Badge,
-    Button,
-    Card,
-    CardContent,
-    CardCover, Chip,
-    Input,
-    Modal,
-    ModalDialog,
-    Option,
-    Select,
-    Step,
-    StepIndicator,
-    Stepper,
-    Typography
-} from "@mui/joy";
-import ModalClose from "@mui/joy/ModalClose";
-import {MangaConnectorContext} from "../App.tsx";
-import {Manga, MangaConnector} from "../apiClient/data-contracts.ts";
-import MangaList from "./Mangas/MangaList.tsx";
-import {ApiContext} from "../apiClient/ApiContext.tsx";
-import {LoadingState, StateColor, StateIndicator} from "./Loading.tsx";
-
-export default function () : ReactNode {
-    const [open, setOpen] = useState(false);
-    
-    return (
-        <Badge badgeContent={"+"}>
-            <Card onClick={() => {if (!open) setOpen(true)}} className={"manga-card"}>
-                <CardCover className={"manga-cover"}>
-                    <img src={"/blahaj.png"} />
-                </CardCover>
-                <CardCover className={"manga-cover-blur"} />
-                <CardContent>
-                    Add
-                </CardContent>
-                <CardContent>
-                    <SearchDialog open={open} setOpen={setOpen} />
-                </CardContent>
-            </Card>
-        </Badge>
-    );
-}
-
-function SearchDialog ({open, setOpen} : {open: boolean, setOpen: Dispatch<boolean>}) : ReactNode {
-    const mangaConnectors = useContext(MangaConnectorContext);
-    const Api = useContext(ApiContext);
-    
-    const [selectedMangaConnector, setSelectedMangaConnector] = useState<MangaConnector | undefined>(undefined);
-    const [searchTerm, setSearchTerm] = useState<string>();
-    const [searchResults, setSearchResults] = useState<Manga[]>([]);
-
-    const [loadingState, setLoadingState] = useState<LoadingState>(LoadingState.none);
-    
-    const doTheSearch = () => {
-        if (searchTerm === undefined || searchTerm.length < 1)
-            return;
-        if (!isUrl(searchTerm) && selectedMangaConnector === undefined)
-            return;
-        
-        setLoadingState(LoadingState.loading);
-        
-        if (isUrl(searchTerm))
-            Api.searchUrlCreate(searchTerm)
-                .then(response => {
-                    if (response.ok){
-                        setSearchResults([response.data]);
-                        setLoadingState(LoadingState.success);
-                    }else
-                        setLoadingState(LoadingState.failure);
-                }).catch(() => setLoadingState(LoadingState.failure));
-        else
-            Api.searchDetail(selectedMangaConnector!.name, searchTerm)
-                .then(response => {
-                    if(response.ok){
-                        setSearchResults(response.data);
-                        setLoadingState(LoadingState.success);
-                    }else
-                        setLoadingState(LoadingState.failure);
-                }).catch(() => setLoadingState(LoadingState.failure));
-    }
-    
-    const isUrl = (url: string) => {
-        try{
-            new URL(url);
-            return true;
-        }catch (Error){
-            return false;
-        }
-    }
-    
-    const keyDownCheck : KeyboardEventHandler<HTMLInputElement> = (e) => {
-        if (e.key === "Enter") {
-            doTheSearch();
-        }
-    }
-    
-    return (
-        <Modal sx={{width: "100%", height: "100%"}} open={open} onClose={() => setOpen(false)}>
-            <ModalDialog sx={{width: "80%"}}>
-                <ModalClose />
-                <Typography level={"h1"}>Search or add Manga</Typography>
-                <Stepper orientation={"vertical"}>
-                    <Step indicator={<StepIndicator>1</StepIndicator>}>
-                        <Typography>Connector</Typography>
-                        <Select
-                            placeholder={"Select Connector 'Global' to search on all Connectors"}
-                            disabled={loadingState == LoadingState.loading}
-                            onChange={(_, v) => setSelectedMangaConnector(v as MangaConnector)}>
-                            {mangaConnectors?.map(con => (
-                                <Option value={con}>
-                                    <Typography><img src={con.iconUrl} style={{maxHeight: "var(--Icon-fontSize)"}} />{con.name}</Typography>
-                                </Option>
-                            ))}
-                        </Select>
-                    </Step>
-                    <Step indicator={<StepIndicator>2</StepIndicator>}>
-                        <Typography>Search</Typography>
-                        <Input
-                            disabled={loadingState == LoadingState.loading}
-                            onKeyDown={keyDownCheck}
-                            onChange={(e) => setSearchTerm(e.currentTarget.value)}
-                            placeholder={"Enter search-term or supported Connector-Url"}
-                            endDecorator={<Button
-                                disabled={loadingState == LoadingState.loading}
-                                onClick={doTheSearch}
-                                endDecorator={StateIndicator(loadingState)}
-                                color={StateColor(loadingState)}
-                            >Search</Button>}
-                        />
-                    </Step>
-                    <Step indicator={<StepIndicator>3</StepIndicator>}>
-                        <Typography>Result <Chip>{searchResults.length}</Chip></Typography>
-                        <MangaList mangas={searchResults} />
-                    </Step>
-                </Stepper>
-            </ModalDialog>
-        </Modal>
-    );
-}
--- a/tranga-website/src/Components/Settings/ChapterNamingScheme.tsx
+++ b/tranga-website/src/Components/Settings/ChapterNamingScheme.tsx
@@ -1,36 +1,38 @@
-import {ReactNode, useContext, useState} from "react";
-import {SettingsContext} from "./Settings.tsx";
-import {ApiContext} from "../../apiClient/ApiContext.tsx";
-import {Card, ColorPaletteProp, Input, Typography} from "@mui/joy";
-import * as React from "react";
-import MarkdownPreview from "@uiw/react-markdown-preview";
+import { ReactNode, useContext } from 'react';
+import { SettingsContext, SettingsItem } from './Settings.tsx';
+import { ApiContext } from '../../contexts/ApiContext.tsx';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import TInput from '../Inputs/TInput.tsx';

-export default function () : ReactNode {
+export default function ChapterNamingScheme(): ReactNode {
    const settings = useContext(SettingsContext);
    const Api = useContext(ApiContext);

-    const [scheme, setScheme] = useState<ColorPaletteProp>("neutral");
-    const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
-    const schemeChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
-        clearTimeout(timerRef.current);
-        setScheme("warning");
-        timerRef.current = setTimeout(() => {
-            Api.settingsChapterNamingSchemePartialUpdate(e.target.value)
-                .then(response => {
-                    if (response.ok)
-                        setScheme("success");
-                    else
-                        setScheme("danger");
-                })
-                .catch(() => setScheme("danger"));
-        }, 1000);
-    }
+    const schemeChanged = async (value: string | number | readonly string[] | undefined) => {
+        if (typeof value != 'string') return Promise.reject();
+        try {
+            const response = await Api.settingsChapterNamingSchemePartialUpdate(value);
+            if (response.ok) return Promise.resolve();
+            else return Promise.reject();
+        } catch {
+            return await Promise.reject();
+        }
+    };

    return (
-        <Card>
-            <Typography>Chapter Naming Scheme</Typography>
-            <Input color={scheme} defaultValue={settings?.chapterNamingScheme as string} placeholder={"Scheme"} onChange={schemeChanged} />
-            <MarkdownPreview style={{backgroundColor: "transparent"}} source={"Placeholders:\n   * %M Obj Name\n   * %V Volume\n   * %C Chapter\n   * %T Title\n   * %A Author (first in list)\n   * %I Chapter Internal ID\n   * %i Obj Internal ID\n   * %Y Year (Obj)\n   *\n   * ?_(...) replace _ with a value from above:\n   * Everything inside the braces will only be added if the value of %_ is not null"} />
-        </Card>
+        <SettingsItem title={'Chapter Naming Scheme'}>
+            <MarkdownPreview
+                style={{ backgroundColor: 'transparent' }}
+                source={
+                    'Placeholders:\n   * %M Obj Name\n   * %V Volume\n   * %C Chapter\n   * %T Title\n   * %A Author (first in list)\n   * %I Chapter Internal ID\n   * %i Obj Internal ID\n   * %Y Year (Obj)\n   *\n   * ?_(...) replace _ with a value from above:\n   * Everything inside the braces will only be added if the value of %_ is not null'
+                }
+            />
+            <TInput
+                defaultValue={settings?.chapterNamingScheme as string}
+                placeholder={'Scheme'}
+                onSubmit={schemeChanged}
+                actionDelay={5000}
+            />
+        </SettingsItem>
    );
 }
--- a/tranga-website/src/Components/Settings/Download.tsx
+++ b/tranga-website/src/Components/Settings/Download.tsx
@@ -1,14 +1,14 @@
-import {SettingsItem} from "./Settings.tsx";
-import ImageCompression from "./ImageCompression.tsx";
-import DownloadLanguage from "./DownloadLanguage.tsx";
-import ChapterNamingScheme from "./ChapterNamingScheme.tsx";
+import { SettingsItem } from './Settings.tsx';
+import ImageCompression from './ImageCompression.tsx';
+import DownloadLanguage from './DownloadLanguage.tsx';
+import ChapterNamingScheme from './ChapterNamingScheme.tsx';

-export default function (){
+export default function Download() {
    return (
-        <SettingsItem title={"Download"}>
+        <SettingsItem title={'Download'}>
            <ImageCompression />
            <DownloadLanguage />
            <ChapterNamingScheme />
        </SettingsItem>
-    )
+    );
 }
--- a/tranga-website/src/Components/Settings/DownloadLanguage.tsx
+++ b/tranga-website/src/Components/Settings/DownloadLanguage.tsx
@@ -1,34 +1,30 @@
-import {ReactNode, useContext, useState} from "react";
-import {SettingsContext} from "./Settings.tsx";
-import {ApiContext} from "../../apiClient/ApiContext.tsx";
-import {Card, ColorPaletteProp, Input, Typography} from "@mui/joy";
-import * as React from "react";
+import { ReactNode, useContext } from 'react';
+import { SettingsContext, SettingsItem } from './Settings.tsx';
+import { ApiContext } from '../../contexts/ApiContext.tsx';
+import TInput from '../Inputs/TInput.tsx';

-export default function () : ReactNode {
+export default function DownloadLanguage(): ReactNode {
    const settings = useContext(SettingsContext);
    const Api = useContext(ApiContext);

-    const [color, setColor] = useState<ColorPaletteProp>("neutral");
-    const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
-    const languageChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
-        clearTimeout(timerRef.current);
-        setColor("warning");
-        timerRef.current = setTimeout(() => {
-            Api.settingsDownloadLanguagePartialUpdate(e.target.value)
-                .then(response => {
-                    if (response.ok)
-                        setColor("success");
-                    else
-                        setColor("danger");
-                })
-                .catch(() => setColor("danger"));
-        }, 1000);
-    }
+    const languageChanged = async (value: string | number | readonly string[] | undefined) => {
+        if (typeof value != 'string') return Promise.reject();
+        try {
+            const response = await Api.settingsDownloadLanguagePartialUpdate(value);
+            if (response.ok) return Promise.resolve();
+            else return Promise.reject();
+        } catch {
+            return await Promise.reject();
+        }
+    };

    return (
-        <Card>
-            <Typography>Download Language</Typography>
-            <Input color={color} defaultValue={settings?.downloadLanguage as string} placeholder={"Language code (f.e. 'en')"} onChange={languageChanged} />
-        </Card>
+        <SettingsItem title={'Download Language'}>
+            <TInput
+                defaultValue={settings?.downloadLanguage as string}
+                placeholder={"Language code (f.e. 'en')"}
+                onSubmit={languageChanged}
+            />
+        </SettingsItem>
    );
 }
--- a/tranga-website/src/Components/Settings/FlareSolverr.tsx
+++ b/tranga-website/src/Components/Settings/FlareSolverr.tsx
@@ -1,42 +1,30 @@
-import {ReactNode, useCallback, useContext, useState} from "react";
-import {SettingsContext} from "./Settings.tsx";
-import {Button, Card, ColorPaletteProp, Input, Typography} from "@mui/joy";
-import * as React from "react";
-import {ApiContext} from "../../apiClient/ApiContext.tsx";
+import { ReactNode, useContext } from 'react';
+import { SettingsContext, SettingsItem } from './Settings.tsx';
+import { ApiContext } from '../../contexts/ApiContext.tsx';
+import TInput from '../Inputs/TInput.tsx';

-export default function () : ReactNode {
+export default function FlareSolverr(): ReactNode {
    const settings = useContext(SettingsContext);
    const Api = useContext(ApiContext);

-    const [uriValue, setUriValue] = React.useState<string>(settings?.flareSolverrUrl as string);
-    const [uriColor, setUriColor] = useState<ColorPaletteProp>("neutral");
-    const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
-    const uriChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
-        clearTimeout(timerRef.current);
-        setUriValue(e.target.value);
-        setUriColor("warning");
-        timerRef.current = setTimeout(() => {
-            changeUri();
-        }, 1000);
-    }
-
-    const changeUri = useCallback(()  => {
-        Api.settingsFlareSolverrUrlCreate(uriValue)
-            .then(response => {
-                if (response.ok)
-                    setUriColor("success");
-                else
-                    setUriColor("danger");
-            })
-            .catch(() => setUriColor("danger"));
-    }, [uriValue]);
+    const uriChanged = async (value: string | number | readonly string[] | undefined) => {
+        if (typeof value != 'string') return Promise.reject();
+        try {
+            const response = await Api.settingsFlareSolverrUrlCreate(value);
+            if (response.ok) return Promise.resolve();
+            else return Promise.reject();
+        } catch (reason) {
+            return await Promise.reject(reason);
+        }
+    };

    return (
-        <Card>
-            <Typography>FlareSolverr</Typography>
-            <Input color={uriColor} value={uriValue} type={"url"} placeholder={"URL"} onChange={uriChanged}
-                   endDecorator={<Button onClick={changeUri}>Apply</Button>}
+        <SettingsItem title={'FlareSolverr'}>
+            <TInput
+                placeholder={'FlareSolverr URL'}
+                defaultValue={settings?.flareSolverrUrl as string}
+                onSubmit={uriChanged}
            />
-        </Card>
+        </SettingsItem>
    );
 }
--- a/tranga-website/src/Components/Settings/ImageCompression.tsx
+++ b/tranga-website/src/Components/Settings/ImageCompression.tsx
@@ -1,41 +1,16 @@
-import {ReactNode, useCallback, useContext, useState} from "react";
-import {SettingsContext} from "./Settings.tsx";
-import {Button, Card, ColorPaletteProp, Slider, Typography} from "@mui/joy";
-import * as React from "react";
-import {ApiContext} from "../../apiClient/ApiContext.tsx";
+import { ReactNode, useContext } from 'react';
+import { SettingsContext, SettingsItem } from './Settings.tsx';
+import { Slider } from '@mui/joy';

-export default function () : ReactNode {
+export default function ImageCompression(): ReactNode {
    const settings = useContext(SettingsContext);
-    const Api = useContext(ApiContext);
-
-    const [value, setValue] = useState(settings?.imageCompression??100);
-    const [color, setColor] = useState<ColorPaletteProp>("neutral");
-    const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
-    const valueChanged = (_: Event, val: number | number[]) => {
-        clearTimeout(timerRef.current);
-        setColor("warning");
-        setValue(val as number);
-        timerRef.current = setTimeout(() => {
-            changeUri();
-        }, 1000);
-    }
-
-    const changeUri = useCallback(()  => {
-        Api.settingsImageCompressionLevelPartialUpdate(value)
-            .then(response => {
-                if (response.ok)
-                    setColor("success");
-                else
-                    setColor("danger");
-            })
-            .catch(() => setColor("danger"));
-    }, [value]);

    return (
-        <Card>
-            <Typography>Image Compression</Typography>
-            <Slider sx={{marginTop: "20px"}} valueLabelDisplay={"auto"} value={value} onChange={valueChanged} color={color} />
-            <Button onClick={changeUri}>Set</Button>
-        </Card>
+        <SettingsItem title={'Image Compression'}>
+            <Slider
+                sx={{ marginTop: '20px' }}
+                valueLabelDisplay={'auto'}
+                defaultValue={settings?.imageCompression}></Slider>
+        </SettingsItem>
    );
 }
--- a/tranga-website/src/Components/Settings/LibraryConnectors/AddLibraryConnector.tsx
+++ b/tranga-website/src/Components/Settings/LibraryConnectors/AddLibraryConnector.tsx
@@ -1,19 +0,0 @@
-import {Modal, ModalDialog, Tab, TabList, Tabs} from "@mui/joy";
-import ModalClose from "@mui/joy/ModalClose";
-import * as React from "react";
-
-export default function ({open, setOpen} : {open: boolean, setOpen: Dispatch<boolean>}) {
-    return (
-        <Modal open={open} onClose={() => setOpen(false)}>
-            <ModalDialog>
-                <ModalClose />
-                <Tabs sx={{width:'95%'}} defaultValue={"komga"}>
-                    <TabList>
-                        <Tab value={"komga"}>Komga</Tab>
-                        <Tab value={"kavita"}>Kavita</Tab>
-                    </TabList>
-                </Tabs>
-            </ModalDialog>
-        </Modal>
-    );
-}
--- a/tranga-website/src/Components/Settings/LibraryConnectors/LibraryConnectors.tsx
+++ b/tranga-website/src/Components/Settings/LibraryConnectors/LibraryConnectors.tsx
@@ -1,18 +0,0 @@
-import {Button, Card, Typography} from "@mui/joy";
-import {useState} from "react";
-import ListLibraryConnectors from "./ListLibraryConnectors.tsx";
-import AddLibraryConnector from "./AddLibraryConnector.tsx";
-
-export default function (){
-
-    const [addDialogOpen, setAddDialogOpen] = useState<boolean>(false);
-
-    return (
-        <Card>
-            <Typography>Library Connectors</Typography>
-            <Button onClick={() => setAddDialogOpen(true)}>Add</Button>
-            <ListLibraryConnectors />
-            <AddLibraryConnector open={addDialogOpen} setOpen={() => setAddDialogOpen(false)} />
-        </Card>
-    );
-}
--- a/tranga-website/src/Components/Settings/LibraryConnectors/ListLibraryConnectors.tsx
+++ b/tranga-website/src/Components/Settings/LibraryConnectors/ListLibraryConnectors.tsx
@@ -1,35 +0,0 @@
-import {useContext, useEffect, useState} from "react";
-import {ApiContext} from "../../../apiClient/ApiContext.tsx";
-import {LibraryConnector} from "../../../apiClient/data-contracts.ts";
-import {Card, Chip, Input, Stack} from "@mui/joy";
-
-export default function (){
-    const Api = useContext(ApiContext);
-    const [libraryConnectors, setLibraryConnectors] = useState<LibraryConnector[]>([]);
-
-    useEffect(() => {
-        getConnectors();
-    }, []);
-
-    const getConnectors = () => {
-        Api.libraryConnectorList().then(r => {
-            if(r.ok)
-                setLibraryConnectors(r.data);
-        })
-    };
-
-    return (
-        <Stack direction={"column"} spacing={1}>
-            {libraryConnectors.map(c => <LibraryConnectorItem key={c.key} connector={c} />)}
-        </Stack>
-    );
-}
-
-function LibraryConnectorItem({connector} : {connector: LibraryConnector}){
-    return (
-        <Card>
-            <Chip>{connector.libraryType}</Chip>
-            <Input disabled value={connector.baseUrl} />
-        </Card>
-    );
-}
--- a/tranga-website/src/Components/Settings/Maintenance.tsx
+++ b/tranga-website/src/Components/Settings/Maintenance.tsx
@@ -1,31 +1,24 @@
-import {Button} from "@mui/joy";
-import {SettingsItem} from "./Settings.tsx";
-import {useContext, useState} from "react";
-import {ApiContext} from "../../apiClient/ApiContext.tsx";
-import {LoadingState, StateColor, StateIndicator} from "../Loading.tsx";
+import { SettingsItem } from './Settings.tsx';
+import { useContext } from 'react';
+import { ApiContext } from '../../contexts/ApiContext.tsx';
+import TButton from '../Inputs/TButton.tsx';

-export default function () {
+export default function Maintenance() {
    const Api = useContext(ApiContext);

-    const [unusedMangaState, setUnusedMangaState] = useState(LoadingState.none);
-    const cleanUnusedManga = () => {
-        setUnusedMangaState(LoadingState.loading);
-        Api.maintenanceCleanupNoDownloadMangaCreate()
-            .then(r => {
-                if (r.ok)
-                    setUnusedMangaState(LoadingState.success);
-                else
-                    setUnusedMangaState(LoadingState.failure);
-            }).catch(_ => setUnusedMangaState(LoadingState.failure));
-    }
+    const cleanUnusedManga = async (): Promise<void> => {
+        try {
+            const result = await Api.maintenanceCleanupNoDownloadMangaCreate();
+            if (result.ok) return Promise.resolve();
+            else return Promise.reject();
+        } catch (reason) {
+            return await Promise.reject(reason);
+        }
+    };

    return (
-        <SettingsItem title={"Maintenance"}>
-            <Button
-                disabled={unusedMangaState == LoadingState.loading}
-                color={StateColor(unusedMangaState)}
-                endDecorator={StateIndicator(unusedMangaState)}
-                onClick={cleanUnusedManga}>Cleanup unused Manga</Button>
+        <SettingsItem title={'Maintenance'}>
+            <TButton onClick={cleanUnusedManga}>Cleanup unused Manga</TButton>
        </SettingsItem>
    );
 }
--- a/tranga-website/src/Components/Settings/NotificationConnectors/AddNotificationConnector.tsx
+++ b/tranga-website/src/Components/Settings/NotificationConnectors/AddNotificationConnector.tsx
@@ -1,141 +0,0 @@
-import {ReactNode, useContext, useState} from "react";
-import { ApiContext } from "../../../apiClient/ApiContext.tsx";
-import {
-    Button, Card,
-    Input,
-    Modal,
-    ModalDialog,
-    Stack,
-    Tab,
-    TabList,
-    TabPanel,
-    Tabs, Typography
-} from "@mui/joy";
-import ModalClose from "@mui/joy/ModalClose";
-import {GotifyRecord, NtfyRecord, PushoverRecord} from "../../../apiClient/data-contracts.ts";
-import {LoadingState, StateColor, StateIndicator} from "../../Loading.tsx";
-import * as React from "react";
-import ListNotificationConnector from "./ListNotificationConnector.tsx";
-
-export default function () {
-    const [notificationConnectorsOpen, setNotificationConnectorsOpen] = React.useState(false);
-        
-    return (
-        <Card>
-            <Typography>Notification Connectors</Typography>
-            <Button onClick={() => setNotificationConnectorsOpen(true)}>Add</Button>
-            <ListNotificationConnector />
-            <Modal open={notificationConnectorsOpen} onClose={() => setNotificationConnectorsOpen(false)}>
-                <ModalDialog>
-                    <ModalClose />
-                    <Tabs sx={{width:'95%'}} defaultValue={"gotify"}>
-                        <TabList>
-                            <Tab value={"gotify"}>Gotify</Tab>
-                            <Tab value={"ntfy"}>Ntfy</Tab>
-                            <Tab value={"pushover"}>Pushover</Tab>
-                        </TabList>
-                        <Gotify />
-                        <Ntfy />
-                        <Pushover />
-                    </Tabs>
-                </ModalDialog>
-            </Modal>
-        </Card>
-    );
-}
-
-function NotificationConnectorTab({ value, children, add, state }: { value: string, children: ReactNode, add: (data: any) => void, state: LoadingState }) {
-    
-    const IsLoading = (state : LoadingState) : boolean => state === LoadingState.loading;
-    
-    return (
-        <TabPanel value={value}>
-            <Stack spacing={1}>
-                {children}
-                <Button onClick={add} endDecorator={StateIndicator(state)} loading={IsLoading(state)} disabled={IsLoading(state)} color={StateColor(state)}>Add</Button>
-            </Stack>
-        </TabPanel>
-    );
-}
-
-function Gotify() {
-    const Api = useContext(ApiContext);
-    const [gotifyData, setGotifyData] = useState<GotifyRecord>({});
-    const [loadingState, setLoadingState] = useState<LoadingState>(LoadingState.none);
-
-    const Add = () => {
-        setLoadingState(LoadingState.loading);
-        Api.notificationConnectorGotifyUpdate(gotifyData)
-            .then((response) => {
-                if (response.ok)
-                    setLoadingState(LoadingState.success);
-                else
-                    setLoadingState(LoadingState.failure);
-            })
-            .catch(_ => setLoadingState(LoadingState.failure));
-    }
-    
-    return (
-        <NotificationConnectorTab value={"gotify"} add={Add} state={loadingState}>
-            <Input placeholder={"Name"} value={gotifyData.name as string} onChange={(e) => setGotifyData({...gotifyData, name: e.target.value})} />
-            <Input placeholder={"https://[...]/message"} value={gotifyData.endpoint as string} onChange={(e) => setGotifyData({...gotifyData, endpoint: e.target.value})} />
-            <Input placeholder={"Apptoken"} type={"password"} value={gotifyData.appToken as string} onChange={(e) => setGotifyData({...gotifyData, appToken: e.target.value})} />
-            <Input placeholder={"Priority"} type={"number"} value={gotifyData.priority as number} onChange={(e) => setGotifyData({...gotifyData, priority: e.target.valueAsNumber})} />
-        </NotificationConnectorTab>
-    );
-}
-
-function Ntfy() {
-    const Api = useContext(ApiContext);
-    const [ntfyData, setNtfyData] = useState<NtfyRecord>({});
-    const [loadingState, setLoadingState] = useState<LoadingState>(LoadingState.none);
-
-    const Add = () => {
-        setLoadingState(LoadingState.loading);
-        Api.notificationConnectorNtfyUpdate(ntfyData)
-            .then((response) => {
-                if (response.ok)
-                    setLoadingState(LoadingState.success);
-                else
-                    setLoadingState(LoadingState.failure);
-            })
-            .catch(_ => setLoadingState(LoadingState.failure));
-    }
-
-    return (
-        <NotificationConnectorTab value={"ntfy"} add={Add} state={loadingState}>
-            <Input placeholder={"Name"} value={ntfyData.name as string} onChange={(e) => setNtfyData({...ntfyData, name: e.target.value})} />
-            <Input placeholder={"Endpoint"} value={ntfyData.endpoint as string} onChange={(e) => setNtfyData({...ntfyData, endpoint: e.target.value})} />
-            <Input placeholder={"Topic"} value={ntfyData.topic as string} onChange={(e) => setNtfyData({...ntfyData, topic: e.target.value})} />
-            <Input placeholder={"Username"} value={ntfyData.username as string} onChange={(e) => setNtfyData({...ntfyData, username: e.target.value})} />
-            <Input placeholder={"Password"} type={"password"} value={ntfyData.password as string} onChange={(e) => setNtfyData({...ntfyData, password: e.target.value})} />
-            <Input placeholder={"Priority"} type={"number"} value={ntfyData.priority as number} onChange={(e) => setNtfyData({...ntfyData, priority: e.target.valueAsNumber})} />
-        </NotificationConnectorTab>
-    );
-}
-
-function Pushover() {
-    const Api = useContext(ApiContext);
-    const [pushoverData, setPushoverData] = useState<PushoverRecord>({});
-    const [loadingState, setLoadingState] = useState<LoadingState>(LoadingState.none);
-    
-    const Add = () => {
-        setLoadingState(LoadingState.loading);
-        Api.notificationConnectorPushoverUpdate(pushoverData)
-            .then((response) => {
-                if (response.ok)
-                    setLoadingState(LoadingState.success);
-                else
-                    setLoadingState(LoadingState.failure);
-            })
-            .catch(_ => setLoadingState(LoadingState.failure));
-    }
-
-    return (
-        <NotificationConnectorTab value={"pushover"} add={Add} state={loadingState}>
-            <Input placeholder={"Name"} value={pushoverData.name as string} onChange={(e) => setPushoverData({...pushoverData, name: e.target.value})} />
-            <Input placeholder={"User"} value={pushoverData.user as string} onChange={(e) => setPushoverData({...pushoverData, user: e.target.value})} />
-            <Input placeholder={"AppToken"} type={"password"} value={pushoverData.appToken as string} onChange={(e) => setPushoverData({...pushoverData, appToken: e.target.value})} />
-        </NotificationConnectorTab>
-    );
-}
--- a/tranga-website/src/Components/Settings/NotificationConnectors/ListNotificationConnector.tsx
+++ b/tranga-website/src/Components/Settings/NotificationConnectors/ListNotificationConnector.tsx
@@ -1,52 +0,0 @@
-import {ApiContext} from "../../../apiClient/ApiContext.tsx";
-import {useContext, useEffect, useState} from "react";
-import { NotificationConnector } from "../../../apiClient/data-contracts.ts";
-import {Card, Chip, Input, Stack, Table, Textarea, Typography} from "@mui/joy";
-
-export default function (){
-    const Api = useContext(ApiContext);
-    const [notificationConnectors, setNotificationConnectors] = useState<NotificationConnector[]>([]);
-
-    useEffect(() => {
-        getConnectors();
-    }, []);
-
-    const getConnectors = () => {
-        Api.notificationConnectorList().then(r => {
-            if(r.ok)
-                setNotificationConnectors(r.data);
-        })
-    };
-
-    return (
-        <Stack direction={"column"} spacing={1}>
-            {notificationConnectors.map(c => <NotificationConnectorItem key={c.name} connector={c} />)}
-        </Stack>
-    );
-}
-
-function NotificationConnectorItem({connector} : {connector: NotificationConnector}){
-    return (
-        <Card>
-            <Typography left={"h2"}>{connector.name}</Typography>
-            <Input disabled startDecorator={<Chip>{connector.httpMethod}</Chip>} value={connector.url} />
-            <Table>
-                <thead>
-                    <tr>
-                        <th>Header</th>
-                        <th>Value</th>
-                    </tr>
-                </thead>
-                <tbody>
-                {Object.entries(connector.headers).map(x =>
-                    <tr key={x[0]}>
-                        <td>{x[0]}</td>
-                        <td>{[x[1]]}</td>
-                    </tr>
-                )}
-                </tbody>
-            </Table>
-            <Textarea disabled value={connector.body}/>
-        </Card>
-    );
-}
--- a/tranga-website/src/Components/Settings/Services.tsx
+++ b/tranga-website/src/Components/Settings/Services.tsx
@@ -1,17 +1,11 @@
-import {SettingsItem} from "./Settings.tsx";
-import NotificationConnectors from "./NotificationConnectors/AddNotificationConnector.tsx";
-import FlareSolverr from "./FlareSolverr.tsx";
-import LibraryConnectors from "./LibraryConnectors/LibraryConnectors.tsx";
-
-export default function(){
-
-
+import { SettingsItem } from './Settings.tsx';
+import FlareSolverr from './FlareSolverr.tsx';
+import { ReactNode } from 'react';

+export default function Services(): ReactNode {
    return (
-        <SettingsItem title={"Services"} direction={"row"}>
+        <SettingsItem title={'Services'}>
            <FlareSolverr />
-            <NotificationConnectors />
-            <LibraryConnectors />
        </SettingsItem>
    );
 }
--- a/tranga-website/src/Components/Settings/Settings.tsx
+++ b/tranga-website/src/Components/Settings/Settings.tsx
@@ -3,75 +3,70 @@ import {
    Accordion,
    AccordionDetails,
    AccordionGroup,
-    AccordionSummary, Button, ColorPaletteProp,
+    AccordionSummary,
+    Button,
    DialogContent,
-    DialogTitle, Input,
-    Modal, ModalDialog, Stack
-} from "@mui/joy";
+    DialogTitle,
+    Modal,
+    ModalDialog,
+} from '@mui/joy';
 import './Settings.css';
-import * as React from "react";
-import {createContext, Dispatch, ReactNode, useContext, useEffect, useState} from "react";
-import {TrangaSettings} from "../../apiClient/data-contracts.ts";
-import {ApiContext} from "../../apiClient/ApiContext.tsx";
-import {SxProps} from "@mui/joy/styles/types";
-import Maintenance from "./Maintenance.tsx";
-import Services from "./Services.tsx";
-import Download from './Download.tsx';
+import * as React from 'react';
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+import { SxProps } from '@mui/joy/styles/types';
+import ImageCompression from './ImageCompression.tsx';
+import FlareSolverr from './FlareSolverr.tsx';
+import DownloadLanguage from './DownloadLanguage.tsx';
+import ChapterNamingScheme from './ChapterNamingScheme.tsx';
+import Maintenance from './Maintenance.tsx';
+import { ApiContext } from '../../contexts/ApiContext.tsx';
+import { TrangaSettings } from '../../api/data-contracts.ts';
+import TInput from '../Inputs/TInput.tsx';

-export const SettingsContext = createContext<TrangaSettings|undefined>(undefined);
+export const SettingsContext = createContext<TrangaSettings | undefined>(undefined);

-export default function Settings({setApiUri} : {setApiUri: Dispatch<React.SetStateAction<string>>}) {
+export default function Settings({ setApiUri }: { setApiUri: (uri: string) => void }) {
    const Api = useContext(ApiContext);
    const [settings, setSettings] = useState<TrangaSettings>();

    const [open, setOpen] = React.useState(false);

-    const [apiUriColor, setApiUriColor] = useState<ColorPaletteProp>("neutral");
-    const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
-
    useEffect(() => {
        Api.settingsList().then((response) => {
            setSettings(response.data);
        });
-    }, []);
+    }, [Api]);

-    const apiUriChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
-        clearTimeout(timerRef.current);
-        setApiUriColor("warning");
+    const apiUriChanged = (value: string | number | readonly string[] | undefined) => {
+        if (typeof value != 'string') return Promise.reject();
+        setApiUri(value);
+        return Promise.resolve();
+    };

-        const val = e.target.value;
-        const value = val.endsWith("/") ? val.substring(0, val.length - 1) : val;
-
-        timerRef.current = setTimeout(() => {
-            setApiUri(value);
-            setApiUriColor("success");
-        }, 1000);
-    }
-    
-    const ModalStyle : SxProps = {
-        width: "80%",
-        height: "80%"
-    }
+    const ModalStyle: SxProps = { width: '80%', height: '80%' };

    return (
        <SettingsContext.Provider value={settings}>
            <Button onClick={() => setOpen(true)}>Settings</Button>
-            <Modal open={open} onClose={() => setOpen(false)}>
+            <Modal
+                open={open}
+                onClose={() => setOpen(false)}>
                <ModalDialog sx={ModalStyle}>
                    <ModalClose />
                    <DialogTitle>Settings</DialogTitle>
                    <DialogContent>
                        <AccordionGroup>
-                            <SettingsItem title={"ApiUri"}>
-                                <Input
-                                    color={apiUriColor}
-                                    placeholder={"http(s)://"}
-                                    type={"url"}
+                            <SettingsItem title={'ApiUri'}>
+                                <TInput
+                                    placeholder={'http(s)://'}
                                    defaultValue={Api.baseUrl}
-                                    onChange={apiUriChanged} />
+                                    onSubmit={apiUriChanged}
+                                />
                            </SettingsItem>
-                            <Download />
-                            <Services />
+                            <ImageCompression />
+                            <FlareSolverr />
+                            <DownloadLanguage />
+                            <ChapterNamingScheme />
                            <Maintenance />
                        </AccordionGroup>
                    </DialogContent>
@@ -81,18 +76,11 @@ export default function Settings({setApiUri} : {setApiUri: Dispatch<React.SetSta
    );
 }

-export function SettingsItem({title, children, defaultExpanded, direction} : {title: string, children?: ReactNode, defaultExpanded?: boolean, direction?: "row" | "column"}) {
-    const [expanded, setExpanded] = React.useState(defaultExpanded??false);
-    const stackDirection = direction ?? "column";
-
+export function SettingsItem({ title, children }: { title: string; children: ReactNode }) {
    return (
-        <Accordion expanded={expanded} onChange={(_, expanded) => setExpanded(expanded)}>
+        <Accordion>
            <AccordionSummary>{title}</AccordionSummary>
-            <AccordionDetails>
-                <Stack direction={stackDirection} spacing={1}>
-                    {children}
-                </Stack>
-            </AccordionDetails>
+            <AccordionDetails>{children}</AccordionDetails>
        </Accordion>
    );
 }
--- a/tranga-website/src/Header.tsx
+++ b/tranga-website/src/Header.tsx
@@ -1,33 +1,72 @@
-import Sheet from "@mui/joy/Sheet";
-import {Link, Stack, Typography} from "@mui/joy";
-import {ReactElement, useContext} from "react";
+import Sheet from '@mui/joy/Sheet';
+import { Link, Stack, Typography } from '@mui/joy';
+import { ReactElement, ReactNode, useContext } from 'react';
 import './Header.css';
-import {Article, GitHub} from "@mui/icons-material";
-import {ApiContext} from "./apiClient/ApiContext.tsx";
+import { Article, GitHub } from '@mui/icons-material';
+import { ApiContext } from './contexts/ApiContext.tsx';

-export default function Header({children} : {children? : ReactElement<any, any> | ReactElement<any,any>[] | undefined}) : ReactElement {
+export default function Header({ children }: { children?: ReactNode }): ReactElement {
    const Api = useContext(ApiContext);

    return (
-        <Sheet className={"header"}>
-            <Stack direction={"row"} spacing={2} sx={{width: "100%", alignItems: "center", justifyContent: "space-between"}} useFlexGap>
-                <Stack sx={{flexGrow: 1, flexBasis: 1}} direction={"row"} spacing={2}>
+        <Sheet className={'header'}>
+            <Stack
+                direction={'row'}
+                spacing={2}
+                sx={{ width: '100%', alignItems: 'center', justifyContent: 'space-between' }}
+                useFlexGap>
+                <Stack
+                    sx={{ flexGrow: 1, flexBasis: 1 }}
+                    direction={'row'}
+                    spacing={2}>
                    {children}
                </Stack>
-                <Stack sx={{flexGrow: 1, height: "100%", flexBasis: 1, justifyContent: "center"}} direction={"row"}>
-                    <img src={"/blahaj.png"} style={{cursor: "grab", maxHeight: "100%"}}/>
-                    <Typography level={"h2"} sx={{
-                        background: "linear-gradient(110deg, var(--joy-palette-primary-solidBg), var(--joy-palette-success-400))",
-                        WebkitBackgroundClip: "text",
-                        WebkitTextFillColor: "transparent",
-                        fontWeight: "bold",
-                        cursor: "default"
-                    }}>Tranga</Typography>
+                <Stack
+                    sx={{ flexGrow: 1, height: '100%', flexBasis: 1, justifyContent: 'center' }}
+                    direction={'row'}>
+                    <img
+                        src={'/blahaj.png'}
+                        style={{ cursor: 'grab', maxHeight: '100%' }}
+                    />
+                    <Typography
+                        level={'h2'}
+                        sx={{
+                            background:
+                                'linear-gradient(110deg, var(--joy-palette-primary-solidBg), var(--joy-palette-success-400))',
+                            WebkitBackgroundClip: 'text',
+                            WebkitTextFillColor: 'transparent',
+                            fontWeight: 'bold',
+                            cursor: 'default',
+                        }}>
+                        Tranga
+                    </Typography>
                </Stack>
-                <Stack sx={{flexGrow: 1, flexBasis: 1, justifyContent: "flex-end"}} direction={"row"} spacing={2}>
-                    <Link target={"_blank"} href={"https://github.com/C9Glax/tranga"} color={"neutral"} height={"min-content"} ><GitHub /> Server</Link>
-                    <Link target={"_blank"} href={"https://github.com/C9Glax/tranga-website"} color={"neutral"} height={"min-content"} ><GitHub /> Website</Link>
-                    <Link target={"_blank"} href={Api.baseUrl + "/swagger"} color={"neutral"} height={"min-content"} ><Article />Swagger</Link>
+                <Stack
+                    sx={{ flexGrow: 1, flexBasis: 1, justifyContent: 'flex-end' }}
+                    direction={'row'}
+                    spacing={2}>
+                    <Link
+                        target={'_blank'}
+                        href={'https://github.com/C9Glax/tranga'}
+                        color={'neutral'}
+                        height={'min-content'}>
+                        <GitHub /> Server
+                    </Link>
+                    <Link
+                        target={'_blank'}
+                        href={'https://github.com/C9Glax/tranga-website'}
+                        color={'neutral'}
+                        height={'min-content'}>
+                        <GitHub /> Website
+                    </Link>
+                    <Link
+                        target={'_blank'}
+                        href={Api.baseUrl + '/swagger'}
+                        color={'neutral'}
+                        height={'min-content'}>
+                        <Article />
+                        Swagger
+                    </Link>
                </Stack>
            </Stack>
        </Sheet>
--- a/tranga-website/src/Search.tsx
+++ b/tranga-website/src/Search.tsx
@@ -0,0 +1,127 @@
+import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react';
+import {
+    List,
+    ListItem,
+    ListItemDecorator,
+    Modal,
+    ModalDialog,
+    Step,
+    StepIndicator,
+    Stepper,
+    Typography,
+} from '@mui/joy';
+import ModalClose from '@mui/joy/ModalClose';
+import { MangaConnectorContext } from './contexts/MangaConnectorContext.tsx';
+import MangaConnectorIcon from './Components/Mangas/MangaConnectorIcon.tsx';
+import TInput from './Components/Inputs/TInput.tsx';
+import { ApiContext } from './contexts/ApiContext.tsx';
+import { MangaCardList } from './Components/Mangas/MangaList.tsx';
+import { MangaConnector, MinimalManga } from './api/data-contracts.ts';
+
+export function Search(props: SearchModalProps): ReactNode {
+    const Api = useContext(ApiContext);
+    const MangaConnectors = useContext(MangaConnectorContext);
+
+    useEffect(() => {
+        if (props.open) {
+            setSelectedConnector(undefined);
+            setSearchResults([]);
+        }
+    }, [props]);
+
+    const [selectedConnector, setSelectedConnector] = useState<MangaConnector>();
+    const [searchResults, setSearchResults] = useState<MinimalManga[]>([]);
+
+    const startSearch = async (
+        value: string | number | readonly string[] | undefined
+    ): Promise<void> => {
+        if (typeof value != 'string') return Promise.reject();
+        setSearchResults([]);
+        if (isUrl(value)) {
+            try {
+                const result = await Api.searchUrlCreate(value);
+                if (result.ok) {
+                    setSearchResults([result.data]);
+                    return Promise.resolve();
+                } else return Promise.reject();
+            } catch (reason) {
+                return await Promise.reject(reason);
+            }
+        } else {
+            if (!selectedConnector) return Promise.reject();
+            try {
+                const result2 = await Api.searchDetail(selectedConnector?.key, value);
+                if (result2.ok) {
+                    setSearchResults(result2.data);
+                    return Promise.resolve();
+                } else return Promise.reject();
+            } catch (reason1) {
+                return await Promise.reject(reason1);
+            }
+        }
+    };
+
+    return (
+        <Modal
+            open={props.open}
+            onClose={() => props.setOpen(false)}>
+            <ModalDialog sx={{ width: '90vw' }}>
+                <ModalClose />
+                <Stepper>
+                    <Step
+                        orientation={'vertical'}
+                        indicator={<StepIndicator>1</StepIndicator>}>
+                        <Typography level={'title-lg'}>Select a connector</Typography>
+                        <List>
+                            {MangaConnectors.map((c) => (
+                                <ListItem
+                                    key={c.key}
+                                    onClick={() => setSelectedConnector(c)}>
+                                    <ListItemDecorator>
+                                        <MangaConnectorIcon mangaConnector={c} />
+                                    </ListItemDecorator>
+                                    <Typography
+                                        sx={
+                                            c.key == selectedConnector?.key
+                                                ? { fontWeight: 'bold' }
+                                                : {}
+                                        }>
+                                        {c.name}
+                                    </Typography>
+                                </ListItem>
+                            ))}
+                        </List>
+                    </Step>
+                    <Step
+                        orientation={'vertical'}
+                        indicator={<StepIndicator>2</StepIndicator>}>
+                        <Typography level={'title-lg'}>Enter a search term or URL</Typography>
+                        <TInput
+                            placeholder={'Manga-name or URL'}
+                            onSubmit={startSearch}
+                        />
+                    </Step>
+                </Stepper>
+                <MangaCardList
+                    manga={searchResults}
+                    mangaOnClick={props.mangaOnClick}
+                />
+            </ModalDialog>
+        </Modal>
+    );
+}
+
+export interface SearchModalProps {
+    open: boolean;
+    setOpen: Dispatch<boolean>;
+    mangaOnClick?: (manga: MinimalManga) => void;
+}
+
+function isUrl(str: string): boolean {
+    try {
+        new URL(str);
+        return true;
+    } catch {
+        return false;
+    }
+}
--- a/tranga-website/src/api/V2.ts
+++ b/tranga-website/src/api/V2.ts
--- a/tranga-website/src/api/data-contracts.ts
+++ b/tranga-website/src/api/data-contracts.ts
@@ -0,0 +1,536 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+/*
+ * ---------------------------------------------------------------
+ * ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API        ##
+ * ##                                                           ##
+ * ## AUTHOR: acacode                                           ##
+ * ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
+ * ---------------------------------------------------------------
+ */
+
+export enum WorkerExecutionState {
+    Failed = 'Failed',
+    Cancelled = 'Cancelled',
+    Created = 'Created',
+    Waiting = 'Waiting',
+    Running = 'Running',
+    Completed = 'Completed',
+}
+
+export enum RequestType {
+    Default = 'Default',
+    MangaDexFeed = 'MangaDexFeed',
+    MangaImage = 'MangaImage',
+    MangaCover = 'MangaCover',
+    MangaDexImage = 'MangaDexImage',
+    MangaInfo = 'MangaInfo',
+}
+
+export enum MangaReleaseStatus {
+    Continuing = 'Continuing',
+    Completed = 'Completed',
+    OnHiatus = 'OnHiatus',
+    Cancelled = 'Cancelled',
+    Unreleased = 'Unreleased',
+}
+
+export enum LibraryType {
+    Komga = 'Komga',
+    Kavita = 'Kavita',
+}
+
+export enum CoverSize {
+    Original = 'Original',
+    Large = 'Large',
+    Medium = 'Medium',
+    Small = 'Small',
+}
+
+/** API.Schema.MangaContext.AltTitle DTO */
+export interface AltTitle {
+    /**
+     * Language of the Title
+     * @minLength 1
+     */
+    language: string;
+    /**
+     * Title
+     * @minLength 1
+     */
+    title: string;
+}
+
+/** The API.Schema.MangaContext.Author DTO */
+export interface Author {
+    /**
+     * Name of the Author.
+     * @minLength 1
+     */
+    name: string;
+    /**
+     * Unique Identifier of the DTO
+     * @minLength 16
+     * @maxLength 64
+     */
+    key: string;
+}
+
+/** API.Schema.MangaContext.Chapter DTO */
+export interface Chapter {
+    /**
+     * Identifier of the Manga this Chapter belongs to
+     * @minLength 1
+     */
+    mangaId: string;
+    /**
+     * Volume number
+     * @format int32
+     */
+    volume: number;
+    /**
+     * Chapter number
+     * @minLength 1
+     */
+    chapterNumber: string;
+    /**
+     * Title of the Chapter
+     * @minLength 1
+     */
+    title: string;
+    /** Whether Chapter is Downloaded (on disk) */
+    downloaded: boolean;
+    /** Ids of the Manga on MangaConnectors */
+    mangaConnectorIds: MangaConnectorId[];
+    /**
+     * Unique Identifier of the DTO
+     * @minLength 16
+     * @maxLength 64
+     */
+    key: string;
+}
+
+export interface CreateGotifyConnectorRecord {
+    /**
+     * The Name of the Notification Connector
+     * @minLength 1
+     */
+    name: string;
+    /**
+     * The Url of the Instance
+     * @format uri
+     * @minLength 1
+     */
+    url: string;
+    /**
+     * The Apptoken used for authentication
+     * @minLength 1
+     */
+    appToken: string;
+    /**
+     * The Priority of Notifications
+     * @format int32
+     */
+    priority: number;
+}
+
+export interface CreateLibraryConnectorRecord {
+    libraryType: LibraryType;
+    /**
+     * The Url of the Library instance
+     * @format uri
+     * @minLength 1
+     */
+    url: string;
+    /**
+     * The Username to authenticate to the Library instance
+     * @minLength 1
+     */
+    username: string;
+    /**
+     * The Password to authenticate to the Library instance
+     * @minLength 1
+     */
+    password: string;
+}
+
+export interface CreateLibraryRecord {
+    /**
+     * The directory Path of the library
+     * @minLength 1
+     */
+    basePath: string;
+    /**
+     * The Name of the library
+     * @minLength 1
+     */
+    libraryName: string;
+}
+
+export interface CreateNotificationConnectorRecord {
+    /**
+     * The Name of the Notification Connector
+     * @minLength 1
+     */
+    name: string;
+    /**
+     * The Url of the Instance
+     * @format uri
+     * @minLength 1
+     */
+    url: string;
+    /**
+     * The HTTP Request Method to use for notifications
+     * @minLength 1
+     */
+    httpMethod: string;
+    /**
+     * The Request Body to use to send notifications
+     * @minLength 1
+     */
+    body: string;
+    /** The Request Headers to use to send notifications */
+    headers: Record<string, string>;
+}
+
+export interface CreateNtfyConnectorRecord {
+    /**
+     * The Name of the Notification Connector
+     * @minLength 1
+     */
+    name: string;
+    /**
+     * The Url of the Instance
+     * @format uri
+     * @minLength 1
+     */
+    url: string;
+    /**
+     * The Priority of Notifications
+     * @format int32
+     */
+    priority: number;
+    /**
+     * The Username used for authentication
+     * @minLength 1
+     */
+    username: string;
+    /**
+     * The Password used for authentication
+     * @minLength 1
+     */
+    password: string;
+    /**
+     * The Topic of Notifications
+     * @minLength 1
+     */
+    topic: string;
+}
+
+export interface CreatePushoverConnectorRecord {
+    /**
+     * The Name of the Notification Connector
+     * @minLength 1
+     */
+    name: string;
+    /**
+     * The Apptoken used for authentication
+     * @minLength 1
+     */
+    appToken: string;
+    /**
+     * The Username used for authentication
+     * @minLength 1
+     */
+    username: string;
+}
+
+export interface FileLibrary {
+    /**
+     * The directory Path of the library
+     * @minLength 1
+     */
+    basePath: string;
+    /**
+     * The Name of the library
+     * @minLength 1
+     */
+    libraryName: string;
+    /**
+     * Unique Identifier of the DTO
+     * @minLength 16
+     * @maxLength 64
+     */
+    key: string;
+}
+
+export interface LibraryConnector {
+    /**
+     * The Url of the Library instance
+     * @format uri
+     * @minLength 1
+     */
+    baseUrl: string;
+    type: LibraryType;
+    /**
+     * Unique Identifier of the DTO
+     * @minLength 16
+     * @maxLength 64
+     */
+    key: string;
+}
+
+/** API.Schema.MangaContext.Link DTO */
+export interface Link {
+    /**
+     * Name of the Provider
+     * @minLength 1
+     */
+    provider: string;
+    /**
+     * Url
+     * @minLength 1
+     */
+    url: string;
+    /**
+     * Unique Identifier of the DTO
+     * @minLength 16
+     * @maxLength 64
+     */
+    key: string;
+}
+
+/** API.Schema.MangaContext.Manga DTO */
+export interface Manga {
+    /**
+     * Chapter cutoff for Downloads (Chapters before this will not be downloaded)
+     * @format float
+     */
+    ignoreChaptersBefore: number;
+    /**
+     * Release Year
+     * @format int32
+     */
+    year?: number | null;
+    /** Release Language */
+    originalLanguage?: string | null;
+    /** Keys of ChapterDTOs */
+    chapterIds: string[];
+    /** Author-names */
+    authors: Author[];
+    /** Manga Tags */
+    tags: string[];
+    /** Links for more Metadata */
+    links: Link[];
+    /** Alt Titles of Manga */
+    altTitles: AltTitle[];
+    /**
+     * Id of the Library the Manga gets downloaded to
+     * @minLength 1
+     */
+    fileLibraryId: string;
+    /**
+     * Name of the Manga
+     * @minLength 1
+     */
+    name: string;
+    /**
+     * Description of the Manga
+     * @minLength 1
+     */
+    description: string;
+    releaseStatus: MangaReleaseStatus;
+    /** Ids of the Manga on MangaConnectors */
+    mangaConnectorIds: MangaConnectorId[];
+    /**
+     * Unique Identifier of the DTO
+     * @minLength 16
+     * @maxLength 64
+     */
+    key: string;
+}
+
+export interface MangaConnector {
+    name?: string | null;
+    /** Whether Connector is used for Searches and Downloads */
+    enabled: boolean;
+    /** Languages supported by the Connector */
+    supportedLanguages: string[];
+    /**
+     * Url of the Website Icon
+     * @minLength 1
+     */
+    iconUrl: string;
+    /**
+     * Unique Identifier of the DTO
+     * @minLength 16
+     * @maxLength 64
+     */
+    key: string;
+}
+
+/** API.Schema.MangaContext.MangaConnectorId`1 DTO */
+export interface MangaConnectorId {
+    /**
+     * Name of the Connector
+     * @minLength 1
+     */
+    mangaConnectorName: string;
+    /**
+     * Key of the referenced DTO
+     * @minLength 1
+     */
+    foreignKey: string;
+    /** Website Link for reference, if any */
+    websiteUrl?: string | null;
+    /** Whether this Link is used for downloads */
+    useForDownload: boolean;
+    /**
+     * Unique Identifier of the DTO
+     * @minLength 16
+     * @maxLength 64
+     */
+    key: string;
+}
+
+export interface MetadataEntry {
+    mangaId?: string | null;
+    metadataFetcherName?: string | null;
+    identifier?: string | null;
+}
+
+export interface MetadataSearchResult {
+    identifier?: string | null;
+    name?: string | null;
+    url?: string | null;
+    description?: string | null;
+    coverUrl?: string | null;
+}
+
+/** Shortened Version of API.Controllers.DTOs.Manga */
+export interface MinimalManga {
+    /**
+     * Name of the Manga
+     * @minLength 1
+     */
+    name: string;
+    /**
+     * Description of the Manga
+     * @minLength 1
+     */
+    description: string;
+    releaseStatus: MangaReleaseStatus;
+    /** Ids of the Manga on MangaConnectors */
+    mangaConnectorIds: MangaConnectorId[];
+    /**
+     * Unique Identifier of the DTO
+     * @minLength 16
+     * @maxLength 64
+     */
+    key: string;
+}
+
+export interface NotificationConnector {
+    /**
+     * The Name of the Notification Connector
+     * @minLength 1
+     */
+    name: string;
+    /**
+     * The Url of the Instance
+     * @format uri
+     * @minLength 1
+     */
+    url: string;
+    /**
+     * The HTTP Request Method to use for notifications
+     * @minLength 1
+     */
+    httpMethod: string;
+    /**
+     * The Request Body to use to send notifications
+     * @minLength 1
+     */
+    body: string;
+    /** The Request Headers to use to send notifications */
+    headers: Record<string, string>;
+    /**
+     * Unique Identifier of the DTO
+     * @minLength 16
+     * @maxLength 64
+     */
+    key: string;
+}
+
+export interface ProblemDetails {
+    type?: string | null;
+    title?: string | null;
+    /** @format int32 */
+    status?: number | null;
+    detail?: string | null;
+    instance?: string | null;
+    [key: string]: any;
+}
+
+export interface TrangaSettings {
+    downloadLocation?: string | null;
+    userAgent?: string | null;
+    /** @format int32 */
+    imageCompression?: number;
+    blackWhiteImages?: boolean;
+    flareSolverrUrl?: string | null;
+    /**
+     * Placeholders:
+     * %M Obj Name
+     * %V Volume
+     * %C Chapter
+     * %T Title
+     * %A Author (first in list)
+     * %I Chapter Internal ID
+     * %i Obj Internal ID
+     * %Y Year (Obj)
+     *
+     * ?_(...) replace _ with a value from above:
+     * Everything inside the braces will only be added if the value of %_ is not null
+     */
+    chapterNamingScheme?: string | null;
+    /** @format int32 */
+    workCycleTimeoutMs?: number;
+    requestLimits?: {
+        /** @format int32 */
+        Default?: number;
+        /** @format int32 */
+        MangaDexFeed?: number;
+        /** @format int32 */
+        MangaImage?: number;
+        /** @format int32 */
+        MangaCover?: number;
+        /** @format int32 */
+        MangaDexImage?: number;
+        /** @format int32 */
+        MangaInfo?: number;
+    } | null;
+    downloadLanguage?: string | null;
+    /** @format int32 */
+    maxConcurrentDownloads?: number;
+    /** @format int32 */
+    maxConcurrentWorkers?: number;
+}
+
+/** API.Workers.BaseWorker DTO */
+export interface Worker {
+    /** Workers this worker depends on having ran. */
+    dependencies: string[];
+    /** Workers that have not yet ran, that need to run for this Worker to run. */
+    missingDependencies: string[];
+    /** Worker can run. */
+    dependenciesFulfilled: boolean;
+    state: WorkerExecutionState;
+    /**
+     * Unique Identifier of the DTO
+     * @minLength 16
+     * @maxLength 64
+     */
+    key: string;
+}
--- a/tranga-website/src/api/http-client.ts
+++ b/tranga-website/src/api/http-client.ts
@@ -0,0 +1,240 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+/*
+ * ---------------------------------------------------------------
+ * ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API        ##
+ * ##                                                           ##
+ * ## AUTHOR: acacode                                           ##
+ * ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
+ * ---------------------------------------------------------------
+ */
+
+export type QueryParamsType = Record<string | number, any>;
+export type ResponseFormat = keyof Omit<Body, 'body' | 'bodyUsed'>;
+
+export interface FullRequestParams extends Omit<RequestInit, 'body'> {
+    /** set parameter to `true` for call `securityWorker` for this request */
+    secure?: boolean;
+    /** request path */
+    path: string;
+    /** content type of request body */
+    type?: ContentType;
+    /** query params */
+    query?: QueryParamsType;
+    /** format of response (i.e. response.json() -> format: "json") */
+    format?: ResponseFormat;
+    /** request body */
+    body?: unknown;
+    /** base url */
+    baseUrl?: string;
+    /** request cancellation token */
+    cancelToken?: CancelToken;
+}
+
+export type RequestParams = Omit<FullRequestParams, 'body' | 'method' | 'query' | 'path'>;
+
+export interface ApiConfig<SecurityDataType = unknown> {
+    baseUrl?: string;
+    baseApiParams?: Omit<RequestParams, 'baseUrl' | 'cancelToken' | 'signal'>;
+    securityWorker?: (
+        securityData: SecurityDataType | null
+    ) => Promise<RequestParams | void> | RequestParams | void;
+    customFetch?: typeof fetch;
+}
+
+export interface HttpResponse<D extends unknown, E extends unknown = unknown> extends Response {
+    data: D;
+    error: E;
+}
+
+type CancelToken = Symbol | string | number;
+
+export enum ContentType {
+    Json = 'application/json',
+    JsonApi = 'application/vnd.api+json',
+    FormData = 'multipart/form-data',
+    UrlEncoded = 'application/x-www-form-urlencoded',
+    Text = 'text/plain',
+}
+
+export class HttpClient<SecurityDataType = unknown> {
+    public baseUrl: string = '';
+    private securityData: SecurityDataType | null = null;
+    private securityWorker?: ApiConfig<SecurityDataType>['securityWorker'];
+    private abortControllers = new Map<CancelToken, AbortController>();
+    private customFetch = (...fetchParams: Parameters<typeof fetch>) => fetch(...fetchParams);
+
+    private baseApiParams: RequestParams = {
+        credentials: 'same-origin',
+        headers: {},
+        redirect: 'follow',
+        referrerPolicy: 'no-referrer',
+    };
+
+    constructor(apiConfig: ApiConfig<SecurityDataType> = {}) {
+        Object.assign(this, apiConfig);
+    }
+
+    public setSecurityData = (data: SecurityDataType | null) => {
+        this.securityData = data;
+    };
+
+    protected encodeQueryParam(key: string, value: any) {
+        const encodedKey = encodeURIComponent(key);
+        return `${encodedKey}=${encodeURIComponent(typeof value === 'number' ? value : `${value}`)}`;
+    }
+
+    protected addQueryParam(query: QueryParamsType, key: string) {
+        return this.encodeQueryParam(key, query[key]);
+    }
+
+    protected addArrayQueryParam(query: QueryParamsType, key: string) {
+        const value = query[key];
+        return value.map((v: any) => this.encodeQueryParam(key, v)).join('&');
+    }
+
+    protected toQueryString(rawQuery?: QueryParamsType): string {
+        const query = rawQuery || {};
+        const keys = Object.keys(query).filter((key) => 'undefined' !== typeof query[key]);
+        return keys
+            .map((key) =>
+                Array.isArray(query[key])
+                    ? this.addArrayQueryParam(query, key)
+                    : this.addQueryParam(query, key)
+            )
+            .join('&');
+    }
+
+    protected addQueryParams(rawQuery?: QueryParamsType): string {
+        const queryString = this.toQueryString(rawQuery);
+        return queryString ? `?${queryString}` : '';
+    }
+
+    private contentFormatters: Record<ContentType, (input: any) => any> = {
+        [ContentType.Json]: (input: any) =>
+            input !== null && (typeof input === 'object' || typeof input === 'string')
+                ? JSON.stringify(input)
+                : input,
+        [ContentType.JsonApi]: (input: any) =>
+            input !== null && (typeof input === 'object' || typeof input === 'string')
+                ? JSON.stringify(input)
+                : input,
+        [ContentType.Text]: (input: any) =>
+            input !== null && typeof input !== 'string' ? JSON.stringify(input) : input,
+        [ContentType.FormData]: (input: any) =>
+            Object.keys(input || {}).reduce((formData, key) => {
+                const property = input[key];
+                formData.append(
+                    key,
+                    property instanceof Blob
+                        ? property
+                        : typeof property === 'object' && property !== null
+                          ? JSON.stringify(property)
+                          : `${property}`
+                );
+                return formData;
+            }, new FormData()),
+        [ContentType.UrlEncoded]: (input: any) => this.toQueryString(input),
+    };
+
+    protected mergeRequestParams(params1: RequestParams, params2?: RequestParams): RequestParams {
+        return {
+            ...this.baseApiParams,
+            ...params1,
+            ...(params2 || {}),
+            headers: {
+                ...(this.baseApiParams.headers || {}),
+                ...(params1.headers || {}),
+                ...((params2 && params2.headers) || {}),
+            },
+        };
+    }
+
+    protected createAbortSignal = (cancelToken: CancelToken): AbortSignal | undefined => {
+        if (this.abortControllers.has(cancelToken)) {
+            const abortController = this.abortControllers.get(cancelToken);
+            if (abortController) {
+                return abortController.signal;
+            }
+            return void 0;
+        }
+
+        const abortController = new AbortController();
+        this.abortControllers.set(cancelToken, abortController);
+        return abortController.signal;
+    };
+
+    public abortRequest = (cancelToken: CancelToken) => {
+        const abortController = this.abortControllers.get(cancelToken);
+
+        if (abortController) {
+            abortController.abort();
+            this.abortControllers.delete(cancelToken);
+        }
+    };
+
+    public request = async <T = any, E = any>({
+        body,
+        secure,
+        path,
+        type,
+        query,
+        format,
+        baseUrl,
+        cancelToken,
+        ...params
+    }: FullRequestParams): Promise<HttpResponse<T, E>> => {
+        const secureParams =
+            ((typeof secure === 'boolean' ? secure : this.baseApiParams.secure) &&
+                this.securityWorker &&
+                (await this.securityWorker(this.securityData))) ||
+            {};
+        const requestParams = this.mergeRequestParams(params, secureParams);
+        const queryString = query && this.toQueryString(query);
+        const payloadFormatter = this.contentFormatters[type || ContentType.Json];
+        const responseFormat = format || requestParams.format;
+
+        return this.customFetch(
+            `${baseUrl || this.baseUrl || ''}${path}${queryString ? `?${queryString}` : ''}`,
+            {
+                ...requestParams,
+                headers: {
+                    ...(requestParams.headers || {}),
+                    ...(type && type !== ContentType.FormData ? { 'Content-Type': type } : {}),
+                },
+                signal:
+                    (cancelToken ? this.createAbortSignal(cancelToken) : requestParams.signal) ||
+                    null,
+                body: typeof body === 'undefined' || body === null ? null : payloadFormatter(body),
+            }
+        ).then(async (response) => {
+            const r = response.clone() as HttpResponse<T, E>;
+            r.data = null as unknown as T;
+            r.error = null as unknown as E;
+
+            const data = !responseFormat
+                ? r
+                : await response[responseFormat]()
+                      .then((data) => {
+                          if (r.ok) {
+                              r.data = data;
+                          } else {
+                              r.error = data;
+                          }
+                          return r;
+                      })
+                      .catch((e) => {
+                          r.error = e;
+                          return r;
+                      });
+
+            if (cancelToken) {
+                this.abortControllers.delete(cancelToken);
+            }
+
+            if (!response.ok) throw data;
+            return data;
+        });
+    };
+}
--- a/tranga-website/src/apiClient/ApiContext.tsx
+++ b/tranga-website/src/apiClient/ApiContext.tsx
@@ -1,4 +0,0 @@
-import { createContext } from "react";
-import {V2} from "./V2.ts";
-
-export const ApiContext = createContext<V2>(new V2());
--- a/tranga-website/src/apiClient/CleanupNoDownloadManga.ts
+++ b/tranga-website/src/apiClient/CleanupNoDownloadManga.ts
@@ -1,32 +0,0 @@
-/* eslint-disable */
-/* tslint:disable */
-// @ts-nocheck
-/*
- * ---------------------------------------------------------------
- * ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API        ##
- * ##                                                           ##
- * ## AUTHOR: acacode                                           ##
- * ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
- * ---------------------------------------------------------------
- */
-
-import { HttpClient, RequestParams } from "./http-client";
-
-export class CleanupNoDownloadManga<
-  SecurityDataType = unknown,
-> extends HttpClient<SecurityDataType> {
-  /**
-   * No description
-   *
-   * @tags Maintenance
-   * @name CleanupNoDownloadMangaCreate
-   * @summary Removes all API.Schema.MangaContext.Manga not marked for Download on any API.MangaConnectors.MangaConnector
-   * @request POST:/CleanupNoDownloadManga
-   */
-  cleanupNoDownloadMangaCreate = (params: RequestParams = {}) =>
-    this.request<void, string>({
-      path: `/CleanupNoDownloadManga`,
-      method: "POST",
-      ...params,
-    });
-}
--- a/tranga-website/src/apiClient/SettingsContext.tsx
+++ b/tranga-website/src/apiClient/SettingsContext.tsx
@@ -1,31 +0,0 @@
-import {createContext, useContext, useState} from "react";
-import {TrangaSettings} from "./data-contracts.ts";
-import {ApiContext} from "./ApiContext.tsx";
-
-const [settingsPromise, setSettingsPromise] = useState<Promise<TrangaSettings | undefined>>();
-const [settings, setSettings] = useState<TrangaSettings>();
-
-const API = useContext(ApiContext);
-
-export const SettingsContext = createContext<{ GetSettings: () => Promise<TrangaSettings | undefined> }>(
-    {
-        GetSettings: () : Promise<TrangaSettings | undefined> => {
-            const promise = settingsPromise;
-            if(promise) return promise;
-            const p = new Promise<TrangaSettings | undefined>((resolve, reject) => {
-                if (settings) resolve(settings);
-
-                console.log(`Fetching settings`);
-                API.settingsList()
-                    .then(result => {
-                        if (!result.ok)
-                            throw new Error(`Error fetching settings`);
-                        setSettings(result.data);
-                        resolve(result.data);
-                    }).catch(reject);
-            });
-            setSettingsPromise(p);
-            return p;
-        }
-    }
-);
--- a/tranga-website/src/apiClient/V2.ts
+++ b/tranga-website/src/apiClient/V2.ts
--- a/tranga-website/src/apiClient/data-contracts.ts
+++ b/tranga-website/src/apiClient/data-contracts.ts
@@ -1,388 +0,0 @@
-/* eslint-disable */
-/* tslint:disable */
-// @ts-nocheck
-/*
- * ---------------------------------------------------------------
- * ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API        ##
- * ##                                                           ##
- * ## AUTHOR: acacode                                           ##
- * ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
- * ---------------------------------------------------------------
- */
-
-export enum WorkerExecutionState {
-  Failed = "Failed",
-  Cancelled = "Cancelled",
-  Created = "Created",
-  Waiting = "Waiting",
-  Running = "Running",
-  Completed = "Completed",
-}
-
-export enum RequestType {
-  Default = "Default",
-  MangaDexFeed = "MangaDexFeed",
-  MangaImage = "MangaImage",
-  MangaCover = "MangaCover",
-  MangaDexImage = "MangaDexImage",
-  MangaInfo = "MangaInfo",
-}
-
-export enum MangaReleaseStatus {
-  Continuing = "Continuing",
-  Completed = "Completed",
-  OnHiatus = "OnHiatus",
-  Cancelled = "Cancelled",
-  Unreleased = "Unreleased",
-}
-
-export enum LibraryType {
-  Komga = "Komga",
-  Kavita = "Kavita",
-}
-
-export interface AltTitle {
-  /**
-   * @minLength 0
-   * @maxLength 8
-   */
-  language: string;
-  /**
-   * @minLength 0
-   * @maxLength 256
-   */
-  title: string;
-  key?: string | null;
-}
-
-export interface Author {
-  /**
-   * @minLength 0
-   * @maxLength 128
-   */
-  authorName: string;
-  key?: string | null;
-}
-
-export interface BaseWorker {
-  /** Workers this Worker depends on being completed before running. */
-  dependsOn?: BaseWorker[] | null;
-  /** Dependencies and dependencies of dependencies. See also API.Workers.BaseWorker.DependsOn. */
-  allDependencies?: BaseWorker[] | null;
-  /** API.Workers.BaseWorker.AllDependencies and Self. */
-  dependenciesAndSelf?: BaseWorker[] | null;
-  /** API.Workers.BaseWorker.DependsOn where API.Workers.WorkerExecutionState is less than Completed. */
-  missingDependencies?: BaseWorker[] | null;
-  allDependenciesFulfilled?: boolean;
-  key?: string | null;
-}
-
-export interface Chapter {
-  /**
-   * @minLength 0
-   * @maxLength 64
-   */
-  parentMangaId: string;
-  idsOnMangaConnectors?: Record<string, string>;
-  /** @format int32 */
-  volumeNumber?: number | null;
-  /**
-   * @minLength 0
-   * @maxLength 10
-   */
-  chapterNumber: string;
-  /**
-   * @minLength 0
-   * @maxLength 256
-   */
-  title?: string | null;
-  /**
-   * @minLength 0
-   * @maxLength 256
-   */
-  fileName: string;
-  downloaded: boolean;
-  fullArchiveFilePath?: string | null;
-  key?: string | null;
-}
-
-export interface ChapterMangaConnectorId {
-  /**
-   * @minLength 0
-   * @maxLength 64
-   */
-  objId: string;
-  /**
-   * @minLength 0
-   * @maxLength 32
-   */
-  mangaConnectorName: string;
-  /**
-   * @minLength 0
-   * @maxLength 256
-   */
-  idOnConnectorSite: string;
-  /**
-   * @format uri
-   * @minLength 0
-   * @maxLength 512
-   */
-  websiteUrl?: string | null;
-  useForDownload?: boolean;
-  key?: string | null;
-}
-
-export interface FileLibrary {
-  /**
-   * @minLength 0
-   * @maxLength 256
-   */
-  basePath: string;
-  /**
-   * @minLength 0
-   * @maxLength 512
-   */
-  libraryName: string;
-  key?: string | null;
-}
-
-export interface GotifyRecord {
-  name?: string | null;
-  endpoint?: string | null;
-  appToken?: string | null;
-  /** @format int32 */
-  priority?: number;
-}
-
-export interface LibraryConnector {
-  libraryType: LibraryType;
-  /**
-   * @format uri
-   * @minLength 0
-   * @maxLength 256
-   */
-  baseUrl: string;
-  /**
-   * @minLength 0
-   * @maxLength 256
-   */
-  auth: string;
-  key?: string | null;
-}
-
-export interface Link {
-  /**
-   * @minLength 0
-   * @maxLength 64
-   */
-  linkProvider: string;
-  /**
-   * @format uri
-   * @minLength 0
-   * @maxLength 2048
-   */
-  linkUrl: string;
-  key?: string | null;
-}
-
-export interface Manga {
-  /**
-   * @minLength 0
-   * @maxLength 512
-   */
-  name: string;
-  /** @minLength 1 */
-  description: string;
-  releaseStatus: MangaReleaseStatus;
-  /**
-   * @minLength 0
-   * @maxLength 64
-   */
-  libraryId?: string | null;
-  authors?: Author[] | null;
-  mangaTags?: MangaTag[] | null;
-  links?: Link[] | null;
-  altTitles?: AltTitle[] | null;
-  /** @format float */
-  ignoreChaptersBefore: number;
-  /**
-   * @minLength 0
-   * @maxLength 1024
-   */
-  directoryName: string;
-  /** @format int32 */
-  year?: number | null;
-  /**
-   * @minLength 0
-   * @maxLength 8
-   */
-  originalLanguage?: string | null;
-  chapterIds?: string[] | null;
-  idsOnMangaConnectors?: Record<string, string>;
-  mangaConnectorIdsIds?: string[] | null;
-  key?: string | null;
-}
-
-export interface MangaConnector {
-  /**
-   * @minLength 0
-   * @maxLength 32
-   */
-  name: string;
-  /**
-   * @minLength 0
-   * @maxLength 8
-   */
-  supportedLanguages: string[];
-  /**
-   * @minLength 0
-   * @maxLength 2048
-   */
-  iconUrl: string;
-  /**
-   * @minLength 0
-   * @maxLength 256
-   */
-  baseUris: string[];
-  enabled: boolean;
-}
-
-export interface MangaMangaConnectorId {
-  /**
-   * @minLength 0
-   * @maxLength 64
-   */
-  objId: string;
-  /**
-   * @minLength 0
-   * @maxLength 32
-   */
-  mangaConnectorName: string;
-  /**
-   * @minLength 0
-   * @maxLength 256
-   */
-  idOnConnectorSite: string;
-  /**
-   * @format uri
-   * @minLength 0
-   * @maxLength 512
-   */
-  websiteUrl?: string | null;
-  useForDownload?: boolean;
-  key?: string | null;
-}
-
-export interface MangaTag {
-  /**
-   * @minLength 0
-   * @maxLength 64
-   */
-  tag: string;
-}
-
-export interface MetadataEntry {
-  mangaId?: string | null;
-  metadataFetcherName?: string | null;
-  identifier?: string | null;
-}
-
-export interface MetadataSearchResult {
-  identifier?: string | null;
-  name?: string | null;
-  url?: string | null;
-  description?: string | null;
-  coverUrl?: string | null;
-}
-
-export interface NotificationConnector {
-  /**
-   * @minLength 0
-   * @maxLength 64
-   */
-  name: string;
-  /**
-   * @format uri
-   * @minLength 0
-   * @maxLength 2048
-   */
-  url: string;
-  headers: Record<string, string>;
-  /**
-   * @minLength 0
-   * @maxLength 8
-   */
-  httpMethod: string;
-  /**
-   * @minLength 0
-   * @maxLength 4096
-   */
-  body: string;
-}
-
-export interface NtfyRecord {
-  name?: string | null;
-  endpoint?: string | null;
-  username?: string | null;
-  password?: string | null;
-  topic?: string | null;
-  /** @format int32 */
-  priority?: number;
-}
-
-export interface ProblemDetails {
-  type?: string | null;
-  title?: string | null;
-  /** @format int32 */
-  status?: number | null;
-  detail?: string | null;
-  instance?: string | null;
-  [key: string]: any;
-}
-
-export interface PushoverRecord {
-  name?: string | null;
-  appToken?: string | null;
-  user?: string | null;
-}
-
-export interface TrangaSettings {
-  downloadLocation?: string | null;
-  userAgent?: string | null;
-  /** @format int32 */
-  imageCompression?: number;
-  blackWhiteImages?: boolean;
-  flareSolverrUrl?: string | null;
-  /**
-   * Placeholders:
-   * %M Obj Name
-   * %V Volume
-   * %C Chapter
-   * %T Title
-   * %A Author (first in list)
-   * %I Chapter Internal ID
-   * %i Obj Internal ID
-   * %Y Year (Obj)
-   *
-   * ?_(...) replace _ with a value from above:
-   * Everything inside the braces will only be added if the value of %_ is not null
-   */
-  chapterNamingScheme?: string | null;
-  /** @format int32 */
-  workCycleTimeoutMs?: number;
-  requestLimits?: {
-    /** @format int32 */
-    Default?: number;
-    /** @format int32 */
-    MangaDexFeed?: number;
-    /** @format int32 */
-    MangaImage?: number;
-    /** @format int32 */
-    MangaCover?: number;
-    /** @format int32 */
-    MangaDexImage?: number;
-    /** @format int32 */
-    MangaInfo?: number;
-  } | null;
-  downloadLanguage?: string | null;
-}
--- a/tranga-website/src/apiClient/http-client.ts
+++ b/tranga-website/src/apiClient/http-client.ts
@@ -1,260 +0,0 @@
-/* eslint-disable */
-/* tslint:disable */
-// @ts-nocheck
-/*
- * ---------------------------------------------------------------
- * ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API        ##
- * ##                                                           ##
- * ## AUTHOR: acacode                                           ##
- * ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
- * ---------------------------------------------------------------
- */
-
-export type QueryParamsType = Record<string | number, any>;
-export type ResponseFormat = keyof Omit<Body, "body" | "bodyUsed">;
-
-export interface FullRequestParams extends Omit<RequestInit, "body"> {
-  /** set parameter to `true` for call `securityWorker` for this request */
-  secure?: boolean;
-  /** request path */
-  path: string;
-  /** content type of request body */
-  type?: ContentType;
-  /** query params */
-  query?: QueryParamsType;
-  /** format of response (i.e. response.json() -> format: "json") */
-  format?: ResponseFormat;
-  /** request body */
-  body?: unknown;
-  /** base url */
-  baseUrl?: string;
-  /** request cancellation token */
-  cancelToken?: CancelToken;
-}
-
-export type RequestParams = Omit<
-  FullRequestParams,
-  "body" | "method" | "query" | "path"
->;
-
-export interface ApiConfig<SecurityDataType = unknown> {
-  baseUrl?: string;
-  baseApiParams?: Omit<RequestParams, "baseUrl" | "cancelToken" | "signal">;
-  securityWorker?: (
-    securityData: SecurityDataType | null,
-  ) => Promise<RequestParams | void> | RequestParams | void;
-  customFetch?: typeof fetch;
-}
-
-export interface HttpResponse<D extends unknown, E extends unknown = unknown>
-  extends Response {
-  data: D;
-  error: E;
-}
-
-type CancelToken = Symbol | string | number;
-
-export enum ContentType {
-  Json = "application/json",
-  JsonApi = "application/vnd.api+json",
-  FormData = "multipart/form-data",
-  UrlEncoded = "application/x-www-form-urlencoded",
-  Text = "text/plain",
-}
-
-export class HttpClient<SecurityDataType = unknown> {
-  public baseUrl: string = "";
-  private securityData: SecurityDataType | null = null;
-  private securityWorker?: ApiConfig<SecurityDataType>["securityWorker"];
-  private abortControllers = new Map<CancelToken, AbortController>();
-  private customFetch = (...fetchParams: Parameters<typeof fetch>) =>
-    fetch(...fetchParams);
-
-  private baseApiParams: RequestParams = {
-    credentials: "same-origin",
-    headers: {},
-    redirect: "follow",
-    referrerPolicy: "no-referrer",
-  };
-
-  constructor(apiConfig: ApiConfig<SecurityDataType> = {}) {
-    Object.assign(this, apiConfig);
-  }
-
-  public setSecurityData = (data: SecurityDataType | null) => {
-    this.securityData = data;
-  };
-
-  protected encodeQueryParam(key: string, value: any) {
-    const encodedKey = encodeURIComponent(key);
-    return `${encodedKey}=${encodeURIComponent(typeof value === "number" ? value : `${value}`)}`;
-  }
-
-  protected addQueryParam(query: QueryParamsType, key: string) {
-    return this.encodeQueryParam(key, query[key]);
-  }
-
-  protected addArrayQueryParam(query: QueryParamsType, key: string) {
-    const value = query[key];
-    return value.map((v: any) => this.encodeQueryParam(key, v)).join("&");
-  }
-
-  protected toQueryString(rawQuery?: QueryParamsType): string {
-    const query = rawQuery || {};
-    const keys = Object.keys(query).filter(
-      (key) => "undefined" !== typeof query[key],
-    );
-    return keys
-      .map((key) =>
-        Array.isArray(query[key])
-          ? this.addArrayQueryParam(query, key)
-          : this.addQueryParam(query, key),
-      )
-      .join("&");
-  }
-
-  protected addQueryParams(rawQuery?: QueryParamsType): string {
-    const queryString = this.toQueryString(rawQuery);
-    return queryString ? `?${queryString}` : "";
-  }
-
-  private contentFormatters: Record<ContentType, (input: any) => any> = {
-    [ContentType.Json]: (input: any) =>
-      input !== null && (typeof input === "object" || typeof input === "string")
-        ? JSON.stringify(input)
-        : input,
-    [ContentType.JsonApi]: (input: any) =>
-      input !== null && (typeof input === "object" || typeof input === "string")
-        ? JSON.stringify(input)
-        : input,
-    [ContentType.Text]: (input: any) =>
-      input !== null && typeof input !== "string"
-        ? JSON.stringify(input)
-        : input,
-    [ContentType.FormData]: (input: any) =>
-      Object.keys(input || {}).reduce((formData, key) => {
-        const property = input[key];
-        formData.append(
-          key,
-          property instanceof Blob
-            ? property
-            : typeof property === "object" && property !== null
-              ? JSON.stringify(property)
-              : `${property}`,
-        );
-        return formData;
-      }, new FormData()),
-    [ContentType.UrlEncoded]: (input: any) => this.toQueryString(input),
-  };
-
-  protected mergeRequestParams(
-    params1: RequestParams,
-    params2?: RequestParams,
-  ): RequestParams {
-    return {
-      ...this.baseApiParams,
-      ...params1,
-      ...(params2 || {}),
-      headers: {
-        ...(this.baseApiParams.headers || {}),
-        ...(params1.headers || {}),
-        ...((params2 && params2.headers) || {}),
-      },
-    };
-  }
-
-  protected createAbortSignal = (
-    cancelToken: CancelToken,
-  ): AbortSignal | undefined => {
-    if (this.abortControllers.has(cancelToken)) {
-      const abortController = this.abortControllers.get(cancelToken);
-      if (abortController) {
-        return abortController.signal;
-      }
-      return void 0;
-    }
-
-    const abortController = new AbortController();
-    this.abortControllers.set(cancelToken, abortController);
-    return abortController.signal;
-  };
-
-  public abortRequest = (cancelToken: CancelToken) => {
-    const abortController = this.abortControllers.get(cancelToken);
-
-    if (abortController) {
-      abortController.abort();
-      this.abortControllers.delete(cancelToken);
-    }
-  };
-
-  public request = async <T = any, E = any>({
-    body,
-    secure,
-    path,
-    type,
-    query,
-    format,
-    baseUrl,
-    cancelToken,
-    ...params
-  }: FullRequestParams): Promise<HttpResponse<T, E>> => {
-    const secureParams =
-      ((typeof secure === "boolean" ? secure : this.baseApiParams.secure) &&
-        this.securityWorker &&
-        (await this.securityWorker(this.securityData))) ||
-      {};
-    const requestParams = this.mergeRequestParams(params, secureParams);
-    const queryString = query && this.toQueryString(query);
-    const payloadFormatter = this.contentFormatters[type || ContentType.Json];
-    const responseFormat = format || requestParams.format;
-
-    return this.customFetch(
-      `${baseUrl || this.baseUrl || ""}${path}${queryString ? `?${queryString}` : ""}`,
-      {
-        ...requestParams,
-        headers: {
-          ...(requestParams.headers || {}),
-          ...(type && type !== ContentType.FormData
-            ? { "Content-Type": type }
-            : {}),
-        },
-        signal:
-          (cancelToken
-            ? this.createAbortSignal(cancelToken)
-            : requestParams.signal) || null,
-        body:
-          typeof body === "undefined" || body === null
-            ? null
-            : payloadFormatter(body),
-      },
-    ).then(async (response) => {
-      const r = response.clone() as HttpResponse<T, E>;
-      r.data = null as unknown as T;
-      r.error = null as unknown as E;
-
-      const data = !responseFormat
-        ? r
-        : await response[responseFormat]()
-            .then((data) => {
-              if (r.ok) {
-                r.data = data;
-              } else {
-                r.error = data;
-              }
-              return r;
-            })
-            .catch((e) => {
-              r.error = e;
-              return r;
-            });
-
-      if (cancelToken) {
-        this.abortControllers.delete(cancelToken);
-      }
-
-      if (!response.ok) throw data;
-      return data;
-    });
-  };
-}
--- a/tranga-website/src/contexts/ApiContext.tsx
+++ b/tranga-website/src/contexts/ApiContext.tsx
@@ -0,0 +1,20 @@
+import { V2 } from '../api/V2.ts';
+import { createContext, ReactNode, useEffect, useState } from 'react';
+import { ApiConfig } from '../api/http-client.ts';
+
+export const ApiContext = createContext<V2>(new V2());
+
+export default function ApiProvider({
+    apiConfig,
+    children,
+}: {
+    apiConfig: ApiConfig;
+    children: ReactNode;
+}) {
+    const [api, setApi] = useState<V2>(new V2(apiConfig));
+    useEffect(() => {
+        setApi(new V2(apiConfig));
+    }, [apiConfig]);
+
+    return <ApiContext value={api}>{children}</ApiContext>;
+}
--- a/tranga-website/src/contexts/FileLibraryContext.tsx
+++ b/tranga-website/src/contexts/FileLibraryContext.tsx
@@ -0,0 +1,21 @@
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+import { FileLibrary } from '../api/data-contracts.ts';
+import { ApiContext } from './ApiContext.tsx';
+
+export const FileLibraryContext = createContext<FileLibrary[]>([]);
+
+export default function LibraryProvider({ children }: { children: ReactNode }): ReactNode {
+    const Api = useContext(ApiContext);
+
+    const [state, setState] = useState<FileLibrary[]>([]);
+
+    useEffect(() => {
+        Api.fileLibraryList().then((result) => {
+            if (result.ok) {
+                setState(result.data);
+            }
+        });
+    }, [Api]);
+
+    return <FileLibraryContext value={state}>{children}</FileLibraryContext>;
+}
--- a/tranga-website/src/contexts/MangaConnectorContext.tsx
+++ b/tranga-website/src/contexts/MangaConnectorContext.tsx
@@ -0,0 +1,21 @@
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+import { MangaConnector } from '../api/data-contracts.ts';
+import { ApiContext } from './ApiContext.tsx';
+
+export const MangaConnectorContext = createContext<MangaConnector[]>([]);
+
+export default function MangaConnectorProvider({ children }: { children: ReactNode }) {
+    const Api = useContext(ApiContext);
+
+    const [state, setState] = useState<MangaConnector[]>([]);
+
+    useEffect(() => {
+        Api.mangaConnectorList().then((result) => {
+            if (result.ok) {
+                setState(result.data);
+            }
+        });
+    }, [Api]);
+
+    return <MangaConnectorContext value={state}>{children}</MangaConnectorContext>;
+}
--- a/tranga-website/src/contexts/MangaContext.tsx
+++ b/tranga-website/src/contexts/MangaContext.tsx
@@ -0,0 +1,37 @@
+import { createContext, ReactNode, useContext } from 'react';
+import { ApiContext } from './ApiContext.tsx';
+import { Manga } from '../api/data-contracts.ts';
+import { V2 } from '../api/V2.ts';
+
+export const MangaContext = createContext<M>({ GetManga: () => Promise.reject() });
+const manga: Map<string, Manga> = new Map();
+const promises: Map<string, Promise<Manga | undefined>> = new Map();
+
+export default function MangaProvider({ children }: { children: ReactNode }) {
+    const Api = useContext(ApiContext);
+
+    return <MangaContext value={{ GetManga: (k) => getManga(k, Api) }}>{children}</MangaContext>;
+}
+
+function getManga(key: string, Api: V2): Promise<Manga | undefined> {
+    if (manga.has(key)) return Promise.resolve(manga.get(key));
+
+    if (promises.has(key)) return promises.get(key)!;
+
+    const newPromise = Api.mangaDetail(key)
+        .then((data) => {
+            if (data.ok) {
+                manga.set(key, data.data);
+                return data.data;
+            } else return undefined;
+        })
+        .catch(() => {
+            return undefined;
+        });
+    promises.set(key, newPromise);
+    return newPromise;
+}
+
+export interface M {
+    GetManga(key: string): Promise<Manga | undefined>;
+}
--- a/tranga-website/src/main.tsx
+++ b/tranga-website/src/main.tsx
@@ -1,12 +1,12 @@
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-// @ts-ignore
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import { App } from './App.tsx';
+// @ts-expect-error font
 import '@fontsource/inter';
 import { CssVarsProvider } from '@mui/joy/styles';
 import CssBaseline from '@mui/joy/CssBaseline';
-import {StrictMode} from "react";
-import {trangaTheme} from "./theme.ts";
+import { StrictMode } from 'react';
+import { trangaTheme } from './theme.ts';

 export default function MyApp() {
    return (
@@ -22,8 +22,4 @@ export default function MyApp() {
    );
 }

-
-
-createRoot(document.getElementById('root')!).render(
-    <MyApp />
-);
+createRoot(document.getElementById('root')!).render(<MyApp />);
--- a/tranga-website/src/theme.ts
+++ b/tranga-website/src/theme.ts
@@ -1,88 +1,85 @@
 import { extendTheme } from '@mui/joy/styles';

-
 export const trangaTheme = extendTheme({
-    "colorSchemes": {
-        "light": {
-            "palette": {
-                "primary": {
-                    "50": "#FCE5EA",
-                    "100": "#FBDDE3",
-                    "200": "#F9CBD4",
-                    "300": "#F7BAC6",
-                    "400": "#F5A9B8",
-                    "500": "#F5A9B8",
-                    "600": "#C48793",
-                    "700": "#AC7681",
-                    "800": "#93656E",
-                    "900": "#7B555C"
+    colorSchemes: {
+        light: {
+            palette: {
+                primary: {
+                    '50': '#FCE5EA',
+                    '100': '#FBDDE3',
+                    '200': '#F9CBD4',
+                    '300': '#F7BAC6',
+                    '400': '#F5A9B8',
+                    '500': '#F5A9B8',
+                    '600': '#C48793',
+                    '700': '#AC7681',
+                    '800': '#93656E',
+                    '900': '#7B555C',
                },
-                "neutral": {
-                    "50": "#E6E6E6",
-                    "100": "#CCCCCC",
-                    "200": "#B3B3B3",
-                    "300": "#999999",
-                    "400": "#808080",
-                    "500": "#666666",
-                    "600": "#4C4C4C",
-                    "700": "#333333",
-                    "800": "#191919",
-                    "900": "#000",
-                    "plainColor": "var(--joy-palette-neutral-50)",
-                    "plainHoverBg": "var(--joy-palette-neutral-700)",
-                    "outlinedColor": "var(--joy-palette-neutral-50)",
+                neutral: {
+                    '50': '#E6E6E6',
+                    '100': '#CCCCCC',
+                    '200': '#B3B3B3',
+                    '300': '#999999',
+                    '400': '#808080',
+                    '500': '#666666',
+                    '600': '#4C4C4C',
+                    '700': '#333333',
+                    '800': '#191919',
+                    '900': '#000',
+                    plainColor: 'var(--joy-palette-neutral-50)',
+                    plainHoverBg: 'var(--joy-palette-neutral-700)',
+                    outlinedColor: 'var(--joy-palette-neutral-50)',
                },
-                "success": {
-                    "50": "#cef0fe",
-                    "100": "#bdebfd",
-                    "200": "#9de2fc",
-                    "300": "#7cd8fb",
-                    "400": "#5bcefa",
-                    "500": "#5bcefa",
-                    "600": "#49a5c8",
-                    "700": "#4090af",
-                    "800": "#2e677d",
-                    "900": "#245264"
+                success: {
+                    '50': '#cef0fe',
+                    '100': '#bdebfd',
+                    '200': '#9de2fc',
+                    '300': '#7cd8fb',
+                    '400': '#5bcefa',
+                    '500': '#5bcefa',
+                    '600': '#49a5c8',
+                    '700': '#4090af',
+                    '800': '#2e677d',
+                    '900': '#245264',
                },
-                "danger": {
-                    "50": "#f2c0b3",
-                    "100": "#ea9680",
-                    "200": "#e68166",
-                    "300": "#dd5733",
-                    "400": "#d52d00",
-                    "500": "#d52d00",
-                    "600": "#aa2400",
-                    "700": "#951f00",
-                    "800": "#6b1700",
-                    "900": "#400d00"
+                danger: {
+                    '50': '#f2c0b3',
+                    '100': '#ea9680',
+                    '200': '#e68166',
+                    '300': '#dd5733',
+                    '400': '#d52d00',
+                    '500': '#d52d00',
+                    '600': '#aa2400',
+                    '700': '#951f00',
+                    '800': '#6b1700',
+                    '900': '#400d00',
                },
-                "warning": {
-                    "50": "#ffebdd",
-                    "100": "#ffd7bb",
-                    "200": "#ffc29a",
-                    "300": "#ffae78",
-                    "400": "#ff9a56",
-                    "500": "#ff9a56",
-                    "600": "#cc7b45",
-                    "700": "#995c34",
-                    "800": "#663e22",
-                    "900": "#331f11"
+                warning: {
+                    '50': '#ffebdd',
+                    '100': '#ffd7bb',
+                    '200': '#ffc29a',
+                    '300': '#ffae78',
+                    '400': '#ff9a56',
+                    '500': '#ff9a56',
+                    '600': '#cc7b45',
+                    '700': '#995c34',
+                    '800': '#663e22',
+                    '900': '#331f11',
                },
-                "background": {
-                    "body": "var(--joy-palette-neutral-900)",
-                    "surface": "var(--joy-palette-neutral-900)",
-                    "popup": "var(--joy-palette-neutral-800)"
+                background: {
+                    body: 'var(--joy-palette-neutral-900)',
+                    surface: 'var(--joy-palette-neutral-900)',
+                    popup: 'var(--joy-palette-neutral-800)',
                },
-                "text": {
-                    "primary": "var(--joy-palette-neutral-50)",
-                    "secondary": "var(--joy-palette-success-200)",
-                    "tertiary": "var(--joy-palette-primary-200)",
-                    "icon": "var(--joy-palette-primary-50)"
-                }
-            }
+                text: {
+                    primary: 'var(--joy-palette-neutral-50)',
+                    secondary: 'var(--joy-palette-success-200)',
+                    tertiary: 'var(--joy-palette-primary-200)',
+                    icon: 'var(--joy-palette-primary-50)',
+                },
+            },
        },
-        "dark": {
-            "palette": {}
-        }
-    }
-})
+        dark: { palette: {} },
+    },
+});
--- a/tranga-website/tsconfig.app.json
+++ b/tranga-website/tsconfig.app.json
@@ -1,26 +1,26 @@
 {
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
+    "compilerOptions": {
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "module": "ESNext",
+        "skipLibCheck": true,

-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+        "jsx": "react-jsx",

-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": ["src"]
 }
--- a/tranga-website/tsconfig.json
+++ b/tranga-website/tsconfig.json
@@ -1,7 +1,4 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+    "files": [],
+    "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
 }
--- a/tranga-website/tsconfig.node.json
+++ b/tranga-website/tsconfig.node.json
@@ -1,24 +1,24 @@
 {
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
+    "compilerOptions": {
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+        "target": "ES2022",
+        "lib": ["ES2023"],
+        "module": "ESNext",
+        "skipLibCheck": true,

-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,

-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": ["vite.config.ts"]
 }
--- a/tranga-website/vite.config.ts
+++ b/tranga-website/vite.config.ts
@@ -1,10 +1,5 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';

 // https://vite.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    host: '127.0.0.1',
-  }
-})
+export default defineConfig({ plugins: [react()], server: { host: '127.0.0.1' } });
Author	SHA1	Message	Date
glax	4c6dfe22d1	License and Readme	2025-09-06 17:34:02 +02:00
glax	f84ffd5e23	Update endpoints	2025-09-06 17:11:37 +02:00
glax	0a65d21730	Server v2 is cuttingedge	2025-09-06 16:12:29 +02:00
glax	58a5e65772	request resized versions of covers to save bandwidth	2025-09-05 20:36:58 +02:00
glax	fad3a7f07e	build the thing even if it isnt working!	2025-09-05 17:45:17 +02:00
glax	59082187a6	Add LibrarySection	2025-09-05 17:15:36 +02:00
glax	c625e3dede	Add ChaptersSection to Manga, add TCheckbox and rework other custom components	2025-09-05 17:07:51 +02:00
glax	e2926cddbc	Manga Remove button	2025-09-05 16:31:16 +02:00
glax	c6e667d429	Move Download Accordion to separate File	2025-09-05 16:24:28 +02:00
glax	5070e76480	Less steps to download	2025-09-05 16:15:18 +02:00
glax	e5186bf72d	prettier new config	2025-09-05 00:59:55 +02:00
glax	097e991aec	prettier	2025-09-05 00:47:42 +02:00
glax	26ff7a7cea	Release Status in MangaCard Badge	2025-09-05 00:47:12 +02:00
glax	9aca50aa15	FileLibrary selection in download dialog	2025-09-04 23:02:53 +02:00
glax	19920fb507	lint and prettier	2025-09-04 21:48:05 +02:00
glax	81bde5c099	Download Dialog	2025-09-04 21:46:39 +02:00
glax	75f66c791d	MangaDetail	2025-09-04 20:51:00 +02:00
glax	48b0d216fa	Make ConnectorIcons circular	2025-09-04 19:55:11 +02:00
glax	e5c51908c4	Fix loading for all TInputs	2025-09-04 19:48:43 +02:00
glax	b90a880327	Search empty values when reopening	2025-09-04 19:20:04 +02:00
glax	48cf2423d1	Fix MangaConnector Badge	2025-09-04 19:16:17 +02:00
glax	ae710bb367	Fix Covers for MangaCard	2025-09-04 19:13:38 +02:00
glax	ec694279e0	Custom loadanimations for custom components	2025-09-04 19:13:29 +02:00
glax	22e3ec7929	Rebuild with custom components	2025-09-03 20:48:50 +02:00
glax	63618d15f4	lint and prettier	2025-09-02 01:08:47 +02:00
glax	dcace859a4	remove unsupported architectures from backend.	2025-09-02 00:59:12 +02:00
glax	d6fd500962	fix workflow	2025-09-02 00:48:02 +02:00
glax	9846ffb789	Use new API layout with MinimalManga	2025-09-02 00:46:57 +02:00
glax	2f07cc61fe	ignore errors in api	2025-09-01 23:08:23 +02:00
glax	ed878094c8	Fix merge	2025-09-01 23:07:43 +02:00
glax	2338917286	Add workflow	2025-09-01 23:04:31 +02:00
glax	29e67f8754	Merge remote-tracking branch 'origin/updated-endpoints' into updated-endpoints # Conflicts: # tranga-website/package-lock.json # tranga-website/src/Components/Mangas/MangaList.css # tranga-website/src/Components/Search.tsx # tranga-website/src/Components/Settings/ChapterNamingScheme.tsx # tranga-website/src/Components/Settings/DownloadLanguage.tsx # tranga-website/src/Components/Settings/FlareSolverr.tsx # tranga-website/src/Components/Settings/ImageCompression.tsx # tranga-website/src/Components/Settings/Maintenance.tsx # tranga-website/src/Components/Settings/NotificationConnectors.tsx # tranga-website/src/Components/Settings/NotificationConnectors/AddNotificationConnector.tsx # tranga-website/src/Components/Settings/Settings.tsx	2025-09-01 23:02:53 +02:00
glax	7c1d9125ba	Add Workers Drawer	2025-09-01 21:50:38 +02:00
glax	2019a11e93	run prettier after fetching api	2025-09-01 21:17:58 +02:00
glax	14e822ec5f	install prettier	2025-09-01 21:07:40 +02:00
glax	e4b56e0559	Fix badge overflow	2025-09-01 21:03:10 +02:00