License and Readme

# 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

.github/workflows/docker-image-cuttingedge.yml

@@ -17,12 +17,12 @@ jobs:
 
       # https://github.com/docker/setup-qemu-action#usage
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.2.0
+        uses: docker/setup-qemu-action@v3.6.0
 
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3.6.1
+        uses: docker/setup-buildx-action@v3.11.1
       
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -33,12 +33,12 @@ jobs:
       
       # https://github.com/docker/build-push-action#multi-platform-image
       - name: Build and push Website
-        uses: docker/build-push-action@v6.7.0
+        uses: docker/build-push-action@v6.18.0
         with:
-          context: ./Website
+          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/amd64/v2,linux/amd64/v3,linux/arm64,linux/arm/v7
-          platforms: linux/amd64
+          platforms: linux/amd64,linux/amd64/v2,linux/amd64/v3,linux/arm64,linux/arm/v7
           pull: true
           push: true
           tags: |

.github/workflows/docker-image-master.yml

@@ -17,12 +17,12 @@ jobs:
 
       # https://github.com/docker/setup-qemu-action#usage
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.2.0
+        uses: docker/setup-qemu-action@v3.6.0
 
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3.6.1
+        uses: docker/setup-buildx-action@v3.11.1
       
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -33,12 +33,12 @@ jobs:
       
       # https://github.com/docker/build-push-action#multi-platform-image
       - name: Build and push Website
-        uses: docker/build-push-action@v6.7.0
+        uses: docker/build-push-action@v6.18.0
         with:
-          context: ./Website
+          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
+          platforms: linux/amd64,linux/arm64
           pull: true
           push: true
           tags: |

.github/workflows/docker-image-testing.yml

@@ -2,7 +2,7 @@ name: Docker Image CI
 
 on:
   push:
-    branches: [ "vite-react-ts" ]
+    branches: [ "testing" ]
   workflow_dispatch:
 
 jobs:
@@ -17,12 +17,12 @@ jobs:
 
       # https://github.com/docker/setup-qemu-action#usage
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.2.0
+        uses: docker/setup-qemu-action@v3.6.0
 
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3.6.1
+        uses: docker/setup-buildx-action@v3.11.1
       
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -33,13 +33,13 @@ jobs:
       
       # https://github.com/docker/build-push-action#multi-platform-image
       - name: Build and push Website
-        uses: docker/build-push-action@v6.7.0
+        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/amd64/v2,linux/amd64/v3,linux/arm64,linux/arm/v7
-          platforms: linux/amd64
+          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

LICENSE.txt

@@ -1,674 +1,4 @@
-                    GNU GENERAL PUBLIC LICENSE
+Tranga-Website
-                       Version 3, 29 June 2007
+Web-Frontend for Tranga https://github.com/C9Glax/tranga
-
+Copyright (C) 2025 C9Glax
- Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+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/>.
- 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>.

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>
+      <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-vite-react-ts.yml%2Fruns%3Fper_page%3D1&query=workflow_runs%5B0%5D.created_at&label=Last%20Run"></td>
+      <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)
+| ![Main Page](Screenshots/Overview.png) | ![Search](Screenshots/Search%20Modal.png) | ![Manga Detail](Screenshots/Manga%20Detail.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)
+| Overview                               | Search Dialog                             | Manga Detail                                    |
 
 ## About The Project
 

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
+}

tranga-website/README.md

