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

pages/collections/[id].tsx

@@ -9,7 +9,6 @@ import { useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import SortDropdown from "@/components/SortDropdown";
-import useModalStore from "@/store/modals";
 import useLinks from "@/hooks/useLinks";
 import usePermissions from "@/hooks/usePermissions";
 import NoLinksFound from "@/components/NoLinksFound";
@@ -18,10 +17,9 @@ import useAccountStore from "@/store/account";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import EditCollectionModal from "@/components/Modals/EditCollectionModal";
 import EditCollectionSharingModal from "@/components/Modals/EditCollectionSharingModal";
+import DeleteCollectionModal from "@/components/Modals/DeleteCollectionModal";
 
 export default function Index() {
-  const { setModal } = useModalStore();
-
   const { settings } = useLocalSettingsStore();
 
   const router = useRouter();
@@ -76,6 +74,7 @@ export default function Index() {
   const [editCollectionModal, setEditCollectionModal] = useState(false);
   const [editCollectionSharingModal, setEditCollectionSharingModal] =
     useState(false);
+  const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
 
   return (
     <MainLayout>
@@ -206,15 +205,7 @@ export default function Index() {
                       tabIndex={0}
                       onClick={() => {
                         (document?.activeElement as HTMLElement)?.blur();
-                        activeCollection &&
-                          setModal({
-                            modal: "COLLECTION",
-                            state: true,
-                            method: "UPDATE",
-                            isOwner: permissions === true,
-                            active: activeCollection,
-                            defaultIndex: permissions === true ? 2 : 1,
-                          });
+                        setDeleteCollectionModal(true);
                       }}
                     >
                       {permissions === true
@@ -254,6 +245,12 @@ export default function Index() {
             modalId={"edit-collection-sharing-modal" + activeCollection.id}
             activeCollection={activeCollection}
           />
+          <DeleteCollectionModal
+            isOpen={deleteCollectionModal}
+            onClose={() => setDeleteCollectionModal(false)}
+            modalId={"delete-collection-modal" + activeCollection.id}
+            activeCollection={activeCollection}
+          />
         </>
       ) : undefined}
     </MainLayout>

pages/collections/index.tsx

@@ -9,7 +9,6 @@ import CollectionCard from "@/components/CollectionCard";
 import { useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import { useSession } from "next-auth/react";
-import useModalStore from "@/store/modals";
 import SortDropdown from "@/components/SortDropdown";
 import { Sort } from "@/types/global";
 import useSort from "@/hooks/useSort";
@@ -23,8 +22,6 @@ export default function Collections() {
 
   const { data } = useSession();
 
-  const { setModal } = useModalStore();
-
   useSort({ sortBy, setData: setSortedCollections, data: collections });
 
   const [newCollectionModal, setNewCollectionModal] = useState(false);
@@ -68,11 +65,7 @@ export default function Collections() {
                       tabIndex={0}
                       onClick={() => {
                         (document?.activeElement as HTMLElement)?.blur();
-                        setModal({
-                          modal: "COLLECTION",
-                          state: true,
-                          method: "CREATE",
-                        });
+                        setNewCollectionModal(true);
                       }}
                     >
                       New Collection

pages/dashboard.tsx

@@ -24,6 +24,7 @@ import useModalStore from "@/store/modals";
 import { toast } from "react-hot-toast";
 import { MigrationFormat, MigrationRequest } from "@/types/global";
 import DashboardItem from "@/components/DashboardItem";
+import NewLinkModal from "@/components/Modals/NewLinkModal";
 
 export default function Dashboard() {
   const { collections } = useCollectionStore();
@@ -99,6 +100,8 @@ export default function Dashboard() {
     }
   };
 
+  const [newLinkModal, setNewLinkModal] = useState(false);
+
   return (
     <MainLayout>
       <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
@@ -187,11 +190,7 @@ export default function Dashboard() {
               <div className="text-center w-full mt-4 flex flex-wrap gap-4 justify-center">
                 <div
                   onClick={() => {
-                    setModal({
-                      modal: "LINK",
-                      state: true,
-                      method: "CREATE",
-                    });
+                    setNewLinkModal(true);
                   }}
                   className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent text-white group"
                 >
@@ -200,24 +199,28 @@ export default function Dashboard() {
                     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 Item
+                    Create New Link
                   </span>
                 </div>
 
-                <details className="dropdown">
-                  <summary className="flex gap-2 text-sm btn btn-outline group">
+                <div className="dropdown dropdown-bottom">
+                  <div
+                    tabIndex={0}
+                    role="button"
+                    className="flex gap-2 text-sm btn btn-outline btn-neutral group"
+                    id="import-dropdown"
+                  >
                     <FontAwesomeIcon
                       icon={faFileImport}
                       className="w-5 h-5 duration-100"
-                      id="import-dropdown"
                     />
-                    <span className="duration-100" id="import-dropdown">
-                      Import Your Bookmarks
-                    </span>
-                  </summary>
+                    <p>Import From</p>
+                  </div>
                   <ul className="shadow menu dropdown-content z-[1] p-1 bg-base-200 border border-neutral-content rounded-xl mt-1 w-60">
                     <li>
                       <label
+                        tabIndex={0}
+                        role="button"
                         className="px-2 py-1 rounded-lg"
                         htmlFor="import-linkwarden-file"
                         title="JSON File"
@@ -237,6 +240,8 @@ export default function Dashboard() {
                     </li>
                     <li>
                       <label
+                        tabIndex={0}
+                        role="button"
                         className="px-2 py-1 rounded-lg"
                         htmlFor="import-html-file"
                         title="HTML File"
@@ -255,7 +260,7 @@ export default function Dashboard() {
                       </label>
                     </li>
                   </ul>
-                </details>
+                </div>
               </div>
             </div>
           )}
@@ -288,7 +293,6 @@ export default function Dashboard() {
                 className={`grid overflow-hidden 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`}
               >
                 {links
-
                   .filter((e) => e.pinnedBy && e.pinnedBy[0])
                   .map((e, i) => <LinkCard key={i} link={e} count={i} />)
                   .slice(0, showLinks)}
@@ -311,6 +315,11 @@ export default function Dashboard() {
           )}
         </div>
       </div>
+      <NewLinkModal
+        isOpen={newLinkModal}
+        onClose={() => setNewLinkModal(false)}
+        modalId="new-link-modal"
+      />
     </MainLayout>
   );
 }

pages/links/[id].tsx

@@ -239,7 +239,7 @@ export default function Index() {
                   <Link key={i} href={`/tags/${e.id}`} className="z-10">
                     <p
                       title={e.name}
-                      className="px-2 bg-sky-200 dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
+                      className="btn btn-xs btn-outline truncate max-w-[19rem]"
                     >
                       {e.name}
                     </p>

pages/public/collections/[id].tsx

@@ -9,7 +9,6 @@ import Head from "next/head";
 import useLinks from "@/hooks/useLinks";
 import useLinkStore from "@/store/links";
 import ProfilePhoto from "@/components/ProfilePhoto";
-import useModalStore from "@/store/modals";
 import ModalManagement from "@/components/ModalManagement";
 import ToggleDarkMode from "@/components/ToggleDarkMode";
 import getPublicUserData from "@/lib/client/getPublicUserData";
@@ -37,16 +36,9 @@ const cardVariants: Variants = {
 
 export default function PublicCollections() {
   const { links } = useLinkStore();
-  const { modal, setModal } = useModalStore();
 
   const { settings } = useLocalSettingsStore();
 
-  useEffect(() => {
-    modal
-      ? (document.body.style.overflow = "hidden")
-      : (document.body.style.overflow = "auto");
-  }, [modal]);
-
   const router = useRouter();
 
   const [collectionOwner, setCollectionOwner] = useState({

pages/public/links/[id].tsx

@@ -236,10 +236,14 @@ export default function Index() {
                   </p>
                 </Link>
                 {link?.tags.map((e, i) => (
-                  <Link key={i} href={`/tags/${e.id}`} className="z-10">
+                  <Link
+                    key={i}
+                    href={"/public/collections/20?q=" + e.name}
+                    className="z-10"
+                  >
                     <p
                       title={e.name}
-                      className="px-2 py-1 bg-sky-200 dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
+                      className="btn btn-xs btn-outline truncate max-w-[19rem]"
                     >
                       {e.name}
                     </p>

pages/settings/account.tsx

@@ -155,7 +155,7 @@ export default function Account() {
 
       <div className="divider my-3"></div>
 
-      <div className="flex flex-col gap-10">
+      <div className="flex flex-col gap-5">
         <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
           <div className="flex flex-col gap-3">
             <div>
@@ -215,7 +215,7 @@ export default function Account() {
                 </div>
               )}
               <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
-                <label className="btn btn-xs btn-secondary btn-outline bg-base-100">
+                <label className="btn btn-xs btn-neutral btn-outline bg-base-100">
                   Browse...
                   <input
                     type="file"
@@ -243,16 +243,20 @@ export default function Account() {
           <div className="flex gap-3 flex-col">
             <div>
               <p className="mb-2">Import your data from other platforms.</p>
-              <details className="dropdown">
-                <summary
-                  className="flex gap-2 text-sm btn btn-outline btn-secondary btn-xs"
+              <div className="dropdown dropdown-bottom">
+                <div
+                  tabIndex={0}
+                  role="button"
+                  className="flex gap-2 text-sm btn btn-outline btn-neutral btn-xs"
                   id="import-dropdown"
                 >
                   Import From
-                </summary>
+                </div>
                 <ul className="shadow menu dropdown-content z-[1] p-1 bg-base-200 border border-neutral-content rounded-xl mt-1 w-60">
                   <li>
                     <label
+                      tabIndex={0}
+                      role="button"
                       className="px-2 py-1 rounded-lg"
                       htmlFor="import-linkwarden-file"
                       title="JSON File"
@@ -272,6 +276,8 @@ export default function Account() {
                   </li>
                   <li>
                     <label
+                      tabIndex={0}
+                      role="button"
                       className="px-2 py-1 rounded-lg"
                       htmlFor="import-html-file"
                       title="HTML File"
@@ -290,13 +296,13 @@ export default function Account() {
                     </label>
                   </li>
                 </ul>
-              </details>
+              </div>
             </div>
 
             <div>
               <p className="mb-2">Download your data instantly.</p>
               <Link className="w-fit" href="/api/v1/migration">
-                <div className="btn btn-outline btn-secondary btn-xs">
+                <div className="btn btn-outline btn-neutral btn-xs">
                   Export Data
                 </div>
               </Link>
@@ -365,14 +371,14 @@ export default function Account() {
             You will be prompted to enter your password before the deletion
             process.
           </p>
-
-          <Link
-            href="/settings/delete"
-            className="mx-auto lg:mx-0 text-white mt-3 flex items-center gap-2 py-1 px-3 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit bg-red-500 hover:bg-red-400 cursor-pointer"
-          >
-            <p className="text-center w-full">Delete Your Account</p>
-          </Link>
         </div>
+
+        <Link
+          href="/settings/delete"
+          className="mx-auto lg:mx-0 text-white flex items-center gap-2 py-1 px-3 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit bg-red-500 hover:bg-red-400 cursor-pointer"
+        >
+          <p className="text-center w-full">Delete Your Account</p>
+        </Link>
       </div>
     </SettingsLayout>
   );

pages/settings/appearance.tsx

@@ -67,7 +67,7 @@ export default function Appearance() {
 
       <div className="divider my-3"></div>
 
-      <div className="flex flex-col gap-10">
+      <div className="flex flex-col gap-5">
         <div>
           <p className="mb-3">Select Theme</p>
           <div className="flex gap-3 w-full">