many bug fixes + add links and collections together + more changes

components/CollectionCard.tsx

@@ -5,7 +5,6 @@ import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { useEffect, useState } from "react";
 import ProfilePhoto from "./ProfilePhoto";
 import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
-import useModalStore from "@/store/modals";
 import usePermissions from "@/hooks/usePermissions";
 import useLocalSettingsStore from "@/store/localSettings";
 import getPublicUserData from "@/lib/client/getPublicUserData";
@@ -20,7 +19,6 @@ type Props = {
 };
 
 export default function CollectionCard({ collection, className }: Props) {
-  const { setModal } = useModalStore();
   const { settings } = useLocalSettingsStore();
   const { account } = useAccountStore();
 

components/DashboardItem.tsx

@@ -10,7 +10,7 @@ type Props = {
 export default function dashboardItem({ name, value, icon }: Props) {
   return (
     <div className="flex gap-4 items-end">
-      <div className="p-4 bg-secondary/30 rounded-xl select-none">
+      <div className="p-4 bg-primary/20 rounded-xl select-none">
         <FontAwesomeIcon icon={icon} className="w-8 h-8 text-primary" />
       </div>
       <div className="flex flex-col justify-center">

components/InputSelect/CollectionSelection.tsx

@@ -1,9 +1,9 @@
 import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import Select from "react-select";
 import { styles } from "./styles";
 import { Options } from "./types";
+import CreatableSelect from "react-select/creatable";
 
 type Props = {
   onChange: any;
@@ -13,9 +13,14 @@ type Props = {
         value?: number;
       }
     | undefined;
+  id?: string;
 };
 
-export default function CollectionSelection({ onChange, defaultValue }: Props) {
+export default function CollectionSelection({
+  onChange,
+  defaultValue,
+  id,
+}: Props) {
   const { collections } = useCollectionStore();
   const router = useRouter();
 
@@ -43,7 +48,8 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
   }, [collections]);
 
   return (
-    <Select
+    <CreatableSelect
+      key={id || "key"}
       isClearable={false}
       className="react-select-container"
       classNamePrefix="react-select"

components/LinkCard.tsx

@@ -10,11 +10,9 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect, useState } from "react";
 import Image from "next/image";
-import Dropdown from "./Dropdown";
 import useLinkStore from "@/store/links";
 import useCollectionStore from "@/store/collections";
 import useAccountStore from "@/store/account";
-import useModalStore from "@/store/modals";
 import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
 import usePermissions from "@/hooks/usePermissions";
 import { toast } from "react-hot-toast";
@@ -30,22 +28,11 @@ type Props = {
   className?: string;
 };
 
-type DropdownTrigger =
-  | {
-      x: number;
-      y: number;
-    }
-  | false;
-
 export default function LinkCard({ link, count, className }: Props) {
-  const { setModal } = useModalStore();
-
   const router = useRouter();
 
   const permissions = usePermissions(link.collection.id as number);
 
-  const [expandDropdown, setExpandDropdown] = useState<DropdownTrigger>(false);
-
   const { collections } = useCollectionStore();
 
   const { links } = useLinkStore();
@@ -82,8 +69,6 @@ export default function LinkCard({ link, count, className }: Props) {
 
     const load = toast.loading("Applying...");
 
-    setExpandDropdown(false);
-
     const response = await updateLink({
       ...link,
       pinnedBy: isAlreadyPinned ? undefined : [{ id: account.id }],
@@ -98,8 +83,6 @@ export default function LinkCard({ link, count, className }: Props) {
   const updateArchive = async () => {
     const load = toast.loading("Sending request...");
 
-    setExpandDropdown(false);
-
     const response = await fetch(`/api/v1/links/${link.id}/archive`, {
       method: "PUT",
     });
@@ -122,7 +105,6 @@ export default function LinkCard({ link, count, className }: Props) {
     toast.dismiss(load);
 
     response.ok && toast.success(`Link Deleted.`);
-    setExpandDropdown(false);
   };
 
   const url = isValidUrl(link.url) ? new URL(link.url) : undefined;

components/Modal/Link/PreservedFormats.tsx

@@ -93,7 +93,7 @@ export default function PreservedFormats() {
       {link?.screenshotPath && link?.screenshotPath !== "pending" ? (
         <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
           <div className="flex gap-2 items-center">
-            <div className="text-white bg-secondary p-2 rounded-l-md">
+            <div className="text-white bg-primary p-2 rounded-l-md">
               <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
             </div>
 
@@ -128,7 +128,7 @@ export default function PreservedFormats() {
       {link?.pdfPath && link.pdfPath !== "pending" ? (
         <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
           <div className="flex gap-2 items-center">
-            <div className="text-white bg-secondary p-2 rounded-l-md">
+            <div className="text-white bg-primary p-2 rounded-l-md">
               <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
             </div>
 

components/Modals/DeleteCollectionModal.tsx

@@ -28,7 +28,15 @@ export default function DeleteCollectionModal({
 }: Props) {
   const modal = document.getElementById(modalId);
 
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
+
   useEffect(() => {
+    modal?.scrollTo(0, 0);
+
+    setCollection(activeCollection);
+    setInputField("");
+
     modal?.addEventListener("close", () => {
       onClose();
     });
@@ -40,14 +48,6 @@ export default function DeleteCollectionModal({
     };
   }, [isOpen]);
 
-  const [collection, setCollection] =
-    useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
-
-  useEffect(() => {
-    setCollection(activeCollection);
-    setInputField("");
-  }, [isOpen]);
-
   const [submitLoader, setSubmitLoader] = useState(false);
   const { removeCollection } = useCollectionStore();
   const router = useRouter();
@@ -85,7 +85,7 @@ export default function DeleteCollectionModal({
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster

components/Modals/EditCollectionModal.tsx

@@ -23,6 +23,9 @@ export default function EditCollectionModal({
   const modal = document.getElementById(modalId);
 
   useEffect(() => {
+    modal?.scrollTo(0, 0);
+    setCollection(activeCollection);
+
     modal?.addEventListener("close", () => {
       onClose();
     });
@@ -37,10 +40,6 @@ export default function EditCollectionModal({
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
 
-  useEffect(() => {
-    setCollection(activeCollection);
-  }, [isOpen]);
-
   const [submitLoader, setSubmitLoader] = useState(false);
   const { updateCollection } = useCollectionStore();
 
@@ -71,7 +70,7 @@ export default function EditCollectionModal({
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster

components/Modals/EditCollectionSharingModal.tsx

@@ -31,6 +31,16 @@ export default function EditCollectionSharingModal({
   const modal = document.getElementById(modalId);
 
   useEffect(() => {
+    const fetchOwner = async () => {
+      const owner = await getPublicUserData(collection.ownerId as number);
+      setCollectionOwner(owner);
+    };
+
+    fetchOwner();
+
+    modal?.scrollTo(0, 0);
+    setCollection(activeCollection);
+
     modal?.addEventListener("close", () => {
       onClose();
     });
@@ -45,10 +55,6 @@ export default function EditCollectionSharingModal({
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
 
-  useEffect(() => {
-    setCollection(activeCollection);
-  }, [isOpen]);
-
   const [submitLoader, setSubmitLoader] = useState(false);
   const { updateCollection } = useCollectionStore();
 
@@ -92,15 +98,6 @@ export default function EditCollectionSharingModal({
     image: "",
   });
 
-  useEffect(() => {
-    const fetchOwner = async () => {
-      const owner = await getPublicUserData(collection.ownerId as number);
-      setCollectionOwner(owner);
-    };
-
-    fetchOwner();
-  }, []);
-
   const setMemberState = (newMember: Member) => {
     if (!collection) return null;
 
@@ -115,7 +112,7 @@ export default function EditCollectionSharingModal({
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster

components/Modals/EditLinkModal.tsx

@@ -58,6 +58,8 @@ export default function EditLinkModal({
   };
 
   useEffect(() => {
+    modal?.scrollTo(0, 0);
+
     setLink(activeLink);
 
     modal?.addEventListener("close", () => {
@@ -97,7 +99,7 @@ export default function EditLinkModal({
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster

components/Modals/NewCollectionModal.tsx

@@ -20,18 +20,6 @@ export default function NewCollectionModal({
 }: Props) {
   const modal = document.getElementById(modalId);
 
-  useEffect(() => {
-    modal?.addEventListener("close", () => {
-      onClose();
-    });
-
-    return () => {
-      modal?.addEventListener("close", () => {
-        onClose();
-      });
-    };
-  }, [isOpen]);
-
   const initial = {
     name: "",
     description: "",
@@ -41,7 +29,19 @@ export default function NewCollectionModal({
   const [collection, setCollection] = useState<Partial<Collection>>(initial);
 
   useEffect(() => {
+    modal?.scrollTo(0, 0);
+
+    modal?.addEventListener("close", () => {
+      onClose();
+    });
+
     setCollection(initial);
+
+    return () => {
+      modal?.addEventListener("close", () => {
+        onClose();
+      });
+    };
   }, [isOpen]);
 
   const [submitLoader, setSubmitLoader] = useState(false);
@@ -74,7 +74,7 @@ export default function NewCollectionModal({
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster

components/Modals/NewLinkModal.tsx

@@ -43,6 +43,8 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
   const { addLink } = useLinkStore();
   const [submitLoader, setSubmitLoader] = useState(false);
 
+  const [resetCollectionSelection, setResetCollectionSelection] = useState("");
+
   const [optionsExpanded, setOptionsExpanded] = useState(false);
 
   const router = useRouter();
@@ -66,6 +68,10 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
   };
 
   useEffect(() => {
+    setResetCollectionSelection(Date.now().toString());
+    console.log(link);
+
+    modal?.scrollTo(0, 0);
     setOptionsExpanded(false);
     if (router.query.id) {
       const currentCollection = collections.find(
@@ -89,7 +95,6 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
       setLink({
         ...initial,
         collection: {
-          // id: ,
           name: "Unorganized",
           ownerId: data?.user.id as number,
         },
@@ -120,7 +125,7 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
 
       if (response.ok) {
         toast.success(`Created!`);
-        (document.getElementById(modalId) as any).close();
+        (document?.getElementById(modalId) as any)?.close();
       } else toast.error(response.data as string);
 
       setSubmitLoader(false);
@@ -132,7 +137,7 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster
@@ -166,21 +171,11 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
             {link.collection.name ? (
               <CollectionSelection
                 onChange={setCollection}
-                // defaultValue={{
-                //   label: link.collection.name,
-                //   value: link.collection.id,
-                // }}
-                defaultValue={
-                  link.collection.id
-                    ? {
-                        value: link.collection.id,
-                        label: link.collection.name,
-                      }
-                    : {
-                        value: null as unknown as number,
-                        label: "Unorganized",
-                      }
-                }
+                defaultValue={{
+                  label: link.collection.name,
+                  value: link.collection.id,
+                }}
+                id={resetCollectionSelection}
               />
             ) : null}
           </div>

components/Navbar.tsx

@@ -165,12 +165,12 @@ export default function Navbar() {
       <NewLinkModal
         isOpen={newLinkModal}
         onClose={() => setNewLinkModal(false)}
-        modalId="new-link-modal"
+        modalId="new-link-modal-nav"
       />
       <NewCollectionModal
         isOpen={newCollectionModal}
         onClose={() => setNewCollectionModal(false)}
-        modalId="new-collection-modal"
+        modalId="new-collection-modal-nav"
       />
     </div>
   );

components/NoLinksFound.tsx

@@ -1,14 +1,14 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React from "react";
-import useModalStore from "@/store/modals";
+import React, { useState } from "react";
+import NewLinkModal from "./Modals/NewLinkModal";
 
 type Props = {
   text?: string;
 };
 
 export default function NoLinksFound({ text }: Props) {
-  const { setModal } = useModalStore();
+  const [newLinkModal, setNewLinkModal] = useState(false);
 
   return (
     <div className="border border-solid border-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-base-200">
@@ -18,23 +18,24 @@ export default function NoLinksFound({ text }: Props) {
       <div className="text-center w-full mt-4">
         <div
           onClick={() => {
-            setModal({
-              modal: "LINK",
-              state: true,
-              method: "CREATE",
-            });
+            setNewLinkModal(true);
           }}
-          className="inline-flex gap-1 relative w-[11.4rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-full dark:hover:bg-sky-600 text-white bg-sky-700 hover:bg-sky-600 duration-100 group"
+          className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent text-white group"
         >
           <FontAwesomeIcon
             icon={faPlus}
-            className="w-5 h-5 group-hover:ml-[4.325rem] absolute duration-100"
+            className="w-5 h-5 left-4 group-hover:ml-[4rem] absolute duration-100"
           />
           <span className="group-hover:opacity-0 text-right w-full duration-100">
             Create New Link
           </span>
         </div>
       </div>
+      <NewLinkModal
+        isOpen={newLinkModal}
+        onClose={() => setNewLinkModal(false)}
+        modalId="new-link-modal"
+      />
     </div>
   );
 }

components/PublicPage/PublicLinkCard.tsx

@@ -57,7 +57,7 @@ export default function LinkCard({ link, count }: Props) {
                 <Link
                   href={"/public/collections/20?q=" + e.name}
                   key={i}
-                  className="px-2 bg-secondary text-white text-xs rounded-md cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
+                  className="btn btn-xs btn-outline truncate max-w-[19rem]"
                 >
                   {e.name}
                 </Link>

components/SearchBar.tsx

@@ -1,6 +1,6 @@
 import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { toast } from "react-hot-toast";
 
@@ -11,11 +11,13 @@ type Props = {
 export default function SearchBar({ placeholder }: Props) {
   const router = useRouter();
 
-  const routeQuery = router.query.q;
+  const [searchQuery, setSearchQuery] = useState("");
 
-  const [searchQuery, setSearchQuery] = useState(
-    routeQuery ? decodeURIComponent(routeQuery as string) : ""
-  );
+  useEffect(() => {
+    router.query.q
+      ? setSearchQuery(decodeURIComponent(router.query.q as string))
+      : setSearchQuery("");
+  }, [router.query.q]);
 
   return (
     <div className="flex items-center relative group">

components/SettingsSidebar.tsx

@@ -44,7 +44,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/account`
-                ? "bg-secondary/30"
+                ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
@@ -58,7 +58,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/appearance`
-                ? "bg-secondary/30"
+                ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
@@ -75,7 +75,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/archive`
-                ? "bg-secondary/30"
+                ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
@@ -92,7 +92,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/api`
-                ? "bg-secondary/30"
+                ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
@@ -106,7 +106,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/password`
-                ? "bg-secondary/30"
+                ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
@@ -121,7 +121,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
             <div
               className={`${
                 active === `/settings/billing`
-                  ? "bg-secondary/30"
+                  ? "bg-primary/20"
                   : "hover:bg-neutral/20"
               } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
             >

components/Sidebar.tsx

@@ -60,9 +60,7 @@ export default function Sidebar({ className }: { className?: string }) {
         <Link href={`/dashboard`}>
           <div
             className={`${
-              active === `/dashboard`
-                ? "bg-secondary/30"
-                : "hover:bg-neutral/20"
+              active === `/dashboard` ? "bg-primary/20" : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
           >
             <FontAwesomeIcon
@@ -76,7 +74,7 @@ export default function Sidebar({ className }: { className?: string }) {
         <Link href={`/links`}>
           <div
             className={`${
-              active === `/links` ? "bg-secondary/30" : "hover:bg-neutral/20"
+              active === `/links` ? "bg-primary/20" : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
           >
             <FontAwesomeIcon
@@ -91,7 +89,7 @@ export default function Sidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/collections`
-                ? "bg-secondary/30"
+                ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
           >
@@ -107,7 +105,7 @@ export default function Sidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/links/pinned`
-                ? "bg-secondary/30"
+                ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
           >
@@ -154,7 +152,7 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/collections/${e.id}`
-                            ? "bg-secondary/30"
+                            ? "bg-primary/20"
                             : "hover:bg-neutral/20"
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
                       >
@@ -222,7 +220,7 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/tags/${e.id}`
-                            ? "bg-secondary/30"
+                            ? "bg-primary/20"
                             : "hover:bg-neutral/20"
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
                       >

components/SubmitButton.tsx

@@ -21,17 +21,15 @@ export default function SubmitButton({
   return (
     <button
       type={type ? type : undefined}
-      className={`text-white flex items-center gap-2 py-2 px-5 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
-        loading
-          ? "bg-sky-600 cursor-auto"
-          : "bg-sky-700 hover:bg-sky-600 cursor-pointer"
-      } ${className || ""}`}
+      className={`btn btn-primary text-white tracking-wider w-fit flex items-center gap-2 ${
+        className || ""
+      }`}
       onClick={() => {
         if (!loading && onClick) onClick();
       }}
     >
       {icon && <FontAwesomeIcon icon={icon} className="h-5" />}
-      <p className="text-center w-full">{label}</p>
+      <p>{label}</p>
     </button>
   );
 }