@@ -28,15 +28,15 @@ export default tseslint.config({
             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 reactX from 'eslint-plugin-react-x';
-import reactDom from 'eslint-plugin-react-dom'
+import reactDom from 'eslint-plugin-react-dom';
 
 export default tseslint.config({
     plugins: {
@@ -50,5 +50,5 @@ export default tseslint.config({
         ...reactX.configs['recommended-typescript'].rules,
         ...reactDom.configs.recommended.rules,
     },
-})
+});
 ```

tranga-website/eslint.config.js

@@ -1,28 +1,19 @@
-import js from '@eslint/js'
+import js from '@eslint/js';
-import globals from 'globals'
+import globals from 'globals';
-import reactHooks from 'eslint-plugin-react-hooks'
+import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh'
+import reactRefresh from 'eslint-plugin-react-refresh';
-import tseslint from 'typescript-eslint'
+import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
     { ignores: ['dist'] },
     {
         extends: [js.configs.recommended, ...tseslint.configs.recommended],
         files: ['**/*.{ts,tsx}'],
-    languageOptions: {
+        languageOptions: { ecmaVersion: 2020, globals: globals.browser },
-      ecmaVersion: 2020,
+        plugins: { 'react-hooks': reactHooks, 'react-refresh': reactRefresh },
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
         rules: {
             ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
+            'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
-        'warn',
-        { allowConstantExport: true },
-      ],
         },
-  },
+    }
-)
+);

tranga-website/index.html

@@ -2,12 +2,19 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/blahaj.png" />
+        <link
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            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>
+        <script
+            type="module"
+            src="/src/main.tsx"></script>
     </body>
 </html>

tranga-website/package.json

@@ -6,8 +6,10 @@
     "scripts": {
         "dev": "vite",
         "build": "tsc -b && vite build",
-    "lint": "eslint .",
+        "lint": "eslint . --fix",
-    "preview": "vite preview"
+        "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",
@@ -28,6 +30,8 @@
         "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"

tranga-website/src/App.css

@@ -8,8 +8,6 @@
 
 .app-content {
     position: absolute;
-  height: calc(100% - 60px);
-  top: 60px;
     width: 100%;
     left: 0;
 }

tranga-website/src/App.tsx

@@ -1,107 +1,84 @@
 import Sheet from '@mui/joy/Sheet';
-import './App.css'
+import Header from './Header.tsx';
-import Settings from "./Settings.tsx";
+import Settings from './Components/Settings/Settings.tsx';
-import Header from "./Header.tsx";
+import ApiProvider, { ApiContext } from './contexts/ApiContext.tsx';
-import {Badge, Button} from "@mui/joy";
+import { useContext, useEffect, useState } from 'react';
-import {useEffect, useState} from "react";
+import { ApiConfig } from './api/http-client.ts';
-import {ApiUriContext} from "./api/fetchApi.tsx";
+import MangaProvider from './contexts/MangaContext.tsx';
-import Search from './Components/Search.tsx';
+import MangaList from './Components/Mangas/MangaList.tsx';
-import MangaList from "./Components/MangaList.tsx";
+import { Search } from './Search.tsx';
-import {MangaConnectorContext} from "./api/Contexts/MangaConnectorContext.tsx";
+import MangaConnectorProvider from './contexts/MangaConnectorContext.tsx';
-import IMangaConnector from "./api/types/IMangaConnector.ts";
+import LibraryProvider from './contexts/FileLibraryContext.tsx';
-import {GetAllConnectors} from "./api/MangaConnector.tsx";
+import MangaDetail from './Components/Mangas/Detail/MangaDetail.tsx';
-import JobsDrawer from "./Components/Jobs.tsx";
+import TButton from './Components/Inputs/TButton.tsx';
-import {MangaContext} from "./api/Contexts/MangaContext.tsx";
-import IManga from "./api/types/IManga.ts";
-import {GetMangaById} from "./api/Manga.tsx";
-import IChapter from "./api/types/IChapter.ts";
-import {GetChapterFromId} from "./api/Chapter.tsx";
-import {ChapterContext} from "./api/Contexts/ChapterContext.tsx";
-
-export default function App () {
-
-    const [showSettings, setShowSettings] = useState<boolean>(false);
-    const [showSearch, setShowSearch] = useState<boolean>(false);
-    const [showJobs, setShowJobs] = useState<boolean>(false);
-    const [apiConnected, setApiConnected] = useState<boolean>(false);
-
-    const apiUriStr = localStorage.getItem("apiUri") ?? window.location.href.substring(0, window.location.href.lastIndexOf("/"));
-
-    const [apiUri, setApiUri] = useState<string>(apiUriStr);
-    const [mangas, setMangas] = useState<IManga[]>([]);
-    const [chapters, setChapters] = useState<IChapter[]>([]);
 
+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(() => {
-        localStorage.setItem("apiUri", apiUri);
+        setApiConfig({ baseUrl: apiUri });
     }, [apiUri]);
 
-    const [mangaPromises, setMangaPromises] = useState(new Map<string, Promise<IManga | undefined>>());
+    const Api = useContext(ApiContext);
-    const GetManga = (mangaId: string) : Promise<IManga | undefined> => {
-        const promise = mangaPromises.get(mangaId);
-        if(promise) return promise;
-        const p = new Promise<IManga | undefined>((resolve, reject) => {
-            let ret = mangas?.find(m => m.mangaId == mangaId);
-            if (ret) resolve(ret);
 
-            console.log(`Fetching manga ${mangaId}`);
+    const [searchOpen, setSearchOpen] = useState<boolean>(false);
-            GetMangaById(apiUri, mangaId).then(manga => {
+    const [downloadDrawerOpen, setDownloadDrawerOpen] = useState(false);
-                if(manga && mangas?.find(m => m.mangaId == mangaId) === undefined)
+    const [selectedMangaKey, setSelectedMangaKey] = useState<string>();
-                    setMangas([...mangas, manga]);
+    const [downloadSectionOpen, setDownloadSectionOpen] = useState(false);
-                resolve(manga);
+
-            }).catch(reject);
+    function openMangaDownloadDrawer(mangaKey: string, downloadSectionOpen?: boolean) {
-        });
+        setDownloadDrawerOpen(true);
-        setMangaPromises(mangaPromises.set(mangaId, p));
+        setSelectedMangaKey(mangaKey);
-        return p;
+        setDownloadSectionOpen(downloadSectionOpen ?? false);
     }
 
-    const [chapterPromises, setChapterPromises] = useState(new Map<string, Promise<IChapter | undefined>>());
+    const removeManga = async (mangaKey?: string): Promise<void> => {
-    const GetChapter = (chapterId: string) : Promise<IChapter | undefined> => {
+        if (!mangaKey) return Promise.reject();
-        const promise = chapterPromises.get(chapterId);
+        try {
-        if(promise) return promise;
+            let r = await Api.mangaDelete(mangaKey);
-        const p = new Promise<IChapter | undefined>((resolve, reject) => {
+            if (r.ok) return Promise.resolve();
-            let ret = chapters?.find(c => c.chapterId == chapterId);
+            else return Promise.reject();
-            if (ret) resolve(ret);
+        } catch (reason) {
-
+            return await Promise.reject(reason);
-            console.log(`Fetching chapter ${chapterId}`);
-            GetChapterFromId(apiUri, chapterId).then(chapter => {
-                if(chapter && chapters?.find(c => c.chapterId == chapterId) === undefined)
-                    setChapters([...chapters, chapter]);
-                resolve(chapter);
-            }).catch(reject);
-        });
-        setChapterPromises(chapterPromises.set(chapterId, p));
-        return p;
         }
-
+    };
-    const [mangaConnectors, setMangaConnectors] = useState<IMangaConnector[]>([]);
-
-    useEffect(() => {
-        if(!apiConnected) return;
-        GetAllConnectors(apiUri).then(setMangaConnectors);
-    }, [apiConnected]);
 
     return (
-        <ApiUriContext.Provider value={apiUri}>
+        <ApiProvider apiConfig={apiConfig}>
-            <MangaConnectorContext.Provider value={mangaConnectors}>
+            <MangaConnectorProvider>
-                <MangaContext.Provider value={{mangas, GetManga}}>
+                <LibraryProvider>
-                    <ChapterContext.Provider value={{chapters, GetChapter}}>
+                    <MangaProvider>
-                        <Sheet className={"app"}>
+                        <Sheet className={'app'}>
                             <Header>
-                                <Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}>
+                                <Settings setApiUri={setApiUri} />
-                                    <Button onClick={() => setShowSettings(true)}>Settings</Button>
-                                </Badge>
-                                <Button onClick={() => setShowJobs(true)}>Jobs</Button>
                             </Header>
-                            <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
+                            <Sheet className={'app-content'}>
-                            <Search open={showSearch} setOpen={setShowSearch} />
+                                <MangaList
-                            <JobsDrawer open={showJobs} connected={apiConnected} setOpen={setShowJobs} />
+                                    mangaOnClick={(m) => openMangaDownloadDrawer(m.key)}
-                            <Sheet className={"app-content"}>
+                                    openSearch={() => setSearchOpen(true)}
-                                <MangaList connected={apiConnected} setShowSearch={setShowSearch} />
+                                />
+                                <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>
-                    </ChapterContext.Provider>
+                    </MangaProvider>
-                </MangaContext.Provider>
+                </LibraryProvider>
-            </MangaConnectorContext.Provider>
+            </MangaConnectorProvider>
-        </ApiUriContext.Provider>
+        </ApiProvider>
     );
 }

tranga-website/src/Components/Chapter.tsx

@@ -1,49 +0,0 @@
-import React, {ReactElement, useContext, useState} from "react";
-import IChapter from "../api/types/IChapter.ts";
-import {Box, Chip, Link, Stack, Typography} from "@mui/joy";
-import {MangaFromId} from "./Manga.tsx";
-import {ChapterContext} from "../api/Contexts/ChapterContext.tsx";
-import Drawer from "@mui/joy/Drawer";
-import ModalClose from "@mui/joy/ModalClose";
-
-export function ChapterPopupFromId({chapterId, open, setOpen, children}: { chapterId: string | null, open: boolean, setOpen: React.Dispatch<React.SetStateAction<boolean>>, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }) {
-    return (
-        <Drawer open={open} onClose={() => setOpen(false)}>
-            <ModalClose />
-            {
-                chapterId !== null ?
-                    <ChapterFromId chapterId={chapterId}>{children}</ChapterFromId>
-                    : null
-            }
-        </Drawer>
-    )
-}
-
-export function ChapterFromId({chapterId, children} : { chapterId: string, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
-    const chapterContext = useContext(ChapterContext);
-
-    const [chapter, setChapter] = useState<IChapter | undefined>(undefined);
-    chapterContext.GetChapter(chapterId).then(setChapter);
-
-    return (
-        chapter === undefined ?
-                null
-            :
-            <Chapter chapter={chapter}>{children}</Chapter>
-    );
-}
-
-export function Chapter({chapter, children} : { chapter: IChapter, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
-    return (
-        <Stack direction={"row"}>
-            <MangaFromId mangaId={chapter.parentMangaId} />
-            <Box>
-                <Link level={"title-lg"} href={chapter.url}>{chapter.title}</Link>
-                <Typography>Volume <Chip>{chapter.volumeNumber}</Chip></Typography>
-                <Typography>Chapter <Chip>{chapter.chapterNumber}</Chip></Typography>
-                <Typography>Title <Chip>{chapter.title}</Chip></Typography>
-            </Box>
-            {children}
-        </Stack>
-    );
-}

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>;
+}

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>;
+}

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>;
+}

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;
+}

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);
+}

tranga-website/src/Components/Jobs.tsx

@@ -1,158 +0,0 @@
-import {
-    Button,
-    DialogContent, DialogTitle,
-    Drawer,
-    Input,
-    Option,
-    Select,
-    Stack,
-    Table,
-    Typography
-} from "@mui/joy";
-import {GetJobsInState, GetJobsOfTypeAndWithState, GetJobsWithType} from "../api/Job.tsx";
-import * as React from "react";
-import {useCallback, useContext, useEffect, useState} from "react";
-import {ApiUriContext} from "../api/fetchApi.tsx";
-import IJob, {JobState, JobType} from "../api/types/Jobs/IJob.ts";
-import ModalClose from "@mui/joy/ModalClose";
-import {MangaPopupFromId} from "./MangaPopup.tsx";
-import IJobWithMangaId from "../api/types/Jobs/IJobWithMangaId.ts";
-import {ChapterPopupFromId} from "./Chapter.tsx";
-import IJobWithChapterId from "../api/types/Jobs/IJobWithChapterId.tsx";
-
-export default function JobsDrawer({open, connected, setOpen} : {open: boolean, connected: boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>}) {
-    const apiUri = useContext(ApiUriContext);
-
-    const [allJobs, setAllJobs] = useState<IJob[]>([]);
-
-    const [filterState, setFilterState] = useState<string|null>(null);
-    const [filterType, setFilterType] = useState<string|null>(null);
-
-    const pageSize = 10;
-    const [page, setPage] = useState(1);
-
-    const updateDisplayJobs = useCallback(() => {
-        if(!connected)
-            return;
-        if (filterState === null && filterType === null)
-            setAllJobs([]);
-        else if (filterState === null && filterType != null)
-            GetJobsWithType(apiUri, filterType as unknown as JobType).then(setAllJobs);
-        else if (filterState != null && filterType === null)
-            GetJobsInState(apiUri, filterState as unknown as JobState).then(setAllJobs);
-        else if (filterState != null && filterType != null)
-            GetJobsOfTypeAndWithState(apiUri, filterType as unknown as JobType, filterState as unknown as JobState).then(setAllJobs);
-    }, [connected, filterType, filterState]);
-    
-    const timerRef = React.useRef<ReturnType<typeof setInterval>>(undefined);
-    useEffect(() => {
-        clearTimeout(timerRef.current);
-        updateDisplayJobs();
-        timerRef.current = setInterval(updateDisplayJobs, 2000);
-    }, [filterState, filterType]);
-
-    useEffect(() => {
-        if (!open || !connected)
-            clearTimeout(timerRef.current);
-    }, [open, connected]);
-
-    const handleChangeState = (
-        _: React.SyntheticEvent | null,
-        newValue: string | null,
-    ) => {
-        setFilterState(newValue);
-        setPage(1);
-    };
-    
-    const handleChangeType = (
-        _: React.SyntheticEvent | null,
-        newValue: string | null,
-    ) => {
-        setFilterType(newValue);
-        setPage(1);
-    };
-    
-    const [mangaPopupOpen, setMangaPopupOpen] = React.useState(false);
-    const [selectedMangaId, setSelectedMangaId] = useState<string | null>(null);
-    const OpenMangaPopupDrawer = (mangaId: string) => {
-        setSelectedMangaId(mangaId);
-        setMangaPopupOpen(true);
-    }
-    
-    const [chapterPopupOpen, setChapterPopupOpen] = React.useState(false);
-    const [selectedChapterId, setSelectedChapterId] = React.useState<string | null>(null);
-    const OpenChapterPopupDrawer = (chapterId: string) => {
-        setSelectedChapterId(chapterId);
-        setChapterPopupOpen(true);
-    }
-
-    return (
-        <Drawer size={"lg"} anchor={"left"} open={open} onClose={() => setOpen(false)}>
-            <ModalClose />
-            <DialogTitle><Typography level={"h2"}>Jobs</Typography></DialogTitle>
-            <Stack direction={"row"} spacing={2}>
-                <Select placeholder={"State"} value={filterState} onChange={handleChangeState} startDecorator={
-                    <Typography>State</Typography>
-                }>
-                    <Option value={null}>None</Option>
-                    {Object.keys(JobState).map((state) => <Option value={state}>{state}</Option>)}
-                </Select>
-                <Select placeholder={"Type"} value={filterType} onChange={handleChangeType} startDecorator={
-                    <Typography>Type</Typography>
-                }>
-                    <Option value={null}>None</Option>
-                    {Object.keys(JobType).map((type) => <Option value={type}>{type}</Option>)}
-                </Select>
-                <Input type={"number"}
-                       value={page}
-                       onChange={(e) => setPage(parseInt(e.target.value))}
-                       slotProps={{input: { min: 1, max: Math.ceil(allJobs.length / pageSize)}}}
-                       startDecorator={<Typography>Page</Typography>}
-                       endDecorator={<Typography>/{Math.ceil(allJobs.length / pageSize)}</Typography>}/>
-            </Stack>
-            <DialogContent>
-                <Table borderAxis={"xBetween"} stickyHeader>
-                    <thead>
-                    <tr>
-                        <th>Type</th>
-                        <th>State</th>
-                        <th>Last Execution</th>
-                        <th>NextExecution</th>
-                        <th>Extra</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {allJobs.slice((page-1)*pageSize, page*pageSize).map((job) => (
-                        <tr key={job.jobId}>
-                            <td>{job.jobType}</td>
-                            <td>{job.state}</td>
-                            <td>{new Date(job.lastExecution).toLocaleString()}</td>
-                            <td>{new Date(job.nextExecution).toLocaleString()}</td>
-                            <td>{ExtraContent(job, OpenMangaPopupDrawer, OpenChapterPopupDrawer)}</td>
-                        </tr>
-                    ))}
-                    </tbody>
-                </Table>
-            </DialogContent>
-            <MangaPopupFromId mangaId={selectedMangaId} open={mangaPopupOpen} setOpen={setMangaPopupOpen} />
-            <ChapterPopupFromId chapterId={selectedChapterId} open={chapterPopupOpen} setOpen={setChapterPopupOpen} />
-        </Drawer>
-    )
-}
-
-function ExtraContent(job: IJob, OpenMangaPopupDrawer: (mangaId: string) => void, OpenChapterPopupDrawer: (IJobWithChapterId: string) => void){
-    switch(job.jobType){
-        case JobType.DownloadAvailableChaptersJob:
-        case JobType.DownloadMangaCoverJob:
-        case JobType.RetrieveChaptersJob:
-        case JobType.UpdateChaptersDownloadedJob:
-        case JobType.UpdateCoverJob:
-        case JobType.MoveMangaLibraryJob:
-            return <Button onClick={() => OpenMangaPopupDrawer((job as IJobWithMangaId).mangaId)}>Open Manga</Button>
-        case JobType.DownloadSingleChapterJob:
-        case JobType.UpdateSingleChapterDownloadedJob:
-            return <Button onClick={() => OpenChapterPopupDrawer((job as IJobWithChapterId).chapterId)}>ShowChapter</Button>
-        default:
-            return null;
-    }
-}

tranga-website/src/Components/Manga.tsx

@@ -1,116 +0,0 @@
-import {Badge, Box, Card, CardContent, CardCover, Skeleton, Typography,} from "@mui/joy";
-import IManga from "../api/types/IManga.ts";
-import {CSSProperties, ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react";
-import {GetMangaCoverImageUrl} from "../api/Manga.tsx";
-import {ApiUriContext, getData} from "../api/fetchApi.tsx";
-import {MangaReleaseStatus, ReleaseStatusToPalette} from "../api/types/EnumMangaReleaseStatus.ts";
-import {SxProps} from "@mui/joy/styles/types";
-import MangaPopup from "./MangaPopup.tsx";
-import {MangaConnectorContext} from "../api/Contexts/MangaConnectorContext.tsx";
-import {MangaContext} from "../api/Contexts/MangaContext.tsx";
-
-export const CardWidth = 190;
-export const CardHeight = 300;
-
-const coverSx : SxProps = {
-    height: CardHeight + "px",
-    width: CardWidth + "px",
-    position: "relative",
-}
-
-const coverCss : CSSProperties = {
-    maxHeight: "calc("+CardHeight+"px + 2rem)",
-    maxWidth: "calc("+CardWidth+"px + 2rem)",
-}
-
-export function MangaFromId({mangaId, children} : { mangaId: string, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
-    const mangaContext = useContext(MangaContext);
-
-    const [manga, setManga] = useState<IManga | undefined>(undefined);
-    mangaContext.GetManga(mangaId).then(setManga);
-
-    return (
-        manga === undefined ?
-                <Badge sx={{margin:"8px !important"}} badgeContent={<Skeleton><img width={"24pt"} height={"24pt"} src={"/blahaj.png"} /></Skeleton>} color={ReleaseStatusToPalette(MangaReleaseStatus.Completed)} size={"lg"}>
-                    <Card sx={{height:"fit-content",width:"fit-content"}}>
-                        <CardCover>
-                            <img style={coverCss} src={"/blahaj.png"} alt="Manga Cover"/>
-                        </CardCover>
-                        <CardCover sx={{
-                            background:
-                                'linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 200px), linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0) 300px)',
-                        }}/>
-                        <CardContent sx={{display: "flex", alignItems: "center", flexFlow: "row nowrap"}}>
-                            <Box sx={coverSx}>
-                                <Typography level={"h3"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
-                                    <Skeleton loading={true} animation={"wave"}>
-                                        {mangaId.split("").splice(0,mangaId.length/2).join(" ")}
-                                    </Skeleton>
-                                </Typography>
-                            </Box>
-                        </CardContent>
-                    </Card>
-                </Badge>
-                 :
-                <Manga manga={manga} children={children} />
-    );
-}
-
-export function Manga({manga: manga, children} : { manga: IManga, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined}) {
-    const CoverRef = useRef<HTMLImageElement>(null);
-
-    const apiUri = useContext(ApiUriContext);
-    const mangaConnector = useContext(MangaConnectorContext).find(all => all.name == manga.mangaConnectorName);
-
-    const [expanded, setExpanded] = useState(false);
-
-    useEffect(() => {
-        LoadMangaCover();
-    }, [manga, apiUri]);
-
-    const LoadMangaCover = useCallback(() => {
-        if(CoverRef.current == null)
-            return;
-        const coverUrl = GetMangaCoverImageUrl(apiUri, manga.mangaId, CoverRef.current);
-        if(CoverRef.current.src == coverUrl)
-            return;
-
-        //Check if we can fetch the image exists (by fetching it), only then update
-        getData(coverUrl).then(() => {
-            if(CoverRef.current) CoverRef.current.src = coverUrl;
-        });
-    }, [manga, apiUri]);
-
-    const interactiveElements = ["button", "input", "textarea", "a", "select", "option", "li"];
-
-    const maxLength = 50;
-    const mangaName = manga.name.length > maxLength ? manga.name.substring(0, maxLength-3) + "..." : manga.name;
-
-    return (
-        <Badge sx={{margin:"8px !important"}} badgeContent={mangaConnector ? <img width={"24pt"} height={"24pt"} src={mangaConnector.iconUrl} /> : manga.mangaConnectorName} color={ReleaseStatusToPalette(manga.releaseStatus)} size={"lg"}>
-            <Card sx={{height:"fit-content",width:"fit-content"}} onClick={(e) => {
-                const target = e.target as HTMLElement;
-                if(interactiveElements.find(x => x == target.localName) == undefined)
-                    setExpanded(!expanded)}
-            }>
-                <CardCover>
-                    <img style={coverCss} src={GetMangaCoverImageUrl(apiUri, manga.mangaId, CoverRef.current)} alt="Manga Cover"
-                         ref={CoverRef}
-                         onLoad={LoadMangaCover}/>
-                </CardCover>
-                <CardCover sx={{
-                    background:
-                        'linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 200px), linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0) 300px)',
-                }}/>
-                <CardContent sx={{display: "flex", alignItems: "center", flexFlow: "row nowrap"}}>
-                    <Box sx={coverSx}>
-                        <Typography level={"h3"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
-                            {mangaName}
-                        </Typography>
-                    </Box>
-                </CardContent>
-                <MangaPopup manga={manga} open={expanded} setOpen={setExpanded}>{children}</MangaPopup>
-            </Card>
-        </Badge>
-    );
-}

tranga-website/src/Components/MangaList.tsx

@@ -1,84 +0,0 @@
-import {Badge, Box, Button, Card, CardContent, CardCover, Stack, Tooltip, Typography} from "@mui/joy";
-import {Dispatch, SetStateAction, useCallback, useContext, useEffect, useState} from "react";
-import {ApiUriContext} from "../api/fetchApi.tsx";
-import {DeleteJob, GetJobsWithType, StartJob} from "../api/Job.tsx";
-import {JobType} from "../api/types/Jobs/IJob.ts";
-import IDownloadAvailableChaptersJob from "../api/types/Jobs/IDownloadAvailableChaptersJob.ts";
-import {CardHeight, CardWidth, MangaFromId} from "./Manga.tsx";
-import {PlayArrow, Remove} from "@mui/icons-material";
-import * as React from "react";
-
-export default function MangaList({connected, setShowSearch}: {connected: boolean, setShowSearch: Dispatch<SetStateAction<boolean>>} ) {
-    const apiUri = useContext(ApiUriContext);
-
-    const [jobList, setJobList] = useState<IDownloadAvailableChaptersJob[]>([]);
-
-    const getJobList = useCallback(() => {
-        if(!connected)
-            return;
-        GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob).then((jl) => setJobList(jl as IDownloadAvailableChaptersJob[]));
-    },[apiUri,connected]);
-
-    const deleteJob = useCallback((jobId: string) => {
-        DeleteJob(apiUri, jobId).finally(() => getJobList());
-    },[apiUri]);
-
-    const startJob = useCallback((jobId: string) => {
-        StartJob(apiUri, jobId, true).finally(() => getJobList());
-    },[apiUri]);
-
-    useEffect(() => {
-        getJobList();
-    }, [apiUri]);
-
-    useEffect(() => {
-        updateTimer();
-        getJobList();
-    }, [connected]);
-
-    const timerRef = React.useRef<ReturnType<typeof setInterval>>(undefined);
-    const updateTimer = () => {
-        if(!connected){
-            clearTimeout(timerRef.current);
-            return;
-        }else{
-            if(timerRef.current === undefined) {
-                console.log("Added timer!");
-                getJobList();
-                timerRef.current = setInterval(() => {
-                    getJobList();
-                }, 2000);
-            }
-        }
-    }
-
-    return(
-        <Stack direction="row" spacing={1} flexWrap={"wrap"}>
-            <Badge invisible sx={{margin: "8px !important"}}>
-                <Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
-                    <CardCover sx={{margin:"var(--Card-padding)"}}>
-                        <img src={"/blahaj.png"} style={{height: CardHeight + "px", width: CardWidth + "px"}} />
-                    </CardCover>
-                    <CardCover sx={{
-                        background: 'rgba(234, 119, 246, 0.14)',
-                        backdropFilter: 'blur(6.9px)',
-                        webkitBackdropFilter: 'blur(6.9px)',
-                    }}/>
-                    <CardContent>
-                        <Box style={{height: CardHeight + "px", width: CardWidth + "px"}} >
-                            <Typography level={"h1"}>Search</Typography>
-                        </Box>
-                    </CardContent>
-                </Card>
-            </Badge>
-            {jobList?.map((job) => (
-                <MangaFromId key={job.mangaId} mangaId={job.mangaId}>
-                    <Tooltip title={"Last run: " + new Date(job.lastExecution).toLocaleString()}>
-                        <Button color={"success"} endDecorator={<PlayArrow />} onClick={() => startJob(job.jobId)}>Start</Button>
-                    </Tooltip>
-                    <Button color={"danger"} endDecorator={<Remove />} onClick={() => deleteJob(job.jobId)}>Delete</Button>
-                </MangaFromId>
-            ))}
-        </Stack>
-    );
-}

tranga-website/src/Components/MangaPopup.tsx

@@ -1,186 +0,0 @@
-import IManga from "../api/types/IManga.ts";
-import {Badge, Box, Chip, CircularProgress, Drawer, Input, Link, Skeleton, Stack, Typography} from "@mui/joy";
-import React, {ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react";
-import {
-    GetLatestChapterAvailable,
-    GetLatestChapterDownloaded,
-    GetMangaCoverImageUrl,
-    SetIgnoreThreshold
-} from "../api/Manga.tsx";
-import {ApiUriContext, getData} from "../api/fetchApi.tsx";
-import MarkdownPreview from "@uiw/react-markdown-preview";
-import {CardHeight} from "./Manga.tsx";
-import IChapter from "../api/types/IChapter.ts";
-import {MangaReleaseStatus, ReleaseStatusToPalette} from "../api/types/EnumMangaReleaseStatus.ts";
-import {MangaConnectorContext} from "../api/Contexts/MangaConnectorContext.tsx";
-import {MangaContext} from "../api/Contexts/MangaContext.tsx";
-import ModalClose from "@mui/joy/ModalClose";
-
-
-export function MangaPopupFromId({mangaId, open, setOpen, children} : {mangaId: string | null, open: boolean, setOpen: React.Dispatch<React.SetStateAction<boolean>>, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined}) {
-    const mangaContext = useContext(MangaContext);
-
-    const [manga, setManga] = useState<IManga | undefined>(undefined);
-
-    useEffect(() => {
-        if (!open || mangaId === null)
-            return;
-        mangaContext.GetManga(mangaId).then(setManga);
-    }, [open]);
-
-    return (
-        manga === undefined ?
-            <Drawer anchor="bottom" size="lg" open={open} onClose={() => setOpen(false)}>
-                <ModalClose />
-                <Stack direction="column" spacing={2} margin={"10px"}>
-                    { /* Cover and Description */ }
-                    <Stack direction="row" spacing={2} margin={"10px"}>
-                        <Badge sx={{margin:"8px !important"}} color={ReleaseStatusToPalette(MangaReleaseStatus.Unreleased)} size={"lg"}>
-                            <img src="/blahaj.png" alt="Manga Cover"/>
-                        </Badge>
-                        <Box>
-                            <Skeleton loading={true} animation={"wave"}>
-                                {mangaId?.split("").splice(0,mangaId.length/2).join(" ")}
-                            </Skeleton>
-                            <Stack direction={"row"} flexWrap={"wrap"} useFlexGap={true} spacing={0.3} sx={{maxHeight:CardHeight*0.3+"px", overflowY:"auto", scrollbarWidth: "thin"}}>
-                                {mangaId?.split("").filter(x => Number.isNaN(x)).map(_ =>
-                                    <Skeleton loading={true} animation={"wave"}>
-                                        <Chip>Wow</Chip>
-                                    </Skeleton>
-                                )}
-                            </Stack>
-                            <MarkdownPreview style={{backgroundColor: "transparent", color: "var(--joy-palette-neutral-50)", maxHeight:CardHeight*0.7+"px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} />
-                        </Box>
-                    </Stack>
-    
-                    { /* Actions */ }
-                    <Stack direction="row" spacing={2}>
-                        {children}
-                    </Stack>
-                </Stack>
-            </Drawer> 
-            :
-            <MangaPopup manga={manga} open={open} setOpen={setOpen}>{children}</MangaPopup>
-    );
-}
-
-export default function MangaPopup({manga, open, setOpen, children} : {manga: IManga | null, open: boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined}) {
-
-    const apiUri = useContext(ApiUriContext);
-
-    const CoverRef = useRef<HTMLImageElement>(null);
-
-    const LoadMangaCover = useCallback(() => {
-        if(CoverRef.current == null || manga == null)
-            return;
-        if (!open)
-            return;
-        const coverUrl = GetMangaCoverImageUrl(apiUri, manga.mangaId, CoverRef.current);
-        if(CoverRef.current.src == coverUrl)
-            return;
-
-        //Check if we can fetch the image exists (by fetching it), only then update
-        getData(coverUrl).then(() => {
-            if(CoverRef.current) CoverRef.current.src = coverUrl;
-        });
-    }, [manga, apiUri, open])
-
-    useEffect(() => {
-        if(!open)
-            return;
-        LoadMaxChapter();
-        LoadDownloadedChapter();
-        LoadMangaCover();
-    }, [open]);
-
-    const [mangaMaxChapter, setMangaMaxChapter] = useState<IChapter>();
-    const [maxChapterLoading, setMaxChapterLoading] = useState<boolean>(true);
-    const LoadMaxChapter = useCallback(() => {
-        if(manga == null)
-            return;
-        setMaxChapterLoading(true);
-        GetLatestChapterAvailable(apiUri, manga.mangaId)
-            .then(setMangaMaxChapter)
-            .finally(() => setMaxChapterLoading(false));
-    }, [manga, apiUri]);
-
-    const [mangaDownloadedChapter, setMangaDownloadedChapter] = useState<IChapter>();
-    const [downloadedChapterLoading, setDownloadedChapterLoading] = useState<boolean>(true);
-    const LoadDownloadedChapter = useCallback(() => {
-        if(manga == null)
-            return;
-        setDownloadedChapterLoading(true);
-        GetLatestChapterDownloaded(apiUri, manga.mangaId)
-            .then(setMangaDownloadedChapter)
-            .finally(() => setDownloadedChapterLoading(false));
-    }, [manga, apiUri]);
-
-    const [updatingThreshold, setUpdatingThreshold] = useState<boolean>(false);
-    const updateIgnoreThreshhold = useCallback((value: number) => {
-        if(manga == null)
-            return;
-        setUpdatingThreshold(true);
-        SetIgnoreThreshold(apiUri, manga.mangaId, value).finally(() => setUpdatingThreshold(false));
-    },[manga, apiUri])
-
-    const mangaConnector = useContext(MangaConnectorContext).find(all => all.name == manga?.mangaConnectorName);
-
-    return (
-        <Drawer anchor="bottom" size="lg" open={open} onClose={() => setOpen(false)}>
-            <ModalClose />
-            <Stack direction="column" spacing={2} margin={"10px"}>
-                { /* Cover and Description */ }
-                <Stack direction="row" spacing={2} margin={"10px"}>
-                    <Badge sx={{margin:"8px !important"}} badgeContent={mangaConnector ? <img width={"24pt"} height={"24pt"} src={mangaConnector.iconUrl} /> : manga?.mangaConnectorName} color={ReleaseStatusToPalette(manga?.releaseStatus??MangaReleaseStatus.Unreleased)} size={"lg"}>
-                        <img src="/blahaj.png" alt="Manga Cover"
-                             ref={CoverRef}
-                             onLoad={LoadMangaCover}/>
-                    </Badge>
-                    <Box>
-                        <Link href={manga?.websiteUrl} level={"h2"}>
-                            {manga?.name}
-                        </Link>
-                        <Stack direction={"row"} flexWrap={"wrap"} useFlexGap={true} spacing={0.3} sx={{maxHeight:CardHeight*0.3+"px", overflowY:"auto", scrollbarWidth: "thin"}}>
-                            {manga?.authors?.map(author => <Chip key={author.authorId} variant={"outlined"} size={"md"} color={"success"}>{author.authorName}</Chip>)}
-                            {manga?.mangaTags?.map(tag => <Chip key={tag.tag} variant={"soft"} size={"md"} color={"primary"}>{tag.tag}</Chip>)}
-                            {manga?.links?.map(link =>
-                                <Chip key={link.linkId} variant={"soft"} size={"md"} color={"warning"}>
-                                    <Link sx={{textDecoration:"underline"}} level={"body-xs"} href={link?.linkUrl}>{link?.linkProvider??"Load Failed"}</Link>
-                                </Chip>
-                            )}
-                        </Stack>
-                        <MarkdownPreview source={manga?.description} style={{backgroundColor: "transparent", color: "var(--joy-palette-neutral-50)", maxHeight:CardHeight*0.7+"px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} />
-                    </Box>
-                </Stack>
-
-                { /* Actions */ }
-                <Stack direction="row" spacing={2}>
-                    <Input
-                        type={"number"}
-                        placeholder={downloadedChapterLoading ? "" : mangaDownloadedChapter?.chapterNumber??"0.0"}
-                        startDecorator={
-                            <>
-                                {
-                                    updatingThreshold ?
-                                        <CircularProgress color={"primary"} size={"sm"} />
-                                        : <Typography>Ch.</Typography>
-                                }
-                            </>
-                        }
-                        endDecorator={
-                            <Typography>
-                                <Skeleton loading={maxChapterLoading}>
-                                    /{mangaMaxChapter?.chapterNumber??"-"}
-                                </Skeleton>
-                            </Typography>
-                        }
-                        sx={{width:"min-content"}}
-                        size={"md"}
-                        onChange={(e) => updateIgnoreThreshhold(e.currentTarget.valueAsNumber)}
-                    />
-                    {children}
-                </Stack>
-            </Stack>
-        </Drawer>
-    );
-}

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;
+}

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;
+}

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;
+}

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;
+}

tranga-website/src/Components/Mangas/MangaCard.css

@@ -0,0 +1,21 @@
+.manga-card-badge {
+    margin: 16px 18px 0 0;
+}
+
+.manga-card {
+    width: 220px;
+    height: 300px;
+}
+
+.manga-card-cover {
+}
+
+.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-card-content {
+}

tranga-website/src/Components/Mangas/MangaCard.tsx

@@ -0,0 +1,73 @@
+import {
+    Badge,
+    Card,
+    CardContent,
+    CardCover,
+    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 default function MangaCard(props: MangaCardProps): ReactNode {
+    const Api = useContext(ApiContext);
+
+    return (
+        <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-card-cover-blur'} />
+                <CardContent className={'manga-card-content'}>
+                    <Typography level={'h4'}>
+                        {props.manga?.name ?? <Skeleton>{stringWithRandomLength()}</Skeleton>}
+                    </Typography>
+                </CardContent>
+            </Card>
+        </Badge>
+    );
+}
+
+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';
+    }
+};

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>
+    );
+}

tranga-website/src/Components/Mangas/MangaList.tsx

@@ -0,0 +1,84 @@
+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(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 (
+        <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',
+                justifyItems: 'space-between',
+            }}>
+            {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>;
+}

tranga-website/src/Components/Search.tsx

@@ -1,202 +0,0 @@
-import {
-    Avatar,
-    Button,
-    Chip,
-    CircularProgress,
-    Drawer,
-    Input,
-    ListItemDecorator,
-    Option,
-    Select, SelectOption,
-    Skeleton,
-    Stack,
-    Step,
-    StepIndicator,
-    Stepper,
-    Typography
-} from "@mui/joy";
-import ModalClose from "@mui/joy/ModalClose";
-import IMangaConnector from "../api/types/IMangaConnector";
-import {useCallback, useContext, useEffect, useState} from "react";
-import {ApiUriContext} from "../api/fetchApi.tsx";
-import {GetAllConnectors} from "../api/MangaConnector.tsx";
-import IManga from "../api/types/IManga.ts";
-import {SearchNameOnConnector, SearchUrl} from "../api/Search.tsx";
-import {Manga} from "./Manga.tsx";
-import Add from "@mui/icons-material/Add";
-import React from "react";
-import {CreateDownloadAvailableChaptersJob} from "../api/Job.tsx";
-import ILocalLibrary from "../api/types/ILocalLibrary.ts";
-import {GetLibraries} from "../api/LocalLibrary.tsx";
-import { LibraryBooks } from "@mui/icons-material";
-
-export default function Search({open, setOpen}:{open:boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>}){
-
-    const [step, setStep] = useState<number>(2);
-
-    const apiUri = useContext(ApiUriContext);
-    const [mangaConnectors, setMangaConnectors] = useState<IMangaConnector[]>();
-    const [mangaConnectorsLoading, setMangaConnectorsLoading] = useState<boolean>(true);
-    const [selectedMangaConnector, setSelectedMangaConnector] = useState<IMangaConnector>();
-
-    const loadMangaConnectors = useCallback(() => {
-        setMangaConnectorsLoading(true);
-        GetAllConnectors(apiUri).then(setMangaConnectors).finally(() => setMangaConnectorsLoading(false));
-    }, [apiUri]);
-
-    const [results, setResults] = useState<IManga[]|undefined>([]);
-    const [resultsLoading, setResultsLoading] = useState<boolean>(false);
-
-    const StartSearch = useCallback((mangaConnector : IMangaConnector | undefined, value: string)=>{
-        if(mangaConnector === undefined && !IsValidUrl(value))
-            return;
-        setResults(undefined);
-        setResultsLoading(true);
-        setStep(3);
-        if (IsValidUrl(value)){
-            SearchUrl(apiUri, value).then((r) => setResults([r])).finally(() => setResultsLoading(false));
-        }else if (mangaConnector != undefined){
-            SearchNameOnConnector(apiUri, mangaConnector.name, value).then(setResults).finally(() => setResultsLoading(false));
-        }
-    },[apiUri])
-
-    function IsValidUrl(str : string) : boolean {
-        const pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
-            '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
-            '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
-            '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
-            '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
-            '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
-        return !!pattern.test(str);
-    }
-
-    const [localLibraries, setLocalLibraries] = useState<ILocalLibrary[]>();
-    const [localLibrariesLoading, setLocalLibrariesLoading] = useState<boolean>(true);
-    const [selectedLibraryId, setSelectedLibraryId] = useState<string>();
-
-    const loadLocalLibraries = useCallback(() => {
-        setLocalLibrariesLoading(true);
-        GetLibraries(apiUri).then(setLocalLibraries).finally(() => setLocalLibrariesLoading(false));
-    }, [apiUri]);
-
-    useEffect(() => {
-        loadMangaConnectors();
-        loadLocalLibraries();
-    },[apiUri]);
-
-    useEffect(() => {
-        loadMangaConnectors();
-        loadLocalLibraries();
-    }, []);
-
-    function renderValue(option: SelectOption<string> | null) {
-        if (!option) {
-            return null;
-        }
-
-        return (
-            <React.Fragment>
-                <ListItemDecorator>
-                    <Avatar size="sm" src={mangaConnectors?.find((o) => o.name === option.value)?.iconUrl} />
-                </ListItemDecorator>
-                {option.label}
-            </React.Fragment>
-        );
-    }
-
-    // @ts-ignore
-    return (
-        <Drawer size={"lg"} anchor={"right"} open={open} onClose={() => {
-            if(step > 2)
-                setStep(2);
-            setResults([]);
-            setOpen(false);
-        }}>
-            <ModalClose />
-            <Stepper orientation={"vertical"} sx={{ height: '100%', width: "calc(100% - 80px)", margin:"40px"}}>
-                <Step indicator={
-                    <StepIndicator variant={step==1?"solid":"outlined"} color={(mangaConnectors?.length??0) < 1 ? "danger" : "primary"}>
-                        1
-                    </StepIndicator>}>
-                    <Skeleton loading={mangaConnectorsLoading}>
-                        <Select
-                            color={(mangaConnectors?.length??0) < 1 ? "danger" : "neutral"}
-                            disabled={mangaConnectorsLoading || resultsLoading || mangaConnectors?.length == null || mangaConnectors.length < 1}
-                            placeholder={"Select Connector"}
-                            slotProps={{
-                                    listbox: {
-                                        sx: {
-                                            '--ListItemDecorator-size': '44px',
-                                        },
-                                    },
-                                }}
-                            sx={{ '--ListItemDecorator-size': '44px', minWidth: 240 }}
-                            renderValue={renderValue}
-                            onChange={(_e, newValue) => {
-                                setSelectedMangaConnector(mangaConnectors?.find((o) => o.name === newValue));
-                                setStep(2);
-                                setResults(undefined);
-                            }}
-                            endDecorator={<Chip size={"sm"} color={mangaConnectors?.length??0 < 1 ? "danger" : "primary"}>{mangaConnectors?.length}</Chip>}>
-                            {mangaConnectors?.map((connector: IMangaConnector) => ConnectorOption(connector))}
-                        </Select>
-                    </Skeleton>
-                </Step>
-                <Step indicator={
-                    <StepIndicator variant={step==2?"solid":"outlined"} color="primary">
-                        2
-                    </StepIndicator>}>
-                    <Input disabled={resultsLoading} placeholder={"Name or Url " + (selectedMangaConnector ? selectedMangaConnector.baseUris[0] : "")} onKeyDown={(e) => {
-                        setStep(2);
-                        setResults(undefined);
-                        if(e.key === "Enter") {
-                            StartSearch(selectedMangaConnector, e.currentTarget.value);
-                        }
-                    }}/>
-                </Step>
-                <Step indicator={
-                    <StepIndicator variant={step==3?"solid":"outlined"} color="primary">
-                        3
-                    </StepIndicator>}>
-                    <Typography endDecorator={<Chip size={"sm"} color={"primary"}>{results?.length??"-"}</Chip>}>Results</Typography>
-                    <Skeleton loading={resultsLoading}>
-                        <Stack direction={"row"} spacing={1} flexWrap={"wrap"}>
-                            {results?.map((result) =>
-                                <Manga key={result.mangaId} manga={result}>
-                                    <Select
-                                        placeholder={"Select Library"}
-                                        defaultValue={""}
-                                        startDecorator={<LibraryBooks />}
-                                        value={selectedLibraryId}
-                                        onChange={(_e, newValue) => setSelectedLibraryId(newValue!)}>
-                                        {localLibrariesLoading ?
-                                            <Option value={""} disabled>Loading <CircularProgress color={"primary"} size={"sm"} /></Option>
-                                            :
-                                            (localLibraries??[]).map(library => {
-                                                return (
-                                                    <Option value={library.localLibraryId}>{library.libraryName} ({library.basePath})</Option>
-                                                );
-                                            })}
-                                    </Select>
-                                    <Button disabled={localLibrariesLoading || selectedLibraryId === undefined} onClick={() => {
-                                        CreateDownloadAvailableChaptersJob(apiUri, result.mangaId, {localLibraryId: selectedLibraryId!,recurrenceTimeMs: 1000 * 60 * 60 * 3, language: "en"})
-                                    }} endDecorator={<Add />}>Watch</Button>
-                                </Manga>)}
-                        </Stack>
-                    </Skeleton>
-                </Step>
-            </Stepper>
-        </Drawer>
-    );
-}
-
-function ConnectorOption(connector: IMangaConnector){
-    return (
-        <Option key={connector.name} value={connector.name} sx={{position: "relative"}}>
-            <ListItemDecorator>
-                <Avatar size="sm" src={connector.iconUrl} />
-            </ListItemDecorator>
-            {connector.name}
-        </Option>
-    );
-}

tranga-website/src/Components/Settings/AprilFoolsMode.tsx

@@ -1,59 +0,0 @@
-import IBackendSettings from "../../api/types/IBackendSettings.ts";
-import {useCallback, useContext, useEffect, useState} from "react";
-import {ApiUriContext} from "../../api/fetchApi.tsx";
-import {
-    Accordion,
-    AccordionDetails,
-    AccordionSummary,
-    ColorPaletteProp,
-    Switch,
-    Typography
-} from "@mui/joy";
-import * as React from "react";
-import {GetAprilFoolsToggle, UpdateAprilFoolsToggle} from "../../api/BackendSettings.tsx";
-
-export default function ImageProcessing({backendSettings}: {backendSettings?: IBackendSettings}) {
-    const apiUri = useContext(ApiUriContext);
-
-    const [loading, setLoading] = useState<boolean>(false);
-    const [color, setColor] = useState<ColorPaletteProp>("neutral");
-    const [value, setValue] = useState<boolean>(backendSettings?.aprilFoolsMode??false);
-
-    const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
-    const valueChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
-        setColor("warning");
-        clearTimeout(timerRef.current);
-        timerRef.current = setTimeout(() => {
-            UpdateAprilFoolsMode(e.target.checked);
-        }, 1000);
-    }
-
-    useEffect(() => {
-        setValue(backendSettings?.aprilFoolsMode??false);
-    }, [backendSettings]);
-
-    const UpdateAprilFoolsMode = useCallback((val: boolean) => {
-        UpdateAprilFoolsToggle(apiUri, val)
-            .then(() => GetAprilFoolsToggle(apiUri))
-            .then((val) => setValue(val))
-            .then(() => setColor("success"))
-            .catch(() => setColor("danger"))
-            .finally(() => setLoading(false));
-    }, [apiUri]);
-
-    return (
-        <Accordion>
-            <AccordionSummary>April Fools Mode</AccordionSummary>
-            <AccordionDetails>
-                <Typography endDecorator={
-                    <Switch disabled={backendSettings === undefined || loading}
-                            onChange={valueChanged}
-                            color={color}
-                            checked={value} />
-                }>
-                    Toggle
-                </Typography>
-            </AccordionDetails>
-        </Accordion>
-    );
-}

tranga-website/src/Components/Settings/ChapterNamingScheme.tsx

@@ -1,74 +1,38 @@
-import IBackendSettings from "../../api/types/IBackendSettings";
+import { ReactNode, useContext } from 'react';
-import {
+import { SettingsContext, SettingsItem } from './Settings.tsx';
-    Accordion,
+import { ApiContext } from '../../contexts/ApiContext.tsx';
-    AccordionDetails,
+import MarkdownPreview from '@uiw/react-markdown-preview';
-    AccordionSummary, Chip,
+import TInput from '../Inputs/TInput.tsx';
-    CircularProgress,
-    ColorPaletteProp,
-    Divider,
-    Input,
-    Stack, Tooltip, Typography
-} from "@mui/joy";
-import {KeyboardEventHandler, useCallback, useContext, useState} from "react";
-import {ApiUriContext} from "../../api/fetchApi.tsx";
-import {UpdateChapterNamingScheme} from "../../api/BackendSettings.tsx";
 
-export default function ChapterNamingScheme({backendSettings}: {backendSettings?: IBackendSettings}) {
+export default function ChapterNamingScheme(): ReactNode {
-    const apiUri = useContext(ApiUriContext);
+    const settings = useContext(SettingsContext);
-    const [loading, setLoading] = useState<boolean>(false);
+    const Api = useContext(ApiContext);
-    const [value, setValue] = useState<string>("");
-    const [color, setColor] = useState<ColorPaletteProp>("neutral");
 
-    const keyDown : KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
+    const schemeChanged = async (value: string | number | readonly string[] | undefined) => {
-        if(e.key === "Enter") {
+        if (typeof value != 'string') return Promise.reject();
-            setLoading(true);
+        try {
-            UpdateChapterNamingScheme(apiUri, value)
+            const response = await Api.settingsChapterNamingSchemePartialUpdate(value);
-                .then(() => setColor("success"))
+            if (response.ok) return Promise.resolve();
-                .catch(() => setColor("danger"))
+            else return Promise.reject();
-                .finally(() => setLoading(false));
+        } catch {
+            return await Promise.reject();
         }
-    }, [apiUri])
+    };
 
     return (
-        <Accordion>
+        <SettingsItem title={'Chapter Naming Scheme'}>
-            <AccordionSummary>Chapter Naming Scheme</AccordionSummary>
+            <MarkdownPreview
-            <AccordionDetails>
+                style={{ backgroundColor: 'transparent' }}
-                <Input disabled={backendSettings === undefined || loading}
+                source={
-                       placeholder={"Chapter Naming Scheme"}
+                    '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'
-                       defaultValue={backendSettings?.chapterNamingScheme}
+                }
-                       onKeyDown={keyDown}
-                       onChange={e => setValue(e.target.value)}
-                       color={color}
-                       endDecorator={(loading ? <CircularProgress color={"primary"} size={"sm"} /> : null)}
             />
-                <Typography level={"title-sm"}>Placeholders:</Typography>
+            <TInput
-                <Stack direction="row" spacing={1} divider={<Divider />}>
+                defaultValue={settings?.chapterNamingScheme as string}
-                    <Tooltip arrow placement="bottom" size="md" variant="outlined"
+                placeholder={'Scheme'}
-                             title={"Manga Title"} >
+                onSubmit={schemeChanged}
-                        <Chip color={"primary"}>%M</Chip>
+                actionDelay={5000}
-                    </Tooltip>
+            />
-                    <Tooltip arrow placement="bottom" size="md" variant="outlined"
+        </SettingsItem>
-                             title={"Volume Number"} >
-                        <Chip color={"primary"}>%V</Chip>
-                    </Tooltip>
-                    <Tooltip arrow placement="bottom" size="md" variant="outlined"
-                             title={"Chapter Number"} >
-                        <Chip color={"primary"}>%C</Chip>
-                    </Tooltip>
-                    <Tooltip arrow placement="bottom" size="md" variant="outlined"
-                             title={"Chapter Title"} >
-                        <Chip color={"primary"}>%T</Chip>
-                    </Tooltip>
-                    <Tooltip arrow placement="bottom" size="md" variant="outlined"
-                             title={"Year"} >
-                        <Chip color={"primary"}>%Y</Chip>
-                    </Tooltip>
-                    <Tooltip arrow placement="bottom" size="md" variant="outlined"
-                             title={"First Author"} >
-                        <Chip color={"primary"}>%A</Chip>
-                    </Tooltip>
-                </Stack>
-            </AccordionDetails>
-        </Accordion>
     );
 }

tranga-website/src/Components/Settings/Download.tsx

@@ -0,0 +1,14 @@
+import { SettingsItem } from './Settings.tsx';
+import ImageCompression from './ImageCompression.tsx';
+import DownloadLanguage from './DownloadLanguage.tsx';
+import ChapterNamingScheme from './ChapterNamingScheme.tsx';
+
+export default function Download() {
+    return (
+        <SettingsItem title={'Download'}>
+            <ImageCompression />
+            <DownloadLanguage />
+            <ChapterNamingScheme />
+        </SettingsItem>
+    );
+}

tranga-website/src/Components/Settings/DownloadLanguage.tsx

@@ -0,0 +1,30 @@
+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 DownloadLanguage(): ReactNode {
+    const settings = useContext(SettingsContext);
+    const Api = useContext(ApiContext);
+
+    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 (
+        <SettingsItem title={'Download Language'}>
+            <TInput
+                defaultValue={settings?.downloadLanguage as string}
+                placeholder={"Language code (f.e. 'en')"}
+                onSubmit={languageChanged}
+            />
+        </SettingsItem>
+    );
+}

tranga-website/src/Components/Settings/FlareSolverr.tsx

@@ -1,72 +1,30 @@
-import IBackendSettings from "../../api/types/IBackendSettings";
+import { ReactNode, useContext } from 'react';
-import {
+import { SettingsContext, SettingsItem } from './Settings.tsx';
-    Accordion,
+import { ApiContext } from '../../contexts/ApiContext.tsx';
-    AccordionDetails,
+import TInput from '../Inputs/TInput.tsx';
-    AccordionSummary,
-    Button,
-    ColorPaletteProp,
-    Input, Stack
-} from "@mui/joy";
-import {KeyboardEventHandler, useCallback, useContext, useEffect, useState} from "react";
-import {ApiUriContext} from "../../api/fetchApi.tsx";
-import {
-    ResetFlareSolverrUrl,
-    SetFlareSolverrUrl, TestFlareSolverrUrl,
-} from "../../api/BackendSettings.tsx";
 
-export default function FlareSolverr({backendSettings}: {backendSettings?: IBackendSettings}) {
+export default function FlareSolverr(): ReactNode {
-    const apiUri = useContext(ApiUriContext);
+    const settings = useContext(SettingsContext);
-    const [loading, setLoading] = useState<boolean>(false);
+    const Api = useContext(ApiContext);
-    const [value, setValue] = useState<string>(backendSettings?.flareSolverrUrl??"");
-    const [color, setColor] = useState<ColorPaletteProp>("neutral");
 
-    const keyDown : KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
+    const uriChanged = async (value: string | number | readonly string[] | undefined) => {
-        if(value === undefined) return;
+        if (typeof value != 'string') return Promise.reject();
-        if(e.key === "Enter") {
+        try {
-            setLoading(true);
+            const response = await Api.settingsFlareSolverrUrlCreate(value);
-            SetFlareSolverrUrl(apiUri, value)
+            if (response.ok) return Promise.resolve();
-                .then(() => setColor("success"))
+            else return Promise.reject();
-                .catch(() => setColor("danger"))
+        } catch (reason) {
-                .finally(() => setLoading(false));
+            return await Promise.reject(reason);
         }
-    }, [apiUri, value])
+    };
-
-    const Reset = useCallback(() => {
-        setLoading(true);
-        ResetFlareSolverrUrl(apiUri)
-            .then(() => Test())
-            .catch(() => setColor("danger"))
-            .finally(() => setLoading(false));
-    }, [apiUri]);
-    
-    const Test = useCallback(() => {
-        setLoading(true);
-        TestFlareSolverrUrl(apiUri)
-            .then(() => setColor("success"))
-            .catch(() => setColor("danger"))
-            .finally(() => setLoading(false));
-    }, [apiUri]);
-
-    useEffect(() => {
-        setValue(backendSettings?.flareSolverrUrl??"");
-    }, [backendSettings]);
 
     return (
-        <Accordion>
+        <SettingsItem title={'FlareSolverr'}>
-            <AccordionSummary>FlareSolverr</AccordionSummary>
+            <TInput
-            <AccordionDetails>
+                placeholder={'FlareSolverr URL'}
-                <Input disabled={backendSettings === undefined || loading}
+                defaultValue={settings?.flareSolverrUrl as string}
-                       placeholder={"FlareSolverr URL"}
+                onSubmit={uriChanged}
-                       value={value}
-                       onKeyDown={keyDown}
-                       onChange={e => setValue(e.target.value)}
-                       color={color}
-                       endDecorator={<Stack direction={"row"} spacing={1}>
-                           <Button onClick={Reset} loading={loading}>Reset</Button>
-                           <Button onClick={Test} loading={loading}>Test</Button>
-                       </Stack>}
             />
-            </AccordionDetails>
+        </SettingsItem>
-        </Accordion>
     );
 }

tranga-website/src/Components/Settings/ImageCompression.tsx

@@ -0,0 +1,16 @@
+import { ReactNode, useContext } from 'react';
+import { SettingsContext, SettingsItem } from './Settings.tsx';
+import { Slider } from '@mui/joy';
+
+export default function ImageCompression(): ReactNode {
+    const settings = useContext(SettingsContext);
+
+    return (
+        <SettingsItem title={'Image Compression'}>
+            <Slider
+                sx={{ marginTop: '20px' }}
+                valueLabelDisplay={'auto'}
+                defaultValue={settings?.imageCompression}></Slider>
+        </SettingsItem>
+    );
+}

tranga-website/src/Components/Settings/ImageProcessing.tsx

@@ -1,102 +0,0 @@
-import IBackendSettings from "../../api/types/IBackendSettings.ts";
-import {ChangeEvent, useCallback, useContext, useEffect, useRef, useState} from "react";
-import {ApiUriContext} from "../../api/fetchApi.tsx";
-import {
-    Accordion,
-    AccordionDetails,
-    AccordionSummary, ColorPaletteProp, Input, Stack, Switch, Typography,
-} from "@mui/joy";
-import {
-    GetBWImageToggle,
-    GetImageCompressionValue,
-    UpdateBWImageToggle,
-    UpdateImageCompressionValue
-} from "../../api/BackendSettings.tsx";
-
-export default function ImageProcessing ({backendSettings}: { backendSettings?: IBackendSettings }) {
-    const apiUri = useContext(ApiUriContext);
-
-    useEffect(() => {
-        setBwImages(backendSettings?.bwImages??false);
-        setCompression(backendSettings?.compression??100);
-    }, [backendSettings]);
-
-    const [bwImages, setBwImages] = useState<boolean>(backendSettings?.bwImages??false);
-    const [bwImagesLoading, setBwImagesLoading] = useState(false);
-    const [bwImagesColor, setBwImagesColor] = useState<ColorPaletteProp>("neutral");
-    const bwTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-    const bwValueChanged = (e : ChangeEvent<HTMLInputElement>) => {
-        setBwImages(e.target.checked);
-        setBwImagesColor("warning");
-        clearTimeout(bwTimerRef.current);
-        bwTimerRef.current = setTimeout(() => {
-            UpdateBwImages(e.target.checked);
-        }, 1000);
-    }
-    const UpdateBwImages = useCallback((val : boolean) => {
-        setBwImagesLoading(true);
-        UpdateBWImageToggle(apiUri, val)
-            .then(() => GetBWImageToggle(apiUri))
-            .then(setBwImages)
-            .then(() => setBwImagesColor("success"))
-            .catch(() => setBwImagesColor("danger"))
-            .finally(() => setBwImagesLoading(false));
-    },[apiUri]);
-
-    const [compression, setCompression] = useState<number>(backendSettings?.compression??100);
-    const [compressionLoading, setCompressionLoading] = useState(false);
-    const [compressionColor, setCompressionColor] = useState<ColorPaletteProp>("neutral");
-    const compressionTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-    const compressionCheckedChanged = (e : ChangeEvent<HTMLInputElement>) => {
-        setCompressionColor("warning");
-        if(!e.target.checked)
-            setCompression(100);
-        else
-            setCompression(50);
-        clearTimeout(compressionTimerRef.current);
-        bwTimerRef.current = setTimeout(() => {
-            UpdateImageCompression(e.target.checked ? 50 : 100);
-        }, 1000);
-    }
-    const compressionValueChanged = (e : ChangeEvent<HTMLInputElement>) => {
-        setCompressionColor("warning");
-        setCompression(parseInt(e.target.value));
-        clearTimeout(compressionTimerRef.current);
-        bwTimerRef.current = setTimeout(() => {
-            UpdateImageCompression(parseInt(e.target.value));
-        }, 1000);
-    }
-    const UpdateImageCompression = useCallback((val : number) => {
-        setCompressionLoading(true);
-        UpdateImageCompressionValue(apiUri, val)
-            .then(() => GetImageCompressionValue(apiUri))
-            .then(setCompression)
-            .then(() => setCompressionColor("success"))
-            .catch(() => setCompressionColor("danger"))
-            .finally(() => setCompressionLoading(false));
-    },[apiUri]);
-
-    return (
-        <Accordion>
-            <AccordionSummary>Image Processing</AccordionSummary>
-            <AccordionDetails>
-                <Stack>
-                    <Typography endDecorator={
-                        <Switch disabled={backendSettings === undefined || bwImagesLoading}
-                                onChange={bwValueChanged}
-                                color={bwImagesColor}
-                                checked={bwImages} />
-                    }>B/W Images</Typography>
-                    <Typography endDecorator={
-                        <Input type={"number"} value={compression} onChange={compressionValueChanged} startDecorator={
-                            <Switch disabled={backendSettings === undefined || compressionLoading}
-                                    onChange={compressionCheckedChanged}
-                                    color={compressionColor}
-                                    checked={compression < 100} />
-                        } />
-                    }>Compression</Typography>
-                </Stack>
-            </AccordionDetails>
-        </Accordion>
-    );
-}

tranga-website/src/Components/Settings/Maintenance.tsx

@@ -0,0 +1,24 @@
+import { SettingsItem } from './Settings.tsx';
+import { useContext } from 'react';
+import { ApiContext } from '../../contexts/ApiContext.tsx';
+import TButton from '../Inputs/TButton.tsx';
+
+export default function Maintenance() {
+    const Api = useContext(ApiContext);
+
+    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'}>
+            <TButton onClick={cleanUnusedManga}>Cleanup unused Manga</TButton>
+        </SettingsItem>
+    );
+}

tranga-website/src/Components/Settings/RequestLimits.tsx

@@ -1,81 +0,0 @@
-import IBackendSettings from "../../api/types/IBackendSettings.ts";
-import {useCallback, useContext, useState} from "react";
-import {ApiUriContext} from "../../api/fetchApi.tsx";
-import {
-    Accordion,
-    AccordionDetails,
-    AccordionSummary,
-    Button,
-    ColorPaletteProp,
-    Input,
-    Stack,
-    Typography
-} from "@mui/joy";
-import {RequestLimitType} from "../../api/types/EnumRequestLimitType.ts";
-import {ResetRequestLimit, ResetRequestLimits, UpdateRequestLimit} from "../../api/BackendSettings.tsx";
-import {Restore} from "@mui/icons-material";
-
-export default function RequestLimits({backendSettings}: {backendSettings?: IBackendSettings}) {
-    const apiUri = useContext(ApiUriContext);
-
-    const [color, setColor] = useState<ColorPaletteProp>("neutral");
-    const [loading, setLoading] = useState(false);
-    const Update = useCallback((target: HTMLInputElement, limit: RequestLimitType) => {
-        setLoading(true);
-        UpdateRequestLimit(apiUri, limit, Number.parseInt(target.value))
-            .then(() => setColor("success"))
-            .catch(() => setColor("danger"))
-            .finally(() => setLoading(false));
-    },[apiUri])
-
-    const Reset = useCallback((limit: RequestLimitType) => {
-        setLoading(true);
-        ResetRequestLimit(apiUri, limit)
-            .then(() => setColor("success"))
-            .catch(() => setColor("danger"))
-            .finally(() => setLoading(false));
-    }, [apiUri]);
-
-    const ResetAll = useCallback(() => {
-        setLoading(true);
-        ResetRequestLimits(apiUri)
-            .then(() => setColor("success"))
-            .catch(() => setColor("danger"))
-            .finally(() => setLoading(false));
-    }, [apiUri]);
-
-    return (
-        <Accordion>
-            <AccordionSummary>Request Limits</AccordionSummary>
-            <AccordionDetails>
-                <Stack spacing={1} direction="column">
-                    <Button loading={backendSettings === undefined} onClick={ResetAll} size={"sm"} variant={"outlined"} endDecorator={<Restore />} color={"warning"}>Reset all</Button>
-                    <Item type={RequestLimitType.Default} color={color} backendSettings={backendSettings} loading={loading} Reset={Reset} Update={Update} />
-                    <Item type={RequestLimitType.MangaInfo} color={color} backendSettings={backendSettings} loading={loading} Reset={Reset} Update={Update} />
-                    <Item type={RequestLimitType.MangaImage} color={color} backendSettings={backendSettings} loading={loading} Reset={Reset} Update={Update} />
-                    <Item type={RequestLimitType.MangaDexFeed} color={color} backendSettings={backendSettings} loading={loading} Reset={Reset} Update={Update} />
-                    <Item type={RequestLimitType.MangaDexImage} color={color} backendSettings={backendSettings} loading={loading} Reset={Reset} Update={Update} />
-                </Stack>
-            </AccordionDetails>
-        </Accordion>
-    );
-}
-
-function Item({type, color, loading, backendSettings, Reset, Update}:
-              {type: RequestLimitType, color: ColorPaletteProp, loading: boolean, backendSettings: IBackendSettings | undefined, Reset: (x: RequestLimitType) => void, Update: (a: HTMLInputElement, x: RequestLimitType) => void}) {
-    return (
-        <Input slotProps={{input: {min: 0, max: 360}}}
-               color={color}
-               startDecorator={<Typography sx={{width:"140px"}}>{type}</Typography>}
-               endDecorator={<Button onClick={() => Reset(type)}>Reset</Button>}
-               disabled={loading} type={"number"}
-               defaultValue={backendSettings?.requestLimits[type]}
-               placeholder={"Default"}
-               required
-               onKeyDown={(e) => {
-                   if(e.key == "Enter")
-                       Update(e.target as HTMLInputElement, type);
-               }}
-        />
-    );
-}

tranga-website/src/Components/Settings/Services.tsx

@@ -0,0 +1,11 @@
+import { SettingsItem } from './Settings.tsx';
+import FlareSolverr from './FlareSolverr.tsx';
+import { ReactNode } from 'react';
+
+export default function Services(): ReactNode {
+    return (
+        <SettingsItem title={'Services'}>
+            <FlareSolverr />
+        </SettingsItem>
+    );
+}

tranga-website/src/Components/Settings/Settings.tsx

@@ -0,0 +1,86 @@
+import ModalClose from '@mui/joy/ModalClose';
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionGroup,
+    AccordionSummary,
+    Button,
+    DialogContent,
+    DialogTitle,
+    Modal,
+    ModalDialog,
+} from '@mui/joy';
+import './Settings.css';
+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 default function Settings({ setApiUri }: { setApiUri: (uri: string) => void }) {
+    const Api = useContext(ApiContext);
+    const [settings, setSettings] = useState<TrangaSettings>();
+
+    const [open, setOpen] = React.useState(false);
+
+    useEffect(() => {
+        Api.settingsList().then((response) => {
+            setSettings(response.data);
+        });
+    }, [Api]);
+
+    const apiUriChanged = (value: string | number | readonly string[] | undefined) => {
+        if (typeof value != 'string') return Promise.reject();
+        setApiUri(value);
+        return Promise.resolve();
+    };
+
+    const ModalStyle: SxProps = { width: '80%', height: '80%' };
+
+    return (
+        <SettingsContext.Provider value={settings}>
+            <Button onClick={() => setOpen(true)}>Settings</Button>
+            <Modal
+                open={open}
+                onClose={() => setOpen(false)}>
+                <ModalDialog sx={ModalStyle}>
+                    <ModalClose />
+                    <DialogTitle>Settings</DialogTitle>
+                    <DialogContent>
+                        <AccordionGroup>
+                            <SettingsItem title={'ApiUri'}>
+                                <TInput
+                                    placeholder={'http(s)://'}
+                                    defaultValue={Api.baseUrl}
+                                    onSubmit={apiUriChanged}
+                                />
+                            </SettingsItem>
+                            <ImageCompression />
+                            <FlareSolverr />
+                            <DownloadLanguage />
+                            <ChapterNamingScheme />
+                            <Maintenance />
+                        </AccordionGroup>
+                    </DialogContent>
+                </ModalDialog>
+            </Modal>
+        </SettingsContext.Provider>
+    );
+}
+
+export function SettingsItem({ title, children }: { title: string; children: ReactNode }) {
+    return (
+        <Accordion>
+            <AccordionSummary>{title}</AccordionSummary>
+            <AccordionDetails>{children}</AccordionDetails>
+        </Accordion>
+    );
+}

tranga-website/src/Components/Settings/UserAgent.tsx

@@ -1,60 +0,0 @@
-import IBackendSettings from "../../api/types/IBackendSettings";
-import {
-    Accordion,
-    AccordionDetails,
-    AccordionSummary,
-    Button,
-    ColorPaletteProp,
-    Input
-} from "@mui/joy";
-import {KeyboardEventHandler, useCallback, useContext, useEffect, useState} from "react";
-import {ApiUriContext} from "../../api/fetchApi.tsx";
-import {GetUserAgent, ResetUserAgent, UpdateUserAgent} from "../../api/BackendSettings.tsx";
-
-export default function UserAgent({backendSettings}: {backendSettings?: IBackendSettings}) {
-    const apiUri = useContext(ApiUriContext);
-    const [loading, setLoading] = useState<boolean>(false);
-    const [value, setValue] = useState<string>(backendSettings?.userAgent??"");
-    const [color, setColor] = useState<ColorPaletteProp>("neutral");
-
-    const keyDown : KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
-        if(value === undefined) return;
-        if(e.key === "Enter") {
-            setLoading(true);
-            UpdateUserAgent(apiUri, value)
-                .then(() => setColor("success"))
-                .catch(() => setColor("danger"))
-                .finally(() => setLoading(false));
-        }
-    }, [apiUri, value])
-
-    const Reset = useCallback(() => {
-        setLoading(true);
-        ResetUserAgent(apiUri)
-            .then(() => GetUserAgent(apiUri))
-            .then((val) => setValue(val))
-            .then(() => setColor("success"))
-            .catch(() => setColor("danger"))
-            .finally(() => setLoading(false));
-    }, [apiUri]);
-
-    useEffect(() => {
-        setValue(backendSettings?.userAgent??"");
-    }, [backendSettings]);
-
-    return (
-        <Accordion>
-            <AccordionSummary>UserAgent</AccordionSummary>
-            <AccordionDetails>
-                <Input disabled={backendSettings === undefined || loading}
-                       placeholder={"UserAgent"}
-                       value={value}
-                       onKeyDown={keyDown}
-                       onChange={e => setValue(e.target.value)}
-                       color={color}
-                       endDecorator={<Button onClick={Reset} loading={loading}>Reset</Button>}
-                />
-            </AccordionDetails>
-        </Accordion>
-    );
-}

tranga-website/src/Header.css

@@ -1,5 +1,6 @@
 .header {
-    position: static !important;
+    position: sticky !important;
+    z-index: 1000;
     top: 0;
     left: 0;
     width: 100%;

tranga-website/src/Header.tsx

@@ -1,24 +1,74 @@
-import Sheet from "@mui/joy/Sheet";
+import Sheet from '@mui/joy/Sheet';
-import {Box, Stack, Typography} from "@mui/joy";
+import { Link, Stack, Typography } from '@mui/joy';
-import {ReactElement} from "react";
+import { ReactElement, ReactNode, useContext } from 'react';
 import './Header.css';
+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"}>
+        <Sheet className={'header'}>
-            <Stack direction={"row"} spacing={2} sx={{width: "100%"}}>
+            <Stack
-                <img src={"/blahaj.png"} style={{cursor: "grab"}}/>
+                direction={'row'}
-                <Typography level={"h2"} sx={{
+                spacing={2}
-                    background: "linear-gradient(110deg, var(--joy-palette-primary-solidBg), var(--joy-palette-success-400))", 
+                sx={{ width: '100%', alignItems: 'center', justifyContent: 'space-between' }}
-                    WebkitBackgroundClip: "text",
+                useFlexGap>
-                    WebkitTextFillColor: "transparent",
+                <Stack
-                    fontWeight: "bold",
+                    sx={{ flexGrow: 1, flexBasis: 1 }}
-                    cursor: "default"
+                    direction={'row'}
-                }}>Tranga</Typography>
+                    spacing={2}>
-                <Box sx={{flexGrow: 1}} />
                     {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>
+                <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>
     );
 }

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;
+    }
+}

tranga-website/src/Settings.tsx

@@ -1,122 +0,0 @@
-import Drawer from '@mui/joy/Drawer';
-import ModalClose from '@mui/joy/ModalClose';
-import {
-    Accordion,
-    AccordionDetails,
-    AccordionGroup,
-    AccordionSummary, CircularProgress, ColorPaletteProp,
-    DialogContent,
-    DialogTitle, Input
-} from "@mui/joy";
-import './Settings.css';
-import * as React from "react";
-import {useCallback, useContext, useEffect, useState} from "react";
-import {ApiUriContext} from "./api/fetchApi.tsx";
-import IBackendSettings from "./api/types/IBackendSettings.ts";
-import { GetSettings } from './api/BackendSettings.tsx';
-import UserAgent from "./Components/Settings/UserAgent.tsx";
-import ImageProcessing from "./Components/Settings/ImageProcessing.tsx";
-import ChapterNamingScheme from "./Components/Settings/ChapterNamingScheme.tsx";
-import AprilFoolsMode from './Components/Settings/AprilFoolsMode.tsx';
-import RequestLimits from "./Components/Settings/RequestLimits.tsx";
-import FlareSolverr from "./Components/Settings/FlareSolverr.tsx";
-
-const checkConnection  = async (apiUri: string): Promise<boolean> =>{
-    return fetch(`${apiUri}/swagger/v2/swagger.json`,
-        {
-            method: 'GET',
-        })
-        .then((response) => {
-            if(!(response.ok && response.status == 200))
-                return false;
-            return response.json().then((json) => (json as {openapi:string}).openapi.match("[0-9]+(?:\.[0-9]+)+")?true:false).catch(() => false);
-        })
-        .catch(() => {
-            return false;
-        });
-}
-
-export default function Settings({open, setOpen, setApiUri, setConnected}:{open:boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>, setApiUri:React.Dispatch<React.SetStateAction<string>>, setConnected:React.Dispatch<React.SetStateAction<boolean>>}) {
-
-    const apiUri = useContext(ApiUriContext);
-
-    const [apiUriColor, setApiUriColor] = useState<ColorPaletteProp>("neutral");
-    const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
-
-    const [apiUriAccordionOpen, setApiUriAccordionOpen] = React.useState(true);
-    const [checking, setChecking] = useState(false);
-
-    useEffect(() => {
-        OnCheckConnection(apiUri);
-    }, []);
-
-    const apiUriChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
-        clearTimeout(timerRef.current);
-        setApiUriColor("warning");
-        timerRef.current = setTimeout(() => {
-            OnCheckConnection(e.target.value);
-        }, 1000);
-    }
-
-    const OnCheckConnection = (uri: string) => {
-        console.log("Checking connection...");
-        setChecking(true);
-        checkConnection(uri)
-            .then((result) => {
-                setConnected(result);
-                if(result)
-                    console.log("Connected!");
-                setApiUriAccordionOpen(!result);
-                setApiUriColor(result ? "success" : "danger");
-                if(result)
-                    setApiUri(uri);
-            })
-            .finally(() => setChecking(false));
-    }
-
-    const [backendSettings, setBackendSettings] = useState<IBackendSettings>();
-
-    const getBackendSettings = useCallback(() => {
-        GetSettings(apiUri).then(setBackendSettings);
-    }, [apiUri]);
-
-    useEffect(() => {
-        getBackendSettings();
-    }, [checking]);
-
-    return (
-        <Drawer size={"lg"} open={open} onClose={() => setOpen(false)}>
-            <ModalClose />
-            <DialogTitle>Settings</DialogTitle>
-            <DialogContent>
-                <AccordionGroup>
-                    <Accordion expanded={apiUriAccordionOpen} onChange={(_e, expanded) => setApiUriAccordionOpen(expanded)}>
-                        <AccordionSummary>ApiUri</AccordionSummary>
-                        <AccordionDetails>
-                            <Input
-                                disabled={checking}
-                                color={apiUriColor}
-                                placeholder={"http(s)://"}
-                                type={"url"}
-                                defaultValue={apiUri}
-                                onChange={apiUriChanged}
-                                onKeyDown={(e) => {
-                                    if(e.key === "Enter") {
-                                        clearTimeout(timerRef.current);
-                                        OnCheckConnection(e.currentTarget.value);
-                                    }
-                                }}
-                                endDecorator={(checking ? <CircularProgress color={apiUriColor} size={"sm"} /> : null)} />
-                        </AccordionDetails>
-                    </Accordion>
-                    <UserAgent backendSettings={backendSettings} />
-                    <ImageProcessing backendSettings={backendSettings} />
-                    <ChapterNamingScheme backendSettings={backendSettings} />
-                    <AprilFoolsMode backendSettings={backendSettings} />
-                    <RequestLimits backendSettings={backendSettings} />
-                    <FlareSolverr backendSettings={backendSettings} />
-                </AccordionGroup>
-            </DialogContent>
-        </Drawer>
-    );
-}

tranga-website/src/api/BackendSettings.tsx

@@ -1,92 +0,0 @@
-import {deleteData, getData, patchData, postData} from './fetchApi.tsx';
-import IBackendSettings from "./types/IBackendSettings.ts";
-import IRequestLimits from "./types/IRequestLimits.ts";
-import {RequestLimitType} from "./types/EnumRequestLimitType.ts";
-
-export const GetSettings = async (apiUri: string) : Promise<IBackendSettings> => {
-    return await getData(`${apiUri}/v2/Settings`) as Promise<IBackendSettings>;
-}
-
-export const GetUserAgent = async (apiUri: string) : Promise<string> => {
-    return await getData(`${apiUri}/v2/Settings/UserAgent`) as Promise<string>;
-}
-
-export const UpdateUserAgent = async (apiUri: string, userAgent: string)=>  {
-    if(userAgent === undefined || userAgent === null)
-        return Promise.reject(`userAgent was not provided`);
-    return patchData(`${apiUri}/v2/Settings/UserAgent`, userAgent);
-}
-
-export const ResetUserAgent = async (apiUri: string) => {
-    return deleteData(`${apiUri}/v2/Settings/UserAgent`);
-}
-
-export const GetRequestLimits = async(apiUri: string) : Promise<IRequestLimits> => {
-    return await getData(`${apiUri}/v2/Settings/RequestLimits`) as Promise<IRequestLimits>;
-}
-
-export const ResetRequestLimits = async (apiUri: string) => {
-    return deleteData(`${apiUri}/v2/Settings/RequestLimits`);
-}
-
-export const UpdateRequestLimit = async (apiUri: string, requestType: RequestLimitType, value: number) => {
-    if(requestType === undefined || requestType === null || value === undefined || value === null)
-        return Promise.reject();
-    return patchData(`${apiUri}/v2/Settings/RequestLimits/${requestType}`, value);
-}
-
-export const ResetRequestLimit = async (apiUri: string, requestType: RequestLimitType) => {
-    if(requestType === undefined || requestType === null)
-        return Promise.reject("requestType was not provided");
-    return deleteData(`${apiUri}/v2/Settings/RequestLimits/${requestType}`);
-}
-
-export const GetImageCompressionValue = async (apiUri: string) : Promise<number> => {
-    return await getData(`${apiUri}/v2/Settings/ImageCompression`) as Promise<number>;
-}
-
-export const UpdateImageCompressionValue = async (apiUri: string, value: number) => {
-    if(value === undefined || value === null)
-        return Promise.reject("value was not provided");
-    return patchData(`${apiUri}/v2/Settings/ImageCompression`, value);
-}
-
-export const GetBWImageToggle = async (apiUri: string) : Promise<boolean> => {
-    return await getData(`${apiUri}/v2/Settings/BWImages`) as Promise<boolean>;
-}
-
-export const UpdateBWImageToggle = async (apiUri: string, value: boolean) => {
-    if(value === undefined || value === null)
-        return Promise.reject("value was not provided");
-    return patchData(`${apiUri}/v2/Settings/BWImages`, value);
-}
-
-export const GetAprilFoolsToggle = async (apiUri: string) : Promise<boolean> => {
-    return await getData(`${apiUri}/v2/Settings/AprilFoolsMode`) as Promise<boolean>;
-}
-
-export const UpdateAprilFoolsToggle = async (apiUri: string, value: boolean) => {
-    if(value === undefined || value === null)
-        return Promise.reject("value was not provided");
-    return patchData(`${apiUri}/v2/Settings/AprilFoolsMode`, value);
-}
-
-export const GetChapterNamingScheme = async (apiUri: string) : Promise<string> => {
-    return await getData(`${apiUri}/v2/Settings/ChapterNamingScheme`) as Promise<string>;
-}
-
-export const UpdateChapterNamingScheme = async (apiUri: string, value: string) => {
-    return patchData(`${apiUri}/v2/Settings/ChapterNamingScheme`, value);
-}
-
-export const SetFlareSolverrUrl = async (apiUri: string, value: string) => {
-    return postData(`${apiUri}/v2/Settings/FlareSolverr/Url`, value);
-}
-
-export const ResetFlareSolverrUrl = async (apiUri: string) => {
-    return deleteData(`${apiUri}/v2/Settings/FlareSolverr/Url`);
-}
-
-export const TestFlareSolverrUrl = async (apiUri: string) => {
-    return postData(`${apiUri}/v2/Settings/FlareSolverr/Test`);
-}

tranga-website/src/api/Chapter.tsx

@@ -1,8 +0,0 @@
-import {getData} from "./fetchApi.tsx";
-import IChapter from "./types/IChapter.ts";
-
-export const GetChapterFromId = async (apiUri: string, chapterId: string): Promise<IChapter> => {
-    if(chapterId === undefined || chapterId === null)
-        return Promise.reject(`chapterId was not provided`);
-    return await getData(`${apiUri}/v2/Query/Chapter/${chapterId}`) as Promise<IChapter>;
-}

tranga-website/src/api/Contexts/ChapterContext.tsx

@@ -1,9 +0,0 @@
-import {createContext} from "react";
-import IChapter from "../types/IChapter.ts";
-
-export const ChapterContext = createContext<{chapters: IChapter[], GetChapter: (chapterId: string) => Promise<IChapter | undefined>}>(
-    {
-        chapters : [],
-        GetChapter: _ => Promise.resolve(undefined)
-    }
-);

tranga-website/src/api/Contexts/MangaConnectorContext.tsx

@@ -1,4 +0,0 @@
-import {createContext} from "react";
-import IMangaConnector from "../types/IMangaConnector.ts";
-
-export const MangaConnectorContext = createContext<IMangaConnector[]>([]);

tranga-website/src/api/Contexts/MangaContext.tsx

@@ -1,9 +0,0 @@
-import {createContext} from "react";
-import IManga, {DefaultManga} from "../types/IManga.ts";
-
-export const MangaContext = createContext<{mangas: IManga[], GetManga: (mangaId: string) => Promise<IManga | undefined>}>(
-    {
-        mangas : [],
-        GetManga: _ => Promise.resolve(DefaultManga)
-    }
-);

tranga-website/src/api/Job.tsx

@@ -1,97 +0,0 @@
-import {deleteData, getData, patchData, postData, putData} from "./fetchApi";
-import IJob, {JobState, JobType} from "./types/Jobs/IJob";
-import IModifyJobRecord from "./types/records/IModifyJobRecord";
-import IDownloadAvailableChaptersJobRecord from "./types/records/IDownloadAvailableChaptersJobRecord.ts";
-
-export const GetAllJobs = async (apiUri: string) : Promise<IJob[]> => {
-    return await getData(`${apiUri}/v2/Job`) as Promise<IJob[]>;
-}
-
-export const GetJobsWithIds = async (apiUri: string, jobIds: string[]) : Promise<IJob[]> => {
-    if(jobIds === null || jobIds === undefined || jobIds.length === 0)
-        return Promise.reject("jobIds was not provided");
-    return await postData(`${apiUri}/v2/Job/WithIDs`, jobIds) as Promise<IJob[]>;
-}
-
-export const GetJobsInState = async (apiUri: string, state: JobState) : Promise<IJob[]> => {
-    if(state == null || state == undefined)
-        return Promise.reject("state was not provided");
-    return await getData(`${apiUri}/v2/Job/State/${state}`) as Promise<IJob[]>;
-}
-
-export const GetJobsWithType = async (apiUri: string, jobType: JobType) : Promise<IJob[]> => {
-    if(jobType == null || jobType == undefined) {
-        return Promise.reject("jobType was not provided");
-    }
-    return await getData(`${apiUri}/v2/Job/Type/${jobType}`) as Promise<IJob[]>;
-}
-
-export const GetJobsOfTypeAndWithState = async (apiUri: string, jobType: JobType, state: JobState) : Promise<IJob[]> => {
-    if(jobType == null || jobType == undefined)
-        return Promise.reject("jobType was not provided");
-    if(state == null || state == undefined)
-        return Promise.reject("state was not provided");
-    return await getData(`${apiUri}/v2/Job/TypeAndState/${jobType}/${state}`) as Promise<IJob[]>;
-}
-
-export const GetJob = async (apiUri: string, jobId: string) : Promise<IJob> => {
-    if(jobId === undefined || jobId === null || jobId.length < 1)
-        return Promise.reject("jobId was not provided");
-    return await getData(`${apiUri}/v2/Job/${jobId}`) as Promise<IJob>;
-}
-
-export const DeleteJob = async (apiUri: string, jobId: string) : Promise<void> => {
-    if(jobId === undefined || jobId === null || jobId.length < 1)
-        return Promise.reject("jobId was not provided");
-    return await deleteData(`${apiUri}/v2/Job/${jobId}`);
-}
-
-export const ModifyJob = async (apiUri: string, jobId: string, modifyData: IModifyJobRecord) : Promise<IJob> => {
-    if(jobId === undefined || jobId === null || jobId.length < 1)
-        return Promise.reject("jobId was not provided");
-    if(modifyData === undefined || modifyData === null)
-        return Promise.reject("modifyData was not provided");
-    return await patchData(`${apiUri}/v2/Job/${jobId}`, modifyData) as Promise<IJob>;
-}
-
-export const CreateDownloadAvailableChaptersJob = async (apiUri: string, mangaId: string, data: IDownloadAvailableChaptersJobRecord) : Promise<string[]> => {
-    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
-        return Promise.reject("mangaId was not provided");
-    if(data === undefined || data === null)
-        return Promise.reject("data was not provided");
-    return await putData(`${apiUri}/v2/Job/DownloadAvailableChaptersJob/${mangaId}`, data) as Promise<string[]>;
-}
-
-export const CreateDownloadSingleChapterJob = async (apiUri: string, chapterId: string) : Promise<string[]> => {
-    if(chapterId === undefined || chapterId === null || chapterId.length < 1)
-        return Promise.reject("chapterId was not provided");
-    return await putData(`${apiUri}/v2/Job/DownloadSingleChapterJob/${chapterId}`, {}) as Promise<string[]>;
-}
-
-export const CreateUpdateFilesJob = async (apiUri: string, mangaId: string) : Promise<string[]> => {
-    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
-        return Promise.reject("mangaId was not provided");
-    return await putData(`${apiUri}/v2/Job/UpdateFilesJob/${mangaId}`, {}) as Promise<string[]>;
-}
-
-export const CreateUpdateAllFilesJob = async (apiUri: string) : Promise<string[]> => {
-    return await putData(`${apiUri}/v2/Job/UpdateAllFilesJob`, {}) as Promise<string[]>;
-}
-
-export const CreateUpdateMetadataJob = async (apiUri: string, mangaId: string) : Promise<string[]> => {
-    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
-        return Promise.reject("mangaId was not provided");
-    return await putData(`${apiUri}/v2/Job/UpdateMetadataJob/${mangaId}`, {}) as Promise<string[]>;
-}
-
-export const CreateUpdateAllMetadataJob = async (apiUri: string) : Promise<string[]> => {
-    return await putData(`${apiUri}/v2/Job/UpdateAllMetadataJob`, {}) as Promise<string[]>;
-}
-
-export const StartJob = async (apiUri: string, jobId: string, startDependencies: boolean) : Promise<object | undefined> => {
-    return await postData(`${apiUri}/v2/Job/${jobId}/Start`, startDependencies);
-}
-
-export const StopJob = async (apiUri: string, jobId: string) : Promise<object | undefined> => {
-    return await postData(`${apiUri}/v2/Job/${jobId}/Stop`);
-}

tranga-website/src/api/LocalLibrary.tsx

@@ -1,31 +0,0 @@
-import ILocalLibrary from "./types/ILocalLibrary.ts";
-import {deleteData, getData, patchData, putData} from "./fetchApi.tsx";
-import INewLibraryRecord from "./types/records/INewLibraryRecord.ts";
-
-export const GetLibraries = async (apiUri: string) : Promise<ILocalLibrary[]> => {
-    return await getData(`${apiUri}/v2/LocalLibraries`) as Promise<ILocalLibrary[]>;
-}
-
-export const  GetLibrary = async (apiUri: string, libraryId: string) : Promise<ILocalLibrary> => {
-    return await getData(`${apiUri}/v2/LocalLibraries/${libraryId}`) as Promise<ILocalLibrary>;
-}
-
-export const  CreateLibrary = async (apiUri: string, data: INewLibraryRecord) : Promise<ILocalLibrary> => {
-    return await putData(`${apiUri}/v2/LocalLibraries`, data) as Promise<ILocalLibrary>
-}
-
-export const  DeleteLibrary = async (apiUri: string, libraryId: string) : Promise<void> => {
-    return await deleteData(`${apiUri}/v2/LocalLibraries/${libraryId}`);
-}
-
-export const  ChangeLibraryPath = async (apiUri: string, libraryId: string, newPath: string) : Promise<object | undefined> => {
-    return await patchData(`${apiUri}/v2/LocalLibraries/${libraryId}/ChangeBasePath`, newPath);
-}
-
-export const  ChangeLibraryName = async (apiUri: string, libraryId: string, newName: string) : Promise<object | undefined> => {
-    return await patchData(`${apiUri}/v2/LocalLibraries/${libraryId}/ChangeName`, newName);
-}
-
-export const  UpdateLibrary = async (apiUri: string, libraryId: string, record: INewLibraryRecord) : Promise<object | undefined> => {
-    return await patchData(`${apiUri}/v2/LocalLibraries/${libraryId}`, record);
-}

tranga-website/src/api/Manga.tsx

@@ -1,97 +0,0 @@
-import {deleteData, getData, patchData, postData} from './fetchApi.tsx';
-import IManga, {DefaultManga} from "./types/IManga.ts";
-import IChapter from "./types/IChapter.ts";
-
-export const GetAllManga = async (apiUri: string) : Promise<IManga[]> => {
-    return await getData(`${apiUri}/v2/Manga`) as Promise<IManga[]>;
-}
-
-export const GetMangaWithIds = async (apiUri: string, mangaIds: string[]) : Promise<IManga[]> => {
-    if(mangaIds === undefined || mangaIds === null || mangaIds.length < 1)
-        return Promise.reject("mangaIds was not provided");
-    return await postData(`${apiUri}/v2/Manga/WithIds`, mangaIds) as Promise<IManga[]>;
-}
-
-export const GetMangaById = async (apiUri: string, mangaId: string) : Promise<IManga> => {
-    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
-        return Promise.reject("mangaId was not provided");
-    if(mangaId === DefaultManga.mangaId)
-        return Promise.reject("Default Manga was requested");
-    return await getData(`${apiUri}/v2/Manga/${mangaId}`) as Promise<IManga>;
-}
-
-export const DeleteManga = async (apiUri: string, mangaId: string) : Promise<void> => {
-    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
-        return Promise.reject("mangaId was not provided");
-    if(mangaId === DefaultManga.mangaId)
-        return Promise.reject("Default Manga was requested");
-    return await deleteData(`${apiUri}/v2/Manga/${mangaId}`);
-}
-
-export const GetMangaCoverImageUrl = (apiUri: string, mangaId: string, ref: HTMLImageElement | undefined | null) : string => {
-    if(ref == null || ref == undefined)
-        return `${apiUri}/v2/Manga/${mangaId}/Cover?width=64&height=64`;
-    if(mangaId === DefaultManga.mangaId)
-        return "/blahaj.png";
-    return `${apiUri}/v2/Manga/${mangaId}/Cover?width=${ref.clientWidth}&height=${ref.clientHeight}`;
-}
-
-export const GetChapters = async (apiUri: string, mangaId: string) : Promise<IChapter[]> => {
-    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
-        return Promise.reject("mangaId was not provided");
-    if(mangaId === DefaultManga.mangaId)
-        return Promise.reject("Default Manga was requested");
-    return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapters`) as Promise<IChapter[]>;
-}
-
-export const  GetDownloadedChapters = async (apiUri: string, mangaId: string) : Promise<IChapter[]> => {
-    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
-        return Promise.reject("mangaId was not provided");
-    if(mangaId === DefaultManga.mangaId)
-        return Promise.reject("Default Manga was requested");
-    return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapters/Downloaded`) as Promise<IChapter[]>;
-}
-
-export const  GetNotDownloadedChapters = async (apiUri: string, mangaId: string) : Promise<IChapter[]> => {
-    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
-        return Promise.reject("mangaId was not provided");
-    if(mangaId === DefaultManga.mangaId)
-        return Promise.reject("Default Manga was requested");
-    return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapters/NotDownloaded`) as Promise<IChapter[]>;
-}
-
-export const  GetLatestChapterAvailable = async (apiUri: string, mangaId: string) : Promise<IChapter> => {
-    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
-        return Promise.reject("mangaId was not provided");
-    if(mangaId === DefaultManga.mangaId)
-        return Promise.reject("Default Manga was requested");
-    return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapter/LatestAvailable`) as Promise<IChapter>;
-}
-
-export const  GetLatestChapterDownloaded = async (apiUri: string, mangaId: string) : Promise<IChapter> => {
-    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
-        return Promise.reject("mangaId was not provided");
-    if(mangaId === DefaultManga.mangaId)
-        return Promise.reject("Default Manga was requested");
-    return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapter/LatestDownloaded`) as Promise<IChapter>;
-}
-
-export const  SetIgnoreThreshold = async (apiUri: string, mangaId: string, chapterThreshold: number) : Promise<object | undefined> => {
-    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
-        return Promise.reject("mangaId was not provided");
-    if(chapterThreshold === undefined || chapterThreshold === null)
-        return Promise.reject("chapterThreshold was not provided");
-    if(mangaId === DefaultManga.mangaId)
-        return Promise.reject("Default Manga was requested");
-    return await patchData(`${apiUri}/v2/Manga/${mangaId}/IgnoreChaptersBefore`, chapterThreshold);
-}
-
-export const MoveFolder = async (apiUri: string, mangaId: string, newPath: string) : Promise<object | undefined> => {
-    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
-        return Promise.reject("mangaId was not provided");
-    if(newPath === undefined || newPath === null || newPath.length < 1)
-        return Promise.reject("newPath was not provided");
-    if(mangaId === DefaultManga.mangaId)
-        return Promise.reject("Default Manga was requested");
-    return await postData(`${apiUri}/v2/Manga/{MangaId}/MoveFolder`, {newPath});
-}

