feat(ux): add confirmation modal before loading sample template

src/components/SampleDropdown.tsx

@@ -1,5 +1,5 @@
-import { Button, Dropdown, Space, message, MenuProps } from "antd";
-import { DownOutlined } from "@ant-design/icons";
+import { Button, Dropdown, Space, message, Modal, MenuProps } from "antd";
+import { DownOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
 import { useCallback, useMemo, useState } from "react";
 import useAppStore from "../store/store";
 import { shallow } from "zustand/shallow";
@@ -10,14 +10,19 @@ function SampleDropdown({
 }: {
   setLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }): JSX.Element {
-  const { samples, loadSample } = useStoreWithEqualityFn(
-    useAppStore,
-    (state) => ({
-      samples: state.samples,
-      loadSample: state.loadSample as (key: string) => Promise<void>,
-    }),
-    shallow
-  );
+  const { samples, loadSample, sampleName, editorValue, editorModelCto, editorAgreementData } =
+    useStoreWithEqualityFn(
+      useAppStore,
+      (state) => ({
+        samples: state.samples,
+        loadSample: state.loadSample as (key: string) => Promise<void>,
+        sampleName: state.sampleName,
+        editorValue: state.editorValue,
+        editorModelCto: state.editorModelCto,
+        editorAgreementData: state.editorAgreementData,
+      }),
+      shallow
+    );
 
   const [selectedSample, setSelectedSample] = useState<string | null>(null);
 
@@ -30,28 +35,55 @@ function SampleDropdown({
     [samples]
   );
 
+  const performLoadSample = useCallback(
+    async (key: string) => {
+      setLoading(true);
+      try {
+        await loadSample(key);
+        void message.info(`Loaded ${key} sample`);
+        setSelectedSample(key);
+      } catch (error) {
+        void message.error("Failed to load sample");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [loadSample, setLoading]
+  );
+
   const handleMenuClick = useCallback(
-    async (e: { key: string }) => {
+    (e: { key: string }) => {
       if (e.key) {
-        setLoading(true);
-        try {
-          await loadSample(e.key);
-          void message.info(`Loaded ${e.key} sample`);
-          setSelectedSample(e.key);
-        } catch (error) {
-          void message.error("Failed to load sample");
-        } finally {
-          setLoading(false);
+        const currentSample = samples.find((s) => s.NAME === sampleName);
+        const hasUnsavedChanges =
+          !currentSample ||
+          editorValue !== currentSample.TEMPLATE ||
+          editorModelCto !== currentSample.MODEL ||
+          editorAgreementData !== JSON.stringify(currentSample.DATA, null, 2);
+
+        if (hasUnsavedChanges) {
+          Modal.confirm({
+            title: "Load Sample Template",
+            icon: <ExclamationCircleOutlined />,
+            content:
+              "Loading a new sample will replace your current Concerto Model, TemplateMark, and JSON Data. Any unsaved changes will be lost. Do you want to continue?",
+            okText: "Continue",
+            cancelText: "Cancel",
+            maskClosable: true,
+            onOk: () => performLoadSample(e.key),
+          });
+        } else {
+          void performLoadSample(e.key);
         }
       }
     },
-    [loadSample, setLoading]
+    [performLoadSample, samples, sampleName, editorValue, editorModelCto, editorAgreementData]
   );
-  
-  
+
+
   return (
     <Space>
-      <Dropdown menu={{ items, onClick: (e) => void handleMenuClick(e) }} trigger={["click"]}>
+      <Dropdown menu={{ items, onClick: handleMenuClick }} trigger={["click"]}>
         <div className="samples-element">
           <Button aria-label="Load sample dropdown">
             {selectedSample ? selectedSample : "Load Sample"} <DownOutlined />

src/index.css

@@ -22,6 +22,40 @@ html[data-theme="dark"] {
     background-color: #121212;
 }
 
+html[data-theme="dark"] .ant-modal-confirm .ant-modal-content {
+    background-color: #1e1e1e;
+    color: #ffffff;
+}
+
+html[data-theme="dark"] .ant-modal-confirm .ant-modal-confirm-title,
+html[data-theme="dark"] .ant-modal-confirm .ant-modal-confirm-content {
+    color: #ffffff;
+}
+
+html[data-theme="dark"] .ant-modal-confirm .ant-btn-default {
+    background-color: #333333;
+    color: #ffffff;
+    border-color: #555555;
+}
+
+html[data-theme="dark"] .ant-modal-confirm .ant-btn-default:hover {
+    background-color: #444444;
+    color: #ffffff;
+    border-color: #666666;
+}
+
+.ant-modal-confirm .ant-btn-primary {
+    background-color: #19c6c7;
+    border-color: #19c6c7;
+    color: #050c40;
+}
+
+.ant-modal-confirm .ant-btn-primary:hover {
+    background-color: #15b3b4;
+    border-color: #15b3b4;
+    color: #050c40;
+}
+
 html[data-theme="light"] {
     --bg-color: #ffffff;
     --text-color: #121212;