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,10 +46,11 @@ 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">
+      <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>
@@ -60,26 +61,29 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
             }
             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"
+            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>
+        <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 })
+              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"
+            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}
@@ -125,9 +129,8 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
         }}
         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"
+        className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
       />
-      </div>
 
       {newCollection.members[0] ? (
         <p className="text-center text-sky-500 text-xs sm:text-sm">

components/Modal/AddLink.tsx

@@ -75,12 +75,14 @@ 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">
+      <div className="grid sm:grid-cols-2 gap-3">
+        <div>
+          <p className="text-sm font-bold text-sky-300 mb-2">
             Name
             <RequiredBadge />
           </p>
@@ -89,12 +91,12 @@ export default function AddLink({ toggleLinkModal }: Props) {
             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"
+            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">
+        <div>
+          <p className="text-sm font-bold text-sky-300 mb-2">
             URL
             <RequiredBadge />
           </p>
@@ -103,29 +105,33 @@ export default function AddLink({ toggleLinkModal }: Props) {
             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"
+            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">
+        <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 }
+                ? {
+                    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>
+        <div>
+          <p className="text-sm font-bold text-sky-300 mb-2">Tags</p>
           <TagSelection onChange={setTags} />
         </div>
+      </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"

components/Modal/EditCollection.tsx

@@ -56,8 +56,9 @@ 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">
+      <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>
@@ -68,12 +69,12 @@ export default function EditCollection({
             }
             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"
+            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>
+        <div className="w-full">
+          <p className="text-sm font-bold text-sky-300 mb-2">Description</p>
           <input
             value={activeCollection.description}
             onChange={(e) =>
@@ -84,13 +85,13 @@ export default function EditCollection({
             }
             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"
+            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}
@@ -140,9 +141,8 @@ export default function EditCollection({
         }}
         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"
+        className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
       />
-      </div>
 
       {activeCollection.members[0] ? (
         <p className="text-center text-sky-500 text-xs sm:text-sm">

components/Modal/EditLink.tsx

@@ -53,8 +53,10 @@ 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">
+
+      <div className="grid sm:grid-cols-2 gap-3">
+        <div>
+          <p className="text-sm font-bold text-sky-300 mb-2">
             Name
             <RequiredBadge />
           </p>
@@ -65,12 +67,12 @@ export default function EditLink({ toggleLinkModal, link }: Props) {
             }
             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"
+            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">
+        <div>
+          <p className="text-sm font-bold text-sky-300 mb-2">
             Collection
             <RequiredBadge />
           </p>
@@ -83,8 +85,8 @@ export default function EditLink({ toggleLinkModal, link }: Props) {
           />
         </div>
 
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">Tags</p>
+        <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) => {
@@ -92,6 +94,7 @@ export default function EditLink({ toggleLinkModal, link }: Props) {
             })}
           />
         </div>
+      </div>
 
       <div className="flex flex-col justify-center items-center gap-2 mt-2">
         <div

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,19 +17,15 @@ export default async function (userId: number) {
 
   const tags = await prisma.tag.findMany({
     where: {
-      ownerId: userId,
-      owner: {
       OR: [
+        { ownerId: userId }, // Tags owned by the user
         {
-            id: userId,
-          },
-          {
-            collections: {
+          links: {
             some: {
+              collection: {
                 members: {
                   some: {
-                    user: {
-                      id: userId,
+                    userId, // Tags from collections where the user is a member
                   },
                 },
               },
@@ -38,7 +34,6 @@ export default async function (userId: number) {
         },
       ],
     },
-    },
     orderBy: {
       links: {
         _count: "desc",

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[];