From d4b06586fe0c27039b94511ea8d337f56878c428 Mon Sep 17 00:00:00 2001
From: JadXV <jad.a7@hotmail.com>
Date: Sun, 29 Mar 2026 01:48:11 -0400
Subject: [PATCH] Added drag and drop, Fixed some bugs and changed the look of
 the interface (Removed things we didnt need and just moved tghings around
 mostly)

---
 public/index.html        | 135 +++++++++---------
 public/mobile-styles.css |  17 ++-
 public/script.js         | 286 ++++++++++++++++++++++++++++++++++-----
 public/styles.css        | 172 ++++++++++++++++++++---
 4 files changed, 485 insertions(+), 125 deletions(-)

diff --git a/public/index.html b/public/index.html
index d59a2d9..81ec674 100644
--- a/public/index.html
+++ b/public/index.html
@@ -84,6 +84,7 @@
           <button id="delete-btn" class="toolbar-btn" title="Delete" disabled>
             <i class="fas fa-trash"></i>
           </button>
+
           <div
             class="custom-sort-dropdown settings-dropdown"
             id="settings-dropdown"
@@ -111,32 +112,68 @@
             </div>
           </div>
 
-          <div id="user-menu-wrapper" style="display:flex;align-items:center;gap:4px;margin-left:4px">
-            <a
-              id="admin-panel-btn"
-              href="/admin"
-              class="toolbar-btn"
-              title="User Management"
-              style="display:none;text-decoration:none"
+          <div id="user-menu-wrapper">
+            <div
+              class="custom-sort-dropdown user-dropdown"
+              id="user-dropdown-wrapper"
             >
-              <i class="fas fa-users-cog"></i>
-            </a>
-            <div class="custom-sort-dropdown" id="user-dropdown-wrapper">
-              <button id="user-menu-btn" class="toolbar-btn" title="Account" style="display:flex;align-items:center;gap:5px">
+              <button
+                id="user-menu-btn"
+                class="toolbar-btn"
+                title="Account"
+              >
                 <i class="fas fa-user-circle"></i>
-                <span id="user-menu-name" style="font-size:12px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></span>
               </button>
-              <div class="custom-sort-menu" id="user-dropdown-menu" style="right:0;left:auto;min-width:160px">
-                <div class="custom-sort-item" id="user-role-display" style="color:var(--text-tertiary);cursor:default;font-size:11px;padding:6px 12px"></div>
-                <div class="context-item separator"></div>
-                <div class="custom-sort-item" id="change-password-item" style="padding:6px 12px">
-                  <i class="fas fa-key" style="width:14px;margin-right:6px"></i>Change Password
+              <div class="custom-sort-menu user-dropdown-menu" id="user-dropdown-menu">
+                <div class="custom-sort-item user-menu-heading" id="user-display-name"></div>
+                <div class="menu-separator"></div>
+                <a
+                  class="custom-sort-item user-dropdown-link hidden"
+                  id="admin-menu-item"
+                  href="/admin"
+                >
+                  <i class="fas fa-users-cog"></i>Admin Panel
+                </a>
+                <div class="custom-sort-item user-dropdown-link" id="change-password-item">
+                  <i class="fas fa-key"></i>Change Password
+                </div>
+                <div
+                  class="custom-sort-item user-dropdown-link user-menu-danger"
+                  id="logout-item"
+                >
+                  <i class="fas fa-sign-out-alt"></i>Sign Out
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="sort-controls topbar-sort-controls">
+            <label>Sort by:</label>
+            <div class="custom-sort-dropdown" id="custom-sort-dropdown">
+              <button class="custom-sort-button" id="custom-sort-button">
+                <span id="sort-button-text">Name</span>
+                <i class="fas fa-chevron-down"></i>
+              </button>
+              <div class="custom-sort-menu" id="custom-sort-menu">
+                <div class="custom-sort-item selected" data-value="name">
+                  Name
                 </div>
-                <div class="custom-sort-item" id="logout-item" style="padding:6px 12px;color:var(--error)">
-                  <i class="fas fa-sign-out-alt" style="width:14px;margin-right:6px"></i>Sign Out
+                <div class="custom-sort-item" data-value="size">Size</div>
+                <div class="custom-sort-item" data-value="date">
+                  Date Modified
+                </div>
+                <div class="custom-sort-item" data-value="type">
+                  File Type
                 </div>
               </div>
             </div>
