update: make dialogs content change depending on scenario

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

@@ -24,6 +24,7 @@ import { IronCalc, IronCalcIcon, Model, init } from "@ironcalc/workbook";
 function App() {
   const [model, setModel] = useState<Model | null>(null);
   const [showWelcomeDialog, setShowWelcomeDialog] = useState(false);
+  const [isTemplateOnlyDialog, setIsTemplateOnlyDialog] = useState(false);
 
   useEffect(() => {
     async function start() {
@@ -58,6 +59,7 @@ function App() {
         const newModel = loadModelFromStorageOrCreate();
         if (!newModel) {
           setShowWelcomeDialog(true);
+          setIsTemplateOnlyDialog(false); // Full dialog for first-time usage
           const createdModel = new Model("template", "en", "UTC");
           setModel(createdModel);
         } else {
@@ -107,6 +109,7 @@ function App() {
         }}
         newModelFromTemplate={() => {
           setShowWelcomeDialog(true);
+          setIsTemplateOnlyDialog(true); // Template-only dialog for "New from template"
         }}
         setModel={(uuid: string) => {
           const newModel = selectModelFromStorage(uuid);
@@ -130,6 +133,7 @@ function App() {
               setModel(createdModel);
             }
             setShowWelcomeDialog(false);
+            setIsTemplateOnlyDialog(false);
           }}
           onSelectTemplate={async (templateId) => {
             switch (templateId) {
@@ -147,7 +151,10 @@ function App() {
               }
             }
             setShowWelcomeDialog(false);
+            setIsTemplateOnlyDialog(false);
           }}
+          showHeader={!isTemplateOnlyDialog}
+          showNewSection={!isTemplateOnlyDialog}
         />
       )}
     </Wrapper>

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

@@ -7,8 +7,12 @@ import IronCalcIcon from "./ironcalc_icon_white.svg";
 function WelcomeDialog(properties: {
   onClose: () => void;
   onSelectTemplate: (templateId: string) => void;
+  showHeader?: boolean;
+  showNewSection?: boolean;
 }) {
-  const [selectedTemplate, setSelectedTemplate] = useState<string>("blank");
+  const [selectedTemplate, setSelectedTemplate] = useState<string>(
+    properties.showNewSection ? "blank" : "mortgage_calculator",
+  );
 
   const handleClose = () => {
     properties.onClose();
@@ -20,6 +24,7 @@ function WelcomeDialog(properties: {
 
   return (
     <DialogWrapper open={true} onClose={() => {}}>
+      {properties.showHeader !== false ? (
         <DialogHeader>
           <DialogHeaderTitleWrapper>
             <DialogHeaderLogoWrapper>
@@ -39,7 +44,23 @@ function WelcomeDialog(properties: {
             <X />
           </Cross>
         </DialogHeader>
+      ) : (
+        <AlternativeHeader>
+          <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>
+        </AlternativeHeader>
+      )}
       <DialogContent>
+        {properties.showNewSection !== false && (
+          <>
             <ListTitle>New</ListTitle>
             <TemplatesListWrapper>
               <TemplatesListItem
@@ -51,6 +72,8 @@ function WelcomeDialog(properties: {
                 onClick={() => handleTemplateSelect("blank")}
               />
             </TemplatesListWrapper>
+          </>
+        )}
         <ListTitle>Templates</ListTitle>
         <TemplatesListWrapper>
           <TemplatesListItem
@@ -211,4 +234,14 @@ const DialogFooterButton = styled("button")`
   }
 `;
 
+const AlternativeHeader = 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 WelcomeDialog;