FIX[UI]: Use canDelete as a property not a function

FIX[UI]: Rename modal dialog fixes

base/src/model.rs

@@ -418,7 +418,6 @@ impl Model {
                 CalcResult::new_error(Error::NIMPL, cell, "Arrays not implemented".to_string())
             }
             VariableKind(defined_name) => {
-                println!("{:?}", defined_name);
                 let parsed_defined_name = self
                     .parsed_defined_names
                     .get(&(Some(cell.sheet), defined_name.to_lowercase())) // try getting local defined name
@@ -427,7 +426,6 @@ impl Model {
                             .get(&(None, defined_name.to_lowercase()))
                     }); // fallback to global
 
-                println!("Parsed: {:?}", defined_name);
                 if let Some(parsed_defined_name) = parsed_defined_name {
                     match parsed_defined_name {
                         ParsedDefinedName::CellReference(reference) => {
@@ -1988,95 +1986,6 @@ impl Model {
             .worksheet_mut(sheet)?
             .set_row_height(column, height)
     }
-
-    /// Adds a new defined name
-    pub fn new_defined_name(
-        &mut self,
-        name: &str,
-        scope: Option<u32>,
-        formula: &str,
-    ) -> Result<(), String> {
-        let name_upper = name.to_uppercase();
-        let defined_names = &self.workbook.defined_names;
-        // if the defined name already exist return error
-        for df in defined_names {
-            if df.name.to_uppercase() == name_upper && df.sheet_id == scope {
-                return Err("Defined name already exists".to_string());
-            }
-        }
-        self.workbook.defined_names.push(DefinedName {
-            name: name.to_string(),
-            formula: formula.to_string(),
-            sheet_id: scope,
-        });
-        self.reset_parsed_structures();
-        Ok(())
-    }
-
-    /// Delete defined name of name and scope
-    pub fn delete_defined_name(&mut self, name: &str, scope: Option<u32>) -> Result<(), String> {
-        let name_upper = name.to_uppercase();
-        let defined_names = &self.workbook.defined_names;
-        let mut index = None;
-        for (i, df) in defined_names.iter().enumerate() {
-            if df.name.to_uppercase() == name_upper && df.sheet_id == scope {
-                index = Some(i);
-            }
-        }
-        if let Some(i) = index {
-            self.workbook.defined_names.remove(i);
-            self.reset_parsed_structures();
-            Ok(())
-        } else {
-            Err("Defined name not found".to_string())
-        }
-    }
-
-    /// returns the formula for a defined name
-    pub fn get_defined_name_formula(
-        &self,
-        name: &str,
-        scope: Option<u32>,
-    ) -> Result<String, String> {
-        let name_upper = name.to_uppercase();
-        let defined_names = &self.workbook.defined_names;
-        for df in defined_names {
-            if df.name.to_uppercase() == name_upper && df.sheet_id == scope {
-                return Ok(df.formula.clone());
-            }
-        }
-        Err("Defined name not found".to_string())
-    }
-
-    /// update defined name
-    pub fn update_defined_name(
-        &mut self,
-        name: &str,
-        scope: Option<u32>,
-        new_name: &str,
-        new_scope: Option<u32>,
-        new_formula: &str,
-    ) -> Result<(), String> {
-        let name_upper = name.to_uppercase();
-        let defined_names = &self.workbook.defined_names;
-        let mut index = None;
-        for (i, df) in defined_names.iter().enumerate() {
-            if df.name.to_uppercase() == name_upper && df.sheet_id == scope {
-                index = Some(i);
-            }
-        }
-        if let Some(i) = index {
-            if let Some(df) = self.workbook.defined_names.get_mut(i) {
-                df.name = new_name.to_string();
-                df.sheet_id = new_scope;
-                df.formula = new_formula.to_string();
-                self.reset_parsed_structures();
-            }
-            Ok(())
-        } else {
-            Err("Defined name not found".to_string())
-        }
-    }
 }
 
 #[cfg(test)]

base/src/test/user_model/mod.rs

@@ -3,7 +3,6 @@ mod test_autofill_columns;
 mod test_autofill_rows;
 mod test_border;
 mod test_clear_cells;
-mod test_defined_names;
 mod test_diff_queue;
 mod test_evaluation;
 mod test_general;

base/src/test/user_model/test_defined_names.rs

@@ -1,40 +0,0 @@
-#![allow(clippy::unwrap_used)]
-
-use crate::UserModel;
-
-#[test]
-fn create_defined_name() {
-    let mut model = UserModel::new_empty("model", "en", "UTC").unwrap();
-    model.set_user_input(0, 1, 1, "42").unwrap();
-    model.new_defined_name("myName", None, "$A$1").unwrap();
-    model.set_user_input(0, 5, 7, "=myName").unwrap();
-    assert_eq!(
-        model.get_formatted_cell_value(0, 5, 7),
-        Ok("42".to_string())
-    );
-
-    // rename it
-    model
-        .update_defined_name("myName", None, "myName", None, "$A$1*2")
-        .unwrap();
-    assert_eq!(
-        model.get_formatted_cell_value(0, 5, 7),
-        Ok("42".to_string())
-    );
-
-    // delete it
-    model.delete_defined_name("myName", None).unwrap();
-    assert_eq!(
-        model.get_formatted_cell_value(0, 5, 7),
-        Ok("#REF!".to_string())
-    );
-}
-
-#[test]
-fn rename_defined_name() {}
-
-#[test]
-fn delete_sheet() {}
-
-#[test]
-fn change_scope() {}

base/src/user_model/common.rs

@@ -13,8 +13,8 @@ use crate::{
     },
     model::Model,
     types::{
-        Alignment, BorderItem, CellType, Col, DefinedName, HorizontalAlignment, SheetProperties,
-        Style, VerticalAlignment,
+        Alignment, BorderItem, CellType, Col, HorizontalAlignment, SheetProperties, Style,
+        VerticalAlignment,
     },
     utils::is_valid_hex_color,
 };
@@ -1692,66 +1692,6 @@ impl UserModel {
         Ok(())
     }
 
-    /// Returns the list of defined names
-    pub fn get_defined_name_list(&self) -> Vec<DefinedName> {
-        self.model.workbook.defined_names.clone()
-    }
-
-    /// Delete an existing defined name
-    pub fn delete_defined_name(&mut self, name: &str, scope: Option<u32>) -> Result<(), String> {
-        let old_value = self.model.get_defined_name_formula(name, scope)?;
-        let diff_list = vec![Diff::DeleteDefinedName {
-            name: name.to_string(),
-            scope,
-            old_value,
-        }];
-        self.push_diff_list(diff_list);
-        self.model.delete_defined_name(name, scope)?;
-        self.evaluate_if_not_paused();
-        Ok(())
-    }
-
-    /// Create a new defined name
-    pub fn new_defined_name(
-        &mut self,
-        name: &str,
-        scope: Option<u32>,
-        formula: &str,
-    ) -> Result<(), String> {
-        self.model.new_defined_name(name, scope, formula)?;
-        let diff_list = vec![Diff::CreateDefinedName {
-            name: name.to_string(),
-            scope,
-            value: formula.to_string(),
-        }];
-        self.push_diff_list(diff_list);
-        self.evaluate_if_not_paused();
-        Ok(())
-    }
-
-    /// Updates a defined name
-    pub fn update_defined_name(
-        &mut self,
-        name: &str,
-        scope: Option<u32>,
-        new_name: &str,
-        new_scope: Option<u32>,
-        new_formula: &str,
-    ) -> Result<(), String> {
-        let old_formula = self.model.get_defined_name_formula(name, scope)?;
-        let diff_list = vec![Diff::UpdateDefinedName {
-            name: name.to_string(),
-            scope,
-            old_formula: old_formula.to_string(),
-            new_name: new_name.to_string(),
-            new_scope,
-            new_formula: new_formula.to_string(),
-        }];
-        self.push_diff_list(diff_list);
-        self.evaluate_if_not_paused();
-        Ok(())
-    }
-
     // **** Private methods ****** //
 
     fn push_diff_list(&mut self, diff_list: DiffList) {
@@ -1922,20 +1862,6 @@ impl UserModel {
                 } => {
                     self.model.set_show_grid_lines(*sheet, *old_value)?;
                 }
-                Diff::CreateDefinedName { name, scope, value } => todo!(),
-                Diff::DeleteDefinedName {
-                    name,
-                    scope,
-                    old_value,
-                } => todo!(),
-                Diff::UpdateDefinedName {
-                    name,
-                    scope,
-                    old_formula,
-                    new_name,
-                    new_scope,
-                    new_formula,
-                } => todo!(),
             }
         }
         if needs_evaluation {
@@ -2063,20 +1989,6 @@ impl UserModel {
                 } => {
                     self.model.set_show_grid_lines(*sheet, *new_value)?;
                 }
-                Diff::CreateDefinedName { name, scope, value } => todo!(),
-                Diff::DeleteDefinedName {
-                    name,
-                    scope,
-                    old_value,
-                } => todo!(),
-                Diff::UpdateDefinedName {
-                    name,
-                    scope,
-                    old_formula,
-                    new_name,
-                    new_scope,
-                    new_formula,
-                } => todo!(),
             }
         }
 

