update: use a different dialog for templates only

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

@@ -4,6 +4,7 @@ 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: {
@@ -21,7 +22,7 @@ export function FileMenu(props: {
   const uuids = Object.keys(models);
   const selectedUuid = getSelectedUuid();
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
-
+  const [isTemplatesDialogOpen, setTemplatesDialogOpen] = useState(false);
   const elements = [];
   for (const uuid of uuids) {
     elements.push(
@@ -97,7 +98,7 @@ export function FileMenu(props: {
         </MenuItemWrapper>
         <MenuItemWrapper
           onClick={() => {
-            props.newModelFromTemplate();
+            setTemplatesDialogOpen(true);
             setMenuOpen(false);
           }}
         >
@@ -165,6 +166,17 @@ export function FileMenu(props: {
           workbookName={selectedUuid ? models[selectedUuid] : ""}
         />
       </Modal>
+      <Modal
+        open={isTemplatesDialogOpen}
+        onClose={() => setTemplatesDialogOpen(false)}
+        aria-labelledby="templates-dialog-title"
+        aria-describedby="templates-dialog-description"
+      >
+        <TemplatesDialog
+          onClose={() => setTemplatesDialogOpen(false)}
+          onSelectTemplate={props.newModelFromTemplate}
+        />
+      </Modal>
     </>
   );
 }