Picta rebrand: remove all clone/Imgur UI strings, wire /logo.svg, simplify upload (Share CTA, full-page drag overlay, body-scroll lock), scrollbar elimination (hidden tracks, overflow-x hidden, break-word, modal internal scroll)

public/js/app.js

@@ -3,11 +3,13 @@ let currentSort = 'new';
 let currentPosts = [];
 let currentPostId = null;
 let selectedFile = null;
+let dragCounter = 0;
 
 // ===== Initialize =====
 document.addEventListener('DOMContentLoaded', () => {
   loadPosts();
   setupDragDrop();
+  setupPageDrag();
   setupPasteUpload();
 });
 
@@ -141,6 +143,7 @@ function filterPosts() {
 // ===== Upload Modal =====
 function openUploadModal() {
   document.getElementById('uploadModal').classList.add('active');
+  document.body.classList.add('modal-open');
   selectedFile = null;
   document.getElementById('uploadPreview').style.display = 'none';
   document.getElementById('uploadPrompt').style.display = '';
@@ -153,6 +156,7 @@ function openUploadModal() {
 
 function closeUploadModal() {
   document.getElementById('uploadModal').classList.remove('active');
+  document.body.classList.remove('modal-open');
 }
 
 function setupDragDrop() {
@@ -191,6 +195,43 @@ function setupDragDrop() {
   });
 }
 
+// ===== Full-Page Drag Overlay =====
+function setupPageDrag() {
+  const overlay = document.getElementById('dragOverlay');
+
+  document.addEventListener('dragenter', (e) => {
+    e.preventDefault();
+    dragCounter++;
+    if (e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files')) {
+      overlay.classList.add('active');
+    }
+  });
+
+  document.addEventListener('dragleave', (e) => {
+    e.preventDefault();
+    dragCounter--;
+    if (dragCounter <= 0) {
+      dragCounter = 0;
+      overlay.classList.remove('active');
+    }
+  });
+
+  document.addEventListener('dragover', (e) => {
+    e.preventDefault();
+  });
+
+  document.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dragCounter = 0;
+    overlay.classList.remove('active');
+    const file = e.dataTransfer.files[0];
+    if (file && file.type.startsWith('image/')) {
+      openUploadModal();
+      handleFile(file);
+    }
+  });
+}
+
 function handleFile(file) {
   // Validate
   const allowed = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
@@ -213,6 +254,8 @@ function handleFile(file) {
     document.getElementById('previewImage').src = e.target.result;
     document.getElementById('uploadPreview').style.display = 'block';
     document.getElementById('uploadPrompt').style.display = 'none';
+    // Auto-focus the Share button so user just presses Enter/clicks
+    document.getElementById('submitBtn').focus();
   };
   reader.readAsDataURL(file);
 }
@@ -341,6 +384,8 @@ async function handlePasteUpload(blob) {
     document.getElementById('previewImage').src = e.target.result;
     document.getElementById('uploadPreview').style.display = 'block';
     document.getElementById('uploadPrompt').style.display = 'none';
+    // Auto-focus the Share button
+    document.getElementById('submitBtn').focus();
   };
   reader.readAsDataURL(file);