tranga-website/src/api/MangaConnector.tsx

@@ -1,26 +0,0 @@
-import {getData, patchData} from './fetchApi.tsx';
-import IMangaConnector from "./types/IMangaConnector.ts";
-
-export const GetAllConnectors = async (apiUri: string) : Promise<IMangaConnector[]> => {
-    return await getData(`${apiUri}/v2/MangaConnector`) as Promise<IMangaConnector[]>
-}
-
-export const GetConnector = async (apiUri: string, mangaConnectorName: string) : Promise<IMangaConnector> => {
-    return await getData(`${apiUri}/v2/MangaConnector/${mangaConnectorName}`) as Promise<IMangaConnector>;
-}
-
-export const  GetEnabledConnectors = async (apiUri: string) : Promise<IMangaConnector[]> => {
-    return await getData(`${apiUri}/v2/MangaConnector/enabled`) as Promise<IMangaConnector[]>
-}
-
-export const  GetDisabledConnectors = async (apiUri: string) : Promise<IMangaConnector[]> => {
-    return await getData(`${apiUri}/v2/MangaConnector/disabled`) as Promise<IMangaConnector[]>
-}
-
-export const  SetConnectorEnabled = async (apiUri: string, connectorName: string, enabled: boolean) : Promise<object | undefined> => {
-    if(connectorName === undefined || connectorName === null || connectorName.length < 1)
-        return Promise.reject("connectorName was not provided");
-    if(enabled === undefined || enabled === null)
-        return Promise.reject("enabled was not provided");
-    return await patchData(`${apiUri}/v2/MangaConnector/${connectorName}/SetEnabled/${enabled}`, {});
-}

