FIX[WebApp]: Rename navigation => SheetTabBar

Also rename all widgets in that folder to more standard names

webapp/src/components/SheetTabBar/SheetRenameDialog.tsx

@@ -4,8 +4,8 @@ import { useTranslation } from "react-i18next";
 import { theme } from "../../theme";
 
 interface SheetRenameDialogProps {
-  isOpen: boolean;
+  open: boolean;
-  close: () => void;
+  onClose: () => void;
   onNameChanged: (name: string) => void;
   defaultName: string;
 }
@@ -14,10 +14,10 @@ const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
   const { t } = useTranslation();
   const [name, setName] = useState(properties.defaultName);
   const handleClose = () => {
-    properties.close();
+    properties.onClose();
   };
   return (
-    <Dialog open={properties.isOpen} onClose={properties.close}>
+    <Dialog open={properties.open} onClose={properties.onClose}>
       <StyledDialogTitle>
         {t("sheet_rename.title")}
         <Cross onClick={handleClose} onKeyDown={() => {}}>
@@ -53,7 +53,7 @@ const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
             event.stopPropagation();
             if (event.key === "Enter") {
               properties.onNameChanged(name);
-              properties.close();
+              properties.onClose();
             }
           }}
           onChange={(event) => {

webapp/src/components/SheetTabBar/SheetTab.tsx

@@ -6,7 +6,7 @@ import { isInReferenceMode } from "../editor/util";
 import type { WorkbookState } from "../workbookState";
 import SheetRenameDialog from "./SheetRenameDialog";
 
-interface SheetProps {
+interface SheetTabProps {
   name: string;
   color: string;
   selected: boolean;
@@ -17,7 +17,7 @@ interface SheetProps {
   workbookState: WorkbookState;
 }
 
-function Sheet(props: SheetProps) {
+function SheetTab(props: SheetTabProps) {
   const { name, color, selected, workbookState, onSelected } = props;
   const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
   const [colorPickerOpen, setColorPickerOpen] = useState(false);
@@ -100,8 +100,8 @@ function Sheet(props: SheetProps) {
         </StyledMenuItem>
       </StyledMenu>
       <SheetRenameDialog
-        isOpen={renameDialogOpen}
+        open={renameDialogOpen}
-        close={handleCloseRenameDialog}
+        onClose={handleCloseRenameDialog}
         defaultName={name}
         onNameChanged={(newName) => {
           props.onRenamed(newName);
@@ -159,4 +159,4 @@ const Name = styled("div")`
   text-wrap: nowrap;
 `;
 
-export default Sheet;
+export default SheetTab;

webapp/src/components/SheetTabBar/SheetTabBar.tsx

@@ -7,10 +7,10 @@ import { NAVIGATION_HEIGHT } from "../constants";
 import { StyledButton } from "../toolbar";
 import type { WorkbookState } from "../workbookState";
 import SheetListMenu from "./SheetListMenu";
-import Sheet from "./sheet";
+import SheetTab from "./SheetTab";
 import type { SheetOptions } from "./types";
 
-export interface NavigationProps {
+export interface SheetTabBarProps {
   sheets: SheetOptions[];
   selectedIndex: number;
   workbookState: WorkbookState;
@@ -21,7 +21,7 @@ export interface NavigationProps {
   onSheetDeleted: () => void;
 }
 
-function Navigation(props: NavigationProps) {
+function SheetTabBar(props: SheetTabBarProps) {
   const { t } = useTranslation();
   const { workbookState, onSheetSelected, sheets, selectedIndex } = props;
   const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
@@ -52,7 +52,7 @@ function Navigation(props: NavigationProps) {
       <Sheets>
         <SheetInner>
           {sheets.map((tab, index) => (
-            <Sheet
+            <SheetTab
               key={tab.sheetId}
               name={tab.name}
               color={tab.color}
@@ -133,4 +133,4 @@ const Advert = styled("a")`
   }
 `;
 
-export default Navigation;
+export default SheetTabBar;

webapp/src/components/SheetTabBar/index.ts

@@ -0,0 +1 @@
+export { default } from "./SheetTabBar";

webapp/src/components/navigation/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./navigation";
-export type { NavigationProps } from "./navigation";

webapp/src/components/workbook.tsx

@@ -6,6 +6,7 @@ import type {
 } from "@ironcalc/wasm";
 import { styled } from "@mui/material/styles";
 import { useCallback, useEffect, useRef, useState } from "react";
+import SheetTabBar from "./SheetTabBar/SheetTabBar";
 import {
   COLUMN_WIDTH_SCALE,
   LAST_COLUMN,
@@ -16,7 +17,6 @@ import {
   getNewClipboardId,
 } from "./clipboard";
 import FormulaBar from "./formulabar";
-import Navigation from "./navigation/navigation";
 import Toolbar from "./toolbar";
 import useKeyboardNavigation from "./useKeyboardNavigation";
 import { type NavigationKey, getCellAddress } from "./util";
@@ -572,7 +572,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
         }}
       />
 
-      <Navigation
+      <SheetTabBar
         sheets={info}
         selectedIndex={model.getSelectedSheet()}
         workbookState={workbookState}