bug fixes + small visual improvements

components/InputSelect/CollectionSelection.tsx

@@ -54,7 +54,7 @@ export default function ({ onChange, defaultValue }: Props) {
       options={options}
       styles={styles}
       defaultValue={defaultValue}
-      menuPosition="fixed"
+      // menuPosition="fixed"
     />
   );
 }

components/InputSelect/TagSelection.tsx

@@ -37,7 +37,7 @@ export default function ({ onChange, defaultValue }: Props) {
       options={options}
       styles={styles}
       defaultValue={defaultValue}
-      menuPosition="fixed"
+      // menuPosition="fixed"
       isMulti
     />
   );

components/InputSelect/styles.ts

@@ -29,8 +29,10 @@ export const styles: StylesConfig = {
     width: "15rem",
     border: "1px solid #e0f2fe",
     borderRadius: "0.375rem",
-    fontSize: "0.875rem",
     lineHeight: "1.25rem",
+    // "@media screen and (min-width: 1024px)": {
+    //   fontSize: "0.875rem",
+    // },
   }),
   input: (styles) => ({
     ...styles,

components/LinkList.tsx

@@ -58,7 +58,7 @@ export default function ({
         width={32}
         height={32}
         alt=""
-        className="select-none mt-3 z-10 rounded-md shadow"
+        className="select-none mt-3 z-10 rounded-md"
         draggable="false"
         onError={(e) => {
           const target = e.target as HTMLElement;
@@ -70,7 +70,7 @@ export default function ({
         width={80}
         height={80}
         alt=""
-        className="blur-sm absolute left-2 opacity-50 select-none hidden sm:block"
+        className="blur-sm absolute left-2 opacity-40 select-none hidden sm:block"
         draggable="false"
         onError={(e) => {
           const target = e.target as HTMLElement;
@@ -194,7 +194,7 @@ export default function ({
                 const target = e.target as HTMLInputElement;
                 if (target.id !== "edit-dropdown") setExpandDropdown(false);
               }}
-              className="absolute top-9 right-0 w-36"
+              className="absolute top-8 right-0 w-36"
             />
           ) : null}
         </div>

components/Modal/AddCollection.tsx

@@ -9,6 +9,7 @@ import { faClose, faPlus } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { NewCollection } from "@/types/global";
 import { useSession } from "next-auth/react";
+import RequiredBadge from "../RequiredBadge";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -48,7 +49,10 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
       <p className="font-bold text-sky-300 mb-2 text-center">New Collection</p>
 
       <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">Name</p>
+        <p className="text-sm font-bold text-sky-300">
+          Name
+          <RequiredBadge />
+        </p>
         <input
           value={newCollection.name}
           onChange={(e) =>
@@ -56,7 +60,7 @@ 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 text-sm outline-none focus:border-sky-500 duration-100"
+          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>
 
@@ -68,8 +72,8 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
             setNewCollection({ ...newCollection, description: e.target.value })
           }
           type="text"
-          placeholder="Collection description (Optional)"
-          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          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>
 
@@ -120,8 +124,8 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
             }
           }}
           type="text"
-          placeholder="Email (Optional)"
-          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          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>
 

components/Modal/AddLink.tsx

@@ -12,6 +12,7 @@ import { ExtendedLink, NewLink } from "@/types/global";
 import useLinkStore from "@/store/links";
 import { useRouter } from "next/router";
 import useCollectionStore from "@/store/collections";
+import RequiredBadge from "../RequiredBadge";
 
 type Props = {
   toggleLinkModal: Function;
@@ -79,34 +80,38 @@ export default function AddLink({ toggleLinkModal }: Props) {
       <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</p>
+        <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-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-60 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</p>
+        <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-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-60 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} />
-      </div>
-
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">Collection</p>
+        <p className="text-sm font-bold text-sky-300">
+          Collection
+          <RequiredBadge />
+        </p>
         <CollectionSelection
           defaultValue={
             newLink.collection.name && newLink.collection.id
@@ -117,6 +122,11 @@ export default function AddLink({ toggleLinkModal }: Props) {
         />
       </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>
+
       <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}

components/Modal/DeleteCollection.tsx

@@ -48,7 +48,7 @@ export default function AddCollection({
         onChange={(e) => setInputField(e.target.value)}
         type="text"
         placeholder={`Type "${collection.name}" Here.`}
-        className=" w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+        className=" w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
       />
 
       <div

components/Modal/EditCollection.tsx

@@ -16,6 +16,7 @@ import { useSession } from "next-auth/react";
 import getPublicUserDataByEmail from "@/lib/client/getPublicUserDataByEmail";
 import Modal from "@/components/Modal";
 import DeleteCollection from "@/components/Modal/DeleteCollection";
+import RequiredBadge from "../RequiredBadge";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -56,7 +57,10 @@ export default function EditCollection({
       <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</p>
+        <p className="text-sm font-bold text-sky-300">
+          Name
+          <RequiredBadge />
+        </p>
         <input
           value={activeCollection.name}
           onChange={(e) =>
@@ -64,7 +68,7 @@ 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 text-sm outline-none focus:border-sky-500 duration-100"
+          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>
 
@@ -79,8 +83,8 @@ export default function EditCollection({
             })
           }
           type="text"
-          placeholder="Collection description (Optional)"
-          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          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>
 
@@ -135,8 +139,8 @@ export default function EditCollection({
             }
           }}
           type="text"
-          placeholder="Email (Optional)"
-          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          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>
 

components/Modal/EditLink.tsx

@@ -11,6 +11,7 @@ import { ExtendedLink } from "@/types/global";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import useLinkStore from "@/store/links";
 import { faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import RequiredBadge from "../RequiredBadge";
 
 type Props = {
   toggleLinkModal: Function;
@@ -53,7 +54,10 @@ export default function EditLink({ toggleLinkModal, link }: Props) {
         <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</p>
+        <p className="text-sm font-bold text-sky-300">
+          Name
+          <RequiredBadge />
+        </p>
         <input
           value={currentLink.name}
           onChange={(e) =>
@@ -61,7 +65,21 @@ 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 text-sm outline-none focus:border-sky-500 duration-100"
+          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>
 
@@ -75,17 +93,6 @@ 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">Collection</p>
-        <CollectionSelection
-          onChange={setCollection}
-          defaultValue={{
-            label: link.collection.name,
-            value: link.collection.id,
-          }}
-        />
-      </div>
-
       <div className="flex flex-col justify-center items-center gap-2 mt-2">
         <div
           className="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/index.tsx

@@ -24,7 +24,7 @@ export default function ({ toggleModal, children }: Props) {
           >
             <FontAwesomeIcon
               icon={faChevronLeft}
-              className="w-4 h-4 text-gray-500"
+              className="w-5 h-5 text-gray-500"
             />
           </div>
           {children}

components/Navbar.tsx

@@ -68,7 +68,7 @@ export default function () {
           id="search-box"
           type="text"
           placeholder="Search for Links"
-          className="border border-sky-100 rounded-md pr-6 w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none p-1 text-sm"
+          className="border border-sky-100 rounded-md pr-6 w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none p-1"
         />
       </div>
       <div className="flex items-center gap-2">
@@ -77,7 +77,7 @@ export default function () {
           title="New Link"
           className="inline-flex gap-1 items-center select-none cursor-pointer p-1 text-sky-500 rounded-md hover:outline-sky-500 outline duration-100 bg-white outline-sky-100 outline-1"
         >
-          <FontAwesomeIcon icon={faPlus} className="w-5 h-5" />
+          <FontAwesomeIcon icon={faPlus} className="w-6 h-6" />
         </div>
 
         {linkModal ? (
@@ -94,7 +94,7 @@ export default function () {
           >
             <FontAwesomeIcon
               icon={faCircleUser}
-              className="h-5 w-5 pointer-events-none"
+              className="h-6 w-6 pointer-events-none"
             />
             <div className="flex items-center gap-1 pointer-events-none">
               <p className="font-bold leading-3 hidden sm:block">
@@ -123,7 +123,7 @@ export default function () {
                 const target = e.target as HTMLInputElement;
                 if (target.id !== "profile-dropdown") setProfileDropdown(false);
               }}
-              className="absolute top-8 right-0 z-20 w-36"
+              className="absolute top-9 right-0 z-20 w-36"
             />
           ) : null}
 

components/RequiredBadge.tsx

@@ -0,0 +1,13 @@
+// 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/>.
+
+export default function RequiredBadge() {
+  return (
+    <span title="Required Field" className="text-sky-500 cursor-help">
+      {" "}
+      *
+    </span>
+  );
+}

layouts/AuthRedirect.tsx

@@ -41,5 +41,5 @@ export default function ({ children }: Props) {
   }, [status]);
 
   if (status !== "loading" && !redirect) return <>{children}</>;
-  // else return <Loader />;
+  else return <></>;
 }

lib/api/controllers/collections/postCollection.ts

@@ -50,6 +50,18 @@ export default async function (collection: NewCollection, userId: number) {
         })),
       },
     },
+    include: {
+      members: {
+        include: {
+          user: {
+            select: {
+              email: true,
+              name: true,
+            },
+          },
+        },
+      },
+    },
   });
 
   const collectionPath = `data/archives/${newCollection.id}`;

lib/api/controllers/collections/updateCollection.ts

@@ -41,6 +41,18 @@ export default async function (collection: ExtendedCollection, userId: number) {
           })),
         },
       },
+      include: {
+        members: {
+          include: {
+            user: {
+              select: {
+                email: true,
+                name: true,
+              },
+            },
+          },
+        },
+      },
     });
   });
 

pages/collections/[id].tsx

@@ -78,7 +78,7 @@ export default function () {
               <FontAwesomeIcon
                 icon={faEllipsis}
                 id="edit-dropdown"
-                className="w-4 h-4 text-gray-500"
+                className="w-5 h-5 text-gray-500"
               />
             </div>
             {expandDropdown ? (
@@ -113,7 +113,7 @@ export default function () {
                   const target = e.target as HTMLInputElement;
                   if (target.id !== "edit-dropdown") setExpandDropdown(false);
                 }}
-                className="absolute top-7 left-0 z-10 w-44"
+                className="absolute top-8 left-0 z-10 w-44"
               />
             ) : null}
 

pages/collections/index.tsx

@@ -46,7 +46,7 @@ export default function () {
               <FontAwesomeIcon
                 icon={faEllipsis}
                 id="edit-dropdown"
-                className="w-4 h-4 text-gray-500"
+                className="w-5 h-5 text-gray-500"
               />
             </div>
             {expandDropdown ? (
@@ -65,7 +65,7 @@ export default function () {
                   const target = e.target as HTMLInputElement;
                   if (target.id !== "edit-dropdown") setExpandDropdown(false);
                 }}
-                className="absolute top-7 left-0 w-36"
+                className="absolute top-8 left-0 w-36"
               />
             ) : null}
           </div>

store/collections.ts

@@ -61,7 +61,7 @@ const useCollectionStore = create<CollectionStore>()((set) => ({
     if (response.ok)
       set((state) => ({
         collections: state.collections.map((e) =>
-          e.id === collection.id ? collection : e
+          e.id === data.response.id ? data.response : e
         ),
       }));