refactor: removed redundant & optimized code

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Bookmark/ViewAllBookmarks/BookmarkListButton.tsx

@@ -21,31 +21,31 @@ const BookmarkListButton = ({
 
   return (
     <div
-      className="flex w-60"
+      className="flex h-[40px] w-60 justify-between hover:bg-slate-400 dark:hover:bg-slate-600 "
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       key={bookmark.id}
     >
-      <Button
-        className="w-50 align-center flex h-[40px] h-full w-full cursor-pointer justify-between truncate p-0 pl-3 pr-1 text-left"
-        style={{ display: 'block' }}
+      <button
+        type="button"
+        className="cursor-default truncate pl-3"
         onClick={() => handleBookmarkClick(bookmark.address)}
       >
         {bookmark.name}
-      </Button>
-      <Button
-        className={cx('flex cursor-pointer items-center px-2', {
+      </button>
+      <button
+        type="button"
+        className={cx('ml-1 flex shrink-0 items-center justify-center px-2', {
           invisible: !isHovered,
           visible: isHovered,
         })}
-        style={{ display: 'block' }}
         onClick={() => {
           setCurrentBookmark(bookmark);
           setOpenFlyout(true);
         }}
       >
         <Icon icon="ic:sharp-edit" />
-      </Button>
+      </button>
     </div>
   );
 };

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Bookmark/ViewAllBookmarks/index.tsx

@@ -32,14 +32,14 @@ const ViewAllBookmarks = ({ bookmarks, handleBookmarkFlyout }: Props) => {
       <div className="absolute top-[179px] right-[322px] z-50 flex max-h-[60vh] min-h-min flex-col overflow-x-auto overflow-y-auto rounded border bg-white focus:outline-none dark:bg-slate-900 dark:ring-white dark:!ring-opacity-40">
         {bookmarks.map((bookmark) => {
           return (
-            <>
+            <div key={bookmark.id}>
               <BookmarkListButton
                 bookmark={bookmark}
                 handleBookmarkClick={handleBookmarkClick}
                 setCurrentBookmark={setCurrentBookmark}
                 setOpenFlyout={setOpenFlyout}
               />
-            </>
+            </div>
           );
         })}
         {!areBookmarksPresent && (
@@ -48,7 +48,7 @@ const ViewAllBookmarks = ({ bookmarks, handleBookmarkFlyout }: Props) => {
           </Button>
         )}
       </div>
-      <div className="absolute right-[565px] top-[179px] border">
+      <div className="absolute right-[565px] top-[179px]">
         {openFlyout && (
           <BookmarkFlyout
             bookmark={currentBookmark}

desktop-app/src/renderer/components/ToolBar/Menu/index.tsx

@@ -1,5 +1,4 @@
 import { Icon } from '@iconify/react';
-import { useEffect, useState } from 'react';
 import { useDetectClickOutside } from 'react-detect-click-outside';
 import Button from 'renderer/components/Button';
 import { useDispatch, useSelector } from 'react-redux';
@@ -7,35 +6,28 @@ import { closeMenuFlyout, selectMenuFlyout } from 'renderer/store/features/ui';
 import MenuFlyout from './Flyout';
 
 const Menu = () => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
   const dispatch = useDispatch();
-  const menuFlyout = useSelector(selectMenuFlyout);
+  const isMenuFlyoutOpen = useSelector(selectMenuFlyout);
 
   const ref = useDetectClickOutside({
     onTriggered: () => {
-      if (!isOpen) {
+      if (!isMenuFlyoutOpen) {
         return;
       }
-      setIsOpen(false);
       dispatch(closeMenuFlyout(false));
     },
   });
 
   const handleFlyout = () => {
-    setIsOpen(!isOpen);
-    dispatch(closeMenuFlyout(!isOpen));
+    dispatch(closeMenuFlyout(!isMenuFlyoutOpen));
   };
 
-  useEffect(() => {
-    setIsOpen(menuFlyout);
-  }, [menuFlyout]);
-
   return (
     <div className="relative flex items-center" ref={ref}>
-      <Button onClick={handleFlyout} isActive={isOpen}>
+      <Button onClick={handleFlyout} isActive={isMenuFlyoutOpen}>
         <Icon icon="carbon:overflow-menu-vertical" />
       </Button>
-      <div style={{ visibility: isOpen ? 'visible' : 'hidden' }}>
+      <div style={{ visibility: isMenuFlyoutOpen ? 'visible' : 'hidden' }}>
         <MenuFlyout />
       </div>
     </div>