Update app.py

app.py

@@ -215,6 +215,9 @@ TEMPLATE = """
       font-weight: 500;
       font-size: 1rem;
       color: #f1f5f9;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .dropdown {
@@ -367,21 +370,6 @@ TEMPLATE = """
       box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
     }
 
-    /* Loading Animation */
-    .loading {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      border: 2px solid rgba(255, 255, 255, 0.3);
-      border-radius: 50%;
-      border-top-color: #667eea;
-      animation: spin 1s ease-in-out infinite;
-    }
-
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
-
     /* Responsive Design */
     @media (max-width: 768px) {
       .container {
@@ -412,7 +400,7 @@ TEMPLATE = """
     }
 
     ::-webkit-scrollbar-thumb {
-      background: rgba(102, 126, 234, 0.5);
+      background: rgba(102, 126, 234, 0.5 design);
       border-radius: 4px;
     }
 
@@ -449,11 +437,9 @@ TEMPLATE = """
         <form action="/upload" method="post" enctype="multipart/form-data" class="upload-container">
           <input type="file" name="file" required class="file-input" id="fileInput">
           <input type="hidden" name="path" value="{{ path }}">
-          <label for="fileInput" class="btn">
-            📤 Upload File
-          </label>
+          <label for="fileInput" class="btn">📤 Upload File</label>
         </form>
-        <button class="btn btn-secondary" onclick="createFolder('{{ path }}')">
+        <button class="btn btn-secondary" onclick="showCreateFolderModal('{{ path }}')">
           📁 New Folder
         </button>
       </div>
@@ -493,6 +479,18 @@ TEMPLATE = """
     </div>
   </div>
 
+  <!-- Create Folder Modal -->
+  <div class="modal-overlay" id="createFolderModal">
+    <div class="modal">
+      <h3 class="modal-title">Create New Folder</h3>
+      <input type="text" class="modal-input" id="folderNameInput" placeholder="Enter folder name">
+      <div class="modal-actions">
+        <button class="btn btn-secondary" onclick="closeModal('createFolderModal')">Cancel</button>
+        <button class="btn" onclick="confirmCreateFolder()">Create</button>
+      </div>
+    </div>
+  </div>
+
   <!-- Rename Modal -->
   <div class="modal-overlay" id="renameModal">
     <div class="modal">
@@ -520,6 +518,7 @@ TEMPLATE = """
   <script>
     let currentRenamePath = '';
     let currentDeletePath = '';
+    let currentFolderPath = '';
     let activeDropdown = null;
 
     function nav(p) {
@@ -532,16 +531,20 @@ TEMPLATE = """
 
     function toggleDropdown(button) {
       const dropdown = button.closest('.dropdown');
-      
-      // Close other dropdowns
       if (activeDropdown && activeDropdown !== dropdown) {
         activeDropdown.classList.remove('active');
       }
-      
       dropdown.classList.toggle('active');
       activeDropdown = dropdown.classList.contains('active') ? dropdown : null;
     }
 
+    function showCreateFolderModal(currentPath) {
+      currentFolderPath = currentPath;
+      document.getElementById('folderNameInput').value = '';
+      showModal('createFolderModal');
+      setTimeout(() => document.getElementById('folderNameInput').focus(), 100);
+    }
+
     function showRenameModal(path, currentName) {
       currentRenamePath = path;
       document.getElementById('renameInput').value = currentName;
@@ -571,81 +574,74 @@ TEMPLATE = """
       activeDropdown = null;
     }
 
-    async function confirmRename() {
-      const newName = document.getElementById('renameInput').value.trim();
-      if (!newName) return;
-
+    async function confirmCreateFolder() {
+      const name = document.getElementById('folderNameInput').value.trim();
+      if (!name) return;
+      const folderPath = currentFolderPath ? `${currentFolderPath}/${name}` : name;
       try {
-        const response = await fetch('/rename', {
+        const response = await fetch('/create_folder', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            old_path: currentRenamePath,
-            new_path: newName
-          })
+          body: JSON.stringify({ path: folderPath })
         });
-        
         if (response.ok) {
-          closeModal('renameModal');
+          closeModal('createFolderModal');
           location.reload();
         }
       } catch (error) {
-        console.error('Rename failed:', error);
+        console.error('Create folder failed:', error);
       }
     }
 
-    async function confirmDelete() {
+    async function confirmRename() {
+      const newName = document.getElementById('renameInput').value.trim();
+      if (!newName) return;
+      const oldPathParts = currentRenamePath.split('/');
+      oldPathParts[oldPathParts.length - 1] = newName;
+      const newPath = oldPathParts.join('/');
       try {
-        const response = await fetch('/delete', {
+        const response = await fetch('/rename', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ path: currentDeletePath })
+          body: JSON.stringify({ old_path: currentRenamePath, new_path: newPath })
         });
-        
         if (response.ok) {
-          closeModal('deleteModal');
+          closeModal('renameModal');
           location.reload();
         }
       } catch (error) {
-        console.error('Delete failed:', error);
+        console.error('Rename failed:', error);
       }
     }
 
-    async function createFolder(currentPath) {
-      const name = prompt('Enter folder name:');
-      if (!name) return;
-
+    async function confirmDelete() {
       try {
-        const folderPath = currentPath ? `${currentPath}/${name}` : name;
-        const response = await fetch('/create_folder', {
+        const response = await fetch('/delete', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ path: folderPath })
+          body: JSON.stringify({ path: currentDeletePath })
         });
-        
         if (response.ok) {
+          closeModal('deleteModal');
           location.reload();
         }
       } catch (error) {
-        console.error('Create folder failed:', error);
+        console.error('Delete failed:', error);
       }
     }
 
-    // Close dropdowns when clicking outside
     document.addEventListener('click', function(e) {
       if (!e.target.closest('.dropdown')) {
         closeAllDropdowns();
       }
     });
 
-    // Handle file input change for better UX
     document.getElementById('fileInput').addEventListener('change', function(e) {
       if (e.target.files.length > 0) {
         e.target.closest('form').submit();
       }
     });
 
-    // Handle modal close on overlay click
     document.querySelectorAll('.modal-overlay').forEach(overlay => {
       overlay.addEventListener('click', function(e) {
         if (e.target === overlay) {
@@ -654,7 +650,12 @@ TEMPLATE = """
       });
     });
 
-    // Handle Enter key in rename modal
+    document.getElementById('folderNameInput').addEventListener('keypress', function(e) {
+      if (e.key === 'Enter') {
+        confirmCreateFolder();
+      }
+    });
+
     document.getElementById('renameInput').addEventListener('keypress', function(e) {
       if (e.key === 'Enter') {
         confirmRename();
@@ -681,7 +682,6 @@ def list_folder(path=""):
                 items.append({"type":"dir","name":dir_name,"path":dir_path})
         else:
             items.append({"type":"file","name":rest,"path":(prefix + rest).strip("/")})
-    # sort dirs then files
     items.sort(key=lambda x: (x["type"]!="dir", x["name"].lower()))
     return items
 
@@ -693,7 +693,6 @@ def index():
 @app.route("/download", methods=["GET"])
 def download():
     p = request.args.get("path","")
-    # download via hf_hub_download into /tmp
     local = hf_hub_download(repo_id=REPO_ID, filename=p, repo_type="dataset", token=HF_TOKEN, cache_dir=tempfile.gettempdir())
     return send_file(local, as_attachment=True, download_name=os.path.basename(p))