From 5064afe09b429f34c2a51916d85107815182b5fa Mon Sep 17 00:00:00 2001
From: Ruge Li <rugeli0605@gmail.com>
Date: Fri, 9 Jan 2026 12:26:47 -0800
Subject: [PATCH] initial share modal

---
 src/App.tsx                         | 32 ++++++++++++++++++++++-----
 src/components/ShareModal/index.tsx | 34 +++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ShareModal/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index c330ada3..253d08a4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,16 +5,19 @@ import { getJobStatus, addRecipe } from "./utils/firebase";
 import { getFirebaseRecipe, jsonToString } from "./utils/recipeLoader";
 import { getSubmitPackingUrl, JOB_STATUS } from "./constants/aws";
 import { FIRESTORE_FIELDS } from "./constants/firebase";
+import { SIMULARIUM_VIEWER_URL } from "./constants/urls";
 import {
     useJobId,
     useJobLogs,
     useOutputsDirectory,
+    useResultUrl,
     useRunTime,
     useSetJobId,
     useSetJobLogs,
     useSetPackingResults,
 } from "./state/store";
 import PackingInput from "./components/PackingInput";
+import ShareModal from "./components/ShareModal";
 import Viewer from "./components/Viewer";
 import StatusBar from "./components/StatusBar";
 
@@ -25,6 +28,7 @@ const { Link } = Typography;
 
 function App() {
     const [jobStatus, setJobStatus] = useState<string>("");
+    const [isShareModalOpen, setIsShareModalOpen] = useState(false);
 
     const setJobLogs = useSetJobLogs();
     const jobLogs = useJobLogs();
@@ -33,6 +37,8 @@ function App() {
     const setPackingResults = useSetPackingResults();
     const runTime = useRunTime();
     const outputDir = useOutputsDirectory();
+    const resultUrl = useResultUrl();
+    const shareUrl = resultUrl ? `${SIMULARIUM_VIEWER_URL}${resultUrl}` : "";
 
     let start = 0;
 
@@ -163,13 +169,27 @@ function App() {
                 style={{ justifyContent: "space-between" }}
             >
                 <h2 className="header-title">cellPACK Studio</h2>
-                <Link
-                    href="https://github.com/mesoscope/cellpack"
-                    className="header-link"
-                >
-                    GitHub
-                </Link>
+                <div style={{ display: "flex", gap: "16px" }}>
+                    <Link
+                        onClick={() => setIsShareModalOpen(true)}
+                        className="header-link"
+                        disabled={!shareUrl}
+                    >
+                        Share
+                    </Link>
+                    <Link
+                        href="https://github.com/mesoscope/cellpack"
+                        className="header-link"
+                    >
+                        GitHub
+                    </Link>
+                </div>
             </Header>
+            <ShareModal
+                open={isShareModalOpen}
+                onClose={() => setIsShareModalOpen(false)}
+                shareUrl={shareUrl}
+            />
             <Layout>
                 <Sider width="35%" theme="light" className="sider">
                     <PackingInput startPacking={startPacking} />
diff --git a/src/components/ShareModal/index.tsx b/src/components/ShareModal/index.tsx
new file mode 100644
index 00000000..97ec0ee2
--- /dev/null
+++ b/src/components/ShareModal/index.tsx
@@ -0,0 +1,34 @@
+import { Button, Input, Modal, Space } from "antd";
+
+interface ShareModalProps {
+    open: boolean;
+    onClose: () => void;
+    shareUrl: string;
+}
+
+const ShareModal = ({ open, onClose, shareUrl }: ShareModalProps) => {
+    return (
+        <Modal
+            title="Share Result"
+            open={open}
+            onCancel={onClose}
+            footer={null}
+        >
+            <Space.Compact style={{ display: "flex", width: "100%" }}>
+                <Input
+                    value={shareUrl}
+                    readOnly
+                    style={{ flex: 1 }}
+                />
+                <Button
+                    type="primary"
+                    onClick={() => navigator.clipboard.writeText(shareUrl)}
+                >
+                    Copy
+                </Button>
+            </Space.Compact>
+        </Modal>
+    );
+};
+
+export default ShareModal;