fix: footer, header, translation file

webapp/IronCalc/src/components/RightDrawer/NamedRanges/EditNamedRange.tsx

@@ -36,18 +36,22 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
           <HeaderIcon>
             <Tag />
           </HeaderIcon>
-          <HeaderBoxText>{name || "New Named Range"}</HeaderBoxText>
+          <HeaderBoxText>
+            {name || t("name_manager_dialog.new_named_range")}
+          </HeaderBoxText>
         </HeaderBox>
         <StyledBox>
           <FieldWrapper>
-            <StyledLabel htmlFor="name">Range name</StyledLabel>
+            <StyledLabel htmlFor="name">
+              {t("name_manager_dialog.range_name")}
+            </StyledLabel>
             <StyledTextField
               autoFocus={true}
               id="name"
               variant="outlined"
               size="small"
               margin="none"
-              placeholder="Enter range name"
+              placeholder={t("name_manager_dialog.enter_range_name")}
               fullWidth
               error={formulaError}
               value={name}
@@ -59,7 +63,9 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
             />
           </FieldWrapper>
           <FieldWrapper>
-            <StyledLabel htmlFor="scope">Scope</StyledLabel>
+            <StyledLabel htmlFor="scope">
+              {t("name_manager_dialog.scope_label")}
+            </StyledLabel>
             <StyledTextField
               id="scope"
               variant="outlined"
@@ -73,7 +79,7 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
                 setScope(event.target.value);
               }}
             >
-              <MenuItem value={"[global]"}>
+              <MenuItem value={"[Global]"}>
                 <MenuSpan>{t("name_manager_dialog.workbook")}</MenuSpan>
                 <MenuSpanGrey>{` ${t("name_manager_dialog.global")}`}</MenuSpanGrey>
               </MenuItem>
@@ -84,11 +90,13 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
               ))}
             </StyledTextField>
             <StyledHelperText>
-              The scope of the named range determines where it is available.
+              {t("name_manager_dialog.scope_helper")}
             </StyledHelperText>
           </FieldWrapper>
           <FieldWrapper>
-            <StyledLabel htmlFor="formula">Refers to</StyledLabel>
+            <StyledLabel htmlFor="formula">
+              {t("name_manager_dialog.refers_to")}
+            </StyledLabel>
             <StyledTextField
               id="formula"
               variant="outlined"
@@ -115,7 +123,7 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
           disableElevation
           onClick={onCancel}
         >
-          Cancel
+          {t("name_manager_dialog.cancel")}
         </NewButton>
         <NewButton
           variant="contained"

webapp/IronCalc/src/components/RightDrawer/NamedRanges/NamedRanges.tsx

@@ -1,7 +1,7 @@
 import type { DefinedName, WorksheetProperties } from "@ironcalc/wasm";
 import { Button, Tooltip, styled } from "@mui/material";
 import { t } from "i18next";
-import { BookOpen, PencilLine, Plus, Trash2 } from "lucide-react";
+import { ArrowLeft, BookOpen, PencilLine, Plus, Trash2, X } from "lucide-react";
 import { useState } from "react";
 import { theme } from "../../../theme";
 import EditNamedRange from "./EditNamedRange";
