FIX[WebApp]: Splits the menu.tsx in two files

This is so that SheetListMenu and SheetRenameDialog are on its own files.

Also renamed isOpen => open and close => onClose

webapp/src/components/navigation/SheetListMenu.tsx

@@ -0,0 +1,99 @@
+import { styled } from "@mui/material";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { Check } from "lucide-react";
+import type { SheetOptions } from "./types";
+
+function isWhiteColor(color: string): boolean {
+  return ["#FFF", "#FFFFFF"].includes(color);
+}
+
+interface SheetListMenuProps {
+  open: boolean;
+  onClose: () => void;
+  anchorEl: HTMLButtonElement | null;
+  onSheetSelected: (index: number) => void;
+  sheetOptionsList: SheetOptions[];
+  selectedIndex: number;
+}
+
+const SheetListMenu = (properties: SheetListMenuProps) => {
+  const {
+    open,
+    onClose,
+    anchorEl,
+    onSheetSelected,
+    sheetOptionsList,
+    selectedIndex,
+  } = properties;
+
+  const hasColors = sheetOptionsList.some((tab) => !isWhiteColor(tab.color));
+
+  return (
+    <StyledMenu
+      open={open}
+      onClose={onClose}
+      anchorEl={anchorEl}
+      anchorOrigin={{
+        vertical: "top",
+        horizontal: "left",
+      }}
+      transformOrigin={{
+        vertical: "bottom",
+        horizontal: 6,
+      }}
+    >
+      {sheetOptionsList.map((tab, index) => (
+        <StyledMenuItem
+          key={tab.sheetId}
+          onClick={() => onSheetSelected(index)}
+        >
+          {index === selectedIndex ? (
+            <Check
+              style={{ width: "16px", height: "16px", marginRight: "8px" }}
+            />
+          ) : (
+            <div
+              style={{ width: "16px", height: "16px", marginRight: "8px" }}
+            />
+          )}
+          {hasColors && <ItemColor style={{ backgroundColor: tab.color }} />}
+          <ItemName
+            style={{ fontWeight: index === selectedIndex ? "bold" : "normal" }}
+          >
+            {tab.name}
+          </ItemName>
+        </StyledMenuItem>
+      ))}
+    </StyledMenu>
+  );
+};
+
+const StyledMenu = styled(Menu)({
+  "& .MuiPaper-root": {
+    borderRadius: 8,
+    padding: 4,
+  },
+  "& .MuiList-padding": {
+    padding: 0,
+  },
+});
+
+const StyledMenuItem = styled(MenuItem)({
+  padding: 8,
+  borderRadius: 4,
+});
+
+const ItemColor = styled("div")`
+  width: 12px;
+  height: 12px;
+  border-radius: 4px;
+  margin-right: 8px;
+`;
+
+const ItemName = styled("div")`
+  font-size: 12px;
+  color: #333;
+`;
+
+export default SheetListMenu;

webapp/src/components/navigation/SheetRenameDialog.tsx

@@ -1,15 +1,7 @@
 import { Dialog, TextField, styled } from "@mui/material";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import { Check } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { theme } from "../../theme";
-import type { SheetOptions } from "./types";
-
-function isWhiteColor(color: string): boolean {
-  return ["#FFF", "#FFFFFF"].includes(color);
-}
 
 interface SheetRenameDialogProps {
   isOpen: boolean;
@@ -18,7 +10,7 @@ interface SheetRenameDialogProps {
   defaultName: string;
 }
 
-export const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
+const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
   const { t } = useTranslation();
   const [name, setName] = useState(properties.defaultName);
   const handleClose = () => {
@@ -84,94 +76,6 @@ export const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
   );
 };
 
-interface SheetListMenuProps {
-  isOpen: boolean;
-  close: () => void;
-  anchorEl: HTMLButtonElement | null;
-  onSheetSelected: (index: number) => void;
-  sheetOptionsList: SheetOptions[];
-  selectedIndex: number;
-}
-
-const SheetListMenu = (properties: SheetListMenuProps) => {
-  const {
-    isOpen,
-    close,
-    anchorEl,
-    onSheetSelected,
-    sheetOptionsList,
-    selectedIndex,
-  } = properties;
-
-  const hasColors = sheetOptionsList.some((tab) => !isWhiteColor(tab.color));
-
-  return (
-    <StyledMenu
-      open={isOpen}
-      onClose={close}
-      anchorEl={anchorEl}
-      anchorOrigin={{
-        vertical: "top",
-        horizontal: "left",
-      }}
-      transformOrigin={{
-        vertical: "bottom",
-        horizontal: 6,
-      }}
-    >
-      {sheetOptionsList.map((tab, index) => (
-        <StyledMenuItem
-          key={tab.sheetId}
-          onClick={() => onSheetSelected(index)}
-        >
-          {index === selectedIndex ? (
-            <Check
-              style={{ width: "16px", height: "16px", marginRight: "8px" }}
-            />
-          ) : (
-            <div
-              style={{ width: "16px", height: "16px", marginRight: "8px" }}
-            />
-          )}
-          {hasColors && <ItemColor style={{ backgroundColor: tab.color }} />}
-          <ItemName
-            style={{ fontWeight: index === selectedIndex ? "bold" : "normal" }}
-          >
-            {tab.name}
-          </ItemName>
-        </StyledMenuItem>
-      ))}
-    </StyledMenu>
-  );
-};
-
-const StyledMenu = styled(Menu)({
-  "& .MuiPaper-root": {
-    borderRadius: 8,
-    padding: 4,
-  },
-  "& .MuiList-padding": {
-    padding: 0,
-  },
-});
-
-const StyledMenuItem = styled(MenuItem)({
-  padding: 8,
-  borderRadius: 4,
-});
-
-const ItemColor = styled("div")`
-  width: 12px;
-  height: 12px;
-  border-radius: 4px;
-  margin-right: 8px;
-`;
-
-const ItemName = styled("div")`
-  font-size: 12px;
-  color: #333;
-`;
-
 const StyledDialogTitle = styled("div")`
   display: flex;
   align-items: center;
@@ -246,4 +150,4 @@ const StyledButton = styled("div")`
   }
 `;
 
-export default SheetListMenu;
+export default SheetRenameDialog;

webapp/src/components/navigation/navigation.tsx

@@ -6,7 +6,7 @@ import { theme } from "../../theme";
 import { NAVIGATION_HEIGHT } from "../constants";
 import { StyledButton } from "../toolbar";
 import type { WorkbookState } from "../workbookState";
-import SheetListMenu from "./menus";
+import SheetListMenu from "./SheetListMenu";
 import Sheet from "./sheet";
 import type { SheetOptions } from "./types";
 
@@ -77,8 +77,8 @@ function Navigation(props: NavigationProps) {
       </Advert>
       <SheetListMenu
         anchorEl={anchorEl}
-        isOpen={open}
+        open={open}
-        close={handleClose}
+        onClose={handleClose}
         sheetOptionsList={sheets}
         onSheetSelected={(index) => {
           onSheetSelected(index);

webapp/src/components/navigation/sheet.tsx

@@ -4,7 +4,7 @@ import { useRef, useState } from "react";
 import ColorPicker from "../colorPicker";
 import { isInReferenceMode } from "../editor/util";
 import type { WorkbookState } from "../workbookState";
-import { SheetRenameDialog } from "./menus";
+import SheetRenameDialog from "./SheetRenameDialog";
 
 interface SheetProps {
   name: string;