From 246e39c332bcc342d9d3b64984e8e4e0bb4fe44e Mon Sep 17 00:00:00 2001
From: Alex TYRODE <alex@tyrode.dev>
Date: Sun, 27 Apr 2025 22:50:01 +0000
Subject: [PATCH 1/5] feat: add clickable hint option set to false for
 embeddables

---
 src/frontend/src/lib/ExcalidrawElementFactory.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/lib/ExcalidrawElementFactory.ts b/src/frontend/src/lib/ExcalidrawElementFactory.ts
index 7c415e8..6fe6ccd 100644
--- a/src/frontend/src/lib/ExcalidrawElementFactory.ts
+++ b/src/frontend/src/lib/ExcalidrawElementFactory.ts
@@ -121,7 +121,8 @@ export class ExcalidrawElementFactory {
       type: "embeddable",
       link: options.link,
       customData: {
-        showHyperlinkIcon: false
+        showHyperlinkIcon: false,
+        showClickableHint: false
       }
     };
   }

From bb71c90e9e9ba672fdb37266392abc9695e7541a Mon Sep 17 00:00:00 2001
From: Alex TYRODE <alex@tyrode.dev>
Date: Sun, 27 Apr 2025 22:50:05 +0000
Subject: [PATCH 2/5] fix: increase debounce time for scroll end event in
 CustomEmbeddableRenderer

---
 src/frontend/src/CustomEmbeddableRenderer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/CustomEmbeddableRenderer.tsx b/src/frontend/src/CustomEmbeddableRenderer.tsx
index 9e6bb87..7c55a3d 100644
--- a/src/frontend/src/CustomEmbeddableRenderer.tsx
+++ b/src/frontend/src/CustomEmbeddableRenderer.tsx
@@ -106,4 +106,4 @@ const debouncedScrollEnd = debounce(() => {
   isScrolling = false;
   // Set pointer-events back to all when not scrolling
   document.documentElement.style.setProperty('--embeddable-pointer-events', 'all');
-}, 150); // 150ms debounce seems reasonable, but can be adjusted as needed
+}, 500); // 150ms debounce seems reasonable, but can be adjusted as needed

From 1c1740caea525fb497ad84703c4d11be60781986 Mon Sep 17 00:00:00 2001
From: Alex TYRODE <alex@tyrode.dev>
Date: Sun, 27 Apr 2025 23:01:01 +0000
Subject: [PATCH 3/5] feat: add lock indicator for scrolling in
 CustomEmbeddableRenderer

- Introduced a LockIndicator component that displays a lock icon when the user is scrolling.
- Updated styles to enhance the visibility and positioning of the lock icon.
- Implemented event listeners to manage the visibility of the lock icon based on scroll state.
---
 .../src/CustomEmbeddableRenderer.scss         | 18 ++++++++-
 src/frontend/src/CustomEmbeddableRenderer.tsx | 40 ++++++++++++++++++-
 2 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/CustomEmbeddableRenderer.scss b/src/frontend/src/CustomEmbeddableRenderer.scss
index 7e8bb3d..24a319b 100644
--- a/src/frontend/src/CustomEmbeddableRenderer.scss
+++ b/src/frontend/src/CustomEmbeddableRenderer.scss
@@ -9,12 +9,28 @@
         position: absolute;
         top: -30px;
         pointer-events: none;
+        display: flex;
+        align-items: center;
         
         &__text {
             font-family: 'Roboto', sans-serif;
             color: #d3d3d3;
             pointer-events: none;
             font-size: 18px;
+            margin-right: 8px;
+        }
+    }
+    
+    &__lock-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #d3d3d3;
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
+        
+        &.visible {
+            opacity: 1;
         }
     }
 
@@ -31,4 +47,4 @@
             border-bottom-right-radius: var(--embeddable-radius);
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/CustomEmbeddableRenderer.tsx b/src/frontend/src/CustomEmbeddableRenderer.tsx
index 7c55a3d..92a9bb6 100644
--- a/src/frontend/src/CustomEmbeddableRenderer.tsx
+++ b/src/frontend/src/CustomEmbeddableRenderer.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { Lock } from 'lucide-react';
 import { debounce } from './utils/debounce';
 import type { NonDeleted, ExcalidrawEmbeddableElement } from '@atyrode/excalidraw/element/types';
 import type { AppState } from '@atyrode/excalidraw/types';
