docs: improve demo on mobile, remove heyo (blo-1013) (#2590)

YousefED · web-flow · commit e519f9c27b7d · 2026-03-25T09:15:11.000+01:00
* improve demo on mobile, remove heyo

* chore: Add `.claude` to `.gitignore`.
diff --git a/.gitignore b/.gitignore
@@ -40,3 +40,4 @@ release
 .nx/
 # Nightshift plan artifacts (keep out of version control)
 .nightshift-plan
+.claude
diff --git a/docs/app/demo/_components/DemoEditor.tsx b/docs/app/demo/_components/DemoEditor.tsx
@@ -119,7 +119,7 @@ export function DemoEditor() {
       : "";
 
   const content = !roomId ? (
-    <div className="flex h-[700px] w-full max-w-5xl flex-col overflow-hidden rounded-xl border border-stone-200 bg-white shadow-xl">
+    <div className="flex h-[500px] w-full max-w-5xl flex-col overflow-hidden rounded-xl border border-stone-200 bg-white shadow-xl sm:h-[700px]">
       <EditorMenu
         onExport={() => {}}
         user={HARDCODED_USERS[0]}
@@ -138,15 +138,15 @@ export function DemoEditor() {
 
   return (
     <div className="flex w-full max-w-5xl flex-col gap-4">
-      <div className="flex w-full items-center justify-between rounded-lg border border-stone-200 bg-white p-3 shadow-sm">
+      <div className="flex w-full flex-col gap-2 rounded-lg border border-stone-200 bg-white p-3 shadow-sm sm:flex-row sm:items-center sm:justify-between">
         <span className="text-sm font-medium text-stone-600">
           ⚡️ Collaborate live! Share this URL:
         </span>
-        <div className="flex flex-1 items-center gap-2 px-4">
+        <div className="flex flex-1 items-center gap-2 sm:px-4">
           <input
             readOnly
             value={url}
-            className="w-full rounded-md border border-stone-200 bg-stone-50 px-3 py-1.5 text-sm text-stone-600 outline-none focus:border-stone-400"
+            className="min-w-0 flex-1 rounded-md border border-stone-200 bg-stone-50 px-3 py-1.5 text-sm text-stone-600 outline-none focus:border-stone-400"
             onClick={(e) => e.currentTarget.select()}
           />
           <button
@@ -187,7 +187,10 @@ function DemoEditorInner({
   const { resolvedTheme } = useTheme();
   // const [mounted, setMounted] = useState(false);
   const [activeUser, setActiveUser] = useState(HARDCODED_USERS[0]);
-  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [sidebarOpen, setSidebarOpen] = useState(() => {
+    if (typeof window === "undefined") return true;
+    return window.innerWidth >= 768;
+  });
 
   const { doc, provider } = useMemo(() => {
     const doc = new Y.Doc();
@@ -359,7 +362,7 @@ function DemoEditorInner({
   }
 
   return (
-    <div className="flex h-[700px] w-full max-w-5xl flex-col overflow-hidden rounded-xl border border-stone-200 bg-white shadow-xl">
+    <div className="flex h-[500px] w-full max-w-5xl flex-col overflow-hidden rounded-xl border border-stone-200 bg-white shadow-xl sm:h-[700px]">
       <div className="relative z-30">
         <EditorMenu
           onExport={handleExport}
diff --git a/docs/app/demo/_components/EditorMenu.tsx b/docs/app/demo/_components/EditorMenu.tsx
@@ -1,4 +1,5 @@
 import { Download, PanelRight, Share, User } from "lucide-react";
+import { useRef, useState } from "react";
 import { HARDCODED_USERS } from "./utils";
 
 interface EditorMenuProps {
@@ -23,21 +24,31 @@ export function EditorMenu({
   onToggleSidebar,
   disabled,
 }: EditorMenuProps) {
+  const [exportOpen, setExportOpen] = useState(false);
+  const exportRef = useRef<HTMLDivElement>(null);
+
+  // Close on outside click via onBlur with a relatedTarget check
+  const handleBlur = (e: React.FocusEvent) => {
+    if (!exportRef.current?.contains(e.relatedTarget as Node)) {
+      setExportOpen(false);
+    }
+  };
+
   return (
-    <div className="flex items-center justify-between border-b border-stone-200 bg-stone-50 px-4 py-2">
-      <div className="flex gap-1.5">
+    <div className="flex items-center justify-between border-b border-stone-200 bg-stone-50 px-2 py-2 sm:px-4">
+      <div className="hidden gap-1.5 sm:flex">
         <div className="h-3 w-3 rounded-full bg-red-400" />
         <div className="h-3 w-3 rounded-full bg-amber-400" />
         <div className="h-3 w-3 rounded-full bg-green-400" />
       </div>
 
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-1 sm:gap-2">
         <div
-          className={`flex items-center gap-2 rounded-md border border-stone-200 bg-white px-2 py-1 ${disabled ? "opacity-50" : ""}`}
+          className={`flex items-center gap-1 rounded-md border border-stone-200 bg-white px-2 py-1 sm:gap-2 ${disabled ? "opacity-50" : ""}`}
         >
           <User className="h-3 w-3 text-stone-500" />
           <select
-            className="w-[100px] bg-transparent text-xs outline-none"
+            className="w-[80px] bg-transparent text-xs outline-none sm:w-[100px]"
             value={user.id}
             onChange={(e) => {
               const u = HARDCODED_USERS.find((u) => u.id === e.target.value);
@@ -53,7 +64,7 @@ export function EditorMenu({
           </select>
         </div>
 
-        <div className="mx-2 h-4 w-px bg-stone-300" />
+        <div className="mx-1 h-4 w-px bg-stone-300 sm:mx-2" />
 
         <div
           className={`flex gap-1 ${disabled ? "pointer-events-none opacity-50" : ""}`}
@@ -62,46 +73,59 @@ export function EditorMenu({
             className="flex items-center gap-1 rounded-md border border-stone-200 bg-white px-2 py-1 text-xs hover:bg-stone-50"
             onClick={() => {
               navigator.clipboard.writeText(window.location.href);
-              alert("URL copied to clipboard!");
             }}
             disabled={disabled}
           >
-            <Share className="h-3 w-3" /> Share
+            <Share className="h-3 w-3" />
+            <span className="hidden sm:inline">Share</span>
           </button>
-          <div className="group relative">
+          <div className="relative" ref={exportRef} onBlur={handleBlur}>
             <button
               className="flex items-center gap-1 rounded-md border border-stone-200 bg-white px-2 py-1 text-xs hover:bg-stone-50"
               disabled={disabled}
+              onClick={() => setExportOpen(!exportOpen)}
             >
-              <Download className="h-3 w-3" /> Export
+              <Download className="h-3 w-3" />
+              <span className="hidden sm:inline">Export</span>
             </button>
-            <div className="absolute right-0 top-full z-10 hidden w-20 flex-col rounded-md border border-stone-200 bg-white py-1 shadow-md group-hover:flex">
-              <button
-                className="px-3 py-1 text-left text-xs hover:bg-stone-50"
-                onClick={() => onExport("pdf")}
-              >
-                PDF
-              </button>
-              <button
-                className="px-3 py-1 text-left text-xs hover:bg-stone-50"
-                onClick={() => onExport("docx")}
-              >
-                DOCX
-              </button>
-              <button
-                className="px-3 py-1 text-left text-xs hover:bg-stone-50"
-                onClick={() => onExport("odt")}
-              >
-                ODT
-              </button>
-            </div>
+            {exportOpen && (
+              <div className="absolute right-0 top-full z-10 flex w-20 flex-col rounded-md border border-stone-200 bg-white py-1 shadow-md">
+                <button
+                  className="px-3 py-1 text-left text-xs hover:bg-stone-50"
+                  onClick={() => {
+                    onExport("pdf");
+                    setExportOpen(false);
+                  }}
+                >
+                  PDF
+                </button>
+                <button
+                  className="px-3 py-1 text-left text-xs hover:bg-stone-50"
+                  onClick={() => {
+                    onExport("docx");
+                    setExportOpen(false);
+                  }}
+                >
+                  DOCX
+                </button>
+                <button
+                  className="px-3 py-1 text-left text-xs hover:bg-stone-50"
+                  onClick={() => {
+                    onExport("odt");
+                    setExportOpen(false);
+                  }}
+                >
+                  ODT
+                </button>
+              </div>
+            )}
           </div>
         </div>
 
-        <div className="mx-2 h-4 w-px bg-stone-300" />
+        <div className="mx-1 hidden h-4 w-px bg-stone-300 sm:block sm:mx-2" />
 
         <button
-          className={`flex items-center gap-1 rounded-md border border-stone-200 px-2 py-1 text-xs hover:bg-stone-50 ${
+          className={`hidden items-center gap-1 rounded-md border border-stone-200 px-2 py-1 text-xs hover:bg-stone-50 sm:flex ${
             sidebarOpen
               ? "bg-stone-100 text-stone-900"
               : "bg-white text-stone-500"
diff --git a/docs/app/demo/page.tsx b/docs/app/demo/page.tsx
@@ -9,10 +9,6 @@ export default function DemoPage() {
         </h1>
       </div>
       <DemoEditor />
-      <script
-        async
-        src="https://heyo.so/embed/script?projectId=6982d5659ff7b5fcebeeff26"
-      ></script>
     </main>
   );
 }
diff --git a/docs/app/pricing/page.tsx b/docs/app/pricing/page.tsx
@@ -207,10 +207,6 @@ export default function Pricing() {
         {/* FAQ */}
         <FAQ />
       </div>
-      <script
-        async
-        src="https://heyo.so/embed/script?projectId=6982d5659ff7b5fcebeeff26"
-      ></script>
     </div>
   );
 }
