UPDATE: Prompt a dialog when clicking 'Share'

webapp/app.ironcalc.com/frontend/package.json

@@ -16,6 +16,7 @@
     "@ironcalc/workbook": "file:../../IronCalc/",
     "@mui/material": "^6.4",
     "lucide-react": "^0.473.0",
+    "qrcode.react": "^4.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

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

@@ -3,11 +3,11 @@ import type { Model } from "@ironcalc/workbook";
 import { IronCalcIcon, IronCalcLogo } from "@ironcalc/workbook";
 import { CircleCheck } from "lucide-react";
 import { useRef, useState } from "react";
-// import { IronCalcIcon, IronCalcLogo } from "./../icons";
 import { FileMenu } from "./FileMenu";
 import { ShareButton } from "./ShareButton";
+import ShareWorkbookDialog from "./ShareWorkbookDialog";
 import { WorkbookTitle } from "./WorkbookTitle";
-import { downloadModel, shareModel } from "./rpc";
+import { downloadModel } from "./rpc";
 import { updateNameSelectedWorkbook } from "./storage";
 
 export function FileBar(properties: {
@@ -19,6 +19,8 @@ export function FileBar(properties: {
 }) {
   const hiddenInputRef = useRef<HTMLInputElement>(null);
   const [toast, setToast] = useState(false);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
   return (
     <FileBarWrapper>
       <StyledDesktopLogo />
@@ -67,23 +69,16 @@ export function FileBar(properties: {
           ""
         )}
       </div>
-      <ShareButton
-        onClick={async () => {
-          const model = properties.model;
-          const bytes = model.toBytes();
-          const fileName = model.getName();
-          const hash = await shareModel(bytes, fileName);
-          const value = `${location.origin}/?model=${hash}`;
-          if (hiddenInputRef.current) {
-            hiddenInputRef.current.value = value;
-            hiddenInputRef.current.select();
-            document.execCommand("copy");
-            setToast(true);
-            setTimeout(() => setToast(false), 5000);
-          }
-          console.log(value);
-        }}
-      />
+      <DialogContainer>
+        <ShareButton onClick={() => setIsDialogOpen(true)} />
+        {isDialogOpen && (
+          <ShareWorkbookDialog
+            onClose={() => setIsDialogOpen(false)}
+            onModelUpload={properties.onModelUpload}
+            model={properties.model}
+          />
+        )}
+      </DialogContainer>
     </FileBarWrapper>
   );
 }
@@ -141,3 +136,17 @@ const FileBarWrapper = styled("div")`
   position: relative;
   justify-content: space-between;
 `;
+
+const DialogContainer = styled("div")`
+  position: relative;
+  display: inline-block;
+  button {
+    margin-bottom: 8px;
+  }
+  .MuiDialog-root {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    transform: translateY(8px);
+  }
+`;

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

@@ -0,0 +1,202 @@
+import type { Model } from "@ironcalc/workbook";
+import { Button, Dialog, TextField, styled } from "@mui/material";
+import { Check, Copy, GlobeLock } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";
+import { useEffect, useState } from "react";
+import { shareModel } from "./rpc";
+
+function ShareWorkbookDialog(properties: {
+  onClose: () => void;
+  onModelUpload: (blob: ArrayBuffer, fileName: string) => Promise<void>;
+  model?: Model;
+}) {
+  const [url, setUrl] = useState<string>("");
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    const generateUrl = async () => {
+      if (properties.model) {
+        const bytes = properties.model.toBytes();
+        const fileName = properties.model.getName();
+        const hash = await shareModel(bytes, fileName);
+        setUrl(`${location.origin}/?model=${hash}`);
+      }
+    };
+    generateUrl();
+  }, [properties.model]);
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+    if (copied) {
+      timeoutId = setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [copied]);
+
+  const handleClose = () => {
+    properties.onClose();
+  };
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  };
+
+  return (
+    <DialogWrapper
+      open={true}
+      tabIndex={0}
+      onClose={handleClose}
+      onKeyDown={(event) => {
+        if (event.code === "Escape") {
+          handleClose();
+        }
+      }}
+    >
+      <DialogContent>
+        <QRCodeWrapper>
+          <QRCodeSVG value={url} size={80} />{" "}
+        </QRCodeWrapper>
+        <URLWrapper>
+          <StyledTextField
+            hiddenLabel
+            disabled
+            value={url}
+            variant="outlined"
+            fullWidth
+            margin="normal"
+            size="small"
+            style={{
+              fontSize: "12px",
+              paddingTop: "0px",
+            }}
+          />
+          <StyledButton
+            variant="contained"
+            color="primary"
+            size="small"
+            onClick={handleCopy}
+            style={{ textTransform: "capitalize", fontSize: "14px" }}
+          >
+            {copied ? <StyledCheck /> : <StyledCopy />}
+            {copied ? "Copied!" : "Copy URL"}
+          </StyledButton>
+        </URLWrapper>
+      </DialogContent>
+
+      <UploadFooter>
+        <GlobeLock />
+        Anyone with the link will be able to access a copy of this workbook
+      </UploadFooter>
+    </DialogWrapper>
+  );
+}
+
+const DialogWrapper = styled(Dialog)`
+  .MuiDialog-paper {
+    width: 440px;
+    position: absolute;
+    top: 44px;
+    right: 0px;
+    margin: 10px;
+    max-width: calc(100% - 20px);
+  }
+  .MuiBackdrop-root {
+    background-color: transparent;
+  }
+`;
+
+const DialogContent = styled("div")`
+  padding: 20px;
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  height: 80px;
+`;
+
+const URLWrapper = styled("div")`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  justify-content: space-between;
+`;
+
+const StyledTextField = styled(TextField)`
+  margin: 0px;
+  .MuiInputBase-root {
+    max-height: 36px;
+  }
+  .MuiOutlinedInput-input {
+    text-overflow: ellipsis;
+    padding: 8px;
+  }
+`;
+
+const StyledButton = styled(Button)`
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  background-color: #eeeeee;
+  height: 36px;
+  color: #616161;
+  box-shadow: none;
+  &:hover {
+    background-color: #e0e0e0;
+    box-shadow: none;
+  }
+  &:active {
+    background-color: #d4d4d4;
+    box-shadow: none;
+  }
+`;
+
+const StyledCopy = styled(Copy)`
+  width: 16px;
+`;
+
+const StyledCheck = styled(Check)`
+  width: 16px;
+`;
+
+const QRCodeWrapper = styled("div")`
+  min-height: 80px;
+  min-width: 80px;
+  background-color: grey;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @media (max-width: 600px) {
+    display: none;
+  }
+`;
+
+const UploadFooter = styled("div")`
+  height: 44px;
+  border-top: 1px solid #e0e0e0;
+  font-size: 12px;
+  font-weight: 400;
+  color: #757575;
+  display: flex;
+  align-items: center;
+  font-family: Inter;
+  gap: 8px;
+  padding: 0px 12px;
+  svg {
+    max-width: 16px;
+  }
+`;
+
+export default ShareWorkbookDialog;