update: add a welcome dialog to the app

webapp/app.ironcalc.com/frontend/src/App.tsx

@@ -2,6 +2,7 @@ import "./App.css";
 import styled from "@emotion/styled";
 import { useEffect, useState } from "react";
 import { FileBar } from "./components/FileBar";
+import WelcomeDialog from "./components/WelcomeDialog/WelcomeDialog";
 import {
   get_documentation_model,
   get_model,
@@ -21,6 +22,7 @@ import { IronCalc, IronCalcIcon, Model, init } from "@ironcalc/workbook";
 
 function App() {
   const [model, setModel] = useState<Model | null>(null);
+  const [showWelcomeDialog, setShowWelcomeDialog] = useState(true);
 
   useEffect(() => {
     async function start() {
@@ -109,6 +111,9 @@ function App() {
         }}
       />
       <IronCalc model={model} />
+      {showWelcomeDialog && (
+        <WelcomeDialog onClose={() => setShowWelcomeDialog(false)} />
+      )}
     </Wrapper>
   );
 }

webapp/app.ironcalc.com/frontend/src/components/WelcomeDialog/WelcomeDialog.tsx

@@ -0,0 +1,211 @@
+import { Dialog, styled } from "@mui/material";
+import { House, Table, TicketsPlane, X } from "lucide-react";
+import { useState } from "react";
+import TemplatesListItem from "./TemplatesListItem";
+import IronCalcIcon from "./ironcalc_icon_white.svg";
+
+function WelcomeDialog(properties: {
+  onClose: () => void;
+}) {
+  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(
+    "blank",
+  );
+
+  const handleClose = () => {
+    properties.onClose();
+  };
+
+  const handleTemplateSelect = (templateId: string) => {
+    setSelectedTemplate(templateId);
+  };
+
+  return (
+    <DialogWrapper open={true} onClose={() => {}}>
+      <DialogHeader>
+        <DialogHeaderTitleWrapper>
+          <DialogHeaderLogoWrapper>
+            <DialogHeaderLogo src={IronCalcIcon} />
+          </DialogHeaderLogoWrapper>
+          <DialogHeaderTitle>Welcome to IronCalc</DialogHeaderTitle>
+          <DialogHeaderTitleSubtitle>
+            Start with a blank workbook or a ready-made template.
+          </DialogHeaderTitleSubtitle>
+        </DialogHeaderTitleWrapper>
+        <Cross
+          onClick={handleClose}
+          title="Close Dialog"
+          tabIndex={0}
+          onKeyDown={(event) => event.key === "Enter" && properties.onClose()}
+        >
+          <X />
+        </Cross>
+      </DialogHeader>
+      <DialogContent>
+        <ListTitle>New</ListTitle>
+        <TemplatesListWrapper>
+          <TemplatesListItem
+            title="Blank workbook"
+            description="Create from scratch or upload your own file."
+            icon={<Table />}
+            iconColor="#F2994A"
+            active={selectedTemplate === "blank"}
+            onClick={() => handleTemplateSelect("blank")}
+          />
+        </TemplatesListWrapper>
+        <ListTitle>Templates</ListTitle>
+        <TemplatesListWrapper>
+          <TemplatesListItem
+            title="Mortgage calculator"
+            description="Estimate payments, interest, and overall cost."
+            icon={<House />}
+            iconColor="#2F80ED"
+            active={selectedTemplate === "mortgage"}
+            onClick={() => handleTemplateSelect("mortgage")}
+          />
+          <TemplatesListItem
+            title="Travel expenses tracker"
+            description="Track trip costs and stay on budget."
+            icon={<TicketsPlane />}
+            iconColor="#EB5757"
+            active={selectedTemplate === "travel"}
+            onClick={() => handleTemplateSelect("travel")}
+          />
+        </TemplatesListWrapper>
+      </DialogContent>
+      <DialogFooter>
+        <DialogFooterButton>Create workbook</DialogFooterButton>
+      </DialogFooter>
+    </DialogWrapper>
+  );
+}
+
+const DialogWrapper = styled(Dialog)`
+  font-family: Inter;
+  .MuiDialog-paper {
+    width: 440px;
+    border-radius: 12px;
+    margin: 16px;
+    border: 1px solid #e0e0e0;;
+  }
+  .MuiBackdrop-root {
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+`;
+
+const DialogHeader = styled("div")`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 16px;
+  font-family: Inter;
+`;
+
+const DialogHeaderTitleWrapper = styled("span")`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 4px 0px;
+  gap: 4px;
+  width: 100%;
+`;
+
+const DialogHeaderTitle = styled("span")`
+  font-weight: 700;
+`;
+
+const DialogHeaderTitleSubtitle = styled("span")`
+  font-size: 12px;
+  color: #757575;
+`;
+
+const DialogHeaderLogoWrapper = styled("div")`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  max-width: 20px;
+  max-height: 20px;
+  background-color: #F2994A;
+  padding: 10px;
+  margin-bottom: 12px;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transform: rotate(-8deg);
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+`;
+
+const DialogHeaderLogo = styled("img")`
+  width: 18px;
+  height: auto;
+`;
+
+const Cross = styled("div")`
+  &:hover {
+    background-color: #f5f5f5;
+  }
+  display: flex;
+  border-radius: 4px;
+  min-height: 24px;
+  min-width: 24px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  svg {
+    width: 16px;
+    height: 16px;
+    stroke-width: 1.5;
+  }
+`;
+
+const DialogContent = styled("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  max-height: 300px;
+  overflow: hidden;
+  overflow-y: auto;
+`;
+
+const ListTitle = styled("div")`
+  font-size: 12px;
+  font-weight: 600;
+  color: #424242;
+`;
+
+const TemplatesListWrapper = styled("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const DialogFooter = styled("div")`
+  border-top: 1px solid #e0e0e0;
+  padding: 16px;
+`;
+
+const DialogFooterButton = styled("button")`
+  background-color: #F2994A;
+  border: none;
+  color: #FFF;
+  padding: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  width: 100%;
+  font-size: 12px;
+  font-family: Inter;
+  &:hover {
+    background-color: #D68742;
+  }
+  &:active {
+    background-color: #D68742;
+  }
+`;
+
+export default WelcomeDialog;

webapp/app.ironcalc.com/frontend/src/components/WelcomeDialog/ironcalc_icon_white.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.8" d="M9.95898 8.08594C9.60893 8.35318 9.27389 8.64313 8.95898 8.95801C7.09126 10.8257 6.042 13.3586 6.04199 16H6.04102V7.91406C6.39142 7.64662 6.72781 7.35715 7.04297 7.04199C8.90157 5.18307 9.9492 2.6648 9.95898 0.0371094V8.08594Z" fill="white"/>
+<path opacity="0.8" d="M6.04102 7.91406C4.31493 9.23162 2.19571 9.95898 0 9.95898V6.04102C1.60208 6.04102 3.13861 5.40429 4.27148 4.27148C5.40436 3.13861 6.04101 1.60213 6.04102 0L6.04102 7.91406Z" fill="white"/>
+<path opacity="0.8" d="M9.95947 8.08594C11.6856 6.76838 13.8048 6.04102 16.0005 6.04102V9.95898C14.3984 9.95898 12.8619 10.5957 11.729 11.7285C10.5961 12.8614 9.95948 14.3979 9.95947 16L9.95947 8.08594Z" fill="white"/>
+<path d="M9.95898 0C9.95898 2.64126 8.90957 5.17429 7.04199 7.04199C6.727 7.35698 6.39119 7.64674 6.04102 7.91406L6.04102 0H9.95898Z" fill="white"/>
+<path d="M6.04102 16C6.04102 13.3587 7.09042 10.8257 8.95801 8.95801C9.273 8.64302 9.60881 8.35326 9.95898 8.08594V16H6.04102Z" fill="white"/>
+</svg>