critical bug fixed + improvements

components/InputSelect/CollectionSelection.tsx

@@ -1,7 +1,7 @@
 import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import CreatableSelect from "react-select/creatable";
+import Select from "react-select";
 import { styles } from "./styles";
 import { Options } from "./types";
 
@@ -43,7 +43,7 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
   }, [collections]);
 
   return (
-    <CreatableSelect
+    <Select
       isClearable
       onChange={onChange}
       options={options}

components/LinkCard.tsx

@@ -62,7 +62,9 @@ export default function LinkCard({ link, count, className }: Props) {
     <div
       className={`bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
     >
-      {permissions && (
+      {(permissions === true ||
+        permissions?.canUpdate ||
+        permissions?.canDelete) && (
         <div
           onClick={() => setExpandDropdown(!expandDropdown)}
           id={"expand-dropdown" + link.id}
@@ -83,7 +85,8 @@ export default function LinkCard({ link, count, className }: Props) {
             modal: "LINK",
             state: true,
             method: "UPDATE",
-            isOwner: permissions === true,
+            isOwnerOrMod:
+              permissions === true || (permissions?.canUpdate as boolean),
             active: link,
           });
         }}
@@ -106,7 +109,7 @@ export default function LinkCard({ link, count, className }: Props) {
           <div className="flex flex-col justify-between w-full">
             <div className="flex items-baseline gap-1">
               <p className="text-sm text-sky-400 font-bold">{count + 1}.</p>
-              <p className="text-lg text-sky-500 font-bold truncate max-w-[10rem]">
+              <p className="text-lg text-sky-500 font-bold truncate max-w-[10rem] capitalize">
                 {link.name}
               </p>
             </div>
@@ -117,7 +120,7 @@ export default function LinkCard({ link, count, className }: Props) {
                   className="w-4 h-4 mt-1 drop-shadow"
                   style={{ color: collection?.color }}
                 />
-                <p className="text-sky-900 truncate max-w-[10rem]">
+                <p className="text-sky-900 truncate max-w-[10rem] capitalize">
                   {collection?.name}
                 </p>
               </div>
@@ -132,7 +135,7 @@ export default function LinkCard({ link, count, className }: Props) {
       {expandDropdown ? (
         <Dropdown
           items={[
-            permissions === true || permissions?.canUpdate
+            permissions === true
               ? {
                   name:
                     link?.pinnedBy && link.pinnedBy[0]
@@ -158,7 +161,8 @@ export default function LinkCard({ link, count, className }: Props) {
                       modal: "LINK",
                       state: true,
                       method: "UPDATE",
-                      isOwner: permissions === true,
+                      isOwnerOrMod:
+                        permissions === true || permissions?.canUpdate,
                       active: link,
                       defaultIndex: 1,
                     });

components/Modal/Collection/DeleteCollection.tsx

@@ -97,7 +97,7 @@ export default function DeleteCollection({
       )}
 
       <div
-        className={`mx-auto mt-2  text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold duration-100 ${
+        className={`mx-auto mt-2 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold duration-100 ${
           permissions === true
             ? inputField === collection.name
               ? "bg-red-500 hover:bg-red-400 cursor-pointer"

components/Modal/Link/index.tsx

@@ -7,7 +7,7 @@ type Props =
   | {
       toggleLinkModal: Function;
       method: "CREATE";
-      isOwner?: boolean;
+      isOwnerOrMod?: boolean;
       activeLink?: LinkIncludingShortenedCollectionAndTags;
       defaultIndex?: number;
       className?: string;
@@ -15,17 +15,17 @@ type Props =
   | {
       toggleLinkModal: Function;
       method: "UPDATE";
-      isOwner: boolean;
+      isOwnerOrMod: boolean;
       activeLink: LinkIncludingShortenedCollectionAndTags;
       defaultIndex?: number;
       className?: string;
     };
 
-export default function CollectionModal({
+export default function LinkModal({
   className,
   defaultIndex,
   toggleLinkModal,
-  isOwner,
+  isOwnerOrMod,
   activeLink,
   method,
 }: Props) {
@@ -37,10 +37,10 @@ export default function CollectionModal({
         )}
         <Tab.List
           className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-600 ${
-            isOwner ? "" : "pb-8"
+            isOwnerOrMod ? "" : "pb-8"
           }`}
         >
-          {method === "UPDATE" && isOwner && (
+          {method === "UPDATE" && isOwnerOrMod && (
             <>
               <Tab
                 className={({ selected }) =>

components/ModalManagement.tsx

@@ -29,7 +29,7 @@ export default function ModalManagement() {
         <LinkModal
           toggleLinkModal={toggleModal}
           method={modal.method}
-          isOwner={modal.isOwner as boolean}
+          isOwnerOrMod={modal.isOwnerOrMod as boolean}
           defaultIndex={modal.defaultIndex}
           activeLink={modal.active as LinkIncludingShortenedCollectionAndTags}
         />