Update app.py

app.py

@@ -1,5 +1,7 @@
 import os
 import tempfile
+import requests
+from urllib.parse import urlparse, unquote
 from flask import Flask, render_template_string, request, redirect, send_file, jsonify
 from huggingface_hub import HfApi, hf_hub_download, upload_file, delete_file
 
@@ -18,292 +20,345 @@ TEMPLATE = """
   <title>HuggingFace Drive - {{ path or 'Root' }}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
-    :root {
-      --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-      --warning-gradient: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
-      --bg-dark: #111827;
-      --bg-darker: #0d1117;
-      --bg-card: rgba(31, 41, 55, 0.5);
-      --bg-modal: #1f2937;
-      --border-light: rgba(255, 255, 255, 0.1);
-      --text-light: #e5e7eb;
-      --text-lighter: #f9fafb;
-      --text-muted: #9ca3af;
-      --shadow-primary: 0 8px 32px rgba(102, 126, 234, 0.3);
-      --shadow-large: 0 20px 60px rgba(0, 0, 0, 0.5);
-      --radius-lg: 16px;
-      --radius-md: 12px;
-      --radius-sm: 8px;
-      --transition-speed: 0.3s;
-    }
-
+    /* CSS Reset & Variables */
     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
 
+    :root {
+      --primary: #6366f1;
+      --primary-hover: #5855eb;
+      --primary-light: rgba(99, 102, 241, 0.1);
+      --secondary: #64748b;
+      --secondary-hover: #475569;
+      --success: #10b981;
+      --success-hover: #059669;
+      --warning: #f59e0b;
+      --warning-hover: #d97706;
+      --danger: #ef4444;
+      --danger-hover: #dc2626;
+      
+      --bg-primary: #0f172a;
+      --bg-secondary: #1e293b;
+      --bg-tertiary: #334155;
+      --bg-card: #1e293b;
+      --bg-overlay: rgba(15, 23, 42, 0.9);
+      
+      --text-primary: #f8fafc;
+      --text-secondary: #cbd5e1;
+      --text-muted: #94a3b8;
+      
+      --border: #334155;
+      --border-light: #475569;
+      --border-focus: var(--primary);
+      
+      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
+      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+      --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+      --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.25);
+      
+      --radius-sm: 0.375rem;
+      --radius-md: 0.5rem;
+      --radius-lg: 0.75rem;
+      --radius-xl: 1rem;
+      
+      --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    /* Base Styles */
     body {
-      background-color: var(--bg-darker);
-      background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
-      background-size: 25px 25px;
-      color: var(--text-light);
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      line-height: 1.6;
       min-height: 100vh;
-      line-height: 1.5;
     }
 
+    /* Layout */
     .container {
-      max-width: 1280px;
+      max-width: 1200px;
       margin: 0 auto;
-      padding: 40px 24px;
+      padding: 1.5rem;
     }
 
+    /* Header */
     .header {
       background: var(--bg-card);
-      backdrop-filter: blur(10px);
-      border-radius: var(--radius-lg);
-      padding: 24px;
-      margin-bottom: 32px;
-      border: 1px solid var(--border-light);
-      box-shadow: var(--shadow-large);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-xl);
+      padding: 2rem;
+      margin-bottom: 2rem;
+      box-shadow: var(--shadow-lg);
     }
 
     .title {
-      font-size: 2.25rem;
-      font-weight: 700;
-      margin-bottom: 16px;
-      background: var(--primary-gradient);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
+      font-size: 2.5rem;
+      font-weight: 800;
+      color: var(--primary);
+      margin-bottom: 1.5rem;
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: 1rem;
     }
 
+    .title-icon {
+      width: 3rem;
+      height: 3rem;
+      color: var(--primary);
+    }
+
+    /* Breadcrumb */
     .breadcrumb {
       display: flex;
       align-items: center;
-      gap: 8px;
-      margin-bottom: 24px;
+      gap: 0.5rem;
+      margin-bottom: 2rem;
       flex-wrap: wrap;
     }
 
     .breadcrumb-item {
-      background: rgba(255, 255, 255, 0.05);
-      color: var(--text-muted);
-      padding: 6px 12px;
-      border-radius: var(--radius-sm);
+      background: var(--bg-tertiary);
+      color: var(--text-secondary);
+      padding: 0.5rem 1rem;
+      border-radius: var(--radius-md);
       font-size: 0.875rem;
       cursor: pointer;
-      transition: all var(--transition-speed) ease;
-      border: 1px solid transparent;
-      white-space: nowrap;
+      transition: var(--transition);
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
       max-width: 200px;
       overflow: hidden;
       text-overflow: ellipsis;
-      display: flex;
-      align-items: center;
-      gap: 6px;
+      white-space: nowrap;
     }
 
     .breadcrumb-item:hover {
-      background: rgba(102, 126, 234, 0.2);
-      color: var(--text-lighter);
+      background: var(--primary);
+      color: white;
       transform: translateY(-1px);
     }
 
     .breadcrumb-item.active {
-      background: var(--primary-gradient);
+      background: var(--primary);
       color: white;
-      font-weight: 600;
-      border-color: rgba(255,255,255,0.2);
     }
 
     .breadcrumb-separator {
       color: var(--text-muted);
+      font-size: 1.25rem;
     }
 
+    /* Actions */
     .actions {
-      display: flex;
-      gap: 12px;
-      flex-wrap: wrap;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1rem;
     }
 
+    /* Buttons */
     .btn {
-      background: var(--primary-gradient);
-      color: white;
-      border: none;
-      padding: 12px 20px;
-      border-radius: var(--radius-md);
-      cursor: pointer;
-      font-weight: 600;
-      font-size: 0.9rem;
-      transition: all var(--transition-speed) ease;
-      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-      border: 1px solid var(--border-light);
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      gap: 8px;
+      gap: 0.5rem;
+      padding: 0.75rem 1.5rem;
+      border: none;
+      border-radius: var(--radius-md);
+      font-weight: 600;
+      font-size: 0.875rem;
+      cursor: pointer;
+      transition: var(--transition);
+      text-decoration: none;
+      min-height: 2.75rem;
+      position: relative;
+      overflow: hidden;
     }
 
-    .btn:hover {
-      transform: translateY(-2px);
-      box-shadow: var(--shadow-primary);
+    .btn:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+      transform: none !important;
     }
 
-    .btn:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-        transform: translateY(0);
-        box-shadow: none;
+    .btn-primary {
+      background: var(--primary);
+      color: white;
+      box-shadow: var(--shadow-md);
+    }
+
+    .btn-primary:hover:not(:disabled) {
+      background: var(--primary-hover);
+      transform: translateY(-2px);
+      box-shadow: var(--shadow-lg);
     }
 
     .btn-secondary {
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--text-lighter);
+      background: var(--bg-tertiary);
+      color: var(--text-primary);
+      border: 1px solid var(--border);
     }
 
-    .btn-secondary:hover {
-      background: rgba(255, 255, 255, 0.15);
-      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+    .btn-secondary:hover:not(:disabled) {
+      background: var(--secondary);
+      border-color: var(--border-light);
+      transform: translateY(-1px);
     }
-    
+
+    .btn-success {
+      background: var(--success);
+      color: white;
+    }
+
+    .btn-success:hover:not(:disabled) {
+      background: var(--success-hover);
+      transform: translateY(-2px);
+    }
+
     .btn-danger {
-      background: var(--danger-gradient);
+      background: var(--danger);
+      color: white;
     }
-    .btn-danger:hover {
-        box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
+
+    .btn-danger:hover:not(:disabled) {
+      background: var(--danger-hover);
+      transform: translateY(-2px);
     }
 
+    /* File Input */
     .file-input-wrapper {
-        position: relative;
-        overflow: hidden;
-        display: inline-block;
+      position: relative;
+      overflow: hidden;
+      display: inline-block;
+      width: 100%;
     }
 
     .file-input {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-        cursor: pointer;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      cursor: pointer;
     }
 
+    /* File Grid */
     .file-grid {
       display: grid;
-      gap: 24px;
-      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 1.5rem;
     }
 
     .file-item {
       background: var(--bg-card);
-      backdrop-filter: blur(10px);
-      border: 1px solid var(--border-light);
+      border: 1px solid var(--border);
       border-radius: var(--radius-lg);
-      transition: all var(--transition-speed) ease;
+      overflow: hidden;
+      transition: var(--transition-slow);
       position: relative;
     }
 
     .file-item:hover {
       transform: translateY(-4px);
-      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
-      border-color: rgba(102, 126, 234, 0.3);
+      box-shadow: var(--shadow-xl);
+      border-color: var(--primary);
     }
 
-    .file-item-clickable {
-        display: block;
-        padding: 16px;
-        cursor: pointer;
-        text-decoration: none;
-    }
-
-    .file-content {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
+    .file-item-content {
+      padding: 1.5rem;
+      cursor: pointer;
     }
 
     .file-info {
       display: flex;
       align-items: center;
-      gap: 12px;
-      flex: 1;
-      min-width: 0;
+      gap: 1rem;
     }
 
     .file-icon {
-      font-size: 1.5rem;
-      width: 40px;
-      height: 40px;
+      width: 3rem;
+      height: 3rem;
+      border-radius: var(--radius-md);
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: var(--radius-md);
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--text-lighter);
       flex-shrink: 0;
+      font-size: 1.5rem;
     }
-    
-    .folder-icon {
-      background: var(--warning-gradient);
+
+    .file-icon.folder {
+      background: var(--warning);
+      color: white;
+    }
+
+    .file-icon.file {
+      background: var(--primary-light);
+      color: var(--primary);
+    }
+
+    .file-details {
+      flex: 1;
+      min-width: 0;
     }
 
     .file-name {
-      font-weight: 500;
-      color: var(--text-lighter);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 0.25rem;
+      word-break: break-word;
     }
 
+    .file-meta {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+    }
+
+    /* Dropdown */
     .dropdown {
       position: absolute;
-      top: 12px;
-      right: 12px;
+      top: 1rem;
+      right: 1rem;
     }
-    
+
     .dropdown-toggle {
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid transparent;
-      color: var(--text-muted);
+      width: 2.5rem;
+      height: 2.5rem;
       border-radius: var(--radius-md);
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border);
+      color: var(--text-secondary);
       cursor: pointer;
-      transition: all var(--transition-speed) ease;
-      width: 36px;
-      height: 36px;
+      transition: var(--transition);
       display: flex;
       align-items: center;
       justify-content: center;
     }
 
     .dropdown-toggle:hover {
-      background: rgba(255, 255, 255, 0.2);
-      color: var(--text-lighter);
-      border-color: var(--border-light);
+      background: var(--primary);
+      color: white;
+      border-color: var(--primary);
     }
 
     .dropdown-menu {
       position: absolute;
-      top: calc(100% + 8px);
+      top: calc(100% + 0.5rem);
       right: 0;
-      background: var(--bg-modal);
-      border: 1px solid var(--border-light);
-      border-radius: var(--radius-md);
-      padding: 8px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: 0.5rem;
       min-width: 180px;
       opacity: 0;
       visibility: hidden;
       transform: translateY(-10px);
-      transition: all var(--transition-speed) ease;
+      transition: var(--transition);
       z-index: 1000;
-      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+      box-shadow: var(--shadow-xl);
     }
 
     .dropdown.active .dropdown-menu {
@@ -315,42 +370,43 @@ TEMPLATE = """
     .dropdown-item {
       display: flex;
       align-items: center;
-      gap: 10px;
-      padding: 10px 12px;
-      border-radius: var(--radius-sm);
+      gap: 0.75rem;
+      padding: 0.75rem;
+      border-radius: var(--radius-md);
       cursor: pointer;
-      transition: background-color 0.2s ease, color 0.2s ease;
+      transition: var(--transition);
       font-size: 0.875rem;
-      font-weight: 500;
-      color: var(--text-muted);
+      color: var(--text-secondary);
+      width: 100%;
+      text-align: left;
+      border: none;
+      background: none;
     }
 
     .dropdown-item:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--text-lighter);
