feature: Change top nav to include search and move add link to a modal

2 files changed, 10 insertions, 62 deletions

diff --git a/packages/web/app/dashboard/bookmarks/layout.tsx b/packages/web/app/dashboard/bookmarks/layout.tsx
index 6a588823..71ee143b 100644
--- a/packages/web/app/dashboard/bookmarks/layout.tsx
+++ b/packages/web/app/dashboard/bookmarks/layout.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import AddBookmark from "@/components/dashboard/bookmarks/AddBookmark";
+import TopNav from "@/components/dashboard/bookmarks/TopNav";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -14,7 +14,7 @@ export default function BookmarksLayout({
   return (
     <div className="flex h-full flex-col">
       <div>
-        <AddBookmark />
+        <TopNav />
       </div>
       <hr />
       <div className="my-4 flex-1 pb-4">{children}</div>
diff --git a/packages/web/app/dashboard/search/page.tsx b/packages/web/app/dashboard/search/page.tsx
index 514c546d..602f6aa0 100644
--- a/packages/web/app/dashboard/search/page.tsx
+++ b/packages/web/app/dashboard/search/page.tsx
@@ -1,76 +1,24 @@
 "use client";
 
-import { api } from "@/lib/trpc";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
-import { Input } from "@/components/ui/input";
 import Loading from "../bookmarks/loading";
-import { keepPreviousData } from "@tanstack/react-query";
-import { Search } from "lucide-react";
-import { ActionButton } from "@/components/ui/action-button";
 import { Suspense, useRef } from "react";
+import { SearchInput } from "@/components/dashboard/search/SearchInput";
+import { useBookmarkSearch } from "@/lib/hooks/bookmark-search";
 
 function SearchComp() {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const searchQuery = searchParams.get("q") || "";
-
-  const { data, isPending, isPlaceholderData, error } =
-    api.bookmarks.searchBookmarks.useQuery(
-      {
-        text: searchQuery,
-      },
-      {
-        placeholderData: keepPreviousData,
-      },
-    );
-
-  if (error) {
-    throw error;
-  }
+  const { data, isPending, isPlaceholderData } = useBookmarkSearch();
 
   const inputRef: React.MutableRefObject<HTMLInputElement | null> =
     useRef<HTMLInputElement | null>(null);
 
-  let timeoutId: NodeJS.Timeout | undefined;
-
-  // Debounce user input
-  const doSearch = () => {
-    if (!inputRef.current) {
-      return;
-    }
-    router.replace(`${pathname}?q=${inputRef.current.value}`);
-  };
-
-  const onInputChange = () => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      doSearch();
-    }, 200);
-  };
-
   return (
     <div className="container flex flex-col gap-3 p-4">
-      <div className="flex gap-2">
-        <Input
-          ref={inputRef}
-          placeholder="Search"
-          defaultValue={searchQuery}
-          onChange={onInputChange}
-        />
-        <ActionButton
-          loading={isPending || isPlaceholderData}
-          onClick={doSearch}
-        >
-          <span className="flex gap-2">
-            <Search />
-            <span className="my-auto">Search</span>
-          </span>
-        </ActionButton>
-      </div>
+      <SearchInput
+        ref={inputRef}
+        autoFocus={true}
+        loading={isPending || isPlaceholderData}
+      />
       <hr />
       {data ? (
         <BookmarksGrid