tranga-website/src/api/NotificationConnector.tsx

@@ -1,45 +0,0 @@
-import {deleteData, getData, putData} from "./fetchApi.tsx";
-import INotificationConnector from "./types/INotificationConnector.ts";
-import IGotifyRecord from "./types/records/IGotifyRecord.ts";
-import INtfyRecord from "./types/records/INtfyRecord.ts";
-import IPushoverRecord from "./types/records/IPushoverRecord.ts";
-
-export const  GetNotificationConnectors = async (apiUri: string) : Promise<INotificationConnector[]> => {
-    return await getData(`${apiUri}/v2/NotificationConnector`) as Promise<INotificationConnector[]>
-}
-
-export const  CreateNotificationConnector = async (apiUri: string, newConnector: INotificationConnector) : Promise<string> => {
-    if(newConnector === undefined || newConnector === null)
-        return Promise.reject("newConnector was not provided");
-    return await putData(`${apiUri}/v2/NotificationConnector`, newConnector) as Promise<string>;
-}
-
-export const  GetNotificationConnectorWithId = async (apiUri: string, notificationConnectorId: string) : Promise<INotificationConnector> => {
-    if(notificationConnectorId === undefined || notificationConnectorId === null || notificationConnectorId.length < 1)
-        return Promise.reject("notificationConnectorId was not provided");
-    return await getData(`${apiUri}/v2/NotificationConnector/${notificationConnectorId}`) as Promise<INotificationConnector>;
-}
-
-export const  DeleteNotificationConnectorWithId = async (apiUri: string, notificationConnectorId: string) : Promise<void> => {
-    if(notificationConnectorId === undefined || notificationConnectorId === null || notificationConnectorId.length < 1)
-        return Promise.reject("notificationConnectorId was not provided");
-    return await deleteData(`${apiUri}/v2/NotificationConnector/${notificationConnectorId}`);
-}
-
-export const  CreateGotify = async (apiUri: string, gotify: IGotifyRecord) : Promise<string> => {
-    if(gotify === undefined || gotify === null)
-        return Promise.reject("gotify was not provided");
-    return await putData(`${apiUri}/v2/NotificationConnector/Gotify`, gotify) as Promise<string>;
-}
-
-export const  CreateNtfy = async (apiUri: string, ntfy: INtfyRecord) : Promise<string> => {
-    if(ntfy === undefined || ntfy === null)
-        return Promise.reject("gotify was not provided");
-    return await putData(`${apiUri}/v2/NotificationConnector/Ntfy`, ntfy) as Promise<string>;
-}
-
-export const  CreatePushover = async (apiUri: string, pushover: IPushoverRecord) : Promise<string> => {
-    if(pushover === undefined || pushover === null)
-        return Promise.reject("pushover was not provided");
-    return await putData(`${apiUri}/v2/NotificationConnector/Pushover`, pushover) as Promise<string>;
-}