base/src/user_model/history.rs

@@ -108,26 +108,7 @@ pub(crate) enum Diff {
         sheet: u32,
         old_value: bool,
         new_value: bool,
-    },
-    CreateDefinedName {
-        name: String,
-        scope: Option<u32>,
-        value: String,
-    },
-    DeleteDefinedName {
-        name: String,
-        scope: Option<u32>,
-        old_value: String,
-    },
-    UpdateDefinedName {
-        name: String,
-        scope: Option<u32>,
-        old_formula: String,
-        new_name: String,
-        new_scope: Option<u32>,
-        new_formula: String,
-    },
-    // FIXME: we are missing SetViewDiffs
+    }, // FIXME: we are missing SetViewDiffs
 }
 
 pub(crate) type DiffList = Vec<Diff>;

bindings/wasm/fix_types.py

@@ -187,20 +187,6 @@ paste_from_clipboard_types = r"""
   pasteFromClipboard(source_sheet: number, source_range: [number, number, number, number], clipboard: ClipboardData, is_cut: boolean): void;
 """
 
-defined_name_list = r"""
-/**
-* @returns {any}
-*/
-  getDefinedNameList(): any;
-"""
-
-defined_name_list_types = r"""
-/**
-* @returns {DefinedName[]}
-*/
-  getDefinedNameList(): DefinedName[];
-"""
-
 def fix_types(text):
     text = text.replace(get_tokens_str, get_tokens_str_types)
     text = text.replace(update_style_str, update_style_str_types)
