refactor: Change Vercel CLI installation method from pnpm to npm for consistency

.gitea/workflows/demo.yaml

@@ -0,0 +1,19 @@
+name: Gitea Actions Demo
+run-name: ${{ gitea.actor }} is testing out Gitea Actions
+on: [push]
+
+jobs:
+  Explore-Gitea-Actions:
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo "The job was automatically triggered by a ${{ gitea.event_name }} event."
+      - run: echo "This job is now running on a ${{ runner.os }} server hosted by Gitea!"
+      - run: echo "The name of your branch is ${{ gitea.ref }} and your repository is ${{ gitea.repository }}."
+      - name: Check out repository code
+        uses: actions/checkout@v3
+      - run: echo "The ${{ gitea.repository }} repository has been cloned to the runner."
+      - run: echo "The workflow is now ready to test your code on the runner."
+      - name: List files in the repository
+        run: |
+          ls ${{ gitea.workspace }}
+      - run: echo "This job's status is ${{ job.status }}."

.gitea/workflows/vercel-preview.yaml

@@ -0,0 +1,23 @@
+name: Vercel Preview Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches-ignore:
+      - main
+jobs:
+  Deploy-Preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install pnpm
+        run: npm install -g pnpm
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

.gitea/workflows/vercel-production.yaml

@@ -0,0 +1,23 @@
+name: Vercel Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - main
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install pnpm
+        run: npm install -g pnpm
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@vercel/analytics": "^1.5.0",
     "bcrypt": "^6.0.0",
     "mysql2": "^3.15.2",
     "next": "15.5.5",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@vercel/analytics':
+        specifier: ^1.5.0
+        version: 1.5.0(next@15.5.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)
       bcrypt:
         specifier: ^6.0.0
         version: 6.0.0
@@ -623,6 +626,32 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@vercel/analytics@1.5.0':
+    resolution: {integrity: sha512-MYsBzfPki4gthY5HnYN7jgInhAZ7Ac1cYDoRWFomwGHWEX7odTEzbtg9kf/QSo7XEsEAqlQugA6gJ2WS2DEa3g==}
+    peerDependencies:
+      '@remix-run/react': ^2
+      '@sveltejs/kit': ^1 || ^2
+      next: '>= 13'
+      react: ^18 || ^19 || ^19.0.0-rc
+      svelte: '>= 4'
+      vue: ^3
+      vue-router: ^4
+    peerDependenciesMeta:
+      '@remix-run/react':
+        optional: true
+      '@sveltejs/kit':
+        optional: true
+      next:
+        optional: true
+      react:
+        optional: true
+      svelte:
+        optional: true
+      vue:
+        optional: true
+      vue-router:
+        optional: true
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -2360,6 +2389,11 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
+  '@vercel/analytics@1.5.0(next@15.5.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)':
+    optionalDependencies:
+      next: 15.5.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+
   acorn-jsx@5.3.2(acorn@8.15.0):
     dependencies:
       acorn: 8.15.0

public/file.svg

@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

src/app/api/complete-upload/route.ts

@@ -2,6 +2,7 @@ import { NextResponse } from 'next/server';
 import pool from '@/lib/db';
 import bcrypt from 'bcrypt';
 import crypto from 'crypto';
+import { ResultSetHeader } from 'mysql2/promise';
 
 const SALT_ROUNDS = 10;
 
