From be319b7c2824713aaaaf452e36efacb55fec6d93 Mon Sep 17 00:00:00 2001
From: bercivarga <65171545+bercivarga@users.noreply.github.com>
Date: Sat, 9 Mar 2024 23:00:51 +0100
Subject: [PATCH] Add note modifying functionality, dynamic route caching
 adjustments and map page(s) preparations (#4)

* add base note helpers for modifying relations and content

* add note-editor base

* add force dynamic rendering logic to notes page

* add note deletion functionality

* add better revalidation to dynamic pages

* add preparations for map pages
---
 app/(platform)/dashboard/page.tsx             |   9 +-
 app/(platform)/layout.tsx                     |   2 +-
 app/(platform)/map/layout.tsx                 |  45 +++
 app/(platform)/map/page.tsx                   |   7 +
 app/(platform)/notes/[noteId]/note-editor.tsx |  76 +++++
 app/(platform)/notes/[noteId]/page.tsx        |  34 +-
 app/(platform)/notes/new/route.ts             |   2 +-
 app/(platform)/notes/page.tsx                 |  26 +-
 app/(platform)/side-nav.tsx                   |   6 +-
 components/ui/menubar.tsx                     | 243 ++++++++++++++
 helpers/notes/addTag.ts                       |  32 ++
 helpers/notes/connectNotes.ts                 |  18 ++
 helpers/notes/deleteNote.ts                   |   4 +
 helpers/notes/disconnectNotes.ts              |  18 ++
 helpers/notes/getAllNotes.ts                  |   5 +-
 helpers/notes/getNote.ts                      |   2 -
 helpers/notes/removeTag.ts                    |  18 ++
 helpers/notes/updateNoteContent.ts            |  25 ++
 helpers/notes/updateNoteTitle.ts              |  25 ++
 package-lock.json                             | 302 ++++++++++++++++++
 package.json                                  |   3 +
 21 files changed, 874 insertions(+), 28 deletions(-)
 create mode 100644 app/(platform)/map/layout.tsx
 create mode 100644 app/(platform)/map/page.tsx
 create mode 100644 app/(platform)/notes/[noteId]/note-editor.tsx
 create mode 100644 components/ui/menubar.tsx
 create mode 100644 helpers/notes/addTag.ts
 create mode 100644 helpers/notes/connectNotes.ts
 create mode 100644 helpers/notes/disconnectNotes.ts
 create mode 100644 helpers/notes/removeTag.ts
 create mode 100644 helpers/notes/updateNoteContent.ts
 create mode 100644 helpers/notes/updateNoteTitle.ts

diff --git a/app/(platform)/dashboard/page.tsx b/app/(platform)/dashboard/page.tsx
index fcca5a7..d7ce7ba 100644
--- a/app/(platform)/dashboard/page.tsx
+++ b/app/(platform)/dashboard/page.tsx
@@ -7,9 +7,12 @@ export const metadata: Metadata = {
 
 export default function Home() {
   return (
-    <main>
-      <h1>Dashboard</h1>
-      <p>hi</p>
+    <main className="px-6 py-4">
+      <h2>Dashboard</h2>
+      <p>
+        Welcome to your dashboard. This is where you can start working on your
+        ideas. You can create new notes, view your recent notes, and more.
+      </p>
     </main>
   );
 }
diff --git a/app/(platform)/layout.tsx b/app/(platform)/layout.tsx
index 1d90566..87ec0b6 100644
--- a/app/(platform)/layout.tsx
+++ b/app/(platform)/layout.tsx
@@ -8,7 +8,7 @@ export default function RootLayout({
   return (
     <div className="flex h-screen divide-x">
       <SideNav />
-      <div className="w-full p-4">{children}</div>
+      <div className="w-full">{children}</div>
     </div>
   );
 }
diff --git a/app/(platform)/map/layout.tsx b/app/(platform)/map/layout.tsx
new file mode 100644
index 0000000..d6f09e4
--- /dev/null
+++ b/app/(platform)/map/layout.tsx
@@ -0,0 +1,45 @@
+import { Metadata } from "next";
+
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarTrigger,
+} from "@/components/ui/menubar";
+
+export const metadata: Metadata = {
+  title: "Map",
+  description: "Map",
+};
+
+export default function MapLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="relative h-screen w-full">
+      {children}
+      <div className="absolute bottom-6 left-1/2 -translate-x-1/2">
+        <Menubar>
+          <MenubarMenu>
+            <MenubarTrigger>File</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>Save raster output</MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+          <MenubarMenu>
+            <MenubarTrigger>View</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>2D</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>3D</MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(platform)/map/page.tsx b/app/(platform)/map/page.tsx
new file mode 100644
index 0000000..77c026d
--- /dev/null
+++ b/app/(platform)/map/page.tsx
@@ -0,0 +1,7 @@
+export default function MapPage() {
+  return (
+    <main>
+      <h2>Map</h2>
+    </main>
+  );
+}
diff --git a/app/(platform)/notes/[noteId]/note-editor.tsx b/app/(platform)/notes/[noteId]/note-editor.tsx
new file mode 100644
index 0000000..1ce3c23
--- /dev/null
+++ b/app/(platform)/notes/[noteId]/note-editor.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { TrashIcon } from "@radix-ui/react-icons";
+import debounce from "lodash.debounce";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { deleteNote } from "@/helpers/notes/deleteNote";
+import { getNote } from "@/helpers/notes/getNote";
+import { updateNoteContent } from "@/helpers/notes/updateNoteContent";
+import { updateNoteTitle } from "@/helpers/notes/updateNoteTitle";
+
+type Props = {
+  note: NonNullable<Awaited<ReturnType<typeof getNote>>>; // I love TS
+};
+
+const debounceDelay = 500;
+const debouncedUpdateNoteTitle = debounce(updateNoteTitle, debounceDelay);
+const debouncedUpdateNoteContent = debounce(updateNoteContent, debounceDelay);
+
+export default function NoteEditor({ note }: Props) {
+  const [title, setTitle] = useState(note.title);
+  const [content, setContent] = useState(note.content);
+
+  const router = useRouter();
+
+  async function handleDeleteNote() {
+    const deletedNote = await deleteNote(note.id);
+    if (!deletedNote) {
+      alert("Failed to delete note"); // TODO: better error handling with a toast
+      return;
+    }
+
+    router.push("/notes");
+  }
+
+  return (
+    <div className="flex h-full min-h-screen divide-x">
+      <div className="flex w-full flex-col gap-6 p-6">
+        <input
+          className="text-4xl font-bold outline-none"
+          value={title}
+          onChange={(e) => {
+            setTitle(e.target.value);
+            debouncedUpdateNoteTitle(note.id, {
+              title: e.target.value,
+            });
+          }}
+        />
+        <textarea
+          className="h-96 resize-none text-lg outline-none"
+          value={content}
+          placeholder="Write your note here..."
+          onChange={(e) => {
+            setContent(e.target.value);
+            debouncedUpdateNoteContent(note.id, {
+              content: e.target.value,
+            });
+          }}
+        />
+      </div>
+      <div className="flex w-80 flex-col items-stretch gap-4 bg-slate-100/50 p-6">
+        <span className="block text-sm text-slate-400">Note actions</span>
+        <Button
+          className="w-full justify-start"
+          variant={"destructive"}
+          onClick={handleDeleteNote}
+        >
+          <TrashIcon className="mr-3" />
+          Delete note
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(platform)/notes/[noteId]/page.tsx b/app/(platform)/notes/[noteId]/page.tsx
index 9d3de67..e5fa7c5 100644
--- a/app/(platform)/notes/[noteId]/page.tsx
+++ b/app/(platform)/notes/[noteId]/page.tsx
@@ -1,25 +1,43 @@
+import { Metadata } from "next";
 import { redirect } from "next/navigation";
 
 import { getNote } from "@/helpers/notes/getNote";
 
-export default async function EditNotePage({
-  params,
-}: {
+import NoteEditor from "./note-editor";
+
+type Props = {
   params: { noteId: string };
-}) {
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { noteId } = params;
   const note = await getNote(noteId);
 
   if (!note) {
+    return {
+      title: "Note not found",
+    };
+  }
+
+  return {
+    title: `Edit note: ${note.title}`,
+  };
+}
+
+export default async function EditNotePage({ params }: Props) {
+  const { noteId } = params;
+  const note = await getNote(noteId);
+
+  if (!note || note.deleted) {
     redirect("/notes");
   }
 
   return (
     <main>
-      <h1>Edit note</h1>
-      <pre>
-        <code>{JSON.stringify(note, null, 2)}</code>
-      </pre>
+      <NoteEditor note={note} />
     </main>
   );
 }
+
+export const dynamic = "force-dynamic";
+export const fetchCache = "force-no-store";
diff --git a/app/(platform)/notes/new/route.ts b/app/(platform)/notes/new/route.ts
index 536a994..6aca9a8 100644
--- a/app/(platform)/notes/new/route.ts
+++ b/app/(platform)/notes/new/route.ts
@@ -28,7 +28,7 @@ export async function GET() {
     const newNote = await prisma.note.create({
       data: {
         title: "New note",
-        content: "Start writing here...",
+        content: "",
         authorId: dbUser.id,
       },
     });
diff --git a/app/(platform)/notes/page.tsx b/app/(platform)/notes/page.tsx
index a0cee3e..b3c114d 100644
--- a/app/(platform)/notes/page.tsx
+++ b/app/(platform)/notes/page.tsx
@@ -1,8 +1,6 @@
-import { CrossCircledIcon } from "@radix-ui/react-icons";
-import { Edit2Icon, Edit3Icon } from "lucide-react";
+import { Metadata } from "next";
 import Link from "next/link";
 
-import { Button } from "@/components/ui/button";
 import {
   Table,
   TableBody,
@@ -14,30 +12,40 @@ import {
 } from "@/components/ui/table";
 import { getAllNotes } from "@/helpers/notes/getAllNotes";
 
+export const metadata: Metadata = {
+  title: "All notes",
+};
+
 export default async function AllNotesPage() {
   const notes = await getAllNotes();
 
   return (
-    <main>
+    <main className="px-6 py-4">
       <Table>
         <TableCaption>A list of your recent notes.</TableCaption>
         <TableHeader>
           <TableRow>
-            <TableHead className="w-[100px]">Title</TableHead>
+            <TableHead className="w-[200px]">Title</TableHead>
             <TableHead className="w-[300px]">Snippet</TableHead>
             <TableHead className="w-[200px]">Tags</TableHead>
             <TableHead className="text-right">Updated</TableHead>
           </TableRow>
         </TableHeader>
-        <TableBody>
+        <TableBody className="whitespace-nowrap">
           {notes?.map((note) => (
             <TableRow key={note.id}>
               <TableCell>
-                <Link href={`/notes/${note.id}`}>{note.title}</Link>
+                <Link href={`/notes/${note.id}`}>
+                  {note.title.length > 20
+                    ? note.title.slice(0, 20) + "..."
+                    : note.title}
+                </Link>
               </TableCell>
               <TableCell>
                 <Link href={`/notes/${note.id}`}>
-                  {note.content.slice(0, 50)}
+                  {note.content.length > 50
+                    ? note.content.slice(0, 50) + "..."
+                    : note.content}
                 </Link>
               </TableCell>
               <TableCell>
@@ -55,3 +63,5 @@ export default async function AllNotesPage() {
     </main>
   );
 }
+export const dynamic = "force-dynamic";
+export const fetchCache = "force-no-store";
diff --git a/app/(platform)/side-nav.tsx b/app/(platform)/side-nav.tsx
index ad550b5..7af390f 100644
--- a/app/(platform)/side-nav.tsx
+++ b/app/(platform)/side-nav.tsx
@@ -8,8 +8,8 @@ import SearchBar from "./search-bar";
 
 export default function SideNav() {
   return (
-    <aside className="flex h-full w-64 flex-col justify-between bg-slate-100/50 p-6">
-      <div className="flex flex-col items-stretch gap-4">
+    <aside className="flex h-full w-80 flex-col justify-between bg-slate-100/50 p-6">
+      <nav className="flex flex-col items-stretch gap-4">
         <SearchBar />
         {navItems.map((item) => (
           <Link key={item.href} href={item.href}>
@@ -19,7 +19,7 @@ export default function SideNav() {
             </Button>
           </Link>
         ))}
-      </div>
+      </nav>
       <div>
         <UserButton afterSignOutUrl="/" />
       </div>
diff --git a/components/ui/menubar.tsx b/components/ui/menubar.tsx
new file mode 100644
index 0000000..27da293
--- /dev/null
+++ b/components/ui/menubar.tsx
@@ -0,0 +1,243 @@
+"use client";
+
+/* eslint-disable react/prop-types */
+/* eslint-disable react/no-unknown-property */
+
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from "@radix-ui/react-icons";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const MenubarMenu = MenubarPrimitive.Menu;
+
+const MenubarGroup = MenubarPrimitive.Group;
+
+const MenubarPortal = MenubarPrimitive.Portal;
+
+const MenubarSub = MenubarPrimitive.Sub;
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-9 items-center space-x-1 rounded-md border border-slate-200 bg-white p-1 shadow-sm dark:border-slate-800 dark:bg-slate-950",
+      className
+    )}
+    {...props}
+  />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-slate-100 focus:text-slate-900 data-[state=open]:bg-slate-100 data-[state=open]:text-slate-900 dark:focus:bg-slate-800 dark:focus:text-slate-50 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-50",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[state=open]:bg-slate-100 data-[state=open]:text-slate-900 dark:focus:bg-slate-800 dark:focus:text-slate-50 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-lg dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-md dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+);
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className)}
+    {...props}
+  />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-slate-500 dark:text-slate-400",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+MenubarShortcut.displayname = "MenubarShortcut";
+
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+};
diff --git a/helpers/notes/addTag.ts b/helpers/notes/addTag.ts
new file mode 100644
index 0000000..c87cc8e
--- /dev/null
+++ b/helpers/notes/addTag.ts
@@ -0,0 +1,32 @@
+"use server";
+
+import { prisma } from "@/lib/db";
+
+export async function addTag(noteId: string, tagName: string) {
+  const convertedTagName = tagName.toLowerCase().split(" ").join("-");
+
+  try {
+    let tag = await prisma.tag.findFirst({
+      where: { name: convertedTagName },
+    });
+
+    if (!tag) {
+      tag = await prisma.tag.create({
+        data: { name: convertedTagName },
+      });
+    }
+
+    const tagId = tag.id;
+
+    return await prisma.note.update({
+      where: { id: noteId },
+      data: {
+        tags: {
+          connect: { id: tagId },
+        },
+      },
+    });
+  } catch (error) {
+    return null;
+  }
+}
diff --git a/helpers/notes/connectNotes.ts b/helpers/notes/connectNotes.ts
new file mode 100644
index 0000000..65eb6ab
--- /dev/null
+++ b/helpers/notes/connectNotes.ts
@@ -0,0 +1,18 @@
+"use server";
+
+import { prisma } from "@/lib/db";
+
+export async function connectNotes(note1Id: string, note2Id: string) {
+  try {
+    return await prisma.note.update({
+      where: { id: note1Id },
+      data: {
+        relatedNotes: {
+          connect: { id: note2Id },
+        },
+      },
+    });
+  } catch (error) {
+    return null;
+  }
+}
diff --git a/helpers/notes/deleteNote.ts b/helpers/notes/deleteNote.ts
index 0ff83c6..437ffc9 100644
--- a/helpers/notes/deleteNote.ts
+++ b/helpers/notes/deleteNote.ts
@@ -1,6 +1,7 @@
 "use server";
 
 import { auth } from "@clerk/nextjs";
+import { revalidatePath } from "next/cache";
 
 import { prisma } from "@/lib/db";
 
@@ -28,5 +29,8 @@ export async function deleteNote(noteId: string) {
     return note;
   } catch (error) {
     return null;
+  } finally {
+    revalidatePath("/notes");
+    revalidatePath(`/notes/${noteId}`);
   }
 }
diff --git a/helpers/notes/disconnectNotes.ts b/helpers/notes/disconnectNotes.ts
new file mode 100644
index 0000000..3632ca5
--- /dev/null
+++ b/helpers/notes/disconnectNotes.ts
@@ -0,0 +1,18 @@
+"use server";
+
+import { prisma } from "@/lib/db";
+
+export async function disconnectNotes(note1Id: string, note2Id: string) {
+  try {
+    return await prisma.note.update({
+      where: { id: note1Id },
+      data: {
+        relatedNotes: {
+          disconnect: { id: note2Id },
+        },
+      },
+    });
+  } catch (error) {
+    return null;
+  }
+}
diff --git a/helpers/notes/getAllNotes.ts b/helpers/notes/getAllNotes.ts
index 8329774..cefc805 100644
--- a/helpers/notes/getAllNotes.ts
+++ b/helpers/notes/getAllNotes.ts
@@ -1,6 +1,5 @@
-"use server";
-
 import { auth } from "@clerk/nextjs";
+import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 
 import { prisma } from "@/lib/db";
@@ -31,5 +30,7 @@ export async function getAllNotes() {
     return notes;
   } catch (error) {
     return null;
+  } finally {
+    revalidatePath("/notes");
   }
 }
diff --git a/helpers/notes/getNote.ts b/helpers/notes/getNote.ts
index b432dbd..6835054 100644
--- a/helpers/notes/getNote.ts
+++ b/helpers/notes/getNote.ts
@@ -1,5 +1,3 @@
-"use server";
-
 import { auth } from "@clerk/nextjs";
 
 import { prisma } from "@/lib/db";
diff --git a/helpers/notes/removeTag.ts b/helpers/notes/removeTag.ts
new file mode 100644
index 0000000..45dcd49
--- /dev/null
+++ b/helpers/notes/removeTag.ts
@@ -0,0 +1,18 @@
+"use server";
+
+import { prisma } from "@/lib/db";
+
+export async function removeTag(noteId: string, tagName: string) {
+  try {
+    return await prisma.note.update({
+      where: { id: noteId },
+      data: {
+        tags: {
+          deleteMany: { name: tagName },
+        },
+      },
+    });
+  } catch (error) {
+    return null;
+  }
+}
diff --git a/helpers/notes/updateNoteContent.ts b/helpers/notes/updateNoteContent.ts
new file mode 100644
index 0000000..a618b36
--- /dev/null
+++ b/helpers/notes/updateNoteContent.ts
@@ -0,0 +1,25 @@
+"use server";
+
+import { Prisma } from "@prisma/client";
+import { revalidatePath } from "next/cache";
+
+import { prisma } from "@/lib/db";
+
+type NoteData = Prisma.NoteCreateInput;
+
+export async function updateNoteContent(
+  noteId: string,
+  data: Pick<NoteData, "content">
+) {
+  try {
+    return await prisma.note.update({
+      where: { id: noteId },
+      data,
+    });
+  } catch (error) {
+    return null;
+  } finally {
+    revalidatePath("/notes");
+    revalidatePath(`/notes/${noteId}`);
+  }
+}
diff --git a/helpers/notes/updateNoteTitle.ts b/helpers/notes/updateNoteTitle.ts
new file mode 100644
index 0000000..deeb4e4
--- /dev/null
+++ b/helpers/notes/updateNoteTitle.ts
@@ -0,0 +1,25 @@
+"use server";
+
+import { Prisma } from "@prisma/client";
+import { revalidatePath } from "next/cache";
+
+import { prisma } from "@/lib/db";
+
+type NoteData = Prisma.NoteCreateInput;
+
+export async function updateNoteTitle(
+  noteId: string,
+  data: Pick<NoteData, "title">
+) {
+  try {
+    return await prisma.note.update({
+      where: { id: noteId },
+      data,
+    });
+  } catch (error) {
+    return null;
+  } finally {
+    revalidatePath("/notes");
+    revalidatePath(`/notes/${noteId}`);
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index 59c90d1..a49fe3c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,10 +12,12 @@
         "@prisma/client": "^5.10.2",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-menubar": "^1.0.4",
         "@radix-ui/react-slot": "^1.0.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "cmdk": "^1.0.0",
+        "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.348.0",
         "next": "14.1.2",
         "react": "^18",
@@ -24,6 +26,7 @@
         "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
+        "@types/lodash.debounce": "^4.0.9",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -1187,6 +1190,40 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.1"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
+      "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -1624,6 +1661,55 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
+      "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+      "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
@@ -1694,6 +1780,23 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+      "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
@@ -1789,6 +1892,110 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.6.tgz",
+      "integrity": "sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.0.4.tgz",
+      "integrity": "sha512-bHgUo9gayKZfaQcWSSLr++LyS0rgh+MvD89DE4fJ6TkGHvjHgPaBZf44hdka7ogOxIOdj9163J+5xL2Dn4qzzg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-menu": "2.0.6",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
+      "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-rect": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
@@ -1859,6 +2066,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+      "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
@@ -1947,6 +2185,50 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
+      "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+      "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
+      "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.12.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.1.tgz",
@@ -2255,6 +2537,21 @@
       "resolved": "https://registry.npmjs.org/@types/keygrip/-/keygrip-1.0.6.tgz",
       "integrity": "sha512-lZuNAY9xeJt7Bx4t4dx0rYCDqGPW8RXhQZK1td7d4H6E9zYbLoOtjBvfwdTKpsyxQI/2jv+armjX/RW+ZNpXOQ=="
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.202",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
+      "dev": true
+    },
+    "node_modules/@types/lodash.debounce": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.9.tgz",
+      "integrity": "sha512-Ma5JcgTREwpLRwMM+XwBR7DaWe96nC38uCBDFKZWbNKD+osjVzdpnUSwBcqCptrp16sSOLBAUb50Car5I0TCsQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@@ -5847,6 +6144,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/package.json b/package.json
index 376a4d4..1bab8c7 100644
--- a/package.json
+++ b/package.json
@@ -16,10 +16,12 @@
     "@prisma/client": "^5.10.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-menubar": "^1.0.4",
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",
+    "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.348.0",
     "next": "14.1.2",
     "react": "^18",
@@ -28,6 +30,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",