Merge branch 'bootstrap-icons' into sidebar-highlight-link

components/LinkViews/LinkComponents/LinkCollection.tsx

@@ -5,7 +5,10 @@ import {
 import { useRouter } from "next/router";
 import React from "react";
 
-export default function LinkCollection({ link, collection }: {
+export default function LinkCollection({
+  link,
+  collection,
+}: {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
 }) {
@@ -19,7 +22,10 @@ export default function LinkCollection({ link, collection }: {
       }}
       className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
     >
-      <i className="bi-folder2 text-lg shadow" style={{ color: collection?.color }}></i>
+      <i
+        className="bi-folder-fill text-lg drop-shadow"
+        style={{ color: collection?.color }}
+      ></i>
       <p className="truncate capitalize">{collection?.name}</p>
     </div>
   );

components/Modal/Collection/CollectionInfo.tsx

@@ -67,7 +67,7 @@ export default function CollectionInfo({
               <div className="flex flex-col justify-between items-center w-32">
                 <p className="w-full mb-2">Color</p>
                 <div style={{ color: collection.color }}>
-                  <i className={"bi-folder2"}></i>
+                  <i className={"bi-folder-fill"}></i>
                 </div>
                 <div
                   className="btn btn-ghost btn-xs"

components/ModalContent/EditCollectionModal.tsx

@@ -68,7 +68,10 @@ export default function EditCollectionModal({
                 <p className="w-full mb-2">Color</p>
                 <div className="color-picker flex justify-between">
                   <div className="flex flex-col gap-2 items-center w-32">
-                    <i className="bi-folder2 text-5xl drop-shadow" style={{ color: collection.color }}></i>
+                    <i
+                      className="bi-folder-fill text-5xl drop-shadow"
+                      style={{ color: collection.color }}
+                    ></i>
                     <div
                       className="btn btn-ghost btn-xs"
                       onClick={() =>

components/ModalContent/NewCollectionModal.tsx

@@ -27,27 +27,22 @@ export default function NewCollectionModal({ onClose }: Props) {
   const { addCollection } = useCollectionStore();
 
   const submit = async () => {
-    if (!submitLoader) {
-      setSubmitLoader(true);
-      if (!collection) return null;
+    if (submitLoader) return;
+    if (!collection) return null;
 
-      setSubmitLoader(true);
+    setSubmitLoader(true);
 
-      const load = toast.loading("Creating...");
+    const load = toast.loading("Creating...");
 
-      let response;
+    let response = await addCollection(collection as any);
+    toast.dismiss(load);
 
-      response = await addCollection(collection as any);
+    if (response.ok) {
+      toast.success("Created!");
+      onClose();
+    } else toast.error(response.data as string);
 
-      toast.dismiss(load);
-
-      if (response.ok) {
-        toast.success("Created!");
-        onClose();
-      } else toast.error(response.data as string);
-
-      setSubmitLoader(false);
-    }
+    setSubmitLoader(false);
   };
 
   return (
@@ -73,8 +68,10 @@ export default function NewCollectionModal({ onClose }: Props) {
                 <p className="w-full mb-2">Color</p>
                 <div className="color-picker flex justify-between">
                   <div className="flex flex-col gap-2 items-center w-32">
-                    <div style={{ color: collection.color }}>
-                    </div>
+                    <i
+                      className={"bi-folder-fill text-5xl"}
+                      style={{ color: collection.color }}
+                    ></i>
                     <div
                       className="btn btn-ghost btn-xs"
                       onClick={() =>

components/ModalContent/NewLinkModal.tsx

@@ -145,51 +145,60 @@ export default function NewLinkModal({ onClose }: Props) {
         </div>
       </div>
 
-      {optionsExpanded ? (
-        <div className="mt-5">
-          {/* <hr className="mb-3 border border-neutral-content" /> */}
-          <div className="grid sm:grid-cols-2 gap-3">
-            <div>
-              <p className="mb-2">Name</p>
-              <TextInput
-                value={link.name}
-                onChange={(e) => setLink({ ...link, name: e.target.value })}
-                placeholder="e.g. Example Link"
-                className="bg-base-200"
-              />
-            </div>
+      <div className={"mt-2"}>
+        {optionsExpanded ? (
+          <div className="mt-5">
+            {/* <hr className="mb-3 border border-neutral-content" /> */}
+            <div className="grid sm:grid-cols-2 gap-3">
+              <div>
+                <p className="mb-2">Name</p>
+                <TextInput
+                  value={link.name}
+                  onChange={(e) => setLink({ ...link, name: e.target.value })}
+                  placeholder="e.g. Example Link"
+                  className="bg-base-200"
+                />
+              </div>
 
-            <div>
-              <p className="mb-2">Tags</p>
-              <TagSelection
-                onChange={setTags}
-                defaultValue={link.tags.map((e) => {
-                  return { label: e.name, value: e.id };
-                })}
-              />
-            </div>
+              <div>
+                <p className="mb-2">Tags</p>
+                <TagSelection
+                  onChange={setTags}
+                  defaultValue={link.tags.map((e) => {
+                    return { label: e.name, value: e.id };
+                  })}
+                />
+              </div>
 
-            <div className="sm:col-span-2">
-              <p className="mb-2">Description</p>
-              <textarea
-                value={unescapeString(link.description) as string}
-                onChange={(e) =>
-                  setLink({ ...link, description: e.target.value })
-                }
-                placeholder="Will be auto generated if nothing is provided."
-                className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
-              />
+              <div className="sm:col-span-2">
+                <p className="mb-2">Description</p>
+                <textarea
+                  value={unescapeString(link.description) as string}
+                  onChange={(e) =>
+                    setLink({ ...link, description: e.target.value })
+                  }
+                  placeholder="Will be auto generated if nothing is provided."
+                  className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
+                />
+              </div>
             </div>
           </div>
-        </div>
-      ) : undefined}
+        ) : undefined}
+      </div>
 
       <div className="flex justify-between items-center mt-5">
         <div
           onClick={() => setOptionsExpanded(!optionsExpanded)}
           className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
         >
-          <p>{optionsExpanded ? "Hide" : "More"} Options</p>
+          <p className="font-normal">
+            {optionsExpanded ? "Hide" : "More"} Options
+          </p>
+          <i
+            className={`${
+              optionsExpanded ? "bi-chevron-up" : "bi-chevron-down"
+            }`}
+          ></i>
         </div>
 
         <button

components/Navbar.tsx

@@ -55,7 +55,7 @@ export default function Navbar() {
         onClick={toggleSidebar}
         className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
       >
-        <i className="bi-list text-xl"></i>
+        <i className="bi-list text-2xl leading-none"></i>
       </div>
       <SearchBar />
       <div className="flex items-center gap-2">
@@ -66,13 +66,13 @@ export default function Navbar() {
             <div
               tabIndex={0}
               role="button"
-              className="flex min-w-[3.4rem] items-center group btn btn-accent dark:border-violet-400 text-white btn-sm px-2"
+              className="flex min-w-[3.4rem] items-center btn btn-accent dark:border-violet-400 text-white btn-sm max-h-[2rem] px-2 relative"
             >
               <span>
-                <i className="bi-plus text-xl"></i>
+                <i className="bi-plus text-4xl absolute -top-[0.3rem] left-0 pointer-events-none"></i>
               </span>
               <span>
-                <i className="bi-caret-down-fill text-xs"></i>
+                <i className="bi-caret-down-fill text-xs absolute top-2 right-[0.3rem] pointer-events-none"></i>
               </span>
             </div>
           </div>

components/NoLinksFound.tsx

@@ -33,9 +33,7 @@ export default function NoLinksFound({ text }: Props) {
           }}
           className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent dark:border-violet-400 text-white group"
         >
-          <i
-            className="bi-plus text-4xl left-2 group-hover:ml-[4rem] absolute duration-100"
-          ></i>
+          <i className="bi-plus-lg text-3xl left-2 group-hover:ml-[4rem] absolute duration-100"></i>
           <span className="group-hover:opacity-0 text-right w-full duration-100">
             Create New Link
           </span>

components/PageHeader.tsx

@@ -16,7 +16,7 @@ export default function PageHeader({
       ></i>
       <div>
         <p className="text-3xl capitalize font-thin">{title}</p>
-        <p>{description}</p>
+        <p className="text-xs sm:text-sm">{description}</p>
       </div>
     </div>
   );

components/ProfilePhoto.tsx

@@ -6,7 +6,7 @@ type Props = {
   className?: string;
   priority?: boolean;
   name?: string;
-  dimensionClass?: string;
+  large?: boolean;
 };
 
 export default function ProfilePhoto({
@@ -14,7 +14,7 @@ export default function ProfilePhoto({
   className,
   priority,
   name,
-  dimensionClass,
+  large,
 }: Props) {
   const [image, setImage] = useState("");
 
@@ -30,14 +30,14 @@ export default function ProfilePhoto({
   return !image ? (
     <div
       className={`avatar drop-shadow-md placeholder ${className || ""} ${
-        dimensionClass || "w-8 h-8 "
+        large ? "w-28 h-28" : "w-8 h-8"
       }`}
     >
       <div className="bg-base-100 text-neutral rounded-full w-full h-full ring-2 ring-neutral-content select-none">
         {name ? (
           <span className="text-2xl capitalize">{name.slice(0, 1)}</span>
         ) : (
-          <i className="bi-person text-xl"></i>
+          <i className={`bi-person ${large ? "text-5xl" : "text-xl"}`}></i>
         )}
       </div>
     </div>
@@ -45,7 +45,7 @@ export default function ProfilePhoto({
     <div
       className={`avatar skeleton rounded-full drop-shadow-md ${
         className || ""
-      } ${dimensionClass || "w-8 h-8 "}`}
+      } ${large || "w-8 h-8"}`}
     >
       <div className="rounded-full w-full h-full ring-2 ring-neutral-content">
         <Image

components/ReadableView.tsx

@@ -172,9 +172,7 @@ export default function ReadableView({ link }: Props) {
                   target="_blank"
                   className="hover:opacity-60 duration-100 break-all text-sm flex items-center gap-1 text-neutral w-fit"
                 >
-                  <i
-                    className="bi-link-45deg"
-                  ></i>
+                  <i className="bi-link-45deg"></i>
 
                   {isValidUrl(link?.url || "")
                     ? new URL(link?.url as string).host
@@ -190,7 +188,7 @@ export default function ReadableView({ link }: Props) {
               className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
             >
               <i
-                className="bi-folder2 drop-shadow text-2xl"
+                className="bi-folder-fill drop-shadow text-2xl"
                 style={{ color: link?.collection.color }}
               ></i>
               <p

components/Sidebar.tsx

@@ -16,7 +16,7 @@ export default function Sidebar({ className }: { className?: string }) {
     () => {
       const storedValue = localStorage.getItem("collectionDisclosure");
       return storedValue ? storedValue === "true" : true;
-    },
+    }
   );
 
   const { collections } = useCollectionStore();
@@ -33,7 +33,7 @@ export default function Sidebar({ className }: { className?: string }) {
   useEffect(() => {
     localStorage.setItem(
       "collectionDisclosure",
-      collectionDisclosure ? "true" : "false",
+      collectionDisclosure ? "true" : "false"
     );
   }, [collectionDisclosure]);
 
@@ -78,9 +78,9 @@ export default function Sidebar({ className }: { className?: string }) {
           }}
           className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
         >
-          <p className="text-sm ">Collections</p>
+          <p className="text-sm">Collections</p>
           <i
-            className={`bi-chevron-down text-primary drop-shadow  ${
+            className={`bi-chevron-down ${
               collectionDisclosure ? "rotate-reverse" : "rotate"
             }`}
           ></i>
@@ -108,14 +108,14 @@ export default function Sidebar({ className }: { className?: string }) {
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
                       >
                         <i
-                          className="bi-folder2 text-2xl drop-shadow"
+                          className="bi-folder-fill text-2xl drop-shadow"
                           style={{ color: e.color }}
                         ></i>
                         <p className="truncate w-full">{e.name}</p>
 
                         {e.isPublic ? (
                           <i
-                            className="bi-globe-americas text-sm text-black/50 dark:text-white/50 drop-shadow"
+                            className="bi-globe2 text-sm text-black/50 dark:text-white/50 drop-shadow"
                             title="This collection is being shared publicly."
                           ></i>
                         ) : undefined}
@@ -147,8 +147,8 @@ export default function Sidebar({ className }: { className?: string }) {
         >
           <p className="text-sm">Tags</p>
           <i
-            className={`bi-chevron-down text-primary drop-shadow  ${
-              collectionDisclosure ? "rotate-reverse" : "rotate"
+            className={`bi-chevron-down  ${
+              tagDisclosure ? "rotate-reverse" : "rotate"
             }`}
           ></i>
         </Disclosure.Button>

components/SortDropdown.tsx

@@ -14,9 +14,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
         role="button"
         className="btn btn-sm btn-square btn-ghost"
       >
-        <i
-          className="bi-filter text-neutral text-2xl"
-        ></i>
+        <i className="bi-chevron-expand text-neutral text-2xl"></i>
       </div>
       <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
         <li>

components/ToggleDarkMode.tsx

@@ -32,8 +32,8 @@ export default function ToggleDarkMode({ className }: Props) {
           className="theme-controller"
           checked={localStorage.getItem("theme") === "light" ? false : true}
         />
-        <i className="bi-sun text-xl swap-on"></i>
-        <i className="bi-moon text-xl swap-off"></i>
+        <i className="bi-sun-fill text-xl swap-on"></i>
+        <i className="bi-moon-fill text-xl swap-off"></i>
       </label>
     </div>
   );

layouts/SettingsLayout.tsx

@@ -53,18 +53,14 @@ export default function SettingsLayout({ children }: Props) {
               onClick={toggleSidebar}
               className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
             >
-              <i
-                className="bi-list text-xl"
-              ></i>
+              <i className="bi-list text-2xl leading-none"></i>
             </div>
 
             <Link
               href="/dashboard"
               className="text-neutral btn btn-square btn-sm btn-ghost"
             >
-              <i
-                className="bi-chevron-left text-xl"
-              ></i>
+              <i className="bi-chevron-left text-xl"></i>
             </Link>
           </div>
 

pages/collections/[id].tsx

@@ -109,7 +109,7 @@ export default function Index() {
           <div className="flex gap-3 items-start justify-between">
             <div className="flex items-center gap-2">
               <i
-                className="bi-folder2 text-3xl drop-shadow"
+                className="bi-folder-fill text-3xl drop-shadow"
                 style={{ color: activeCollection?.color }}
               ></i>
 
@@ -124,10 +124,7 @@ export default function Index() {
                 role="button"
                 className="btn btn-ghost btn-sm btn-square text-neutral"
               >
-                <i
-                  className="bi-three-dots text-xl"
-                  title="More"
-                ></i>
+                <i className="bi-three-dots text-xl" title="More"></i>
               </div>
               <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
                 {permissions === true ? (

pages/collections/index.tsx

@@ -24,15 +24,17 @@ export default function Collections() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <PageHeader
-          icon={"bi-folder2"}
-          title={"Collections"}
-          description={"Collections you own"}
-        />
+        <div className="flex justify-between">
+          <PageHeader
+            icon={"bi-folder"}
+            title={"Collections"}
+            description={"Collections you own"}
+          />
 
-        <div className="flex gap-3 justify-end">
-          <div className="relative mt-2">
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+          <div className="flex gap-3 justify-end">
+            <div className="relative mt-2">
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            </div>
           </div>
         </div>
 
@@ -48,14 +50,14 @@ export default function Collections() {
             onClick={() => setNewCollectionModal(true)}
           >
             <p className="group-hover:opacity-0 duration-100">New Collection</p>
-            <i className="bi-plus text-5xl group-hover:text-7xl group-hover:-mt-6 text-primary drop-shadow duration-100"></i>
+            <i className="bi-plus-lg text-5xl group-hover:text-7xl group-hover:-mt-6 text-primary drop-shadow duration-100"></i>
           </div>
         </div>
 
         {sortedCollections.filter((e) => e.ownerId !== data?.user.id)[0] ? (
           <>
             <div className="flex items-center gap-3 my-5">
-              <i className="bi-folder2 text-3xl sm:text-2xl text-primary drop-shadow"></i>
+              <i className="bi-folder text-3xl sm:text-2xl text-primary drop-shadow"></i>
 
               <div>
                 <p className="text-3xl capitalize font-thin">

pages/dashboard.tsx

@@ -33,8 +33,8 @@ export default function Dashboard() {
       collections.reduce(
         (accumulator, collection) =>
           accumulator + (collection._count as any).links,
-        0,
-      ),
+        0
+      )
     );
   }, [collections]);
 
@@ -94,10 +94,13 @@ export default function Dashboard() {
   return (
     <MainLayout>
       <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
-        <PageHeader icon={'bi-house '} title={'Dashboard'} description={"A brief overview of your data"}/>
+        <PageHeader
+          icon={"bi-house "}
+          title={"Dashboard"}
+          description={"A brief overview of your data"}
+        />
         <div>
-          <div
-            className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
+          <div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
             <DashboardItem
               name={numberOfLinks === 1 ? "Link" : "Links"}
               value={numberOfLinks}
@@ -146,7 +149,7 @@ export default function Dashboard() {
                 className={`grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`}
               >
                 {links.slice(0, showLinks).map((e, i) => (
-                  <LinkCard key={i} link={e} count={i}/>
+                  <LinkCard key={i} link={e} count={i} />
                 ))}
               </div>
             </div>
@@ -170,7 +173,7 @@ export default function Dashboard() {
                   }}
                   className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-accent text-white"
                 >
-                  <i className="bi-plus text-xl duration-100"></i>
+                  <i className="bi-plus-lg text-xl duration-100"></i>
                   <span className="group-hover:opacity-0 text-right duration-100">
                     Add New Link
                   </span>
@@ -186,8 +189,7 @@ export default function Dashboard() {
                     <i className="bi-cloud-upload text-xl duration-100"></i>
                     <p>Import From</p>
                   </div>
-                  <ul
-                    className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
+                  <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
                     <li>
                       <label
                         tabIndex={0}
@@ -260,7 +262,7 @@ export default function Dashboard() {
               >
                 {links
                   .filter((e) => e.pinnedBy && e.pinnedBy[0])
-                  .map((e, i) => <LinkCard key={i} link={e} count={i}/>)
+                  .map((e, i) => <LinkCard key={i} link={e} count={i} />)
                   .slice(0, showLinks)}
               </div>
             </div>
@@ -282,7 +284,7 @@ export default function Dashboard() {
         </div>
       </div>
       {newLinkModal ? (
-        <NewLinkModal onClose={() => setNewLinkModal(false)}/>
+        <NewLinkModal onClose={() => setNewLinkModal(false)} />
       ) : undefined}
     </MainLayout>
   );

pages/links/index.tsx

@@ -10,7 +10,6 @@ import ViewDropdown from "@/components/ViewDropdown";
 import DefaultView from "@/components/LinkViews/DefaultView";
 import ListView from "@/components/LinkViews/ListView";
 
-
 export default function Links() {
   const { links } = useLinkStore();
 
@@ -33,21 +32,23 @@ export default function Links() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <PageHeader
-          icon={"bi-link-45deg"}
-          title={"All Links"}
-          description={"Links from every Collections"}
-        />
+        <div className="flex justify-between">
+          <PageHeader
+            icon={"bi-link-45deg"}
+            title={"All Links"}
+            description={"Links from every Collections"}
+          />
 
-        <div className="mt-2 flex items-center justify-end gap-2">
-          <SortDropdown sortBy={sortBy} setSort={setSortBy}/>
-          <ViewDropdown viewMode={viewMode} setViewMode={setViewMode}/>
+          <div className="mt-2 flex items-center justify-end gap-2">
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          </div>
         </div>
 
         {links[0] ? (
-          <LinkComponent links={links}/>
+          <LinkComponent links={links} />
         ) : (
-          <NoLinksFound text="You Haven't Created Any Links Yet"/>
+          <NoLinksFound text="You Haven't Created Any Links Yet" />
         )}
       </div>
     </MainLayout>

pages/links/pinned.tsx

@@ -31,18 +31,20 @@ export default function PinnedLinks() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <PageHeader
-          icon={"bi-pin-angle"}
-          title={"Pinned Links"}
-          description={"Pinned Links from your Collections"}
-        />
-        <div className="mt-2 flex items-center justify-end gap-2">
-          <SortDropdown sortBy={sortBy} setSort={setSortBy}/>
-          <ViewDropdown viewMode={viewMode} setViewMode={setViewMode}/>
+        <div className="flex justify-between">
+          <PageHeader
+            icon={"bi-pin-angle"}
+            title={"Pinned Links"}
+            description={"Pinned Links from your Collections"}
+          />
+          <div className="mt-2 flex items-center justify-end gap-2">
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          </div>
         </div>
 
         {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
-          <LinkComponent links={links}/>
+          <LinkComponent links={links} />
         ) : (
           <div
             style={{ flex: "1 1 auto" }}

pages/search.tsx

@@ -54,18 +54,21 @@ export default function Search() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
-        <PageHeader icon={'bi-search'} title={'Search Results'}/>
+        <div className="flex justify-between">
+          <PageHeader icon={"bi-search"} title={"Search Results"} />
 
-        <div className="flex gap-3 items-center justify-end">
-          <div className="flex gap-2 items-center mt-2">
-            <FilterSearchDropdown
-              searchFilter={searchFilter}
-              setSearchFilter={setSearchFilter}
-            />
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          <div className="flex gap-3 items-center justify-end">
+            <div className="flex gap-2 items-center mt-2">
+              <FilterSearchDropdown
+                searchFilter={searchFilter}
+                setSearchFilter={setSearchFilter}
+              />
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+              <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+            </div>
           </div>
         </div>
+
         {links[0] ? (
           <LinkComponent links={links} />
         ) : (

pages/settings/account.tsx

@@ -197,7 +197,7 @@ export default function Account() {
               <ProfilePhoto
                 priority={true}
                 src={user.image ? user.image : undefined}
-                dimensionClass="w-28 h-28"
+                large={true}
               />
               {user.image && (
                 <div
@@ -209,9 +209,7 @@ export default function Account() {
                   }
                   className="absolute top-1 left-1 btn btn-xs btn-circle btn-neutral btn-outline bg-base-100"
                 >
-                  <i
-                    className="bi-x"
-                  ></i>
+                  <i className="bi-x"></i>
                 </div>
               )}
               <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
@@ -250,9 +248,7 @@ export default function Account() {
                   className="flex gap-2 text-sm btn btn-outline btn-neutral group"
                   id="import-dropdown"
                 >
-                  <i
-                    className="bi-cloud-upload text-xl duration-100"
-                  ></i>
+                  <i className="bi-cloud-upload text-xl duration-100"></i>
                   <p>Import From</p>
                 </div>
                 <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
@@ -304,9 +300,7 @@ export default function Account() {
               <p className="mb-2">Download your data instantly.</p>
               <Link className="w-fit" href="/api/v1/migration">
                 <div className="flex w-fit gap-2 text-sm btn btn-outline btn-neutral group">
-                  <i
-                    className="bi-cloud-download text-xl duration-100"
-                  ></i>
+                  <i className="bi-cloud-download text-xl duration-100"></i>
                   <p>Export Data</p>
                 </div>
               </Link>

pages/settings/appearance.tsx

@@ -67,31 +67,27 @@ export default function Appearance() {
           <p className="mb-3">Select Theme</p>
           <div className="flex gap-3 w-full">
             <div
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-28 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
                 localStorage.getItem("theme") === "dark"
                   ? "dark:outline-primary text-primary"
                   : "text-white"
               }`}
               onClick={() => updateSettings({ theme: "dark" })}
             >
-              <i
-                className="bi-moon text-6xl"
-              ></i>
+              <i className="bi-moon-fill text-6xl"></i>
               <p className="ml-2 text-2xl">Dark</p>
 
               {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
             </div>
             <div
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-28 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
                 localStorage.getItem("theme") === "light"
                   ? "outline-primary text-primary"
                   : "text-black"
               }`}
               onClick={() => updateSettings({ theme: "light" })}
             >
-              <i
-                className="bi-sun text-6xl"
-              ></i>
+              <i className="bi-sun-fill text-6xl"></i>
               <p className="ml-2 text-2xl">Light</p>
               {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
             </div>

pages/settings/archive.tsx

@@ -61,7 +61,7 @@ export default function Archive() {
 
       <div className="divider my-3"></div>
 
-      <p>Formats to Archive webpages:</p>
+      <p>Formats to Archive/Preserve webpages:</p>
       <div className="p-3">
         <Checkbox
           label="Screenshot"