feat: Improve Sharing Flow & Panel Resizing UX (#17)

* refactor(Playground): update panel layout logic and add arraysEqual helper

- Update Playground.tsx to compare current panel layout with the default using arraysEqual
- Reset layout to default when changes are detected
- Add arraysEqual function in utils.ts for array comparison

* improve layout and styling of the copy button

* create dialog component for sharing

* change to a dialog flow for sharing, and memoize shared content

Author: walker-tx

web/package.json

@@ -16,7 +16,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-progress": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
-    "@speakeasy-api/moonshine": "^0.52.3",
+    "@speakeasy-api/moonshine": "^0.71.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "jotai": "^2.11.0",

web/pnpm-lock.yaml

@@ -15,7 +15,6 @@ import { blankOverlay, petstore } from "./defaults";
 import speakeasyWhiteLogo from "./assets/speakeasy-white.svg";
 import openapiLogo from "./assets/openapi.svg";
 import { compress, decompress } from "@/compress";
-import { CopyButton } from "@/components/CopyButton";
 import { Button } from "@/components/ui/button";
 import {
   ImperativePanelGroupHandle,
@@ -25,7 +24,13 @@ import {
 } from "react-resizable-panels";
 import posthog from "posthog-js";
 import { useDebounceCallback, useMediaQuery } from "usehooks-ts";
-import { formatDocument, guessDocumentLanguage } from "./lib/utils";
+import {
+  arraysEqual,
+  formatDocument,
+  guessDocumentLanguage,
+} from "./lib/utils";
+import ShareDialog, { ShareDialogHandle } from "./components/ShareDialog";
+import { Loader2Icon, ShareIcon } from "lucide-react";
 
 const Link = ({ children, href }: { children: ReactNode; href: string }) => (
   <a
@@ -73,7 +78,6 @@ function Playground() {
   const result = useRef(blankOverlay);
   const [resultLoading, setResultLoading] = useState(false);
   const [error, setError] = useState("");
-  const [shareUrl, setShareUrl] = useState("");
   const [shareUrlLoading, setShareUrlLoading] = useState(false);
   const [overlayMarkers, setOverlayMarkers] = useState<editor.IMarkerData[]>(
     [],
@@ -135,7 +139,12 @@ function Playground() {
 
   const onChangeOverlayDebounced = useDebounceCallback(onChangeOverlay, 500);
 
+  const shareDialogRef = useRef<ShareDialogHandle>(null);
+  const lastSharedStart = useRef<string>("");
+
   const getShareUrl = useCallback(async () => {
+    if (!shareDialogRef.current) return;
+
     try {
       setShareUrlLoading(true);
       const info = await GetInfo(original.current, false);
@@ -144,14 +153,19 @@ function Playground() {
         original: original.current,
         info: info,
       });
-      const blob = await compress(start);
+
+      const alreadySharedThis = lastSharedStart.current === start;
+      if (alreadySharedThis) {
+        shareDialogRef.current.setOpen(true);
+        return;
+      }
 
       const response = await fetch("/api/share", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
-        body: blob,
+        body: await compress(start),
       });
 
       if (response.ok) {
@@ -161,7 +175,10 @@ function Playground() {
         currentUrl.hash = "";
         currentUrl.searchParams.set("s", base64Data);
 
-        setShareUrl(currentUrl.toString());
+        lastSharedStart.current = start;
+        shareDialogRef.current.setUrl(currentUrl.toString());
+        shareDialogRef.current.setOpen(true);
+
         history.pushState(null, "", currentUrl.toString());
         posthog.capture("overlay.speakeasy.com:share", {
           openapi: JSON.parse(info),
@@ -283,14 +300,25 @@ function Playground() {
 
   const maxLayout = useCallback((index: number) => {
     const panelGroup = ref.current;
-    const desiredWidths = [10, 10, 10];
-    if (index < desiredWidths.length && index >= 0) {
-      desiredWidths[index] = 80;
+    if (!panelGroup) return;
+
+    const currentLayout = panelGroup?.getLayout();
+
+    if (!arraysEqual(currentLayout, defaultLayout)) {
+      panelGroup.setLayout(defaultLayout);
+      return;
     }
-    if (panelGroup) {
-      // Reset each Panel to 50% of the group's width
-      panelGroup.setLayout(desiredWidths);
+
+    const baseWidth = 10;
+    const maxedWidth = 80;
+    const desiredWidths = Array(3).fill(baseWidth);
+
+    if (index < desiredWidths.length && index >= 0) {
+      desiredWidths[index] = maxedWidth;
     }
+
+    // Reset each Panel to 50% of the group's width
+    panelGroup.setLayout(desiredWidths);
   }, []);
 
   if (!ready) {
@@ -312,7 +340,7 @@ function Playground() {
           For proper user experience, please use a desktop device
         </Alert>
       ) : null}
-      <div style={{ paddingBottom: "1rem", width: "100vw" }}>
+      <div style={{ width: "100vw" }}>
         <div className="border-b border-muted p-4 md:p-6 text-left">
           <div className="flex gap-2">
             <div className="flex flex-1">
@@ -341,7 +369,7 @@ function Playground() {
               </div>
             </div>
             <div className="flex flex-1 flex-row-reverse">
-              <div className="flex flex-col justify-between">
+              <div className="flex flex-col gap-4 justify-between">
                 <div className="flex gap-x-2">
                   <span>
                     <Link href="https://www.speakeasy.com?utm_source=overlay.speakeasy.com">
@@ -365,21 +393,27 @@ function Playground() {
                     </Link>
                   </span>
                 </div>
-                <div className="flex gap-x-2 justify-evenly ">
+                <div className="flex gap-x-2 justify-end">
                   <Button
-                    className="border-b border-transparent transition-all duration-200 hover:border-current"
+                    className="border-b border-transparent hover:border-current"
                     style={{
                       color: "#FBE331",
                       backgroundColor: "#1E1E1E",
                     }}
                     onClick={getShareUrl}
                     disabled={shareUrlLoading}
                   >
+                    {shareUrlLoading ? (
+                      <Loader2Icon
+                        className="animate-spin"
+                        style={{ height: "75%" }}
+                      />
+                    ) : (
+                      <ShareIcon style={{ height: "75%" }} />
+                    )}
                     Share
                   </Button>
-                  <div className="flex items-center gap-x-2 grow">
-                    {shareUrl ? <CopyButton value={shareUrl} /> : null}
-                  </div>
+                  <ShareDialog ref={shareDialogRef} />
                 </div>
               </div>
             </div>

web/src/Playground.tsx

@@ -34,7 +34,7 @@ export function CopyButton({
   React.useEffect(() => {
     setTimeout(() => {
       setHasCopied(false);
-    }, 2000);
+    }, 5000);
   }, [hasCopied]);
 
   return (
@@ -49,9 +49,13 @@ export function CopyButton({
       style={{ background: "transparent" }}
       {...props}
     >
-      <Input readOnly value={value} style={{ width: "100%" }} />
-      <span className="flex items-center z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3">
-        <span className="sr-only">Copy</span>
+      <Input
+        readOnly
+        value={value}
+        className="w-full font-mono font-semibold text-sm bg-zinc-900"
+      />
+      <span className=" h-full aspect-square rounded-md flex items-center justify-center  text-zinc-50 bg-zinc-900 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3">
+        <span className="sr-only aspect-square">Copy</span>
         {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
       </span>
     </Button>

web/src/components/CopyButton.tsx

@@ -0,0 +1,64 @@
+import {
+  Button,
+  Dialog,
+  Heading,
+  Separator,
+  Stack,
+  Text,
+} from "@speakeasy-api/moonshine";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { CopyButton } from "./CopyButton";
+
+export interface ShareDialogHandle {
+  setUrl: React.Dispatch<React.SetStateAction<string>>;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const ShareDialog = forwardRef<ShareDialogHandle, {}>((_, ref) => {
+  const [url, setUrl] = useState<string>("");
+  const [open, setOpen] = useState(false);
+
+  useImperativeHandle(ref, () => ({
+    setUrl,
+    setOpen,
+  }));
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <Dialog.Content>
+        <Dialog.Header>
+          <Dialog.Title asChild>
+            <div>
+              <Heading variant="lg">Share</Heading>
+              <Text muted variant="sm" className="leading-none ">
+                Copy and paste the URL below anywhere to share this overlay
+                session with others.
+              </Text>
+            </div>
+          </Dialog.Title>
+        </Dialog.Header>
+        <Separator />
+        <Stack direction="vertical" gap={10} className="my-2">
+          <CopyButton className="w-full" value={url} />
+        </Stack>
+        <Separator />
+        <Dialog.Footer>
+          <Dialog.Close asChild>
+            <Button onClick={handleClose}>Done</Button>
+          </Dialog.Close>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
+  );
+});
+ShareDialog.displayName = "ShareDialog";
+
+export default ShareDialog;

web/src/components/ShareDialog.tsx

@@ -22,3 +22,19 @@ export function formatDocument(doc: string, indentWidth: number = 2): string {
 
   return doc;
 }
+
+export function arraysEqual<T>(a: T[], b: T[]): boolean {
+  // Check if the arrays have the same length
+  if (a.length !== b.length) {
+    return false;
+  }
+
+  // Compare each element in the arrays
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}