@@ -214,7 +200,6 @@ def fix_types(text):
     text = text.replace(paste_csv_string, paste_csv_string_types)
     text = text.replace(clipboard, clipboard_types)
     text = text.replace(paste_from_clipboard, paste_from_clipboard_types)
-    text = text.replace(defined_name_list, defined_name_list_types)
     with open("types.ts") as f:
         types_str = f.read()
         header_types = "{}\n\n{}".format(header, types_str)

bindings/wasm/src/lib.rs

@@ -1,4 +1,3 @@
-use serde::Serialize;
 use wasm_bindgen::{
     prelude::{wasm_bindgen, JsError},
     JsValue,
@@ -30,13 +29,6 @@ pub fn column_name_from_number(column: i32) -> Result<String, JsError> {
     }
 }
 
-#[derive(Serialize)]
-struct DefinedName {
-    name: String,
-    scope: Option<u32>,
-    formula: String,
-}
-
 #[wasm_bindgen]
 pub struct Model {
     model: BaseModel,
@@ -550,52 +542,4 @@ impl Model {
             .paste_csv_string(&range, csv)
             .map_err(|e| to_js_error(e.to_string()))
     }
-
-    #[wasm_bindgen(js_name = "getDefinedNameList")]
-    pub fn get_defined_name_list(&self) -> Result<JsValue, JsError> {
-        let data: Vec<DefinedName> =
-            self.model
-                .get_defined_name_list()
-                .iter()
-                .map(|s| DefinedName {
-                    name: s.name.to_string(),
-                    scope: s.sheet_id,
-                    formula: s.formula.to_string(),
-                }).collect();
-        // Ok(data)
-        serde_wasm_bindgen::to_value(&data).map_err(|e| to_js_error(e.to_string()))
-    }
-
-    #[wasm_bindgen(js_name = "newDefinedName")]
-    pub fn new_defined_name(
-        &mut self,
-        name: &str,
-        scope: Option<u32>,
-        formula: &str,
-    ) -> Result<(), JsError> {
-        self.model
-            .new_defined_name(name, scope, formula)
-            .map_err(|e| to_js_error(e.to_string()))
-    }
-
-    #[wasm_bindgen(js_name = "updateDefinedName")]
-    pub fn update_defined_name(
-        &mut self,
-        name: &str,
-        scope: Option<u32>,
-        new_name: &str,
-        new_scope: Option<u32>,
-        new_formula: &str,
-    ) -> Result<(), JsError> {
-        self.model
-            .update_defined_name(name, scope, new_name, new_scope, new_formula)
-            .map_err(|e| to_js_error(e.to_string()))
-    }
-
-    #[wasm_bindgen(js_name = "deleteDefinedName")]
-    pub fn delete_definedname(&mut self, name: &str, scope: Option<u32>) -> Result<(), JsError> {
-        self.model
-            .delete_defined_name(name, scope)
-            .map_err(|e| to_js_error(e.to_string()))
-    }
 }

bindings/wasm/types.ts

@@ -226,10 +226,4 @@ export interface Clipboard {
   csv: string;
   data: ClipboardData;
   range: [number, number, number, number];
-}
-
-export interface DefinedName {
-  name: string;
-  scope?: number;
-  formula: string;
 }

