From 5288665f70ba07da1729c5e6e322425971aa6334 Mon Sep 17 00:00:00 2001
From: Daniel <danielglezalbo@gmail.com>
Date: Sun, 23 Nov 2025 17:02:40 +0100
Subject: [PATCH] update: add a dialog for settings

---
 .../WorkbookSettingsDialog.tsx                | 87 +++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 webapp/IronCalc/src/components/WorkbookSettings/WorkbookSettingsDialog.tsx

diff --git a/webapp/IronCalc/src/components/WorkbookSettings/WorkbookSettingsDialog.tsx b/webapp/IronCalc/src/components/WorkbookSettings/WorkbookSettingsDialog.tsx
new file mode 100644
index 0000000..b24114d
--- /dev/null
+++ b/webapp/IronCalc/src/components/WorkbookSettings/WorkbookSettingsDialog.tsx
@@ -0,0 +1,87 @@
+import styled from "@emotion/styled";
+import { Dialog } from "@mui/material";
+import { X } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { theme } from "../../theme";
+
+type WorkbookSettingsDialogProps = {
+  className?: string;
+  open: boolean;
+  onClose: () => void;
+  onExited: () => void;
+};
+
+const WorkbookSettingsDialog = (properties: WorkbookSettingsDialogProps) => {
+  const { t } = useTranslation();
+
+  const handleClose = () => {
+    properties.onClose();
+  };
+
+  return (
+    <Dialog
+      open={properties.open}
+      onClose={properties.onClose}
+      PaperProps={{
+        style: { minWidth: "280px" },
+      }}
+    >
+      <StyledDialogTitle>
+        {t("workbook_settings.title")}
+        <Cross
+          onClick={handleClose}
+          title={t("workbook_settings.close")}
+          tabIndex={0}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              properties.onClose();
+            }
+          }}
+        >
+          <X />
+        </Cross>
+      </StyledDialogTitle>
+
+      <StyledDialogContent>
+        {/* Settings content will go here */}
+      </StyledDialogContent>
+    </Dialog>
+  );
+};
+
+const StyledDialogTitle = styled("div")`
+  display: flex;
+  align-items: center;
+  height: 44px;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: Inter;
+  padding: 0px 12px;
+  justify-content: space-between;
+  border-bottom: 1px solid ${theme.palette.grey["300"]};
+`;
+
+const Cross = styled("div")`
+  &:hover {
+    background-color: ${theme.palette.grey["50"]};
+  }
+  display: flex;
+  border-radius: 4px;
+  height: 24px;
+  width: 24px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  svg {
+    width: 16px;
+    height: 16px;
+    stroke-width: 1.5;
+  }
+`;
+
+const StyledDialogContent = styled("div")`
+  font-size: 12px;
+  margin: 12px;
+`;
+
+export default WorkbookSettingsDialog;