chore: release v3.0.0

+ improve security by not exposing author's email

.babelrc

@@ -1,3 +0,0 @@
-{
-  "plugins": ["@emotion"]
-}

.editorconfig

@@ -3,7 +3,7 @@
 root = true
 
 [*]
-indent_style = space
+indent_style = tab
 indent_size = 2
 end_of_line = lf
 charset = utf-8
@@ -17,8 +17,5 @@ insert_final_newline = unset
 indent_style = unset
 insert_final_newline = unset
 
-[MakeFile]
-indent_style = space
-
 [*.md]
 trim_trailing_whitespace = false

.env.example

@@ -1,5 +1,5 @@
 # node ace generate:key
-APP_KEY=UfdS996001I_koCN1OiZiSh-DJZTyvGc
+APP_KEY=soY8ZAtItT_fCkNUADfgffZUUo675lOj
 TZ=UTC
 PORT=3333
 HOST=localhost

.github/workflows/cd.yml

@@ -36,18 +36,18 @@ jobs:
           tags: ${{ steps.docker_meta.outputs.tags }}
           labels: ${{ steps.docker_meta.outputs.labels }}
 
-  # execute_commands_via_ssh:
-  #   name: Pull latest docker image and start up the application with Docker Compose
-  #   runs-on: ubuntu-latest
-  #   needs: push_image_to_docker_hub
-  #   steps:
-  #     - name: Executing remote ssh commands
-  #       uses: appleboy/ssh-action@master
-  #       with:
-  #         host: ${{ secrets.SSH_HOST }}
-  #         port: ${{ secrets.SSH_PORT }}
-  #         username: ${{ secrets.SSH_USERNAME }}
-  #         key: ${{ secrets.SSH_KEY }}
-  #         script: |
-  #           cd /infra/my-links
-  #           sh startup.sh
+  execute_commands_via_ssh:
+    name: Pull latest docker image and start up the application with Docker Compose
+    runs-on: ubuntu-latest
+    needs: push_image_to_docker_hub
+    steps:
+      - name: Executing remote ssh commands
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          port: ${{ secrets.SSH_PORT }}
+          username: ${{ secrets.SSH_USERNAME }}
+          key: ${{ secrets.SSH_KEY }}
+          script: |
+            cd /infra/my-links
+            sh startup.sh

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+	"recommendations": ["vunguyentuan.vscode-css-variables"]
+}

.vscode/settings.json

@@ -1,3 +1,20 @@
 {
-  "typescript.preferences.importModuleSpecifier": "non-relative"
+	"typescript.preferences.importModuleSpecifier": "non-relative",
+	/* Prefer tabs over spaces for accessibility */
+	"editor.insertSpaces": false,
+	"editor.detectIndentation": false,
+	/* Explorer */
+	"explorer.fileNesting.enabled": true,
+	"explorer.fileNesting.patterns": {
+		"*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
+		"package.json": "pnpm-lock.yaml, tsconfig.json, eslint.config.js, .babelrc, vite.config.ts, .editorconfig",
+		"Makefile": "*compose.yml, Dockerfile, servers_pgadmin.json, .dockerignore"
+	},
+	"cssVariables.lookupFiles": [
+		"**/*.css",
+		"**/*.scss",
+		"**/*.sass",
+		"**/*.less",
+		"node_modules/@mantine/core/styles.css"
+	]
 }

CONTRIBUTING

