chore: update dialog event listener

common/version.go

@@ -10,7 +10,7 @@ import (
 var Version = "0.4.1"
 
 // DevVersion is the service current development version.
-var DevVersion = "0.4.1"
+var DevVersion = "0.4.2"
 
 func GetCurrentVersion(mode string) string {
 	if mode == "dev" {

web/src/components/Dialog/BaseDialog.tsx

+import { useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import { ANIMATION_DURATION } from "../../helpers/consts";
@@ -16,6 +17,20 @@ interface Props extends DialogConfig, DialogProps {
 const BaseDialog: React.FC<Props> = (props: Props) => {
   const { children, className, clickSpaceDestroy, destroy } = props;
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.code === "Escape") {
+        destroy();
+      }
+    };
+
+    document.body.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.body.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
   const handleSpaceClicked = () => {
     if (clickSpaceDestroy) {
       destroy();

web/src/components/Memo.tsx

@@ -200,7 +200,7 @@ const Memo: React.FC<Props> = (props: Props) => {
             <div className="more-action-btns-container">
               <div className="btns-container">
                 <div className="btn" onClick={handleTogglePinMemoBtnClick}>
-                  <Icon.MapPin className={`icon-img ${memo.pinned ? "" : "opacity-20"}`} />
+                  <Icon.Flag className={`icon-img ${memo.pinned ? "" : "opacity-20"}`} />
                   <span className="tip-text">{memo.pinned ? t("common.unpin") : t("common.pin")}</span>
                 </div>
                 <div className="btn" onClick={handleEditMemoClick}>

web/src/components/PreviewImageDialog.tsx

@@ -19,6 +19,10 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
     a.click();
   };
 
+  const handleImgContainerClick = () => {
+    destroy();
+  };
+
   return (
     <>
       <div className="btns-container">
@@ -29,8 +33,8 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
           <Icon.Download className="icon-img" />
         </button>
       </div>
-      <div className="img-container">
-        <img src={imgUrl} />
+      <div className="img-container" onClick={handleImgContainerClick}>
+        <img onClick={(e) => e.stopPropagation()} src={imgUrl} />
       </div>
     </>
   );