From 3207264fc13c275d6dcfbd2628cc6b3974ceeaed Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Mon, 7 Apr 2025 01:03:26 +0100
Subject: feat: Allow editing bookmark details

---
 .../web/components/dashboard/preview/ActionBar.tsx | 25 +++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

(limited to 'apps/web/components/dashboard/preview/ActionBar.tsx')

diff --git a/apps/web/components/dashboard/preview/ActionBar.tsx b/apps/web/components/dashboard/preview/ActionBar.tsx
index 86c86d5a..62d9c849 100644
--- a/apps/web/components/dashboard/preview/ActionBar.tsx
+++ b/apps/web/components/dashboard/preview/ActionBar.tsx
@@ -8,12 +8,13 @@ import {
 } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { useTranslation } from "@/lib/i18n/client";
-import { Trash2 } from "lucide-react";
+import { Pencil, Trash2 } from "lucide-react";
 
 import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
 import { useUpdateBookmark } from "@hoarder/shared-react/hooks/bookmarks";
 
 import DeleteBookmarkConfirmationDialog from "../bookmarks/DeleteBookmarkConfirmationDialog";
+import { EditBookmarkDialog } from "../bookmarks/EditBookmarkDialog";
 import { ArchivedActionIcon, FavouritedActionIcon } from "../bookmarks/icons";
 
 export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
@@ -21,6 +22,8 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
   const [deleteBookmarkDialogOpen, setDeleteBookmarkDialogOpen] =
     useState(false);
 
+  const [isEditBookmarkDialogOpen, setEditBookmarkDialogOpen] = useState(false);
+
   const onError = () => {
     toast({
       variant: "destructive",
@@ -48,6 +51,26 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
 
   return (
     <div className="flex items-center justify-center gap-3">
+      <Tooltip delayDuration={0}>
+        <EditBookmarkDialog
+          bookmark={bookmark}
+          open={isEditBookmarkDialogOpen}
+          setOpen={setEditBookmarkDialogOpen}
+        />
+
+        <TooltipTrigger asChild>
+          <Button
+            variant="none"
+            className="size-14 rounded-full bg-background"
+            onClick={() => {
+              setEditBookmarkDialogOpen(true);
+            }}
+          >
+            <Pencil />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">{t("actions.edit")}</TooltipContent>
+      </Tooltip>
       <Tooltip delayDuration={0}>
         <TooltipTrigger asChild>
           <ActionButton
-- 
cgit v1.2.3-70-g09d2

