Allow QR code to be dragged

pages/overlay.templ

@@ -28,13 +28,50 @@ templ Overlay(lnurl string, lnaddr string) {
                     }, 60_000)
                 })
             </script>
-            <div class="bg-white fixed bottom-0 left-0 text-center p-3">
+            <div id="qr" class="bg-white fixed bottom-0 left-0 text-center p-3 cursor-move" style="left: 0; bottom: 0;" draggable="true">
                 <div class="p-2">
                     <div class="font-bold">{ lnaddr }</div>
                     <img src={ "data:image/jpeg;base64," + qrEncode(lnurl) }/>
                 </div>
                 <div class="italic">zap us a message!</div>
             </div>
+            <script>
+                const qr = document.getElementById("qr");
+
+                let currentX = 0;
+                let currentY = 0;
+                let startX = 0;
+                let startY = 0;
+
+                const savedPosition = localStorage.getItem('qrPosition');
+                if (savedPosition) {
+                    const [x, y] = savedPosition.split(',').map(Number);
+                    currentX = x;
+                    currentY = y;
+                    qr.style.transform = `translate(${currentX}px, ${currentY}px)`;
+                }
+
+                qr.addEventListener("dragstart", (e) => {
+                    startX = e.clientX - currentX;
+                    startY = e.clientY - currentY;
+                    e.dataTransfer.setData("text/plain", `${currentX},${currentY}`);
+                });
+
+                qr.addEventListener("drag", (e) => {
+                    if (e.clientX && e.clientY) {
+                        currentX = e.clientX - startX;
+                        currentY = e.clientY - startY;
+                        qr.style.transform = `translate(${currentX}px, ${currentY}px)`;
+                    }
+                });
+
+                qr.addEventListener("dragend", (e) => {
+                    currentX = e.clientX - startX;
+                    currentY = e.clientY - startY;
+                    qr.style.transform = `translate(${currentX}px, ${currentY}px)`;
+                    localStorage.setItem('qrPosition', `${currentX},${currentY}`);
+                });
+            </script>
         </body>
     </html>
 }