feature: result share button

src/App.tsx

@@ -5,15 +5,18 @@ 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 {
     useCurrentRecipeData,
     useJobId,
     useOutputsDirectory,
+    useResultUrl,
     useRunTime,
     useSetJobId,
     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,13 +28,16 @@ const { Link } = Typography;
 function App() {
     const [jobStatus, setJobStatus] = useState<string>("");
     const [jobLogs, setJobLogs] = useState<string>("");
+    const [isShareModalOpen, setIsShareModalOpen] = useState(false);
 
     const setJobId = useSetJobId();
     const jobId = useJobId();
     const setPackingResults = useSetPackingResults();
     const runTime = useRunTime();
     const outputDir = useOutputsDirectory();
     const edits = useCurrentRecipeData()?.edits || {};
+    const resultUrl = useResultUrl();
+    const shareUrl = resultUrl ? `${SIMULARIUM_VIEWER_URL}${resultUrl}` : "";
 
     let start = 0;
 
@@ -163,13 +169,20 @@ 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
+                        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} />
@@ -185,6 +198,8 @@ function App() {
                     jobId={jobId}
                     errorLogs={jobLogs}
                     outputDir={outputDir}
+                    shareUrl={shareUrl}
+                    onShareClick={() => setIsShareModalOpen(true)}
                 />
             </Footer>
         </Layout>

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 packing 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;

src/components/StatusBar/index.tsx

@@ -5,16 +5,31 @@ import { JOB_STATUS } from "../../constants/aws";
 import "./style.css";
 import ErrorLogs from "../ErrorLogs";
 
+const DownloadIcon = () => (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M19 21H5"/>
+    </svg>
+);
+
+const ShareIcon = () => (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3.8"/><circle cx="18" cy="19" r="3"/>
+        <line x1="9.5" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="9.5" y1="6.51" y2="10.49"/>
+    </svg>
+);
+
 interface StatusBarProps {
     jobStatus: string;
     runTime: number;
     jobId: string;
     outputDir: string;
     errorLogs: string;
+    shareUrl: string;
+    onShareClick: () => void;
 }
 
 const StatusBar = (props: StatusBarProps): JSX.Element => {
-    const { jobStatus, runTime, jobId, errorLogs, outputDir } = props;
+    const { jobStatus, runTime, jobId, errorLogs, outputDir, shareUrl, onShareClick } = props;
 
     const [isDownloading, setIsDownloading] = useState(false);
 
@@ -38,17 +53,29 @@ const StatusBar = (props: StatusBarProps): JSX.Element => {
                     </div>
                 )}
             </div>
-            {jobSucceeded && (
+            <div className="status-bar-actions">
                 <Button
                     onClick={() => downloadResults(jobId)}
                     loading={isDownloading}
+                    disabled={!jobSucceeded}
+                    color="primary"
+                    variant="filled"
+                    style={{ width: 263, height: 30, borderRadius: 4 }}
+                    icon={<DownloadIcon />}
+                >
+                    Download packing result
+                </Button>
+                <Button
+                    onClick={onShareClick}
+                    disabled={!shareUrl}
                     color="primary"
                     variant="filled"
-                    className="download-button"
+                    style={{ width: 122, height: 30, borderRadius: 4 }}
+                    icon={<ShareIcon />}
                 >
-                    Download Packing Result
+                    Share
                 </Button>
-            )}
+            </div>
             {errorLogs && <ErrorLogs errorLogs={errorLogs} />}
         </>
     );

src/components/StatusBar/style.css

@@ -12,7 +12,9 @@
     align-items: center;
 }
 
-.download-button {
-    height: auto;
-    min-height: 48px;
+.status-bar-actions {
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+    align-items: center;
 }