tranga-website/src/api/Query.tsx

@@ -1,15 +0,0 @@
-import IAuthor from "./types/IAuthor.ts";
-import {getData} from "./fetchApi.tsx";
-import ILink from "./types/ILink.ts";
-
-export const GetAuthor = async (apiUri: string, authorId: string) : Promise<IAuthor> => {
-    if(authorId === undefined || authorId === null || authorId.length < 1)
-        return Promise.reject("authorId was not provided");
-    return await getData(`${apiUri}/v2/Query/Author/${authorId}`) as Promise<IAuthor>;
-}
-
-export const GetLink = async (apiUri: string, linkId: string) : Promise<ILink> => {
-    if(linkId === undefined || linkId === null || linkId.length < 1)
-        return Promise.reject("linkId was not provided");
-    return await getData(`${apiUri}/v2/Query/Link/${linkId}`) as Promise<ILink>;
-}

tranga-website/src/api/Search.tsx

@@ -1,22 +0,0 @@
-import {getData, postData} from "./fetchApi.tsx";
-import IManga from "./types/IManga.ts";
-
-export const SearchName = async (apiUri: string, name: string) : Promise<IManga[]> => {
-    if(name === undefined || name === null || name.length < 1)
-        return Promise.reject("name was not provided");
-    return await postData(`${apiUri}/v2/Search/Name`, name) as Promise<IManga[]>;
-}
-
-export const SearchNameOnConnector = async (apiUri: string, connectorName: string, name: string) : Promise<IManga[]> => {
-    if(connectorName === undefined || connectorName === null || connectorName.length < 1)
-        return Promise.reject("connectorName was not provided");
-    if(name === undefined || name === null || name.length < 1)
-        return Promise.reject("name was not provided");
-    return await getData(`${apiUri}/v2/Search/${connectorName}/${name}`) as Promise<IManga[]>;
-}
-
-export const SearchUrl = async (apiUri: string, url: string) : Promise<IManga> => {
-    if(url === undefined || url === null || url.length < 1)
-        return Promise.reject("name was not provided");
-    return await postData(`${apiUri}/v2/Search/Url`, url) as Promise<IManga>;
-}

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;
+}