+            <button
+              id="sort-order-btn"
+              class="sort-order-btn"
+              title="Toggle sort order"
+            >
+              <i class="fas fa-sort-alpha-down"></i>
+            </button>
           </div>
         </div>
       </header>
@@ -146,38 +183,6 @@
           <div class="file-list-container">
             <div class="file-list-header">
               <div class="file-list-title">Files</div>
-              <div class="sort-controls">
-                <label>Sort by:</label>
-                <div class="custom-sort-dropdown" id="custom-sort-dropdown">
-                  <button class="custom-sort-button" id="custom-sort-button">
-                    <span id="sort-button-text">Name</span>
-                    <i class="fas fa-chevron-down"></i>
-                  </button>
-                  <div class="custom-sort-menu" id="custom-sort-menu">
-                    <div class="custom-sort-item selected" data-value="name">
-                      Name
-                    </div>
-                    <div class="custom-sort-item" data-value="size">Size</div>
-                    <div class="custom-sort-item" data-value="date">
-                      Date Modified
-                    </div>
-                    <div class="custom-sort-item" data-value="type">
-                      File Type
-                    </div>
-                  </div>
-                </div>
-                <button
-                  id="sort-order-btn"
-                  class="sort-order-btn"
-                  title="Toggle sort order"
-                >
-                  <i class="fas fa-sort-alpha-down"></i>
-                </button>
-              </div>
-            </div>
-
-            <div class="file-column-headers">
-              <div class="column-header-spacer"></div>
               <div class="column-header">Size</div>
               <div class="column-header">Date Modified</div>
               <div class="column-header">Permissions</div>
@@ -240,11 +245,17 @@
       </div>
 
       <div id="context-menu" class="context-menu hidden">
-        <div class="context-item separator"></div>
         <div class="context-item" data-action="preview">
           <i class="fas fa-eye"></i> Preview
         </div>
         <div class="context-item separator"></div>
+        <div class="context-item" data-action="new-folder">
+          <i class="fas fa-folder-plus"></i> New Folder
+        </div>
+        <div class="context-item" data-action="new-file">
+          <i class="fas fa-file-circle-plus"></i> New File
+        </div>
+        <div class="context-item separator"></div>
         <div class="context-item" data-action="copy">
           <i class="fas fa-copy"></i> Copy
         </div>
@@ -450,14 +461,12 @@ <h3>Change Password</h3>
 
           window.__SPECTERS_USER__ = user;
 
-          document.getElementById("user-menu-name").textContent = user.username;
-          document.getElementById("user-role-display").textContent =
-            user.role === "admin" ? "Administrator" :
-            user.role === "readwrite" ? "Read / Write" : "Read-only";
+          document.getElementById("user-display-name").textContent = user.username;
 
           if (user.role === "admin") {
-            document.getElementById("admin-panel-btn").style.display = "flex";
+            document.getElementById("admin-menu-item").classList.remove("hidden");
           }
+
         })
         .catch(() => window.location.replace("/login"));
 
@@ -467,10 +476,14 @@ <h3>Change Password</h3>
 
       btn.addEventListener("click", (e) => {
         e.stopPropagation();
-        const open = menu.style.display === "block";
-        menu.style.display = open ? "none" : "block";
+        wrapper.classList.toggle("open");
+      });
+      menu.addEventListener("click", (e) => e.stopPropagation());
+      document.addEventListener("click", (e) => {
+        if (!wrapper.contains(e.target)) {
+          wrapper.classList.remove("open");
+        }
       });
