UPDATE: Add an empty state message to the Name Manager

webapp/IronCalc/src/components/NameManagerDialog/NameManagerDialog.tsx

@@ -10,7 +10,7 @@ import {
   styled,
 } from "@mui/material";
 import { t } from "i18next";
-import { BookOpen, Plus, X } from "lucide-react";
+import { BookOpen, PackageOpen, Plus, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { theme } from "../../theme";
 import NamedRangeActive from "./NamedRangeActive";
@@ -79,11 +79,23 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
         </Cross>
       </StyledDialogTitle>
       <StyledDialogContent>
+        {(definedNameList.length > 0 || editingNameIndex !== -2) && (
           <StyledRangesHeader>
             <StyledBox>{t("name_manager_dialog.name")}</StyledBox>
             <StyledBox>{t("name_manager_dialog.range")}</StyledBox>
             <StyledBox>{t("name_manager_dialog.scope")}</StyledBox>
           </StyledRangesHeader>
+        )}
+        {definedNameList.length === 0 && editingNameIndex === -2 ? (
+          <EmptyStateMessage>
+            <IconWrapper>
+              <PackageOpen />
+            </IconWrapper>
+            {t("name_manager_dialog.empty_message1")}
+            <br />
+            {t("name_manager_dialog.empty_message2")}
+          </EmptyStateMessage>
+        ) : (
           <NameListWrapper>
             {definedNameList.map((definedName, index) => {
               const scopeName = definedName.scope
@@ -138,6 +150,7 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
               );
             })}
           </NameListWrapper>
+        )}
         {editingNameIndex === -1 && (
           <NamedRangeActive
             worksheets={worksheets}
@@ -230,6 +243,39 @@ const NameListWrapper = styled(Stack)`
   overflow-y: auto;
 `;
 
+const EmptyStateMessage = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  color: ${theme.palette.grey["600"]};
+  font-family: "Inter";
+  z-index: 0;
+  margin: auto 0px;
+  position: relative;
+`;
+
+const IconWrapper = styled("div")`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  background-color: ${theme.palette.grey["100"]};
+  color: ${theme.palette.grey["600"]};
+  svg {
+    width: 16px;
+    height: 16px;
+    stroke-width: 2;
+  }
+`;
+
 const StyledBox = styled(Box)`
   display: flex;
   flex-direction: column;

webapp/IronCalc/src/locale/en_us.json

@@ -85,6 +85,8 @@
   },
   "name_manager_dialog": {
     "title": "Named Ranges",
+    "empty_message1": "No named ranges added yet.",
+    "empty_message2": "Click on 'Add new' to add one.",
     "name": "Name",
     "range": "Scope",
     "scope": "Range",