tranga-website/src/api/fetchApi.tsx

@@ -1,89 +0,0 @@
-import {createContext} from "react";
-
-export const ApiUriContext = createContext<string>("");
-
-export function getData(uri: string) : Promise<object | undefined> {
-    return makeRequestWrapper("GET", uri, null);
-}
-
-export function postData(uri: string, content?: object | string | number | boolean | null) : Promise<object | undefined> {
-    return makeRequestWrapper("POST", uri, content);
-}
-
-export function deleteData(uri: string) : Promise<void> {
-    return makeRequestWrapper("DELETE", uri, null) as Promise<void>;
-}
-
-export function patchData(uri: string, content: object | string | number | boolean) : Promise<object | undefined> {
-    return makeRequestWrapper("patch", uri, content);
-}
-
-export function putData(uri: string, content: object | string | number | boolean) : Promise<object | undefined> {
-    return makeRequestWrapper("PUT", uri, content);
-}
-
-function makeRequestWrapper(method: string, uri: string, content?: object | string | number | null | boolean) : Promise<object | undefined>{
-    return makeRequest(method, uri, content)
-        .then((result) => result as Promise<object>)
-        .catch((e) => {
-            console.warn(e);
-            return Promise.reject(e);
-        });
-}
-
-let currentlyRequestedEndpoints: string[] = [];
-function makeRequest(method: string, uri: string, content?: object | string | number | null | boolean) : Promise<object | void> {
-    const id = method + uri;
-    if(currentlyRequestedEndpoints.find(x => x == id) != undefined)
-        return Promise.reject(`DO NOT REPORT! Already requested: ${method} ${uri}`);
-    currentlyRequestedEndpoints.push(id);
-    return fetch(uri,
-        {
-            method: method,
-            headers : {
-                'Content-Type': 'application/json',
-                'Accept': 'application/json'
-            },
-            body: content ? JSON.stringify(content) : null
-        })
-        .then(function(response){
-            if(!response.ok){
-                if(response.status === 503){
-                    currentlyRequestedEndpoints.splice(currentlyRequestedEndpoints.indexOf(id), 1)
-                    let retryHeaderVal = response.headers.get("Retry-After");
-                    let seconds = 10;
-                    if(retryHeaderVal === null){
-                        return response.text().then(text => {
-                            seconds = parseInt(text);
-                            return new Promise(resolve => setTimeout(resolve, seconds * 1000))
-                                .then(() => {
-                                    return makeRequest(method, uri, content);
-                                });
-                        });
-                    }else {
-                        seconds = parseInt(retryHeaderVal);
-                        return new Promise(resolve => setTimeout(resolve, seconds * 1000))
-                            .then(() => {
-                                return makeRequest(method, uri, content);
-                            });
-                    }
-                }else
-                    throw new Error(response.statusText);
-            }
-            let json = response.json();
-            return json.then((json) => json).catch(() => null);
-        })
-        .catch(function(err : Error){
-            console.error(`Error ${method}ing Data ${uri}\n${err}`);
-            return Promise.reject();
-        }).finally(() => currentlyRequestedEndpoints.splice(currentlyRequestedEndpoints.indexOf(id), 1));
-}
-
-export function isValidUri(uri: string) : boolean{
-    try {
-        new URL(uri);
-        return true;
-    } catch (err) {
-        return false;
-    }
-}

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;
+        });
+    };
+}

