FIX[WebApp]: Disable delete for sheet if it is the last one

webapp/src/components/SheetTabBar/SheetTab.tsx

@@ -1,4 +1,4 @@
-import { Button, Menu, MenuItem, styled } from "@mui/material";
+import { Button, Menu, MenuItem, MenuItemProps, styled } from "@mui/material";
 import { ChevronDown } from "lucide-react";
 import { useRef, useState } from "react";
 import { theme } from "../../theme";
@@ -14,6 +14,7 @@ interface SheetTabProps {
   onSelected: () => void;
   onColorChanged: (hex: string) => void;
   onRenamed: (name: string) => void;
+  canDelete: () => boolean;
   onDeleted: () => void;
   workbookState: WorkbookState;
 }
@@ -92,6 +93,7 @@ function SheetTab(props: SheetTabProps) {
           Change Color
         </StyledMenuItem>
         <StyledMenuItem
+          disabled={!props.canDelete()}
           onClick={() => {
             props.onDeleted();
             handleClose();
@@ -137,16 +139,20 @@ 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

@@ -67,6 +67,9 @@ function SheetTabBar(props: SheetTabBarProps) {
               onRenamed={(name: string): void => {
                 props.onSheetRenamed(name);
               }}
+              canDelete={(): boolean => {
+                return sheets.length > 1;
+              }}
               onDeleted={(): void => {
                 props.onSheetDeleted();
               }}