From d71c1be4609b0efcc32d2e9755b68170e4c57429 Mon Sep 17 00:00:00 2001
From: DevMirza <53424436+Zaid-maker@users.noreply.github.com>
Date: Wed, 21 Feb 2024 23:39:53 +0500
Subject: [PATCH 01/14] add Dropdown Menu and Alert

---
 components/ui/alert-dialog.tsx  | 141 ++++++++++++++++++++++
 components/ui/dropdown-menu.tsx | 200 ++++++++++++++++++++++++++++++++
 package-lock.json               | 173 +++++++++++++++++++++++++++
 package.json                    |   2 +
 4 files changed, 516 insertions(+)
 create mode 100644 components/ui/alert-dialog.tsx
 create mode 100644 components/ui/dropdown-menu.tsx

diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..25e7b47
--- /dev/null
+++ b/components/ui/alert-dialog.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..f69a0d6
--- /dev/null
+++ b/components/ui/dropdown-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.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-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.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 transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.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 transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/package-lock.json b/package-lock.json
index f4ecf11..4683271 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,9 @@
       "version": "0.1.0",
       "dependencies": {
         "@clerk/nextjs": "^4.29.6",
+        "@radix-ui/react-alert-dialog": "^1.0.5",
         "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-tooltip": "^1.0.7",
         "class-variance-authority": "^0.7.0",
@@ -968,6 +970,34 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.0.5.tgz",
+      "integrity": "sha512-OrVIOcZL0tl6xibeuGt5/+UxoT2N27KCFOPjFyfXMnchxSHZ/OW7cCX2nGlIYJrbHK/fczPcFzAwvNBB6XBNMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dialog": "1.0.5",
+        "@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-arrow": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
@@ -991,6 +1021,32 @@
         }
       }
     },
+    "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",
@@ -1061,6 +1117,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",
@@ -1088,6 +1161,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz",
+      "integrity": "sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "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-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-focus-guards": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
@@ -1148,6 +1250,46 @@
         }
       }
     },
+    "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-popper": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
@@ -1250,6 +1392,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",
diff --git a/package.json b/package.json
index 32d5178..c086fe4 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
   },
   "dependencies": {
     "@clerk/nextjs": "^4.29.6",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",

From bde9ad1e312d1d034f5ff787f8bbf9951da57fff Mon Sep 17 00:00:00 2001
From: DevMirza <53424436+Zaid-maker@users.noreply.github.com>
Date: Wed, 21 Feb 2024 23:42:04 +0500
Subject: [PATCH 02/14] add zustand package

---
 package-lock.json | 30 +++++++++++++++++++++++++++++-
 package.json      |  3 ++-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4683271..1e54e5b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,8 @@
         "sonner": "^1.4.0",
         "tailwind-merge": "^2.2.1",
         "tailwindcss-animate": "^1.0.7",
-        "usehooks-ts": "^2.14.0"
+        "usehooks-ts": "^2.14.0",
+        "zustand": "^4.5.1"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -6669,6 +6670,33 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.1.tgz",
+      "integrity": "sha512-XlauQmH64xXSC1qGYNv00ODaQ3B+tNPoy22jv2diYiP4eoDKr9LA+Bh5Bc3gplTrFdb6JVI+N4kc1DZ/tbtfPg==",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index c086fe4..ac1d773 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,8 @@
     "sonner": "^1.4.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
-    "usehooks-ts": "^2.14.0"
+    "usehooks-ts": "^2.14.0",
+    "zustand": "^4.5.1"
   },
   "devDependencies": {
     "@types/node": "^20",

From d8b0a0f5800329127e7d28f05448267c549f1b24 Mon Sep 17 00:00:00 2001
From: DevMirza <53424436+Zaid-maker@users.noreply.github.com>
Date: Wed, 21 Feb 2024 23:46:24 +0500
Subject: [PATCH 03/14] create Actions component

---
 components/actions.tsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 components/actions.tsx

diff --git a/components/actions.tsx b/components/actions.tsx
new file mode 100644
index 0000000..3a20c81
--- /dev/null
+++ b/components/actions.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { DropdownMenuContentProps } from "@radix-ui/react-dropdown-menu";
+import React from "react";
+
+interface ActionsProps {
+  children: React.ReactNode;
+  side?: DropdownMenuContentProps["side"];
+  sideOffset?: DropdownMenuContentProps["sideOffset"];
+  id: string;
+  title: string;
+}
+
+export const Actions = ({
+  children,
+  side,
+  sideOffset,
+  id,
+  title,
+}: ActionsProps) => {
+  return <div>Actions</div>;
+};

From 345736a1cc2443054f150412fb7b1d76198d9596 Mon Sep 17 00:00:00 2001
From: DevMirza <53424436+Zaid-maker@users.noreply.github.com>
Date: Thu, 22 Feb 2024 23:03:33 +0500
Subject: [PATCH 04/14] add Actions for cards

---
 app/(dashboard)/_components/board-card/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/(dashboard)/_components/board-card/index.tsx b/app/(dashboard)/_components/board-card/index.tsx
index db9e573..6f8703d 100644
--- a/app/(dashboard)/_components/board-card/index.tsx
+++ b/app/(dashboard)/_components/board-card/index.tsx
@@ -10,6 +10,8 @@ import { Overlay } from "./overlay";
 import Image from "next/image";
 import Link from "next/link";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Actions } from "@/components/actions";
