UPDATE: WIP

Since https://github.com/ironcalc/IronCalc/pull/27, using
`base::model::Model` complains about `model` being a private modulde,
and `base::Model` should be used instead.

README.md

@@ -84,7 +84,7 @@ And then use this code in `main.rs`:
 
 ```rust
 use ironcalc::{
-    base::{expressions::utils::number_to_column, model::Model},
+    base::{expressions::utils::number_to_column, Model},
     export::save_to_xlsx,
 };
 

webapp/IronCalc/src/components/FormulaBar/FormulaBar.tsx

@@ -99,10 +99,9 @@ const FormulaSymbolButton = styled(StyledButton)`
 
 const Divider = styled("div")`
   background-color: ${theme.palette.grey["300"]};
-  width: 1px;
+  min-width: 1px;
-  height: 20px;
+  height: 16px;
-  margin-left: 16px;
+  margin: 0px 16px;
-  margin-right: 16px;
 `;
 
 const FormulaContainer = styled("div")`

webapp/IronCalc/src/components/Workbook/Workbook.tsx

@@ -22,6 +22,7 @@ import {
   CLIPBOARD_ID_SESSION_STORAGE_KEY,
   getNewClipboardId,
 } from "../clipboard";
+import { TOOLBAR_HEIGHT } from "../constants";
 import {
   type NavigationKey,
   getCellAddress,
@@ -41,6 +42,8 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
   // This is needed because `model` or `workbookState` can change without React being aware of it
   const setRedrawId = useState(0)[1];
 
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+
   const worksheets = model.getWorksheetsProperties();
   const info = worksheets.map(
     ({ name, color, sheet_id, state }: WorksheetProperties) => {
@@ -692,77 +695,119 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           worksheets,
           definedNameList: model.getDefinedNameList(),
         }}
-      />
+        openDrawer={() => {
-      <FormulaBar
+          setDrawerOpen(true);
-        cellAddress={cellAddress()}
-        formulaValue={formulaValue()}
-        onChange={() => {
-          setRedrawId((id) => id + 1);
-          focusWorkbook();
         }}
-        onTextUpdated={() => {
-          setRedrawId((id) => id + 1);
-        }}
-        model={model}
-        workbookState={workbookState}
-      />
-      <Worksheet
-        model={model}
-        workbookState={workbookState}
-        refresh={(): void => {
-          setRedrawId((id) => id + 1);
-        }}
-        ref={worksheetRef}
       />
+      <WorksheetAreaLeft $drawerWidth={isDrawerOpen ? DRAWER_WIDTH : 0}>
+        <FormulaBar
+          cellAddress={cellAddress()}
+          formulaValue={formulaValue()}
+          onChange={() => {
+            setRedrawId((id) => id + 1);
+            focusWorkbook();
+          }}
+          onTextUpdated={() => {
+            setRedrawId((id) => id + 1);
+          }}
+          model={model}
+          workbookState={workbookState}
+        />
+        <Worksheet
+          model={model}
+          workbookState={workbookState}
+          refresh={(): void => {
+            setRedrawId((id) => id + 1);
+          }}
+          ref={worksheetRef}
+        />
 
-      <SheetTabBar
+        <SheetTabBar
-        sheets={info}
+          sheets={info}
-        selectedIndex={model.getSelectedSheet()}
+          selectedIndex={model.getSelectedSheet()}
-        workbookState={workbookState}
+          workbookState={workbookState}
-        onSheetSelected={(sheet: number): void => {
+          onSheetSelected={(sheet: number): void => {
-          if (info[sheet].state !== "visible") {
+            if (info[sheet].state !== "visible") {
-            model.unhideSheet(sheet);
+              model.unhideSheet(sheet);
-          }
+            }
-          model.setSelectedSheet(sheet);
+            model.setSelectedSheet(sheet);
-          setRedrawId((value) => value + 1);
-        }}
-        onAddBlankSheet={(): void => {
-          model.newSheet();
-          setRedrawId((value) => value + 1);
-        }}
-        onSheetColorChanged={(hex: string): void => {
-          try {
-            model.setSheetColor(model.getSelectedSheet(), hex);
             setRedrawId((value) => value + 1);
-          } catch (e) {
+          }}
-            // TODO: Show a proper modal dialog
+          onAddBlankSheet={(): void => {
-            alert(`${e}`);
+            model.newSheet();
-          }
-        }}
-        onSheetRenamed={(name: string): void => {
-          try {
-            model.renameSheet(model.getSelectedSheet(), name);
             setRedrawId((value) => value + 1);
-          } catch (e) {
+          }}
-            // TODO: Show a proper modal dialog
+          onSheetColorChanged={(hex: string): void => {
-            alert(`${e}`);
+            try {
-          }
+              model.setSheetColor(model.getSelectedSheet(), hex);
-        }}
+              setRedrawId((value) => value + 1);
-        onSheetDeleted={(): void => {
+            } catch (e) {
-          const selectedSheet = model.getSelectedSheet();
+              // TODO: Show a proper modal dialog
-          model.deleteSheet(selectedSheet);
+              alert(`${e}`);
-          setRedrawId((value) => value + 1);
+            }
-        }}
+          }}
-        onHideSheet={(): void => {
+          onSheetRenamed={(name: string): void => {
-          const selectedSheet = model.getSelectedSheet();
+            try {
-          model.hideSheet(selectedSheet);
+              model.renameSheet(model.getSelectedSheet(), name);
-          setRedrawId((value) => value + 1);
+              setRedrawId((value) => value + 1);
-        }}
+            } catch (e) {
-      />
+              // TODO: Show a proper modal dialog
+              alert(`${e}`);
+            }
+          }}
+          onSheetDeleted={(): void => {
+            const selectedSheet = model.getSelectedSheet();
+            model.deleteSheet(selectedSheet);
+            setRedrawId((value) => value + 1);
+          }}
+          onHideSheet={(): void => {
+            const selectedSheet = model.getSelectedSheet();
+            model.hideSheet(selectedSheet);
+            setRedrawId((value) => value + 1);
+          }}
+        />
+      </WorksheetAreaLeft>
+      <WorksheetAreaRight $drawerWidth={isDrawerOpen ? DRAWER_WIDTH : 0}>
+        <span
+          onClick={() => setDrawerOpen(false)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setDrawerOpen(false);
+            }
+          }}
+          aria-label="Close drawer"
+        >
+          x
+        </span>
+      </WorksheetAreaRight>
     </Container>
   );
 };
 
+const DRAWER_WIDTH = 300;
+
+type WorksheetAreaLeftProps = { $drawerWidth: number };
+const WorksheetAreaLeft = styled("div")<WorksheetAreaLeftProps>(
+  ({ $drawerWidth }) => ({
+    position: "absolute",
+    top: `${TOOLBAR_HEIGHT + 1}px`,
+    width: `calc(100% - ${$drawerWidth}px)`,
+    height: `calc(100% - ${TOOLBAR_HEIGHT + 1}px)`,
+  }),
+);
+
+const WorksheetAreaRight = styled("div")<WorksheetAreaLeftProps>(
+  ({ $drawerWidth }) => ({
+    position: "absolute",
+    overflow: "hidden",
+    backgroundColor: "red",
+    right: 0,
+    top: `${TOOLBAR_HEIGHT + 1}px`,
+    bottom: 0,
+    width: `${$drawerWidth}px`,
+  }),
+);
+
 const Container = styled("div")`
   display: flex;
   flex-direction: column;