@@ -65,6 +66,7 @@ export const renderCustomEmbeddable = (
       <div className="custom-embed">
         <div className="custom-embed__title-bar">
           <div className="custom-embed__title-bar__text">{title}</div>
+          <LockIndicator />
         </div>
         <div className="custom-embed__content">
           {content}
@@ -78,6 +80,7 @@ export const renderCustomEmbeddable = (
       <div className="custom-embed">
         <div className="custom-embed__title-bar">
           <div className="custom-embed__title-bar__text">{title}</div>
+          <LockIndicator />
         </div>
         <div className="custom-embed__content">
           <iframe className="custom-embed__content--iframe" src={element.link} />
@@ -87,14 +90,44 @@ export const renderCustomEmbeddable = (
   }
 };
 
+// Lock icon component that shows when scrolling
+const LockIndicator = () => {
+  const [visible, setVisible] = useState(false);
+  
+  useEffect(() => {
+    const handleScrollStateChange = (event: CustomEvent<{ isScrolling: boolean }>) => {
+      setVisible(event.detail.isScrolling);
+    };
+    
+    // Add event listener for scroll state changes
+    document.addEventListener('scrollStateChange', handleScrollStateChange as EventListener);
+    
+    // Clean up
+    return () => {
+      document.removeEventListener('scrollStateChange', handleScrollStateChange as EventListener);
+    };
+  }, []);
+  
+  return (
+    <div className={`custom-embed__lock-icon ${visible ? 'visible' : ''}`}>
+      <Lock size={16} />
+    </div>
+  );
+};
+
 // Track scrolling state
 let isScrolling = false;
+// Create a custom event for scrolling state changes
+const scrollStateChangeEvent = new CustomEvent('scrollStateChange', { detail: { isScrolling: false } });
 
 export const lockEmbeddables = () => {
   if (!isScrolling) {
     isScrolling = true;
     // Set pointer-events to none during scrolling
     document.documentElement.style.setProperty('--embeddable-pointer-events', 'none');
+    // Dispatch event with updated scrolling state
+    scrollStateChangeEvent.detail.isScrolling = true;
+    document.dispatchEvent(scrollStateChangeEvent);
   }
   
   // Reset the pointer-events after scrolling stops
@@ -106,4 +139,7 @@ const debouncedScrollEnd = debounce(() => {
   isScrolling = false;
   // Set pointer-events back to all when not scrolling
   document.documentElement.style.setProperty('--embeddable-pointer-events', 'all');
-}, 500); // 150ms debounce seems reasonable, but can be adjusted as needed
+  // Dispatch event with updated scrolling state
+  scrollStateChangeEvent.detail.isScrolling = false;
+  document.dispatchEvent(scrollStateChangeEvent);
+}, 500); // 500ms debounce seems reasonable, but can be adjusted as needed

From 8cc3cb4187f6de33d3c1359fdca94c64be769d9f Mon Sep 17 00:00:00 2001
From: Alex TYRODE <alex@tyrode.dev>
Date: Sun, 27 Apr 2025 23:08:56 +0000
Subject: [PATCH 4/5] feat: enhance LockIndicator with countdown timer

- Added a countdown timer to the LockIndicator component that activates when scrolling stops.
- Updated styles for the lock icon and countdown timer to improve visibility and positioning.
- Implemented polling and event listeners to manage the countdown state effectively.
---
 .../src/CustomEmbeddableRenderer.scss         | 51 +++++++++++++
 src/frontend/src/CustomEmbeddableRenderer.tsx | 71 +++++++++++++++++--
 2 files changed, 117 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/CustomEmbeddableRenderer.scss b/src/frontend/src/CustomEmbeddableRenderer.scss
index 24a319b..81097b7 100644
--- a/src/frontend/src/CustomEmbeddableRenderer.scss
+++ b/src/frontend/src/CustomEmbeddableRenderer.scss
@@ -32,6 +32,57 @@
         &.visible {
             opacity: 1;
         }
+        
+        .lock-container {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 28px;
+            height: 28px;
+        }
+        
+        .countdown-timer {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 28px;
+            height: 28px;
+            z-index: -1; /* Place behind the lock icon */
+        }
+        
+        .circular-timer {
+            width: 100%;
+            height: 100%;
+            transform: rotate(-90deg);
+            
+            .timer-background {
+                fill: none;
+                stroke: rgba(211, 211, 211, 0.2);
+                stroke-width: 2;
+            }
+            
+            .timer-progress {
+                fill: none;
+                stroke: #d3d3d3;
+                stroke-width: 2;
+                stroke-dasharray: 100.53; /* Circumference of circle with r=16: 2 * PI * 16 */
+                stroke-dashoffset: 0;
+                animation-name: countdown;
+                animation-timing-function: linear;
+                animation-fill-mode: forwards;
+            }
+        }
+    }
+    
+    @keyframes countdown {
+        from {
+            stroke-dashoffset: 0;
+        }
+        to {
+            stroke-dashoffset: 100.53; /* Same as stroke-dasharray */
+        }
     }
 
     &__content {
diff --git a/src/frontend/src/CustomEmbeddableRenderer.tsx b/src/frontend/src/CustomEmbeddableRenderer.tsx
index 92a9bb6..a7a9797 100644
--- a/src/frontend/src/CustomEmbeddableRenderer.tsx
+++ b/src/frontend/src/CustomEmbeddableRenderer.tsx
@@ -90,13 +90,52 @@ export const renderCustomEmbeddable = (
   }
 };
 
