added searching functionality

components/Modal/DeleteCollection.tsx

@@ -44,6 +44,7 @@ export default function AddCollection({
       </p>
 
       <input
+        autoFocus
         value={inputField}
         onChange={(e) => setInputField(e.target.value)}
         type="text"

components/Navbar.tsx

@@ -8,7 +8,6 @@ import { signOut } from "next-auth/react";
 import { useSession } from "next-auth/react";
 import {
   faPlus,
-  faMagnifyingGlass,
   faCircleUser,
   faSliders,
   faArrowRightFromBracket,
@@ -17,11 +16,12 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { useEffect, useState } from "react";
 import Dropdown from "@/components/Dropdown";
-import Modal from "./Modal";
+import Modal from "@/components/Modal";
-import AddLink from "./Modal/AddLink";
+import AddLink from "@/components/Modal/AddLink";
-import ClickAwayHandler from "./ClickAwayHandler";
+import ClickAwayHandler from "@/components/ClickAwayHandler";
-import Sidebar from "./Sidebar";
+import Sidebar from "@/components/Sidebar";
 import { useRouter } from "next/router";
+import Search from "@/components/Search";
 
 export default function () {
   const { data: session } = useSession();
@@ -57,20 +57,7 @@ export default function () {
       >
         <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
       </div>
-      <div className="flex items-center relative">
+      <Search />
-        <label
-          htmlFor="search-box"
-          className="inline-flex w-fit absolute right-0  cursor-pointer select-none rounded-md p-1 text-sky-500"
-        >
-          <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
-        </label>
-        <input
-          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"
-        />
-      </div>
       <div className="flex items-center gap-2">
         <div
           onClick={toggleLinkModal}

components/Search.tsx

@@ -0,0 +1,106 @@
+import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
+import ClickAwayHandler from "./ClickAwayHandler";
+import useSearchSettingsStore from "@/store/search";
+import { useRouter } from "next/router";
+
+export default function Search() {
+  const router = useRouter();
+
+  const [searchBox, setSearchBox] = useState(
+    false || router.pathname == "/search"
+  );
+
+  const { searchSettings, toggleCheckbox, setSearchQuery } =
+    useSearchSettingsStore();
+
+  return (
+    <ClickAwayHandler onClickOutside={() => setSearchBox(false)}>
+      <div
+        className="flex items-center relative"
+        onClick={() => setSearchBox(true)}
+      >
+        <label
+          htmlFor="search-box"
+          className="inline-flex w-fit absolute right-0 pointer-events-none rounded-md p-1 text-sky-500"
+        >
+          <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
+        </label>
+
+        <input
+          id="search-box"
+          type="text"
+          placeholder="Search for Links"
+          value={searchSettings.query}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          onFocus={() => router.push("/search")}
+          autoFocus={searchBox}
+          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"
+        />
+        {searchBox ? (
+          <div className="absolute flex flex-wrap items-baseline justify-between gap-2 top-9 left-0 shadow-md bg-gray-50 rounded-md p-2 z-10 border border-sky-100 w-60 sm:w-80">
+            <p className="text-sky-900">Filter by:</p>
+            <div className="flex gap-1 text-sm font-bold flex-wrap text-sky-500">
+              <label className="cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={searchSettings.filter.name}
+                  onChange={() => toggleCheckbox("name")}
+                  className="peer sr-only"
+                />
+                <span className="text-sky-900 peer-checked:bg-sky-500 text-xs hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                  Name
+                </span>
+              </label>
+              <label className="cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={searchSettings.filter.url}
+                  onChange={() => toggleCheckbox("url")}
+                  className="peer sr-only"
+                />
+                <span className="text-sky-900 peer-checked:bg-sky-500 text-xs hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                  Link
+                </span>
+              </label>
+              <label className="cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={searchSettings.filter.title}
+                  onChange={() => toggleCheckbox("title")}
+                  className="peer sr-only"
+                />
+                <span className="text-sky-900 peer-checked:bg-sky-500 text-xs hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                  Title
+                </span>
+              </label>
+              <label className="cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={searchSettings.filter.collection}
+                  onChange={() => toggleCheckbox("collection")}
+                  className="peer sr-only"
+                />
+                <span className="text-sky-900 peer-checked:bg-sky-500 text-xs hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                  Collection
+                </span>
+              </label>
+              <label className="cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={searchSettings.filter.tags}
+                  onChange={() => toggleCheckbox("tags")}
+                  className="peer sr-only"
+                />
+                <span className="text-sky-900 peer-checked:bg-sky-500 text-xs hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                  Tags
+                </span>
+              </label>
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </ClickAwayHandler>
+  );
+}

pages/search.tsx

@@ -0,0 +1,59 @@
+// 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/>.
+
+import LinkList from "@/components/LinkList";
+import Dashboard from "@/layouts/Dashboard";
+import useLinkStore from "@/store/links";
+import useSearchSettingsStore from "@/store/search";
+import { ExtendedLink } from "@/types/global";
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
+
+export default function Links() {
+  const { links } = useLinkStore();
+
+  const [filteredLinks, setFilteredLinks] = useState<ExtendedLink[]>([]);
+
+  const { searchSettings } = useSearchSettingsStore();
+
+  useEffect(() => {
+    const { name, url, title, collection, tags } = searchSettings.filter;
+
+    const filter = links.filter((link) => {
+      const query = searchSettings.query.toLowerCase();
+
+      if (
+        (name && link.name.toLowerCase().includes(query)) ||
+        (url && link.url.toLowerCase().includes(query)) ||
+        (title && link.title.toLowerCase().includes(query)) ||
+        (collection && link.collection.name.toLowerCase().includes(query)) ||
+        (tags &&
+          link.tags.some((tag) => tag.name.toLowerCase().includes(query)))
+      )
+        return true;
+    });
+
+    setFilteredLinks(filter);
+  }, [searchSettings]);
+
+  return (
+    <Dashboard>
+      <div className="p-5 flex flex-col gap-5 w-full">
+        <div className="flex gap-3 items-center">
+          <div className="flex gap-2 items-center">
+            <FontAwesomeIcon icon={faSearch} className="w-5 h-5 text-sky-300" />
+            <p className="text-lg text-sky-900">Search Results</p>
+          </div>
+        </div>
+        {filteredLinks[0]
+          ? filteredLinks.map((e, i) => {
+              return <LinkList key={i} link={e} count={i} />;
+            })
+          : "No results..."}
+      </div>
+    </Dashboard>
+  );
+}

store/search.ts

@@ -0,0 +1,47 @@
+// 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/>.
+
+import { SearchSettings } from "@/types/global";
+import { create } from "zustand";
+
+type SearchSettingsState = {
+  searchSettings: SearchSettings;
+  setSearchSettings: (searchSettings: SearchSettings) => void;
+  toggleCheckbox: (name: keyof SearchSettings["filter"]) => void;
+  setSearchQuery: (query: string) => void;
+};
+
+const useSearchSettingsStore = create<SearchSettingsState>((set) => ({
+  searchSettings: {
+    query: "",
+    filter: {
+      name: true,
+      url: true,
+      title: true,
+      collection: true,
+      tags: true,
+    },
+  },
+  setSearchSettings: (searchSettings) => set({ searchSettings }),
+  toggleCheckbox: (name) =>
+    set((state) => ({
+      searchSettings: {
+        ...state.searchSettings,
+        filter: {
+          ...state.searchSettings.filter,
+          [name]: !state.searchSettings.filter[name],
+        },
+      },
+    })),
+  setSearchQuery: (query) =>
+    set((state) => ({
+      searchSettings: {
+        ...state.searchSettings,
+        query,
+      },
+    })),
+}));
+
+export default useSearchSettingsStore;

types/global.ts

@@ -46,3 +46,14 @@ export interface ExtendedCollection extends Collection {
     };
   }[];
 }
+
+export type SearchSettings = {
+  query: string;
+  filter: {
+    name: boolean;
+    url: boolean;
+    title: boolean;
+    collection: boolean;
+    tags: boolean;
+  };
+};