webapp/src/AppComponents/DeleteWorkbookDialog.tsx

@@ -0,0 +1,160 @@
+import styled from "@emotion/styled";
+import { Trash2 } from "lucide-react";
+import { forwardRef, useEffect } from "react";
+import { theme } from "../theme";
+
+export const DeleteWorkbookDialog = forwardRef<
+  HTMLDivElement,
+  {
+    onClose: () => void;
+    onConfirm: () => void;
+    workbookName: string;
+  }
+>((properties, ref) => {
+  useEffect(() => {
+    const root = document.getElementById("root");
+    if (root) {
+      root.style.filter = "blur(2px)";
+    }
+    return () => {
+      const root = document.getElementById("root");
+      if (root) {
+        root.style.filter = "none";
+      }
+    };
+  }, []);
+
+  return (
+    <DialogWrapper
+      ref={ref}
+      tabIndex={-1}
+      role="dialog"
+      aria-labelledby="delete-dialog-title"
+      aria-describedby="delete-dialog-description"
+    >
+      <IconWrapper>
+        <Trash2 />
+      </IconWrapper>
+      <ContentWrapper>
+        <Title>Are you sure?</Title>
+        <Body>
+          The workbook <strong>'{properties.workbookName}'</strong> will be
+          permanently deleted. This action cannot be undone.
+        </Body>
+        <ButtonGroup>
+          <DeleteButton
+            onClick={() => {
+              properties.onConfirm();
+              properties.onClose();
+            }}
+          >
+            Yes, delete workbook
+          </DeleteButton>
+          <CancelButton onClick={properties.onClose}>Cancel</CancelButton>
+        </ButtonGroup>
+      </ContentWrapper>
+    </DialogWrapper>
+  );
+});
+
+DeleteWorkbookDialog.displayName = "DeleteWorkbookDialog";
+
+const DialogWrapper = styled.div`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  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 0 auto;
+  color: ${theme.palette.error.main};
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  word-break: break-word;
+`;
+
+const Title = styled.h2`
+  margin: 0;
+  font-weight: 600;
+  font-size: inherit;
+  color: ${theme.palette.grey["900"]};
+`;
+
+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 Button = 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;
+  &:hover {
+    background-color: ${theme.palette.primary.dark};
+  }
+`;
+
+const DeleteButton = styled(Button)`
+  background-color: ${theme.palette.error.main};
+  color: ${theme.palette.common.white};
+  &:hover {
+    background-color: ${theme.palette.error.dark};
+  }
+`;
+
+const CancelButton = styled(Button)`
+  background-color: ${theme.palette.grey["200"]};
+  color: ${theme.palette.grey["700"]};
+  &:hover {
+    background-color: ${theme.palette.grey["300"]};
+  }
+`;

webapp/src/AppComponents/FileMenu.tsx

@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import { Menu, MenuItem, Modal } from "@mui/material";
 import { Check, FileDown, FileUp, Plus, Trash2 } from "lucide-react";
 import { useRef, useState } from "react";
+import { DeleteWorkbookDialog } from "./DeleteWorkbookDialog";
 import { UploadFileDialog } from "./UploadFileDialog";
 import { getModelsMetadata, getSelectedUuid } from "./storage";
 
@@ -18,6 +19,7 @@ export function FileMenu(props: {
   const models = getModelsMetadata();
   const uuids = Object.keys(models);
   const selectedUuid = getSelectedUuid();
+  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   const elements = [];
   for (const uuid of uuids) {
@@ -88,16 +90,14 @@ export function FileMenu(props: {
             Download (.xlsx)
           </MenuItemText>
         </MenuItemWrapper>
-        <MenuItemWrapper>
+        <MenuItemWrapper
+          onClick={() => {
+            setDeleteDialogOpen(true);
+            setMenuOpen(false);
+          }}
+        >
           <StyledTrash />
-          <MenuItemText
-            onClick={() => {
-              props.onDelete();
-              setMenuOpen(false);
-            }}
-          >
-            Delete workbook
-          </MenuItemText>
+          <MenuItemText>Delete workbook</MenuItemText>
         </MenuItemWrapper>
         <MenuDivider />
         {elements}
@@ -127,6 +127,18 @@ export function FileMenu(props: {
           />
         </>
       </Modal>
+      <Modal
+        open={isDeleteDialogOpen}
+        onClose={() => setDeleteDialogOpen(false)}
+        aria-labelledby="delete-dialog-title"
+        aria-describedby="delete-dialog-description"
+      >
+        <DeleteWorkbookDialog
+          onClose={() => setDeleteDialogOpen(false)}
+          onConfirm={props.onDelete}
+          workbookName={selectedUuid ? models[selectedUuid] : ""}
+        />
+      </Modal>
     </>
   );
 }

webapp/src/components/NameManagerDialog.tsx

@@ -1,127 +0,0 @@
-import type { Model } from "@ironcalc/wasm";
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  styled,
-} from "@mui/material";
-import { t } from "i18next";
-import { BookOpen, X } from "lucide-react";
-import { useState } from "react";
-import NamedRange from "./NamedRange";
-import type { NamedRangeObject } from "./NamedRange";
-
-type NameManagerDialogProperties = {
-  onClose: () => void;
-  onSave: () => void;
-  open: boolean;
-  model: Model;
-};
-
-function NameManagerDialog(props: NameManagerDialogProperties) {
-
-  const handleClose = () => {
-    props.onClose();
-  };
-
-  // update child component values in model
-  const handleSave = () => {
-    props.onSave(); // => onNamedRangesUpdate from toolbar
-    props.onClose();
-  };
-
-  //! Why are fields editable only while clicking them?
-  // update child component values in UI
-  const handleChange = (id: string, field: string, value: string) => {
-    console.log("change:", id, field, value);
-
-    // previous array elements, plus updated value
-    // setNamedRangesLocal((prev) =>
-    //   prev.map((namedRange) =>
-    //     namedRange.id === id ? { ...namedRange, [field]: value } : namedRange,
-    //   ),
-    // );
-  };
-
-  const nameList = props.model.getDefinedNameList();
-
-  return (
-    <StyledDialog
-      open={props.open}
-      onClose={props.onClose}
-      maxWidth="md"
-      fullWidth
-      scroll="paper"
-    >
-      <StyledDialogTitle>
-        Named Ranges
-        <IconButton onClick={handleClose}>
-          <X size={16} />
-        </IconButton>
-      </StyledDialogTitle>
-      <DialogContent dividers>
-        {nameList.map((e) => (
-          <NamedRange
-            worksheets={props.model.getWorksheetsProperties()}
-            name={e.name}
-            scope={e.scope}
-            range={e.formula}
-            key={`${e.name}-${e.scope}`}
-            onChange={handleChange}
-            model={props.model}
-          />
-        ))}
-      </DialogContent>
-      <StyledDialogActions>
-        <Box display="flex" alignItems="center">
-          <BookOpen
-            color="grey"
-            style={{ width: 16, height: 16, marginLeft: 12, marginRight: 8 }}
-          />
-          <span style={{ fontSize: "12px", fontFamily: "Inter" }}>
-            {t("name_manager_dialog.help")}
-          </span>
-        </Box>
-        <Box display="flex" gap="10px">
-          <Button onClick={handleClose} variant="contained" color="info">
-            Cancel
-          </Button>
-          <Button onClick={handleSave} variant="contained">
-            Save changes
-          </Button>
-        </Box>
-      </StyledDialogActions>
-    </StyledDialog>
-  );
-}
-
-const StyledDialog = styled(Dialog)(() => ({
-  "& .MuiPaper-root": {
-    maxHeight: "60%",
-    minHeight: "40%",
-  },
-}));
-
-// font-weight: 600 is too bold compared to design, should be between 500 & 600
-const StyledDialogTitle = styled(DialogTitle)`
-font-size: 14px;
-font-weight: 600;
-display: flex;
-align-items: center;
-justify-content: space-between;
-`;
-
-const StyledDialogActions = styled(DialogActions)`
-height: 40px;
-display: flex;
-align-items: center;
-justify-content: space-between;
-font-size: 12px;
-color: #757575;
-`;
-
-export default NameManagerDialog;

webapp/src/components/NamedRange.tsx

@@ -1,91 +0,0 @@
-import type { Model, WorksheetProperties } from "@ironcalc/wasm";
-import { Box, IconButton, MenuItem, TextField, styled } from "@mui/material";
-import { Trash2 } from "lucide-react";
-
-export type NamedRangeObject = {
-  id: string;
-  name: string;
-  scope: string;
-  range: string;
-};
-
-type NamedRangeProperties = {
-  name: string;
-  scope: string;
-  range: string;
-  model: Model;
-  worksheets: WorksheetProperties[];
-  // update namedRange in model
-  onChange: (field: string, value: string) => void;
-};
-
-function NamedRange(props: NamedRangeProperties) {
-  // define onChange in parent for updating the model and values
-
-  const handleDelete = () => {
-    // update model
-    console.log("deleted named range");
-  };
-
-  return (
-    <StyledBox>
-      <TextField
-        variant="outlined"
-        size="small"
-        margin="normal"
-        fullWidth
-        value={props.name}
-        onChange={(event) =>
-          props.onChange("name", event.target.value)
-        }
-        onKeyDown={(event) => {
-          event.stopPropagation();
-        }}
-        onClick={(event) => event.stopPropagation()}
-      />
-      <TextField
-        variant="outlined"
-        select
-        defaultValue="Workbook"
-        size="small"
-        margin="normal"
-        fullWidth
-        value={props.scope}
-        onChange={(event) =>
-          props.onChange("scope", event.target.value)
-        }
-      >
-        {props.worksheets.map((option) => (
-          <MenuItem key={option.sheet_id} value={option.name}>
-            {option.name}
-          </MenuItem>
-        ))}
-      </TextField>
-      <TextField
-        variant="outlined"
-        size="small"
-        margin="normal"
-        fullWidth
-        value={props.range}
-        onChange={(event) =>
-          props.onChange("range", event.target.value)
-        }
-        onKeyDown={(event) => {
-          event.stopPropagation();
-        }}
-        onClick={(event) => event.stopPropagation()}
-      />
-      {/* remove round hover animation  */}
-      <IconButton onClick={handleDelete}>
-        <Trash2 size={16} absoluteStrokeWidth />
-      </IconButton>
-    </StyledBox>
-  );
-}
-
-const StyledBox = styled(Box)`
-display: flex;
-gap: 15px;
-`;
-
-export default NamedRange;

webapp/src/components/SheetTabBar/SheetRenameDialog.tsx

@@ -54,6 +54,8 @@ const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
             if (event.key === "Enter") {
               properties.onNameChanged(name);
               properties.onClose();
+            } else if (event.key === "Escape") {
+              properties.onClose();
             }
           }}
           onChange={(event) => {
@@ -61,6 +63,8 @@ const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
           }}
           spellCheck="false"
           onPaste={(event) => event.stopPropagation()}
+          onCopy={(event) => event.stopPropagation()}
+          onCut={(event) => event.stopPropagation()}
         />
       </StyledDialogContent>
       <DialogFooter>

webapp/src/components/SheetTabBar/SheetTab.tsx

@@ -1,4 +1,5 @@
 import { Button, Menu, MenuItem, styled } from "@mui/material";
+import type { MenuItemProps } from "@mui/material";
 import { ChevronDown } from "lucide-react";
 import { useRef, useState } from "react";
 import { theme } from "../../theme";
@@ -14,6 +15,7 @@ interface SheetTabProps {
   onSelected: () => void;
   onColorChanged: (hex: string) => void;
   onRenamed: (name: string) => void;
+  canDelete: boolean;
   onDeleted: () => void;
   workbookState: WorkbookState;
 }
@@ -92,6 +94,7 @@ function SheetTab(props: SheetTabProps) {
           Change Color
         </StyledMenuItem>
         <StyledMenuItem
+          disabled={!props.canDelete}
           onClick={() => {
             props.onDeleted();
             handleClose();
@@ -137,16 +140,19 @@ const StyledMenu = styled(Menu)`
   }
 `;
 
-const StyledMenuItem = styled(MenuItem)`
-  display: flex;
-  justify-content: space-between;
-  font-size: 12px;
-  width: calc(100% - 8px);
-  margin: 0px 4px;
-  border-radius: 4px;
-  padding: 8px;
-  height: 32px;
-`;
+const StyledMenuItem = styled(MenuItem)<MenuItemProps>(() => ({
+  display: "flex",
+  justifyContent: "space-between",
+  fontSize: "12px",
+  width: "calc(100% - 8px)",
+  margin: "0px 4px",
+  borderRadius: "4px",
+  padding: "8px",
+  height: "32px",
+  "&:disabled": {
+    color: "#BDBDBD",
+  },
+}));
 
 const TabWrapper = styled("div")<{ $color: string; $selected: boolean }>`
   display: flex;

