FIX: Refactor both dialogs to get common code

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

@@ -161,15 +161,13 @@ function App() {
       >
         <TemplatesDialog
           onClose={() => setTemplatesDialogOpen(false)}
-          onSelectTemplate={
+          onSelectTemplate={async (fileName) => {
-            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/WelcomeDialog/TemplatesDialog.tsx

@@ -1,7 +1,12 @@
 import { Dialog, styled } from "@mui/material";
-import { House, TicketsPlane, X } from "lucide-react";
+import { X } from "lucide-react";
 import { useState } from "react";
-import TemplatesListItem from "./TemplatesListItem";
+import TemplatesList, {
+  Cross,
+  DialogContent,
+  DialogFooter,
+  DialogFooterButton,
+} from "./TemplatesList";
 
 function TemplatesDialog(properties: {
   onClose: () => void;
@@ -19,7 +24,7 @@ function TemplatesDialog(properties: {
 
   return (
     <DialogWrapper open={true} onClose={() => {}}>
-      <DialogHeader>
+      <DialogTemplateHeader>
         <span style={{ flexGrow: 2, marginLeft: 12 }}>Choose a template</span>
         <Cross
           style={{ marginRight: 12 }}
@@ -30,26 +35,12 @@ function TemplatesDialog(properties: {
         >
           <X />
         </Cross>
-      </DialogHeader>
+      </DialogTemplateHeader>
       <DialogContent>
-        <TemplatesListWrapper>
+        <TemplatesList
-          <TemplatesListItem
+          selectedTemplate={selectedTemplate}
-            title="Mortgage calculator"
+          handleTemplateSelect={handleTemplateSelect}
-            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>
       </DialogContent>
       <DialogFooter>
         <DialogFooterButton
@@ -62,7 +53,7 @@ function TemplatesDialog(properties: {
   );
 }
 
-const DialogWrapper = styled(Dialog)`
+export const DialogWrapper = styled(Dialog)`
   font-family: Inter;
   .MuiDialog-paper {
     width: 440px;
@@ -75,7 +66,7 @@ const DialogWrapper = styled(Dialog)`
   }
 `;
 
-const DialogHeader = styled("div")`
+const DialogTemplateHeader = styled("div")`
   display: flex;
   align-items: center;
   border-bottom: 1px solid #e0e0e0;
@@ -85,61 +76,4 @@ const DialogHeader = styled("div")`
   font-family: Inter;
 `;
 
-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 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 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/WelcomeDialog.tsx

@@ -1,9 +1,18 @@
 import { IronCalcIconWhite as IronCalcIcon } from "@ironcalc/workbook";
-import { Dialog, styled } from "@mui/material";
+import { styled } from "@mui/material";
-import { House, Table, TicketsPlane, X } from "lucide-react";
+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;
@@ -20,7 +29,7 @@ function WelcomeDialog(properties: {
 
   return (
     <DialogWrapper open={true} onClose={() => {}}>
-      <DialogHeader>
+      <DialogWelcomeHeader>
         <DialogHeaderTitleWrapper>
           <DialogHeaderLogoWrapper>
             <IronCalcIcon />
@@ -38,7 +47,7 @@ function WelcomeDialog(properties: {
         >
           <X />
         </Cross>
-      </DialogHeader>
+      </DialogWelcomeHeader>
       <DialogContent>
         <ListTitle>New</ListTitle>
         <TemplatesListWrapper>
@@ -52,24 +61,10 @@ function WelcomeDialog(properties: {
           />
         </TemplatesListWrapper>
         <ListTitle>Templates</ListTitle>
-        <TemplatesListWrapper>
+        <TemplatesList
-          <TemplatesListItem
+          selectedTemplate={selectedTemplate}
-            title="Mortgage calculator"
+          handleTemplateSelect={handleTemplateSelect}
-            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>
       </DialogContent>
       <DialogFooter>
         <DialogFooterButton
@@ -82,20 +77,7 @@ function WelcomeDialog(properties: {
   );
 }
 
-const DialogWrapper = styled(Dialog)`
+const DialogWelcomeHeader = styled("div")`
-  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;
@@ -131,7 +113,7 @@ const DialogHeaderLogoWrapper = styled("div")`
   justify-content: center;
   max-width: 20px;
   max-height: 20px;
-  background-color: #F2994A;
+  background-color: #f2994a;
   padding: 10px;
   margin-bottom: 12px;
   border-radius: 6px;
@@ -145,67 +127,10 @@ const DialogHeaderLogoWrapper = styled("div")`
   }
 `;
 
-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;