@@ -0,0 +1,61 @@
+## Contributing to MyLinks
+
+First of all, thank you for considering contributing to MyLinks! We appreciate your time and efforts, and we want to make the contribution process as smooth and transparent as possible.
+
+### Table of Contents
+
+- [How to Contribute](#how-to-contribute)
+- [Code of Conduct](#code-of-conduct)
+- [Bug Reports and Feature Requests](#bug-reports-and-feature-requests)
+- [Pull Requests](#pull-requests)
+- [Development Setup](#development-setup)
+- [Community](#community)
+
+### How to Contribute
+
+There are several ways to contribute to MyLinks:
+- Reporting bugs
+- Suggesting new features
+- Improving the documentation
+- Writing or improving tests
+- Submitting code enhancements
+
+### Code of Conduct
+
+We are committed to fostering a welcoming community. Please review our [Code of Conduct](./CODE_OF_CONDUCT.md) to understand our expectations for all contributors.
+
+### Bug Reports and Feature Requests
+
+If you encounter any bugs or have ideas for new features, please create an issue in our [GitHub Issues](https://github.com/your-repo-url/issues). When reporting bugs, please provide:
+- A clear description of the problem.
+- Steps to reproduce the issue.
+- Any relevant log/error messages.
+
+For feature requests, please describe:
+- The problem you aim to solve.
+- How the feature could benefit users.
+
+### Pull Requests
+
+When making a pull request (PR), please adhere to the following guidelines:
+1. Fork the repository and create your branch from `main` (or the default branch).
+2. Run `pnpm run lint` and ensure your code passes the linter checks.
+3. Add tests for new features or bug fixes.
+4. Ensure your code passes existing tests (`pnpm run test`).
+5. Clearly describe the purpose of your pull request. Provide relevant issue numbers if applicable.
+
+To create a pull request:
+1. Push your branch to your forked repository.
+2. Submit a pull request (PR) to the `main` branch of MyLinks.
+
+> **Note:** All contributions are reviewed by maintainers. We may request changes or improvements before merging.
+
+### Development Setup
+
+For instructions on setting up your development environment, please refer to the [Getting Started](./README.md#getting-started) section in the `README.md`.
+
+### Community
+
+Feel free to join our community discussions on [our Trello board](https://trello.com/b/CwxkMeZp/mylinks) to collaborate on ideas, issues, and features!
+
+Thank you for helping make MyLinks better!

Dockerfile

@@ -1,6 +1,6 @@
 # Source : https://github.com/adonisjs-community/adonis-packages/blob/main/Dockerfile
 
-FROM node:20-alpine3.18 AS base
+FROM node:22.11-alpine3.20 AS base
 
 RUN apk --no-cache add curl
 RUN corepack enable
@@ -8,14 +8,14 @@ RUN corepack enable
 # All deps stage
 FROM base AS deps
 WORKDIR /app
-ADD package.json package-lock.json ./
-RUN npm install --ignore-scripts
+ADD package.json pnpm-lock.yaml ./
+RUN pnpm install --ignore-scripts
 
 # Production only deps stage
 FROM base AS production-deps
 WORKDIR /app
-ADD package.json package-lock.json ./
-RUN npm install --ignore-scripts
+ADD package.json pnpm-lock.yaml ./
+RUN pnpm install --ignore-scripts --prod
 
 # Build stage
 FROM base AS build

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>.

Makefile

@@ -1,19 +1,21 @@
 dev:
-	docker compose down
-	docker compose -f dev.docker-compose.yml up -d --wait
-	node ace migration:fresh
-	npm run dev
+	@docker compose down
+	@docker compose -f dev.compose.yml pull
+	@docker compose -f dev.compose.yml up -d --wait
+	@node ace migration:fresh
+	@pnpm run dev
 
 prod:
-	docker compose -f dev.docker-compose.yml down
-	docker compose up -d --build --wait
+	@docker compose -f dev.compose.yml down
+	@docker compose pull
+	@docker compose up -d --build --wait
 
 seed:
-	node ace db:seed
+	@node ace db:seed
 
 down:
-	-docker compose down
-	-docker compose -f dev.docker-compose.yml down
+	@-docker compose down
+	@-docker compose -f dev.compose.yml down
 
 release:
-	npm run release
+	@pnpm run release

README.md

@@ -1,62 +1,97 @@
-# MyLinks
+![](./docs//imgs/ml_dashboard_dark.png)
 
-MyLinks is a tool that lets you manage your favorite links in an intuitive interface.
-Free and open source software, focused on privacy and self-hosting.
+<div align="center">
+  <h1>MyLinks</h1>
+  <p>Another bookmark manager that lets you manage and share<br>your favorite links in an intuitive interface</p>
+  <p>
+    <a href="https://github.com/my-links/my-links/issues"><img src="https://img.shields.io/github/issues/my-links/my-links.svg" alt="GitHub Issues"></a>
+    <a href="https://github.com/my-links/my-links/blob/main/LICENSE"><img src="https://img.shields.io/github/license/my-links/my-links.svg" alt="License"></a>
+    <a href="https://trello.com/b/CwxkMeZp/mylinks"><img src="https://img.shields.io/badge/roadmap-Trello-blue" alt="Project Roadmap"></a>
+  </p>
+</div>
 
-# Setup
+## Table of Contents
+- [Main Features](#main-features)
+- [Getting Started](#getting-started)
+  - [Setup](#setup)
+  - [Development](#development)
+    - [Using Docker](#docker)
+    - [Using PNPM](#pnpm)
+  - [Production](#start-as-prod)
+- [Configuration](#configuration)
+  - [Generate app_key](#generate_app_key)
+  - [GitHub Actions](#github-actions)
+- [Contributing](#contributing)
+- [License](#license)
 
-Copy `example.env` file as `.env` and edit the properties.
+## Main Features 
 
-```
+- **Organize bookmarks with collections**: Keep your links tidy and easily accessible by grouping them into customizable collections.
+- **Intuitive link management**: Add, edit, and manage your bookmarks effortlessly with a user-friendly interface.
+- **Powerful search functionality**: Quickly locate any bookmark using the robust search feature, enhancing your productivity.
+- **Privacy-focused and open-source**: Enjoy a secure, transparent experience with an open-source platform that prioritizes your privacy.
+- **Browser extension (coming soon)**: Seamlessly integrate MyLinks into your browsing experience with the upcoming official browser extension.
+- **Shareable collections**: Easily share your curated collections with others, facilitating collaboration and information sharing.
+- **Community-driven development**: Contribute to MyLinks by suggesting improvements and features, helping to shape the tool to better meet user needs.
+
+## Getting Started
+
+### Setup
+
+Copy the `example.env` file to `.env` and edit the properties:
+
+```bash
 cp example.env .env
 ```
 
-## Development
+### Development
 
-### Docker
+#### Docker
 
 ```shell
 make dev
 ```
 
-### NPM
+#### PNPM
 
 ```shell
 # reset database and (force) apply all migrations
 node ace migration:fresh
 # start dev server
-npm run dev
+pnpm run dev
 ```
 
-## Start as prod
+### Start as prod
 
-### Docker
+#### Docker
 
 ```shell
 make prod
 ```
 
-### NPM
+#### PNPM
 
 ```shell
 # create production build
-npm run build
+pnpm run build
 # go to the build folder
 cd build
 # clone your .env
 cp ../.env .
 # then start the production build
-npm run start
+pnpm run start
 ```
 
-## Generate app_key
+## Configuration
+
+### Generate app_key
 
 ```shell
 # generate a random app key
 openssl rand -base64 32
 ```
 
-## GitHub Actions
+### GitHub Actions
 
 Env var to define :
 
@@ -87,3 +122,15 @@ ssh-copy-id -i ./id_rsa.pub user@host
 ```
 
 > Source: https://github.com/appleboy/ssh-action#setting-up-a-ssh-key
+
+## Contributing
+We welcome contributions! Please visit our Trello board for project management and roadmap details. You can contribute by:
+
+- Creating issues for bugs, features, or discussions.
+- Submitting pull requests (PRs) with bug fixes, new features, or documentation updates.
+
+For detailed contribution guidelines, refer to the CONTRIBUTING.md file.
+
+## License
+
+This project is licensed under the [GPLv3 License](./LICENCE). 

ace.js

@@ -19,8 +19,7 @@
 /**
  * Register hook to process TypeScript files using ts-node
  */
-import { register } from 'node:module';
-register('ts-node/esm', import.meta.url);
+import 'ts-node-maintained/register/esm';
 
 /**
  * Import ace console entrypoint

app/constants/paths.ts

@@ -1,5 +1,5 @@
 const PATHS = {
-  AUTHOR: 'https://www.sonny.dev/',
+	AUTHOR: 'https://www.sonny.dev/?utm_source=mylinks',
 	REPO_GITHUB: 'https://github.com/Sonny93/my-links',
 	EXTENSION:
 		'https://chromewebstore.google.com/detail/mylinks/agkmlplihacolkakgeccnbhphnepphma',

app/controllers/admin_controller.ts

@@ -14,12 +14,12 @@ class UserWithRelationCountDto {
 		fullname: this.user.name,
 		avatarUrl: this.user.avatarUrl,
 		isAdmin: this.user.isAdmin,
-    createdAt: this.user.createdAt,
-    updatedAt: this.user.updatedAt,
-    count: {
-      link: Number(this.user.$extras.totalLinks),
-      collection: Number(this.user.$extras.totalCollections),
-    },
+		createdAt: this.user.createdAt.toString(),
+		updatedAt: this.user.updatedAt.toString(),
+		lastSeenAt:
+			this.user.lastSeenAt?.toString() ?? this.user.updatedAt.toString(),
+		linksCount: Number(this.user.$extras.totalLinks),
+		collectionsCount: Number(this.user.$extras.totalCollections),
 	});
 }
 

app/controllers/collections_controller.ts

@@ -25,9 +25,11 @@ export default class CollectionsController {
 			return response.redirectToNamedRoute('dashboard');
 		}
 
+		// TODO: Create DTOs
 		return inertia.render('dashboard', {
-      collections,
-      activeCollection: activeCollection || collections[0],
+			collections: collections.map((collection) => collection.serialize()),
+			activeCollection:
+				activeCollection?.serialize() || collections[0].serialize(),
 		});
 	}
 

app/controllers/shared_collections_controller.ts

@@ -1,8 +1,37 @@
 import { Visibility } from '#enums/visibility';
 import Collection from '#models/collection';
+import Link from '#models/link';
+import User from '#models/user';
 import { getSharedCollectionValidator } from '#validators/shared_collection';
 import type { HttpContext } from '@adonisjs/core/http';
 
+class LinkWithoutFavoriteDto {
+	constructor(private link: Link) {}
+
+	toJson = () => ({
+		id: this.link.id,
+		name: this.link.name,
+		description: this.link.description,
+		url: this.link.url,
+		collectionId: this.link.collectionId,
+		createdAt: this.link.createdAt.toString(),
+		updatedAt: this.link.updatedAt.toString(),
+	});
+}
+
+class UserWithoutEmailDto {
+	constructor(private user: User) {}
+
+	toJson = () => ({
+		id: this.user.id,
+		fullname: this.user.name,
+		avatarUrl: this.user.avatarUrl,
+		isAdmin: this.user.isAdmin,
+		createdAt: this.user.createdAt.toString(),
+		updatedAt: this.user.updatedAt.toString(),
+	});
+}
+
 export default class SharedCollectionsController {
 	async index({ request, inertia }: HttpContext) {
 		const { params } = await request.validateUsing(
@@ -14,11 +43,19 @@ export default class SharedCollectionsController {
 	}
 
 	private async getSharedCollectionById(id: Collection['id']) {
-    return await Collection.query()
+		const collection = await Collection.query()
 			.where('id', id)
 			.andWhere('visibility', Visibility.PUBLIC)
 			.preload('links')
 			.preload('author')
 			.firstOrFail();
+
+		return {
+			...collection.serialize(),
+			links: collection.links.map((link) =>
+				new LinkWithoutFavoriteDto(link).toJson()
+			),
+			author: new UserWithoutEmailDto(collection.author).toJson(),
+		};
 	}
 }

app/controllers/users_controller.ts

@@ -5,7 +5,7 @@ import db from '@adonisjs/lucid/services/db';
 import { RouteName } from '@izzyjs/route/types';
 
 export default class UsersController {
-  private redirectTo: RouteName = 'auth.login';
+	private redirectTo: RouteName = 'auth';
 
 	login({ inertia }: HttpContext) {
 		return inertia.render('login');
@@ -67,7 +67,7 @@ export default class UsersController {
 		await auth.use('web').logout();
 		session.flash('flash', 'Successfully disconnected');
 		logger.info(`[${auth.user?.email}] disconnected successfully`);
-    response.redirectToNamedRoute(this.redirectTo);
+		response.redirect('/');
 	}
 
 	async getAllUsersWithTotalRelations() {

app/middleware/auth_middleware.ts

@@ -11,7 +11,7 @@ export default class AuthMiddleware {
 	/**
 	 * The URL to redirect to, when authentication fails
 	 */
-  redirectTo = route('auth.login').url;
+	redirectTo = route('auth').path;
 
 	async handle(
 		ctx: HttpContext,

app/middleware/silent_auth_middleware.ts

@@ -0,0 +1,9 @@
+import type { HttpContext } from '@adonisjs/core/http';
+import type { NextFn } from '@adonisjs/core/types/http';
+
+export default class SilentAuthMiddleware {
+	async handle(ctx: HttpContext, next: NextFn) {
+		await ctx.auth.check();
+		return next();
+	}
+}

app/middleware/update_user_last_seen_middleware.ts

@@ -0,0 +1,16 @@
+import type { HttpContext } from '@adonisjs/core/http';
+import type { NextFn } from '@adonisjs/core/types/http';
+import { DateTime } from 'luxon';
+
+export default class UpdateUserLastSeenMiddleware {
+	async handle(ctx: HttpContext, next: NextFn) {
+		const user = ctx.auth.user;
+		if (user) {
+			user.lastSeenAt = DateTime.local();
+			await user.save();
+		}
+
+		const output = await next();
+		return output;
+	}
+}

app/models/user.ts

@@ -4,6 +4,7 @@ import type { GoogleToken } from '@adonisjs/ally/types';
 import { column, computed, hasMany } from '@adonisjs/lucid/orm';
 import type { HasMany } from '@adonisjs/lucid/types/relations';
 import AppBaseModel from './app_base_model.js';
+import { DateTime } from 'luxon';
 
 export default class User extends AppBaseModel {
 	@column()
@@ -44,4 +45,10 @@ export default class User extends AppBaseModel {
 	get fullname() {
 		return this.nickName || this.name;
 	}
+
+	@column.dateTime({
+		autoCreate: true,
+		autoUpdate: true,
+	})
+	declare lastSeenAt: DateTime;
 }

compose.yml

@@ -9,7 +9,7 @@ services:
       - POSTGRES_USER=${DB_USER}
       - POSTGRES_PASSWORD=${DB_PASSWORD}
     healthcheck:
-      test: ['CMD-SHELL', 'pg_isready']
+      test: ['CMD-SHELL', 'pg_isready', '-U', '${DB_USER}']
     volumes:
       - postgres-volume:/var/lib/postgresql/data
     ports:
@@ -17,22 +17,30 @@ services:
 
   pgadmin:
     container_name: pgadmin
-    image: dpage/pgadmin4:8.6
+    image: dpage/pgadmin4:8
     restart: always
+    entrypoint: /bin/sh -c "chmod 0600 /pgpass; /entrypoint.sh;"
     healthcheck:
       test: ['CMD', 'wget', '-O', '-', 'http://localhost:80/misc/ping']
       interval: 2s
       timeout: 10s
       retries: 30
+    env_file: .env
     environment:
       - PGADMIN_DEFAULT_EMAIL=myemail@gmail.com
       - PGADMIN_DEFAULT_PASSWORD=a12345678
+      - PGADMIN_CONFIG_SERVER_MODE=False
+      - PGADMIN_CONFIG_MASTER_PASSWORD_REQUIRED=False
     depends_on:
       - postgres
-    volumes:
-      - ./docker-config/servers_pgadmin.json:/pgadmin4/servers.json
     ports:
       - '5050:80'
+    user: root
+    configs:
+      - source: servers.json
+        target: /pgadmin4/servers.json
+      - source: pgpass
+        target: /pgpass
 
   my-links:
     container_name: my-links
@@ -53,4 +61,19 @@ services:
 
 volumes:
   postgres-volume:
-    name: postgres-prod-my-links
+
+configs:
+  pgpass:
+    content: postgres:${DB_PORT}:*:${DB_USER}:${DB_PASSWORD}
+  servers.json:
+    content: |
+      {"Servers": {"1": {
+        "Group": "Servers",
+        "Name": "project",
+        "Host": "postgres",
+        "Port": ${DB_PORT},
+        "MaintenanceDB": "${DB_DATABASE}",
+        "Username": "${DB_USER}",
+        "PassFile": "/pgpass",
+        "SSLMode": "prefer"
+      }}}

config/session.ts

@@ -1,5 +1,4 @@
 import env from '#start/env';
-import app from '@adonisjs/core/services/app';
 import { defineConfig, stores } from '@adonisjs/session';
 
 const sessionConfig = defineConfig({
@@ -16,7 +15,7 @@ const sessionConfig = defineConfig({
 	 * Define how long to keep the session data alive without
 	 * any activity.
 	 */
-  age: '2h',
+	age: '7d',
 
 	/**
 	 * Configuration for session cookie and the
@@ -25,8 +24,10 @@ const sessionConfig = defineConfig({
 	cookie: {
 		path: '/',
 		httpOnly: true,
-    secure: app.inProduction,
-    sameSite: 'lax',
+		secure: true,
+
+		// TODO: set this to lax and found a solution to keep auth when using extension
+		sameSite: 'none',
 	},
 
 	/**

config/shield.ts

@@ -27,8 +27,7 @@ const shieldConfig = defineConfig({
 	 * iFrames
 	 */
 	xFrame: {
-    enabled: true,
-    action: 'DENY',
+		enabled: false,
 	},
 
 	/**

database/migrations/1714218548323_create_users_table.ts

@@ -5,7 +5,14 @@ export default class CreateUsersTable extends BaseSchema {
 	static tableName = 'users';
 
 	async up() {
-    this.schema.createTableIfNotExists(CreateUsersTable.tableName, (table) => {
+		const exists = await this.schema.hasTable(CreateUsersTable.tableName);
+		if (exists) {
+			return console.warn(
+				`Table ${CreateUsersTable.tableName} already exists.`
+			);
+		}
+
+		this.schema.createTable(CreateUsersTable.tableName, (table) => {
 			table.string('email', 254).notNullable().unique();
 			table.string('name', 254).notNullable();
 			table.string('nick_name', 254).nullable();

database/migrations/1714253983443_create_collections_table.ts

@@ -8,9 +8,14 @@ export default class CreateCollectionTable extends BaseSchema {
 
 	async up() {
 		this.schema.raw(`DROP TYPE IF EXISTS ${this.visibilityEnumName}`);
-    this.schema.createTableIfNotExists(
-      CreateCollectionTable.tableName,
-      (table) => {
+		const exists = await this.schema.hasTable(CreateCollectionTable.tableName);
+		if (exists) {
+			return console.warn(
+				`Table ${CreateCollectionTable.tableName} already exists.`
+			);
+		}
+
+		this.schema.createTable(CreateCollectionTable.tableName, (table) => {
 			table.string('name', 254).notNullable();
 			table.string('description', 254).nullable();
 			table
@@ -33,8 +38,7 @@ export default class CreateCollectionTable extends BaseSchema {
 				.onDelete('CASCADE');
 
 			defaultTableFields(table);
-      }
-    );
+		});
 	}
 
 	async down() {

database/migrations/1714254076754_create_links_table.ts

@@ -5,7 +5,13 @@ export default class CreateLinksTable extends BaseSchema {
 	static tableName = 'links';
 
 	async up() {
-    this.schema.createTableIfNotExists(CreateLinksTable.tableName, (table) => {
+		const exists = await this.schema.hasTable(CreateLinksTable.tableName);
+		if (exists) {
+			return console.warn(`Table ${CreateLinksTable.tableName} already
+			exists.`);
+		}
+
+		this.schema.createTable(CreateLinksTable.tableName, (table) => {
 			table.string('name', 254).notNullable();
 			table.string('description', 254).nullable();
 			table.text('url').notNullable();

database/migrations/1728257868871_update_user_last_seens_table.ts

@@ -0,0 +1,15 @@
+import { BaseSchema } from '@adonisjs/lucid/schema';
+
+export default class extends BaseSchema {
+	protected tableName = 'users';
+
+	async up() {
+		this.schema.alterTable(this.tableName, (table) => {
+			table.timestamp('last_seen_at');
+		});
+	}
+
+	async down() {
+		this.schema.dropTable(this.tableName);
+	}
+}

database/seeders/collection_seeder.ts

@@ -8,7 +8,6 @@ export default class extends BaseSeeder {
 	static environment = ['development', 'testing'];
 
 	async run() {
-    // eslint-disable-next-line unicorn/no-await-expression-member
 		const users = await getUserIds();
 
 		const collections = faker.helpers.multiple(
@@ -26,14 +25,16 @@ export async function getUserIds() {
 	return users.map(({ id }) => id);
 }
 
+let collectionId = 0;
 function createRandomCollection(userIds: User['id'][]) {
 	const authorId = faker.helpers.arrayElements(userIds, 1).at(0);
+	collectionId++;
 	return {
-    id: faker.string.uuid(),
+		id: collectionId,
 		name: faker.string.alphanumeric({ length: { min: 5, max: 25 } }),
 		description: faker.string.alphanumeric({ length: { min: 0, max: 254 } }),
 		visibility: Visibility.PRIVATE,
-    nextId: undefined,
+		nextId: collectionId + 1,
 		authorId,
 	};
 }

database/seeders/link_seeder.ts

@@ -9,7 +9,6 @@ export default class extends BaseSeeder {
 	static environment = ['development', 'testing'];
 
 	async run() {
-    // eslint-disable-next-line unicorn/no-await-expression-member
 		const users = await getUserIds();
 
 		const links = await Promise.all(

dev.compose.yml

@@ -0,0 +1,62 @@
+name: my-links-dev
+services:
+  postgres:
+    container_name: postgres
+    image: postgres:16
+    restart: always
+    environment:
+      - POSTGRES_DB=${DB_DATABASE}
+      - POSTGRES_USER=${DB_USER}
+      - POSTGRES_PASSWORD=${DB_PASSWORD}
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready", "-U", "${DB_USER}"]
+    volumes:
+      - postgres-volume:/var/lib/postgresql/data
+    ports:
+      - "${DB_PORT}:5432"
+
+  pgadmin:
+    container_name: pgadmin
+    image: dpage/pgadmin4:8
+    restart: always
+    entrypoint: /bin/sh -c "chmod 0600 /pgpass; /entrypoint.sh;"
+    healthcheck:
+      test: ["CMD", "wget", "-O", "-", "http://localhost:80/misc/ping"]
+      interval: 2s
+      timeout: 10s
+      retries: 30
+    env_file: .env
+    environment:
+      - PGADMIN_DEFAULT_EMAIL=myemail@gmail.com
+      - PGADMIN_DEFAULT_PASSWORD=a12345678
+      - PGADMIN_CONFIG_SERVER_MODE=False
+      - PGADMIN_CONFIG_MASTER_PASSWORD_REQUIRED=False
+    depends_on:
+      - postgres
+    ports:
+      - "5050:80"
+    user: root
+    configs:
+      - source: servers.json
+        target: /pgadmin4/servers.json
+      - source: pgpass
+        target: /pgpass
+
+volumes:
+  postgres-volume:
+
+configs:
+  pgpass:
+    content: postgres:${DB_PORT}:*:${DB_USER}:${DB_PASSWORD}
+  servers.json:
+    content: |
+      {"Servers": {"1": {
+        "Group": "Servers",
+        "Name": "project",
+        "Host": "postgres",
+        "Port": ${DB_PORT},
+        "MaintenanceDB": "${DB_DATABASE}",
+        "Username": "${DB_USER}",
+        "PassFile": "/pgpass",
+        "SSLMode": "prefer"
+      }}}

dev.docker-compose.yml

@@ -1,34 +0,0 @@
-name: dev-stack
-services:
-  postgres:
-    container_name: postgres
-    image: postgres:16
-    restart: always
-    environment:
-      - POSTGRES_DB=${DB_DATABASE}
-      - POSTGRES_USER=${DB_USER}
-      - POSTGRES_PASSWORD=${DB_PASSWORD}
-    healthcheck:
-      test: ['CMD-SHELL', 'pg_isready']
-    volumes:
-      - postgres_volume:/var/lib/postgresql/data
-    ports:
-      - '${DB_PORT}:5432'
-
-  pgadmin:
-    container_name: pgadmin
-    image: dpage/pgadmin4:8.6
-    restart: always
-    environment:
-      - PGADMIN_DEFAULT_EMAIL=myemail@gmail.com
-      - PGADMIN_DEFAULT_PASSWORD=a12345678
-    depends_on:
-      - postgres
-    volumes:
-      - ./docker-config/servers_pgadmin.json:/pgadmin4/servers.json
-    ports:
-      - '5050:80'
-
-volumes:
-  postgres_volume:
-    name: postgres_test_dev_stack

docker-config/servers_pgadmin.json

@@ -1,13 +0,0 @@
-{
-  "Servers": {
-    "1": {
-      "Name": "project",
-      "Group": "Servers",
-      "Port": 5432,
-      "Username": "postgres",
-      "Host": "postgres",
-      "SSLMode": "prefer",
-      "MaintenanceDB": "my-links"
-    }
-  }
-}

eslint.config.js

@@ -0,0 +1,4 @@
+import { configApp } from '@adonisjs/eslint-config';
+export default configApp({
+  files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+});

inertia/app/app.tsx

@@ -3,14 +3,12 @@ import { createInertiaApp } from '@inertiajs/react';
 import 'dayjs/locale/en';
 import 'dayjs/locale/fr';
 import { hydrateRoot } from 'react-dom/client';
-import 'react-toggle/style.css';
-import { primaryColor } from '~/styles/common_colors';
 import '../i18n/index';
 
 const appName = import.meta.env.VITE_APP_NAME || 'MyLinks';
 
 createInertiaApp({
-  progress: { color: primaryColor },
+	progress: { color: '#5474B4' },
 
 	title: (title) => `${appName}${title && ` - ${title}`}`,
 

inertia/components/admin/users/th.tsx

@@ -0,0 +1,28 @@
+import { Center, Group, rem, Table, Text, UnstyledButton } from '@mantine/core';
+import { PropsWithChildren } from 'react';
+import { TbChevronDown, TbChevronUp, TbSelector } from 'react-icons/tb';
+import classes from './users_table.module.css';
+
+interface ThProps extends PropsWithChildren {
+	reversed: boolean;
+	sorted: boolean;
+	onSort(): void;
+}
+
+export function Th({ children, reversed, sorted, onSort }: ThProps) {
+	const Icon = sorted ? (reversed ? TbChevronUp : TbChevronDown) : TbSelector;
+	return (
+		<Table.Th className={classes.th}>
+			<UnstyledButton onClick={onSort} className={classes.control}>
+				<Group justify="space-between">
+					<Text fw={500} fz="sm">
+						{children}
+					</Text>
+					<Center className={classes.icon}>
+						<Icon style={{ width: rem(16), height: rem(16) }} />
+					</Center>
+				</Group>
+			</UnstyledButton>
+		</Table.Th>
+	);
+}

inertia/components/admin/users/users_table.module.css

@@ -0,0 +1,21 @@
+.th {
+	padding: 0;
+}
+
+.control {
+	width: 100%;
+	padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+
+	@mixin hover {
+		background-color: light-dark(
+			var(--mantine-color-gray-0),
+			var(--mantine-color-dark-6)
+		);
+	}
+}
+
+.icon {
+	width: rem(21px);
+	height: rem(21px);
+	border-radius: rem(21px);
+}

inertia/components/admin/users/users_table.tsx

@@ -0,0 +1,160 @@
+import {
+	ScrollArea,
+	Table,
+	Text,
+	TextInput,
+	Tooltip,
+	rem,
+} from '@mantine/core';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { TbSearch } from 'react-icons/tb';
+import { Th } from '~/components/admin/users/th';
+import { sortData } from '~/components/admin/users/utils';
+import { UserBadgeRole } from '~/components/common/user_badge_role';
+import { DATE_FORMAT } from '~/constants';
+import { User } from '~/types/app';
+
+dayjs.extend(relativeTime);
+
+export type UserWithCounts = User & {
+	linksCount: number;
+	collectionsCount: number;
+};
+export type UsersWithCounts = UserWithCounts[];
+
+export interface UsersTableProps {
+	users: UsersWithCounts;
+	totalCollections: number;
+	totalLinks: number;
+}
+
+export function UsersTable({
+	users,
+	totalCollections,
+	totalLinks,
+}: UsersTableProps) {
+	const { t } = useTranslation();
+	const [search, setSearch] = useState('');
+	const [sortedData, setSortedData] = useState(users);
+	const [sortBy, setSortBy] = useState<keyof UserWithCounts | null>(null);
+	const [reverseSortDirection, setReverseSortDirection] = useState(false);
+
+	const setSorting = (field: keyof UserWithCounts) => {
+		const reversed = field === sortBy ? !reverseSortDirection : false;
+		setReverseSortDirection(reversed);
+		setSortBy(field);
+		setSortedData(sortData(users, { sortBy: field, reversed, search }));
+	};
+
+	const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const { value } = event.currentTarget;
+		setSearch(value);
+		setSortedData(
+			sortData(users, {
+				sortBy: sortBy,
+				reversed: reverseSortDirection,
+				search: value,
+			})
+		);
+	};
+
+	const renderDateCell = (date: string) => (
+		<Tooltip label={dayjs(date).format(DATE_FORMAT).toString()}>
+			<Text>{dayjs(date).fromNow()}</Text>
+		</Tooltip>
+	);
+
+	const rows = sortedData.map((user) => (
+		<Table.Tr key={user.id}>
+			<Table.Td>{user.fullname}</Table.Td>
+			<Table.Td>
+				<UserBadgeRole user={user} />
+			</Table.Td>
+			<Table.Td>{user.collectionsCount}</Table.Td>
+			<Table.Td>{user.linksCount}</Table.Td>
+			<Table.Td>{renderDateCell(user.createdAt)}</Table.Td>
+			<Table.Td>{renderDateCell(user.lastSeenAt)}</Table.Td>
+		</Table.Tr>
+	));
+
+	return (
+		<ScrollArea>
+			<TextInput
+				placeholder="Search by any field"
+				mb="md"
+				leftSection={<TbSearch style={{ width: rem(16), height: rem(16) }} />}
+				value={search}
+				onChange={handleSearchChange}
+			/>
+			<Table
+				horizontalSpacing="md"
+				verticalSpacing="xs"
+				miw={700}
+				layout="fixed"
+			>
+				<Table.Tbody>
+					<Table.Tr>
+						<Th
+							sorted={sortBy === 'fullname'}
+							reversed={reverseSortDirection}
+							onSort={() => setSorting('fullname')}
+						>
+							{t('common:name')}
+						</Th>
+						<Th
+							sorted={sortBy === 'isAdmin'}
+							reversed={reverseSortDirection}
+							onSort={() => setSorting('isAdmin')}
+						>
+							{t('admin:role')}
+						</Th>
+						<Th
+							sorted={sortBy === 'collectionsCount'}
+							reversed={reverseSortDirection}
+							onSort={() => setSorting('collectionsCount')}
+						>
+							{t('common:collection.collections')} ({totalCollections})
+						</Th>
+						<Th
+							sorted={sortBy === 'linksCount'}
+							reversed={reverseSortDirection}
+							onSort={() => setSorting('linksCount')}
+						>
+							{t('common:link.links')} ({totalLinks})
+						</Th>
+						<Th
+							sorted={sortBy === 'createdAt'}
+							reversed={reverseSortDirection}
+							onSort={() => setSorting('createdAt')}
+						>
+							{t('admin:created_at')}
+						</Th>
+						<Th
+							sorted={sortBy === 'lastSeenAt'}
+							reversed={reverseSortDirection}
+							onSort={() => setSorting('lastSeenAt')}
+						>
+							{t('admin:last_seen_at')}
+						</Th>
+					</Table.Tr>
+				</Table.Tbody>
+				<Table.Tbody>
+					{rows.length > 0 ? (
+						rows
+					) : (
+						<Table.Tr>
+							<Table.Td colSpan={4}>
+								<Text fw={500} ta="center">
+									Nothing found
+								</Text>
+							</Table.Td>
+						</Table.Tr>
+					)}
+				</Table.Tbody>
+			</Table>
+		</ScrollArea>
+	);
+}

inertia/components/admin/users/utils.ts

@@ -0,0 +1,39 @@
+import {
+	UsersWithCounts,
+	UserWithCounts,
+} from '~/components/admin/users/users_table';
+
+export function filterData(data: UsersWithCounts, search: string) {
+	const query = search.toLowerCase().trim();
+	return data.filter((item) =>
+		['email', 'name', 'nickName', 'fullname'].some((key) => {
+			const value = item[key as keyof UserWithCounts];
+			return typeof value === 'string' && value.toLowerCase().includes(query);
+		})
+	);
+}
+
+export function sortData(
+	data: UsersWithCounts,
+	payload: {
+		sortBy: keyof UserWithCounts | null;
+		reversed: boolean;
+		search: string;
+	}
+) {
+	const { sortBy } = payload;
+
+	if (!sortBy) {
+		return filterData(data, payload.search);
+	}
+
+	return filterData(
+		[...data].sort((a, b) => {
+			if (payload.reversed) {
+				return b[sortBy] > a[sortBy] ? 1 : -1;
+			}
+			return a[sortBy] > b[sortBy] ? 1 : -1;
+		}),
+		payload.search
+	);
+}

inertia/components/common/dropdown/dropdown.tsx

@@ -1,61 +0,0 @@
-import styled from '@emotion/styled';
-import { ReactNode, useRef } from 'react';
-import DropdownContainer from '~/components/common/dropdown/dropdown_container';
-import DropdownLabel from '~/components/common/dropdown/dropdown_label';
-import useClickOutside from '~/hooks/use_click_outside';
-import useToggle from '~/hooks/use_modal';
-import useShortcut from '~/hooks/use_shortcut';
-
-const DropdownStyle = styled.div<{ opened: boolean; svgSize?: number }>(
-  ({ opened, theme, svgSize = 24 }) => ({
-    cursor: 'pointer',
-    userSelect: 'none',
-    position: 'relative',
-    minWidth: 'fit-content',
-    width: 'fit-content',
-    maxWidth: '250px',
-    backgroundColor: opened ? theme.colors.secondary : theme.colors.background,
-    padding: '4px',
-    borderRadius: theme.border.radius,
-
-    '&:hover': {
-      backgroundColor: theme.colors.secondary,
-    },
-
-    '& svg': {
-      height: `${svgSize}px`,
-      width: `${svgSize}px`,
-    },
-  })
-);
-
-export default function Dropdown({
-  children,
-  label,
-  className,
-  svgSize,
-}: {
-  children: ReactNode;
-  label: ReactNode | string;
-  className?: string;
-  svgSize?: number;
-}) {
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const { isShowing, toggle, close } = useToggle();
-
-  useClickOutside(dropdownRef, close);
-  useShortcut('ESCAPE_KEY', close, { disableGlobalCheck: true });
-
-  return (
-    <DropdownStyle
-      opened={isShowing}
-      onClick={toggle}
-      ref={dropdownRef}
-      className={className}
-      svgSize={svgSize}
-    >
-      <DropdownLabel>{label}</DropdownLabel>
-      <DropdownContainer show={isShowing}>{children}</DropdownContainer>
-    </DropdownStyle>
-  );
-}

inertia/components/common/dropdown/dropdown_container.tsx

@@ -1,21 +0,0 @@
-import styled from '@emotion/styled';
-import TransitionLayout from '~/components/layouts/_transition_layout';
-
-const DropdownContainer = styled(TransitionLayout)<{ show: boolean }>(
-  ({ show, theme }) => ({
-    zIndex: 99,
-    position: 'absolute',
-    top: 'calc(100% + 0.5em)',
-    right: 0,
-    minWidth: '175px',
-    backgroundColor: show ? theme.colors.secondary : theme.colors.background,
-    border: `2px solid ${theme.colors.secondary}`,
-    borderRadius: theme.border.radius,
-    boxShadow: theme.colors.boxShadow,
-    display: show ? 'flex' : 'none',
-    flexDirection: 'column',
-    overflow: 'hidden',
-  })
-);
-
-export default DropdownContainer;

inertia/components/common/dropdown/dropdown_item.tsx

@@ -1,31 +0,0 @@
-import styled from '@emotion/styled';
-import { Link } from '@inertiajs/react';
-
-const DropdownItemBase = styled('div', {
-  shouldForwardProp: (propName) => propName !== 'danger',
-})<{ danger?: boolean }>(({ theme, danger }) => ({
-  fontSize: '14px',
-  whiteSpace: 'nowrap',
-  color: danger ? theme.colors.lightRed : theme.colors.primary,
-  padding: '8px 12px',
-  borderRadius: theme.border.radius,
-
-  '&:hover': {
-    backgroundColor: theme.colors.background,
-  },
-}));
-
-const DropdownItemButton = styled(DropdownItemBase)({
-  display: 'flex',
-  gap: '0.75em',
-  alignItems: 'center',
-});
-
-const DropdownItemLink = styled(DropdownItemBase.withComponent(Link))({
-  width: '100%',
-  display: 'flex',
-  gap: '0.75em',
-  alignItems: 'center',
-});
-
-export { DropdownItemButton, DropdownItemLink };

inertia/components/common/dropdown/dropdown_label.tsx

@@ -1,11 +0,0 @@
-import styled from '@emotion/styled';
-
-const DropdownLabel = styled.div(({ theme }) => ({
-  height: 'auto',
-  width: 'auto',
-  color: theme.colors.font,
-  display: 'flex',
-  gap: '0.35em',
-}));
-
-export default DropdownLabel;

inertia/components/common/external_link_styled.tsx

@@ -0,0 +1,26 @@
+import { Anchor } from '@mantine/core';
+import { AnchorHTMLAttributes, CSSProperties, ReactNode } from 'react';
+
+export function ExternalLinkStyled({
+	children,
+	title,
+	...props
+}: AnchorHTMLAttributes<HTMLAnchorElement> & {
+	children: ReactNode;
+	style?: CSSProperties;
+	title?: string;
+	className?: string;
+}) {
+	return (
+		<Anchor<'a'>
+			component="a"
+			underline="never"
+			target="_blank"
+			rel="noreferrer"
+			title={title}
+			{...props}
+		>
+			{children}
+		</Anchor>
+	);
+}

inertia/components/common/form/_button.tsx

@@ -1,31 +0,0 @@
-import styled from '@emotion/styled';
-
-const Button = styled.button<{ danger?: boolean }>(({ theme, danger }) => {
-  const btnColor = !danger ? theme.colors.primary : theme.colors.lightRed;
-  const btnDarkColor = !danger ? theme.colors.darkBlue : theme.colors.lightRed;
-  return {
-    cursor: 'pointer',
-    width: '100%',
-    textTransform: 'uppercase',
-    fontSize: '14px',
-    color: theme.colors.white,
-    background: btnColor,
-    padding: '0.75em',
-    border: `1px solid ${btnColor}`,
-    borderRadius: theme.border.radius,
-    transition: theme.transition.delay,
-
-    '&:disabled': {
-      cursor: 'not-allowed',
-      opacity: '0.5',
-    },
-
-    '&:not(:disabled):hover': {
-      boxShadow: `${btnDarkColor} 0 0 3px 1px`,
-      background: btnDarkColor,
-      color: theme.colors.white,
-    },
-  };
-});
-
-export default Button;

inertia/components/common/form/_form.tsx

@@ -1,10 +0,0 @@
-import styled from '@emotion/styled';
-
-const Form = styled.form({
-  width: '100%',
-  display: 'flex',
-  gap: '1em',
-  flexDirection: 'column',
-});
-
-export default Form;

inertia/components/common/form/_form_field.tsx

@@ -1,25 +0,0 @@
-import styled from '@emotion/styled';
-
-const FormField = styled('div', {
-  shouldForwardProp: (propName) => propName !== 'required',
-})<{ required?: boolean }>(({ required, theme }) => ({
-  display: 'flex',
-  gap: '0.25em',
-  flexDirection: 'column',
-
-  '& label': {
-    position: 'relative',
-    userSelect: 'none',
-    width: 'fit-content',
-  },
-
-  '& label::after': {
-    position: 'absolute',
-    top: 0,
-    right: '-0.75em',
-    color: theme.colors.lightRed,
-    content: (required ? '"*"' : '""') as any,
-  },
-}));
-
-export default FormField;

inertia/components/common/form/_form_field_error.tsx

@@ -1,9 +0,0 @@
-import styled from '@emotion/styled';
-
-// TODO: create a global style variable (fontSize)
-const FormFieldError = styled.p(({ theme }) => ({
-  fontSize: '12px',
-  color: theme.colors.lightRed,
-}));
-
-export default FormFieldError;

inertia/components/common/form/_input.tsx

@@ -1,27 +0,0 @@
-import styled from '@emotion/styled';
-
-const Input = styled.input(({ theme }) => ({
-  width: '100%',
-  color: theme.colors.font,
-  backgroundColor: theme.colors.secondary,
-  padding: '0.75em',
-  border: `1px solid ${theme.colors.lightGrey}`,
-  borderBottom: `2px solid ${theme.colors.lightGrey}`,
-  borderRadius: theme.border.radius,
-  transition: theme.transition.delay,
-
-  '&:focus': {
-    borderBottom: `2px solid ${theme.colors.primary}`,
-  },
-
-  '&:disabled': {
-    opacity: 0.85,
-  },
-
-  '&::placeholder': {
-    fontStyle: 'italic',
-    color: theme.colors.grey,
-  },
-}));
-
-export default Input;

inertia/components/common/form/checkbox.tsx

@@ -1,55 +0,0 @@
-import { ChangeEvent, Fragment, InputHTMLAttributes, useState } from 'react';
-import Toggle from 'react-toggle';
-import FormField from '~/components/common/form/_form_field';
-import FormFieldError from '~/components/common/form/_form_field_error';
-
-interface InputProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-  label: string;
-  name: string;
-  checked: boolean;
-  errors?: string[];
-  onChange?: (name: string, checked: boolean) => void;
-}
-
-export default function Checkbox({
-  name,
-  label,
-  checked = false,
-  errors = [],
-  onChange,
-  required = false,
-  ...props
-}: InputProps): JSX.Element {
-  const [checkboxChecked, setCheckboxChecked] = useState<boolean>(checked);
-
-  if (typeof window === 'undefined') return <Fragment />;
-
-  function _onChange({ target }: ChangeEvent<HTMLInputElement>) {
-    setCheckboxChecked(target.checked);
-    if (onChange) {
-      onChange(target.name, target.checked);
-    }
-  }
-
-  return (
-    <FormField
-      css={{ alignItems: 'center', gap: '1em', flexDirection: 'row' }}
-      required={required}
-    >
-      <label htmlFor={name} title={label}>
-        {label}
-      </label>
-      <Toggle
-        {...props}
-        onChange={_onChange}
-        checked={checkboxChecked}
-        placeholder={props.placeholder ?? 'Type something...'}
-        name={name}
-        id={name}
-      />
-      {errors.length > 0 &&
-        errors.map((error) => <FormFieldError>{error}</FormFieldError>)}
-    </FormField>
-  );
-}

inertia/components/common/form/selector.tsx

@@ -1,79 +0,0 @@
-import { useTheme } from '@emotion/react';
-import { InputHTMLAttributes, ReactNode, useEffect, useState } from 'react';
-import Select, {
-  FormatOptionLabelMeta,
-  GroupBase,
-  OptionsOrGroups,
-} from 'react-select';
-import FormField from '~/components/common/form/_form_field';
-
-type Option = { label: string | number; value: string | number };
-
-interface SelectorProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-  label: string;
-  name: string;
-  errors?: string[];
-  options: OptionsOrGroups<Option, GroupBase<Option>>;
-  value: number | string;
-  onChangeCallback?: (value: number | string) => void;
-  formatOptionLabel?: (
-    data: Option,
-    formatOptionLabelMeta: FormatOptionLabelMeta<Option>
-  ) => ReactNode;
-}
-
-export default function Selector({
-  name,
-  label,
-  value,
-  errors = [],
-  options,
-  onChangeCallback,
-  formatOptionLabel,
-  required = false,
-  ...props
-}: SelectorProps): JSX.Element {
-  const theme = useTheme();
-  const [selectorValue, setSelectorValue] = useState<Option>();
-
-  useEffect(() => {
-    if (options.length === 0) return;
-
-    const option = options.find((o: any) => o.value === value);
-    if (option) {
-      setSelectorValue(option as Option);
-    }
-  }, [options, value]);
-
-  const handleChange = (selectedOption: Option) => {
-    setSelectorValue(selectedOption);
-    if (onChangeCallback) {
-      onChangeCallback(selectedOption.value);
-    }
-  };
-
-  return (
-    <FormField required={required}>
-      {label && (
-        <label htmlFor={name} title={`${name} field`}>
-          {label}
-        </label>
-      )}
-      <Select
-        value={selectorValue}
-        onChange={(newValue) => handleChange(newValue as Option)}
-        options={options}
-        isDisabled={props.disabled}
-        menuPlacement="auto"
-        formatOptionLabel={
-          formatOptionLabel
-            ? (val, formatOptionLabelMeta) =>
-                formatOptionLabel(val, formatOptionLabelMeta)
-            : undefined
-        }
-        css={{ color: theme.colors.black }}
-      />
-    </FormField>
-  );
-}

inertia/components/common/form/textbox.tsx

@@ -1,49 +0,0 @@
-import { ChangeEvent, InputHTMLAttributes, useState } from 'react';
-import FormField from '~/components/common/form/_form_field';
-import FormFieldError from '~/components/common/form/_form_field_error';
-import Input from '~/components/common/form/_input';
-
-interface InputProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-  label: string;
-  name: string;
-  value?: string;
-  errors?: string[];
-  onChange?: (name: string, value: string) => void;
-}
-
-export default function TextBox({
-  name,
-  label,
-  value = '',
-  errors = [],
-  onChange,
-  required = false,
-  ...props
-}: InputProps): JSX.Element {
-  const [inputValue, setInputValue] = useState<string>(value);
-
-  function _onChange({ target }: ChangeEvent<HTMLInputElement>) {
-    setInputValue(target.value);
-    if (onChange) {
-      onChange(target.name, target.value);
-    }
-  }
-
-  return (
-    <FormField required={required}>
-      <label htmlFor={name} title={label}>
-        {label}
-      </label>
-      <Input
-        {...props}
-        name={name}
-        onChange={_onChange}
-        value={inputValue}
-        placeholder={props.placeholder ?? 'Type something...'}
-      />
-      {errors.length > 0 &&
-        errors.map((error) => <FormFieldError>{error}</FormFieldError>)}
-    </FormField>
-  );
-}

inertia/components/common/language_switcher.tsx

@@ -0,0 +1,21 @@
+import { ActionIcon, Image } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { LS_LANG_KEY } from '~/constants';
+
+export function MantineLanguageSwitcher() {
+	const { i18n } = useTranslation();
+	const newLanguage = i18n.language === 'en' ? 'fr' : 'en';
+	return (
+		<ActionIcon
+			variant="light"
+			aria-label="Toggle color scheme"
+			onClick={() => {
+				i18n.changeLanguage(newLanguage);
+				localStorage.setItem(LS_LANG_KEY, newLanguage);
+			}}
+			size="lg"
+		>
+			<Image src={`/icons/${newLanguage}.svg`} alt={newLanguage} w={18} />
+		</ActionIcon>
+	);
+}

inertia/components/common/modal/_modal_body.tsx

@@ -1,11 +0,0 @@
-import styled from '@emotion/styled';
-
-const ModalBody = styled.div({
-  width: '100%',
-  display: 'flex',
-  flex: 1,
-  alignItems: 'center',
-  flexDirection: 'column',
-});
-
-export default ModalBody;

inertia/components/common/modal/_modal_container.tsx

@@ -1,24 +0,0 @@
-import styled from '@emotion/styled';
-import TransitionLayout from '~/components/layouts/_transition_layout';
-
-const ModalContainer = styled(TransitionLayout)(({ theme }) => ({
-  minWidth: '500px',
-  background: theme.colors.background,
-  padding: '1em',
-  borderRadius: theme.border.radius,
-  marginTop: '6em',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  boxShadow: theme.colors.boxShadow,
-
-  [`@media (max-width: ${theme.media.mobile})`]: {
-    maxHeight: 'calc(100% - 2em)',
-    width: 'calc(100% - 2em)',
-    minWidth: 'unset',
-    marginTop: '1em',
-  },
-}));
-
-export default ModalContainer;

inertia/components/common/modal/_modal_header.tsx

@@ -1,20 +0,0 @@
-import styled from '@emotion/styled';
-
-const ModalHeader = styled.h3({
-  width: '100%',
-  marginBottom: '0.75em',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-});
-
-const ModalCloseBtn = styled.button(({ theme }) => ({
-  cursor: 'pointer',
-  color: theme.colors.primary,
-  backgroundColor: 'transparent',
-  border: 0,
-  padding: 0,
-  margin: 0,
-}));
-
-export { ModalHeader, ModalCloseBtn };

inertia/components/common/modal/_modal_wrapper.tsx

@@ -1,19 +0,0 @@
-import styled from '@emotion/styled';
-import { rgba } from '~/lib/color';
-
-const ModalWrapper = styled.div(({ theme }) => ({
-  zIndex: 9999,
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  height: '100%',
-  width: '100%',
-  background: rgba(theme.colors.black, 0.35),
-  backdropFilter: 'blur(0.1em)',
-  display: 'flex',
-  alignItems: 'center',
-  flexDirection: 'column',
-  transition: theme.transition.delay,
-}));
-
-export default ModalWrapper;

inertia/components/common/modal/modal.tsx

@@ -1,67 +0,0 @@
-import { Fragment, ReactNode, useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { IoClose } from 'react-icons/io5';
-import ModalBody from '~/components/common/modal/_modal_body';
-import ModalContainer from '~/components/common/modal/_modal_container';
-import {
-  ModalCloseBtn,
-  ModalHeader,
-} from '~/components/common/modal/_modal_header';
-import ModalWrapper from '~/components/common/modal/_modal_wrapper';
-import TextEllipsis from '~/components/common/text_ellipsis';
-import useClickOutside from '~/hooks/use_click_outside';
-import useGlobalHotkeys from '~/hooks/use_global_hotkeys';
-import useShortcut from '~/hooks/use_shortcut';
-
-interface ModalProps {
-  title?: string;
-  children: ReactNode;
-  opened: boolean;
-  hideCloseBtn?: boolean;
-  className?: string;
-
-  close: () => void;
-}
-
-export default function Modal({
-  title,
-  children,
-  opened = true,
-  hideCloseBtn = false,
-  className,
-  close,
-}: ModalProps) {
-  const modalRef = useRef<HTMLDivElement>(null);
-  const { setGlobalHotkeysEnabled } = useGlobalHotkeys();
-
-  useClickOutside(modalRef, close);
-  useShortcut('ESCAPE_KEY', close, { disableGlobalCheck: true });
-
-  useEffect(() => setGlobalHotkeysEnabled(!opened), [opened]);
-
-  if (typeof window === 'undefined') {
-    return <Fragment />;
-  }
-
-  return (
-    opened &&
-    createPortal(
-      <ModalWrapper>
-        <ModalContainer className={className} ref={modalRef}>
-          {(!hideCloseBtn || title) && (
-            <ModalHeader>
-              {title && <TextEllipsis>{title}</TextEllipsis>}
-              {!hideCloseBtn && (
-                <ModalCloseBtn onClick={close}>
-                  <IoClose size={20} />
-                </ModalCloseBtn>
-              )}
-            </ModalHeader>
-          )}
-          <ModalBody>{children}</ModalBody>
-        </ModalContainer>
-      </ModalWrapper>,
-      document.body
-    )
-  );
-}

inertia/components/common/navigation/back_to_dashboard.tsx

@@ -1,17 +1,24 @@
 import { router } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
-import { ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 import useSearchParam from '~/hooks/use_search_param';
 import useShortcut from '~/hooks/use_shortcut';
 import { appendCollectionId } from '~/lib/navigation';
 
-export default function BackToDashboard({ children }: { children: ReactNode }) {
+interface BackToDashboardProps extends PropsWithChildren {
+	disabled?: boolean;
+}
+
+export default function BackToDashboard({
+	disabled = false,
+	children,
+}: BackToDashboardProps) {
 	const collectionId = Number(useSearchParam('collectionId'));
 	useShortcut(
 		'ESCAPE_KEY',
 		() =>
 			router.visit(appendCollectionId(route('dashboard').url, collectionId)),
-    { disableGlobalCheck: true }
+		{ disableGlobalCheck: true, enabled: !disabled }
 	);
 	return <>{children}</>;
 }

inertia/components/common/rounded_image.tsx

@@ -1,15 +0,0 @@
-import styled from '@emotion/styled';
-import { rgba } from '~/lib/color';
-
-const RoundedImage = styled.img(({ theme }) => {
-  const transparentBlack = rgba(theme.colors.black, 0.1);
-  return {
-    borderRadius: '50%',
-
-    '&:hover': {
-      boxShadow: `0 1px 3px 0 ${transparentBlack}, 0 1px 2px -1px ${transparentBlack}`,
-    },
-  };
-});
-
-export default RoundedImage;

inertia/components/common/tabs/tab_item.tsx

@@ -1,24 +0,0 @@
-import styled from '@emotion/styled';
-import { rgba } from '~/lib/color';
-
-const TabItem = styled.li<{ active?: boolean; danger?: boolean }>(
-  ({ theme, active, danger }) => {
-    const activeColor = !danger ? theme.colors.primary : theme.colors.lightRed;
-    return {
-      userSelect: 'none',
-      cursor: 'pointer',
-      backgroundColor: active
-        ? rgba(activeColor, 0.15)
-        : theme.colors.secondary,
-      padding: '10px 20px',
-      border: `1px solid ${active ? rgba(activeColor, 0.1) : theme.colors.secondary}`,
-      borderBottom: `1px solid ${active ? rgba(activeColor, 0.25) : theme.colors.secondary}`,
-      display: 'flex',
-      gap: '0.35em',
-      alignItems: 'center',
-      transition: '.075s',
-    };
-  }
-);
-
-export default TabItem;

inertia/components/common/tabs/tab_list.tsx

@@ -1,10 +0,0 @@
-import styled from '@emotion/styled';
-
-const TabList = styled.ul({
-  padding: 0,
-  margin: 0,
-  display: 'flex',
-  listStyle: 'none',
-});
-
-export default TabList;

inertia/components/common/tabs/tab_panel.tsx

@@ -1,12 +0,0 @@
-import styled from '@emotion/styled';
-import { rgba } from '~/lib/color';
-
-const TabPanel = styled.div(({ theme }) => ({
-  zIndex: 1,
-  position: 'relative',
-  border: `1px solid ${rgba(theme.colors.primary, 0.25)}`,
-  padding: '20px',
-  marginTop: '-1px',
-}));
-
-export default TabPanel;

inertia/components/common/tabs/tabs.tsx

@@ -1,42 +0,0 @@
-import { ReactNode, useState } from 'react';
-import { IconType } from 'react-icons/lib';
-import TabItem from '~/components/common/tabs/tab_item';
-import TabList from '~/components/common/tabs/tab_list';
-import TabPanel from '~/components/common/tabs/tab_panel';
-import TransitionLayout from '~/components/layouts/_transition_layout';
-
-export interface Tab {
-  title: string;
-  content: ReactNode;
-  icon?: IconType;
-  danger?: boolean;
-}
-
-export default function Tabs({ tabs }: { tabs: Tab[] }) {
-  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
-
-  const handleTabClick = (index: number) => {
-    setActiveTabIndex(index);
-  };
-
-  return (
-    <div css={{ width: '100%' }}>
-      <TabList>
-        {tabs.map(({ title, icon: Icon, danger }, index) => (
-          <TabItem
-            key={index}
-            active={index === activeTabIndex}
-            onClick={() => handleTabClick(index)}
-            danger={danger ?? false}
-          >
-            {!!Icon && <Icon size={20} />}
-            {title}
-          </TabItem>
-        ))}
-      </TabList>
-      <TabPanel key={tabs[activeTabIndex].title}>
-        <TransitionLayout>{tabs[activeTabIndex].content}</TransitionLayout>
-      </TabPanel>
-    </div>
-  );
-}

inertia/components/common/text_ellipsis.tsx

@@ -1,20 +0,0 @@
-import styled from '@emotion/styled';
-
-const TextEllipsis = styled.p<{ lines?: number }>(({ lines = 1 }) => {
-  if (lines > 1) {
-    return {
-      overflow: 'hidden',
-      display: '-webkit-box',
-      WebkitLineClamp: lines,
-      WebkitBoxOrient: 'vertical',
-    };
-  }
-
-  return {
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-  };
-});
-
-export default TextEllipsis;

inertia/components/common/theme_switcher.tsx

@@ -0,0 +1,16 @@
+import { ActionIcon, useMantineColorScheme } from '@mantine/core';
+import { TbMoonStars, TbSun } from 'react-icons/tb';
+
+export function MantineThemeSwitcher() {
+	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+	return (
+		<ActionIcon
+			variant="light"
+			aria-label="Toggle color scheme"
+			onClick={() => toggleColorScheme()}
+			size="lg"
+		>
+			{colorScheme === 'dark' ? <TbSun /> : <TbMoonStars />}
+		</ActionIcon>
+	);
+}

inertia/components/common/unstyled/unstyled_list.tsx

@@ -1,12 +0,0 @@
-import styled from '@emotion/styled';
-
-const UnstyledList = styled.ul({
-  '&, & li': {
-    listStyleType: 'none',
-    margin: 0,
-    padding: 0,
-    border: 0,
-  },
-});
-
-export default UnstyledList;

inertia/components/common/user_badge_role.tsx

@@ -0,0 +1,24 @@
+import { Badge } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import type { PublicUser, User } from '~/types/app';
+
+interface UserBadgeRoleProps {
+	user: User | PublicUser;
+}
+
+export function UserBadgeRole({ user }: UserBadgeRoleProps) {
+	const { t } = useTranslation('common');
+	return (
+		<>
+			{user.isAdmin ? (
+				<Badge variant="light" color="red">
+					{t('admin')}
+				</Badge>
+			) : (
+				<Badge variant="light" color="green">
+					{t('user')}
+				</Badge>
+			)}
+		</>
+	);
+}

inertia/components/common/user_card.tsx

@@ -0,0 +1,69 @@
+import { route } from '@izzyjs/route/client';
+import { Avatar, Group, Menu, Text, UnstyledButton } from '@mantine/core';
+import { forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { TbChevronRight } from 'react-icons/tb';
+import useUser from '~/hooks/use_user';
+
+interface UserButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+	image: string;
+	name: string;
+	email: string;
+	icon?: React.ReactNode;
+}
+
+const UserButton = forwardRef<HTMLButtonElement, UserButtonProps>(
+	({ image, name, email, icon, ...others }: UserButtonProps, ref) => (
+		<UnstyledButton
+			ref={ref}
+			style={{
+				color: 'var(--mantine-color-text)',
+				borderRadius: 'var(--mantine-radius-sm)',
+			}}
+			{...others}
+		>
+			<Group>
+				<Avatar
+					src={image}
+					radius="xl"
+					imageProps={{ referrerPolicy: 'no-referrer' }}
+				/>
+
+				<div style={{ flex: 1 }}>
+					<Text size="sm" fw={500}>
+						{name}
+					</Text>
+
+					<Text c="dimmed" size="xs">
+						{email}
+					</Text>
+				</div>
+
+				{icon || <TbChevronRight size="1rem" />}
+			</Group>
+		</UnstyledButton>
+	)
+);
+
+export function MantineUserCard() {
+	const { t } = useTranslation('common');
+	const { user, isAuthenticated } = useUser();
+	return (
+		isAuthenticated && (
+			<Menu withArrow>
+				<Menu.Target>
+					<UserButton
+						image={user.avatarUrl}
+						name={user.fullname}
+						email={user.email}
+					/>
+				</Menu.Target>
+				<Menu.Dropdown>
+					<Menu.Item component="a" href={route('auth.logout').path}>
+						{t('logout')}
+					</Menu.Item>
+				</Menu.Dropdown>
+			</Menu>
+		)
+	);
+}

inertia/components/dashboard/collection/collection_container.tsx

@@ -1,39 +0,0 @@
-import styled from '@emotion/styled';
-import { ReactNode } from 'react';
-import CollectionHeader from '~/components/dashboard/collection/header/collection_header';
-import LinkList from '~/components/dashboard/link/link_list';
-import { NoCollection } from '~/components/dashboard/link/no_item';
-import Footer from '~/components/footer/footer';
-import useActiveCollection from '~/hooks/use_active_collection';
-
-export interface CollectionHeaderProps {
-  showButtons: boolean;
-  showControls?: boolean;
-  openNavigationItem?: ReactNode;
-  openCollectionItem?: ReactNode;
-}
-
-const CollectionContainerStyle = styled.div({
-  height: '100%',
-  minWidth: 0,
-  padding: '0.5em 0.5em 0',
-  display: 'flex',
-  flex: 1,
-  flexDirection: 'column',
-});
-
-export default function CollectionContainer(props: CollectionHeaderProps) {
-  const { activeCollection } = useActiveCollection();
-
-  if (activeCollection === null) {
-    return <NoCollection />;
-  }
-
-  return (
-    <CollectionContainerStyle>
-      <CollectionHeader {...props} />
-      <LinkList links={activeCollection.links} />
-      <Footer css={{ paddingBottom: 0 }} />
-    </CollectionContainerStyle>
-  );
-}

inertia/components/dashboard/collection/header/collection_controls.tsx

@@ -1,42 +0,0 @@
-import { route } from '@izzyjs/route/client';
-import { useTranslation } from 'react-i18next';
-import { BsThreeDotsVertical } from 'react-icons/bs';
-import { GoPencil } from 'react-icons/go';
-import { IoIosAddCircleOutline } from 'react-icons/io';
-import { IoTrashOutline } from 'react-icons/io5';
-import Dropdown from '~/components/common/dropdown/dropdown';
-import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
-import { appendCollectionId } from '~/lib/navigation';
-import { Collection } from '~/types/app';
-
-export default function CollectionControls({
-  collectionId,
-}: {
-  collectionId: Collection['id'];
-}) {
-  const { t } = useTranslation('common');
-  return (
-    <Dropdown label={<BsThreeDotsVertical />} svgSize={18}>
-      <DropdownItemLink href={route('link.create-form').url}>
-        <IoIosAddCircleOutline /> {t('link.create')}
-      </DropdownItemLink>
-      <DropdownItemLink
-        href={appendCollectionId(
-          route('collection.edit-form').url,
-          collectionId
-        )}
-      >
-        <GoPencil /> {t('collection.edit')}
-      </DropdownItemLink>
-      <DropdownItemLink
-        href={appendCollectionId(
-          route('collection.delete-form').url,
-          collectionId
-        )}
-        danger
-      >
-        <IoTrashOutline /> {t('collection.delete')}
-      </DropdownItemLink>
-    </Dropdown>
-  );
-}

inertia/components/dashboard/collection/header/collection_description.tsx

@@ -1,18 +0,0 @@
-import styled from '@emotion/styled';
-import TextEllipsis from '~/components/common/text_ellipsis';
-import useActiveCollection from '~/hooks/use_active_collection';
-
-const CollectionDescriptionStyle = styled.div({
-  width: '100%',
-  fontSize: '0.85rem',
-  marginBottom: '0.5rem',
-});
-
-export default function CollectionDescription() {
-  const { activeCollection } = useActiveCollection();
-  return (
-    <CollectionDescriptionStyle>
-      <TextEllipsis lines={3}>{activeCollection!.description}</TextEllipsis>
-    </CollectionDescriptionStyle>
-  );
-}

inertia/components/dashboard/collection/header/collection_header.tsx

@@ -1,87 +0,0 @@
-import styled from '@emotion/styled';
-import { Fragment } from 'react';
-import { useTranslation } from 'react-i18next';
-import TextEllipsis from '~/components/common/text_ellipsis';
-import { CollectionHeaderProps } from '~/components/dashboard/collection/collection_container';
-import CollectionControls from '~/components/dashboard/collection/header/collection_controls';
-import CollectionDescription from '~/components/dashboard/collection/header/collection_description';
-import VisibilityBadge from '~/components/visibilty/visibilty';
-import useActiveCollection from '~/hooks/use_active_collection';
-
-const paddingLeft = '1.25em';
-const paddingRight = '1.65em';
-
-const CollectionHeaderWrapper = styled.div(({ theme }) => ({
-  minWidth: 0,
-  width: '100%',
-  paddingInline: `${paddingLeft} ${paddingRight}`,
-  marginBottom: '0.5em',
-
-  [`@media (max-width: ${theme.media.tablet})`]: {
-    paddingInline: 0,
-    marginBottom: '1rem',
-  },
-}));
-
-const CollectionHeaderStyle = styled.div({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-
-  '& > svg': {
-    display: 'flex',
-  },
-});
-
-const CollectionName = styled.h2(({ theme }) => ({
-  width: `calc(100% - (${paddingLeft} + ${paddingRight}))`,
-  color: theme.colors.primary,
-  display: 'flex',
-  gap: '0.35em',
-  alignItems: 'center',
-
-  [`@media (max-width: ${theme.media.tablet})`]: {
-    width: `calc(100% - (${paddingLeft} + ${paddingRight} + 1.75em))`,
-  },
-}));
-
-const LinksCount = styled.div(({ theme }) => ({
-  minWidth: 'fit-content',
-  fontWeight: 300,
-  fontSize: '0.8em',
-  color: theme.colors.grey,
-}));
-
-export default function CollectionHeader({
-  showButtons,
-  showControls = true,
-  openNavigationItem,
-  openCollectionItem,
-}: CollectionHeaderProps) {
-  const { t } = useTranslation('common');
-  const { activeCollection } = useActiveCollection();
-
-  if (!activeCollection) return <Fragment />;
-
-  const { name, links, visibility } = activeCollection;
-  return (
-    <CollectionHeaderWrapper>
-      <CollectionHeaderStyle>
-        {showButtons && openNavigationItem && openNavigationItem}
-        <CollectionName title={name}>
-          <TextEllipsis>{name}</TextEllipsis>
-          {links.length > 0 && <LinksCount> — {links.length}</LinksCount>}
-          <VisibilityBadge
-            label={t('collection.visibility')}
-            visibility={visibility}
-          />
-        </CollectionName>
-        {showControls && (
-          <CollectionControls collectionId={activeCollection.id} />
-        )}
-        {showButtons && openCollectionItem && openCollectionItem}
-      </CollectionHeaderStyle>
-      {activeCollection.description && <CollectionDescription />}
-    </CollectionHeaderWrapper>
-  );
-}

inertia/components/dashboard/collection/item/collection_item.module.css

@@ -0,0 +1,44 @@
+.link {
+	width: 100%;
+	max-width: 100%;
+	display: flex;
+	align-items: center;
+	text-decoration: none;
+	font-size: var(--mantine-font-size-sm);
+	color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+	padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+	border-radius: var(--mantine-radius-sm);
+	font-weight: 500;
+
+	@mixin hover {
+		background-color: light-dark(
+			var(--mantine-color-gray-0),
+			var(--mantine-color-dark-6)
+		);
+		color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+
+		.linkIcon {
+			color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+		}
+	}
+
+	&[data-active] {
+		&,
+		&:hover {
+			background-color: var(--mantine-color-blue-light);
+			color: var(--mantine-color-blue-light-color);
+
+			.linkIcon {
+				color: var(--mantine-color-blue-light-color);
+			}
+		}
+	}
+}
+
+.linkIcon {
+	color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+	margin-right: var(--mantine-spacing-sm);
+	width: rem(25px);
+	height: rem(25px);
+	min-width: rem(25px);
+}

inertia/components/dashboard/collection/item/collection_item.tsx

@@ -0,0 +1,48 @@
+import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { Text } from '@mantine/core';
+import { useEffect, useRef } from 'react';
+import { AiFillFolderOpen, AiOutlineFolder } from 'react-icons/ai';
+import { appendCollectionId } from '~/lib/navigation';
+import { useActiveCollection } from '~/stores/collection_store';
+import { CollectionWithLinks } from '~/types/app';
+import classes from './collection_item.module.css';
+
+export default function CollectionItem({
+	collection,
+}: {
+	collection: CollectionWithLinks;
+}) {
+	const itemRef = useRef<HTMLAnchorElement>(null);
+	const { activeCollection } = useActiveCollection();
+	const isActiveCollection = collection.id === activeCollection?.id;
+	const FolderIcon = isActiveCollection ? AiFillFolderOpen : AiOutlineFolder;
+
+	useEffect(() => {
+		if (collection.id === activeCollection?.id) {
+			itemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+		}
+	}, [collection.id, activeCollection?.id]);
+
+	const linksCount = collection?.links.length ?? 0;
+	const showLinks = linksCount > 0;
+	return (
+		<Link
+			className={classes.link}
+			data-active={isActiveCollection || undefined}
+			href={appendCollectionId(route('dashboard').path, collection.id)}
+			key={collection.id}
+			ref={itemRef}
+		>
+			<FolderIcon className={classes.linkIcon} />
+			<Text lineClamp={1} maw={showLinks ? '160px' : '200px'}>
+				{collection.name}
+			</Text>
+			{showLinks && (
+				<Text c="var(--mantine-color-gray-5)" ml="xs">
+					— {linksCount}
+				</Text>
+			)}
+		</Link>
+	);
+}

inertia/components/dashboard/collection/list/collection_item.tsx

@@ -1,57 +0,0 @@
-import styled from '@emotion/styled';
-import { Link } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
-import { useEffect, useRef } from 'react';
-import { AiFillFolderOpen, AiOutlineFolder } from 'react-icons/ai';
-import TextEllipsis from '~/components/common/text_ellipsis';
-import { Item } from '~/components/dashboard/side_nav/nav_item';
-import useActiveCollection from '~/hooks/use_active_collection';
-import { appendCollectionId } from '~/lib/navigation';
-import { CollectionWithLinks } from '~/types/app';
-
-const CollectionItemStyle = styled(Item, {
-  shouldForwardProp: (propName) => propName !== 'isActive',
-})<{ isActive: boolean }>(({ theme, isActive }) => ({
-  cursor: 'pointer',
-  color: isActive ? theme.colors.primary : theme.colors.font,
-  backgroundColor: theme.colors.secondary,
-}));
-const CollectionItemLink = CollectionItemStyle.withComponent(Link);
-
-const LinksCount = styled.div(({ theme }) => ({
-  minWidth: 'fit-content',
-  fontWeight: 300,
-  fontSize: '0.9rem',
-  color: theme.colors.grey,
-}));
-
-export default function CollectionItem({
-  collection,
-}: {
-  collection: CollectionWithLinks;
-}) {
-  const itemRef = useRef<HTMLDivElement>(null);
-  const { activeCollection } = useActiveCollection();
-  const isActiveCollection = collection.id === activeCollection?.id;
-  const FolderIcon = isActiveCollection ? AiFillFolderOpen : AiOutlineFolder;
-
-  useEffect(() => {
-    if (collection.id === activeCollection?.id) {
-      itemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    }
-  }, [collection.id, activeCollection?.id]);
-
-  return (
-    <CollectionItemLink
-      href={appendCollectionId(route('dashboard').url, collection.id)}
-      isActive={isActiveCollection}
-      ref={itemRef}
-    >
-      <FolderIcon css={{ minWidth: '24px' }} size={24} />
-      <TextEllipsis>{collection.name}</TextEllipsis>
-      {collection.links.length > 0 && (
-        <LinksCount>— {collection.links.length}</LinksCount>
-      )}
-    </CollectionItemLink>
-  );
-}

inertia/components/dashboard/collection/list/collection_list.module.css

@@ -0,0 +1,24 @@
+.sideMenu {
+	height: 100%;
+	width: 100%;
+	display: flex;
+	gap: 0.35em;
+	flex-direction: column;
+}
+
+.listContainer {
+	height: 100%;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.collectionList {
+	padding: 1px;
+	padding-right: 5px;
+	display: flex;
+	flex: 1;
+	gap: 0.35em;
+	flex-direction: column;
+	overflow: auto;
+}

inertia/components/dashboard/collection/list/collection_list.tsx

@@ -1,51 +1,30 @@
-import styled from '@emotion/styled';
+import { router } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { Box, ScrollArea, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import CollectionItem from '~/components/dashboard/collection/list/collection_item';
-import CollectionListContainer from '~/components/dashboard/collection/list/collection_list_container';
-import useActiveCollection from '~/hooks/use_active_collection';
-import useCollections from '~/hooks/use_collections';
+import CollectionItem from '~/components/dashboard/collection/item/collection_item';
 import useShortcut from '~/hooks/use_shortcut';
-
-const SideMenu = styled.nav(({ theme }) => ({
-  height: '100%',
-  width: '300px',
-  backgroundColor: theme.colors.background,
-  paddingLeft: '10px',
-  marginLeft: '5px',
-  borderLeft: `1px solid ${theme.colors.lightGrey}`,
-  display: 'flex',
-  gap: '.35em',
-  flexDirection: 'column',
-}));
-
-const CollectionLabel = styled.p(({ theme }) => ({
-  color: theme.colors.grey,
-  marginBlock: '0.35em',
-  paddingInline: '15px',
-}));
-
-const CollectionListStyle = styled.div({
-  padding: '1px',
-  paddingRight: '5px',
-  display: 'flex',
-  flex: 1,
-  gap: '.35em',
-  flexDirection: 'column',
-  overflow: 'auto',
-});
+import { appendCollectionId } from '~/lib/navigation';
+import { useActiveCollection, useCollections } from '~/stores/collection_store';
+import styles from './collection_list.module.css';
 
 export default function CollectionList() {
 	const { t } = useTranslation('common');
 	const { collections } = useCollections();
 	const { activeCollection, setActiveCollection } = useActiveCollection();
 
+	const replaceUrl = (collectionId: number) =>
+		router.get(appendCollectionId(route('dashboard').path, collectionId));
+
 	const goToPreviousCollection = () => {
 		const currentCategoryIndex = collections.findIndex(
 			({ id }) => id === activeCollection?.id
 		);
 		if (currentCategoryIndex === -1 || currentCategoryIndex === 0) return;
 
-    setActiveCollection(collections[currentCategoryIndex - 1]);
+		const collection = collections[currentCategoryIndex - 1];
+		replaceUrl(collection.id);
+		setActiveCollection(collection);
 	};
 
 	const goToNextCollection = () => {
@@ -58,25 +37,29 @@ export default function CollectionList() {
 		)
 			return;
 
-    setActiveCollection(collections[currentCategoryIndex + 1]);
+		const collection = collections[currentCategoryIndex + 1];
+		replaceUrl(collection.id);
+		setActiveCollection(collection);
 	};
 
 	useShortcut('ARROW_UP', goToPreviousCollection);
 	useShortcut('ARROW_DOWN', goToNextCollection);
 
 	return (
-    <SideMenu>
-      <CollectionListContainer>
-        <CollectionLabel>
+		<Box className={styles.sideMenu}>
+			<Box className={styles.listContainer}>
+				<div style={{ display: 'flex', flexDirection: 'column' }}>
+					<Text c="dimmed" ml="md" mb="sm">
 						{t('collection.collections', { count: collections.length })} •{' '}
 						{collections.length}
-        </CollectionLabel>
-        <CollectionListStyle>
+					</Text>
+					<ScrollArea className={styles.collectionList}>
 						{collections.map((collection) => (
 							<CollectionItem collection={collection} key={collection.id} />
 						))}
-        </CollectionListStyle>
-      </CollectionListContainer>
-    </SideMenu>
+					</ScrollArea>
+				</div>
+			</Box>
+		</Box>
 	);
 }

inertia/components/dashboard/collection/list/collection_list_container.tsx

@@ -1,11 +0,0 @@
-import styled from '@emotion/styled';
-
-const CollectionListContainer = styled.div({
-  height: '100%',
-  minHeight: 0,
-  paddingInline: '10px',
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-export default CollectionListContainer;

inertia/components/dashboard/dashboard_aside.tsx

@@ -0,0 +1,19 @@
+import { AppShell, Burger, Group, ScrollArea, Text } from '@mantine/core';
+import CollectionList from '~/components/dashboard/collection/list/collection_list';
+
+interface DashboardAsideProps {
+	isOpen: boolean;
+	toggle: () => void;
+}
+
+export const DashboardAside = ({ isOpen, toggle }: DashboardAsideProps) => (
+	<AppShell.Aside p="md">
+		<Group justify="space-between" hiddenFrom="md" mb="md">
+			<Text>Collections</Text>
+			<Burger opened={isOpen} onClick={toggle} hiddenFrom="md" size="md" />
+		</Group>
+		<AppShell.Section grow component={ScrollArea}>
+			<CollectionList />
+		</AppShell.Section>
+	</AppShell.Aside>
+);

inertia/components/dashboard/dashboard_header.tsx

@@ -0,0 +1,116 @@
+import { Visibility } from '#enums/visibility';
+import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import {
+	ActionIcon,
+	AppShell,
+	Badge,
+	Burger,
+	Flex,
+	Group,
+	Menu,
+	Text,
+} from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { BsThreeDotsVertical } from 'react-icons/bs';
+import { GoPencil } from 'react-icons/go';
+import { IoIosAddCircleOutline } from 'react-icons/io';
+import { IoTrashOutline } from 'react-icons/io5';
+import { ShareCollection } from '~/components/share/share_collection';
+import { appendCollectionId } from '~/lib/navigation';
+import { useActiveCollection } from '~/stores/collection_store';
+
+interface DashboardHeaderProps {
+	navbar: {
+		opened: boolean;
+		toggle: () => void;
+	};
+	aside: {
+		opened: boolean;
+		toggle: () => void;
+	};
+}
+export function DashboardHeader({ navbar, aside }: DashboardHeaderProps) {
+	const { t } = useTranslation('common');
+	const { activeCollection } = useActiveCollection();
+	return (
+		<AppShell.Header style={{ display: 'flex', alignItems: 'center' }}>
+			<Group justify="space-between" px="md" flex={1}>
+				<Group h="100%">
+					<Burger
+						opened={navbar.opened}
+						onClick={navbar.toggle}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Flex direction="column">
+						<Text lineClamp={1}>
+							{activeCollection?.name}{' '}
+							{activeCollection?.visibility === Visibility.PUBLIC && (
+								<Badge variant="light">{t('visibility.public')}</Badge>
+							)}
+						</Text>
+						{activeCollection?.description && (
+							<Text c="dimmed" size="sm">
+								{activeCollection.description}
+							</Text>
+						)}
+					</Flex>
+				</Group>
+				<Group>
+					<ShareCollection />
+
+					<Menu withinPortal shadow="md" width={225}>
+						<Menu.Target>
+							<ActionIcon variant="subtle" color="var(--mantine-color-text)">
+								<BsThreeDotsVertical />
+							</ActionIcon>
+						</Menu.Target>
+						<Menu.Dropdown>
+							<Menu.Item
+								component={Link}
+								href={appendCollectionId(
+									route('link.create-form').path,
+									activeCollection?.id
+								)}
+								leftSection={<IoIosAddCircleOutline />}
+								color="blue"
+							>
+								{t('link.create')}
+							</Menu.Item>
+							<Menu.Item
+								component={Link}
+								href={appendCollectionId(
+									route('collection.edit-form').path,
+									activeCollection?.id
+								)}
+								leftSection={<GoPencil />}
+								color="blue"
+							>
+								{t('collection.edit')}
+							</Menu.Item>
+							<Menu.Item
+								component={Link}
+								href={appendCollectionId(
+									route('collection.delete-form').path,
+									activeCollection?.id
+								)}
+								leftSection={<IoTrashOutline />}
+								color="red"
+							>
+								{t('collection.delete')}
+							</Menu.Item>
+						</Menu.Dropdown>
+					</Menu>
+
+					<Burger
+						opened={aside.opened}
+						onClick={aside.toggle}
+						hiddenFrom="md"
+						size="md"
+					/>
+				</Group>
+			</Group>
+		</AppShell.Header>
+	);
+}

inertia/components/dashboard/dashboard_navbar.tsx

@@ -0,0 +1,142 @@
+import { Link, router } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import {
+	AppShell,
+	Burger,
+	Divider,
+	Group,
+	Kbd,
+	NavLink,
+	rem,
+	ScrollArea,
+	Text,
+} from '@mantine/core';
+import { openSpotlight } from '@mantine/spotlight';
+import { useTranslation } from 'react-i18next';
+import { AiOutlineFolderAdd } from 'react-icons/ai';
+import { IoIosSearch } from 'react-icons/io';
+import { IoAdd, IoShieldHalfSharp } from 'react-icons/io5';
+import { PiGearLight } from 'react-icons/pi';
+import { MantineUserCard } from '~/components/common/user_card';
+import { FavoriteList } from '~/components/dashboard/favorite/favorite_list';
+import { SearchSpotlight } from '~/components/search/search';
+import useShortcut from '~/hooks/use_shortcut';
+import useUser from '~/hooks/use_user';
+import { appendCollectionId } from '~/lib/navigation';
+import { useActiveCollection } from '~/stores/collection_store';
+import { useGlobalHotkeysStore } from '~/stores/global_hotkeys_store';
+
+interface DashboardNavbarProps {
+	isOpen: boolean;
+	toggle: () => void;
+}
+export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
+	const { t } = useTranslation('common');
+	const { isAuthenticated, user } = useUser();
+
+	const { activeCollection } = useActiveCollection();
+	const { globalHotkeysEnabled, setGlobalHotkeysEnabled } =
+		useGlobalHotkeysStore();
+
+	const common = {
+		variant: 'subtle',
+		color: 'blue',
+		active: true,
+		styles: {
+			label: {
+				fontSize: rem(16),
+			},
+			root: {
+				borderRadius: rem(5),
+			},
+		},
+	};
+
+	useShortcut(
+		'OPEN_CREATE_LINK_KEY',
+		() =>
+			router.visit(
+				appendCollectionId(route('link.create-form').url, activeCollection?.id)
+			),
+		{
+			enabled: globalHotkeysEnabled,
+		}
+	);
+
+	useShortcut(
+		'OPEN_CREATE_COLLECTION_KEY',
+		() => router.visit(route('collection.create-form').url),
+		{
+			enabled: globalHotkeysEnabled,
+		}
+	);
+
+	useShortcut('OPEN_SEARCH_KEY', () => openSpotlight(), {
+		enabled: globalHotkeysEnabled,
+	});
+
+	const onSpotlightOpen = () => setGlobalHotkeysEnabled(false);
+	const onSpotlightClose = () => setGlobalHotkeysEnabled(true);
+
+	return (
+		<AppShell.Navbar p="md">
+			<Group hiddenFrom="sm" mb="md">
+				<Burger opened={isOpen} onClick={toggle} size="sm" />
+				<Text>Navigation</Text>
+			</Group>
+			<MantineUserCard />
+			<Divider mt="xs" mb="md" />
+			{isAuthenticated && user.isAdmin && (
+				<NavLink
+					{...common}
+					component={Link}
+					href={route('admin.dashboard').path}
+					label={t('admin')}
+					leftSection={<IoShieldHalfSharp size="1.5rem" />}
+					color="var(--mantine-color-red-5)"
+				/>
+			)}
+			<NavLink
+				{...common}
+				label={t('settings')}
+				leftSection={<PiGearLight size="1.5rem" />}
+				color="var(--mantine-color-text)"
+				disabled
+			/>
+			<>
+				{/* Search button */}
+				<NavLink
+					{...common}
+					label={t('search')}
+					leftSection={<IoIosSearch size="1.5rem" />}
+					onClick={() => openSpotlight()}
+					rightSection={<Kbd size="xs">S</Kbd>}
+				/>
+				{/* Search spotlight / modal */}
+				<SearchSpotlight
+					openCallback={onSpotlightOpen}
+					closeCallback={onSpotlightClose}
+				/>
+			</>
+			<NavLink
+				{...common}
+				component={Link}
+				href={route('link.create-form').path}
+				label={t('link.create')}
+				leftSection={<IoAdd size="1.5rem" />}
+				rightSection={<Kbd size="xs">C</Kbd>}
+			/>
+			<NavLink
+				{...common}
+				component={Link}
+				href={route('collection.create-form').path}
+				label={t('collection.create')}
+				leftSection={<AiOutlineFolderAdd size="1.5rem" />}
+				rightSection={<Kbd size="xs">L</Kbd>}
+			/>
+			<AppShell.Section grow component={ScrollArea}>
+				<FavoriteList />
+			</AppShell.Section>
+		</AppShell.Navbar>
+	);
+}

inertia/components/dashboard/dashboard_provider.tsx

@@ -1,90 +0,0 @@
-import { router } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
-import { ReactNode, useMemo, useState } from 'react';
-import { ActiveCollectionContext } from '~/contexts/active_collection_context';
-import CollectionsContext from '~/contexts/collections_context';
-import FavoritesContext from '~/contexts/favorites_context';
-import GlobalHotkeysContext from '~/contexts/global_hotkeys_context';
-import useShortcut from '~/hooks/use_shortcut';
-import { appendCollectionId } from '~/lib/navigation';
-import { CollectionWithLinks, Link } from '~/types/app';
-
-export default function DashboardProviders(
-  props: Readonly<{
-    children: ReactNode;
-    collections: CollectionWithLinks[];
-    activeCollection: CollectionWithLinks;
-  }>
-) {
-  const [globalHotkeysEnabled, setGlobalHotkeysEnabled] =
-    useState<boolean>(true);
-  const [collections, setCollections] = useState<CollectionWithLinks[]>(
-    props.collections
-  );
-  const [activeCollection, setActiveCollection] =
-    useState<CollectionWithLinks | null>(
-      props.activeCollection || collections?.[0]
-    );
-
-  const handleChangeCollection = (collection: CollectionWithLinks) => {
-    setActiveCollection(collection);
-    router.visit(appendCollectionId(route('dashboard').url, collection.id));
-  };
-
-  const favorites = useMemo<Link[]>(
-    () =>
-      collections.reduce((acc, collection) => {
-        collection.links.forEach((link) =>
-          link.favorite ? acc.push(link) : null
-        );
-        return acc;
-      }, [] as Link[]),
-    [collections]
-  );
-
-  const collectionsContextValue = useMemo(
-    () => ({ collections, setCollections }),
-    [collections]
-  );
-  const activeCollectionContextValue = useMemo(
-    () => ({ activeCollection, setActiveCollection: handleChangeCollection }),
-    [activeCollection, handleChangeCollection]
-  );
-  const favoritesContextValue = useMemo(() => ({ favorites }), [favorites]);
-  const globalHotkeysContextValue = useMemo(
-    () => ({
-      globalHotkeysEnabled,
-      setGlobalHotkeysEnabled,
-    }),
-    [globalHotkeysEnabled]
-  );
-
-  useShortcut(
-    'OPEN_CREATE_LINK_KEY',
-    () =>
-      router.visit(
-        appendCollectionId(route('link.create-form').url, activeCollection?.id)
-      ),
-    {
-      enabled: globalHotkeysEnabled,
-    }
-  );
-  useShortcut(
-    'OPEN_CREATE_COLLECTION_KEY',
-    () => router.visit(route('collection.create-form').url),
-    {
-      enabled: globalHotkeysEnabled,
-    }
-  );
-  return (
-    <CollectionsContext.Provider value={collectionsContextValue}>
-      <ActiveCollectionContext.Provider value={activeCollectionContextValue}>
-        <FavoritesContext.Provider value={favoritesContextValue}>
-          <GlobalHotkeysContext.Provider value={globalHotkeysContextValue}>
-            {props.children}
-          </GlobalHotkeysContext.Provider>
-        </FavoritesContext.Provider>
-      </ActiveCollectionContext.Provider>
-    </CollectionsContext.Provider>
-  );
-}

inertia/components/dashboard/favorite/favorite_list.module.css

@@ -0,0 +1,28 @@
+.sideMenu {
+	height: 100%;
+	width: 100%;
+	display: flex;
+	gap: 0.35em;
+	flex-direction: column;
+}
+
+.listContainer {
+	height: 100%;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.collectionList {
+	padding: 1px;
+	padding-right: 5px;
+	display: flex;
+	flex: 1;
+	gap: 0.35em;
+	flex-direction: column;
+	overflow: auto;
+}
+
+.noFavorite {
+	text-align: center;
+}

inertia/components/dashboard/favorite/favorite_list.tsx

@@ -0,0 +1,39 @@
+import { Box, Group, ScrollArea, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { FavoriteItem } from '~/components/dashboard/favorite/item/favorite_item';
+import { useFavorites } from '~/stores/collection_store';
+import styles from './favorite_list.module.css';
+
+export function FavoriteList() {
+	const { t } = useTranslation('common');
+	const { favorites } = useFavorites();
+
+	if (favorites.length === 0) {
+		return (
+			<Group justify="center">
+				<Text c="dimmed" size="sm" mt="sm">
+					{t('favorites-appears-here')}
+				</Text>
+			</Group>
+		);
+	}
+
+	return (
+		<Box className={styles.sideMenu}>
+			<Box className={styles.listContainer}>
+				<div style={{ display: 'flex', flexDirection: 'column' }}>
+					<Text c="dimmed" mt="xs" ml="md" mb={4}>
+						{t('favorite')} • {favorites.length}
+					</Text>
+					<ScrollArea className={styles.collectionList}>
+						<Stack gap={4}>
+							{favorites.map((link) => (
+								<FavoriteItem link={link} key={link.id} />
+							))}
+						</Stack>
+					</ScrollArea>
+				</div>
+			</Box>
+		</Box>
+	);
+}

inertia/components/dashboard/favorite/item/favorite_item.module.css

@@ -0,0 +1,44 @@
+.linkWrapper {
+	user-select: none;
+	cursor: pointer;
+	width: 100%;
+	background-color: light-dark(var(--mantine-color-gray-1), rgb(50, 58, 71));
+	padding: 0.25em 0.5em !important;
+	border-radius: var(--border-radius);
+	border: 1px solid transparent;
+}
+
+.linkWrapper:hover {
+	border: 1px solid var(--mantine-color-blue-4);
+}
+
+.linkName {
+	width: 100%;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.linkDescription {
+	margin-top: 0.5em;
+	font-size: 0.8em;
+	word-wrap: break-word;
+}
+
+.linkUrl {
+	width: 100%;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	font-size: 0.8em;
+	transition: opacity 0.3s;
+}
+
+.linkWrapper:hover .linkUrlPathname {
+	opacity: 1;
+}
+
+.linkUrlPathname {
+	opacity: 0;
+	transition: opacity 0.3s;
+}

inertia/components/dashboard/favorite/item/favorite_item.tsx

@@ -0,0 +1,23 @@
+import { Card, Group, Text } from '@mantine/core';
+import { ExternalLinkStyled } from '~/components/common/external_link_styled';
+import LinkFavicon from '~/components/dashboard/link/item/favicon/link_favicon';
+import LinkControls from '~/components/dashboard/link/item/link_controls';
+import { LinkWithCollection } from '~/types/app';
+import styles from './favorite_item.module.css';
+
+export const FavoriteItem = ({ link }: { link: LinkWithCollection }) => (
+	<Card className={styles.linkWrapper} radius="sm" withBorder>
+		<Group justify="center" gap="xs">
+			<LinkFavicon size={32} url={link.url} />
+			<ExternalLinkStyled href={link.url} style={{ flex: 1 }}>
+				<div className={styles.linkName}>
+					<Text lineClamp={1}>{link.name} </Text>
+				</div>
+				<Text c="gray" size="xs" mb={4} lineClamp={1}>
+					{link.collection.name}
+				</Text>
+			</ExternalLinkStyled>
+			<LinkControls link={link} showGoToCollection />
+		</Group>
+	</Card>
+);

inertia/components/dashboard/link/item/favicon/link_favicon.module.css

@@ -0,0 +1,26 @@
+.favicon {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.faviconLoader {
+	position: absolute;
+	top: 0;
+	left: 0;
+	background-color: var(--secondary-color);
+}
+
+.faviconLoader > * {
+	animation: rotate 1s both reverse infinite linear;
+}
+
+@keyframes rotate {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

inertia/components/dashboard/link/item/favicon/link_favicon.tsx

@@ -0,0 +1,62 @@
+import { Center, Loader } from '@mantine/core';
+import { useEffect, useRef, useState } from 'react';
+import { TfiWorld } from 'react-icons/tfi';
+import styles from './link_favicon.module.css';
+
+const IMG_LOAD_TIMEOUT = 7_500;
+
+interface LinkFaviconProps {
+	url: string;
+	size?: number;
+}
+
+export default function LinkFavicon({ url, size = 32 }: LinkFaviconProps) {
+	const imgRef = useRef<HTMLImageElement>(null);
+
+	const [isFailed, setFailed] = useState<boolean>(false);
+	const [isLoading, setLoading] = useState<boolean>(true);
+
+	const setFallbackFavicon = () => setFailed(true);
+	const handleStopLoading = () => setLoading(false);
+
+	const handleErrorLoading = () => {
+		setFallbackFavicon();
+		handleStopLoading();
+	};
+
+	useEffect(() => {
+		if (imgRef.current?.complete) {
+			handleStopLoading();
+			return;
+		}
+		const id = setTimeout(() => handleErrorLoading(), IMG_LOAD_TIMEOUT);
+		return () => clearTimeout(id);
+	}, [isLoading]);
+
+	return (
+		<div className={styles.favicon}>
+			{!isFailed ? (
+				<img
+					src={`/favicon?url=${url}`}
+					onError={handleErrorLoading}
+					onLoad={handleStopLoading}
+					height={size}
+					width={size}
+					alt="icon"
+					ref={imgRef}
+					decoding="async"
+				/>
+			) : (
+				<TfiWorld size={size} />
+			)}
+			{isLoading && (
+				<Center
+					className={styles.faviconLoader}
+					style={{ height: `${size}px`, width: `${size}px` }}
+				>
+					<Loader size="xs" />
+				</Center>
+			)}
+		</div>
+	);
+}

inertia/components/dashboard/link/item/link.module.css

@@ -0,0 +1,50 @@
+.linkWrapper {
+	user-select: none;
+	cursor: pointer;
+	width: 100%;
+	background-color: light-dark(var(--mantine-color-gray-1), rgb(50, 58, 71));
+	padding: 0.75em 1em;
+	border-radius: var(--border-radius);
+	border: 1px solid transparent;
+}
+
+.linkWrapper:hover {
+	border: 1px solid var(--mantine-color-blue-4);
+}
+
+.linkHeader {
+	display: flex;
+	gap: 1em;
+	align-items: center;
+}
+
+.linkName {
+	width: 100%;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.linkDescription {
+	margin-top: 0.5em;
+	font-size: 0.8em;
+	word-wrap: break-word;
+}
+
+.linkUrl {
+	width: 100%;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	font-size: 0.8em;
+	transition: opacity 0.3s;
+}
+
+.linkWrapper:hover .linkUrlPathname {
+	opacity: 1;
+}
+
+.linkUrlPathname {
+	opacity: 0;
+	transition: opacity 0.3s;
+}

inertia/components/dashboard/link/item/link_controls.tsx

@@ -0,0 +1,75 @@
+import { Link as InertiaLink } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { ActionIcon, Menu } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { BsThreeDotsVertical } from 'react-icons/bs';
+import { FaRegEye } from 'react-icons/fa';
+import { GoPencil } from 'react-icons/go';
+import { IoTrashOutline } from 'react-icons/io5';
+import { MdFavorite, MdFavoriteBorder } from 'react-icons/md';
+import { onFavorite } from '~/lib/favorite';
+import { appendCollectionId, appendLinkId } from '~/lib/navigation';
+import { useFavorites } from '~/stores/collection_store';
+import { Link, PublicLink } from '~/types/app';
+
+interface LinksControlsProps {
+	link: Link | PublicLink;
+	showGoToCollection?: boolean;
+}
+export default function LinkControls({
+	link,
+	showGoToCollection = false,
+}: LinksControlsProps) {
+	const { toggleFavorite } = useFavorites();
+	const { t } = useTranslation('common');
+
+	const onFavoriteCallback = () => toggleFavorite(link.id);
+	return (
+		<Menu withinPortal shadow="md" width={200}>
+			<Menu.Target>
+				<ActionIcon variant="subtle" color="var(--mantine-color-text)">
+					<BsThreeDotsVertical />
+				</ActionIcon>
+			</Menu.Target>
+			<Menu.Dropdown>
+				{showGoToCollection && (
+					<Menu.Item
+						component={InertiaLink}
+						href={appendCollectionId(route('dashboard').url, link.collectionId)}
+						leftSection={<FaRegEye />}
+						color="blue"
+					>
+						{t('go-to-collection')}
+					</Menu.Item>
+				)}
+				{'favorite' in link && (
+					<Menu.Item
+						onClick={() =>
+							onFavorite(link.id, !link.favorite, onFavoriteCallback)
+						}
+						leftSection={link.favorite ? <MdFavorite /> : <MdFavoriteBorder />}
+						color="var(--mantine-color-yellow-7)"
+					>
+						{link.favorite ? t('remove-favorite') : t('add-favorite')}
+					</Menu.Item>
+				)}
+				<Menu.Item
+					component={InertiaLink}
+					href={appendLinkId(route('link.edit-form').path, link.id)}
+					leftSection={<GoPencil />}
+					color="blue"
+				>
+					{t('link.edit')}
+				</Menu.Item>
+				<Menu.Item
+					component={InertiaLink}
+					href={appendLinkId(route('link.delete-form').path, link.id)}
+					leftSection={<IoTrashOutline />}
+					color="red"
+				>
+					{t('link.delete')}
+				</Menu.Item>
+			</Menu.Dropdown>
+		</Menu>
+	);
+}

inertia/components/dashboard/link/item/link_item.tsx

@@ -0,0 +1,70 @@
+import { Card, Group, Text } from '@mantine/core';
+import { AiFillStar } from 'react-icons/ai';
+import { ExternalLinkStyled } from '~/components/common/external_link_styled';
+import LinkFavicon from '~/components/dashboard/link/item/favicon/link_favicon';
+import LinkControls from '~/components/dashboard/link/item/link_controls';
+import type { LinkListProps } from '~/components/dashboard/link/list/link_list';
+import { Link, PublicLink } from '~/types/app';
+import styles from './link.module.css';
+
+interface LinkItemProps extends LinkListProps {
+	link: Link | PublicLink;
+}
+
+export function LinkItem({ link, hideMenu: hideMenu = false }: LinkItemProps) {
+	const { name, url, description } = link;
+	const showFavoriteIcon = !hideMenu && 'favorite' in link && link.favorite;
+	return (
+		<Card className={styles.linkWrapper} padding="sm" radius="sm" withBorder>
+			<Group className={styles.linkHeader} justify="center">
+				<LinkFavicon url={url} />
+				<ExternalLinkStyled href={url} style={{ flex: 1 }}>
+					<div className={styles.linkName}>
+						<Text lineClamp={1}>
+							{name} {showFavoriteIcon && <AiFillStar color="gold" />}
+						</Text>
+					</div>
+					<LinkItemURL url={url} />
+				</ExternalLinkStyled>
+				{!hideMenu && <LinkControls link={link} />}
+			</Group>
+			{description && (
+				<Text className={styles.linkDescription} c="dimmed" size="sm">
+					{description}
+				</Text>
+			)}
+		</Card>
+	);
+}
+
+function LinkItemURL({ url }: { url: Link['url'] }) {
+	try {
+		const { origin, pathname, search } = new URL(url);
+		let text = '';
+
+		if (pathname !== '/') {
+			text += pathname;
+		}
+
+		if (search !== '') {
+			if (text === '') {
+				text += '/';
+			}
+			text += search;
+		}
+
+		return (
+			<Text className={styles.linkUrl} c="gray" size="xs" lineClamp={1}>
+				{origin}
+				<span className={styles.linkUrlPathname}>{text}</span>
+			</Text>
+		);
+	} catch (error) {
+		console.error('error', error);
+		return (
+			<Text className={styles.linkUrl} c="gray" size="xs" lineClamp={1}>
+				{url}
+			</Text>
+		);
+	}
+}

inertia/components/dashboard/link/link_controls.tsx

@@ -1,100 +0,0 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { route } from '@izzyjs/route/client';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
-import { BsThreeDotsVertical } from 'react-icons/bs';
-import { GoPencil } from 'react-icons/go';
-import { IoTrashOutline } from 'react-icons/io5';
-import Dropdown from '~/components/common/dropdown/dropdown';
-import {
-  DropdownItemButton,
-  DropdownItemLink,
-} from '~/components/common/dropdown/dropdown_item';
-import useActiveCollection from '~/hooks/use_active_collection';
-import useCollections from '~/hooks/use_collections';
-import { appendLinkId } from '~/lib/navigation';
-import { makeRequest } from '~/lib/request';
-import { Link } from '~/types/app';
-
-const StartItem = styled(DropdownItemButton)(({ theme }) => ({
-  color: theme.colors.yellow,
-}));
-
-export default function LinkControls({ link }: { link: Link }) {
-  const theme = useTheme();
-  const { t } = useTranslation('common');
-  const { collections, setCollections } = useCollections();
-  const { setActiveCollection } = useActiveCollection();
-
-  const toggleFavorite = useCallback(
-    (linkId: Link['id']) => {
-      let linkIndex = 0;
-      const collectionIndex = collections.findIndex(({ links }) => {
-        const lIndex = links.findIndex((l) => l.id === linkId);
-        if (lIndex !== -1) {
-          linkIndex = lIndex;
-        }
-        return lIndex !== -1;
-      });
-
-      const collectionLink = collections[collectionIndex].links[linkIndex];
-      const collectionsCopy = [...collections];
-      collectionsCopy[collectionIndex].links[linkIndex] = {
-        ...collectionLink,
-        favorite: !collectionLink.favorite,
-      };
-
-      setCollections(collectionsCopy);
-      setActiveCollection(collectionsCopy[collectionIndex]);
-    },
-    [collections, setCollections]
-  );
-
-  const onFavorite = () => {
-    const { url, method } = route('link.toggle-favorite', {
-      params: { id: link.id.toString() },
-    });
-    makeRequest({
-      url,
-      method,
-      body: {
-        favorite: !link.favorite,
-      },
-    })
-      .then(() => toggleFavorite(link.id))
-      .catch(console.error);
-  };
-
-  return (
-    <Dropdown
-      label={<BsThreeDotsVertical css={{ color: theme.colors.grey }} />}
-      css={{ backgroundColor: theme.colors.secondary }}
-      svgSize={18}
-    >
-      <StartItem onClick={onFavorite}>
-        {!link.favorite ? (
-          <>
-            <AiFillStar /> {t('add-favorite')}
-          </>
-        ) : (
-          <>
-            <AiOutlineStar /> {t('remove-favorite')}
-          </>
-        )}
-      </StartItem>
-      <DropdownItemLink
-        href={appendLinkId(route('link.edit-form').url, link.id)}
-      >
-        <GoPencil /> {t('link.edit')}
-      </DropdownItemLink>
-      <DropdownItemLink
-        href={appendLinkId(route('link.delete-form').url, link.id)}
-        danger
-      >
-        <IoTrashOutline /> {t('link.delete')}
-      </DropdownItemLink>
-    </Dropdown>
-  );
-}

inertia/components/dashboard/link/link_favicon.tsx

@@ -1,82 +0,0 @@
-import styled from '@emotion/styled';
-import { useEffect, useRef, useState } from 'react';
-import { TbLoader3 } from 'react-icons/tb';
-import { TfiWorld } from 'react-icons/tfi';
-import { rotate } from '~/styles/keyframes';
-
-const IMG_LOAD_TIMEOUT = 7_500;
-
-interface LinkFaviconProps {
-  url: string;
-  size?: number;
-}
-
-const Favicon = styled.div({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
-
-const FaviconLoader = styled.div(({ theme }) => ({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  color: theme.colors.font,
-  backgroundColor: theme.colors.secondary,
-
-  '& > *': {
-    animation: `${rotate} 1s both reverse infinite linear`,
-  },
-}));
-
-// The Favicon API should always return an image, so it's not really useful to keep the loader nor placeholder icon,
-// but for slow connections and other random stuff, I'll keep this
-export default function LinkFavicon({ url, size = 32 }: LinkFaviconProps) {
-  const imgRef = useRef<HTMLImageElement>(null);
-
-  const [isFailed, setFailed] = useState<boolean>(false);
-  const [isLoading, setLoading] = useState<boolean>(true);
-
-  const setFallbackFavicon = () => setFailed(true);
-  const handleStopLoading = () => setLoading(false);
-
-  const handleErrorLoading = () => {
-    setFallbackFavicon();
-    handleStopLoading();
-  };
-
-  useEffect(() => {
-    // Ugly hack, onLoad cb not triggered on first load when SSR
-    if (imgRef.current?.complete) {
-      handleStopLoading();
-      return;
-    }
-    const id = setTimeout(() => handleErrorLoading(), IMG_LOAD_TIMEOUT);
-    return () => clearTimeout(id);
-  }, [isLoading]);
-
-  return (
-    <Favicon>
-      {!isFailed ? (
-        <img
-          src={`/favicon?url=${url}`}
-          onError={handleErrorLoading}
-          onLoad={handleStopLoading}
-          height={size}
-          width={size}
-          alt="icon"
-          ref={imgRef}
-          decoding="async"
-        />
-      ) : (
-        <TfiWorld size={size} />
-      )}
-      {isLoading && (
-        <FaviconLoader style={{ height: `${size}px`, width: `${size}px` }}>
-          <TbLoader3 size={size} />
-        </FaviconLoader>
-      )}
-    </Favicon>
-  );
-}

inertia/components/dashboard/link/link_item.tsx

@@ -1,126 +0,0 @@
-import styled from '@emotion/styled';
-import { AiFillStar } from 'react-icons/ai';
-import ExternalLink from '~/components/common/external_link';
-import LinkControls from '~/components/dashboard/link/link_controls';
-import LinkFavicon from '~/components/dashboard/link/link_favicon';
-import { Link } from '~/types/app';
-
-const LinkWrapper = styled.li(({ theme }) => ({
-  userSelect: 'none',
-  cursor: 'pointer',
-  height: 'fit-content',
-  width: '100%',
-  color: theme.colors.primary,
-  backgroundColor: theme.colors.secondary,
-  padding: '0.75em 1em',
-  borderRadius: theme.border.radius,
-
-  '&:hover': {
-    outlineWidth: '1px',
-    outlineStyle: 'solid',
-  },
-}));
-
-const LinkHeader = styled.div(({ theme }) => ({
-  display: 'flex',
-  gap: '1em',
-  alignItems: 'center',
-
-  '& > a': {
-    height: '100%',
-    maxWidth: 'calc(100% - 75px)', // TODO: fix this, it is ugly af :(
-    textDecoration: 'none',
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    transition: theme.transition.delay,
-
-    '&, &:hover': {
-      border: 0,
-    },
-  },
-}));
-
-const LinkName = styled.div({
-  width: '100%',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-});
-
-const LinkDescription = styled.div(({ theme }) => ({
-  marginTop: '0.5em',
-  color: theme.colors.font,
-  fontSize: '0.8em',
-  wordWrap: 'break-word',
-}));
-
-const LinkUrl = styled.span(({ theme }) => ({
-  width: '100%',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  color: theme.colors.grey,
-  fontSize: '0.8em',
-}));
-
-const StarIcon = styled(AiFillStar)(({ theme }) => ({
-  color: theme.colors.yellow,
-}));
-
-const LinkUrlPathname = styled.span({
-  opacity: 0,
-});
-
-export default function LinkItem({
-  link,
-  showUserControls = false,
-}: {
-  link: Link;
-  showUserControls: boolean;
-}) {
-  const { id, name, url, description, favorite } = link;
-  return (
-    <LinkWrapper key={id} title={name}>
-      <LinkHeader>
-        <LinkFavicon url={url} />
-        <ExternalLink href={url} className="reset">
-          <LinkName>
-            {name} {showUserControls && favorite && <StarIcon />}
-          </LinkName>
-          <LinkItemURL url={url} />
-        </ExternalLink>
-        {showUserControls && <LinkControls link={link} />}
-      </LinkHeader>
-      {description && <LinkDescription>{description}</LinkDescription>}
-    </LinkWrapper>
-  );
-}
-
-function LinkItemURL({ url }: { url: Link['url'] }) {
-  try {
-    const { origin, pathname, search } = new URL(url);
-    let text = '';
-
-    if (pathname !== '/') {
-      text += pathname;
-    }
-
-    if (search !== '') {
-      if (text === '') {
-        text += '/';
-      }
-      text += search;
-    }
-
-    return (
-      <LinkUrl>
-        {origin}
-        <LinkUrlPathname>{text}</LinkUrlPathname>
-      </LinkUrl>
-    );
-  } catch (error) {
-    console.error('error', error);
-    return <LinkUrl>{url}</LinkUrl>;
-  }
-}

inertia/components/dashboard/link/link_list.tsx

@@ -1,38 +0,0 @@
-import styled from '@emotion/styled';
-import LinkItem from '~/components/dashboard/link/link_item';
-import { NoLink } from '~/components/dashboard/link/no_item';
-import { sortByCreationDate } from '~/lib/array';
-import { Link } from '~/types/app';
-
-const LinkListStyle = styled.ul({
-  height: '100%',
-  width: '100%',
-  minWidth: 0,
-  display: 'flex',
-  flex: 1,
-  gap: '0.5em',
-  padding: '3px',
-  flexDirection: 'column',
-  overflowX: 'hidden',
-  overflowY: 'scroll',
-});
-
-export default function LinkList({
-  links,
-  showControls = true,
-}: {
-  links: Link[];
-  showControls?: boolean;
-}) {
-  if (links.length === 0) {
-    return <NoLink />;
-  }
-
-  return (
-    <LinkListStyle>
-      {sortByCreationDate(links).map((link) => (
-        <LinkItem link={link} key={link.id} showUserControls={showControls} />
-      ))}
-    </LinkListStyle>
-  );
-}

inertia/components/dashboard/link/list/link_list.tsx

@@ -0,0 +1,24 @@
+import { Stack } from '@mantine/core';
+import { LinkItem } from '~/components/dashboard/link/item/link_item';
+import { NoLink } from '~/components/dashboard/link/no_link/no_link';
+import { useActiveCollection } from '~/stores/collection_store';
+
+export interface LinkListProps {
+	hideMenu?: boolean;
+}
+
+export function LinkList({ hideMenu = false }: LinkListProps) {
+	const { activeCollection } = useActiveCollection();
+
+	if (!activeCollection?.links || activeCollection.links.length === 0) {
+		return <NoLink hideMenu={hideMenu} />;
+	}
+
+	return (
+		<Stack gap="xs">
+			{activeCollection?.links.map((link) => (
+				<LinkItem link={link} key={link.id} hideMenu={hideMenu} />
+			))}
+		</Stack>
+	);
+}

inertia/components/dashboard/link/no_item.tsx

@@ -1,66 +0,0 @@
-import styled from '@emotion/styled';
-import { Link } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
-import { useTranslation } from 'react-i18next';
-import useActiveCollection from '~/hooks/use_active_collection';
-import { appendCollectionId } from '~/lib/navigation';
-import { fadeIn } from '~/styles/keyframes';
-
-const NoCollectionStyle = styled.div({
-  minWidth: 0,
-  display: 'flex',
-  flex: 1,
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  animation: `${fadeIn} 0.3s both`,
-});
-
-const Text = styled.p({
-  minWidth: 0,
-  width: '100%',
-  textAlign: 'center',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-});
-
-export function NoCollection() {
-  const { t } = useTranslation('home');
-  return (
-    <NoCollectionStyle>
-      <Text>{t('select-collection')}</Text>
-      <Link href={route('collection.create-form').url}>
-        {t('or-create-one')}
-      </Link>
-    </NoCollectionStyle>
-  );
-}
-
-export function NoLink() {
-  const { t } = useTranslation('common');
-  const { activeCollection } = useActiveCollection();
-  return (
-    <NoCollectionStyle>
-      <Text
-        dangerouslySetInnerHTML={{
-          __html: t(
-            'home:no-link',
-            { name: activeCollection?.name ?? '' } as any,
-            {
-              interpolation: { escapeValue: false },
-            }
-          ),
-        }}
-      />
-      <Link
-        href={appendCollectionId(
-          route('link.create-form').url,
-          activeCollection?.id
-        )}
-      >
-        {t('link.create')}
-      </Link>
-    </NoCollectionStyle>
-  );
-}