webapp/src/components/SheetTabBar/SheetTabBar.tsx

@@ -71,6 +71,7 @@ function SheetTabBar(props: SheetTabBarProps) {
                 props.onSheetDeleted();
               }}
               workbookState={workbookState}
+              canDelete={sheets.length > 1}
             />
           ))}
         </SheetInner>

webapp/src/components/WorksheetCanvas/constants.ts

@@ -5,10 +5,10 @@ export const headerGlobalSelectorColor = "#EAECF4";
 export const headerSelectedBackground = "#EEEEEE";
 export const headerFullSelectedBackground = "#D3D6E9";
 export const headerSelectedColor = "#333";
-export const headerBorderColor = "#DEE0EF";
+export const headerBorderColor = "#E0E0E0";
 
 export const gridColor = "#E0E0E0";
-export const gridSeparatorColor = "#D3D6E9";
+export const gridSeparatorColor = "#E0E0E0";
 export const defaultTextColor = "#2E414D";
 
 export const outlineColor = "#F2994A";

webapp/src/components/colorPicker.tsx

@@ -45,8 +45,8 @@ const ColorPicker = (properties: ColorPickerProps) => {
     "#3BB68A",
     "#8CB354",
     "#F8CD3C",
+    "#F2994A",
     "#EC5753",
-    "#A23C52",
     "#D03627",
     "#523E93",
     "#3358B7",

webapp/src/components/toolbar.tsx

@@ -1,7 +1,6 @@
 import type {
   BorderOptions,
   HorizontalAlignment,
-  Model,
   VerticalAlignment,
 } from "@ironcalc/wasm";
 import { styled } from "@mui/material/styles";
@@ -23,7 +22,6 @@ import {
   Percent,
   Redo2,
   Strikethrough,
-  Tags,
   Type,
   Underline,
   Undo2,
@@ -36,7 +34,6 @@ import {
   DecimalPlacesIncreaseIcon,
 } from "../icons";
 import { theme } from "../theme";
-import NameManagerDialog from "./NameManagerDialog";
 import BorderPicker from "./borderPicker";
 import ColorPicker from "./colorPicker";
 import { TOOLBAR_HEIGHT } from "./constants";
@@ -63,7 +60,6 @@ type ToolbarProperties = {
   onFillColorPicked: (hex: string) => void;
   onNumberFormatPicked: (numberFmt: string) => void;
   onBorderChanged: (border: BorderOptions) => void;
-  onNamedRangesUpdate: () => void;
   fillColor: string;
   fontColor: string;
   bold: boolean;
@@ -76,14 +72,12 @@ type ToolbarProperties = {
   numFmt: string;
   showGridLines: boolean;
   onToggleShowGridLines: (show: boolean) => void;
-  model: Model;
 };
 
 function Toolbar(properties: ToolbarProperties) {
   const [fontColorPickerOpen, setFontColorPickerOpen] = useState(false);
   const [fillColorPickerOpen, setFillColorPickerOpen] = useState(false);
   const [borderPickerOpen, setBorderPickerOpen] = useState(false);
-  const [nameManagerDialogOpen, setNameManagerDialogOpen] = useState(false);
 
   const fontColorButton = useRef(null);
   const fillColorButton = useRef(null);
@@ -346,18 +340,6 @@ function Toolbar(properties: ToolbarProperties) {
       >
         {properties.showGridLines ? <Grid2x2Check /> : <Grid2x2X />}
       </StyledButton>
-      <Divider />
-      <StyledButton
-        type="button"
-        $pressed={false}
-        onClick={() => {
-          setNameManagerDialogOpen(true);
-        }}
-        disabled={!canEdit}
-        title={t("toolbar.name_manager")}
-      >
-        <Tags />
-      </StyledButton>
 
       <ColorPicker
         color={properties.fontColor}
@@ -393,18 +375,6 @@ function Toolbar(properties: ToolbarProperties) {
         anchorEl={borderButton}
         open={borderPickerOpen}
       />
-      <NameManagerDialog
-        open={nameManagerDialogOpen}
-        onClose={() => {
-          setNameManagerDialogOpen(false);
-        }}
-        onSave={() => {
-          console.log(
-            "update NamedRanges in model => properties.onNamedRangesUpdate",
-          );
-        }}
-        model={properties.model}
-      />
     </ToolbarContainer>
   );
 }

webapp/src/components/workbook.tsx

@@ -113,10 +113,6 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
     updateRangeStyle("num_fmt", numberFmt);
   };
 
-  const onNamedRangesUpdate = () => {
-    // update named ranges in model
-  }
-
   const onCopyStyles = () => {
     const {
       sheet,
@@ -563,8 +559,6 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           model.setShowGridLines(sheet, show);
           setRedrawId((id) => id + 1);
         }}
-        onNamedRangesUpdate={onNamedRangesUpdate}
-        model={model}
       />
       <FormulaBar
         cellAddress={cellAddress()}

webapp/src/locale/en_us.json

@@ -1,81 +1,77 @@
 {
-	"toolbar": {
-		"redo": "Redo",
-		"undo": "Undo",
-		"copy_styles": "Copy styles",
-		"euro": "Format as Euro",
-		"percentage": "Format as Percentage",
-		"bold": "Bold",
-		"italic": "Italic",
-		"underline": "Underline",
-		"strike_through": "Strikethrough",
-		"align_left": "Align left",
-		"align_right": "Align right",
-		"align_center": "Align center",
-		"format_number": "Format number",
-		"font_color": "Font color",
-		"fill_color": "Fill color",
-		"decimal_places_increase": "Increase decimal places",
-		"decimal_places_decrease": "Decrease decimal places",
-		"show_hide_grid_lines": "Show/hide grid lines",
-		"name_manager": "Name manager",
-		"vertical_align_bottom": "Align bottom",
-		"vertical_align_middle": " Align middle",
-		"vertical_align_top": "Align top",
-		"format_menu": {
-			"auto": "Auto",
-			"number": "Number",
-			"percentage": "Percentage",
-			"currency_eur": "Euro (EUR)",
-			"currency_usd": "Dollar (USD)",
-			"currency_gbp": "British Pound (GBD)",
-			"date_short": "Short date",
-			"date_long": "Long date",
-			"custom": "Custom",
-			"number_example": "1,000.00",
-			"percentage_example": "10%",
-			"currency_eur_example": "€",
-			"currency_usd_example": "$",
-			"currency_gbp_example": "£",
-			"date_short_example": "09/24/2024",
-			"date_long_example": "Tuesday, September 24, 2024"
-		},
-		"borders": {
-			"title": "Borders",
-			"all": "All borders",
-			"inner": "Inner borders",
-			"outer": "Outer borders",
-			"top": "Top borders",
-			"bottom": "Bottom borders",
-			"clear": "Clear borders",
-			"left": "Left borders",
-			"right": "Right borders",
-			"horizontal": "Horizontal borders",
-			"vertical": "Vertical borders",
-			"color": "Border color",
-			"style": "Border style"
-		}
-	},
-	"num_fmt": {
-		"title": "Custom number format",
-		"label": "Number format",
-		"save": "Save"
-	},
-	"sheet_rename": {
-		"rename": "Save",
-		"label": "New name",
-		"title": "Rename Sheet"
-	},
-	"formula_input": {
-		"update": "Update",
-		"label": "Formula",
-		"title": "Update formula"
-	},
-	"navigation": {
-		"add_sheet": "Add sheet",
-		"sheet_list": "Sheet list"
-	},
-	"name_manager_dialog": {
-		"help": "Learn more about Named Ranges"
-	}
+  "toolbar": {
+    "redo": "Redo",
+    "undo": "Undo",
+    "copy_styles": "Copy styles",
+    "euro": "Format as Euro",
+    "percentage": "Format as Percentage",
+    "bold": "Bold",
+    "italic": "Italic",
+    "underline": "Underline",
+    "strike_through": "Strikethrough",
+    "align_left": "Align left",
+    "align_right": "Align right",
+    "align_center": "Align center",
+    "format_number": "Format number",
+    "font_color": "Font color",
+    "fill_color": "Fill color",
+    "decimal_places_increase": "Increase decimal places",
+    "decimal_places_decrease": "Decrease decimal places",
+    "show_hide_grid_lines": "Show/hide grid lines",
+    "vertical_align_bottom": "Align bottom",
+    "vertical_align_middle": " Align middle",
+    "vertical_align_top": "Align top",
+    "format_menu": {
+      "auto": "Auto",
+      "number": "Number",
+      "percentage": "Percentage",
+      "currency_eur": "Euro (EUR)",
+      "currency_usd": "Dollar (USD)",
+      "currency_gbp": "British Pound (GBD)",
+      "date_short": "Short date",
+      "date_long": "Long date",
+      "custom": "Custom",
+      "number_example": "1,000.00",
+      "percentage_example": "10%",
+      "currency_eur_example": "€",
+      "currency_usd_example": "$",
+      "currency_gbp_example": "£",
+      "date_short_example": "09/24/2024",
+      "date_long_example": "Tuesday, September 24, 2024"
+    },
+    "borders": {
+      "title": "Borders",
+      "all": "All borders",
+      "inner": "Inner borders",
+      "outer": "Outer borders",
+      "top": "Top borders",
+      "bottom": "Bottom borders",
+      "clear": "Clear borders",
+      "left": "Left borders",
+      "right": "Right borders",
+      "horizontal": "Horizontal borders",
+      "vertical": "Vertical borders",
+      "color": "Border color",
+      "style": "Border style"
+    }
+  },
+  "num_fmt": {
+    "title": "Custom number format",
+    "label": "Number format",
+    "save": "Save"
+  },
+  "sheet_rename": {
+    "rename": "Save",
+    "label": "New name",
+    "title": "Rename Sheet"
+  },
+  "formula_input": {
+    "update": "Update",
+    "label": "Formula",
+    "title": "Update formula"
+  },
+  "navigation": {
+    "add_sheet": "Add sheet",
+    "sheet_list": "Sheet list"
+  }
 }