Add client notification (#771)

* ClientNotification WIP * Test * ClientNotification WIP * Add client notification dialog and related functionality * Update ClientNotificationDialog.tsx --------- Co-authored-by: philon- <philon-@users.noreply.github.com>
2025-08-10 21:59:03 -04:00
parent 176d554ef9
commit 32f31cb502
8 changed files with 160 additions and 0 deletions
@@ -0,0 +1,72 @@
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
+import { useTranslation } from "react-i18next";
+
+export interface ClientNotificationDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const ClientNotificationDialog = ({
+  open,
+  onOpenChange,
+}: ClientNotificationDialogProps) => {
+  const { t } = useTranslation("dialog");
+  const { getClientNotification, removeClientNotification } = useDevice();
+
+  const localOnOpenChange = (open: boolean) => {
+    removeClientNotification(0);
+    if (!getClientNotification(0)) {
+      onOpenChange(open);
+    }
+  };
+
+  const dialogContent = (() => {
+    if (!getClientNotification(0)) {
+      return;
+    }
+
+    switch (getClientNotification(0)?.payloadVariant.case) {
+      // TODO: Add KeyVerification logic
+      /*case "keyVerificationNumberInform":
+        return <></>;
+      case "keyVerificationNumberRequest":
+        return <></>;
+      case "keyVerificationFinal":
+        return <></>;
+      case "duplicatedPublicKey":
+        return <></>;
+      case "lowEntropyKey":
+        return <></>;*/
+
+      default:
+        return (
+          <DialogHeader>
+            <DialogTitle>{t("clientNotification.title")}</DialogTitle>
+            <DialogDescription>
+              {t([
+                `clientNotification.${getClientNotification(0)?.message}`,
+                getClientNotification(0)?.message ?? "",
+              ])}
+            </DialogDescription>
+          </DialogHeader>
+        );
+    }
+  })();
+
+  return (
+    <Dialog open={open} onOpenChange={localOnOpenChange}>
+      <DialogContent>
+        <DialogClose />
+        {dialogContent}
+      </DialogContent>
+    </Dialog>
+  );
+};
@@ -1,3 +1,4 @@
+import { ClientNotificationDialog } from "@components/Dialog/ClientNotificationDialog/ClientNotificationDialog.tsx";
 import { DeleteMessagesDialog } from "@components/Dialog/DeleteMessagesDialog/DeleteMessagesDialog.tsx";
 import { DeviceNameDialog } from "@components/Dialog/DeviceNameDialog.tsx";
 import { ImportDialog } from "@components/Dialog/ImportDialog.tsx";
@@ -84,6 +85,12 @@ export const DialogManager = () => {
          setDialogOpen("deleteMessages", open);
        }}
      />
+      <ClientNotificationDialog
+        open={dialog.clientNotification}
+        onOpenChange={(open) => {
+          setDialogOpen("clientNotification", open);
+        }}
+      />
    </>
  );
 };