[MOC-26] Draggable Popup (#83)

* setup draggable

* save draggable popup location

* formatting

apps/mocksi-lite/consts.ts

@@ -11,6 +11,8 @@ export const MOCKSI_AUTH = "mocksi-auth";
 export const MOCKSI_HIGHLIGHTER_ID = "mocksi-highlighter";
 export const MOCKSI_IMAGE_REPLACER_ID = "mocksi-image-replacer";
 
+export const MOCKSI_POPUP_LOCATION = "mocksi-popup-location";
+
 export const WebSocketURL = "wss://crowllectordb.onrender.com/ws";
 export const API_URL = "https://crowllectordb.onrender.com/api";
 // FIXME: Move to an environment variable

apps/mocksi-lite/content/Popup/Header.tsx

@@ -26,8 +26,8 @@ const Header = ({ createForm, close, onDelete, onGoBack }: HeaderProps) => {
 				>
 					<img src={closeIcon} alt="closeIcon" />
 				</div>
-				<div className={"w-full mr-[20px] flex justify-center"}>
-					<img src={menuIcon} alt="menuIcon" />
+				<div className={"w-full mr-[20px] flex justify-center drag-handle"}>
+					<img src={menuIcon} draggable="false" alt="menuIcon" />
 				</div>
 			</div>
 

apps/mocksi-lite/content/Popup/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
-import { RecordingState } from "../../consts";
+import Draggable, { type DraggableEventHandler } from "react-draggable";
+import { MOCKSI_POPUP_LOCATION, RecordingState } from "../../consts";
 import { debounce_leading, sendMessage } from "../../utils";
 import CreateDemo from "./CreateDemo";
 import Divider from "./Divider";
@@ -15,6 +16,7 @@ interface PopupProps {
 }
 
 const Popup = ({ close, setState, state, email }: PopupProps) => {
+	const [position, setPosition] = useState({ x: 0, y: 0 });
 	const [createForm, setCreateForm] = useState<boolean>(false);
 
 	useEffect(() => {
@@ -36,25 +38,51 @@ const Popup = ({ close, setState, state, email }: PopupProps) => {
 		}
 	};
 
-	return (
-		<div
-			className={
-				"w-[500px] h-[596px] shadow-lg rounded-lg m-4 bg-white flex flex-col justify-between"
+	const onDragStop: DraggableEventHandler = (event, data) => {
+		if (data.x === 0 || data.y === 0) {
+			return;
+		}
+
+		setPosition({ x: data.x, y: data.y });
+
+		chrome.storage.local.set({
+			[MOCKSI_POPUP_LOCATION]: {
+				x: data.x,
+				y: data.y,
+			},
+		});
+	};
+
+	useEffect(() => {
+		chrome.storage.local.get([MOCKSI_POPUP_LOCATION], (results) => {
+			const location = results[MOCKSI_POPUP_LOCATION];
+			if (location) {
+				setPosition(location);
 			}
-		>
-			<Header createForm={createForm} close={close} />
-
-			{/* CONTENT */}
-			{renderContent()}
-
-			{/* FOOTER */}
-			{!createForm && (
-				<div>
-					<Divider />
-					<Footer close={close} email={email} />
-				</div>
-			)}
-		</div>
+		});
+	}, []);
+
+	return (
+		<Draggable handle=".drag-handle" position={position} onStop={onDragStop}>
+			<div
+				className={
+					"w-[500px] h-[596px] shadow-lg rounded-lg m-4 bg-white flex flex-col justify-between"
+				}
+			>
+				<Header createForm={createForm} close={close} />
+
+				{/* CONTENT */}
+				{renderContent()}
+
+				{/* FOOTER */}
+				{!createForm && (
+					<div>
+						<Divider />
+						<Footer close={close} email={email} />
+					</div>
+				)}
+			</div>
+		</Draggable>
 	);
 };
 

apps/mocksi-lite/package.json

@@ -27,6 +27,7 @@
 		"@repo/harlight": "workspace:*",
 		"@rollbar/react": "0.12.0-beta",
 		"auth0-js": "^9.26.1",
+		"react-draggable": "^4.4.6",
 		"rollbar": "^2.26.4",
 		"sanitize-html": "^2.13.0",
 		"use-shadow-dom": "^1.2.0",