layout redesign for the modals

components/Dashboard/CollectionItem.tsx

@@ -18,7 +18,10 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
   });
 
   return (
-    <Link href={`/collections/${collection.id}`} className="bg-white">
+    <Link
+      href={`/collections/${collection.id}`}
+      className="bg-white rounded-md"
+    >
       <div className="p-5 rounded-md flex border border-sky-100 flex-col gap-2 justify-between cursor-pointer hover:opacity-60 duration-100">
         <div>
           <div className="flex justify-between text-sky-600 items-center">

components/InputSelect/styles.ts

@@ -26,7 +26,6 @@ export const styles: StylesConfig = {
   }),
   container: (styles) => ({
     ...styles,
-    width: "15rem",
     border: "1px solid #e0f2fe",
     borderRadius: "0.375rem",
     lineHeight: "1.25rem",

components/Modal/AddCollection.tsx

@@ -46,88 +46,91 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
 
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <p className="font-bold text-sky-300 mb-2 text-center">New Collection</p>
+      <p className="font-bold text-sky-300 mb-3 text-center">New Collection</p>
 
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">
-          Name
-          <RequiredBadge />
-        </p>
-        <input
-          value={newCollection.name}
-          onChange={(e) =>
-            setNewCollection({ ...newCollection, name: e.target.value })
-          }
-          type="text"
-          placeholder="e.g. Example Collection"
-          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
-      </div>
+      <div className="flex flex-col sm:flex-row gap-3">
+        <div className="w-full">
+          <p className="text-sm font-bold text-sky-300 mb-2">
+            Name
+            <RequiredBadge />
+          </p>
+          <input
+            value={newCollection.name}
+            onChange={(e) =>
+              setNewCollection({ ...newCollection, name: e.target.value })
+            }
+            type="text"
+            placeholder="e.g. Example Collection"
+            className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+          />
+        </div>
 
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">Description</p>
-        <input
-          value={newCollection.description}
-          onChange={(e) =>
-            setNewCollection({ ...newCollection, description: e.target.value })
-          }
-          type="text"
-          placeholder="Collection description"
-          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
+        <div className="w-full">
+          <p className="text-sm font-bold text-sky-300 mb-2">Description</p>
+          <input
+            value={newCollection.description}
+            onChange={(e) =>
+              setNewCollection({
+                ...newCollection,
+                description: e.target.value,
+              })
+            }
+            type="text"
+            placeholder="Collection description"
+            className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+          />
+        </div>
       </div>
 
       <hr className="border rounded my-2" />
 
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">Members</p>
-        <input
-          value={memberEmail}
-          onChange={(e) => {
-            setMemberEmail(e.target.value);
-          }}
-          onKeyDown={async (e) => {
-            const checkIfMemberAlreadyExists = newCollection.members.find(
-              (e) => e.email === memberEmail
-            );
+      <p className="text-sm font-bold text-sky-300">Members</p>
+      <input
+        value={memberEmail}
+        onChange={(e) => {
+          setMemberEmail(e.target.value);
+        }}
+        onKeyDown={async (e) => {
+          const checkIfMemberAlreadyExists = newCollection.members.find(
+            (e) => e.email === memberEmail
+          );
 
-            const ownerEmail = session.data?.user.email;
+          const ownerEmail = session.data?.user.email;
 
-            if (
-              e.key === "Enter" &&
-              // no duplicate members
-              !checkIfMemberAlreadyExists &&
-              // member can't be empty
-              memberEmail.trim() !== "" &&
-              // member can't be the owner
-              memberEmail.trim() !== ownerEmail
-            ) {
-              // Lookup, get data/err, list ...
-              const user = await getUserByEmail(memberEmail.trim());
+          if (
+            e.key === "Enter" &&
+            // no duplicate members
+            !checkIfMemberAlreadyExists &&
+            // member can't be empty
+            memberEmail.trim() !== "" &&
+            // member can't be the owner
+            memberEmail.trim() !== ownerEmail
+          ) {
+            // Lookup, get data/err, list ...
+            const user = await getUserByEmail(memberEmail.trim());
 
-              if (user.email) {
-                const newMember = {
-                  name: user.name,
-                  email: user.email,
-                  canCreate: false,
-                  canUpdate: false,
-                  canDelete: false,
-                };
+            if (user.email) {
+              const newMember = {
+                name: user.name,
+                email: user.email,
+                canCreate: false,
+                canUpdate: false,
+                canDelete: false,
+              };
 
-                setNewCollection({
-                  ...newCollection,
-                  members: [...newCollection.members, newMember],
-                });
+              setNewCollection({
+                ...newCollection,
+                members: [...newCollection.members, newMember],
+              });
 
-                setMemberEmail("");
-              }
+              setMemberEmail("");
             }
-          }}
-          type="text"
-          placeholder="Email"
-          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
-      </div>
+          }
+        }}
+        type="text"
+        placeholder="Email"
+        className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+      />
 
       {newCollection.members[0] ? (
         <p className="text-center text-sky-500 text-xs sm:text-sm">

components/Modal/AddLink.tsx

@@ -75,56 +75,62 @@ export default function AddLink({ toggleLinkModal }: Props) {
 
     if (response) toggleLinkModal();
   };
+
   return (
-    <div className="flex flex-col gap-3 sm:w-96 w-80">
+    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       <p className="font-bold text-sky-300 mb-2 text-center">New Link</p>
 
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">
-          Name
-          <RequiredBadge />
-        </p>
-        <input
-          value={newLink.name}
-          onChange={(e) => setNewLink({ ...newLink, name: e.target.value })}
-          type="text"
-          placeholder="e.g. Example Link"
-          className="w-60 rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
-      </div>
+      <div className="grid sm:grid-cols-2 gap-3">
+        <div>
+          <p className="text-sm font-bold text-sky-300 mb-2">
+            Name
+            <RequiredBadge />
+          </p>
+          <input
+            value={newLink.name}
+            onChange={(e) => setNewLink({ ...newLink, name: e.target.value })}
+            type="text"
+            placeholder="e.g. Example Link"
+            className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+          />
+        </div>
 
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">
-          URL
-          <RequiredBadge />
-        </p>
-        <input
-          value={newLink.url}
-          onChange={(e) => setNewLink({ ...newLink, url: e.target.value })}
-          type="text"
-          placeholder="e.g. http://example.com/"
-          className="w-60 rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
-      </div>
+        <div>
+          <p className="text-sm font-bold text-sky-300 mb-2">
+            URL
+            <RequiredBadge />
+          </p>
+          <input
+            value={newLink.url}
+            onChange={(e) => setNewLink({ ...newLink, url: e.target.value })}
+            type="text"
+            placeholder="e.g. http://example.com/"
+            className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+          />
+        </div>
 
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">
-          Collection
-          <RequiredBadge />
-        </p>
-        <CollectionSelection
-          defaultValue={
-            newLink.collection.name && newLink.collection.id
-              ? { value: newLink.collection.id, label: newLink.collection.name }
-              : undefined
-          }
-          onChange={setCollection}
-        />
-      </div>
+        <div>
+          <p className="text-sm font-bold text-sky-300 mb-2">
+            Collection
+            <RequiredBadge />
+          </p>
+          <CollectionSelection
+            defaultValue={
+              newLink.collection.name && newLink.collection.id
+                ? {
+                    value: newLink.collection.id,
+                    label: newLink.collection.name,
+                  }
+                : undefined
+            }
+            onChange={setCollection}
+          />
+        </div>
 
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">Tags</p>
-        <TagSelection onChange={setTags} />
+        <div>
+          <p className="text-sm font-bold text-sky-300 mb-2">Tags</p>
+          <TagSelection onChange={setTags} />
+        </div>
       </div>
 
       <div

components/Modal/EditCollection.tsx

@@ -56,93 +56,93 @@ export default function EditCollection({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       <p className="font-bold text-sky-300 mb-2 text-center">Edit Collection</p>
 
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">
-          Name
-          <RequiredBadge />
-        </p>
-        <input
-          value={activeCollection.name}
-          onChange={(e) =>
-            setActiveCollection({ ...activeCollection, name: e.target.value })
-          }
-          type="text"
-          placeholder="e.g. Example Collection"
-          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
-      </div>
+      <div className="flex flex-col sm:flex-row gap-3">
+        <div className="w-full">
+          <p className="text-sm font-bold text-sky-300 mb-2">
+            Name
+            <RequiredBadge />
+          </p>
+          <input
+            value={activeCollection.name}
+            onChange={(e) =>
+              setActiveCollection({ ...activeCollection, name: e.target.value })
+            }
+            type="text"
+            placeholder="e.g. Example Collection"
+            className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+          />
+        </div>
 
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">Description</p>
-        <input
-          value={activeCollection.description}
-          onChange={(e) =>
-            setActiveCollection({
-              ...activeCollection,
-              description: e.target.value,
-            })
-          }
-          type="text"
-          placeholder="Collection description"
-          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
+        <div className="w-full">
+          <p className="text-sm font-bold text-sky-300 mb-2">Description</p>
+          <input
+            value={activeCollection.description}
+            onChange={(e) =>
+              setActiveCollection({
+                ...activeCollection,
+                description: e.target.value,
+              })
+            }
+            type="text"
+            placeholder="Collection description"
+            className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+          />
+        </div>
       </div>
 
       <hr className="border rounded my-2" />
 
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">Members</p>
-        <input
-          value={memberEmail}
-          onChange={(e) => {
-            setMemberEmail(e.target.value);
-          }}
-          onKeyDown={async (e) => {
-            const checkIfMemberAlreadyExists = activeCollection.members.find(
-              (e) => e.user.email === memberEmail
-            );
+      <p className="text-sm font-bold text-sky-300">Members</p>
+      <input
+        value={memberEmail}
+        onChange={(e) => {
+          setMemberEmail(e.target.value);
+        }}
+        onKeyDown={async (e) => {
+          const checkIfMemberAlreadyExists = activeCollection.members.find(
+            (e) => e.user.email === memberEmail
+          );
 
-            const ownerEmail = session.data?.user.email;
+          const ownerEmail = session.data?.user.email;
 
-            if (
-              e.key === "Enter" &&
-              // no duplicate members
-              !checkIfMemberAlreadyExists &&
-              // member can't be empty
-              memberEmail.trim() !== "" &&
-              // member can't be the owner
-              memberEmail.trim() !== ownerEmail
-            ) {
-              // Lookup, get data/err, list ...
-              const user = await getPublicUserDataByEmail(memberEmail.trim());
+          if (
+            e.key === "Enter" &&
+            // no duplicate members
+            !checkIfMemberAlreadyExists &&
+            // member can't be empty
+            memberEmail.trim() !== "" &&
+            // member can't be the owner
+            memberEmail.trim() !== ownerEmail
+          ) {
+            // Lookup, get data/err, list ...
+            const user = await getPublicUserDataByEmail(memberEmail.trim());
 
-              if (user.email) {
-                const newMember = {
-                  collectionId: activeCollection.id,
-                  userId: user.id,
-                  canCreate: false,
-                  canUpdate: false,
-                  canDelete: false,
-                  user: {
-                    name: user.name,
-                    email: user.email,
-                  },
-                };
+            if (user.email) {
+              const newMember = {
+                collectionId: activeCollection.id,
+                userId: user.id,
+                canCreate: false,
+                canUpdate: false,
+                canDelete: false,
+                user: {
+                  name: user.name,
+                  email: user.email,
+                },
+              };
 
-                setActiveCollection({
-                  ...activeCollection,
-                  members: [...activeCollection.members, newMember],
-                });
+              setActiveCollection({
+                ...activeCollection,
+                members: [...activeCollection.members, newMember],
+              });
 
-                setMemberEmail("");
-              }
+              setMemberEmail("");
             }
-          }}
-          type="text"
-          placeholder="Email"
-          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
-      </div>
+          }
+        }}
+        type="text"
+        placeholder="Email"
+        className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+      />
 
       {activeCollection.members[0] ? (
         <p className="text-center text-sky-500 text-xs sm:text-sm">

components/Modal/EditLink.tsx

@@ -53,44 +53,47 @@ export default function EditLink({ toggleLinkModal, link }: Props) {
       <p className="text-sky-700">
         <b>{shortendURL}</b> | {link.title}
       </p>
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">
-          Name
-          <RequiredBadge />
-        </p>
-        <input
-          value={currentLink.name}
-          onChange={(e) =>
-            setCurrentLink({ ...currentLink, name: e.target.value })
-          }
-          type="text"
-          placeholder="e.g. Example Link"
-          className="w-60 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
-      </div>
 
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">
-          Collection
-          <RequiredBadge />
-        </p>
-        <CollectionSelection
-          onChange={setCollection}
-          defaultValue={{
-            label: link.collection.name,
-            value: link.collection.id,
-          }}
-        />
-      </div>
+      <div className="grid sm:grid-cols-2 gap-3">
+        <div>
+          <p className="text-sm font-bold text-sky-300 mb-2">
+            Name
+            <RequiredBadge />
+          </p>
+          <input
+            value={currentLink.name}
+            onChange={(e) =>
+              setCurrentLink({ ...currentLink, name: e.target.value })
+            }
+            type="text"
+            placeholder="e.g. Example Link"
+            className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+          />
+        </div>
 
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">Tags</p>
-        <TagSelection
-          onChange={setTags}
-          defaultValue={link.tags.map((e) => {
-            return { label: e.name, value: e.id };
-          })}
-        />
+        <div>
+          <p className="text-sm font-bold text-sky-300 mb-2">
+            Collection
+            <RequiredBadge />
+          </p>
+          <CollectionSelection
+            onChange={setCollection}
+            defaultValue={{
+              label: link.collection.name,
+              value: link.collection.id,
+            }}
+          />
+        </div>
+
+        <div className="sm:col-span-2">
+          <p className="text-sm font-bold text-sky-300 mb-2">Tags</p>
+          <TagSelection
+            onChange={setTags}
+            defaultValue={link.tags.map((e) => {
+              return { label: e.name, value: e.id };
+            })}
+          />
+        </div>
       </div>
 
       <div className="flex flex-col justify-center items-center gap-2 mt-2">

components/Modal/UserSettings.tsx

@@ -0,0 +1,55 @@
+// Copyright (C) 2022-present Daniel31x13 <daniel31x13@gmail.com>
+// 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, version 3.
+// 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/>.
+
+import { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { NewLink } from "@/types/global";
+import useLinkStore from "@/store/links";
+import RequiredBadge from "../RequiredBadge";
+
+type Props = {
+  toggleSettingsModal: Function;
+};
+
+export default function UserSettings({ toggleSettingsModal }: Props) {
+  const [newLink, setNewLink] = useState<NewLink>();
+
+  const { addLink } = useLinkStore();
+
+  const submit = async () => {
+    console.log(newLink);
+
+    const response = await addLink(newLink as NewLink);
+
+    if (response) toggleSettingsModal();
+  };
+
+  return (
+    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
+      <p className="font-bold text-sky-300 mb-2 text-center">Settings</p>
+
+      <div className="flex gap-5 items-center justify-between">
+        <p className="text-sm font-bold text-sky-300">
+          Name
+          <RequiredBadge />
+        </p>
+        <input
+          type="text"
+          placeholder="e.g. Example Link"
+          className="w-60 rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+        />
+      </div>
+
+      <div
+        className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
+        // onClick={submit}
+      >
+        <FontAwesomeIcon icon={faPlus} className="h-5" />
+        Apply Settings
+      </div>
+    </div>
+  );
+}

components/Navbar.tsx

@@ -22,6 +22,7 @@ import ClickAwayHandler from "@/components/ClickAwayHandler";
 import Sidebar from "@/components/Sidebar";
 import { useRouter } from "next/router";
 import Search from "@/components/Search";
+import UserSettings from "./Modal/UserSettings";
 
 export default function () {
   const { data: session } = useSession();
@@ -31,6 +32,7 @@ export default function () {
   const user = session?.user;
 
   const [linkModal, setLinkModal] = useState(false);
+  const [settingsModal, setSettingsModal] = useState(false);
   const [sidebar, setSidebar] = useState(false);
 
   const router = useRouter();
@@ -49,6 +51,10 @@ export default function () {
     setLinkModal(!linkModal);
   };
 
+  const toggleSettingsModal = () => {
+    setSettingsModal(!settingsModal);
+  };
+
   return (
     <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b">
       <div
@@ -67,12 +73,6 @@ export default function () {
           <FontAwesomeIcon icon={faPlus} className="w-6 h-6" />
         </div>
 
-        {linkModal ? (
-          <Modal toggleModal={toggleLinkModal}>
-            <AddLink toggleLinkModal={toggleLinkModal} />
-          </Modal>
-        ) : null}
-
         <div className="relative">
           <div
             className="flex gap-2 items-center p-1 w-fit bg-white text-gray-600 cursor-pointer border border-sky-100 hover:border-sky-500 rounded-md duration-100"
@@ -96,6 +96,10 @@ export default function () {
                 {
                   name: "Settings",
                   icon: <FontAwesomeIcon icon={faSliders} />,
+                  onClick: () => {
+                    toggleSettingsModal();
+                    setProfileDropdown(!profileDropdown);
+                  },
                 },
                 {
                   name: "Logout",
@@ -114,6 +118,18 @@ export default function () {
             />
           ) : null}
 
+          {linkModal ? (
+            <Modal toggleModal={toggleLinkModal}>
+              <AddLink toggleLinkModal={toggleLinkModal} />
+            </Modal>
+          ) : null}
+
+          {settingsModal ? (
+            <Modal toggleModal={toggleSettingsModal}>
+              <UserSettings toggleSettingsModal={toggleSettingsModal} />
+            </Modal>
+          ) : null}
+
           {sidebar ? (
             <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
               <ClickAwayHandler onClickOutside={toggleSidebar}>

lib/api/controllers/links/updateLink.ts

@@ -11,12 +11,6 @@ import getPermission from "@/lib/api/getPermission";
 export default async function (link: ExtendedLink, userId: number) {
   if (!link) return { response: "Please choose a valid link.", status: 401 };
 
-  const collectionIsAccessible = await getPermission(userId, link.collectionId);
-
-  const memberHasAccess = collectionIsAccessible?.members.some(
-    (e: UsersAndCollections) => e.userId === userId && e.canUpdate
-  );
-
   if (link.collection.ownerId) {
     const collectionIsAccessible = await getPermission(
       userId,

lib/api/controllers/tags/getTags.ts

@@ -17,27 +17,22 @@ export default async function (userId: number) {
 
   const tags = await prisma.tag.findMany({
     where: {
-      ownerId: userId,
-      owner: {
-        OR: [
-          {
-            id: userId,
-          },
-          {
-            collections: {
-              some: {
+      OR: [
+        { ownerId: userId }, // Tags owned by the user
+        {
+          links: {
+            some: {
+              collection: {
                 members: {
                   some: {
-                    user: {
-                      id: userId,
-                    },
+                    userId, // Tags from collections where the user is a member
                   },
                 },
               },
             },
           },
-        ],
-      },
+        },
+      ],
     },
     orderBy: {
       links: {

pages/register.tsx

@@ -58,7 +58,7 @@ export default function () {
       <p className="text-3xl font-bold text-center mb-10">Linkwarden</p>
       <input
         type="text"
-        placeholder="Name"
+        placeholder="Display Name"
         value={form.name}
         onChange={(e) => setForm({ ...form, name: e.target.value })}
         className="border border-gray-700 rounded-md block m-2 mx-auto p-2"

pages/tags/[id].tsx

@@ -21,9 +21,6 @@ export default function () {
   const { links } = useLinkStore();
   const { tags } = useTagStore();
 
-  const [linkModal, setLinkModal] = useState(false);
-  const [editCollectionModal, setEditCollectionModal] = useState(false);
-  const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
   const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState("Name (A-Z)");
 

store/tags.ts

@@ -5,6 +5,7 @@
 
 import { create } from "zustand";
 import { Tag } from "@prisma/client";
+import tags from "@/pages/api/routes/tags";
 
 type TagStore = {
   tags: Tag[];