From d4d435014a36e25f6fc38e0f68d5c651fb1662d9 Mon Sep 17 00:00:00 2001 From: MaheshtheDev Date: Mon, 9 Sep 2024 18:07:46 -0700 Subject: [PATCH] feat: Drag and Dismiss extension features --- apps/extension/content/ContentApp.tsx | 142 ++++++++++++++++++++++---- 1 file changed, 123 insertions(+), 19 deletions(-) diff --git a/apps/extension/content/ContentApp.tsx b/apps/extension/content/ContentApp.tsx index 56e5b725..0002fa6d 100644 --- a/apps/extension/content/ContentApp.tsx +++ b/apps/extension/content/ContentApp.tsx @@ -57,6 +57,8 @@ export default function ContentApp({ const [userNotLoggedIn, setUserNotLoggedIn] = useState(false); + const [position, setPosition] = useState({ x: 0, y: 80 }); + const showLoginToast = async () => { setUserNotLoggedIn(true); @@ -169,7 +171,7 @@ export default function ContentApp({ useEffect(() => { document.addEventListener("mousemove", (e) => { const percentageX = (e.clientX / window.innerWidth) * 100; - const percentageY = (e.clientY / window.innerHeight) * 100; + const percentageY = ((e.clientY + position.y) / window.innerHeight) * 100; if (percentageX > 75 && percentageY > 75) { setHover(true); @@ -218,7 +220,7 @@ export default function ContentApp({ document.removeEventListener("mousemove", () => {}); document.removeEventListener("keydown", handleKeyDown, true); }; - }, []); + }, [position.y]); const getSpaces = async () => { const response = await fetch(`${BACKEND_URL}/api/spaces`, { @@ -324,6 +326,29 @@ export default function ContentApp({ return null; } + const svgDragCursor = ` + + + +`; + + const encodedSvgCursor = encodeURIComponent(svgDragCursor); + + const dismissExtension = () => { + const extension = document.querySelector("#supermemory-extension-host"); + extension?.remove(); + }; + return (
@@ -334,24 +359,52 @@ export default function ContentApp({ > - await getSpaces()} asChild> - - await getSpaces()} + asChild + style={{ + position: "absolute", + right: "10px", + bottom: `${position.y}px`, + }} + > +
+ {hover && ( + + + + + )} + - - - + + + + +
{userNotLoggedIn ? ( @@ -434,6 +487,57 @@ export default function ContentApp({ )} +
{ + e.preventDefault(); + const viewportHeight = window.innerHeight; + const elementHeight = 48; // Adjust this value based on your element's height + + let newY = viewportHeight - e.clientY; + + // Ensure the element stays within the viewport + newY = Math.max(0, Math.min(newY, viewportHeight - elementHeight)); + + setPosition((prevPosition) => ({ ...prevPosition, y: newY })); + }} + onDragEnd={(e) => { + e.preventDefault(); + console.log("drag end"); + console.log(e.clientY); + const viewportHeight = window.innerHeight; + const elementHeight = 48; // Adjust this value based on your element's height + + let newY = viewportHeight - e.clientY; + + // Ensure the element stays within the viewport + newY = Math.max(0, Math.min(newY, viewportHeight - elementHeight)); + console.log("mouse end " + newY); + + setPosition((prevPosition) => ({ ...prevPosition, y: newY })); + }} + draggable + > + + + + + + + + +
{(window.location.host === "twitter.com" || window.location.host === "x.com") && (