feat: add visual drag-and-drop reordering indicators and improve event handling for connection items

frontend/src/main.js

@@ -91,12 +91,22 @@ async function loadConnections() {
                     draggedConnId = null;
                     el.style.opacity = '1';
                 });
+                el.addEventListener('dragenter', (e) => {
+                    e.preventDefault();
+                    if (draggedConnId && draggedConnId !== c.id) {
+                        el.style.borderTop = '2px solid var(--accent)';
+                    }
+                });
+                el.addEventListener('dragleave', (e) => {
+                    el.style.borderTop = '';
+                });
                 el.addEventListener('dragover', (e) => {
                     e.preventDefault();
                     e.dataTransfer.dropEffect = 'move';
                 });
                 el.addEventListener('drop', async (e) => {
                     e.preventDefault();
+                    el.style.borderTop = '';
                     if (!draggedConnId || draggedConnId === c.id) return;
                     
                     const ids = connectionsCache.map(conn => conn.id);
@@ -109,10 +119,10 @@ async function loadConnections() {
                         
                         try {
                             await ReorderConnections(ids);
-                            await loadConnections();
                         } catch (err) {
                             console.error("Failed to reorder connections:", err);
                         }
+                        await loadConnections();
                     }
                 });
 

frontend/src/style.css

@@ -57,6 +57,14 @@ body {
     transition: background 0.2s;
 }
 
+.conn-item * {
+    pointer-events: none;
+}
+
+.conn-item .edit-btn {
+    pointer-events: auto;
+}
+
 .conn-item:hover {
     background: var(--surface-hover);
 }