skopix 2.0.90 → 2.0.91

package/cli/commands/dashboard.js

@@ -1896,6 +1896,12 @@ export async function dashboardCommand(options) {
         sendJSON(res, 200, folders);
         return;
       }
+      if (pathname === '/api/folders' && method === 'PUT') {
+        const folders = JSON.parse(await readBody(req));
+        await saveFolders(folders);
+        sendJSON(res, 200, folders);
+        return;
+      }
       if (pathname === '/api/folders' && method === 'DELETE') {
         const { name, type } = JSON.parse(await readBody(req));
         const folders = await getFolders();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skopix",
-  "version": "2.0.90",
+  "version": "2.0.91",
   "description": "Browser-based QA tool — record tests by using your app, replay them deterministically, generate Playwright code automatically",
   "main": "cli/index.js",
   "bin": {

package/web/app/index.html

@@ -5738,13 +5738,16 @@ function renderFolderTree(containerId, type, selectedFolder, onSelect) {
     const isSelected = selectedFolder === node.fullPath;
     return `<div>
       <div class="folder-item ${isSelected ? 'folder-item--active' : ''}"
-        style="padding:7px 14px 7px ${14 + depth * 16}px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12px;color:${isSelected ? 'var(--cyan)' : 'var(--text)'};background:${isSelected ? 'rgba(34,211,238,0.08)' : ''};transition:background 0.1s"
+        draggable="true"
+        ondragstart="onFolderReorderStart(event,'${escapeAttr(node.fullPath)}','${type}')"
+        ondragover="event.preventDefault();event.stopPropagation();this.style.outline=&quot;2px solid var(--cyan)&quot;"
+        ondragleave="this.style.outline=&quot;&quot;"
+        ondrop="onFolderReorderDrop(event,'${escapeAttr(node.fullPath)}','${type}')"
+        style="padding:7px 14px 7px ${14 + depth * 16}px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12px;color:${isSelected ? 'var(--cyan)' : 'var(--text)'};background:${isSelected ? 'rgba(34,211,238,0.08)' : ''};transition:background 0.1s;border-top:2px solid transparent"
         data-folder="${escapeAttr(node.fullPath)}" data-type="${type}"
         onmouseover="if(!this.classList.contains('folder-item--active'))this.style.background='var(--surface2)'"
-        onmouseout="if(!this.classList.contains('folder-item--active'))this.style.background=''"
-        ondragover="event.preventDefault();this.style.background='rgba(34,211,238,0.15)'"
-        ondragleave="this.style.background=''"
-        ondrop="onFolderDrop(event,'${escapeAttr(node.fullPath)}','${type}')">
+        onmouseout="if(!this.classList.contains('folder-item--active'))this.style.background=''">
+        <span style="color:var(--muted2);cursor:grab;font-size:12px;flex-shrink:0" onmousedown="event.stopPropagation()">⠿</span>
         <svg width="13" height="13" viewBox="0 0 24 24" fill="${isSelected ? 'rgba(34,211,238,0.3)' : 'none'}" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
         <span style="flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${escapeHtml(node.name)}</span>
         <span class="folder-actions" style="display:none;gap:4px">
@@ -5763,7 +5766,7 @@ function renderFolderTree(containerId, type, selectedFolder, onSelect) {
       onmouseover="if(${!allActive})this.style.background='var(--surface2)'" onmouseout="if(${!allActive})this.style.background=''"
       ondragover="event.preventDefault();this.style.background='rgba(34,211,238,0.15)'"
       ondragleave="this.style.background=''"
-      ondrop="onFolderDrop(event,'','${type}')">
+      ondrop="if(!event.dataTransfer.getData('folder-reorder'))onFolderDrop(event,'','${type}')">
       <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></svg>
       All
     </div>
@@ -5805,7 +5808,44 @@ document.addEventListener('click', (e) => {
   }
 });
 
-// Drag and drop
+// Folder reordering
+let folderDragName = null;
+
+function onFolderReorderStart(e, folderName, type) {
+  folderDragName = folderName;
+  e.dataTransfer.setData('folder-reorder', JSON.stringify({ name: folderName, type }));
+  e.dataTransfer.effectAllowed = 'move';
+  e.stopPropagation();
+}
+
+async function onFolderReorderDrop(e, targetName, type) {
+  e.preventDefault();
+  e.stopPropagation();
+  e.currentTarget.style.outline = '';
+  const data = e.dataTransfer.getData('folder-reorder');
+  if (!data) return;
+  const { name: draggedName } = JSON.parse(data);
+  if (draggedName === targetName) return;
+  // Reorder in foldersCache
+  const typeFolders = foldersCache.filter(f => f.type === type);
+  const others = foldersCache.filter(f => f.type !== type);
+  const dragIdx = typeFolders.findIndex(f => f.name === draggedName);
+  const targetIdx = typeFolders.findIndex(f => f.name === targetName);
+  if (dragIdx === -1 || targetIdx === -1) return;
+  const [dragged] = typeFolders.splice(dragIdx, 1);
+  typeFolders.splice(targetIdx, 0, dragged);
+  foldersCache = [...others, ...typeFolders];
+  // Save new order
+  await fetch(API_BASE + '/api/folders', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(foldersCache),
+  });
+  if (type === 'library') renderFolderTree('library-folder-tree', 'library', selectedLibraryFolder);
+  else renderFolderTree('tests-folder-tree', 'tests', selectedTestsFolder);
+}
+
+// Drag items into folders
 function onItemDragStart(e, id, type) {
   e.dataTransfer.setData('text/plain', JSON.stringify({ id, type }));
   e.dataTransfer.effectAllowed = 'move';