diff --git a/webapp/IronCalc/src/components/SheetTabBar/SheetDeleteDialog.tsx b/webapp/IronCalc/src/components/SheetTabBar/SheetDeleteDialog.tsx
new file mode 100644
index 0000000..a8fa955
--- /dev/null
+++ b/webapp/IronCalc/src/components/SheetTabBar/SheetDeleteDialog.tsx
@@ -0,0 +1,142 @@
+import styled from "@emotion/styled";
+import { Button, Dialog } from "@mui/material";
+import { Trash2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { theme } from "../../theme";
+
+interface SheetDeleteDialogProps {
+ open: boolean;
+ onClose: () => void;
+ onDelete: () => void;
+ sheetName: string;
+}
+
+function SheetDeleteDialog({
+ open,
+ onClose,
+ onDelete,
+ sheetName,
+}: SheetDeleteDialogProps) {
+ const { t } = useTranslation();
+
+ return (
+
+ );
+}
+
+const DialogWrapper = styled.div`
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: white;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding: 12px;
+ border-radius: 8px;
+ box-shadow: 0px 1px 3px 0px ${theme.palette.common.black}1A;
+ width: 280px;
+ max-width: calc(100% - 40px);
+ z-index: 50;
+ font-family: "Inter", sans-serif;
+`;
+
+const IconWrapper = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 36px;
+ height: 36px;
+ border-radius: 4px;
+ background-color: ${theme.palette.error.main}1A;
+ margin: 12px auto 8px auto;
+ color: ${theme.palette.error.main};
+ svg {
+ width: 16px;
+ height: 16px;
+ }
+`;
+
+const Title = styled.h2`
+ margin: 0;
+ font-size: 14px;
+ font-weight: 600;
+ color: ${theme.palette.grey["900"]};
+ text-align: center;
+`;
+
+const Body = styled.p`
+ margin: 0;
+ text-align: center;
+ color: ${theme.palette.grey["900"]};
+ font-size: 12px;
+`;
+
+const ButtonGroup = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin-top: 8px;
+ width: 100%;
+`;
+
+const StyledButton = styled.button`
+ cursor: pointer;
+ color: ${theme.palette.common.white};
+ background-color: ${theme.palette.primary.main};
+ padding: 0px 10px;
+ height: 36px;
+ border-radius: 4px;
+ border: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ text-overflow: ellipsis;
+ transition: background-color 150ms;
+ text-transform: none;
+ &:hover {
+ background-color: ${theme.palette.primary.dark};
+ }
+`;
+
+const DeleteButton = styled(Button)`
+ background-color: ${theme.palette.error.main};
+ color: ${theme.palette.common.white};
+ text-transform: none;
+ &:hover {
+ background-color: ${theme.palette.error.dark};
+ }
+`;
+
+const CancelButton = styled(Button)`
+ background-color: ${theme.palette.grey["200"]};
+ color: ${theme.palette.grey["700"]};
+ text-transform: none;
+ &:hover {
+ background-color: ${theme.palette.grey["300"]};
+ }
+`;
+
+export default SheetDeleteDialog;
diff --git a/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx b/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
index e8db493..89d697a 100644
--- a/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
+++ b/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
@@ -6,6 +6,7 @@ import { theme } from "../../theme";
import ColorPicker from "../colorPicker";
import { isInReferenceMode } from "../editor/util";
import type { WorkbookState } from "../workbookState";
+import SheetDeleteDialog from "./SheetDeleteDialog";
import SheetRenameDialog from "./SheetRenameDialog";
interface SheetTabProps {
@@ -37,9 +38,20 @@ function SheetTab(props: SheetTabProps) {
const handleCloseRenameDialog = () => {
setRenameDialogOpen(false);
};
+
const handleOpenRenameDialog = () => {
setRenameDialogOpen(true);
};
+
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
+ const handleOpenDeleteDialog = () => {
+ setDeleteDialogOpen(true);
+ };
+
+ const handleCloseDeleteDialog = () => {
+ setDeleteDialogOpen(false);
+ };
return (
<>
{
- props.onDeleted();
+ handleOpenDeleteDialog();
handleClose();
}}
>
@@ -134,6 +146,15 @@ function SheetTab(props: SheetTabProps) {
anchorEl={colorButton}
open={colorPickerOpen}
/>
+ {
+ props.onDeleted();
+ handleCloseDeleteDialog();
+ }}
+ sheetName={name}
+ />
);
}
diff --git a/webapp/IronCalc/src/locale/en_us.json b/webapp/IronCalc/src/locale/en_us.json
index 63e6688..7c1cfa6 100644
--- a/webapp/IronCalc/src/locale/en_us.json
+++ b/webapp/IronCalc/src/locale/en_us.json
@@ -68,6 +68,12 @@
"title": "Rename Sheet",
"close": "Close dialog"
},
+ "sheet_delete": {
+ "title": "Are you sure?",
+ "message": "The sheet '{{sheetName}}' will be permanently deleted. This action cannot be undone.",
+ "confirm": "Yes, delete sheet",
+ "cancel": "Cancel"
+ },
"formula_input": {
"update": "Update",
"label": "Formula",