tranga-website/src/api/types/EnumMangaReleaseStatus.ts

@@ -1,24 +0,0 @@
-import {ColorPaletteProp} from "@mui/joy";
-
-export enum MangaReleaseStatus {
-    Continuing = "Continuing",
-    Completed = "Completed",
-    OnHiatus = "OnHiatus",
-    Cancelled = "Cancelled",
-    Unreleased = "Unreleased",
-}
-
-export function ReleaseStatusToPalette(status: MangaReleaseStatus): ColorPaletteProp {
-    switch (status) {
-        case MangaReleaseStatus.Continuing:
-            return "success";
-        case MangaReleaseStatus.Completed:
-            return "primary";
-        case MangaReleaseStatus.Cancelled:
-            return "danger";
-        case MangaReleaseStatus.Unreleased:
-            return "neutral";
-        case MangaReleaseStatus.OnHiatus:
-            return "warning";
-    }
-}

tranga-website/src/api/types/EnumRequestLimitType.ts

@@ -1,8 +0,0 @@
-export enum RequestLimitType {
-    Default = "Default",
-    MangaDexFeed = "MangaDexFeed",
-    MangaImage = "MangaImage",
-    MangaCover = "MangaCover",
-    MangaDexImage = "MangaDexImage",
-    MangaInfo = "MangaInfo"
-}

