refactor(frontend): update AttachmentViewer dialog

frontend/src/components/inbox/components/AttachmentViewer.tsx

@@ -7,11 +7,10 @@
  */
 
 import DownloadIcon from "@mui/icons-material/Download";
-import { Box, Button, Dialog, DialogContent, Typography } from "@mui/material";
+import { Box, Button, Typography } from "@mui/material";
 import { FC } from "react";
 
-import { DialogTitle } from "@/app-components/dialogs";
-import { useDialog } from "@/hooks/useDialog";
+import { useDialogs } from "@/hooks/useDialogs";
 import { useGetAttachmentMetadata } from "@/hooks/useGetAttachmentMetadata";
 import { useTranslate } from "@/hooks/useTranslate";
 import {
@@ -21,6 +20,8 @@ import {
   StdOutgoingAttachmentMessage,
 } from "@/types/message.types";
 
+import { AttachmentViewerFormDialog } from "./AttachmentViewerFormDialog";
+
 interface AttachmentInterface {
   name?: string;
   url?: string;
@@ -28,35 +29,27 @@ interface AttachmentInterface {
 
 const componentMap: { [key in FileType]: FC<AttachmentInterface> } = {
   [FileType.image]: ({ url }: AttachmentInterface) => {
-    const dialogCtl = useDialog(false);
+    const dialogs = useDialogs();
 
     if (url)
       return (
-        <>
-          <Dialog {...dialogCtl}>
-            <DialogTitle onClose={dialogCtl.closeDialog}>Image</DialogTitle>
-            <DialogContent>
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img
-                width="auto"
-                height={800}
-                style={{ objectFit: "contain", cursor: "pointer" }}
-                alt={url}
-                src={url}
-                onClick={dialogCtl.openDialog}
-              />
-            </DialogContent>
-          </Dialog>
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            width="auto"
-            height={200}
-            style={{ objectFit: "contain", cursor: "pointer" }}
-            alt={url}
-            src={url}
-            onClick={dialogCtl.openDialog}
-          />
-        </>
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          width="auto"
+          height={200}
+          style={{ objectFit: "contain", cursor: "pointer" }}
+          alt={url}
+          src={url}
+          onClick={() =>
+            dialogs.open(
+              AttachmentViewerFormDialog,
+              { url },
+              {
+                hasButtons: false,
+              },
+            )
+          }
+        />
       );
 
     return (

frontend/src/components/inbox/components/AttachmentViewerForm.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright © 2025 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { FC, Fragment } from "react";
+
+import { ComponentFormProps } from "@/types/common/dialogs.types";
+
+export type AttachmentViewerFormData = {
+  row?: never;
+  url?: string;
+  name?: string;
+};
+
+export const AttachmentViewerForm: FC<
+  ComponentFormProps<AttachmentViewerFormData>
+> = ({ data, Wrapper = Fragment, WrapperProps }) => {
+  return (
+    <Wrapper {...WrapperProps}>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        width="auto"
+        height={800}
+        style={{
+          cursor: "pointer",
+          objectFit: "contain",
+        }}
+        alt={data?.url}
+        src={data?.url}
+      />
+    </Wrapper>
+  );
+};

frontend/src/components/inbox/components/AttachmentViewerFormDialog.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright © 2025 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { GenericFormDialog } from "@/app-components/dialogs";
+import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
+
+import {
+  AttachmentViewerForm,
+  AttachmentViewerFormData,
+} from "./AttachmentViewerForm";
+
+export const AttachmentViewerFormDialog = <
+  T extends AttachmentViewerFormData = AttachmentViewerFormData,
+>(
+  props: ComponentFormDialogProps<T>,
+) => (
+  <GenericFormDialog<T>
+    Form={AttachmentViewerForm}
+    rowKey="row"
+    addText="label.image"
+    {...props}
+  />
+);