-// Lock icon component that shows when scrolling
+// Lock icon component that shows when scrolling with countdown timer
 const LockIndicator = () => {
   const [visible, setVisible] = useState(false);
+  const [counting, setCounting] = useState(false);
+  const debounceTime = 500; // Match the debounce time from lockEmbeddables
   
   useEffect(() => {
+    // Use polling to check the scrolling state directly
+    const checkScrollState = () => {
+      // If we're scrolling and not already visible, show the lock
+      if (isScrolling && !visible) {
+        setVisible(true);
+        setCounting(false);
+      } 
+      // If we're not scrolling but the lock is visible and not counting down
+      else if (!isScrolling && visible && !counting) {
+        // Start the countdown
+        setCounting(true);
+        
+        // After the debounce time, hide the lock
+        setTimeout(() => {
+          setVisible(false);
+          setCounting(false);
+        }, debounceTime);
+      }
+    };
+    
+    // Check the scroll state every 50ms
+    const intervalId = setInterval(checkScrollState, 50);
+    
+    // Also listen for the custom event as a backup
     const handleScrollStateChange = (event: CustomEvent<{ isScrolling: boolean }>) => {
-      setVisible(event.detail.isScrolling);
+      if (event.detail.isScrolling) {
+        // When scrolling starts, show the lock and reset countdown
+        setVisible(true);
+        setCounting(false);
+      } else if (!counting) {
+        // When scrolling stops, start the countdown
+        setCounting(true);
+        
+        // After the debounce time, hide the lock
+        setTimeout(() => {
+          setVisible(false);
+          setCounting(false);
+        }, debounceTime);
+      }
     };
     
     // Add event listener for scroll state changes
@@ -104,13 +143,35 @@ const LockIndicator = () => {
     
     // Clean up
     return () => {
+      clearInterval(intervalId);
       document.removeEventListener('scrollStateChange', handleScrollStateChange as EventListener);
     };
-  }, []);
+  }, [visible, counting]);
   
   return (
     <div className={`custom-embed__lock-icon ${visible ? 'visible' : ''}`}>
-      <Lock size={16} />
+      <div className="lock-container">
+        <Lock size={18} />
+        {counting && (
+          <div className="countdown-timer">
+            <svg viewBox="0 0 36 36" className="circular-timer">
+              <circle
+                className="timer-background"
+                cx="18"
+                cy="18"
+                r="16"
+              />
+              <circle
+                className="timer-progress"
+                cx="18"
+                cy="18"
+                r="16"
+                style={{ animationDuration: `${debounceTime}ms` }}
+              />
+            </svg>
+          </div>
+        )}
+      </div>
     </div>
   );
 };
@@ -142,4 +203,4 @@ const debouncedScrollEnd = debounce(() => {
   // Dispatch event with updated scrolling state
   scrollStateChangeEvent.detail.isScrolling = false;
   document.dispatchEvent(scrollStateChangeEvent);
-}, 500); // 500ms debounce seems reasonable, but can be adjusted as needed
+}, 1000); // 500ms debounce seems reasonable, but can be adjusted as needed

From 4a8bab59b0ad46be1c057b35c79a6f3f5d8151d8 Mon Sep 17 00:00:00 2001
From: Alex TYRODE <alex@tyrode.dev>
Date: Sun, 27 Apr 2025 23:24:52 +0000
Subject: [PATCH 5/5] refactor: simplify LockIndicator by removing countdown
 timer

- Removed the countdown timer functionality from the LockIndicator component, streamlining its behavior to only show the lock icon when scrolling.
- Updated styles to reflect the removal of the countdown timer and adjusted the lock icon's size for better integration.
- Cleaned up the useEffect hook to eliminate unnecessary state management related to the countdown.
---
 .../src/CustomEmbeddableRenderer.scss         | 51 -------------
 src/frontend/src/CustomEmbeddableRenderer.tsx | 71 ++-----------------
 2 files changed, 5 insertions(+), 117 deletions(-)

diff --git a/src/frontend/src/CustomEmbeddableRenderer.scss b/src/frontend/src/CustomEmbeddableRenderer.scss
index 81097b7..24a319b 100644
--- a/src/frontend/src/CustomEmbeddableRenderer.scss
+++ b/src/frontend/src/CustomEmbeddableRenderer.scss
@@ -32,57 +32,6 @@
         &.visible {
             opacity: 1;
         }
