chore: release v3.0.0

+ improve security by not exposing author's email

.babelrc

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

.vscode/extensions.json

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

.vscode/settings.json

@@ -9,5 +9,12 @@
 		"*.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
@@ -15,7 +15,7 @@ RUN pnpm install --ignore-scripts
 FROM base AS production-deps
 WORKDIR /app
 ADD package.json pnpm-lock.yaml ./
-RUN pnpm install --ignore-scripts
+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>.

README.md

@@ -1,25 +1,58 @@
-# MyLinks
+![](./docs//imgs/ml_dashboard_dark.png)
 
-MyLinks is a tool that lets you manage your favorite links in an intuitive interface.
+<div align="center">
-Free and open source software, focused on privacy and self-hosting.
+  <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
 ```
 
-### PNPM
+#### PNPM
 
 ```shell
 # reset database and (force) apply all migrations
@@ -28,15 +61,15 @@ node ace migration:fresh
 pnpm run dev
 ```
 
-## Start as prod
+### Start as prod
 
-### Docker
+#### Docker
 
 ```shell
 make prod
 ```
 
-### PNPM
+#### PNPM
 
 ```shell
 # create production build
@@ -49,14 +82,16 @@ cp ../.env .
 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). 

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,9 +14,10 @@ class UserWithRelationCountDto {
 		fullname: this.user.name,
 		avatarUrl: this.user.avatarUrl,
 		isAdmin: this.user.isAdmin,
-		createdAt: this.user.createdAt,
+		createdAt: this.user.createdAt.toString(),
-		updatedAt: this.user.updatedAt,
+		updatedAt: this.user.updatedAt.toString(),
-		lastSeenAt: this.user.lastSeenAt,
+		lastSeenAt:
+			this.user.lastSeenAt?.toString() ?? this.user.updatedAt.toString(),
 		linksCount: Number(this.user.$extras.totalLinks),
 		collectionsCount: Number(this.user.$extras.totalCollections),
 	});

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,

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:
@@ -19,20 +19,28 @@ services:
     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
-    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"
+      }}}

dev.compose.yml

@@ -1,4 +1,4 @@
-name: dev-stack
+name: my-links-dev
 services:
   postgres:
     container_name: postgres
@@ -9,26 +9,54 @@ 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
+      - postgres-volume:/var/lib/postgresql/data
     ports:
-      - '${DB_PORT}:5432'
+      - "${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
-    volumes:
-      - ./docker-config/servers_pgadmin.json:/pgadmin4/servers.json
     ports:
-      - '5050:80'
+      - "5050:80"
+    user: root
+    configs:
+      - source: servers.json
+        target: /pgadmin4/servers.json
+      - source: pgpass
+        target: /pgpass
 
 volumes:
-  postgres_volume:
+  postgres-volume:
-    name: postgres_test_dev_stack
+
+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"
+      }}}

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

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,64 +0,0 @@
-import styled from '@emotion/styled';
-import { HtmlHTMLAttributes, 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,
-	onClick,
-}: HtmlHTMLAttributes<HTMLDivElement> & {
-	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={(event) => {
-				onClick?.(event);
-				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/icon_button.tsx

@@ -1,22 +0,0 @@
-import styled from '@emotion/styled';
-
-const IconButton = styled.button(({ theme }) => ({
-	cursor: 'pointer',
-	height: '2rem',
-	width: '2rem',
-	fontSize: '1rem',
-	color: theme.colors.font,
-	backgroundColor: theme.colors.grey,
-	borderRadius: '50%',
-	border: 0,
-	display: 'flex',
-	alignItems: 'center',
-	justifyContent: 'center',
-
-	'&:disabled': {
-		cursor: 'not-allowed',
-		opacity: 0.15,
-	},
-}));
-
-export default IconButton;

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/legend.tsx

@@ -1,8 +0,0 @@
-import styled from '@emotion/styled';
-
-const Legend = styled.span(({ theme }) => ({
-	fontSize: '13px',
-	color: theme.colors.grey,
-}));
-
-export default Legend;

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/table.tsx

@@ -1,227 +0,0 @@
-import styled from '@emotion/styled';
-import {
-	ColumnDef,
-	flexRender,
-	getCoreRowModel,
-	getPaginationRowModel,
-	getSortedRowModel,
-	PaginationState,
-	SortingState,
-	useReactTable,
-} from '@tanstack/react-table';
-import { useState } from 'react';
-import IconButton from '~/components/common/icon_button';
-
-import {
-	MdKeyboardArrowLeft,
-	MdKeyboardArrowRight,
-	MdKeyboardDoubleArrowLeft,
-	MdKeyboardDoubleArrowRight,
-} from 'react-icons/md';
-import Input from '~/components/common/form/_input';
-
-const TablePageFooter = styled.div({
-	display: 'flex',
-	gap: '1em',
-	alignItems: 'center',
-});
-
-const Box = styled(TablePageFooter)({
-	gap: '0.35em',
-});
-
-const Resizer = styled.div<{ isResizing: boolean }>(
-	({ theme, isResizing }) => ({
-		cursor: 'col-resize',
-		userSelect: 'none',
-		touchAction: 'none',
-		position: 'absolute',
-		right: 0,
-		top: 0,
-		height: '100%',
-		width: '5px',
-		opacity: !isResizing ? 0 : 1,
-		background: !isResizing ? theme.colors.white : theme.colors.primary,
-		'&:hover': {
-			opacity: 0.5,
-		},
-	})
-);
-
-type TableProps<T> = {
-	columns: ColumnDef<T>[];
-	data: T[];
-	defaultSorting?: SortingState;
-};
-
-export default function Table<T>({
-	columns,
-	data,
-	defaultSorting = [],
-}: TableProps<T>) {
-	const [pagination, setPagination] = useState<PaginationState>({
-		pageIndex: 0,
-		pageSize: 10,
-	});
-	const [sorting, setSorting] = useState<SortingState>(defaultSorting);
-
-	const table = useReactTable({
-		data,
-		columns,
-		enableColumnResizing: true,
-		columnResizeMode: 'onChange',
-		state: {
-			pagination,
-			sorting,
-		},
-		onPaginationChange: setPagination,
-		getCoreRowModel: getCoreRowModel(),
-		getPaginationRowModel: getPaginationRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		onSortingChange: setSorting,
-		debugTable: true,
-	});
-
-	return (
-		<div css={{ fontSize: '0.9rem', paddingBlock: '1em' }}>
-			<div
-				css={{
-					maxWidth: '100%',
-					marginBottom: '1em',
-					display: 'block',
-					overflowX: 'auto',
-					overflowY: 'hidden',
-				}}
-			>
-				<table>
-					<thead>
-						{table.getHeaderGroups().map((headerGroup) => (
-							<tr key={headerGroup.id}>
-								{headerGroup.headers.map((header) => (
-									<th
-										key={header.id}
-										style={{
-											width: header.getSize(),
-										}}
-										css={{
-											position: 'relative',
-											userSelect: 'none',
-											// resizer
-											'&:hover > div > div': {
-												opacity: 0.5,
-											},
-										}}
-										colSpan={header.colSpan}
-									>
-										{header.isPlaceholder ? null : (
-											<div
-												css={{
-													cursor: header.column.getCanSort()
-														? 'pointer'
-														: 'default',
-												}}
-												onClick={header.column.getToggleSortingHandler()}
-												title={
-													header.column.getCanSort()
-														? header.column.getNextSortingOrder() === 'asc'
-															? 'Sort ascending'
-															: header.column.getNextSortingOrder() === 'desc'
-																? 'Sort descending'
-																: 'Clear sort'
-														: undefined
-												}
-											>
-												{flexRender(
-													header.column.columnDef.header,
-													header.getContext()
-												)}
-												{{
-													asc: ' 🔼',
-													desc: ' 🔽',
-												}[header.column.getIsSorted() as string] ?? null}
-												{header.column.getCanResize() && (
-													<Resizer
-														onMouseDown={header.getResizeHandler()}
-														onTouchStart={header.getResizeHandler()}
-														isResizing={header.column.getIsResizing()}
-													/>
-												)}
-											</div>
-										)}
-									</th>
-								))}
-							</tr>
-						))}
-					</thead>
-					<tbody>
-						{table
-							.getRowModel()
-							.rows.slice(0, 10)
-							.map((row) => (
-								<tr key={row.id}>
-									{row.getVisibleCells().map((cell) => (
-										<td key={cell.id} style={{ width: cell.column.getSize() }}>
-											{flexRender(
-												cell.column.columnDef.cell,
-												cell.getContext()
-											)}
-										</td>
-									))}
-								</tr>
-							))}
-					</tbody>
-				</table>
-			</div>
-			{table.getPageCount() > 1 && (
-				<TablePageFooter>
-					<Box>
-						<IconButton
-							onClick={() => table.setPageIndex(0)}
-							disabled={!table.getCanPreviousPage()}
-						>
-							<MdKeyboardDoubleArrowLeft />
-						</IconButton>
-						<IconButton
-							onClick={() => table.previousPage()}
-							disabled={!table.getCanPreviousPage()}
-						>
-							<MdKeyboardArrowLeft />
-						</IconButton>
-						<IconButton
-							onClick={() => table.nextPage()}
-							disabled={!table.getCanNextPage()}
-						>
-							<MdKeyboardArrowRight />
-						</IconButton>
-						<IconButton
-							onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-							disabled={!table.getCanNextPage()}
-						>
-							<MdKeyboardDoubleArrowRight />
-						</IconButton>
-					</Box>
-					<Box>
-						<span>Page</span>
-						<strong>
-							{table.getState().pagination.pageIndex + 1} of{' '}
-							{table.getPageCount()}
-						</strong>
-					</Box>
-					<Box>
-						Go to page
-						<Input
-							type="number"
-							min="1"
-							max={table.getPageCount()}
-							defaultValue={table.getState().pagination.pageIndex + 1}
-							onChange={(e) => {
-								const page = e.target.value ? Number(e.target.value) - 1 : 0;
-								table.setPageIndex(page);
-							}}
-						/>
-					</Box>
-				</TablePageFooter>
-			)}
-		</div>
-	);
-}

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 CollectionItem from '~/components/dashboard/collection/item/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 useShortcut from '~/hooks/use_shortcut';
-
+import { appendCollectionId } from '~/lib/navigation';
-const SideMenu = styled.nav(({ theme }) => ({
+import { useActiveCollection, useCollections } from '~/stores/collection_store';
-	height: '100%',
+import styles from './collection_list.module.css';
-	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',
-});
 
 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>
+		<Box className={styles.sideMenu}>
-			<CollectionListContainer>
+			<Box className={styles.listContainer}>
-				<CollectionLabel>
+				<div style={{ display: 'flex', flexDirection: 'column' }}>
-					{t('collection.collections', { count: collections.length })} •{' '}
+					<Text c="dimmed" ml="md" mb="sm">
-					{collections.length}
+						{t('collection.collections', { count: collections.length })} •{' '}
-				</CollectionLabel>
+						{collections.length}
-				<CollectionListStyle>
+					</Text>
-					{collections.map((collection) => (
+					<ScrollArea className={styles.collectionList}>
-						<CollectionItem collection={collection} key={collection.id} />
+						{collections.map((collection) => (
-					))}
+							<CollectionItem collection={collection} key={collection.id} />
-				</CollectionListStyle>
+						))}
-			</CollectionListContainer>
+					</ScrollArea>
-		</SideMenu>
+				</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,95 +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, LinkWithCollection } 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));
-	};
-
-	// TODO: compute this in controller
-	const favorites = useMemo<LinkWithCollection[]>(
-		() =>
-			collections.reduce((acc, collection) => {
-				collection.links.forEach((link) => {
-					if (link.favorite) {
-						const newLink: LinkWithCollection = { ...link, collection };
-						acc.push(newLink);
-					}
-				});
-				return acc;
-			}, [] as LinkWithCollection[]),
-		[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

@@ -1,8 +1,7 @@
-import styled from '@emotion/styled';
+import { Center, Loader } from '@mantine/core';
 import { useEffect, useRef, useState } from 'react';
-import { TbLoader3 } from 'react-icons/tb';
 import { TfiWorld } from 'react-icons/tfi';
-import { rotate } from '~/styles/keyframes';
+import styles from './link_favicon.module.css';
 
 const IMG_LOAD_TIMEOUT = 7_500;
 
@@ -11,27 +10,6 @@ interface LinkFaviconProps {
 	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);
 
@@ -47,7 +25,6 @@ export default function LinkFavicon({ url, size = 32 }: LinkFaviconProps) {
 	};
 
 	useEffect(() => {
-		// Ugly hack, onLoad cb not triggered on first load when SSR
 		if (imgRef.current?.complete) {
 			handleStopLoading();
 			return;
@@ -57,7 +34,7 @@ export default function LinkFavicon({ url, size = 32 }: LinkFaviconProps) {
 	}, [isLoading]);
 
 	return (
-		<Favicon>
+		<div className={styles.favicon}>
 			{!isFailed ? (
 				<img
 					src={`/favicon?url=${url}`}
@@ -73,10 +50,13 @@ export default function LinkFavicon({ url, size = 32 }: LinkFaviconProps) {
 				<TfiWorld size={size} />
 			)}
 			{isLoading && (
-				<FaviconLoader style={{ height: `${size}px`, width: `${size}px` }}>
+				<Center
-					<TbLoader3 size={size} />
+					className={styles.faviconLoader}
-				</FaviconLoader>
+					style={{ height: `${size}px`, width: `${size}px` }}
+				>
+					<Loader size="xs" />
+				</Center>
 			)}
-		</Favicon>
+		</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,37 +0,0 @@
-import { useTheme } from '@emotion/react';
-import { route } from '@izzyjs/route/client';
-import { useTranslation } from 'react-i18next';
-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 { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
-import FavoriteDropdownItem from '~/components/dashboard/side_nav/favorite/favorite_dropdown_item';
-import { appendLinkId } from '~/lib/navigation';
-import { Link } from '~/types/app';
-
-export default function LinkControls({ link }: { link: Link }) {
-	const theme = useTheme();
-	const { t } = useTranslation('common');
-
-	return (
-		<Dropdown
-			label={<BsThreeDotsVertical css={{ color: theme.colors.grey }} />}
-			css={{ backgroundColor: theme.colors.secondary }}
-			svgSize={18}
-		>
-			<FavoriteDropdownItem link={link} />
-			<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_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>
-	);
-}

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

@@ -0,0 +1,27 @@
+.noCollection {
+  min-width: 0;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  animation: fadeIn 0.3s both;
+}
+
+.text {
+  min-width: 0;
+  width: 100%;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

inertia/components/dashboard/link/no_link/no_link.tsx

@@ -0,0 +1,42 @@
+import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { Anchor, Box, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import type { LinkListProps } from '~/components/dashboard/link/list/link_list';
+import { appendCollectionId } from '~/lib/navigation';
+import { useActiveCollection } from '~/stores/collection_store';
+import styles from './no_link.module.css';
+
+interface NoLinkProps extends LinkListProps {}
+
+export function NoLink({ hideMenu }: NoLinkProps) {
+	const { t } = useTranslation('common');
+	const { activeCollection } = useActiveCollection();
+	return (
+		<Box className={styles.noCollection} p="xl">
+			<Text
+				className={styles.text}
+				dangerouslySetInnerHTML={{
+					__html: t(
+						'home:no-link',
+						{ name: activeCollection?.name ?? '' } as any,
+						{
+							interpolation: { escapeValue: false },
+						}
+					),
+				}}
+			/>
+			{!hideMenu && (
+				<Anchor
+					component={Link}
+					href={appendCollectionId(
+						route('link.create-form').path,
+						activeCollection?.id
+					)}
+				>
+					{t('link.create')}
+				</Anchor>
+			)}
+		</Box>
+	);
+}

inertia/components/dashboard/search/no_search_result.tsx

@@ -1,29 +0,0 @@
-import styled from '@emotion/styled';
-import { useTranslation } from 'react-i18next';
-import { FcGoogle } from 'react-icons/fc';
-
-const NoSearchResultStyle = styled.i({
-	display: 'flex',
-	alignItems: 'center',
-	justifyContent: 'center',
-	gap: '0.25em',
-
-	'& > span': {
-		display: 'flex',
-		alignItems: 'center',
-	},
-});
-
-export default function NoSearchResult() {
-	const { t } = useTranslation('common');
-	return (
-		<NoSearchResultStyle>
-			{t('search-with')}
-			{''}
-			<span>
-				<FcGoogle size={20} />
-				oogle
-			</span>
-		</NoSearchResultStyle>
-	);
-}

inertia/components/dashboard/search/search_modal.tsx

@@ -1,156 +0,0 @@
-import styled from '@emotion/styled';
-import { route } from '@izzyjs/route/client';
-import { FormEvent, useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { IoIosSearch } from 'react-icons/io';
-import Modal from '~/components/common/modal/modal';
-import NoSearchResult from '~/components/dashboard/search/no_search_result';
-import SearchResultList from '~/components/dashboard/search/search_result_list';
-import { GOOGLE_SEARCH_URL } from '~/constants';
-import useActiveCollection from '~/hooks/use_active_collection';
-import useCollections from '~/hooks/use_collections';
-import useToggle from '~/hooks/use_modal';
-import useShortcut from '~/hooks/use_shortcut';
-import { makeRequest } from '~/lib/request';
-import { SearchResult } from '~/types/search';
-
-const SearchInput = styled.input(({ theme }) => ({
-	width: '100%',
-	fontSize: '20px',
-	color: theme.colors.font,
-	backgroundColor: 'transparent',
-	paddingLeft: 0,
-	border: '1px solid transparent',
-}));
-
-interface SearchModalProps {
-	openItem: any;
-}
-
-function SearchModal({ openItem: OpenItem }: SearchModalProps) {
-	const { t } = useTranslation();
-	const { collections } = useCollections();
-	const { setActiveCollection } = useActiveCollection();
-
-	const [searchTerm, setSearchTerm] = useState<string>('');
-	const [results, setResults] = useState<SearchResult[]>([]);
-	const [selectedItem, setSelectedItem] = useState<SearchResult | null>(null);
-
-	const searchModal = useToggle(!!searchTerm);
-
-	const handleCloseModal = useCallback(() => {
-		searchModal.close();
-		setSearchTerm('');
-	}, [searchModal]);
-
-	const handleSearchInputChange = (value: string) => setSearchTerm(value);
-	const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-		event.preventDefault();
-		handleCloseModal();
-
-		if (results.length === 0) {
-			return window.open(GOOGLE_SEARCH_URL + encodeURI(searchTerm.trim()));
-		}
-
-		if (!selectedItem) return;
-
-		if (selectedItem.type === 'collection') {
-			const collection = collections.find((c) => c.id === selectedItem.id);
-			if (collection) {
-				setActiveCollection(collection);
-			}
-			return;
-		}
-
-		window.open(selectedItem.url);
-	};
-
-	useShortcut('OPEN_SEARCH_KEY', searchModal.open, {
-		enabled: !searchModal.isShowing,
-	});
-	useShortcut('ESCAPE_KEY', handleCloseModal, {
-		enabled: searchModal.isShowing,
-		disableGlobalCheck: true,
-	});
-
-	useEffect(() => {
-		if (searchTerm.trim() === '') {
-			return setResults([]);
-		}
-
-		const controller = new AbortController();
-		const { url, method } = route('search', { qs: { term: searchTerm } });
-		makeRequest({
-			method,
-			url,
-			controller,
-		}).then(({ results: _results }) => {
-			setResults(_results);
-			setSelectedItem(_results?.[0]);
-		});
-
-		return () => controller.abort();
-	}, [searchTerm]);
-
-	return (
-		<>
-			<OpenItem onClick={searchModal.open}>
-				<IoIosSearch /> {t('common:search')}
-			</OpenItem>
-			<Modal
-				close={handleCloseModal}
-				opened={searchModal.isShowing}
-				hideCloseBtn
-				css={{ width: '650px' }}
-			>
-				<form
-					onSubmit={handleSubmit}
-					css={{
-						width: '100%',
-						display: 'flex',
-						gap: '0.5em',
-						flexDirection: 'column',
-					}}
-				>
-					<div
-						css={{
-							display: 'flex',
-							gap: '0.35em',
-							alignItems: 'center',
-							justifyContent: 'center',
-						}}
-					>
-						<label htmlFor="search" css={{ display: 'flex' }}>
-							<IoIosSearch size={24} />
-						</label>
-						<SearchInput
-							name="search"
-							id="search"
-							onChange={({ target }) => handleSearchInputChange(target.value)}
-							value={searchTerm}
-							placeholder={t('common:search')}
-							autoFocus
-						/>
-					</div>
-					{results.length > 0 && selectedItem && (
-						<SearchResultList
-							results={results}
-							selectedItem={selectedItem}
-							setSelectedItem={setSelectedItem}
-						/>
-					)}
-					{results.length === 0 && !!searchTerm.trim() && <NoSearchResult />}
-					<button
-						type="submit"
-						disabled={searchTerm.length === 0}
-						style={{ display: 'none' }}
-					>
-						{t('common:confirm')}
-					</button>
-				</form>
-			</Modal>
-		</>
-	);
-}
-
-export default SearchModal;

inertia/components/dashboard/search/search_result_item.tsx

@@ -1,123 +0,0 @@
-import styled from '@emotion/styled';
-import { RefObject, useEffect, useRef, useState } from 'react';
-import { AiOutlineFolder } from 'react-icons/ai';
-import Legend from '~/components/common/legend';
-import TextEllipsis from '~/components/common/text_ellipsis';
-import LinkFavicon from '~/components/dashboard/link/link_favicon';
-import useCollections from '~/hooks/use_collections';
-import {
-	SearchResult,
-	SearchResultCollection,
-	SearchResultLink,
-} from '~/types/search';
-
-const SearchItemStyle = styled('li', {
-	shouldForwardProp: (propName) => propName !== 'isActive',
-})<{ isActive: boolean }>(({ theme, isActive }) => ({
-	fontSize: '16px',
-	backgroundColor: isActive ? theme.colors.secondary : 'transparent',
-	display: 'flex',
-	gap: '0.35em',
-	alignItems: 'center',
-	borderRadius: theme.border.radius,
-	padding: '0.25em 0.35em !important',
-}));
-
-interface CommonResultProps {
-	innerRef: RefObject<HTMLLIElement>;
-	isActive: boolean;
-	onMouseEnter: () => void;
-	onMouseLeave: () => void;
-}
-
-export default function SearchResultItem({
-	result,
-	isActive,
-	onHover,
-}: {
-	result: SearchResult;
-	isActive: boolean;
-	onHover: (result: SearchResult) => void;
-}) {
-	const itemRef = useRef<HTMLLIElement>(null);
-	const [isHovering, setHovering] = useState<boolean>(false);
-
-	const onMouseEnter = () => {
-		if (!isHovering) {
-			onHover(result);
-			setHovering(true);
-		}
-	};
-	const onMouseLeave = () => setHovering(false);
-
-	useEffect(() => {
-		if (isActive && !isHovering) {
-			itemRef.current?.scrollIntoView({
-				behavior: 'instant',
-				block: 'nearest',
-			});
-		}
-	}, [itemRef, isActive]);
-
-	const commonProps = {
-		onMouseEnter,
-		onMouseLeave,
-		isActive,
-	};
-	return result.type === 'collection' ? (
-		<ResultCollection result={result} innerRef={itemRef} {...commonProps} />
-	) : (
-		<ResultLink result={result} innerRef={itemRef} {...commonProps} />
-	);
-}
-
-function ResultLink({
-	result,
-	innerRef,
-	...props
-}: {
-	result: SearchResultLink;
-} & CommonResultProps) {
-	const { collections } = useCollections();
-	const collection = collections.find((c) => c.id === result.collection_id);
-	const link = collection?.links.find((l) => l.id === result.id);
-
-	if (!collection || !link) return <></>;
-
-	return (
-		<SearchItemStyle
-			key={result.type + result.id.toString()}
-			ref={innerRef}
-			{...props}
-		>
-			<LinkFavicon url={link.url} size={20} />
-			<TextEllipsis
-				dangerouslySetInnerHTML={{
-					__html: result.matched_part ?? result.name,
-				}}
-			/>
-			<Legend>({collection.name})</Legend>
-		</SearchItemStyle>
-	);
-}
-
-const ResultCollection = ({
-	result,
-	innerRef,
-	...props
-}: {
-	result: SearchResultCollection;
-} & CommonResultProps) => (
-	<SearchItemStyle
-		key={result.type + result.id.toString()}
-		ref={innerRef}
-		{...props}
-	>
-		<AiOutlineFolder size={24} />
-		<TextEllipsis
-			dangerouslySetInnerHTML={{
-				__html: result.matched_part ?? result.name,
-			}}
-		/>
-	</SearchItemStyle>
-);

inertia/components/dashboard/search/search_result_list.tsx

@@ -1,52 +0,0 @@
-import UnstyledList from '~/components/common/unstyled/unstyled_list';
-import SearchResultItem from '~/components/dashboard/search/search_result_item';
-import useShortcut from '~/hooks/use_shortcut';
-import { SearchResult } from '~/types/search';
-
-export default function SearchResultList({
-	results,
-	selectedItem,
-	setSelectedItem,
-}: {
-	results: SearchResult[];
-	selectedItem: SearchResult;
-	setSelectedItem: (result: SearchResult) => void;
-}) {
-	const selectedItemIndex = results.findIndex(
-		(item) => item.id === selectedItem.id && item.type === selectedItem.type
-	);
-
-	useShortcut(
-		'ARROW_UP',
-		() => setSelectedItem(results[selectedItemIndex - 1]),
-		{
-			enabled: results.length > 1 && selectedItemIndex !== 0,
-			disableGlobalCheck: true,
-		}
-	);
-	useShortcut(
-		'ARROW_DOWN',
-		() => setSelectedItem(results[selectedItemIndex + 1]),
-		{
-			enabled: results.length > 1 && selectedItemIndex !== results.length - 1,
-			disableGlobalCheck: true,
-		}
-	);
-
-	return (
-		<UnstyledList css={{ maxHeight: '500px', overflow: 'auto' }}>
-			{results.map((result) => (
-				<SearchResultItem
-					result={result}
-					onHover={setSelectedItem}
-					isActive={
-						selectedItem &&
-						selectedItem.id === result.id &&
-						selectedItem.type === result.type
-					}
-					key={result.type + result.id.toString()}
-				/>
-			))}
-		</UnstyledList>
-	);
-}

inertia/components/dashboard/side_nav/favorite/favorite_container.tsx

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

inertia/components/dashboard/side_nav/favorite/favorite_dropdown_item.tsx

@@ -1,60 +0,0 @@
-import styled from '@emotion/styled';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
-import { DropdownItemButton } from '~/components/common/dropdown/dropdown_item';
-import useActiveCollection from '~/hooks/use_active_collection';
-import useCollections from '~/hooks/use_collections';
-import { onFavorite } from '~/lib/favorite';
-import { Link } from '~/types/app';
-
-const StarItem = styled(DropdownItemButton)(({ theme }) => ({
-	color: theme.colors.yellow,
-}));
-
-export default function FavoriteDropdownItem({ link }: { link: Link }) {
-	const { collections, setCollections } = useCollections();
-	const { setActiveCollection } = useActiveCollection();
-	const { t } = useTranslation();
-
-	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 onFavoriteCallback = () => toggleFavorite(link.id);
-	return (
-		<StarItem
-			onClick={() => onFavorite(link.id, !link.favorite, onFavoriteCallback)}
-		>
-			{!link.favorite ? (
-				<>
-					<AiFillStar /> {t('add-favorite')}
-				</>
-			) : (
-				<>
-					<AiOutlineStar /> {t('remove-favorite')}
-				</>
-			)}
-		</StarItem>
-	);
-}

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

@@ -1,69 +0,0 @@
-import styled from '@emotion/styled';
-import { route } from '@izzyjs/route/client';
-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 Dropdown from '~/components/common/dropdown/dropdown';
-import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
-import Legend from '~/components/common/legend';
-import TextEllipsis from '~/components/common/text_ellipsis';
-import LinkFavicon from '~/components/dashboard/link/link_favicon';
-import FavoriteDropdownItem from '~/components/dashboard/side_nav/favorite/favorite_dropdown_item';
-import { ItemExternalLink } from '~/components/dashboard/side_nav/nav_item';
-import { appendCollectionId, appendLinkId } from '~/lib/navigation';
-import { LinkWithCollection } from '~/types/app';
-
-const FavoriteItemStyle = styled(ItemExternalLink)(({ theme }) => ({
-	height: 'auto',
-	backgroundColor: theme.colors.secondary,
-}));
-
-const FavoriteDropdown = styled(Dropdown)(({ theme }) => ({
-	backgroundColor: theme.colors.secondary,
-}));
-
-const FavoriteContainer = styled.div({
-	flex: 1,
-	lineHeight: '1.1rem',
-});
-
-export default function FavoriteItem({ link }: { link: LinkWithCollection }) {
-	const { t } = useTranslation();
-	return (
-		<FavoriteItemStyle href={link.url}>
-			<LinkFavicon url={link.url} size={24} />
-			<FavoriteContainer>
-				<TextEllipsis>{link.name}</TextEllipsis>
-				<Legend>{link.collection.name}</Legend>
-			</FavoriteContainer>
-			<FavoriteDropdown
-				onClick={(event) => {
-					event.preventDefault();
-					event.stopPropagation();
-				}}
-				label={<BsThreeDotsVertical />}
-				svgSize={18}
-			>
-				<DropdownItemLink
-					href={appendCollectionId(route('dashboard').url, link.collection.id)}
-				>
-					<FaRegEye /> {t('go-to-collection')}
-				</DropdownItemLink>
-				<FavoriteDropdownItem link={link} />
-				<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>
-			</FavoriteDropdown>
-		</FavoriteItemStyle>
-	);
-}

inertia/components/dashboard/side_nav/favorite/favorite_list.tsx

@@ -1,51 +0,0 @@
-import styled from '@emotion/styled';
-import { useTranslation } from 'react-i18next';
-import FavoriteListContainer from '~/components/dashboard/side_nav/favorite/favorite_container';
-import FavoriteItem from '~/components/dashboard/side_nav/favorite/favorite_item';
-import useFavorites from '~/hooks/use_favorites';
-
-const FavoriteLabel = styled.p(({ theme }) => ({
-	color: theme.colors.grey,
-	marginBlock: '0.35em',
-	paddingInline: '15px',
-}));
-
-const NoFavorite = () => {
-	const { t } = useTranslation('common');
-	return (
-		<FavoriteLabel css={{ textAlign: 'center' }}>
-			{t('favorites-appears-here')}
-		</FavoriteLabel>
-	);
-};
-
-const FavoriteListStyle = styled.div({
-	padding: '1px',
-	paddingRight: '5px',
-	display: 'flex',
-	flex: 1,
-	gap: '.35em',
-	flexDirection: 'column',
-	overflow: 'auto',
-});
-
-export default function FavoriteList() {
-	const { t } = useTranslation('common');
-	const { favorites } = useFavorites();
-	if (favorites.length === 0) {
-		return <NoFavorite key="no-favorite" />;
-	}
-
-	return (
-		<FavoriteListContainer>
-			<FavoriteLabel>
-				{t('favorite')} • {favorites.length}
-			</FavoriteLabel>
-			<FavoriteListStyle>
-				{favorites.map((link) => (
-					<FavoriteItem link={link} key={link.id} />
-				))}
-			</FavoriteListStyle>
-		</FavoriteListContainer>
-	);
-}

inertia/components/dashboard/side_nav/nav_item.tsx

@@ -1,31 +0,0 @@
-import styled from '@emotion/styled';
-import { Link } from '@inertiajs/react';
-import ExternalLink from '~/components/common/external_link';
-import { rgba } from '~/lib/color';
-
-export const Item = styled.div(({ theme }) => ({
-	userSelect: 'none',
-	height: '40px',
-	width: '100%',
-	color: theme.colors.font,
-	backgroundColor: theme.colors.background,
-	padding: '8px 12px',
-	borderRadius: theme.border.radius,
-	display: 'flex',
-	gap: '.75em',
-	alignItems: 'center',
-
-	'& > svg': {
-		height: '24px',
-		width: '24px',
-	},
-
-	// Disable hover effect for UserCard
-	'&:hover:not(.disable-hover)': {
-		cursor: 'pointer',
-		backgroundColor: rgba(theme.colors.font, 0.1),
-	},
-}));
-
-export const ItemLink = Item.withComponent(Link);
-export const ItemExternalLink = Item.withComponent(ExternalLink);

inertia/components/dashboard/side_nav/side_navigation.tsx

@@ -1,80 +0,0 @@
-import styled from '@emotion/styled';
-import { route } from '@izzyjs/route/client';
-import { useTranslation } from 'react-i18next';
-import { AiOutlineFolderAdd } from 'react-icons/ai';
-import { IoAdd, IoShieldHalfSharp } from 'react-icons/io5';
-import SearchModal from '~/components/dashboard/search/search_modal';
-import FavoriteList from '~/components/dashboard/side_nav/favorite/favorite_list';
-import { Item, ItemLink } from '~/components/dashboard/side_nav/nav_item';
-import UserCard from '~/components/dashboard/side_nav/user_card';
-import ModalSettings from '~/components/settings/settings_modal';
-import useActiveCollection from '~/hooks/use_active_collection';
-import useUser from '~/hooks/use_user';
-import { rgba } from '~/lib/color';
-import { appendCollectionId } from '~/lib/navigation';
-
-const SideMenu = styled.nav(({ theme }) => ({
-	height: '100%',
-	width: '300px',
-	backgroundColor: theme.colors.background,
-	borderRight: `1px solid ${theme.colors.lightGrey}`,
-	marginRight: '5px',
-	display: 'flex',
-	gap: '.35em',
-	flexDirection: 'column',
-}));
-
-const AdminButton = styled(ItemLink)(({ theme }) => ({
-	color: theme.colors.lightRed,
-	'&:hover': {
-		backgroundColor: `${rgba(theme.colors.lightRed, 0.1)}!important`,
-	},
-}));
-
-const SettingsButton = styled(Item)(({ theme }) => ({
-	color: theme.colors.grey,
-	'&:hover': {
-		backgroundColor: `${rgba(theme.colors.grey, 0.1)}!important`,
-	},
-}));
-
-const AddButton = styled(ItemLink)(({ theme }) => ({
-	color: theme.colors.primary,
-	'&:hover': {
-		backgroundColor: `${rgba(theme.colors.primary, 0.1)}!important`,
-	},
-}));
-
-const SearchButton = AddButton.withComponent(Item);
-
-export default function SideNavigation() {
-	const { user } = useUser();
-	const { t } = useTranslation('common');
-	const { activeCollection } = useActiveCollection();
-	return (
-		<SideMenu>
-			<div css={{ paddingInline: '10px' }}>
-				<UserCard />
-				{user!.isAdmin && (
-					<AdminButton href={route('admin.dashboard').url}>
-						<IoShieldHalfSharp /> {t('admin')}
-					</AdminButton>
-				)}
-				<ModalSettings openItem={SettingsButton} />
-				<SearchModal openItem={SearchButton} />
-				<AddButton
-					href={appendCollectionId(
-						route('link.create-form').url,
-						activeCollection?.id
-					)}
-				>
-					<IoAdd /> {t('link.create')}
-				</AddButton>
-				<AddButton href={route('collection.create-form').url}>
-					<AiOutlineFolderAdd /> {t('collection.create')}
-				</AddButton>
-			</div>
-			<FavoriteList />
-		</SideMenu>
-	);
-}

inertia/components/dashboard/side_nav/user_card.tsx

@@ -1,21 +0,0 @@
-import RoundedImage from '~/components/common/rounded_image';
-import { Item } from '~/components/dashboard/side_nav/nav_item';
-import useUser from '~/hooks/use_user';
-
-export default function UserCard() {
-	const { user, isAuthenticated } = useUser();
-	const altImage = `${user?.fullname}'s avatar`;
-	return (
-		isAuthenticated && (
-			<Item className="disable-hover">
-				<RoundedImage
-					src={user.avatarUrl}
-					width={24}
-					alt={altImage}
-					referrerPolicy="no-referrer"
-				/>
-				{user.fullname}
-			</Item>
-		)
-	);
-}

inertia/components/dashboard/swiper_handler.tsx

@@ -1,10 +0,0 @@
-import styled from '@emotion/styled';
-
-const SwiperHandler = styled.div(({ theme }) => ({
-	height: '100%',
-	width: '100%',
-	display: 'flex',
-	transition: `background-color ${theme.transition.delay}`,
-}));
-
-export default SwiperHandler;

inertia/components/footer/footer.module.css

@@ -0,0 +1,19 @@
+.footer {
+	width: 100%;
+}
+
+.inner {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	@media (max-width: $mantine-breakpoint-xs) {
+		flex-direction: column;
+	}
+}
+
+.links {
+	@media (max-width: $mantine-breakpoint-xs) {
+		margin-top: var(--mantine-spacing-md);
+	}
+}

inertia/components/footer/footer.tsx

@@ -1,44 +1,58 @@
 import PATHS from '#constants/paths';
-import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
+import { Anchor, Group, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import ExternalLink from '~/components/common/external_link';
+import { MantineLanguageSwitcher } from '~/components/common/language_switcher';
+import { MantineThemeSwitcher } from '~/components/common/theme_switcher';
 import packageJson from '../../../package.json';
+import classes from './footer.module.css';
 
-const FooterStyle = styled.footer(({ theme }) => ({
+export function MantineFooter() {
-	fontSize: '0.9em',
-	color: theme.colors.grey,
-	textAlign: 'center',
-	paddingBlock: '0.75em',
-	'& a:hover': {
-		textDecoration: 'underline',
-	},
-}));
-
-export default function Footer({ className }: { className?: string }) {
 	const { t } = useTranslation('common');
 
+	const links = [
+		{ link: route('privacy').url, label: t('privacy') },
+		{ link: route('terms').url, label: t('terms') },
+		{ link: PATHS.EXTENSION, label: 'Extension' },
+	];
+
+	const items = links.map((link) => (
+		<Anchor
+			c="dimmed"
+			component={Link}
+			key={link.label}
+			href={link.link}
+			size="sm"
+		>
+			{link.label}
+		</Anchor>
+	));
+
 	return (
-		<FooterStyle className={className}>
+		<div className={classes.footer}>
-			<div className="row">
+			<div className={classes.inner}>
-				<Link href={route('privacy').url}>{t('privacy')}</Link>
+				<Group gap={4} c="dimmed">
-				{' • '}
+					<Text size="sm">{t('footer.made_by')}</Text>{' '}
-				<Link href={route('terms').url}>{t('terms')}</Link>
+					<Anchor size="sm" component={ExternalLink} href={PATHS.AUTHOR}>
-				{' • '}
+						Sonny
-				<ExternalLink href={PATHS.EXTENSION}>Extension</ExternalLink>
+					</Anchor>
-			</div>
+					{' • '}
-			<div className="row">
+					<Anchor size="sm" component={ExternalLink} href={PATHS.REPO_GITHUB}>
-				{t('footer.made_by')}{' '}
-				<ExternalLink href={PATHS.AUTHOR}>Sonny</ExternalLink>
-				{' • '}
-				<span>
-					Version:{' '}
-					<ExternalLink href={PATHS.REPO_GITHUB}>
 						{packageJson.version}
-					</ExternalLink>
+					</Anchor>
-				</span>
+				</Group>
+
+				<Group gap="sm" mt={4} mb={4}>
+					<MantineThemeSwitcher />
+					<MantineLanguageSwitcher />
+				</Group>
+
+				<Group gap="xs" justify="flex-end" wrap="nowrap">
+					{items}
+				</Group>
 			</div>
-		</FooterStyle>
+		</div>
 	);
 }

inertia/components/form/form_collection.tsx

@@ -1,10 +1,9 @@
 import { Visibility } from '#enums/visibility';
+import { Box, Group, SegmentedControl, Text, TextInput } from '@mantine/core';
 import { FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import Checkbox from '~/components/common/form/checkbox';
-import TextBox from '~/components/common/form/textbox';
 import BackToDashboard from '~/components/common/navigation/back_to_dashboard';
-import FormLayout from '~/components/layouts/form_layout';
+import { FormLayout, FormLayoutProps } from '~/layouts/form_layout';
 import { Collection } from '~/types/app';
 
 export type FormCollectionData = {
@@ -14,34 +13,24 @@ export type FormCollectionData = {
 	nextId?: Collection['id'];
 };
 
-interface FormCollectionProps {
+interface FormCollectionProps extends FormLayoutProps {
-	title: string;
-	canSubmit: boolean;
-	disableHomeLink?: boolean;
 	data: FormCollectionData;
 	errors?: Record<string, Array<string>>;
 	disableInputs?: boolean;
-	submitBtnDanger?: boolean;
 
 	setData: (name: string, value: any) => void;
 	handleSubmit: () => void;
 }
 
-export default function FormCollection({
+export default function MantineFormCollection({
-	title,
-	canSubmit,
-	disableHomeLink,
 	data,
 	errors,
 	disableInputs = false,
-	submitBtnDanger = false,
-
 	setData,
 	handleSubmit,
+	...props
 }: FormCollectionProps) {
 	const { t } = useTranslation('common');
-	const handleOnCheck: FormCollectionProps['setData'] = (name, value) =>
-		setData(name, value ? Visibility.PUBLIC : Visibility.PRIVATE);
 
 	const onSubmit = (event: FormEvent<HTMLFormElement>) => {
 		event.preventDefault();
@@ -49,41 +38,50 @@ export default function FormCollection({
 	};
 
 	return (
-		<FormLayout
+		<FormLayout handleSubmit={onSubmit} {...props}>
-			title={title}
+			<BackToDashboard disabled={props.disableHomeLink}>
-			handleSubmit={onSubmit}
+				<TextInput
-			canSubmit={canSubmit}
+					label={t('form.name')}
-			disableHomeLink={disableHomeLink}
+					placeholder={t('form.name')}
-			submitBtnDanger={submitBtnDanger}
+					onChange={({ target }) => setData('name', target.value)}
-		>
-			<BackToDashboard>
-				<TextBox
-					label={t('collection.name')}
-					placeholder={t('collection.name')}
-					name="name"
-					onChange={setData}
 					value={data.name}
-					errors={errors?.name}
+					readOnly={disableInputs}
-					required
+					error={errors?.name}
+					mt="md"
 					autoFocus
-					disabled={disableInputs}
+					required
 				/>
-				<TextBox
+				<TextInput
-					label={t('collection.description')}
+					label={t('form.description')}
-					placeholder={t('collection.description')}
+					placeholder={t('form.description')}
-					name="description"
+					onChange={({ target }) => setData('description', target.value)}
-					onChange={setData}
 					value={data.description ?? undefined}
-					errors={errors?.description}
+					readOnly={disableInputs}
-					disabled={disableInputs}
+					error={errors?.description}
-				/>
+					mt="md"
-				<Checkbox
-					label="Public"
-					name="visibility"
-					onChange={handleOnCheck}
-					checked={data.visibility === Visibility.PUBLIC}
-					disabled={disableInputs}
 				/>
+				<Box mt="md">
+					<Text size="sm" fw={500} mb={3}>
+						{t('form.visibility')}
+					</Text>
+					<Group wrap="nowrap">
+						<SegmentedControl
+							data={[
+								{ label: t('visibility.private'), value: Visibility.PRIVATE },
+								{ label: t('visibility.public'), value: Visibility.PUBLIC },
+							]}
+							onChange={(value) => setData('visibility', value as Visibility)}
+							value={data.visibility}
+							style={{ minWidth: 'fit-content' }}
+							readOnly={disableInputs}
+						/>
+						{data.visibility === Visibility.PUBLIC && (
+							<Text c="dimmed" size="sm">
+								{t('form.visibility-warning')}
+							</Text>
+						)}
+					</Group>
+				</Box>
 			</BackToDashboard>
 		</FormLayout>
 	);

inertia/components/form/form_link.tsx

@@ -1,11 +1,9 @@
+import { Checkbox, Select, TextInput } from '@mantine/core';
 import { FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import Checkbox from '~/components/common/form/checkbox';
-import Selector from '~/components/common/form/selector';
-import TextBox from '~/components/common/form/textbox';
 import BackToDashboard from '~/components/common/navigation/back_to_dashboard';
-import FormLayout from '~/components/layouts/form_layout';
 import useSearchParam from '~/hooks/use_search_param';
+import { FormLayout, FormLayoutProps } from '~/layouts/form_layout';
 import { Collection } from '~/types/app';
 
 export type FormLinkData = {
@@ -16,32 +14,24 @@ export type FormLinkData = {
 	collectionId: Collection['id'];
 };
 
-interface FormLinkProps {
+interface FormLinkProps extends FormLayoutProps {
-	title: string;
-	canSubmit: boolean;
-	disableHomeLink?: boolean;
 	data: FormLinkData;
 	errors?: Record<string, Array<string>>;
 	collections: Collection[];
 	disableInputs?: boolean;
-	submitBtnDanger?: boolean;
 
 	setData: (name: string, value: any) => void;
 	handleSubmit: () => void;
 }
 
-export default function FormLink({
+export default function MantineFormLink({
-	title,
-	canSubmit,
-	disableHomeLink,
 	data,
 	errors,
 	collections,
 	disableInputs = false,
-	submitBtnDanger = false,
-
 	setData,
 	handleSubmit,
+	...props
 }: FormLinkProps) {
 	const { t } = useTranslation('common');
 	const collectionId =
@@ -53,64 +43,59 @@ export default function FormLink({
 	};
 
 	return (
-		<FormLayout
+		<FormLayout handleSubmit={onSubmit} collectionId={collectionId} {...props}>
-			title={title}
+			<BackToDashboard disabled={props.disableHomeLink}>
-			handleSubmit={onSubmit}
+				<TextInput
-			canSubmit={canSubmit}
+					label={t('form.name')}
-			disableHomeLink={disableHomeLink}
+					placeholder={t('form.name')}
-			collectionId={collectionId}
+					onChange={({ target }) => setData('name', target.value)}
-			submitBtnDanger={submitBtnDanger}
-		>
-			<BackToDashboard>
-				<TextBox
-					label={t('link.name')}
-					placeholder={t('link.name')}
-					name="name"
-					onChange={setData}
 					value={data.name}
-					errors={errors?.name}
+					readOnly={disableInputs}
-					disabled={disableInputs}
+					error={errors?.name}
-					required
+					mt="md"
 					autoFocus
-				/>
-				<TextBox
-					label={t('link.link')}
-					placeholder={t('link.link')}
-					name="url"
-					onChange={setData}
-					value={data.url}
-					errors={errors?.url}
-					disabled={disableInputs}
 					required
 				/>
-				<TextBox
+				<TextInput
-					label={t('link.description')}
+					label={t('form.url')}
-					placeholder={t('link.description')}
+					placeholder={t('form.url')}
-					name="description"
+					onChange={({ target }) => setData('url', target.value)}
-					onChange={setData}
+					value={data.url ?? undefined}
-					value={data.description ?? undefined}
+					readOnly={disableInputs}
-					errors={errors?.description}
+					error={errors?.link}
-					disabled={disableInputs}
+					mt="md"
+					required
 				/>
-				<Selector
+				<TextInput
+					label={t('form.description')}
+					placeholder={t('form.description')}
+					onChange={({ target }) => setData('description', target.value)}
+					value={data.description ?? undefined}
+					readOnly={disableInputs}
+					error={errors?.description}
+					mt="md"
+				/>
+				<Select
 					label={t('collection.collections')}
-					name="collection"
 					placeholder={t('collection.collections')}
-					value={data.collectionId}
+					data={collections.map(({ id, name }) => ({
-					onChangeCallback={(value) => setData('collectionId', value)}
-					options={collections.map(({ id, name }) => ({
 						label: name,
-						value: id,
+						value: id.toString(),
 					}))}
+					onChange={(value) => setData('collectionId', value)}
+					value={data.collectionId.toString()}
+					readOnly={disableInputs}
+					mt="md"
+					searchable
 					required
 				/>
 				<Checkbox
 					label={t('favorite')}
-					name="favorite"
+					onChange={({ target }) => setData('favorite', target.checked)}
-					onChange={setData}
 					checked={data.favorite}
-					errors={errors?.favorite}
+					error={errors?.favorite}
-					disabled={disableInputs}
+					disabled={disableInputs} // readonly not working
+					mt="md"
 				/>
 			</BackToDashboard>
 		</FormLayout>