tranga-website/src/api/types/IAuthor.ts

@@ -1,4 +0,0 @@
-export default interface IAuthor {
-    authorId: string;
-    authorName: string;
-}

tranga-website/src/api/types/IBackendSettings.ts

@@ -1,19 +0,0 @@
-export default interface IBackendSettings {
-    downloadLocation: string;
-    workingDirectory: string;
-    userAgent: string;
-    aprilFoolsMode: boolean;
-    requestLimits: {
-        Default: number,
-        MangaInfo: number,
-        MangaDexFeed: number,
-        MangaDexImage: number,
-        MangaImage: number,
-        MangaCover: number,
-    };
-    compression: number;
-    bwImages: boolean;
-    startNewJobTimeoutMs: number;
-    chapterNamingScheme: string;
-    flareSolverrUrl: string;
-}

tranga-website/src/api/types/IChapter.ts

@@ -1,11 +0,0 @@
-export default interface IChapter{
-    chapterId: string;
-    parentMangaId: string;
-    volumeNumber: number | null;
-    chapterNumber: string;
-    url: string;
-    title: string | null;
-    fileName: string | null;
-    downloaded: boolean;
-    fullArchiveFilePath: string;
-}

tranga-website/src/api/types/IFrontendSettings.ts

@@ -1,4 +0,0 @@
-export default interface IFrontendSettings {
-    jobInterval: Date;
-    apiUri: string;
-}

tranga-website/src/api/types/ILibraryConnector.ts

@@ -1,11 +0,0 @@
-export default interface ILibraryConnector {
-    libraryConnectorId: string;
-    libraryType: LibraryType;
-    baseUrl: string;
-    auth: string;
-}
-
-export enum LibraryType {
-    Komga = "Komga",
-    Kavita = "Kavita"
-}

tranga-website/src/api/types/ILink.ts

@@ -1,5 +0,0 @@
-export default interface ILink {
-    linkId: string;
-    linkProvider: string;
-    linkUrl: string;
-}

tranga-website/src/api/types/ILocalLibrary.ts

@@ -1,5 +0,0 @@
-export default interface ILocalLibrary {
-    localLibraryId: string;
-    basePath: string;
-    libraryName: string;
-}

tranga-website/src/api/types/IManga.ts

@@ -1,45 +0,0 @@
-import {MangaReleaseStatus} from "./EnumMangaReleaseStatus";
-import IAuthor from "./IAuthor.ts";
-import IMangaAltTitle from "./IMangaAltTitle.ts";
-import IMangaTag from "./IMangaTag.ts";
-import ILink from "./ILink.ts";
-
-export default interface IManga{
-    mangaId: string;
-    idOnConnectorSite: string;
-    name: string;
-    description: string;
-    websiteUrl: string;
-    releaseStatus: MangaReleaseStatus;
-    libraryId: string | null;
-    mangaConnectorName: string;
-    authors: IAuthor[] | null;
-    mangaTags: IMangaTag[] | null;
-    links: ILink[] | null;
-    altTitles: IMangaAltTitle[] | null;
-    ignoreChaptersBefore: number;
-    directoryName: string;
-    year: number | null;
-    originalLanguage: string | null;
-    chapterIds: string[] | null;
-}
-
-export const DefaultManga : IManga = {
-    mangaId: "Loading",
-    idOnConnectorSite: "Loading",
-    name: "Loading",
-    description: "Loading",
-    websiteUrl: "",
-    releaseStatus: MangaReleaseStatus.Continuing,
-    libraryId: null,
-    mangaConnectorName: "Loading",
-    authors: null,
-    mangaTags: null,
-    links: null,
-    altTitles: null,
-    ignoreChaptersBefore: 0,
-    directoryName: "",
-    year: 1999,
-    originalLanguage: "en",
-    chapterIds: null
-}

tranga-website/src/api/types/IMangaAltTitle.ts

@@ -1,5 +0,0 @@
-export default interface IMangaAltTitle {
-    altTitleId: string;
-    language: string;
-    title: string;
-}

tranga-website/src/api/types/IMangaConnector.ts

@@ -1,7 +0,0 @@
-export default interface IMangaConnector {
-    name: string;
-    supportedLanguages: string[];
-    iconUrl: string;
-    baseUris: string[];
-    enabled: boolean;
-}

tranga-website/src/api/types/IMangaTag.ts

@@ -1,3 +0,0 @@
-export default interface IMangaTag {
-    tag: string;
-}

tranga-website/src/api/types/INotificationConnector.ts

@@ -1,7 +0,0 @@
-export default interface INotificationConnector {
-    name: string;
-    url: string;
-    headers: Record<string, string>[];
-    httpMethod: string;
-    body: string;
-}

tranga-website/src/api/types/IRequestLimits.ts

@@ -1,8 +0,0 @@
-export default interface IRequestLimits {
-    Default: number;
-    MangaDexFeed: number;
-    MangaImage: number;
-    MangaCover: number;
-    MangaDexImage: number;
-    MangaInfo: number;
-}

tranga-website/src/api/types/Jobs/IDownloadAvailableChaptersJob.ts

@@ -1,5 +0,0 @@
-import IJobWithMangaId from "./IJobWithMangaId.ts";
-
-export default interface IDownloadAvailableChaptersJob extends IJobWithMangaId {
-
-}

tranga-website/src/api/types/Jobs/IDownloadMangaCoverJob.ts

@@ -1,5 +0,0 @@
-import IJobWithMangaId from "./IJobWithMangaId.ts";
-
-export default interface IDownloadMangaCoverJob extends IJobWithMangaId {
-
-}

tranga-website/src/api/types/Jobs/IDownloadSingleChapterJob.ts

@@ -1,5 +0,0 @@
-import IJobWithChapterId from "./IJobWithChapterId.tsx";
-
-export default interface IDownloadSingleChapterJob extends IJobWithChapterId {
-
-}

tranga-website/src/api/types/Jobs/IJob.ts

@@ -1,29 +0,0 @@
-export default interface IJob{
-    jobId: string;
-    parentJobId: string | null;
-    jobType: JobType;
-    recurrenceMs: number;
-    lastExecution: Date;
-    nextExecution: Date;
-    state: JobState;
-    enabled: boolean;
-}
-
-export enum JobType {
-    DownloadSingleChapterJob = "DownloadSingleChapterJob",
-    DownloadAvailableChaptersJob = "DownloadAvailableChaptersJob",
-    DownloadMangaCoverJob = "DownloadMangaCoverJob",
-    RetrieveChaptersJob = "RetrieveChaptersJob",
-    UpdateChaptersDownloadedJob = "UpdateChaptersDownloadedJob",
-    MoveMangaLibraryJob = "MoveMangaLibraryJob",
-    UpdateSingleChapterDownloadedJob = "UpdateSingleChapterDownloadedJob",
-    UpdateCoverJob = "UpdateCoverJob"
-}
-
-export enum JobState {
-    FirstExecution = "FirstExecution",
-    Running = "Running",
-    Completed = "Completed",
-    CompletedWaiting = "CompletedWaiting",
-    Failed = "Failed"
-}

tranga-website/src/api/types/Jobs/IJobWithChapterId.tsx

@@ -1,5 +0,0 @@
-import IJob from "./IJob.ts";
-
-export default interface IJobWithChapterId extends IJob {
-    chapterId: string;
-}

tranga-website/src/api/types/Jobs/IJobWithMangaId.ts

@@ -1,5 +0,0 @@
-import IJob from "./IJob.ts";
-
-export default interface IJobWithMangaId extends IJob {
-    mangaId: string;
-}

tranga-website/src/api/types/Jobs/IMoveFileOrFolderJob.ts

@@ -1,6 +0,0 @@
-import IJob from "./IJob";
-
-export default interface IMoveFileOrFolderJob extends IJob {
-    fromLocation: string;
-    toLocation: string;
-}

tranga-website/src/api/types/Jobs/IMoveMangaLibraryJob.ts

@@ -1,5 +0,0 @@
-import IJobWithMangaId from "./IJobWithMangaId.ts";
-
-export default interface IMoveMangaLibraryJob extends IJobWithMangaId {
-    ToLibraryId: string;
-}