feat: search page (#19)

* chore: update bunlock file deps

* feat: add search history in navbar search input

* feat: add search history global context

* feat: add search functionallity

* feat: add navbar limit search recent history

* style: add text muted foreground in search title

* feat(search): add input search in search result default page

* feat(editor): add link ctrl + click and https appender

src/app/layout.tsx

@@ -2,6 +2,7 @@ import { Montserrat as FontSans } from "next/font/google";
 import localFont from "next/font/local";
 
 import { ReactLenis } from "@/components/common/lenis";
+import { SearchHistoryProvider } from "@/components/search/search-history-context";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { cn } from "@/lib/utils";
@@ -105,10 +106,12 @@ export default async function RootLayout({
         )}
       >
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <TRPCReactProvider>
-            <ReactLenis>{children}</ReactLenis>
-          </TRPCReactProvider>
-          <Toaster />
+          <SearchHistoryProvider>
+            <TRPCReactProvider>
+              <ReactLenis>{children}</ReactLenis>
+            </TRPCReactProvider>
+            <Toaster />
+          </SearchHistoryProvider>
         </ThemeProvider>
       </body>
 

src/app/page.tsx

@@ -2,7 +2,7 @@ import { MoreHorizontalIcon } from "lucide-react";
 
 import { Navbar } from "@/components/common/navbar";
 import { Articles } from "@/components/home/articles";
-import Sidebar from "@/components/home/sidebar";
+import { Sidebar } from "@/components/home/sidebar";
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { getServerAuthSession } from "@/server/auth";

src/app/search/layout.tsx

@@ -0,0 +1,17 @@
+import { Navbar } from "@/components/common/navbar";
+import { getServerAuthSession } from "@/server/auth";
+
+export default async function SearchLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const session = await getServerAuthSession();
+
+  return (
+    <>
+      <Navbar session={session} />
+      {children}
+    </>
+  );
+}

src/app/search/page.tsx

@@ -0,0 +1,9 @@
+import { SearchResult } from "@/components/search/search-result";
+
+export default async function SearchPage() {
+  return (
+    <main className="mt-24">
+      <SearchResult />
+    </main>
+  );
+}

src/components/common/navbar.tsx

@@ -6,20 +6,11 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import type { Session } from "next-auth";
 import { signOut } from "next-auth/react";
-import {
-  Book,
-  ListTreeIcon,
-  LogOut,
-  Menu,
-  NewspaperIcon,
-  Pen,
-  SearchIcon,
-  User,
-} from "lucide-react";
+import { Book, LogOut, Pen, SearchIcon, User } from "lucide-react";
 
-import { NavSheet } from "@/components/common/navsheet";
+import { NavSearchInput } from "@/components/search/nav-search-input";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button, buttonVariants } from "@/components/ui/button";
+import { buttonVariants } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -30,8 +21,6 @@ import {
 import logo from "@/images/logo.png";
 import { abbreviation, cn } from "@/lib/utils";
 
-import { Nav } from "./nav";
-
 const hideNavbarOnRoutes = ["/login"];
 
 export function Navbar({ session }: { session: Session | null }) {
@@ -40,57 +29,38 @@ export function Navbar({ session }: { session: Session | null }) {
   return (
     !hideNavbarOnRoutes.includes(pathname) && (
       <nav className="fixed top-0 z-10 w-full drop-shadow-md">
-        <div className="container flex items-center gap-x-4 bg-background py-2 backdrop-blur-md sm:justify-between">
+        <div className="container flex items-center justify-between gap-x-4 bg-background py-2 backdrop-blur-md">
           <div className="flex items-center gap-x-5">
             <div className="flex items-center gap-x-2">
-              <NavSheet>
-                <Button size="icon" variant="outline">
-                  <Menu className="h-6 w-6" />
-                </Button>
-              </NavSheet>
-
-              <Image
-                src={logo}
-                alt="HIMARPL Logo"
-                className="hidden w-12 md:block"
-              />
+              <Link href="/">
+                <Image src={logo} alt="HIMARPL Logo" className="w-12" />
+              </Link>
             </div>
 
-            <Nav
-              className="hidden md:flex"
-              links={[
-                {
-                  title: "Postingan Terbaru",
-                  href: "/",
-                  icon: NewspaperIcon,
-                  variant: "ghost",
-                },
-                {
-                  title: "Telusuri Label",
-                  href: "/explore-tags",
-                  icon: ListTreeIcon,
-                  variant: "ghost",
-                },
-                {
-                  title: "Cari Postingan",
-                  href: "/search",
-                  icon: SearchIcon,
-                  variant: "ghost",
-                },
-              ]}
-            />
+            <NavSearchInput />
           </div>
 
           {session && (
-            <div className="flex w-full items-center gap-x-4 sm:ml-auto sm:w-fit">
+            <div className="flex items-center gap-x-4">
+              <Link
+                href="/search"
+                className={cn(
+                  buttonVariants({ variant: "outline", size: "icon" }),
+                  "w-10 md:hidden",
+                )}
+              >
+                <SearchIcon className="h-5 w-5" />
+              </Link>
+
               <Link
                 href="/new"
                 className={cn(
-                  buttonVariants({ variant: "outline" }),
-                  "w-full md:min-w-20",
+                  buttonVariants({ variant: "outline", size: "icon" }),
+                  "h-10 w-10 md:min-w-20",
                 )}
               >
-                <Pen className="mr-2 h-4 w-4" /> Buat
+                <Pen className="h-4 w-4 md:mr-2" />
+                <span className="hidden md:inline"> Buat</span>
               </Link>
 
               <DropdownMenu>