@@ -28,7 +29,7 @@ export async function POST(request: Request) {
 
     const connection = await pool.getConnection();
     try {
-      const [result]: any = await connection.query(
+      const [result]: [ResultSetHeader, unknown] = await connection.query(
         'UPDATE files SET token_hash = ?, expires_at = ? WHERE id = ?',
         [tokenHash, expiresAt, file_id]
       );

src/app/api/cron/cleanup/route.ts

@@ -1,5 +1,14 @@
 import { NextResponse } from 'next/server';
 import pool from '@/lib/db';
+import { RowDataPacket } from 'mysql2/promise';
+
+interface FileId {
+  id: string;
+}
+
+interface FilePart {
+  discord_message_id: string | null;
+}
 
 if (!process.env.DISCORD_BOT_TOKEN || !process.env.DISCORD_CHANNEL_ID || !process.env.CRON_SECRET) {
   throw new Error('Discord or Cron secret environment variables are not configured');
@@ -7,7 +16,6 @@ if (!process.env.DISCORD_BOT_TOKEN || !process.env.DISCORD_CHANNEL_ID || !proces
 
 export async function POST(request: Request) {
   try {
-    // 1. Authenticate the cron job request
     const authHeader = request.headers.get('authorization');
     if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
       return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
@@ -15,43 +23,89 @@ export async function POST(request: Request) {
 
     const connection = await pool.getConnection();
     try {
-      // 2. Find expired files
-      const [expiredFiles]: any[] = await connection.query(
+      let totalCleanedExpired = 0;
+      let totalCleanedIncomplete = 0;
+
+      // --- 1. Cleanup for INCOMPLETE uploads ---
+      const staleTime = new Date();
+      staleTime.setHours(staleTime.getHours() - 24); // Older than 24 hours
+
+      const [incompleteFiles]: [RowDataPacket[], unknown] = await connection.query(
+        'SELECT id FROM files WHERE token_hash IS NULL AND upload_at <= ?',
+        [staleTime]
+      );
+
+      if (incompleteFiles[0].length > 0) {
+        for (const file of incompleteFiles[0] as FileId[]) {
+          const file_id = file.id;
+
+          const [parts]: [RowDataPacket[], unknown] = await connection.query('SELECT discord_message_id FROM file_parts WHERE file_id = ?', [file_id]);
+          
+          if (parts[0].length > 0) {
+            for (const part of parts[0] as FilePart[]) {
+              if (!part.discord_message_id) continue;
+              const deleteUrl = `https://discord.com/api/v10/channels/${process.env.DISCORD_CHANNEL_ID}/messages/${part.discord_message_id}`;
+              try {
+                const res = await fetch(deleteUrl, {
+                  method: 'DELETE',
+                  headers: { 'Authorization': `Bot ${process.env.DISCORD_BOT_TOKEN}` },
+                });
+                if (!res.ok && res.status !== 404) {
+                  console.warn(`Cleanup: Failed to delete message ${part.discord_message_id}. Status: ${res.status}`);
+                }
+              } catch (e) {
+                console.error(`Cleanup: Error deleting message ${part.discord_message_id}:`, e);
+              }
+              await new Promise(resolve => setTimeout(resolve, 1000)); // 1s delay
+            }
+          }
+
+          await connection.query('DELETE FROM file_parts WHERE file_id = ?', [file_id]);
+          await connection.query('DELETE FROM files WHERE id = ?', [file_id]);
+          totalCleanedIncomplete++;
+        }
+      }
+
+      // --- 2. Cleanup for EXPIRED files ---
+      const [expiredFiles]: [RowDataPacket[], unknown] = await connection.query(
         'SELECT id FROM files WHERE expires_at <= NOW() AND deleted = 0'
       );
 
-      if (expiredFiles.length === 0) {
-        return NextResponse.json({ success: true, message: 'No expired files to clean up.' });
-      }
-
-      let totalCleaned = 0;
-
-      // 3. For each expired file, delete parts and mark as deleted
-      for (const file of expiredFiles) {
+      if (expiredFiles[0].length > 0) {
+        for (const file of expiredFiles[0] as FileId[]) {
           const file_id = file.id;
 
-        const [partsRows]: any[] = await connection.query(
+          const [partsRows]: [RowDataPacket[], unknown] = await connection.query(
             'SELECT discord_message_id FROM file_parts WHERE file_id = ?',
             [file_id]
           );
 
-        const deletePromises = partsRows.map((part: { discord_message_id: string }) => {
+          if (partsRows[0].length > 0) {
+            for (const part of partsRows[0] as FilePart[]) {
+              if (!part.discord_message_id) continue;
               const deleteUrl = `https://discord.com/api/v10/channels/${process.env.DISCORD_CHANNEL_ID}/messages/${part.discord_message_id}`;
-          return fetch(deleteUrl, { 
+              try {
+                const res = await fetch(deleteUrl, {
                   method: 'DELETE',
-            headers: {
-              'Authorization': `Bot ${process.env.DISCORD_BOT_TOKEN}`,
+                  headers: { 'Authorization': `Bot ${process.env.DISCORD_BOT_TOKEN}` },
+                });
+                if (!res.ok && res.status !== 404) {
+                  console.warn(`Cleanup: Failed to delete message ${part.discord_message_id}. Status: ${res.status}`);
+                }
+              } catch (e) {
+                console.error(`Cleanup: Error deleting message ${part.discord_message_id}:`, e);
+              }
+              await new Promise(resolve => setTimeout(resolve, 1000)); // 1s delay
+            }
           }
-          });
-        });
-
-        await Promise.allSettled(deletePromises);
 
           await connection.query('UPDATE files SET deleted = 1 WHERE id = ?', [file_id]);
-        totalCleaned++;
+          totalCleanedExpired++;
+        }
       }
 
-      return NextResponse.json({ success: true, message: `Cleaned up ${totalCleaned} expired files.` });
+      const message = `Cleanup complete. Incomplete cleaned: ${totalCleanedIncomplete}. Expired cleaned: ${totalCleanedExpired}.`;
+      return NextResponse.json({ success: true, message });
 
     } finally {
       connection.release();

src/app/api/delete/route.ts

@@ -1,6 +1,15 @@
 import { NextResponse } from 'next/server';
 import pool from '@/lib/db';
 import bcrypt from 'bcrypt';
+import { RowDataPacket } from 'mysql2/promise';
+
+interface FileData extends RowDataPacket {
+  token_hash: string;
+}
+
+interface FilePart extends RowDataPacket {
+  discord_message_id: string | null;
+}
 
 if (!process.env.DISCORD_BOT_TOKEN || !process.env.DISCORD_CHANNEL_ID) {
   throw new Error('Discord bot token or channel ID is not configured');
@@ -17,8 +26,8 @@ export async function POST(request: Request) {
     const connection = await pool.getConnection();
     try {
       // 1. Fetch file and validate token
-      const [fileRows]: any[] = await connection.query('SELECT * FROM files WHERE id = ? AND deleted = 0', [file_id]);
-      const file = fileRows[0];
+      const [fileRows]: [RowDataPacket[], unknown] = await connection.query('SELECT * FROM files WHERE id = ? AND deleted = 0', [file_id]);
+      const file = fileRows[0] as FileData;
 
       if (!file) {
         return NextResponse.json({ error: 'File not found' }, { status: 404 });
@@ -30,33 +39,38 @@ export async function POST(request: Request) {
       }
 
       // 2. Fetch all message IDs for the file parts
-      const [partsRows]: any[] = await connection.query(
+      const [partsRows]: [RowDataPacket[], unknown] = await connection.query(
         'SELECT discord_message_id FROM file_parts WHERE file_id = ?',
         [file_id]
       );
 
-      // 3. Delete each message from Discord using the Bot API
-      const deletePromises = partsRows.map((part: { discord_message_id: string }) => {
+      // 3. Delete each message from Discord sequentially to avoid rate limits
+      for (const part of partsRows[0] as FilePart[]) {
+        if (!part.discord_message_id) continue;
+
         const deleteUrl = `https://discord.com/api/v10/channels/${process.env.DISCORD_CHANNEL_ID}/messages/${part.discord_message_id}`;
-        return fetch(deleteUrl, { 
+        try {
+          const res = await fetch(deleteUrl, {
             method: 'DELETE',
-          headers: {
-            'Authorization': `Bot ${process.env.DISCORD_BOT_TOKEN}`,
+            headers: { 'Authorization': `Bot ${process.env.DISCORD_BOT_TOKEN}` },
+          });
+
+          if (!res.ok && res.status !== 404) { // Don't warn on 404 (already deleted)
+            console.warn(`Failed to delete message ${part.discord_message_id}. Status: ${res.status}`);
           }
-        });
-      });
-
-      const results = await Promise.allSettled(deletePromises);
-      results.forEach(result => {
-        if (result.status === 'rejected') {
-          console.warn('Failed to delete a message from Discord:', result.reason);
+        } catch (e) {
+          console.error(`Error deleting message ${part.discord_message_id}:`, e);
         }
-      });
 
-      // 4. Mark the file as deleted in the database (soft delete)
-      await connection.query('UPDATE files SET deleted = 1 WHERE id = ?', [file_id]);
+        // Wait 1 second between delete requests to avoid hitting Discord's rate limits.
+        await new Promise(resolve => setTimeout(resolve, 1000));
+      }
 
-      return NextResponse.json({ success: true, message: 'File marked for deletion.' });
+      // 4. Hard delete the file from the database
+      await connection.query('DELETE FROM file_parts WHERE file_id = ?', [file_id]);
+      await connection.query('DELETE FROM files WHERE id = ?', [file_id]);
+
+      return NextResponse.json({ success: true, message: 'File permanently deleted.' });
 
     } finally {
       connection.release();

src/app/api/download-part/[file_id]/[part_index]/route.ts

@@ -1,15 +1,25 @@
-import { NextResponse } from 'next/server';
+import { NextResponse, NextRequest } from 'next/server';
 import pool from '@/lib/db';
+import { RowDataPacket } from 'mysql2/promise';
+
+interface FilePart extends RowDataPacket {
+  discord_message_id: string | null;
+}
+
+interface RouteContext {
+  params: Promise<{
+    file_id: string;
+    part_index: string;
+  }>;
+}
 
 if (!process.env.DISCORD_BOT_TOKEN || !process.env.DISCORD_CHANNEL_ID) {
   throw new Error('Discord bot token or channel ID is not configured');
 }
 
-export async function GET(request: Request, context: any) {
+export async function GET(request: NextRequest, context: RouteContext) {
   try {
-    const params = await context.params;
-    const file_id = params.file_id as string;
-    const part_index = params.part_index as string;
+    const { file_id, part_index } = await context.params;
 
     // NOTE: In a real-world scenario, you MUST validate if the user has permission to download this part.
     // This would involve checking the download_token against the hash in the `files` table.
@@ -19,11 +29,11 @@ export async function GET(request: Request, context: any) {
     const connection = await pool.getConnection();
     let part;
     try {
-      const [partsRows]: any[] = await connection.query(
+      const [partsRows]: [RowDataPacket[], unknown] = await connection.query(
         'SELECT discord_message_id FROM file_parts WHERE file_id = ? AND part_index = ?',
         [file_id, part_index]
       );
-      part = partsRows[0];
+      part = partsRows[0] as FilePart;
     } finally {
       connection.release();
     }

src/app/api/file/[file_id]/route.ts

@@ -1,11 +1,30 @@
-import { NextResponse } from 'next/server';
+import { NextResponse, NextRequest } from 'next/server';
 import pool from '@/lib/db';
 import bcrypt from 'bcrypt';
+import { RowDataPacket } from 'mysql2/promise';
 
-export async function GET(request: Request, context: any) {
+interface FileData extends RowDataPacket {
+  filename: string;
+  size: number;
+  num_parts: number;
+  expires_at: Date | null;
+  token_hash: string;
+}
+
+interface FilePartMetadata extends RowDataPacket {
+  part_index: number;
+  size: number;
+}
+
+interface RouteContext {
+  params: Promise<{
+    file_id: string;
+  }>;
+}
+
+export async function GET(request: NextRequest, context: RouteContext) {
   try {
-    const params = await context.params;
-    const file_id = params.file_id as string;
+    const { file_id } = await context.params;
     const { searchParams } = new URL(request.url);
     const token = searchParams.get('token');
 
@@ -16,8 +35,8 @@ export async function GET(request: Request, context: any) {
     const connection = await pool.getConnection();
     try {
       // 1. Fetch file metadata and token hash
-      const [fileRows]: any[] = await connection.query('SELECT * FROM files WHERE id = ? AND deleted = 0', [file_id]);
-      const file = fileRows[0];
+      const [fileRows]: [RowDataPacket[], unknown] = await connection.query('SELECT * FROM files WHERE id = ? AND deleted = 0', [file_id]);
+      const file = fileRows[0] as FileData;
 
       if (!file) {
         return NextResponse.json({ error: 'File not found' }, { status: 404 });
@@ -35,7 +54,7 @@ export async function GET(request: Request, context: any) {
       }
 
       // 4. Fetch file parts
-      const [partsRows]: any[] = await connection.query(
+      const [partsRows]: [RowDataPacket[], unknown] = await connection.query(
         'SELECT part_index, size FROM file_parts WHERE file_id = ? ORDER BY part_index ASC',
         [file_id]
       );
@@ -45,7 +64,7 @@ export async function GET(request: Request, context: any) {
         filename: file.filename,
         size: file.size,
         num_parts: file.num_parts,
-        parts: partsRows,
+        parts: partsRows[0] as FilePartMetadata[],
       };
 
       return NextResponse.json(response);

src/app/download/[file_id]/page.tsx

@@ -1,8 +1,13 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { useParams, useSearchParams } from 'next/navigation';
 
+interface MetadataPart {
+  part_index: number;
+  size: number;
+}
+
 // Helper to convert Base64 string back to ArrayBuffer
 function base64ToBuffer(base64: string) {
     const binary_string = window.atob(base64.replace(/-/g, '+').replace(/_/g, '/'));
@@ -14,6 +19,17 @@ function base64ToBuffer(base64: string) {
     return bytes.buffer;
 }
 
+// Helper to format bytes into a human-readable string
+function formatBytes(bytes: number, decimals = 2) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+
 // New helper function to handle retries for failed fetches
 async function fetchWithRetry(url: string, retries: number = 3, delay: number = 1000): Promise<Response> {
   for (let i = 0; i < retries; i++) {
@@ -22,14 +38,11 @@ async function fetchWithRetry(url: string, retries: number = 3, delay: number =
       if (response.ok) {
         return response;
       }
-      // Don't retry on client errors (e.g., 404), but do on server errors (5xx)
       if (response.status >= 400 && response.status < 500) {
         throw new Error(`Client error: ${response.status} for URL ${url}`);
       }
-      // For server errors or network issues, log and prepare to retry
       console.warn(`Attempt ${i + 1} failed for ${url} with status ${response.status}. Retrying in ${delay}ms...`);
     } catch (error) {
-      // This catches network errors (e.g., no internet) and the thrown client error
       console.warn(`Attempt ${i + 1} failed for ${url}. Error: ${error}. Retrying in ${delay}ms...`);
     }
     await new Promise(resolve => setTimeout(resolve, delay * (i + 1))); // Exponential backoff
@@ -39,13 +52,40 @@ async function fetchWithRetry(url: string, retries: number = 3, delay: number =
 
 export default function DownloadPage() {
     const [downloadState, setDownloadState] = useState<'idle' | 'downloading' | 'decrypting' | 'complete' | 'error'>('idle');
+    const [deleteState, setDeleteState] = useState<'idle' | 'deleting' | 'deleted' | 'error'>('idle');
     const [progress, setProgress] = useState(0);
     const [error, setError] = useState('');
+    const [deleteError, setDeleteError] = useState('');
     const [filename, setFilename] = useState('');
+    const [downloadedBytes, setDownloadedBytes] = useState(0);
+    const [totalBytes, setTotalBytes] = useState(0);
+    const [downloadSpeed, setDownloadSpeed] = useState(0); // bytes per second
+
+    const downloadedBytesRef = useRef(downloadedBytes);
 
     const params = useParams();
     const searchParams = useSearchParams();
 
+    useEffect(() => {
+        downloadedBytesRef.current = downloadedBytes;
+    }, [downloadedBytes]);
+
+    useEffect(() => {
+        if (downloadState !== 'downloading') {
+            setDownloadSpeed(0);
+            return;
+        }
+        let lastBytes = downloadedBytesRef.current;
+        const interval = setInterval(() => {
+            const currentBytes = downloadedBytesRef.current;
+            const speed = currentBytes - lastBytes;
+            setDownloadSpeed(speed);
+            lastBytes = currentBytes;
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, [downloadState]);
+
     useEffect(() => {
         const startDownload = async () => {
             const file_id = params.file_id as string;
@@ -59,7 +99,6 @@ export default function DownloadPage() {
             }
 
             try {
-                // 1. Fetch file metadata
                 const metaRes = await fetch(`/api/file/${file_id}?token=${token}`);
                 if (!metaRes.ok) {
                     const err = await metaRes.json();
@@ -67,37 +106,24 @@ export default function DownloadPage() {
                 }
                 const metadata = await metaRes.json();
                 setFilename(metadata.filename);
+                setTotalBytes(metadata.size);
 
-                // 2. Download all parts with a concurrency limit
                 setDownloadState('downloading');
-                const CONCURRENCY_LIMIT = 5;
-                const queue = [...metadata.parts];
                 const encryptedParts = new Array(metadata.num_parts);
-                let downloadedCount = 0;
 
-                const downloadPart = async (part: any) => {
+                const downloadPromises = metadata.parts.map(async (part: MetadataPart) => {
                     const response = await fetchWithRetry(`/api/download-part/${file_id}/${part.part_index}`);
                     const buffer = await response.arrayBuffer();
                     encryptedParts[part.part_index] = { index: part.part_index, data: buffer };
-                    downloadedCount++;
-                    setProgress(Math.round((downloadedCount / metadata.num_parts) * 50));
-                };
-
-                const active = [];
-                while (queue.length > 0 || active.length > 0) {
-                    while (active.length < CONCURRENCY_LIMIT && queue.length > 0) {
-                        const task = queue.shift()!;
-                        const promise = downloadPart(task).finally(() => {
-                            const index = active.indexOf(promise);
-                            if (index > -1) active.splice(index, 1);
+                    setDownloadedBytes(prev => prev + part.size);
+                    setProgress(prev => prev + (1 / metadata.num_parts) * 50);
                 });
-                        active.push(promise);
-                    }
-                    await Promise.race(active);
-                }
 
-                // 3. Import key and decrypt parts
+                await Promise.all(downloadPromises);
+
                 setDownloadState('decrypting');
+                setProgress(50);
+
                 const fileKey = await window.crypto.subtle.importKey(
                     'raw',
                     base64ToBuffer(keyString),
@@ -106,18 +132,15 @@ export default function DownloadPage() {
                     ['decrypt']
                 );
 
-                let decryptedCount = 0;
-                const decryptPromises = encryptedParts.map(async (part) => {
+                const decryptPromises = encryptedParts.map(async (part: { index: number; data: ArrayBuffer }) => {
                     const iv = part.data.slice(0, 12);
                     const data = part.data.slice(12);
                     const decrypted = await window.crypto.subtle.decrypt({ name: 'AES-GCM', iv }, fileKey, data);
-                    decryptedCount++;
-                    setProgress(50 + Math.round((decryptedCount / metadata.num_parts) * 50));
+                    setProgress(prev => prev + (1 / metadata.num_parts) * 50);
                     return decrypted;
                 });
                 const decryptedParts = await Promise.all(decryptPromises);
 
-                // 4. Combine parts and trigger download
                 const finalBlob = new Blob(decryptedParts);
                 const url = window.URL.createObjectURL(finalBlob);
                 const a = document.createElement('a');
@@ -130,45 +153,123 @@ export default function DownloadPage() {
 
                 setDownloadState('complete');
 
-            } catch (e: any) {
-                setError(e.message || 'An unknown error occurred.');
-                setDownloadState('error');
+            } catch (e: unknown) {
+                setError(e instanceof Error ? e.message : 'An unknown error occurred.');                setDownloadState('error');
             }
         };
 
+        if(filename) return;
         startDownload();
-    }, [params, searchParams]);
+    }, [params, searchParams, filename]);
+
+    const handleDelete = async () => {
+        if (!window.confirm(`Are you sure you want to permanently delete this file? This action cannot be undone.`)) {
+            return;
+        }
+    
+        setDeleteState('deleting');
+        const file_id = params.file_id as string;
+        const token = searchParams.get('token');
+    
+        try {
+            const res = await fetch('/api/delete', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ file_id, token }),
+            });
+    
+            if (!res.ok) {
+                const err = await res.json();
+                throw new Error(err.error || 'Failed to delete file.');
+            }
+    
+            setDeleteState('deleted');
+    
+        } catch (e: unknown) {
+            setDeleteState('error');
+            setDeleteError(e instanceof Error ? e.message : 'An unknown error occurred during deletion.');
+        }
+    };
 
     return (
-        <main className="flex min-h-screen flex-col items-center justify-center p-24 bg-gray-900 text-white">
-            <div className="w-full max-w-md text-center">
+        <main className="flex min-h-screen flex-col items-center justify-center p-6 bg-gray-900 text-white font-sans">
+            <div className="w-full max-w-lg bg-gray-800 rounded-xl shadow-2xl p-8 space-y-6">
+                {deleteState !== 'deleted' ? (
+                    <>
                         {downloadState !== 'error' && downloadState !== 'complete' && (
                             <>
-                        <h1 className="text-3xl font-bold mb-4">Downloading File</h1>
-                        <p className="mb-2 truncate">{filename}</p>
-                        <div className="bg-gray-700 rounded-full h-6 w-full">
-                            <div className="bg-green-600 h-6 rounded-full transition-width duration-300 flex items-center justify-center" style={{ width: `${progress}%` }}>
-                                {progress}%
+                                <div className="flex items-center justify-between">
+                                    <h1 className="text-2xl font-bold">Downloading File</h1>
+                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-blue-400 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                                    </svg>
+                                </div>
+                                <p className="text-gray-400 truncate">{filename || "Fetching filename..."}</p>
+                                
+                                <div className="space-y-2">
+                                    <div className="bg-gray-700 rounded-full h-4 w-full overflow-hidden">
+                                        <div className="bg-gradient-to-r from-blue-500 to-green-500 h-4 rounded-full transition-all duration-300 ease-in-out" style={{ width: `${progress}%` }}></div>
+                                    </div>
+                                    <div className="flex justify-between text-sm font-mono text-gray-300">
+                                        <span>{Math.round(progress)}%</span>
+                                        <span>{formatBytes(downloadedBytes)} / {formatBytes(totalBytes)}</span>
                                     </div>
                                 </div>
-                        <p className="mt-2 text-sm text-gray-400">
-                            {downloadState === 'downloading' && 'Downloading parts...'}
-                            {downloadState === 'decrypting' && 'Decrypting and assembling file...'}
-                        </p>
+
+                                <div className="text-center text-sm text-gray-400 pt-2">
+                                    <p>{downloadState === 'downloading' && `Downloading... (${formatBytes(downloadSpeed)}/s)`}</p>
+                                    <p>{downloadState === 'decrypting' && 'Decrypting and assembling file...'}</p>
+                                </div>
                             </>
                         )}
                         {downloadState === 'complete' && (
-                    <>
-                        <h1 className="text-3xl font-bold mb-4 text-green-400">Download Started!</h1>
-                        <p>Your file <span className="font-mono bg-gray-800 px-1 rounded">{filename}</span> should be in your downloads folder.</p>
-                        <p className="mt-4 text-sm text-gray-500">You can now close this page.</p>
-                    </>
+                            <div className="text-center space-y-4">
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 text-green-400 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                <h1 className="text-2xl font-bold text-green-400">Download Started!</h1>
+                                <p className="text-gray-300">Your file <span className="font-mono bg-gray-700 px-2 py-1 rounded-md">{filename}</span> should be in your downloads folder.</p>
+                                <p className="mt-4 text-xs text-gray-500">You can now close this page.</p>
+                            </div>
                         )}
                         {downloadState === 'error' && (
-                    <>
-                        <h1 className="text-3xl font-bold mb-4 text-red-500">Download Failed</h1>
-                        <p className="text-red-400 bg-red-900/50 p-3 rounded-md">{error}</p>
+                            <div className="text-center space-y-4">
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 text-red-500 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                <h1 className="text-2xl font-bold text-red-500">Download Failed</h1>
+                                <p className="text-red-400 bg-red-900/50 p-4 rounded-lg font-mono">{error}</p>
+                            </div>
+                        )}
+
+                        {filename && (
+                             <div className="mt-6 pt-6 border-t border-gray-700">
+                                {deleteState === 'idle' && (
+                                    <button
+                                        onClick={handleDelete}
+                                        disabled={downloadState === 'downloading' || downloadState === 'decrypting'}
+                                        className="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 disabled:bg-gray-600 disabled:cursor-not-allowed"
+                                    >
+                                        {'Delete File'}
+                                    </button>
+                                )}
+                                {deleteState === 'deleting' && (
+                                    <p className="text-center text-yellow-400">Deleting file from servers...</p>
+                                )}
+                                {deleteState === 'error' && (
+                                    <p className="text-center text-red-400 bg-red-900/50 p-3 rounded-md font-mono">{deleteError}</p>
+                                )}
+                            </div>
+                        )}
                     </>
+                ) : (
+                    <div className="text-center space-y-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 text-green-400 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <h1 className="text-2xl font-bold">File Deleted</h1>
+                        <p className="text-gray-300">The file <span className="font-mono bg-gray-700 px-2 py-1 rounded-md">{filename}</span> has been permanently deleted.</p>
+                    </div>
                 )}
             </div>
         </main>

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { Analytics } from "@vercel/analytics/next"
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -13,8 +14,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "LockLoad",
+  description: "Securely upload and share files.",
 };
 
 export default function RootLayout({
@@ -24,11 +25,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
         {children}
       </body>
+      <Analytics />
     </html>
   );
 }

src/app/page.tsx

@@ -5,7 +5,6 @@ import { useState, useEffect, useRef } from 'react';
 const CHUNK_SIZE = 8 * 1024 * 1024; // 8 MB
 const PARALLEL_UPLOADS = 4;
 
-// Helper to convert ArrayBuffer to Base64 string
 function bufferToBase64(buffer: ArrayBuffer) {
   let binary = '';
   const bytes = new Uint8Array(buffer);
@@ -16,14 +15,12 @@ function bufferToBase64(buffer: ArrayBuffer) {
   return window.btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
 }
 
-// Helper to format seconds into MM:SS
 function formatTime(seconds: number) {
     const minutes = Math.floor(seconds / 60);
     const remainingSeconds = Math.floor(seconds % 60);
     return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
 }
 
-// Helper to format bytes into a readable string
 function formatBytes(bytes: number, decimals = 2) {
     if (bytes === 0) return '0 Bytes';
     const k = 1024;
@@ -38,15 +35,19 @@ export default function Home() {
   const [uploadState, setUploadState] = useState<'idle' | 'processing' | 'uploading' | 'complete'>('idle');
   const [progress, setProgress] = useState(0);
   const [downloadUrl, setDownloadUrl] = useState('');
-  
-  // New state for detailed progress
   const [uploadedSize, setUploadedSize] = useState(0);
   const [uploadSpeed, setUploadSpeed] = useState(0);
   const [elapsedTime, setElapsedTime] = useState(0);
   const [etr, setEtr] = useState(0);
+  const [copyState, setCopyState] = useState<'idle' | 'copied'>('idle');
 
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const lastUploadedSizeRef = useRef(0);
+  const uploadedSizeRef = useRef(0);
+
+  useEffect(() => {
+    uploadedSizeRef.current = uploadedSize;
+  }, [uploadedSize]);
 
   useEffect(() => {
     if (uploadState === 'uploading') {
@@ -54,23 +55,17 @@ export default function Home() {
       lastUploadedSizeRef.current = 0;
 
       timerRef.current = setInterval(() => {
-        // elapsed time is based on a fixed start time
         setElapsedTime((Date.now() - startTime) / 1000);
-
-        // Speed calculation
-        const currentUploadedSize = uploadedSizeRef.current; // Get latest size from ref
+        const currentUploadedSize = uploadedSizeRef.current;
         const speed = currentUploadedSize - lastUploadedSizeRef.current;
         setUploadSpeed(speed > 0 ? speed : 0);
 
-        // ETR calculation
         if (speed > 0 && selectedFile) {
           const remainingSize = selectedFile.size - currentUploadedSize;
           setEtr(remainingSize / speed);
         }
-
         lastUploadedSizeRef.current = currentUploadedSize;
-      }, 1000); // Update every second
-
+      }, 1000);
     } else if (timerRef.current) {
       clearInterval(timerRef.current);
       timerRef.current = null;
@@ -84,12 +79,6 @@ export default function Home() {
     };
   }, [uploadState, selectedFile]);
 
-  // Ref to hold the latest uploaded size for the timer to access
-  const uploadedSizeRef = useRef(0);
-  useEffect(() => {
-    uploadedSizeRef.current = uploadedSize;
-  }, [uploadedSize]);
-
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const files = event.target.files;
     if (files && files.length > 0) {
@@ -114,6 +103,12 @@ export default function Home() {
     event.preventDefault();
   };
 
+  const handleCopy = () => {
+    navigator.clipboard.writeText(downloadUrl);
+    setCopyState('copied');
+    setTimeout(() => setCopyState('idle'), 2000);
+  };
+
   const startUploadProcess = async (file: File) => {
     if (!file) return;
 
@@ -124,14 +119,7 @@ export default function Home() {
     setElapsedTime(0);
     setEtr(0);
 
-    // 1. Generate encryption key
-    const fileKey = await window.crypto.subtle.generateKey(
-      { name: 'AES-GCM', length: 256 },
-      true,
-      ['encrypt', 'decrypt']
-    );
-
-    // 2. Call create-file API
+    const fileKey = await window.crypto.subtle.generateKey({ name: 'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt']);
     const numParts = Math.ceil(file.size / CHUNK_SIZE);
     const createResponse = await fetch('/api/create-file', {
       method: 'POST',
@@ -140,7 +128,6 @@ export default function Home() {
     });
     const { file_id } = await createResponse.json();
 
-    // 3. Chunk and encrypt file
     setUploadState('uploading');
     const chunks: { index: number; data: Blob }[] = [];
     for (let i = 0; i < numParts; i++) {
@@ -148,17 +135,11 @@ export default function Home() {
       const end = Math.min(start + CHUNK_SIZE, file.size);
       const chunk = file.slice(start, end);
       const iv = window.crypto.getRandomValues(new Uint8Array(12));
-      const encryptedChunk = await window.crypto.subtle.encrypt(
-        { name: 'AES-GCM', iv: iv },
-        fileKey,
-        await chunk.arrayBuffer()
-      );
-      // Prepend IV to the encrypted data
+      const encryptedChunk = await window.crypto.subtle.encrypt({ name: 'AES-GCM', iv: iv }, fileKey, await chunk.arrayBuffer());
       const combinedData = new Blob([iv, new Uint8Array(encryptedChunk)]);
       chunks.push({ index: i, data: combinedData });
     }
 
-    // 4. Upload parts with concurrency limit
     let uploadedCount = 0;
     const uploadChunk = async (chunk: { index: number; data: Blob }) => {
       const formData = new FormData();
@@ -173,7 +154,7 @@ export default function Home() {
     };
 
     const queue = [...chunks];
-    const active = [];
+    const active: Promise<void>[] = [];
     while (queue.length > 0 || active.length > 0) {
         while (active.length < PARALLEL_UPLOADS && queue.length > 0) {
             const task = queue.shift()!;
@@ -186,7 +167,6 @@ export default function Home() {
         await Promise.race(active);
     }
 
-    // 5. Complete upload
     const completeResponse = await fetch('/api/complete-upload', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -194,7 +174,6 @@ export default function Home() {
     });
     const { download_token } = await completeResponse.json();
 
-    // 6. Generate and show download link
     const exportedKey = await window.crypto.subtle.exportKey('raw', fileKey);
     const keyString = bufferToBase64(exportedKey);
     setUploadState('complete');
@@ -202,20 +181,25 @@ export default function Home() {
   };
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-24 bg-gray-900 text-white">
-      <div className="w-full max-w-3xl text-center">
-        <h1 className="text-4xl font-bold mb-4">Discord Storage</h1>
-        <p className="text-lg text-gray-400 mb-8">Upload large files, encrypted and stored on Discord. 7-day retention.</p>
+    <main className="flex min-h-screen flex-col items-center justify-center p-6 bg-gray-900 text-white font-sans">
+        <div className="w-full max-w-xl">
+            <div className="text-center mb-8">
+                <h1 className="text-4xl font-bold">LockLoad</h1>
+                <p className="text-lg text-gray-400">Upload large files, encrypted and stored on Discord. 7-day retention.</p>
+            </div>
 
+            <div className="w-full bg-gray-800 rounded-xl shadow-2xl p-8 space-y-6">
                 {uploadState === 'idle' && (
                     <div 
                         onDrop={handleDrop} 
                         onDragOver={handleDragOver} 
-            className="bg-gray-800 border-2 border-dashed border-gray-600 rounded-lg p-12 cursor-pointer hover:border-gray-400 transition-colors"
+                        className="border-2 border-dashed border-gray-600 rounded-lg p-12 text-center cursor-pointer hover:border-blue-400 hover:bg-gray-700/50 transition-colors duration-300"
                     >
                         <input type="file" className="hidden" id="file-upload" onChange={handleFileChange} />
-            <label htmlFor="file-upload" className="flex flex-col items-center cursor-pointer">
-              <svg className="w-16 h-16 text-gray-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
+                        <label htmlFor="file-upload" className="flex flex-col items-center justify-center cursor-pointer space-y-4">
+                            <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                            </svg>
                             <p className="text-xl font-semibold">Drag & drop your file here</p>
                             <p className="text-gray-500">or click to select a file</p>
                         </label>
@@ -223,37 +207,70 @@ export default function Home() {
                 )}
 
                 {(uploadState === 'processing' || uploadState === 'uploading') && (
-          <div className="mt-8 w-full text-left">
-            <p className="mb-2 truncate text-center">{selectedFile?.name}</p>
-            <div className="bg-gray-700 rounded-full h-4 w-full mb-2">
-              <div className="bg-blue-600 h-4 rounded-full transition-width duration-300" style={{ width: `${progress}%` }}></div>
+                    <div className="w-full space-y-4">
+                        <div className="flex items-center justify-between">
+                            <h2 className="text-2xl font-bold">Uploading...</h2>
+                            <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-blue-400 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h5" />
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 20v-5h-5" />
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 20v-5h5" />
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 4v5h-5" />
+                            </svg>
                         </div>
-            <div className="flex justify-between text-sm text-gray-400">
-                <span>{formatBytes(uploadedSize)} / {selectedFile ? formatBytes(selectedFile.size) : '0 Bytes'}</span>
+                        <p className="text-gray-400 truncate text-center">{selectedFile?.name}</p>
+                        
+                        <div className="space-y-2">
+                            <div className="bg-gray-700 rounded-full h-4 w-full overflow-hidden">
+                                <div className="bg-gradient-to-r from-blue-500 to-green-500 h-4 rounded-full transition-all duration-300 ease-in-out" style={{ width: `${progress}%` }}></div>
+                            </div>
+                            <div className="flex justify-between text-sm font-mono text-gray-300">
                                 <span>{progress}%</span>
+                                <span>{formatBytes(uploadedSize)} / {selectedFile ? formatBytes(selectedFile.size) : '0 Bytes'}</span>
+                            </div>
+                        </div>
+
+                        <div className="grid grid-cols-3 gap-4 text-center text-sm font-mono text-gray-400 pt-2">
+                            <div>
+                                <p className="font-semibold">Speed</p>
+                                <p>{formatBytes(uploadSpeed)}/s</p>
+                            </div>
+                            <div>
+                                <p className="font-semibold">Elapsed</p>
+                                <p>{formatTime(elapsedTime)}</p>
+                            </div>
+                            <div>
+                                <p className="font-semibold">ETR</p>
+                                <p>{etr > 0 && etr < Infinity ? formatTime(etr) : '--:--'}</p>
                             </div>
-            <div className="flex justify-between text-sm text-gray-400 mt-2">
-                <span>Speed: {formatBytes(uploadSpeed)}/s</span>
-                <span>Elapsed: {formatTime(elapsedTime)}</span>
-                <span>ETR: {etr > 0 && etr < Infinity ? formatTime(etr) : '--:--'}</span>
                         </div>
                     </div>
                 )}
 
                 {uploadState === 'complete' && (
-            <div className="mt-8 w-full text-left bg-gray-800 rounded-lg p-4">
-                <p className="text-lg font-semibold">Upload Complete!</p>
-                <p className="text-sm text-gray-400 mb-2">Save this link to download your file. The link contains the decryption key.</p>
+                    <div className="text-center space-y-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 text-green-400 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <h2 className="text-2xl font-bold text-green-400">Upload Complete!</h2>
+                        <p className="text-gray-300">Your file is ready. Save the link below.</p>
+                        <div className="relative">
                             <input 
                                 type="text" 
                                 readOnly 
                                 value={downloadUrl}
-                    onClick={(e) => (e.target as HTMLInputElement).select()}
-                    className="w-full p-2 bg-gray-900 rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                className="w-full p-3 pr-28 bg-gray-900 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"
                             />
+                            <button 
+                                onClick={handleCopy}
+                                className="absolute inset-y-0 right-0 flex items-center px-4 bg-blue-600 hover:bg-blue-700 rounded-r-lg text-white font-semibold transition-colors duration-300"
+                            >
+                                {copyState === 'copied' ? 'Copied!' : 'Copy'}
+                            </button>
+                        </div>
+                        <p className="text-xs text-gray-500">This link contains the decryption key. Keep it safe!</p>
                     </div>
                 )}
-
+            </div>
         </div>
     </main>
   );