-        
-        .lock-container {
-            position: relative;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 28px;
-            height: 28px;
-        }
-        
-        .countdown-timer {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 28px;
-            height: 28px;
-            z-index: -1; /* Place behind the lock icon */
-        }
-        
-        .circular-timer {
-            width: 100%;
-            height: 100%;
-            transform: rotate(-90deg);
-            
-            .timer-background {
-                fill: none;
-                stroke: rgba(211, 211, 211, 0.2);
-                stroke-width: 2;
-            }
-            
-            .timer-progress {
-                fill: none;
-                stroke: #d3d3d3;
-                stroke-width: 2;
-                stroke-dasharray: 100.53; /* Circumference of circle with r=16: 2 * PI * 16 */
-                stroke-dashoffset: 0;
-                animation-name: countdown;
-                animation-timing-function: linear;
-                animation-fill-mode: forwards;
-            }
-        }
-    }
-    
-    @keyframes countdown {
-        from {
-            stroke-dashoffset: 0;
-        }
-        to {
-            stroke-dashoffset: 100.53; /* Same as stroke-dasharray */
-        }
     }
 
     &__content {
diff --git a/src/frontend/src/CustomEmbeddableRenderer.tsx b/src/frontend/src/CustomEmbeddableRenderer.tsx
index a7a9797..f53c98e 100644
--- a/src/frontend/src/CustomEmbeddableRenderer.tsx
+++ b/src/frontend/src/CustomEmbeddableRenderer.tsx
@@ -90,52 +90,13 @@ export const renderCustomEmbeddable = (
   }
 };
 
-// Lock icon component that shows when scrolling with countdown timer
+// Lock icon component that shows when scrolling
 const LockIndicator = () => {
   const [visible, setVisible] = useState(false);
-  const [counting, setCounting] = useState(false);
-  const debounceTime = 500; // Match the debounce time from lockEmbeddables
   
   useEffect(() => {
-    // Use polling to check the scrolling state directly
-    const checkScrollState = () => {
-      // If we're scrolling and not already visible, show the lock
-      if (isScrolling && !visible) {
-        setVisible(true);
-        setCounting(false);
-      } 
-      // If we're not scrolling but the lock is visible and not counting down
-      else if (!isScrolling && visible && !counting) {
-        // Start the countdown
-        setCounting(true);
-        
-        // After the debounce time, hide the lock
-        setTimeout(() => {
-          setVisible(false);
-          setCounting(false);
-        }, debounceTime);
-      }
-    };
-    
-    // Check the scroll state every 50ms
-    const intervalId = setInterval(checkScrollState, 50);
-    
-    // Also listen for the custom event as a backup
     const handleScrollStateChange = (event: CustomEvent<{ isScrolling: boolean }>) => {
-      if (event.detail.isScrolling) {
-        // When scrolling starts, show the lock and reset countdown
-        setVisible(true);
-        setCounting(false);
-      } else if (!counting) {
-        // When scrolling stops, start the countdown
-        setCounting(true);
-        
-        // After the debounce time, hide the lock
-        setTimeout(() => {
-          setVisible(false);
-          setCounting(false);
-        }, debounceTime);
-      }
+      setVisible(event.detail.isScrolling);
     };
     
     // Add event listener for scroll state changes
@@ -143,35 +104,13 @@ const LockIndicator = () => {
     
     // Clean up
     return () => {
-      clearInterval(intervalId);
       document.removeEventListener('scrollStateChange', handleScrollStateChange as EventListener);
     };
-  }, [visible, counting]);
+  }, []);
   
   return (
     <div className={`custom-embed__lock-icon ${visible ? 'visible' : ''}`}>
-      <div className="lock-container">
-        <Lock size={18} />
-        {counting && (
-          <div className="countdown-timer">
-            <svg viewBox="0 0 36 36" className="circular-timer">
-              <circle
-                className="timer-background"
-                cx="18"
-                cy="18"
-                r="16"
-              />
-              <circle
-                className="timer-progress"
-                cx="18"
-                cy="18"
-                r="16"
-                style={{ animationDuration: `${debounceTime}ms` }}
-              />
-            </svg>
-          </div>
-        )}
-      </div>
+      <Lock size={16} />
     </div>
   );
 };
@@ -203,4 +142,4 @@ const debouncedScrollEnd = debounce(() => {
   // Dispatch event with updated scrolling state
   scrollStateChangeEvent.detail.isScrolling = false;
   document.dispatchEvent(scrollStateChangeEvent);
-}, 1000); // 500ms debounce seems reasonable, but can be adjusted as needed
+}, 350);
\ No newline at end of file