webapp/IronCalc/src/components/Worksheet/Worksheet.tsx

@@ -18,11 +18,7 @@ import {
   outlineColor,
 } from "../WorksheetCanvas/constants";
 import WorksheetCanvas from "../WorksheetCanvas/worksheetCanvas";
-import {
+import { FORMULA_BAR_HEIGHT, NAVIGATION_HEIGHT } from "../constants";
-  FORMULA_BAR_HEIGHT,
-  NAVIGATION_HEIGHT,
-  TOOLBAR_HEIGHT,
-} from "../constants";
 import type { Cell } from "../types";
 import type { WorkbookState } from "../workbookState";
 import CellContextMenu from "./CellContextMenu";
@@ -459,7 +455,7 @@ const SheetContainer = styled("div")`
 const Wrapper = styled("div")({
   position: "absolute",
   overflow: "scroll",
-  top: TOOLBAR_HEIGHT + FORMULA_BAR_HEIGHT + 1,
+  top: FORMULA_BAR_HEIGHT + 1,
   left: 0,
   right: 0,
   bottom: NAVIGATION_HEIGHT + 1,

webapp/IronCalc/src/components/constants.tsx

@@ -1,3 +1,3 @@
-export const TOOLBAR_HEIGHT = 48;
+export const TOOLBAR_HEIGHT = 40;
 export const FORMULA_BAR_HEIGHT = 40;
 export const NAVIGATION_HEIGHT = 40;

webapp/IronCalc/src/icons/index.ts

@@ -18,6 +18,7 @@ import InsertRowAboveIcon from "./insert-row-above.svg?react";
 import InsertRowBelow from "./insert-row-below.svg?react";
 
 import IronCalcIcon from "./ironcalc_icon.svg?react";
+import IronCalcIconWhite from "./ironcalc_icon_white.svg?react";
 import IronCalcLogo from "./orange+black.svg?react";
 
 import Fx from "./fx.svg?react";
@@ -41,6 +42,7 @@ export {
   InsertRowAboveIcon,
   InsertRowBelow,
   IronCalcIcon,
+  IronCalcIconWhite,
   IronCalcLogo,
   Fx,
 };

webapp/IronCalc/src/icons/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>

webapp/IronCalc/src/index.ts

@@ -1,5 +1,5 @@
 import init, { Model } from "@ironcalc/wasm";
 import IronCalc from "./IronCalc";
-import { IronCalcIcon, IronCalcLogo } from "./icons";
+import { IronCalcIcon, IronCalcIconWhite, IronCalcLogo } from "./icons";
 
-export { init, Model, IronCalc, IronCalcIcon, IronCalcLogo };
+export { init, Model, IronCalc, IronCalcIcon, IronCalcIconWhite, IronCalcLogo };

webapp/IronCalc/src/locale/en_us.json

@@ -27,13 +27,15 @@
     "vertical_align_top": "Align top",
     "selected_png": "Export Selected area as PNG",
     "wrap_text": "Wrap text",
+    "scroll_left": "Scroll left",
+    "scroll_right": "Scroll right",
     "format_menu": {
       "auto": "Auto",
       "number": "Number",
       "percentage": "Percentage",
       "currency_eur": "Euro (EUR)",
       "currency_usd": "Dollar (USD)",
-      "currency_gbp": "British Pound (GBD)",
+      "currency_gbp": "British Pound (GBP)",
       "date_short": "Short date",
       "date_long": "Long date",
       "custom": "Custom",

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,
@@ -10,7 +11,8 @@ import {
 import {
   createNewModel,
   deleteSelectedModel,
-  loadModelFromStorageOrCreate,
+  isStorageEmpty,
+  loadSelectedModelFromStorage,
   saveModelToStorage,
   saveSelectedModelInStorage,
   selectModelFromStorage,
@@ -18,9 +20,13 @@ import {
 
 // From IronCalc
 import { IronCalc, IronCalcIcon, Model, init } from "@ironcalc/workbook";
+import { Modal } from "@mui/material";
+import TemplatesDialog from "./components/WelcomeDialog/TemplatesDialog";
 
 function App() {
   const [model, setModel] = useState<Model | null>(null);
+  const [showWelcomeDialog, setShowWelcomeDialog] = useState(false);
+  const [isTemplatesDialogOpen, setTemplatesDialogOpen] = useState(false);
 
   useEffect(() => {
     async function start() {
@@ -52,8 +58,14 @@ function App() {
         }
       } else {
         // try to load from local storage
-        const newModel = loadModelFromStorageOrCreate();
+        const newModel = loadSelectedModelFromStorage();
-        setModel(newModel);
+        if (!newModel) {
+          setShowWelcomeDialog(true);
+          const createdModel = new Model("template", "en", "UTC");
+          setModel(createdModel);
+        } else {
+          setModel(newModel);
+        }
       }
     }
     start();
@@ -93,7 +105,11 @@ function App() {
           setModel(newModel);
         }}
         newModel={() => {
-          setModel(createNewModel());
+          const createdModel = createNewModel();
+          setModel(createdModel);
+        }}
+        newModelFromTemplate={() => {
+          setTemplatesDialogOpen(true);
         }}
         setModel={(uuid: string) => {
           const newModel = selectModelFromStorage(uuid);
@@ -109,6 +125,51 @@ function App() {
         }}
       />
       <IronCalc model={model} />
+      {showWelcomeDialog && (
+        <WelcomeDialog
+          onClose={() => {
+            if (isStorageEmpty()) {
+              const createdModel = createNewModel();
+              setModel(createdModel);
+            }
+            setShowWelcomeDialog(false);
+          }}
+          onSelectTemplate={async (templateId) => {
+            switch (templateId) {
+              case "blank": {
+                const createdModel = createNewModel();
+                setModel(createdModel);
+                break;
+              }
+              default: {
+                const model_bytes = await get_documentation_model(templateId);
+                const importedModel = Model.from_bytes(model_bytes);
+                saveModelToStorage(importedModel);
+                setModel(importedModel);
+                break;
+              }
+            }
+            setShowWelcomeDialog(false);
+          }}
+        />
+      )}
+      <Modal
+        open={isTemplatesDialogOpen}
+        onClose={() => setTemplatesDialogOpen(false)}
+        aria-labelledby="templates-dialog-title"
+        aria-describedby="templates-dialog-description"
+      >
+        <TemplatesDialog
+          onClose={() => setTemplatesDialogOpen(false)}
+          onSelectTemplate={async (fileName) => {
+            const model_bytes = await get_documentation_model(fileName);
+            const importedModel = Model.from_bytes(model_bytes);
+            saveModelToStorage(importedModel);
+            setModel(importedModel);
+            setTemplatesDialogOpen(false);
+          }}
+        />
+      </Modal>
     </Wrapper>
   );
 }

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

@@ -27,6 +27,7 @@ function useWindowWidth() {
 export function FileBar(properties: {
   model: Model;
   newModel: () => void;
+  newModelFromTemplate: () => void;
   setModel: (key: string) => void;
   onModelUpload: (blob: ArrayBuffer, fileName: string) => Promise<void>;
   onDelete: () => void;
@@ -52,6 +53,7 @@ export function FileBar(properties: {
       <Divider />
       <FileMenu
         newModel={properties.newModel}
+        newModelFromTemplate={properties.newModelFromTemplate}
         setModel={properties.setModel}
         onModelUpload={properties.onModelUpload}
         onDownload={async () => {

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

@@ -1,13 +1,15 @@
 import styled from "@emotion/styled";
 import { Menu, MenuItem, Modal } from "@mui/material";
-import { Check, FileDown, FileUp, Plus, Trash2 } from "lucide-react";
+import { Check, FileDown, FileUp, Plus, Table2, Trash2 } from "lucide-react";
 import { useRef, useState } from "react";
 import DeleteWorkbookDialog from "./DeleteWorkbookDialog";
 import UploadFileDialog from "./UploadFileDialog";
+// import TemplatesDialog from "./WelcomeDialog/TemplatesDialog";
 import { getModelsMetadata, getSelectedUuid } from "./storage";
 
 export function FileMenu(props: {
   newModel: () => void;
+  newModelFromTemplate: () => void;
   setModel: (key: string) => void;
   onDownload: () => void;
   onModelUpload: (blob: ArrayBuffer, fileName: string) => Promise<void>;
@@ -20,7 +22,6 @@ export function FileMenu(props: {
   const uuids = Object.keys(models);
   const selectedUuid = getSelectedUuid();
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
-
   const elements = [];
   for (const uuid of uuids) {
     elements.push(
@@ -92,7 +93,18 @@ export function FileMenu(props: {
           <StyledIcon>
             <Plus />
           </StyledIcon>
-          <MenuItemText>New</MenuItemText>
+          <MenuItemText>New blank workbook</MenuItemText>
+        </MenuItemWrapper>
+        <MenuItemWrapper
+          onClick={() => {
+            props.newModelFromTemplate();
+            setMenuOpen(false);
+          }}
+        >
+          <StyledIcon>
+            <Table2 />
+          </StyledIcon>
+          <MenuItemText>New from template</MenuItemText>
         </MenuItemWrapper>
         <MenuItemWrapper
           onClick={() => {
@@ -105,6 +117,7 @@ export function FileMenu(props: {
           </StyledIcon>
           <MenuItemText>Import</MenuItemText>
         </MenuItemWrapper>
+        <MenuDivider />
         <MenuItemWrapper onClick={props.onDownload}>
           <StyledIcon>
             <FileDown />

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

@@ -0,0 +1,79 @@
+import { Dialog, styled } from "@mui/material";
+import { X } from "lucide-react";
+import { useState } from "react";
+import TemplatesList, {
+  Cross,
+  DialogContent,
+  DialogFooter,
+  DialogFooterButton,
+} from "./TemplatesList";
+
+function TemplatesDialog(properties: {
+  onClose: () => void;
+  onSelectTemplate: (templateId: string) => void;
+}) {
+  const [selectedTemplate, setSelectedTemplate] = useState<string>("");
+
+  const handleClose = () => {
+    properties.onClose();
+  };
+
+  const handleTemplateSelect = (templateId: string) => {
+    setSelectedTemplate(templateId);
+  };
+
+  return (
+    <DialogWrapper open={true} onClose={() => {}}>
+      <DialogTemplateHeader>
+        <span style={{ flexGrow: 2, marginLeft: 12 }}>Choose a template</span>
+        <Cross
+          style={{ marginRight: 12 }}
+          onClick={handleClose}
+          title="Close Dialog"
+          tabIndex={0}
+          onKeyDown={(event) => event.key === "Enter" && properties.onClose()}
+        >
+          <X />
+        </Cross>
+      </DialogTemplateHeader>
+      <DialogContent>
+        <TemplatesList
+          selectedTemplate={selectedTemplate}
+          handleTemplateSelect={handleTemplateSelect}
+        />
+      </DialogContent>
+      <DialogFooter>
+        <DialogFooterButton
+          onClick={() => properties.onSelectTemplate(selectedTemplate)}
+        >
+          Create workbook
+        </DialogFooterButton>
+      </DialogFooter>
+    </DialogWrapper>
+  );
+}
+
+export 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 DialogTemplateHeader = styled("div")`
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e0e0e0;
+  height: 44px;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: Inter;
+`;
+
+export default TemplatesDialog;

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

@@ -0,0 +1,103 @@
+import { Dialog, styled } from "@mui/material";
+import { House, TicketsPlane } from "lucide-react";
+import TemplatesListItem from "./TemplatesListItem";
+
+function TemplatesList(props: {
+  selectedTemplate: string;
+  handleTemplateSelect: (templateId: string) => void;
+}) {
+  const { selectedTemplate, handleTemplateSelect } = props;
+  return (
+    <TemplatesListWrapper>
+      <TemplatesListItem
+        title="Mortgage calculator"
+        description="Estimate payments, interest, and overall cost."
+        icon={<House />}
+        iconColor="#2F80ED"
+        active={selectedTemplate === "mortgage_calculator"}
+        onClick={() => handleTemplateSelect("mortgage_calculator")}
+      />
+      <TemplatesListItem
+        title="Travel expenses tracker"
+        description="Track trip costs and stay on budget."
+        icon={<TicketsPlane />}
+        iconColor="#EB5757"
+        active={selectedTemplate === "travel_expenses_tracker"}
+        onClick={() => handleTemplateSelect("travel_expenses_tracker")}
+      />
+    </TemplatesListWrapper>
+  );
+}
+
+export 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);
+  }
+`;
+
+export 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;
+  }
+`;
+
+export const DialogContent = styled("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  max-height: 300px;
+  overflow: hidden;
+  overflow-y: auto;
+`;
+
+export const TemplatesListWrapper = styled("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export const DialogFooter = styled("div")`
+  border-top: 1px solid #e0e0e0;
+  padding: 16px;
+`;
+
+export 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 TemplatesDialog;
+export default TemplatesList;

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

@@ -0,0 +1,107 @@
+import { styled } from "@mui/material";
+import type { ReactNode } from "react";
+
+interface TemplatesListItemProps {
+  title: string;
+  description: string;
+  icon: ReactNode;
+  iconColor: string;
+  active: boolean;
+  onClick: () => void;
+}
+
+function TemplatesListItem({
+  title,
+  description,
+  icon,
+  iconColor,
+  active,
+  onClick,
+}: TemplatesListItemProps) {
+  return (
+    <ListItemWrapper active={active} iconColor={iconColor} onClick={onClick}>
+      <StyledIcon iconColor={iconColor}>{icon}</StyledIcon>
+      <TemplatesListItemTitle>
+        <Title>{title}</Title>
+        <Subtitle>{description}</Subtitle>
+      </TemplatesListItemTitle>
+      <RadioButton active={active}>
+        <RadioButtonDot />
+      </RadioButton>
+    </ListItemWrapper>
+  );
+}
+
+const ListItemWrapper = styled("div")<{ active?: boolean; iconColor?: string }>`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 12px;
+  color: #424242;
+  border: 1px solid ${(props) => (props.active ? props.iconColor || "#424242" : "rgba(224, 224, 224, 0.60)")};
+  background-color: #FFFFFF;
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  outline: ${(props) => (props.active ? `4px solid ${props.iconColor || "#424242"}24` : "none")};
+  transition: border 0.1s ease-in-out;
+  user-select: none;
+  &:hover {
+    border: 1px solid ${(props) => props.iconColor};
+    transition: border 0.1s ease-in-out;
+  }
+`;
+
+const TemplatesListItemTitle = styled("div")`
+  display: flex;
+  flex-direction: column;
+  color: #424242;
+  width: 100%;
+  gap: 2px;
+`;
+
+const Title = styled("div")`
+  font-weight: 600;
+  color: #424242;
+  line-height: 16px;
+`;
+
+const Subtitle = styled("div")`
+  color: #757575;
+`;
+
+const StyledIcon = styled("div")<{ iconColor?: string }>`
+  display: flex;
+  align-items: center;
+  margin-top: -1px;
+  svg {
+    width: 18px;
+    height: 100%;
+    color: ${(props) => props.iconColor || "#424242"};
+  }
+`;
+
+const RadioButton = styled("div")<{ active?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+  border-radius: 16px;
+  margin-top: -4px;
+  margin-right: -4px;
+  background-color: ${(props) => (props.active ? "#F2994A" : "#FFFFFF")};
+  border: ${(props) => (props.active ? "none" : "1px solid #E0E0E0")};
+`;
+
+const RadioButtonDot = styled("div")`
+  width: 6px;
+  height: 6px;
+  border-radius: 6px;
+  background-color: #FFF;
+`;
+
+export default TemplatesListItem;

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

@@ -0,0 +1,136 @@
+import { IronCalcIconWhite as IronCalcIcon } from "@ironcalc/workbook";
+import { styled } from "@mui/material";
+import { Table, X } from "lucide-react";
+import { useState } from "react";
+import TemplatesListItem from "./TemplatesListItem";
+
+import TemplatesList, {
+  Cross,
+  DialogContent,
+  DialogFooter,
+  DialogFooterButton,
+  DialogWrapper,
+  TemplatesListWrapper,
+} from "./TemplatesList";
+
+function WelcomeDialog(properties: {
+  onClose: () => void;
+  onSelectTemplate: (templateId: string) => void;
+}) {
+  const [selectedTemplate, setSelectedTemplate] = useState<string>("blank");
+
+  const handleClose = () => {
+    properties.onClose();
+  };
+
+  const handleTemplateSelect = (templateId: string) => {
+    setSelectedTemplate(templateId);
+  };
+
+  return (
+    <DialogWrapper open={true} onClose={() => {}}>
+      <DialogWelcomeHeader>
+        <DialogHeaderTitleWrapper>
+          <DialogHeaderLogoWrapper>
+            <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>
+      </DialogWelcomeHeader>
+      <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>
+        <TemplatesList
+          selectedTemplate={selectedTemplate}
+          handleTemplateSelect={handleTemplateSelect}
+        />
+      </DialogContent>
+      <DialogFooter>
+        <DialogFooterButton
+          onClick={() => properties.onSelectTemplate(selectedTemplate)}
+        >
+          Create workbook
+        </DialogFooterButton>
+      </DialogFooter>
+    </DialogWrapper>
+  );
+}
+
+const DialogWelcomeHeader = 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;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+
+const ListTitle = styled("div")`
+  font-size: 12px;
+  font-weight: 600;
+  color: #424242;
+`;
+
+export default WelcomeDialog;

webapp/app.ironcalc.com/frontend/src/components/storage.ts

@@ -60,7 +60,7 @@ export function createNewModel(): Model {
   return model;
 }
 
-export function loadModelFromStorageOrCreate(): Model {
+export function loadSelectedModelFromStorage(): Model | null {
   const uuid = localStorage.getItem("selected");
   if (uuid) {
     // We try to load the selected model
@@ -68,14 +68,22 @@ export function loadModelFromStorageOrCreate(): Model {
     if (modelBytesString) {
       return Model.from_bytes(base64ToBytes(modelBytesString));
     }
-    // If it doesn't exist we create one at that uuid
-    const newModel = new Model("Workbook1", "en", "UTC");
-    localStorage.setItem("selected", uuid);
-    localStorage.setItem(uuid, bytesToBase64(newModel.toBytes()));
-    return newModel;
   }
-  // If there was no selected model we create a new one
+  return null;
-  return createNewModel();
+}
+
+// check if storage is empty
+export function isStorageEmpty(): boolean {
+  const modelsJson = localStorage.getItem("models");
+  if (!modelsJson) {
+    return true;
+  }
+  try {
+    const models = JSON.parse(modelsJson);
+    return Object.keys(models).length === 0;
+  } catch (e) {
+    return true;
+  }
 }
 
 export function saveSelectedModelInStorage(model: Model) {