-      document.addEventListener("click", () => { menu.style.display = "none"; });
 
       document.getElementById("logout-item").addEventListener("click", async () => {
         await fetch("/api/auth/logout", { method: "POST" });
@@ -478,7 +491,7 @@ <h3>Change Password</h3>
       });
 
       document.getElementById("change-password-item").addEventListener("click", () => {
-        menu.style.display = "none";
+        wrapper.classList.remove("open");
         document.getElementById("cp-current").value = "";
         document.getElementById("cp-new").value = "";
         document.getElementById("cp-confirm").value = "";
diff --git a/public/mobile-styles.css b/public/mobile-styles.css
index 260b03b..c2bc5de 100644
--- a/public/mobile-styles.css
+++ b/public/mobile-styles.css
@@ -17,9 +17,14 @@
   .toolbar {
     gap: 4px;
     flex-wrap: wrap;
+    flex: 0 0 auto;
   }
 
-  .toolbar .toolbar-btn:not(#delete-btn):not(#shutdown-btn) {
+  .toolbar .toolbar-btn:not(#delete-btn):not(#shutdown-btn):not(#user-menu-btn) {
+    display: none;
+  }
+
+  .topbar-sort-controls {
     display: none;
   }
 
@@ -38,15 +43,15 @@
     font-size: 12px;
   }
 
-  .file-column-headers {
+  .file-list-header {
     display: grid;
     grid-template-columns: 1fr 80px;
     column-gap: 16px;
     padding: 6px 16px 4px 16px;
   }
 
-  .file-column-headers .column-header:nth-child(3),
-  .file-column-headers .column-header:nth-child(4) {
+  .file-list-header .column-header:nth-child(3),
+  .file-list-header .column-header:nth-child(4) {
     display: none;
   }
 
@@ -174,7 +179,7 @@
     gap: 6px;
   }
 
-  .toolbar .toolbar-btn:not(#shutdown-btn) {
+  .toolbar .toolbar-btn:not(#shutdown-btn):not(#user-menu-btn) {
     display: none;
   }
 
@@ -192,7 +197,7 @@
     font-size: 13px;
   }
 
-  .file-column-headers {
+  .file-list-header {
     padding: 4px 12px;
   }
 
diff --git a/public/script.js b/public/script.js
index c5b3a9a..6af2e68 100644
--- a/public/script.js
+++ b/public/script.js
@@ -249,6 +249,7 @@ class FileExplorer {
     this.currentPath = window.__SPECTERS_DEFAULT_PATH__ || "/";
     this.selectedFiles = new Set();
     this.clipboard = { items: [], operation: null };
+    this.draggedItems = [];
     this.history = [window.__SPECTERS_DEFAULT_PATH__ || "/"];
     this.historyIndex = 0;
     this.cache = new Map();
@@ -327,15 +328,24 @@ class FileExplorer {
   initializeDragAndDrop() {
     const dropZone = document.getElementById("drop-zone");
     const fileList = document.getElementById("file-list");
-
-    ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
-      fileList.addEventListener(eventName, this.preventDefaults, false);
-    });
+    const upBtn = document.getElementById("up-btn");
 
     ["dragenter", "dragover"].forEach((eventName) => {
       fileList.addEventListener(
         eventName,
-        () => dropZone.classList.add("active"),
+        (e) => {
+          if (this.isExternalFileDrag(e)) {
+            this.preventDefaults(e);
+            dropZone.classList.add("active");
+            return;
+          }
+
+          const internalPaths = this.getInternalDragPaths(e);
+          if (internalPaths.length > 0) {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "move";
+          }
+        },
         false,
       );
     });
@@ -343,12 +353,47 @@ class FileExplorer {
     ["dragleave", "drop"].forEach((eventName) => {
       fileList.addEventListener(
         eventName,
-        () => dropZone.classList.remove("active"),
+        (e) => {
+          if (this.isExternalFileDrag(e)) {
+            this.preventDefaults(e);
+            dropZone.classList.remove("active");
+          }
+        },
         false,
       );
     });
 
     fileList.addEventListener("drop", this.handleDrop.bind(this), false);
+
+    if (upBtn) {
+      upBtn.addEventListener("dragover", (e) => {
+        const internalPaths = this.getInternalDragPaths(e);
+        if (internalPaths.length === 0) return;
+
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        upBtn.classList.add("drag-target-active");
+      });
+
+      upBtn.addEventListener("dragleave", (e) => {
+        if (e.relatedTarget && upBtn.contains(e.relatedTarget)) return;
+        upBtn.classList.remove("drag-target-active");
+      });
+
+      upBtn.addEventListener("drop", async (e) => {
+        const internalPaths = this.getInternalDragPaths(e);
+        if (internalPaths.length === 0) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+        upBtn.classList.remove("drag-target-active");
+
+        await this.moveItemsToDestination(
+          internalPaths,
+          this.getParentPath(this.currentPath),
+        );
+      });
+    }
   }
 
   initializeContextMenu() {
@@ -470,6 +515,151 @@ class FileExplorer {
     e.stopPropagation();
   }
 
+  isExternalFileDrag(e) {
+    const types = Array.from(e.dataTransfer?.types || []);
+    return types.includes("Files");
+  }
+
+  getInternalDragPaths(e) {
+    const transfer = e?.dataTransfer;
+    if (!transfer) {
+      return Array.from(this.draggedItems || []);
+    }
+
+    const rawPaths = transfer.getData("application/x-specters-paths");
+    if (rawPaths) {
+      try {
+        const parsed = JSON.parse(rawPaths);
+        if (Array.isArray(parsed)) {
+          return parsed;
+        }
+      } catch (_) {}
+    }
+
+    return Array.from(this.draggedItems || []);
+  }
+
+  getParentPath(targetPath) {
+    return targetPath.split("/").slice(0, -1).join("/") || "/";
+  }
+
+  joinPath(basePath, entryName) {
+    const cleanBase = (basePath || "/").replace(/\/+$/, "") || "/";
+    const cleanEntry = (entryName || "").replace(/^\/+/, "");
+    return cleanBase === "/" ? `/${cleanEntry}` : `${cleanBase}/${cleanEntry}`;
+  }
+
+  bindFileItemInteractions(item, file) {
+    item.addEventListener("click", (e) => {
+      if (e.ctrlKey || e.metaKey) this.toggleFileSelection(item);
+      else if (e.shiftKey && this.selectedFiles.size > 0)
+        this.selectFileRange(item);
+      else {
+        this.clearSelection();
+        this.selectFile(item);
+      }
+    });
+
+    item.addEventListener("dblclick", () => {
+      if (file.isDirectory) this.loadFiles(file.path);
+      else this.openFile(file.path);
+    });
+
+    item.setAttribute("draggable", "true");
+
+    item.addEventListener("dragstart", (e) => {
+      if (!item.classList.contains("selected")) {
+        this.clearSelection();
+        this.selectFile(item);
+      }
+
+      const dragPaths = Array.from(this.selectedFiles);
+      this.draggedItems = dragPaths;
+
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData(
+        "application/x-specters-paths",
+        JSON.stringify(dragPaths),
+      );
+      e.dataTransfer.setData("text/plain", dragPaths.join("\n"));
+
+      document
+        .querySelectorAll(".file-item.selected")
+        .forEach((selectedItem) => selectedItem.classList.add("drag-source"));
+    });
+
+    item.addEventListener("dragover", (e) => {
+      if (item.dataset.isDirectory !== "true") return;
+
+      const internalPaths = this.getInternalDragPaths(e);
+      if (internalPaths.length === 0) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+      e.dataTransfer.dropEffect = "move";
+      item.classList.add("drag-over-folder");
+    });
+
+    item.addEventListener("dragleave", (e) => {
+      if (item.dataset.isDirectory !== "true") return;
+      if (e.relatedTarget && item.contains(e.relatedTarget)) return;
+      item.classList.remove("drag-over-folder");
+    });
+
+    item.addEventListener("drop", async (e) => {
+      if (item.dataset.isDirectory !== "true") return;
+
+      const internalPaths = this.getInternalDragPaths(e);
+      if (internalPaths.length === 0) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+      item.classList.remove("drag-over-folder");
+
+      await this.moveItemsToDestination(internalPaths, item.dataset.path);
+    });
+
+    item.addEventListener("dragend", () => {
+      this.draggedItems = [];
+      document
+        .querySelectorAll(".file-item.drag-source, .file-item.drag-over-folder")
+        .forEach((fileItem) =>
+          fileItem.classList.remove("drag-source", "drag-over-folder"),
+        );
+      document.getElementById("up-btn")?.classList.remove("drag-target-active");
+    });
+  }
+
+  async moveItemsToDestination(paths, destinationDir) {
+    const uniquePaths = [...new Set(paths)];
+    const moveCandidates = uniquePaths.filter((sourcePath) => {
+      if (!sourcePath || sourcePath === destinationDir) return false;
+      if (this.getParentPath(sourcePath) === destinationDir) return false;
+      if (destinationDir.startsWith(`${sourcePath}/`)) return false;
+      return true;
+    });
+
+    if (moveCandidates.length === 0) return;
+
+    this.showLoading(true);
+    try {
+      for (const sourcePath of moveCandidates) {
+        const destinationPath = this.joinPath(
+          destinationDir,
+          sourcePath.split("/").pop(),
+        );
+        await this.moveFile(sourcePath, destinationPath);
+      }
+
+      this.showNotification(`Moved ${moveCandidates.length} item(s)`, "success");
+      this.refresh();
+    } catch (error) {
+      this.showNotification(error.message, "error");
+    } finally {
+      this.showLoading(false);
+    }
+  }
+
   async loadFiles(path, skipCache = false) {
     if (!skipCache && this.cache.has(path)) {
       const cached = this.cache.get(path);
@@ -554,20 +744,7 @@ class FileExplorer {
             <div class="file-permissions">${permissions}</div>
         `;
 
-    item.addEventListener("click", (e) => {
-      if (e.ctrlKey || e.metaKey) this.toggleFileSelection(item);
-      else if (e.shiftKey && this.selectedFiles.size > 0)
-        this.selectFileRange(item);
-      else {
-        this.clearSelection();
-        this.selectFile(item);
-      }
-    });
-
-    item.addEventListener("dblclick", () => {
-      if (file.isDirectory) this.loadFiles(file.path);
-      else this.openFile(file.path);
-    });
+    this.bindFileItemInteractions(item, file);
 
     return item;
   }
@@ -744,6 +921,32 @@ class FileExplorer {
     }
   }
 
+  async createFile() {
+    const name = prompt("Enter file name:");
+    if (!name) return;
+
+    const fileName = name.trim();
+    if (!fileName) return;
+
+    const filePath = this.joinPath(this.currentPath, fileName);
+
+    try {
+      const response = await fetch("/api/save-file", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path: filePath, content: "" }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.error);
+
+      this.showNotification("File created successfully", "success");
+      this.refresh();
+    } catch (error) {
+      this.showNotification(error.message, "error");
+    }
+  }
+
   uploadFiles() {
     document.getElementById("file-input").click();
   }
@@ -756,7 +959,15 @@ class FileExplorer {
   }
 
   async handleDrop(e) {
-    const files = Array.from(e.dataTransfer.files);
+    this.preventDefaults(e);
+
+    const internalPaths = this.getInternalDragPaths(e);
+    if (internalPaths.length > 0) {
+      await this.moveItemsToDestination(internalPaths, this.currentPath);
+      return;
+    }
+
+    const files = Array.from(e.dataTransfer.files || []);
     if (files.length === 0) return;
     await this.uploadFilesToServer(files);
   }
@@ -947,7 +1158,10 @@ class FileExplorer {
     this.showLoading(true);
     try {
       for (const sourcePath of this.clipboard.items) {
-        const destinationPath = `${this.currentPath}/${sourcePath.split("/").pop()}`;
+        const destinationPath = this.joinPath(
+          this.currentPath,
+          sourcePath.split("/").pop(),
+        );
         if (this.clipboard.operation === "copy")
           await this.copyFile(sourcePath, destinationPath);
         else if (this.clipboard.operation === "cut")
@@ -1065,10 +1279,23 @@ class FileExplorer {
 
   handleContextAction(action) {
     const selectedPath = Array.from(this.selectedFiles)[0];
+    const actionWithoutSelection = ["paste", "new-folder", "new-file"];
+
+    if (!selectedPath && !actionWithoutSelection.includes(action)) {
+      this.showNotification("Select an item first", "warning");
+      return;
+    }
+
     switch (action) {
       case "preview":
         this.previewFile(selectedPath);
         break;
+      case "new-folder":
+        this.createFolder();
+        break;
+      case "new-file":
+        this.createFile();
+        break;
       case "copy":
         this.copySelected();
         break;
@@ -2106,20 +2333,7 @@ class SettingsManager {
             <div class="file-permissions">${permissions}</div>
         `;
 
-    item.addEventListener("click", (e) => {
-      if (e.ctrlKey || e.metaKey) window.fileExplorer.toggleFileSelection(item);
-      else if (e.shiftKey && window.fileExplorer.selectedFiles.size > 0)
-        window.fileExplorer.selectFileRange(item);
-      else {
-        window.fileExplorer.clearSelection();
-        window.fileExplorer.selectFile(item);
-      }
-    });
-
-    item.addEventListener("dblclick", () => {
-      if (file.isDirectory) window.fileExplorer.loadFiles(file.path);
-      else window.fileExplorer.openFile(file.path);
-    });
+    window.fileExplorer.bindFileItemInteractions(item, file);
 
     return item;
   }
diff --git a/public/styles.css b/public/styles.css
index a79ca89..d348ebd 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -174,10 +174,83 @@ select:focus {
   gap: 8px;
 }
 
+.toolbar {
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+#user-menu-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.user-dropdown {
+  min-width: auto;
+}
+
+.user-dropdown-menu {
+  left: auto;
+  right: 0;
+  min-width: 190px;
+  width: auto;
+  z-index: 10000;
+}
+
+.custom-sort-dropdown.user-dropdown .custom-sort-menu {
+  background: rgba(14, 18, 26, 0.18) !important;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
+  backdrop-filter: blur(22px) saturate(1.25) !important;
+  -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
+}
+
+.user-menu-heading {
+  cursor: default;
+  color: var(--text-tertiary);
+  font-size: 11px;
+  padding: 6px 12px;
+}
+
+.user-menu-heading:hover {
+  background: transparent;
+}
+
+.user-dropdown-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  color: var(--text-primary);
+}
+
+.user-dropdown-link i {
+  width: 14px;
+  color: var(--text-accent);
+}
+
+.user-menu-danger,
+.user-menu-danger i {
+  color: var(--error);
+}
+
+.menu-separator {
+  height: 1px;
+  background: var(--border-primary);
+  margin: 4px 0;
+}
+
+#up-btn.drag-target-active {
+  background: rgba(100, 160, 255, 0.2);
+  color: var(--text-primary);
+}
+
 .path-bar {
-  flex: 1;
+  flex: 1 1 auto;
   display: flex;
   gap: 8px;
+  min-width: 0;
+  max-width: 760px;
 }
 
 #path-input {
@@ -185,6 +258,64 @@ select:focus {
   font-size: 12px;
 }
 
+.toolbar .topbar-sort-controls {
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0;
+  background: transparent;
+  border: none;
+  gap: 6px;
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.toolbar .topbar-sort-controls label {
+  font-size: 11px;
+}
+
+.toolbar .topbar-sort-controls .custom-sort-dropdown {
+  min-width: 110px;
+  flex-shrink: 1;
+}
+
+.toolbar .topbar-sort-controls .sort-order-btn {
+  height: 26px;
+}
+
+@media screen and (max-width: 1340px) and (min-width: 769px) {
+  .path-bar {
+    max-width: 560px;
+  }
+
+  .toolbar .topbar-sort-controls {
+    margin-left: 8px;
+    margin-right: 0;
+  }
+
+  .toolbar .topbar-sort-controls label {
+    display: none;
+  }
+
+  .toolbar .topbar-sort-controls .custom-sort-dropdown {
+    min-width: 92px;
+  }
+}
+
+@media screen and (max-width: 1120px) and (min-width: 769px) {
+  .path-bar {
+    max-width: 430px;
+  }
+
+  .toolbar .topbar-sort-controls .custom-sort-dropdown {
+    min-width: 84px;
+  }
+
+  .toolbar .topbar-sort-controls .custom-sort-button {
+    padding: 4px 6px;
+    font-size: 11px;
+  }
+}
+
 .main-content {
   flex: 1;
   display: flex;
@@ -216,37 +347,24 @@ select:focus {
 
 .file-list-header {
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: 1fr 120px 180px 140px;
   column-gap: 32px;
-  padding: 12px 28px;
+  align-items: center;
+  padding: 8px 28px 6px 28px;
   background: rgba(255, 255, 255, 0.03);
   border-radius: 6px 6px 0 0;
   font-weight: 600;
-  font-size: 11px;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  align-items: center;
-}
-
-.file-column-headers {
-  display: grid;
-  grid-template-columns: 1fr 120px 180px 140px;
-  column-gap: 32px;
-  padding: 8px 28px 4px 28px;
-  background: transparent;
-  font-weight: 500;
   font-size: 10px;
-  color: var(--text-tertiary);
+  color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  align-items: center;
   border-bottom: 1px solid var(--border-secondary);
   margin-bottom: 4px;
 }
 
-.column-header-spacer {
-  display: block;
+.file-list-title {
+  font-size: 10px;
+  letter-spacing: 0.45px;
 }
 
 .column-header {
@@ -296,6 +414,15 @@ select:focus {
   color: var(--text-primary);
 }
 
+.file-item.drag-source {
+  opacity: 0.55;
+}
+
+.file-item.drag-over-folder {
+  background: var(--bg-selected);
+  box-shadow: inset 0 0 0 1px rgba(100, 160, 255, 0.45);
+}
+
 .file-name {
   display: flex;
   align-items: center;
@@ -967,6 +1094,7 @@ select:focus {
   z-index: 2000;
   min-width: 180px;
   overflow: hidden;
+  padding: 4px 0;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid var(--border-primary);
@@ -999,7 +1127,7 @@ select:focus {
 .context-item.separator {
   height: 1px;
   background: var(--border-primary);
-  margin: 5px 0;
+  margin: 4px 0;
   padding: 0;
   cursor: default;
 }