update: open dialog from footer

webapp/IronCalc/src/components/SheetTabBar/SheetTabBar.tsx

@@ -1,11 +1,12 @@
 import { styled, Tooltip } from "@mui/material";
-import { Menu, Plus } from "lucide-react";
+import { EllipsisVertical, Menu, Plus } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { IronCalcLogo } from "../../icons";
 import { theme } from "../../theme";
 import { NAVIGATION_HEIGHT } from "../constants";
 import { StyledButton } from "../Toolbar/Toolbar";
+import WorkbookSettingsDialog from "../WorkbookSettings/WorkbookSettingsDialog";
 import type { WorkbookState } from "../workbookState";
 import SheetListMenu from "./SheetListMenu";
 import SheetTab from "./SheetTab";
@@ -21,12 +22,14 @@ export interface SheetTabBarProps {
   onSheetRenamed: (name: string) => void;
   onSheetDeleted: () => void;
   onHideSheet: () => void;
+  onOpenWorkbookSettings: () => void;
 }
 
 function SheetTabBar(props: SheetTabBarProps) {
   const { t } = useTranslation();
   const { workbookState, onSheetSelected, sheets, selectedIndex } = props;
   const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
+  const [workbookSettingsOpen, setWorkbookSettingsOpen] = useState(false);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
@@ -95,6 +98,17 @@ function SheetTabBar(props: SheetTabBarProps) {
             <IronCalcLogo />
           </LogoLink>
         </Tooltip>
+        <Tooltip title={t("navigation.settings")}>
+          <StyledButton
+            $pressed={false}
+            onClick={() => {
+              setWorkbookSettingsOpen(true);
+              props.onOpenWorkbookSettings();
+            }}
+          >
+            <EllipsisVertical />
+          </StyledButton>
+        </Tooltip>
       </RightContainer>
       <SheetListMenu
         anchorEl={anchorEl}
@@ -107,6 +121,11 @@ function SheetTabBar(props: SheetTabBarProps) {
         }}
         selectedIndex={selectedIndex}
       />
+      <WorkbookSettingsDialog
+        open={workbookSettingsOpen}
+        onClose={() => setWorkbookSettingsOpen(false)}
+        onExited={() => setWorkbookSettingsOpen(false)}
+      />
     </Container>
   );
 }
@@ -170,6 +189,7 @@ const RightContainer = styled("a")`
   color: ${theme.palette.primary.main};
   height: 100%;
   padding: 0px 8px;
+  gap: 4px;
   @media (max-width: 769px) {
     display: none;
   }
@@ -178,14 +198,19 @@ const RightContainer = styled("a")`
 const LogoLink = styled("div")`
   display: flex;
   align-items: center;
-  padding: 8px;
+  padding: 0px 4px;
   border-radius: 4px;
+  max-height: 24px;
+  min-height: 24px;
+  cursor: pointer;
   svg {
     height: 14px;
     width: auto;
   }
   &:hover {
     background-color: ${theme.palette.grey["100"]};
+    transition: "all 0.2s";
+    outline: 1px solid ${theme.palette.grey["200"]};
   }
 `;
 

webapp/IronCalc/src/components/WorkbookSettings/WorkbookSettingsDialog.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
 import { theme } from "../../theme";
 
 type WorkbookSettingsDialogProps = {
-  className?: string;
   open: boolean;
   onClose: () => void;
   onExited: () => void;
@@ -19,13 +18,7 @@ const WorkbookSettingsDialog = (properties: WorkbookSettingsDialogProps) => {
   };
 
   return (
-    <Dialog
-      open={properties.open}
-      onClose={properties.onClose}
-      PaperProps={{
-        style: { minWidth: "280px" },
-      }}
-    >
+    <StyledDialog open={properties.open} onClose={properties.onClose}>
       <StyledDialogTitle>
         {t("workbook_settings.title")}
         <Cross
@@ -41,14 +34,22 @@ const WorkbookSettingsDialog = (properties: WorkbookSettingsDialogProps) => {
           <X />
         </Cross>
       </StyledDialogTitle>
-
       <StyledDialogContent>
         {/* Settings content will go here */}
       </StyledDialogContent>
-    </Dialog>
+    </StyledDialog>
   );
 };
 
+const StyledDialog = styled(Dialog)`
+  & .MuiPaper-root {
+    max-width: 400px;
+    min-width: 280px;
+    border-radius: 8px;
+    padding: 0px;
+  }
+`;
+
 const StyledDialogTitle = styled("div")`
   display: flex;
   align-items: center;

webapp/IronCalc/src/locale/en_us.json

@@ -167,5 +167,9 @@
   "right_drawer": {
     "close": "Close",
     "resize_drawer": "Resize drawer"
+  },
+  "workbook_settings": {
+    "title": "Workbook Settings",
+    "close": "Close dialog"
   }
 }