@@ -13,6 +13,7 @@ const normalizeRangeString = (range: string): string => {
 
 interface NamedRangesProps {
   title?: string;
+  onClose?: () => void;
   definedNameList?: DefinedName[];
   worksheets?: WorksheetProperties[];
   updateDefinedName?: (
@@ -32,6 +33,8 @@ interface NamedRangesProps {
 }
 
 const NamedRanges: React.FC<NamedRangesProps> = ({
+  title,
+  onClose,
   definedNameList = [],
   worksheets = [],
   updateDefinedName,
@@ -99,7 +102,7 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
   // Show edit view if a named range is being edited or created
   if (editingDefinedName || isCreatingNew) {
     let name = "";
-    let scopeName = "[global]";
+    let scopeName = "[Global]";
     let formula = "";
 
     if (editingDefinedName) {
@@ -107,14 +110,65 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
       scopeName =
         editingDefinedName.scope !== undefined
           ? worksheets[editingDefinedName.scope]?.name || "[unknown]"
-          : "[global]";
+          : "[Global]";
       formula = editingDefinedName.formula;
     } else if (isCreatingNew && selectedArea) {
       formula = selectedArea();
     }
 
+    const headerTitle = isCreatingNew
+      ? t("name_manager_dialog.add_new_range")
+      : t("name_manager_dialog.edit_range");
+
     return (
       <Container>
+        <EditHeader>
+          <Tooltip title={t("name_manager_dialog.back")}>
+            <IconButtonWrapper
+              onClick={handleCancel}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  handleCancel();
+                }
+              }}
+              aria-label="Back to list"
+              tabIndex={0}
+            >
+              <ArrowLeft />
+            </IconButtonWrapper>
+          </Tooltip>
+          <EditHeaderTitle>{headerTitle}</EditHeaderTitle>
+          {onClose && (
+            <Tooltip
+              title={t("right_drawer.close")}
+              slotProps={{
+                popper: {
+                  modifiers: [
+                    {
+                      name: "offset",
+                      options: {
+                        offset: [0, -8],
+                      },
+                    },
+                  ],
+                },
+              }}
+            >
+              <IconButtonWrapper
+                onClick={onClose}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    onClose();
+                  }
+                }}
+                aria-label="Close drawer"
+                tabIndex={0}
+              >
+                <X />
+              </IconButtonWrapper>
+            </Tooltip>
+          )}
+        </EditHeader>
         <Content>
           <EditNamedRange
             worksheets={worksheets}
@@ -134,15 +188,47 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
 
   return (
     <Container>
+      {onClose && (
+        <Header>
+          <HeaderTitle>{title}</HeaderTitle>
+          <Tooltip
+            title={t("right_drawer.close")}
+            slotProps={{
+              popper: {
+                modifiers: [
+                  {
+                    name: "offset",
+                    options: {
+                      offset: [0, -8],
+                    },
+                  },
+                ],
+              },
+            }}
+          >
+            <IconButtonWrapper
+              onClick={onClose}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  onClose();
+                }
+              }}
+              aria-label="Close drawer"
+              tabIndex={0}
+            >
+              <X />
+            </IconButtonWrapper>
+          </Tooltip>
+        </Header>
+      )}
       <Content>
         {definedNameList.length > 0 && (
           <ListContainer>
             {definedNameList.map((definedName) => {
               const scopeName =
                 definedName.scope !== undefined
-                  ? worksheets[definedName.scope]?.name || "[unknown]"
+                  ? worksheets[definedName.scope]?.name || "[Unknown]"
-                  : "[global]";
+                  : "[Global]";
-              // Check if this named range matches the currently selected area
               const isSelected =
                 currentSelectedArea !== null &&
                 normalizeRangeString(definedName.formula) ===
@@ -193,22 +279,14 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
         )}
       </Content>
       <Footer>
-        <Tooltip
+        <HelpLink
-          title={t("name_manager_dialog.help")}
+          href="https://docs.ironcalc.com/web-application/name-manager.html"
-          slotProps={{
+          target="_blank"
-            popper: {
+          rel="noopener noreferrer"
-              modifiers: [{ name: "offset", options: { offset: [0, -8] } }],
-            },
-          }}
         >
-          <HelpLink
+          <BookOpen />
-            href="https://docs.ironcalc.com/web-application/name-manager.html"
+          {t("name_manager_dialog.help")}
-            target="_blank"
+        </HelpLink>
-            rel="noopener noreferrer"
-          >
-            <BookOpen />
-          </HelpLink>
-        </Tooltip>
         <NewButton
           variant="contained"
           disableElevation
@@ -322,7 +400,7 @@ export const Footer = styled("div")`
 const HelpLink = styled("a")`
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   font-size: 12px;
   font-weight: 400;
   font-family: "Inter";
@@ -334,7 +412,6 @@ const HelpLink = styled("a")`
   svg {
     width: 16px;
     height: 16px;
-    color: ${theme.palette.grey["600"]};
   }
 `;
 
@@ -351,4 +428,52 @@ export const NewButton = styled(Button)`
   }
 `;
 
+const Header = styled("div")({
+  height: "40px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  padding: "0 8px",
+  borderBottom: `1px solid ${theme.palette.grey[300]}`,
+});
+
+const HeaderTitle = styled("div")({
+  width: "100%",
+  fontSize: "12px",
+});
+
+const EditHeader = styled("div")({
+  height: "40px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "0 8px",
+  gap: "8px",
+  borderBottom: `1px solid ${theme.palette.grey[300]}`,
+});
+
+const EditHeaderTitle = styled("div")({
+  flex: 1,
+  fontSize: "12px",
+  fontWeight: 500,
+});
+
+const IconButtonWrapper = 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;
+    }
+  `;
+
 export default NamedRanges;

webapp/IronCalc/src/components/RightDrawer/RightDrawer.tsx

@@ -1,10 +1,5 @@
 import type { DefinedName, WorksheetProperties } from "@ironcalc/wasm";
-import Breadcrumbs from "@mui/material/Breadcrumbs";
-import Link from "@mui/material/Link";
-import Tooltip from "@mui/material/Tooltip";
 import { styled } from "@mui/material/styles";
-import { t } from "i18next";
-import { X } from "lucide-react";
 import type { MouseEvent as ReactMouseEvent, ReactNode } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { theme } from "../../theme";
@@ -115,48 +110,12 @@ const RightDrawer = ({
         $isResizing={isResizing}
         aria-label="Resize drawer"
       />
-      {showCloseButton && (
-        <Header>
-          <HeaderTitle>
-            <HeaderBreadcrumbs separator="›">
-              <HeaderBreadcrumbLink href="/">{title}</HeaderBreadcrumbLink>
-            </HeaderBreadcrumbs>
-          </HeaderTitle>
-          <Tooltip
-            title={t("right_drawer.close")}
-            slotProps={{
-              popper: {
-                modifiers: [
-                  {
-                    name: "offset",
-                    options: {
-                      offset: [0, -8],
-                    },
-                  },
-                ],
-              },
-            }}
-          >
-            <CloseButton
-              onClick={onClose}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  onClose();
-                }
-              }}
-              aria-label="Close drawer"
-              tabIndex={0}
-            >
-              <X />
-            </CloseButton>
-          </Tooltip>
-        </Header>
-      )}
       {children}
       <Divider />
       <DrawerContent>
         <NamedRanges
           title={title}
+          onClose={showCloseButton ? onClose : undefined}
           definedNameList={definedNameList}
           worksheets={worksheets}
           updateDefinedName={updateDefinedName}
@@ -178,7 +137,7 @@ const DrawerContainer = styled("div")<DrawerContainerProps>(
     overflow: "hidden",
     backgroundColor: theme.palette.common.white,
     right: 0,
-    top: `${TOOLBAR_HEIGHT + 1}px`,
+    top: `${TOOLBAR_HEIGHT}px`,
     bottom: 0,
     borderLeft: `1px solid ${theme.palette.grey[300]}`,
     width: `${$drawerWidth}px`,
@@ -187,47 +146,6 @@ const DrawerContainer = styled("div")<DrawerContainerProps>(
   }),
 );
 
-const Header = styled("div")({
-  height: "40px",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-end",
-  padding: "0 8px",
-});
-
-const HeaderTitle = styled("div")({
-  width: "100%",
-});
-
-const HeaderBreadcrumbs = styled(Breadcrumbs)({
-  fontSize: "12px",
-  marginRight: "8px",
-  width: "100%",
-});
-
-const HeaderBreadcrumbLink = styled(Link)({
-  color: theme.palette.grey[900],
-  textDecoration: "none",
-});
-
-const CloseButton = 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 Divider = styled("div")({
   height: "1px",
   width: "100%",

webapp/IronCalc/src/locale/en_us.json

@@ -104,13 +104,23 @@
     "name": "Name",
     "range": "Scope",
     "scope": "Range",
-    "help": "Learn more about Named Ranges",
+    "help": "About Named Ranges",
     "new": "Add new",
     "workbook": "Workbook",
     "global": "(Global)",
     "close": "Close dialog",
     "delete": "Delete Range",
     "edit": "Edit Range",
+    "back": "Back to list",
+    "add_new_range": "Add a new range",
+    "edit_range": "Edit range",
+    "new_named_range": "New Named Range",
+    "range_name": "Range name",
+    "enter_range_name": "Enter range name",
+    "scope_label": "Scope",
+    "scope_helper": "The scope of the named range determines where it is available.",
+    "refers_to": "Refers to",
+    "cancel": "Cancel",
     "apply": "Apply changes",
     "discard": "Discard changes"
   },