+import { MoreHorizontal } from "lucide-react";
 
 interface BoardCardProps {
   id: string;
@@ -60,7 +62,11 @@ export const BoardCard = ({
         <div className="relative flex-1 bg-amber-50">
           <Image src={imageUrl} alt={title} fill className="object-fit" />
           <Overlay />
-          {/*<Actions /> */}
+          <Actions id={id} title={title} side="right">
+            <button className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity px-3 py-2 outline-none">
+              <MoreHorizontal className="text-white opacity-75 hover:opacity-100 transition-opacity" />
+            </button>
+          </Actions>
         </div>
         <Footer
           isFavorite={isFavorite}

From a8daba3d4e71ff04d66a7d3b4868d05da9b0e870 Mon Sep 17 00:00:00 2001
From: DevMirza <53424436+Zaid-maker@users.noreply.github.com>
Date: Thu, 22 Feb 2024 23:18:54 +0500
Subject: [PATCH 05/14] update Action compoent

---
 components/actions.tsx | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/components/actions.tsx b/components/actions.tsx
index 3a20c81..1974283 100644
--- a/components/actions.tsx
+++ b/components/actions.tsx
@@ -1,7 +1,15 @@
 "use client";
 
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { DropdownMenuContentProps } from "@radix-ui/react-dropdown-menu";
+import { Link2, Pencil } from "lucide-react";
 import React from "react";
+import { toast } from "sonner";
 
 interface ActionsProps {
   children: React.ReactNode;
@@ -18,5 +26,31 @@ export const Actions = ({
   id,
   title,
 }: ActionsProps) => {
-  return <div>Actions</div>;
+  const onCopyLink = () => {
+    navigator.clipboard
+      .writeText(`${window.location.origin}/board/${id}`)
+      .then(() => toast.success("Link Copied"))
+      .catch(() => toast.error("Failed to copy board link"));
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+      <DropdownMenuContent
+        onClick={(e) => e.stopPropagation()}
+        side={side}
+        sideOffset={sideOffset}
+        className="w-60"
+      >
+        <DropdownMenuItem onClick={onCopyLink} className="p-3 cursor-pointer">
+          <Link2 className="h-4 w-4 mr-2" />
+          Copy board link
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => {}} className="p-3 cursor-pointer">
+          <Pencil className="h-4 w-4 mr-2" />
+          Rename
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
 };

From ff77cae59169bdea1228f92bfc8b731adf83a824 Mon Sep 17 00:00:00 2001
From: DevMirza <pzhafeez@gmail.com>
Date: Thu, 22 Feb 2024 18:51:45 +0000
Subject: [PATCH 06/14] add a get function for board

---
 convex/board.ts | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/convex/board.ts b/convex/board.ts
index e7439c9..5298fc5 100644
--- a/convex/board.ts
+++ b/convex/board.ts
@@ -1,5 +1,5 @@
 import { v } from "convex/values";
-import { mutation } from "./_generated/server";
+import { mutation, query } from "./_generated/server";
 
 const images = [
     "/placeholders/1.svg",
@@ -56,7 +56,9 @@ export const remove = mutation({
         const existingFavorite = await ctx.db
             .query("userFavorites")
             .withIndex("by_user_board", (q) =>
-                q.eq("userId", userId).eq("boardId", args.id)
+                q
+                    .eq("userId", userId)
+                    .eq("boardId", args.id)
             )
             .unique();
 
@@ -143,3 +145,12 @@ export const unfavorite = mutation({
         return board;
     },
 });
+
+export const get = query({
+    args: { id: v.id('boards') },
+    handler: async (ctx, args) => {
+        const board = ctx.db.get(args.id)
+
+        return board
+    },
+})

From c5799aa03dcea71cbda4350b8dbc11a97adb827c Mon Sep 17 00:00:00 2001
From: DevMirza <pzhafeez@gmail.com>
Date: Thu, 22 Feb 2024 19:04:29 +0000
Subject: [PATCH 07/14] add ConfirmDialog component for action

---
 components/actions.tsx        | 28 ++++++++++++++++++-
 components/confirm-dialog.tsx | 52 +++++++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 components/confirm-dialog.tsx

diff --git a/components/actions.tsx b/components/actions.tsx
index 1974283..038d54d 100644
--- a/components/actions.tsx
+++ b/components/actions.tsx
@@ -6,10 +6,14 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { api } from "@/convex/_generated/api";
+import { useApiMutation } from "@/hooks/use-api-mutation";
 import { DropdownMenuContentProps } from "@radix-ui/react-dropdown-menu";
-import { Link2, Pencil } from "lucide-react";
+import { Link2, Pencil, Trash } from "lucide-react";
 import React from "react";
 import { toast } from "sonner";
+import { ConfirmDialog } from "./confirm-dialog";
+import { Button } from "./ui/button";
 
 interface ActionsProps {
   children: React.ReactNode;
@@ -26,6 +30,8 @@ export const Actions = ({
   id,
   title,
 }: ActionsProps) => {
+  const { mutate, pending } = useApiMutation(api.board.remove);
+
   const onCopyLink = () => {
     navigator.clipboard
       .writeText(`${window.location.origin}/board/${id}`)
@@ -33,6 +39,12 @@ export const Actions = ({
       .catch(() => toast.error("Failed to copy board link"));
   };
 
+  const onDelete = () => {
+    mutate({ id })
+      .then(() => toast.success("Board deleted"))
+      .catch(() => toast.error("Failed to delete board"));
+  };
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
@@ -50,6 +62,20 @@ export const Actions = ({
           <Pencil className="h-4 w-4 mr-2" />
           Rename
         </DropdownMenuItem>
+        <ConfirmDialog
+          header="Delete board?"
+          description="This will delete the board and all of its contents."
+          disabled={false}
+          onConfirm={() => {}}
+        >
+          <Button
+            variant="ghost"
+            className="p-3 cursor-pointer text-sm w-full justify-start font-normal"
+          >
+            <Trash className="h-4 w-4 mr-2" />
+            Delete
+          </Button>
+        </ConfirmDialog>
       </DropdownMenuContent>
     </DropdownMenu>
   );
diff --git a/components/confirm-dialog.tsx b/components/confirm-dialog.tsx
new file mode 100644
index 0000000..b9e2fab
--- /dev/null
+++ b/components/confirm-dialog.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import React from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+
+interface ConfirmModalProps {
+  children: React.ReactNode;
+  onConfirm: () => void;
+  disabled?: boolean;
+  header: string;
+  description?: string;
+}
+
+export const ConfirmDialog = ({
+  children,
+  onConfirm,
+  disabled,
+  header,
+  description,
+}: ConfirmModalProps) => {
+  const handleConfirm = () => {
+    onConfirm();
+  };
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{header}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction disabled={disabled} onClick={handleConfirm}>
+            Confirm
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

From a3113a6316ca6a290c9f4a80e36f468e06c06999 Mon Sep 17 00:00:00 2001
From: DevMirza <pzhafeez@gmail.com>
Date: Thu, 22 Feb 2024 19:05:35 +0000
Subject: [PATCH 08/14] update

---
 components/actions.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/actions.tsx b/components/actions.tsx
index 038d54d..5d1a507 100644
--- a/components/actions.tsx
+++ b/components/actions.tsx
@@ -65,8 +65,8 @@ export const Actions = ({
         <ConfirmDialog
           header="Delete board?"
           description="This will delete the board and all of its contents."
-          disabled={false}
-          onConfirm={() => {}}
+          disabled={pending}
+          onConfirm={onDelete}
         >
           <Button
             variant="ghost"

From 9f4666c916b08633f9d05913005a27b6dc3f40de Mon Sep 17 00:00:00 2001
From: DevMirza <pzhafeez@gmail.com>
Date: Fri, 23 Feb 2024 19:27:47 +0000
Subject: [PATCH 09/14] update function

---
 convex/board.ts | 47 ++++++++++++++++++++++++++++++++++-------------
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/convex/board.ts b/convex/board.ts
index 5298fc5..46eb7eb 100644
--- a/convex/board.ts
+++ b/convex/board.ts
@@ -56,9 +56,7 @@ export const remove = mutation({
         const existingFavorite = await ctx.db
             .query("userFavorites")
             .withIndex("by_user_board", (q) =>
-                q
-                    .eq("userId", userId)
-                    .eq("boardId", args.id)
+                q.eq("userId", userId).eq("boardId", args.id)
             )
             .unique();
 
@@ -70,6 +68,33 @@ export const remove = mutation({
     },
 });
 
+export const update = mutation({
+    args: { id: v.id("boards"), title: v.string() },
+    handler: async (ctx, args) => {
+        const identity = await ctx.auth.getUserIdentity();
+
+        if (!identity) {
+            throw new Error("Unauthorized");
+        }
+
+        const title = args.title.trim();
+
+        if (!title) {
+            throw new Error("Title is required");
+        }
+
+        if (title.length > 60) {
+            throw new Error("Title cannot be longer than 60 characters");
+        }
+
+        const board = await ctx.db.patch(args.id, {
+            title: args.title,
+        });
+
+        return board;
+    },
+});
+
 export const favorite = mutation({
     args: { id: v.id("boards"), orgId: v.string() },
     handler: async (ctx, args) => {
@@ -90,9 +115,7 @@ export const favorite = mutation({
         const existingFavorite = await ctx.db
             .query("userFavorites")
             .withIndex("by_user_board", (q) =>
-                q
-                    .eq("userId", userId)
-                    .eq("boardId", board._id)
+                q.eq("userId", userId).eq("boardId", board._id)
             )
             .unique();
 
@@ -130,9 +153,7 @@ export const unfavorite = mutation({
         const existingFavorite = await ctx.db
             .query("userFavorites")
             .withIndex("by_user_board", (q) =>
-                q
-                    .eq("userId", userId)
-                    .eq("boardId", board._id)
+                q.eq("userId", userId).eq("boardId", board._id)
             )
             .unique();
 
@@ -147,10 +168,10 @@ export const unfavorite = mutation({
 });
 
 export const get = query({
-    args: { id: v.id('boards') },
+    args: { id: v.id("boards") },
     handler: async (ctx, args) => {
-        const board = ctx.db.get(args.id)
+        const board = ctx.db.get(args.id);
 
-        return board
+        return board;
     },
-})
+});

From b74c87415d3001ab810fd62b189d1cd370103cbf Mon Sep 17 00:00:00 2001
From: DevMirza <pzhafeez@gmail.com>
Date: Fri, 23 Feb 2024 19:50:43 +0000
Subject: [PATCH 10/14] useRenameModal store function

---
 store/use-rename-modal.ts | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 store/use-rename-modal.ts

diff --git a/store/use-rename-modal.ts b/store/use-rename-modal.ts
new file mode 100644
index 0000000..7204eec
--- /dev/null
+++ b/store/use-rename-modal.ts
@@ -0,0 +1,25 @@
+import { create } from "zustand";
+
+const defaultValues = { id: "", title: "" };
+
+interface IRenameModal {
+    isOpen: boolean;
+    initialValues: typeof defaultValues;
+    onOpen: (id: string, title: string) => void;
+    onClose: () => void;
+}
+
+export const useRenameModal = create<IRenameModal>((set) => ({
+    isOpen: false,
+    onOpen: (id, title) =>
+        set({
+            isOpen: true,
+            initialValues: { id, title },
+        }),
+    onClose: () =>
+        set({
+            isOpen: false,
+            initialValues: defaultValues,
+        }),
+    initialValues: defaultValues,
+}));

From cbea12d4827b7e681731868ebe2aab10cf550ecd Mon Sep 17 00:00:00 2001
From: DevMirza <53424436+Zaid-maker@users.noreply.github.com>
Date: Tue, 27 Feb 2024 01:57:30 +0500
Subject: [PATCH 11/14] Update node.js.yml

---
 .github/workflows/node.js.yml | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index abd8e26..b11c1c9 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -22,5 +22,11 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: "npm"
       - run: npm ci
-      - run: npm run build
+      - name: Build
+        run: npm run build
         continue-on-error: true
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v4.0.1
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          slug: Zaid-maker/miro-boards

From 4d94d144427659edfc9cc718163bdfb422bd8762 Mon Sep 17 00:00:00 2001
From: DevMirza <53424436+Zaid-maker@users.noreply.github.com>
Date: Tue, 27 Feb 2024 02:01:33 +0500
Subject: [PATCH 12/14] Update node.js.yml

---
 .github/workflows/node.js.yml | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index b11c1c9..da48609 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -25,8 +25,3 @@ jobs:
       - name: Build
         run: npm run build
         continue-on-error: true
-      - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v4.0.1
-        with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          slug: Zaid-maker/miro-boards

From 9fb65473614f4ab84de4e06b87b9f55059d4b44f Mon Sep 17 00:00:00 2001
From: DevMirza <pzhafeez@gmail.com>
Date: Mon, 26 Feb 2024 20:41:28 +0000
Subject: [PATCH 13/14] Rename Modal

---
 app/layout.tsx                     |  2 ++
 components/modals/rename-modal.tsx | 40 ++++++++++++++++++++++++++++++
 providers/modal-provider.tsx       | 22 ++++++++++++++++
 3 files changed, 64 insertions(+)
 create mode 100644 components/modals/rename-modal.tsx
 create mode 100644 providers/modal-provider.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 4e36379..3226251 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { Toaster } from "@/components/ui/sonner";
+import { ModalProvider } from "@/providers/modal-provider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -21,6 +22,7 @@ export default function RootLayout({
       <body className={inter.className}>
         <ConvexClientProvider>
           <Toaster />
+          <ModalProvider />
           {children}
         </ConvexClientProvider>
       </body>
diff --git a/components/modals/rename-modal.tsx b/components/modals/rename-modal.tsx
new file mode 100644
index 0000000..31a9e58
--- /dev/null
+++ b/components/modals/rename-modal.tsx
@@ -0,0 +1,40 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useRenameModal } from "@/store/use-rename-modal";
+import { Input } from "@/components/ui/input";
+import { useState } from "react";
+import { useApiMutation } from "@/hooks/use-api-mutation";
+import { api } from "@/convex/_generated/api";
+
+export const RenameModal = () => {
+  const { mutate, pending } = useApiMutation(api.board.update);
+
+  const { isOpen, onClose, initialValues } = useRenameModal();
+
+  const [title, setTitle] = useState(initialValues.title);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit board title</DialogTitle>
+        </DialogHeader>
+        <DialogDescription>Enter a new title for this board</DialogDescription>
+        <form className="space-y-4">
+          <Input
+            disabled={pending}
+            required
+            maxLength={60}
+            value={title}
+            placeholder="Board title"
+          />
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/providers/modal-provider.tsx b/providers/modal-provider.tsx
new file mode 100644
index 0000000..3f27277
--- /dev/null
+++ b/providers/modal-provider.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { RenameModal } from "@/components/modals/rename-modal";
+import { useEffect, useState } from "react";
+
+export const ModalProvider = () => {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return (
+    <>
+      <RenameModal />
+    </>
+  );
+};

From b089069810dc007969d77c775a37962f5f36af36 Mon Sep 17 00:00:00 2001
From: DevMirza <pzhafeez@gmail.com>
Date: Wed, 28 Feb 2024 14:08:12 +0000
Subject: [PATCH 14/14] make them work

---
 components/actions.tsx             |  7 +++++-
 components/modals/rename-modal.tsx | 37 ++++++++++++++++++++++++++++--
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/components/actions.tsx b/components/actions.tsx
index 5d1a507..cc83873 100644
--- a/components/actions.tsx
+++ b/components/actions.tsx
@@ -14,6 +14,7 @@ import React from "react";
 import { toast } from "sonner";
 import { ConfirmDialog } from "./confirm-dialog";
 import { Button } from "./ui/button";
+import { useRenameModal } from "@/store/use-rename-modal";
 
 interface ActionsProps {
   children: React.ReactNode;
@@ -30,6 +31,7 @@ export const Actions = ({
   id,
   title,
 }: ActionsProps) => {
+  const { onOpen } = useRenameModal();
   const { mutate, pending } = useApiMutation(api.board.remove);
 
   const onCopyLink = () => {
@@ -58,7 +60,10 @@ export const Actions = ({
           <Link2 className="h-4 w-4 mr-2" />
           Copy board link
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => {}} className="p-3 cursor-pointer">
+        <DropdownMenuItem
+          onClick={() => onOpen(id, title)}
+          className="p-3 cursor-pointer"
+        >
           <Pencil className="h-4 w-4 mr-2" />
           Rename
         </DropdownMenuItem>
diff --git a/components/modals/rename-modal.tsx b/components/modals/rename-modal.tsx
index 31a9e58..281ec85 100644
--- a/components/modals/rename-modal.tsx
+++ b/components/modals/rename-modal.tsx
@@ -1,15 +1,19 @@
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
 import { useRenameModal } from "@/store/use-rename-modal";
 import { Input } from "@/components/ui/input";
-import { useState } from "react";
+import { FormEventHandler, useEffect, useState } from "react";
 import { useApiMutation } from "@/hooks/use-api-mutation";
 import { api } from "@/convex/_generated/api";
+import { Button } from "../ui/button";
+import { toast } from "sonner";
 
 export const RenameModal = () => {
   const { mutate, pending } = useApiMutation(api.board.update);
@@ -18,6 +22,24 @@ export const RenameModal = () => {
 
   const [title, setTitle] = useState(initialValues.title);
 
+  useEffect(() => {
+    setTitle(initialValues.title);
+  }, [initialValues.title]);
+
+  const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
+    e.preventDefault();
+
+    mutate({
+      id: initialValues.id,
+      title,
+    })
+      .then(() => {
+        toast.success("Board renamed");
+        onClose();
+      })
+      .catch(() => toast.error("Failed to rename board"));
+  };
+
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent>
@@ -25,14 +47,25 @@ export const RenameModal = () => {
           <DialogTitle>Edit board title</DialogTitle>
         </DialogHeader>
         <DialogDescription>Enter a new title for this board</DialogDescription>
-        <form className="space-y-4">
+        <form onSubmit={onSubmit} className="space-y-4">
           <Input
             disabled={pending}
             required
             maxLength={60}
             value={title}
+            onChange={(e) => setTitle(e.target.value)}
             placeholder="Board title"
           />
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button type="button" variant="outline">
+                Cancel
+              </Button>
+            </DialogClose>
+            <Button disabled={pending} type="submit">
+              Save
+            </Button>
+          </DialogFooter>
         </form>
       </DialogContent>
     </Dialog>