+      background: var(--bg-tertiary);
+      color: var(--text-primary);
     }
 
     .dropdown-item.danger:hover {
-      background: rgba(239, 68, 68, 0.2);
-      color: #fca5a5;
+      background: var(--danger);
+      color: white;
     }
 
-    /* Modal Styles */
+    /* Modal */
     .modal-overlay {
       position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.7);
-      backdrop-filter: blur(5px);
+      inset: 0;
+      background: var(--bg-overlay);
+      backdrop-filter: blur(8px);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 2000;
       opacity: 0;
       visibility: hidden;
-      transition: all var(--transition-speed) ease;
+      transition: var(--transition);
+      padding: 1rem;
     }
 
     .modal-overlay.active {
@@ -359,164 +415,232 @@ TEMPLATE = """
     }
 
     .modal {
-      background: var(--bg-modal);
-      border: 1px solid var(--border-light);
-      border-radius: var(--radius-lg);
-      padding: 24px;
-      max-width: 450px;
-      width: 90%;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-xl);
+      padding: 2rem;
+      width: 100%;
+      max-width: 500px;
       transform: scale(0.95);
-      transition: all var(--transition-speed) ease;
-      box-shadow: var(--shadow-large);
+      transition: var(--transition);
+      box-shadow: var(--shadow-xl);
     }
-    
+
     .modal-overlay.active .modal {
       transform: scale(1);
     }
 
     .modal-title {
-      font-size: 1.25rem;
-      font-weight: 600;
-      margin-bottom: 16px;
-      color: var(--text-lighter);
+      font-size: 1.5rem;
+      font-weight: 700;
+      margin-bottom: 1.5rem;
+      color: var(--text-primary);
     }
 
     .modal-body {
-      margin-bottom: 24px;
-      color: var(--text-muted);
+      margin-bottom: 2rem;
     }
 
-    .modal-input {
+    .modal-input, .modal-textarea {
       width: 100%;
-      background: rgba(255, 255, 255, 0.05);
-      border: 1px solid var(--border-light);
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border);
       border-radius: var(--radius-md);
-      padding: 12px 16px;
-      color: var(--text-lighter);
+      padding: 1rem;
+      color: var(--text-primary);
       font-size: 1rem;
-      transition: all var(--transition-speed) ease;
+      transition: var(--transition);
+      resize: vertical;
+    }
+
+    .modal-textarea {
+      min-height: 120px;
+      font-family: inherit;
     }
 
-    .modal-input:focus {
+    .modal-input:focus, .modal-textarea:focus {
       outline: none;
-      border-color: #667eea;
-      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+      border-color: var(--border-focus);
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
     }
 
     .modal-actions {
       display: flex;
-      gap: 12px;
+      gap: 1rem;
       justify-content: flex-end;
     }
-    
-    /* Utility & Helper Classes */
-    .icon {
-        width: 1.25em;
-        height: 1.25em;
+
+    /* Upload Overlay */
+    .upload-overlay {
+      position: fixed;
+      inset: 0;
+      background: var(--bg-overlay);
+      backdrop-filter: blur(8px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+      opacity: 0;
+      visibility: hidden;
+      transition: var(--transition);
+      gap: 1.5rem;
     }
+
+    .upload-overlay.active {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .upload-text {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+
+    /* Loading Spinner */
     .loading-spinner {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
+      width: 2rem;
+      height: 2rem;
       border: 3px solid rgba(255, 255, 255, 0.3);
+      border-top-color: var(--primary);
       border-radius: 50%;
-      border-top-color: #fff;
-      animation: spin 1s ease-in-out infinite;
+      animation: spin 1s linear infinite;
     }
-    .btn .loading-spinner {
-        border-top-color: #fff;
+
+    .upload-overlay .loading-spinner {
+      width: 3rem;
+      height: 3rem;
+      border-width: 4px;
     }
 
     @keyframes spin {
       to { transform: rotate(360deg); }
     }
 
-    .upload-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, 0.8);
-        backdrop-filter: blur(8px);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        z-index: 9999;
-        color: var(--text-lighter);
-        gap: 16px;
-        opacity: 0;
-        visibility: hidden;
-        transition: all var(--transition-speed) ease;
+    /* Utilities */
+    .icon {
+      width: 1.25rem;
+      height: 1.25rem;
+      flex-shrink: 0;
     }
-    .upload-overlay.active {
-        opacity: 1;
-        visibility: visible;
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
     }
-    .upload-overlay .loading-spinner {
-        width: 48px;
-        height: 48px;
-        border-width: 4px;
+
+    /* Empty State */
+    .empty-state {
+      text-align: center;
+      padding: 4rem 2rem;
+      color: var(--text-muted);
     }
-    .upload-overlay-text {
-        font-size: 1.25rem;
-        font-weight: 500;
+
+    .empty-state .icon {
+      width: 4rem;
+      height: 4rem;
+      margin: 0 auto 1rem;
+      opacity: 0.5;
     }
 
     /* Responsive Design */
     @media (max-width: 768px) {
       .container {
-        padding: 24px 16px;
+        padding: 1rem;
       }
+      
+      .header {
+        padding: 1.5rem;
+      }
+      
       .title {
-        font-size: 1.75rem;
+        font-size: 2rem;
       }
-      .file-grid {
-        grid-template-columns: 1fr;
-        gap: 16px;
+      
+      .title-icon {
+        width: 2.5rem;
+        height: 2.5rem;
       }
+      
       .actions {
-        flex-direction: column;
-        align-items: stretch;
+        grid-template-columns: 1fr;
       }
-      .btn {
-          width: 100%;
+      
+      .file-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
       }
+      
       .breadcrumb {
-        gap: 6px;
+        gap: 0.25rem;
       }
+      
       .breadcrumb-separator {
         display: none;
       }
+      
+      .modal {
+        padding: 1.5rem;
+        margin: 1rem;
+      }
+      
       .modal-actions {
         flex-direction: column-reverse;
       }
+      
       .modal-actions .btn {
-          width: 100%;
+        width: 100%;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .file-item-content {
+        padding: 1rem;
+      }
+      
+      .file-icon {
+        width: 2.5rem;
+        height: 2.5rem;
+      }
+      
+      .breadcrumb-item {
+        max-width: 120px;
+        padding: 0.375rem 0.75rem;
       }
     }
   </style>
 </head>
 <body>
-  
   <!-- Upload Overlay -->
   <div class="upload-overlay" id="uploadOverlay">
     <div class="loading-spinner"></div>
-    <p class="upload-overlay-text">Uploading...</p>
+    <p class="upload-text">Processing...</p>
   </div>
-  
+
   <div class="container">
     <header class="header">
       <h1 class="title">
-        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15.59 2.76a1 1 0 0 1 .45 1.08L14.5 11h-5l-1.54-7.16a1 1 0 0 1 .45-1.08l7-4.04a1 1 0 0 1 1.18.01z"></path><path d="M12 11v10"></path><path d="M12 21a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path><path d="M6 11H2.5a1 1 0 0 0-1 .9l-1.45 7.1A1 1 0 0 0 1 21h4.05"></path><path d="M22.9 11.9a1 1 0 0 0-1-.9H18"></path><path d="M19.45 20.01A1 1 0 0 0 20 21h3a1 1 0 0 0 .9-1.1l-1.45-7.1z"></path></svg>
-        <span>HuggingFace Drive</span>
+        <svg class="title-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5a2 2 0 012-2h4a2 2 0 012 2v0a2 2 0 01-2 2H10a2 2 0 01-2-2v0z"></path>
+        </svg>
+        HuggingFace Drive
       </h1>
-      
-      <!-- Breadcrumb Navigation -->
+
+      <!-- Breadcrumb -->
       <nav class="breadcrumb">
         <span class="breadcrumb-item {{ 'active' if not path else '' }}" onclick="nav('')">
-          <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" /></svg>
+          <svg class="icon" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
+          </svg>
           Home
         </span>
         {% if path %}
@@ -526,92 +650,138 @@ TEMPLATE = """
             {% set current_path = parts[:i+1]|join('/') %}
             <span class="breadcrumb-item {{ 'active' if current_path == path else '' }}" 
                   onclick="nav('{{ current_path }}')">
-              <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" /></svg>
+              <svg class="icon" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
+              </svg>
               {{ parts[i] }}
             </span>
           {% endfor %}
         {% endif %}
       </nav>
+
       <!-- Actions -->
       <div class="actions">
         <form action="/upload" method="post" enctype="multipart/form-data" id="uploadForm">
           <div class="file-input-wrapper">
-              <label for="fileInput" class="btn">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM6.293 6.707a1 1 0 010-1.414l3-3a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414L11 5.414V13a1 1 0 11-2 0V5.414L7.707 6.707a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>
-                  Upload File
-              </label>
-              <input type="file" name="file" required class="file-input" id="fileInput">
-              <input type="hidden" name="path" value="{{ path }}">
+            <label for="fileInput" class="btn btn-primary">
+              <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
+              </svg>
+              Upload File
+            </label>
+            <input type="file" name="file" required class="file-input" id="fileInput">
+            <input type="hidden" name="path" value="{{ path }}">
           </div>
         </form>
+
         <button class="btn btn-secondary" onclick="showFolderModal('{{ path }}')">
-          <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" /></svg>
+          <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+          </svg>
           New Folder
         </button>
+
+        <button class="btn btn-success" onclick="showUrlDownloadModal('{{ path }}')">
+          <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+          </svg>
+          Download from URL
+        </button>
       </div>
     </header>
+
     <!-- File Grid -->
-    <main class="file-grid">
-      {% for item in items %}
-        <div class="file-item">
-          <div class="file-item-clickable" onclick="{% if item.type=='dir' %}nav('{{ item.path }}'){% else %}download('{{ item.path }}'){% endif %}">
-            <div class="file-content">
-              <div class="file-info">
-                <div class="file-icon {{ 'folder-icon' if item.type=='dir' }}">
-                   {% if item.type == 'dir' %}
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" /></svg>
-                   {% else %}
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" /></svg>
-                   {% endif %}
+    <main>
+      {% if items %}
+        <div class="file-grid">
+          {% for item in items %}
+            <div class="file-item">
+              <div class="file-item-content" onclick="{% if item.type=='dir' %}nav('{{ item.path }}'){% else %}download('{{ item.path }}'){% endif %}">
+                <div class="file-info">
+                  <div class="file-icon {{ item.type }}">
+                    {% if item.type == 'dir' %}
+                      <svg class="icon" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
+                      </svg>
+                    {% else %}
+                      <svg class="icon" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/>
+                      </svg>
+                    {% endif %}
+                  </div>
+                  <div class="file-details">
+                    <div class="file-name">{{ item.name }}</div>
+                    <div class="file-meta">{{ item.type|title }}</div>
+                  </div>
                 </div>
-                <div class="file-name" title="{{ item.name }}">{{ item.name }}</div>
               </div>
-            </div>
-          </div>
-          <div class="dropdown">
-            <button class="dropdown-toggle" onclick="toggleDropdown(event, this)">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" /></svg>
-            </button>
-            <div class="dropdown-menu">
-              {% if item.type == 'file' %}
-                <div class="dropdown-item" onclick="download('{{ item.path }}')">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
-                  Download
+
+              <div class="dropdown">
+                <button class="dropdown-toggle" onclick="toggleDropdown(event, this)">
+                  <svg class="icon" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"/>
+                  </svg>
+                </button>
+                <div class="dropdown-menu">
+                  {% if item.type == 'file' %}
+                    <button class="dropdown-item" onclick="download('{{ item.path }}')">
+                      <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                      </svg>
+                      Download
+                    </button>
+                  {% endif %}
+                  <button class="dropdown-item" onclick="showRenameModal('{{ item.path }}', '{{ item.name }}')">
+                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+                    </svg>
+                    Rename
+                  </button>
+                  <button class="dropdown-item danger" onclick="showDeleteModal('{{ item.path }}', '{{ item.name }}')">
+                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                    </svg>
+                    Delete
+                  </button>
                 </div>
-              {% endif %}
-              <div class="dropdown-item" onclick="showRenameModal('{{ item.path }}', '{{ item.name }}')">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" /></svg>
-                Rename
-              </div>
-              <div class="dropdown-item danger" onclick="showDeleteModal('{{ item.path }}', '{{ item.name }}')">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /></svg>
-                Delete
               </div>
             </div>
-          </div>
+          {% endfor %}
+        </div>
+      {% else %}
+        <div class="empty-state">
+          <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+          </svg>
+          <h3>No files yet</h3>
+          <p>Upload your first file or create a folder to get started.</p>
         </div>
-      {% endfor %}
+      {% endif %}
     </main>
   </div>
+
   <!-- Modals -->
+  <!-- Rename Modal -->
   <div class="modal-overlay" id="renameModal">
-    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="renameModalTitle">
-      <h3 class="modal-title" id="renameModalTitle">Rename Item</h3>
+    <div class="modal">
+      <h3 class="modal-title">Rename Item</h3>
       <div class="modal-body">
-        <input type="text" class="modal-input" id="renameInput" placeholder="Enter new name" autocomplete="off">
+        <input type="text" class="modal-input" id="renameInput" placeholder="Enter new name">
       </div>
       <div class="modal-actions">
         <button class="btn btn-secondary" onclick="closeModal('renameModal')">Cancel</button>
-        <button class="btn" onclick="confirmRename()" id="renameConfirmBtn">
+        <button class="btn btn-primary" onclick="confirmRename()" id="renameConfirmBtn">
           <span id="renameBtnText">Rename</span>
           <span id="renameBtnSpinner" class="loading-spinner" style="display: none;"></span>
         </button>
       </div>
     </div>
   </div>
+
+  <!-- Delete Modal -->
   <div class="modal-overlay" id="deleteModal">
-    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="deleteModalTitle">
-      <h3 class="modal-title" id="deleteModalTitle">Confirm Deletion</h3>
+    <div class="modal">
+      <h3 class="modal-title">Confirm Deletion</h3>
       <div class="modal-body">
         <p>Are you sure you want to delete <strong id="deleteItemName"></strong>? This action cannot be undone.</p>
       </div>
@@ -624,15 +794,17 @@ TEMPLATE = """
       </div>
     </div>
   </div>
+
+  <!-- Folder Modal -->
   <div class="modal-overlay" id="folderModal">
-    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="folderModalTitle">
-      <h3 class="modal-title" id="folderModalTitle">Create New Folder</h3>
+    <div class="modal">
+      <h3 class="modal-title">Create New Folder</h3>
       <div class="modal-body">
-        <input type="text" class="modal-input" id="folderInput" placeholder="Enter folder name" autocomplete="off">
+        <input type="text" class="modal-input" id="folderInput" placeholder="Enter folder name">
       </div>
       <div class="modal-actions">
         <button class="btn btn-secondary" onclick="closeModal('folderModal')">Cancel</button>
-        <button class="btn" onclick="confirmCreateFolder()" id="folderConfirmBtn">
+        <button class="btn btn-primary" onclick="confirmCreateFolder()" id="folderConfirmBtn">
           <span id="folderBtnText">Create</span>
           <span id="folderBtnSpinner" class="loading-spinner" style="display: none;"></span>
         </button>
@@ -640,20 +812,45 @@ TEMPLATE = """
     </div>
   </div>
 
+  <!-- URL Download Modal -->
+  <div class="modal-overlay" id="urlDownloadModal">
+    <div class="modal">
+      <h3 class="modal-title">Download from URL</h3>
+      <div class="modal-body">
+        <input type="text" class="modal-input" id="urlInput" placeholder="https://example.com/file.pdf" style="margin-bottom: 1rem;">
+        <input type="text" class="modal-input" id="filenameInput" placeholder="Custom filename (optional)">
+        <p style="font-size: 0.875rem; color: var(--text-muted); margin-top: 0.5rem;">
+          The file will be downloaded directly to your HuggingFace repository.
+        </p>
+      </div>
+      <div class="modal-actions">
+        <button class="btn btn-secondary" onclick="closeModal('urlDownloadModal')">Cancel</button>
+        <button class="btn btn-success" onclick="confirmUrlDownload()" id="urlDownloadConfirmBtn">
+          <span id="urlDownloadBtnText">Download</span>
+          <span id="urlDownloadBtnSpinner" class="loading-spinner" style="display: none;"></span>
+        </button>
+      </div>
+    </div>
+  </div>
+
   <script>
+    // Global state
     let currentRenamePath = '';
     let currentDeletePath = '';
     let currentFolderPath = '';
+    let currentUrlDownloadPath = '';
     let activeDropdown = null;
 
-    function nav(p) {
-      location.href = '/?path=' + encodeURIComponent(p);
+    // Navigation
+    function nav(path) {
+      window.location.href = '/?path=' + encodeURIComponent(path);
     }
-    
+
     function download(path) {
       window.open('/download?path=' + encodeURIComponent(path), '_blank');
     }
 
+    // Dropdown management
     function toggleDropdown(event, button) {
       event.stopPropagation();
       const dropdown = button.closest('.dropdown');
@@ -666,36 +863,63 @@ TEMPLATE = """
       activeDropdown = dropdown.classList.contains('active') ? dropdown : null;
     }
 
-    const showSpinner = (btnId, textId, spinnerId) => {
-        document.getElementById(btnId).disabled = true;
-        document.getElementById(textId).style.display = 'none';
-        document.getElementById(spinnerId).style.display = 'inline-block';
+    function closeAllDropdowns() {
+      if (activeDropdown) {
+        activeDropdown.classList.remove('active');
+        activeDropdown = null;
+      }
+    }
+
+    // Loading state management
+    function showSpinner(btnId, textId, spinnerId) {
+      const btn = document.getElementById(btnId);
+      const text = document.getElementById(textId);
+      const spinner = document.getElementById(spinnerId);
+      
+      btn.disabled = true;
+      text.style.display = 'none';
+      spinner.style.display = 'inline-block';
     }
 
-    const hideSpinner = (btnId, textId, spinnerId) => {
-        document.getElementById(btnId).disabled = false;
-        document.getElementById(textId).style.display = 'inline-block';
-        document.getElementById(spinnerId).style.display = 'none';
+    function hideSpinner(btnId, textId, spinnerId) {
+      const btn = document.getElementById(btnId);
+      const text = document.getElementById(textId);
+      const spinner = document.getElementById(spinnerId);
+      
+      btn.disabled = false;
+      text.style.display = 'inline-block';
+      spinner.style.display = 'none';
     }
 
+    // Modal management
     function showModal(modalId) {
-      document.getElementById(modalId).classList.add('active');
+      const modal = document.getElementById(modalId);
+      modal.classList.add('active');
       document.body.style.overflow = 'hidden';
+      
+      // Focus first input in modal
+      const firstInput = modal.querySelector('.modal-input');
+      if (firstInput) {
+        setTimeout(() => {
+          firstInput.focus();
+          if (firstInput.type === 'text') {
+            firstInput.select();
+          }
+        }, 100);
+      }
     }
 
     function closeModal(modalId) {
-      document.getElementById(modalId).classList.remove('active');
+      const modal = document.getElementById(modalId);
+      modal.classList.remove('active');
       document.body.style.overflow = '';
     }
 
+    // Modal show functions
     function showRenameModal(path, currentName) {
       currentRenamePath = path;
       document.getElementById('renameInput').value = currentName;
       showModal('renameModal');
-      setTimeout(() => {
-        document.getElementById('renameInput').focus();
-        document.getElementById('renameInput').select();
-      }, 100);
       closeAllDropdowns();
     }
 
@@ -710,50 +934,76 @@ TEMPLATE = """
       currentFolderPath = path;
       document.getElementById('folderInput').value = '';
       showModal('folderModal');
-      setTimeout(() => document.getElementById('folderInput').focus(), 100);
     }
 
-    function closeAllDropdowns() {
-      if (activeDropdown) {
-        activeDropdown.classList.remove('active');
-        activeDropdown = null;
-      }
+    function showUrlDownloadModal(path) {
+      currentUrlDownloadPath = path;
+      document.getElementById('urlInput').value = '';
+      document.getElementById('filenameInput').value = '';
+      showModal('urlDownloadModal');
     }
-    
-    async function performAction(url, body, btnId, textId, spinnerId, modalToClose) {
-        showSpinner(btnId, textId, spinnerId);
-        try {
-            const response = await fetch(url, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(body)
-            });
-            if (response.ok) {
-                if (modalToClose) closeModal(modalToClose);
-                location.reload();
-            } else {
-                const error = await response.text();
-                alert(`Operation failed: ${error}`);
-            }
-        } catch (error) {
-            console.error('Action failed:', error);
-            alert('An unexpected error occurred.');
-        } finally {
-            hideSpinner(btnId, textId, spinnerId);
+
+    // Generic action performer
+    async function performAction(url, body, btnId, textId, spinnerId, modalToClose, successMessage) {
+      showSpinner(btnId, textId, spinnerId);
+      
+      try {
+        const response = await fetch(url, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+        
+        const result = await response.json();
+        
+        if (response.ok) {
+          if (modalToClose) closeModal(modalToClose);
+          if (successMessage) {
+            // Show brief success message
+            showUploadOverlay(successMessage);
+            setTimeout(() => hideUploadOverlay(), 1500);
+          }
+          setTimeout(() => window.location.reload(), successMessage ? 1500 : 0);
+        } else {
+          throw new Error(result.error || 'Operation failed');
         }
+      } catch (error) {
+        console.error('Action failed:', error);
+        alert(`Operation failed: ${error.message}`);
+      } finally {
+        hideSpinner(btnId, textId, spinnerId);
+      }
     }
 
+    // Action confirmations
     function confirmRename() {
       const newName = document.getElementById('renameInput').value.trim();
       if (!newName) {
         alert('Please enter a valid name');
         return;
       }
-      performAction('/rename', { old_path: currentRenamePath, new_path: newName }, 'renameConfirmBtn', 'renameBtnText', 'renameBtnSpinner', 'renameModal');
+      
+      performAction(
+        '/rename', 
+        { old_path: currentRenamePath, new_path: newName }, 
+        'renameConfirmBtn', 
+        'renameBtnText', 
+        'renameBtnSpinner', 
+        'renameModal',
+        'Item renamed successfully!'
+      );
     }
 
     function confirmDelete() {
-      performAction('/delete', { path: currentDeletePath }, 'deleteConfirmBtn', 'deleteBtnText', 'deleteBtnSpinner', 'deleteModal');
+      performAction(
+        '/delete', 
+        { path: currentDeletePath }, 
+        'deleteConfirmBtn', 
+        'deleteBtnText', 
+        'deleteBtnSpinner', 
+        'deleteModal',
+        'Item deleted successfully!'
+      );
     }
 
     function confirmCreateFolder() {
@@ -762,47 +1012,121 @@ TEMPLATE = """
         alert('Please enter a folder name');
         return;
       }
+      
       const folderPath = currentFolderPath ? `${currentFolderPath}/${folderName}` : folderName;
-      performAction('/create_folder', { path: folderPath }, 'folderConfirmBtn', 'folderBtnText', 'folderBtnSpinner', 'folderModal');
-    }
-
-    // Event Listeners
-    document.addEventListener('click', (e) => {
-      if (!e.target.closest('.dropdown')) {
-        closeAllDropdowns();
+      performAction(
+        '/create_folder', 
+        { path: folderPath }, 
+        'folderConfirmBtn', 
+        'folderBtnText', 
+        'folderBtnSpinner', 
+        'folderModal',
+        'Folder created successfully!'
+      );
+    }
+
+    function confirmUrlDownload() {
+      const url = document.getElementById('urlInput').value.trim();
+      const customFilename = document.getElementById('filenameInput').value.trim();
+      
+      if (!url) {
+        alert('Please enter a valid URL');
+        return;
       }
-      if (e.target.classList.contains('modal-overlay')) {
-        closeModal(e.target.id);
+      
+      if (!url.startsWith('http://') && !url.startsWith('https://')) {
+        alert('Please enter a valid HTTP/HTTPS URL');
+        return;
       }
-    });
+      
+      performAction(
+        '/download_url', 
+        { 
+          url: url, 
+          path: currentUrlDownloadPath,
+          filename: customFilename || null
+        }, 
+        'urlDownloadConfirmBtn', 
+        'urlDownloadBtnText', 
+        'urlDownloadBtnSpinner', 
+        'urlDownloadModal',
+        'File downloaded successfully!'
+      );
+    }
+
+    // Upload overlay management
+    function showUploadOverlay(message = 'Processing...') {
+      const overlay = document.getElementById('uploadOverlay');
+      const text = overlay.querySelector('.upload-text');
+      text.textContent = message;
+      overlay.classList.add('active');
+    }
+
+    function hideUploadOverlay() {
+      document.getElementById('uploadOverlay').classList.remove('active');
+    }
+
+    // Event listeners
+    document.addEventListener('DOMContentLoaded', function() {
+      // File input change handler
+      document.getElementById('fileInput').addEventListener('change', function(e) {
+        if (this.files.length > 0) {
+          showUploadOverlay('Uploading file...');
+          document.getElementById('uploadForm').submit();
+        }
+      });
 
-    document.getElementById('fileInput').addEventListener('change', function(e) {
-      if (this.files.length > 0) {
-        document.getElementById('uploadOverlay').classList.add('active');
-        document.getElementById('uploadForm').submit();
-      }
-    });
-    
-    const setupModalKeyListener = (inputId, confirmFunction) => {
-        document.getElementById(inputId).addEventListener('keypress', (e) => {
+      // Modal keyboard handlers
+      const setupModalKeyListener = (inputId, confirmFunction) => {
+        const input = document.getElementById(inputId);
+        if (input) {
+          input.addEventListener('keypress', (e) => {
             if (e.key === 'Enter') {
-                e.preventDefault();
-                confirmFunction();
+              e.preventDefault();
+              confirmFunction();
             }
-        });
-    };
+          });
+        }
+      };
 
-    setupModalKeyListener('renameInput', confirmRename);
-    setupModalKeyListener('folderInput', confirmCreateFolder);
+      setupModalKeyListener('renameInput', confirmRename);
+      setupModalKeyListener('folderInput', confirmCreateFolder);
+      setupModalKeyListener('urlInput', confirmUrlDownload);
+      setupModalKeyListener('filenameInput', confirmUrlDownload);
 
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') {
-        const openModal = document.querySelector('.modal-overlay.active');
-        if (openModal) {
-          closeModal(openModal.id);
-        } else {
+      // Global click handler
+      document.addEventListener('click', (e) => {
+        // Close dropdowns when clicking outside
+        if (!e.target.closest('.dropdown')) {
           closeAllDropdowns();
         }
+        
+        // Close modal when clicking overlay
+        if (e.target.classList.contains('modal-overlay')) {
+          closeModal(e.target.id);
+        }
+      });
+
+      // Global keyboard handler
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+          const openModal = document.querySelector('.modal-overlay.active');
+          if (openModal) {
+            closeModal(openModal.id);
+          } else {
+            closeAllDropdowns();
+          }
+        }
+      });
+    });
+
+    // Prevent form submission on enter in modals (except for specific inputs)
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter' && e.target.closest('.modal') && e.target.tagName !== 'BUTTON') {
+        const modal = e.target.closest('.modal-overlay');
+        if (modal) {
+          e.preventDefault();
+        }
       }
     });
   </script>
@@ -811,80 +1135,321 @@ TEMPLATE = """
 """
 
 def list_folder(path=""):
+    """List files and folders in the given path"""
     prefix = path.strip("/") + ("/" if path else "")
-    all_files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
+    
+    try:
+        all_files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
+    except Exception as e:
+        print(f"Error listing files: {e}")
+        return []
+    
     seen = set()
     items = []
+    
     for f in all_files:
-        if not f.startswith(prefix): continue
+        if not f.startswith(prefix):
+            continue
+            
         rest = f[len(prefix):]
         if "/" in rest:
+            # This is a subdirectory
             dir_name = rest.split("/")[0]
             dir_path = (prefix + dir_name).strip("/")
             if dir_path not in seen:
                 seen.add(dir_path)
-                items.append({"type":"dir","name":dir_name,"path":dir_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()))
+            # This is a file
+            if rest:  # Skip empty filenames
+                items.append({
+                    "type": "file",
+                    "name": rest,
+                    "path": (prefix + rest).strip("/")
+                })
+    
+    # Sort directories first, then files, both alphabetically
+    items.sort(key=lambda x: (x["type"] != "dir", x["name"].lower()))
     return items
 
+def get_filename_from_url(url, custom_filename=None):
+    """Extract filename from URL or use custom filename"""
+    if custom_filename:
+        return custom_filename
+    
+    # Parse URL and get the path
+    parsed_url = urlparse(url)
+    path = unquote(parsed_url.path)
+    
+    # Get filename from path
+    filename = os.path.basename(path)
+    
+    # If no filename found, generate one
+    if not filename or '.' not in filename:
+        filename = f"downloaded_file_{int(time.time())}"
+    
+    return filename
+
 @app.route("/", methods=["GET"])
 def index():
-    path = request.args.get("path","").strip("/")
-    return render_template_string(TEMPLATE, items=list_folder(path), path=path)
+    """Main page - file browser"""
+    path = request.args.get("path", "").strip("/")
+    items = list_folder(path)
+    return render_template_string(TEMPLATE, items=items, path=path)
 
 @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))
+    """Download a file from the repository"""
+    file_path = request.args.get("path", "")
+    if not file_path:
+        return "No file path provided", 400
+    
+    try:
+        # Download file to temporary location
+        local_path = hf_hub_download(
+            repo_id=REPO_ID, 
+            filename=file_path, 
+            repo_type="dataset", 
+            token=HF_TOKEN, 
+            cache_dir=tempfile.gettempdir()
+        )
+        
+        # Send file to user
+        return send_file(
+            local_path, 
+            as_attachment=True, 
+            download_name=os.path.basename(file_path)
+        )
+    except Exception as e:
+        return f"Error downloading file: {str(e)}", 500
 
 @app.route("/upload", methods=["POST"])
 def upload():
+    """Upload a file to the repository"""
+    if 'file' not in request.files:
+        return "No file provided", 400
+    
     file = request.files["file"]
-    path = request.form.get("path","").strip("/")
-    dest = f"{path}/{file.filename}".strip("/")
-    tmp = tempfile.NamedTemporaryFile(delete=False)
-    file.save(tmp.name)
-    upload_file(path_or_fileobj=tmp.name, path_in_repo=dest, repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
+    if file.filename == '':
+        return "No file selected", 400
+    
+    path = request.form.get("path", "").strip("/")
+    
+    # Create destination path
+    dest_path = f"{path}/{file.filename}".strip("/")
+    
+    # Save file to temporary location
+    with tempfile.NamedTemporaryFile(delete=False) as tmp_file:
+        file.save(tmp_file.name)
+        
+        try:
+            # Upload to HuggingFace
+            upload_file(
+                path_or_fileobj=tmp_file.name,
+                path_in_repo=dest_path,
+                repo_id=REPO_ID,
+                repo_type="dataset",
+                token=HF_TOKEN
+            )
+        except Exception as e:
+            os.unlink(tmp_file.name)
+            return f"Error uploading file: {str(e)}", 500
+        finally:
+            # Clean up temporary file
+            try:
+                os.unlink(tmp_file.name)
+            except:
+                pass
+    
     return redirect(f"/?path={path}")
 
+@app.route("/download_url", methods=["POST"])
+def download_url():
+    """Download a file from URL and upload to repository"""
+    data = request.get_json()
+    url = data.get("url", "").strip()
+    path = data.get("path", "").strip("/")
+    custom_filename = data.get("filename", "").strip()
+    
+    if not url:
+        return jsonify({"error": "No URL provided"}), 400
+    
+    if not url.startswith(('http://', 'https://')):
+        return jsonify({"error": "Invalid URL. Must start with http:// or https://"}), 400
+    
+    try:
+        # Get filename
+        filename = get_filename_from_url(url, custom_filename)
+        dest_path = f"{path}/{filename}".strip("/")
+        
+        # Download file from URL
+        response = requests.get(url, stream=True, timeout=30)
+        response.raise_for_status()
+        
+        # Check if content-length is reasonable (max 500MB)
+        content_length = response.headers.get('content-length')
+        if content_length and int(content_length) > 500 * 1024 * 1024:
+            return jsonify({"error": "File too large. Maximum size is 500MB"}), 400
+        
+        # Save to temporary file
+        with tempfile.NamedTemporaryFile(delete=False) as tmp_file:
+            # Download in chunks
+            for chunk in response.iter_content(chunk_size=8192):
+                tmp_file.write(chunk)
+            
+            tmp_file.flush()
+            
+            # Upload to HuggingFace
+            upload_file(
+                path_or_fileobj=tmp_file.name,
+                path_in_repo=dest_path,
+                repo_id=REPO_ID,
+                repo_type="dataset",
+                token=HF_TOKEN
+            )
+            
+            # Clean up
+            os.unlink(tmp_file.name)
+        
+        return jsonify({"status": "success", "message": "File downloaded and uploaded successfully"})
+        
+    except requests.exceptions.RequestException as e:
+        return jsonify({"error": f"Failed to download from URL: {str(e)}"}), 400
+    except Exception as e:
+        return jsonify({"error": f"Upload failed: {str(e)}"}), 500
+
 @app.route("/delete", methods=["POST"])
 def delete():
-    d = request.get_json()["path"]
-    all_files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
-    for f in all_files:
-        if f == d or f.startswith(d.rstrip("/")+"/"):
-            delete_file(repo_id=REPO_ID, path_in_repo=f, repo_type="dataset", token=HF_TOKEN)
-    return jsonify(status="ok")
+    """Delete a file or folder from the repository"""
+    data = request.get_json()
+    delete_path = data.get("path", "").strip("/")
+    
+    if not delete_path:
+        return jsonify({"error": "No path provided"}), 400
+    
+    try:
+        all_files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
+        deleted_count = 0
+        
+        for file_path in all_files:
+            # Delete exact match or files within the folder
+            if file_path == delete_path or file_path.startswith(delete_path.rstrip("/") + "/"):
+                delete_file(
+                    repo_id=REPO_ID,
+                    path_in_repo=file_path,
+                    repo_type="dataset",
+                    token=HF_TOKEN
+                )
+                deleted_count += 1
+        
+        if deleted_count == 0:
+            return jsonify({"error": "No files found to delete"}), 404
+        
+        return jsonify({"status": "success", "message": f"Deleted {deleted_count} file(s)"})
+        
+    except Exception as e:
+        return jsonify({"error": f"Delete failed: {str(e)}"}), 500
 
 @app.route("/create_folder", methods=["POST"])
 def create_folder():
-    folder = request.get_json()["path"].strip("/")
-    keep = f"{folder}/.keep"
-    tmp = tempfile.NamedTemporaryFile(delete=False)
-    tmp.write(b"")
-    tmp.flush()
-    upload_file(path_or_fileobj=tmp.name, path_in_repo=keep, repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
-    return jsonify(status="ok")
+    """Create a new folder by uploading a .keep file"""
+    data = request.get_json()
+    folder_path = data.get("path", "").strip("/")
+    
+    if not folder_path:
+        return jsonify({"error": "No folder path provided"}), 400
+    
+    # Create .keep file path
+    keep_file_path = f"{folder_path}/.keep"
+    
+    try:
+        # Create temporary empty file
+        with tempfile.NamedTemporaryFile(delete=False) as tmp_file:
+            tmp_file.write(b"# This file keeps the folder in git\n")
+            tmp_file.flush()
+            
+            # Upload .keep file
+            upload_file(
+                path_or_fileobj=tmp_file.name,
+                path_in_repo=keep_file_path,
+                repo_id=REPO_ID,
+                repo_type="dataset",
+                token=HF_TOKEN
+            )
+            
+            # Clean up
+            os.unlink(tmp_file.name)
+        
+        return jsonify({"status": "success", "message": "Folder created successfully"})
+        
+    except Exception as e:
+        return jsonify({"error": f"Failed to create folder: {str(e)}"}), 500
 
 @app.route("/rename", methods=["POST"])
 def rename():
+    """Rename a file or folder"""
     data = request.get_json()
-    old, new = data["old_path"].strip("/"), data["new_path"].strip("/")
-    all_files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
-    for f in all_files:
-        if f == old or f.startswith(old+"/"):
-            rel = f[len(old):].lstrip("/")
-            newp = (new + "/" + rel).strip("/")
-            local = hf_hub_download(repo_id=REPO_ID, filename=f, repo_type="dataset",
-                                    token=HF_TOKEN, cache_dir=tempfile.gettempdir())
-            upload_file(path_or_fileobj=local, path_in_repo=newp, repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
-            delete_file(repo_id=REPO_ID, path_in_repo=f, repo_type="dataset", token=HF_TOKEN)
-    return jsonify(status="ok")
+    old_path = data.get("old_path", "").strip("/")
+    new_name = data.get("new_path", "").strip()
+    
+    if not old_path or not new_name:
+        return jsonify({"error": "Missing old path or new name"}), 400
+    
+    try:
+        # Get parent directory
+        parent_dir = "/".join(old_path.split("/")[:-1]) if "/" in old_path else ""
+        new_path = f"{parent_dir}/{new_name}".strip("/")
+        
+        all_files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
+        renamed_count = 0
+        
+        for file_path in all_files:
+            if file_path == old_path or file_path.startswith(old_path + "/"):
+                # Calculate new file path
+                relative_path = file_path[len(old_path):].lstrip("/")
+                new_file_path = (new_path + "/" + relative_path).strip("/")
+                
+                # Download original file
+                local_path = hf_hub_download(
+                    repo_id=REPO_ID,
+                    filename=file_path,
+                    repo_type="dataset",
+                    token=HF_TOKEN,
+                    cache_dir=tempfile.gettempdir()
+                )
+                
+                # Upload with new name
+                upload_file(
+                    path_or_fileobj=local_path,
+                    path_in_repo=new_file_path,
+                    repo_id=REPO_ID,
+                    repo_type="dataset",
+                    token=HF_TOKEN
+                )
+                
+                # Delete original file
+                delete_file(
+                    repo_id=REPO_ID,
+                    path_in_repo=file_path,
+                    repo_type="dataset",
+                    token=HF_TOKEN
+                )
+                
+                renamed_count += 1
+        
+        if renamed_count == 0:
+            return jsonify({"error": "No files found to rename"}), 404
+        
+        return jsonify({"status": "success", "message": f"Renamed {renamed_count} file(s)"})
+        
+    except Exception as e:
+        return jsonify({"error": f"Rename failed: {str(e)}"}), 500
 
 if __name__ == "__main__":
+    # Add missing import
+    import time
     app.run(debug=True, host="0.0.0.0", port=7860)