mbkbucket 1.2.0 → 1.2.1

package/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for mbkbucket 1.1.0
+// Type definitions for mbkbucket 1.2.1
 // Project: https://github.com/MIbnEKhalid/mbkbucket
 // Definitions by: Muhammad Bin Khalid <https://github.com/MIbnEKhalid">
 

package/index.js

@@ -40,8 +40,21 @@ const generalLimiter = rateLimit({
 server.use(express.json());
 server.use(express.urlencoded({ extended: true }));
 
-// Serve static assets from /public (CSS/JS/images)
-server.use(express.static(path.join(__dirname, 'public'), { maxAge: '365d', etag: true }));
+// Serve only specific static assets (limit exposure): CSS and JS used by the dashboard
+// This replaces serving the entire /public directory.
+const staticMaxAgeSeconds = 90 * 24 * 60 * 60; // 90 days
+server.get('/mbkbucket/bucketadmin.css', (req, res) => {
+  res.set('Cache-Control', `public, max-age=${staticMaxAgeSeconds}, immutable`);
+  res.sendFile(path.join(__dirname, 'public', 'bucketadmin.css'), (err) => {
+    if (err) res.status(err.status || 404).end();
+  });
+});
+server.get('/mbkbucket/bucketadmin.js', (req, res) => {
+  res.set('Cache-Control', `public, max-age=${staticMaxAgeSeconds}, immutable`);
+  res.sendFile(path.join(__dirname, 'public', 'bucketadmin.js'), (err) => {
+    if (err) res.status(err.status || 404).end();
+  });
+});
 
 // Configure Handlebars (single setup)
 server.engine("handlebars", engine({

package/lib/bucket.js

@@ -18,7 +18,7 @@ fs.mkdirSync(CHUNKS_DIR, { recursive: true });
 // Key/prefix helpers are provided by `s3.js`: `ensurePrefix`, `ensureKeyHasAppPrefix`, `getAppName`.
 
 router.get('/mbkbucket', validateSessionAndRole('SuperAdmin'), async (req, res) => {
-  renderPage(req, res, "bucket.handlebars", false, { page: "Admin Bucket", bucketvar: mbkautheVar?.bucket, message: req.query.message, error: req.query.error });
+  renderPage(req, res, "bucket.handlebars", false, { page: "Admin Bucket", bucketvar: mbkautheVar?.bucket, APP_NAME: mbkautheVar?.APP_NAME, message: req.query.message, error: req.query.error });
 });
 
 router.get(['/mbkbucket/info', "/mbkbucket/i"], validateSessionAndRole('SuperAdmin'), async (req, res) => {
@@ -28,7 +28,7 @@ router.get(['/mbkbucket/info', "/mbkbucket/i"], validateSessionAndRole('SuperAdm
   } catch (err) {
     console.error("[mbkauthe] Error fetching package-lock.json:", err);
   }
-  renderPage(req, res, "info.handlebars", false, { page: "MBK Bucket Info", appVersion: appVersion, latestVersion, APP_NAME: mbkautheVar.APP_NAME });
+  renderPage(req, res, "info.handlebars", false, { page: "MBK Bucket Info", appVersion, latestVersion, APP_NAME: mbkautheVar?.APP_NAME });
 });
 
 // API endpoint for fetching files
@@ -45,11 +45,20 @@ router.get('/mbkbucket/api/files', validateSessionAndRole('SuperAdmin'), async (
   }
 
   try {
-    const result = await listfiles(effectivePrefix);
-    let files = result.Contents || [];
+    let files = [];
+    let continuationToken = undefined;
     let usedPrefix = effectivePrefix;
     let legacyFallback = false;
 
+    // Fetch all files recursively (handling S3 pagination)
+    do {
+      const result = await listfiles(effectivePrefix, { continuationToken });
+      if (result.Contents) {
+        files = files.concat(result.Contents);
+      }
+      continuationToken = result.nextToken;
+    } while (continuationToken);
+
     // If no files found under the app prefixed path, try root as a legacy fallback
     if (!files.length) {
       try {
@@ -69,8 +78,7 @@ router.get('/mbkbucket/api/files', validateSessionAndRole('SuperAdmin'), async (
     if (search.trim()) {
       const searchLower = search.toLowerCase();
       files = files.filter(file => {
-        const fileName = file.Key.split('/').pop();
-        return fileName.toLowerCase().includes(searchLower);
+        return file.Key.toLowerCase().includes(searchLower);
       });
     }
 

package/lib/s3.js

@@ -216,13 +216,14 @@ export async function uploadFile(key, fileBuffer, contentType, options = {}) {
 
 // Download file with enhanced features
 export async function downloadFile(key, options = {}) {
+  let keyToDownload;
   try {
     if (!key) {
       throw new Error('Key is required');
     }
 
     // Ensure key is app-prefixed
-    const keyToDownload = ensureKeyHasAppPrefix(key);
+    keyToDownload = ensureKeyHasAppPrefix(key);
 
     const {
       range = null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mbkbucket",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "S3 Bucket manager for mbktech.org apps",
   "author": "Muhammad Bin Khalid",
   "homepage": "https://github.com/MIbnEKhalid/mbkbucket#readme",
@@ -19,7 +19,7 @@
     "express": "^4.22.1",
     "express-handlebars": "^8.0.3",
     "express-rate-limit": "^7.0.1",
-    "mbkauthe": "^4.3.0",
+    "mbkauthe": "latest",
     "multer": "^2.0.2",
     "pg": "^8.16.3"
   },

package/public/{css/bucketadmin.css → bucketadmin.css}

@@ -48,7 +48,7 @@
     background: linear-gradient(135deg, var(--primary-color-ml) 0%, var(--primary-dark-color-ml) 100%);
     color: white;
     border: none;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
 }
 
 .stats-content {
@@ -121,6 +121,57 @@
     gap: 0.5rem;
 }
 
+/* Upload Drop Zone */
+.upload-drop-zone {
+    border: 2px dashed var(--gray-color-ml);
+    border-radius: var(--border-radius-lg-ml);
+    background-color: #f8fafc;
+    min-height: 160px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    text-align: center;
+    transition: all 0.2s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.upload-drop-zone:hover,
+.upload-drop-zone.dragover {
+    border-color: var(--primary-color-ml);
+    background-color: #f0fdfa;
+}
+
+.drop-zone-content {
+    pointer-events: none;
+    padding: 2rem;
+}
+
+.drop-zone-content i {
+    font-size: 3rem;
+    color: var(--primary-color-ml);
+    margin-bottom: 1rem;
+    opacity: 0.8;
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.upload-drop-zone:hover .drop-zone-content i {
+    opacity: 1;
+}
+
+.drop-text {
+    font-weight: 600;
+    font-size: 1.1rem;
+    color: var(--dark-color-ml);
+    margin-bottom: 0.5rem;
+}
+
+.drop-hint {
+    font-size: 0.85rem;
+    color: var(--gray-color-ml);
+}
+
 /* Button styling - Modern hover effects */
 .btn {
     background: var(--primary-color-ml);
@@ -347,64 +398,74 @@
 /* Table styling - Modern clean design */
 .table-responsive {
     overflow-x: auto;
-    box-shadow: inset 0 0 0 1px var(--gray-light-color-ml);
+    border-radius: var(--border-radius-lg-ml);
+    box-shadow: none;
 }
 
 .table {
     width: 100%;
     margin-bottom: 0;
     background: white;
-    border-collapse: collapse;
+    border-collapse: separate;
+    border-spacing: 0;
 }
 
 .table thead {
-    background: linear-gradient(135deg, var(--dark-color-ml) 0%, #2d3748 100%);
-    color: white;
+    background: var(--light-color-ml);
+    color: var(--dark-color-ml);
+    position: sticky;
+    top: 0;
+    z-index: 10;
 }
 
 .table th,
 .table td {
-    padding: 0.5rem 0.75rem;
+    padding: 0.5rem 1.25rem;
     vertical-align: middle;
     border-bottom: 1px solid var(--gray-light-color-ml);
-    font-size: 0.9rem;
+    font-size: 0.95rem;
 }
 
 .table th {
-    font-weight: 600;
-    text-transform: uppercase;
-    font-size: 0.75rem;
-    letter-spacing: 0.05em;
+    font-weight: 700;
+    text-transform: none;
+    font-size: 0.85rem;
+    letter-spacing: 0.02em;
+    color: var(--text-muted-color-ml);
+    border-bottom: 2px solid var(--gray-light-color-ml);
 }
 
 .table tbody tr {
-    transition: all 0.2s ease;
+    transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
     position: relative;
+    background-color: white;
 }
 
 .table tbody tr:hover {
-    background: linear-gradient(90deg, rgba(13, 148, 136, 0.03) 0%, transparent 100%);
+    background-color: var(--light-color-ml);
 }
 
 .file-row {
     border-left: 3px solid transparent;
-    transition: all 0.2s ease;
 }
 
 .file-row:hover {
     border-left-color: var(--primary-color-ml);
-    background: linear-gradient(90deg, rgba(13, 148, 136, 0.05) 0%, transparent 100%);
+    background-color: #f0fdfa;
+    /* Very light teal */
+    z-index: 1;
 }
 
 .folder-row {
     border-left: 3px solid transparent;
-    transition: all 0.2s ease;
     cursor: pointer;
 }
 
 .folder-row:hover {
     border-left-color: #f59e0b;
-    background: linear-gradient(90deg, rgba(245, 158, 11, 0.05) 0%, transparent 100%);
+    background-color: #fffbeb;
+    /* Very light amber */
+    z-index: 1;
 }
 
 .folder-row .file-icon {
@@ -414,12 +475,11 @@
 }
 
 .folder-row:hover .file-icon {
-    transform: scale(1.1);
     box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
 }
 
 .breadcrumb-nav {
-    padding: 1rem 1.5rem;
+    padding: 0.5rem 1.5rem;
     background: linear-gradient(135deg, var(--light-color-ml) 0%, #f9fafb 100%);
     border-bottom: 1px solid var(--gray-light-color-ml);
     display: flex;
@@ -459,8 +519,8 @@
 }
 
 .file-icon {
-    width: 52px;
-    height: 52px;
+    width: 40px;
+    height: 40px;
     background: linear-gradient(135deg, var(--primary-light-color-ml) 0%, rgba(13, 148, 136, 0.08) 100%);
     border-radius: 10px;
     display: flex;
@@ -474,7 +534,6 @@
 }
 
 .file-row:hover .file-icon {
-    transform: scale(1.1);
     box-shadow: 0 2px 8px rgba(13, 148, 136, 0.2);
 }
 
@@ -609,7 +668,7 @@
 }
 
 .empty-state i {
-    font-size: 5rem;
+    font-size: 1.5rem;
     margin-bottom: 1.5rem;
     opacity: 0.3;
     background: linear-gradient(135deg, var(--primary-color-ml), var(--primary-dark-color-ml));
@@ -618,6 +677,12 @@
     background-clip: text;
 }
 
+.fa-add:before,
+.fa-plus:before {
+    color: #fff !important;
+    align-items: center;
+}
+
 .empty-state h4 {
     color: var(--dark-color-ml);
     margin-bottom: 0.75rem;
@@ -1040,8 +1105,8 @@
 }
 
 .skeleton-row .file-icon {
-    width: 44px;
-    height: 44px;
+    width: 40px;
+    height: 40px;
     border-radius: 8px;
 }
 
@@ -1195,8 +1260,8 @@
     }
 
     .file-row td:nth-child(2) .file-icon {
-        width: 56px;
-        height: 56px;
+        width: 40px;
+        height: 40px;
         font-size: 1.25rem;
         border-radius: 10px;
     }
@@ -1298,8 +1363,8 @@
 
     /* Make folder icon and name more prominent on mobile */
     .folder-row .file-icon {
-        width: 48px;
-        height: 48px;
+        width: 40px;
+        height: 40px;
         font-size: 1.2rem;
         margin-right: 0.75rem;
     }
@@ -1324,8 +1389,8 @@
     }
 
     .file-icon {
-        width: 48px;
-        height: 48px;
+        width: 40px;
+        height: 40px;
         font-size: 1.2rem;
         margin-right: 0.85rem;
     }
@@ -1355,7 +1420,7 @@
     }
 
     .breadcrumb-nav {
-        padding: 0.85rem 1rem;
+        padding: 0.5rem 1rem;
         font-size: 0.85rem;
     }
 
@@ -1379,7 +1444,7 @@
     }
 
     .empty-state i {
-        font-size: 4rem;
+        font-size: 1.5rem;
     }
 
     .modal-dialog {
@@ -1410,4 +1475,14 @@
     .file-stats .stats-text p {
         font-size: 0.85rem;
     }
+}
+
+.dtm {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .dtm {
+        display: block;
+    }
 }

package/public/{js/bucketadmincontent.js → bucketadmin.js}

@@ -10,29 +10,63 @@ let pageFolders = [];
 const bucketAppName = document.getElementById('bucketAppData')?.dataset.appName || '';
 // Bucket is configured centrally on the server; client should not select a bucket.
 
-// Show alert message
+// Show alert message (Toast)
 function showAlert(message, type = 'success') {
-    const alertId = type === 'success' ? 'successAlert' : 'errorAlert';
-    const messageId = type === 'success' ? 'successMessage' : 'errorMessage';
-
-    const alertEl = document.getElementById(alertId);
-    const messageEl = document.getElementById(messageId);
-
-    if (alertEl && messageEl) {
-        messageEl.textContent = message;
-        alertEl.style.display = 'flex';
-
-        // Auto dismiss after 5 seconds
-        setTimeout(() => {
-            alertEl.style.opacity = '0';
-            alertEl.style.transform = 'translateY(-10px)';
-            setTimeout(() => {
-                alertEl.style.display = 'none';
-                alertEl.style.opacity = '1';
-                alertEl.style.transform = 'translateY(0)';
-            }, 300);
-        }, 5000);
+    const container = document.getElementById('toast-container');
+    if (!container) {
+        // Fallback to old method if container missing
+        const alertId = type === 'success' ? 'successAlert' : 'errorAlert';
+        const messageId = type === 'success' ? 'successMessage' : 'errorMessage';
+        const alertEl = document.getElementById(alertId);
+        const messageEl = document.getElementById(messageId);
+        if (alertEl && messageEl) {
+            messageEl.textContent = message;
+            alertEl.style.display = 'flex';
+            setTimeout(() => alertEl.style.display = 'none', 5000);
+        }
+        return;
     }
+
+    // Create toast element
+    const toast = document.createElement('div');
+    const isSuccess = type === 'success';
+    toast.className = `toast-notification ${type}`;
+    toast.style.cssText = `
+        background: ${isSuccess ? 'linear-gradient(135deg, #10b981, #059669)' : 'linear-gradient(135deg, #ef4444, #dc2626)'};
+        color: white;
+        padding: 1rem 1.5rem;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-width: 300px;
+        transform: translateX(100%);
+        opacity: 0;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        font-weight: 500;
+    `;
+
+    toast.innerHTML = `
+        <i class="fas ${isSuccess ? 'fa-check-circle' : 'fa-exclamation-circle'}" style="font-size: 1.25rem;"></i>
+        <div style="flex: 1;">${message}</div>
+        <button onclick="this.parentElement.remove()" style="background:none; border:none; color:white; cursor:pointer; opacity:0.8; font-size:1.2rem;">&times;</button>
+    `;
+
+    container.appendChild(toast);
+
+    // Animate in
+    requestAnimationFrame(() => {
+        toast.style.transform = 'translateX(0)';
+        toast.style.opacity = '1';
+    });
+
+    // Auto dismiss
+    setTimeout(() => {
+        toast.style.transform = 'translateX(100%)';
+        toast.style.opacity = '0';
+        setTimeout(() => toast.remove(), 300);
+    }, 5000);
 }
 
 // Fetch and render files
@@ -106,12 +140,12 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
         totalFilesCount.textContent = `${data.totalFiles} ${search ? 'Results' : 'Files'}`;
 
         if (search) {
-          filterInfo.textContent = `Search results for: "${search}"`;
-          fileListTitle.innerHTML = `Search Results <span class="text-muted">for: </span><span class="badge bg-info">${search}</span>`;
+            filterInfo.textContent = `Search results for: "${search}"`;
+            fileListTitle.innerHTML = `Search Results <span class="text-muted">for: </span><span class="badge bg-info">${search}</span>`;
         } else {
-          const label = prefix || bucketAppName || 'Root';
-          filterInfo.textContent = `Filtered by folder: ${label}`;
-          fileListTitle.innerHTML = `Files <span class="text-muted">in: </span><span class="badge bg-info">${label}</span>`;
+            const label = prefix || bucketAppName || 'Root';
+            filterInfo.textContent = `Filtered by folder: ${label}`;
+            fileListTitle.innerHTML = `Files <span class="text-muted">in: </span><span class="badge bg-info">${label}</span>`;
         }
 
         // Render files or empty state
@@ -256,19 +290,62 @@ function changeViewMode(mode) {
     renderFilesTable(pageFiles, pageFolders, currentPrefix);
 }
 
+// Extract folders that match a search query from file paths
+function extractMatchingFolders(files, search) {
+    if (!search) return [];
+    
+    const searchLower = search.toLowerCase();
+    const folderSet = new Set();
+    
+    files.forEach(file => {
+        const parts = file.Key.split('/');
+        // Remove filename
+        parts.pop();
+        
+        let currentPath = '';
+        parts.forEach(part => {
+             const segmentPath = currentPath ? `${currentPath}/${part}` : part;
+             currentPath = segmentPath;
+             
+             // If any part of the path matches the search, include that full path as a folder
+             // AND ensure we don't include the full file path, just the directory
+             if (part.toLowerCase().includes(searchLower)) {
+                 folderSet.add(currentPath);
+             }
+        });
+    });
+    
+    return Array.from(folderSet).sort();
+}
+
 // Render files table
 function renderFilesTable(files, folders = [], prefix = '') {
     // Determine which files/folders to show based on view mode
     let displayFiles = [];
     let displayFolders = [];
 
-    if (currentViewMode === 'flat') {
+    // Force flat view if searching
+    const isSearchActive = !!currentSearch;
+    const mode = isSearchActive ? 'flat' : currentViewMode;
+
+    if (mode === 'flat') {
         // In flat mode, show all files in the current loaded page/list regardless of folder depth
-        // And ignore folder objects (we just show file paths)
-        displayFiles = files;
-        // We don't show expandable folders in flat view, unless we want to keep them? 
-        // User asked for "all files displayed without folder". So empty folders.
-        displayFolders = [];
+        if (isSearchActive) {
+            // Search Mode:
+            // 1. Show files where FILENAME matches the search term
+            const searchLower = currentSearch.toLowerCase();
+            displayFiles = files.filter(f => {
+                const fileName = f.Key.split('/').pop();
+                return fileName.toLowerCase().includes(searchLower);
+            });
+
+            // 2. Show folders where FOLDER NAME matches the search term
+            displayFolders = extractMatchingFolders(files, currentSearch);
+        } else {
+            // Normal Flat Mode: Show all files, no folders
+            displayFiles = files;
+            displayFolders = [];
+        }
     } else {
         // Normal Folder View logic
         // Filter files to show only those at current level (not in subfolders)
@@ -338,7 +415,10 @@ function renderFilesTable(files, folders = [], prefix = '') {
                 <div class="file-name" style="font-weight: 700;">
                   <i class="fas fa-folder" style="margin-right: 0.5rem; color: #f59e0b;"></i>${folderName}/
                 </div>
-              </div>
+              </div>              
+              <button type="button" class="btn btn-danger btn-sm delete-btn dtm" onclick="event.stopPropagation(); confirmDelete('${folderPath}/', true);" data-key="${folderPath}/" data-is-folder="true" title="Delete folder">
+                <i class="fas fa-trash"></i>
+              </button>
             </div>
           </td>
           <td>
@@ -349,7 +429,7 @@ function renderFilesTable(files, folders = [], prefix = '') {
           </td>
           <td style="text-align: center;">
             <div class="btn-group" role="group">
-              <button type="button" class="btn btn-danger btn-sm delete-btn" data-key="${folderPath}/" data-is-folder="true" title="Delete folder">
+              <button type="button" class="btn btn-danger btn-sm delete-btn" onclick="event.stopPropagation(); confirmDelete('${folderPath}/', true);" data-key="${folderPath}/" data-is-folder="true" title="Delete folder">
                 <i class="fas fa-trash"></i>
               </button>
             </div>
@@ -431,18 +511,23 @@ function renderFilesTable(files, folders = [], prefix = '') {
     if (allRows === '') {
         document.getElementById('fileListContainer').innerHTML = `
         <div class="empty-state">
-          <i class="fas fa-folder-open"></i>
-          <h4>No files or folders</h4>
-          <p>${prefix ? `No files in folder: ${prefix}` : 'This folder is empty'}</p>
-          <div style="display:flex; gap:0.5rem; justify-content:center; margin-top:1rem;">
-            <button class="btn btn-primary" onclick="document.getElementById('fileInput').click()">
-              <i class="fas fa-cloud-upload-alt"></i> Upload File
+          <div style="margin-bottom: 1.5rem; position: relative; display: inline-block;">
+            <i class="fas fa-folder-open" style="font-size: 4rem; color: #cbd5e0;"></i>
+            <i class="fas fa-search" style="font-size: 2rem; color: var(--primary-color-ml); position: absolute; bottom: -5px; right: -10px; background: white; border-radius: 50%; padding: 5px;"></i>
+          </div>
+          <h4>No files found</h4>
+          <p style="max-width: 400px; margin: 0 auto 1.5rem; color: var(--text-muted-color-ml);">
+            ${prefix ? `This folder <strong>${prefix}</strong> is currently empty.` : 'Your bucket is empty. Start by uploading files or creating a new folder.'}
+          </p>
+          <div style="display:flex; gap:0.75rem; justify-content:center; flex-wrap: wrap;">
+            <button class="btn btn-primary" onclick="window.scrollTo({top: 0, behavior: 'smooth'}); document.getElementById('fileInput').click()">
+              <i class="fas fa-cloud-upload-alt"></i> Upload Files
             </button>
             <button class="btn btn-outline-secondary" onclick="createFolder()">
-              <i class="fas fa-folder-plus"></i> Create Folder
+              <i class="fas fa-folder-plus"></i> New Folder
             </button>
             ${prefix ? `<button class="btn btn-light" onclick="loadFiles(1, '')">
-              <i class="fas fa-arrow-left"></i> Back to Root
+              <i class="fas fa-home"></i> Go to Root
             </button>` : ''}
           </div>
         </div>
@@ -461,7 +546,7 @@ function renderFilesTable(files, folders = [], prefix = '') {
     document.getElementById('fileListContainer').innerHTML = `
       ${breadcrumb}
       <div class="table-responsive">
-        <div id="bulkActionsBar" style="display:none; padding: 0.75rem; border-bottom: 1px solid var(--gray-light-color-ml); background: var(--light-color-ml);">
+        <div id="bulkActionsBar" style="display:none; padding: 0.5rem; border-bottom: 1px solid var(--gray-light-color-ml); background: var(--light-color-ml);">
           <span id="bulkSelectedCount">0 selected</span>
           <div style="float: right;">
             <button class="btn btn-danger btn-sm" id="bulkDeleteBtn" disabled>
@@ -665,10 +750,10 @@ function renderUploadQueue() {
     container.innerHTML = uploadQueue.map(item => `
       <div class="upload-item" data-id="${item.id}">
         <div class="meta">
-          <div class="file-icon"><i class="fas fa-file"></i></div>
-          <div>
+          <div style="display:flex; align-items:center; gap:0.75rem; min-width:0; width:100%; margin-bottom:5px;">
+            <div class="file-icon"><i class="fas fa-file"></i></div>
             <div class="name">${item.file.name}</div>
-            <div class="form-text">${formatFileSize(item.file.size)}</div>
+            <div class="form-text file-size" style="white-space:nowrap; color:var(--text-muted-color-ml); font-size:0.875rem; margin-left:auto;">${formatFileSize(item.file.size)}</div>
           </div>
         </div>
         <div style="min-width:220px;">
@@ -828,22 +913,7 @@ function startAllUploads() {
 document.getElementById('startUploadBtn')?.addEventListener('click', startAllUploads);
 document.getElementById('clearQueueBtn')?.addEventListener('click', function () { uploadQueue.length = 0; renderUploadQueue(); });
 
-// Reset upload form
-function resetUploadForm() {
-    const uploadBtn = document.getElementById('uploadBtn');
-    const uploadProgress = document.getElementById('uploadProgress');
 
-    setTimeout(() => {
-        uploadBtn.disabled = false;
-        uploadBtn.classList.remove('uploading');
-        uploadBtn.innerHTML = '<i class="fas fa-cloud-upload-alt"></i> Upload File';
-        uploadProgress.style.display = 'none';
-
-        // Reset progress
-        document.getElementById('progressBar').style.width = '0%';
-        document.getElementById('uploadPercent').textContent = '0%';
-    }, 3000);
-}
 
 // Add hover effects and animations
 document.addEventListener('DOMContentLoaded', function () {
@@ -853,10 +923,16 @@ document.addEventListener('DOMContentLoaded', function () {
     const initialPage = parseInt(urlParams.get('page')) || 1;
     loadFiles(initialPage, initialPrefix);
 
-    // Debounced search input (improves UX and reduces API calls)
+    // Search behavior: Trigger when the Search button is clicked OR when the user presses Enter in the search input
     const searchInputEl = document.getElementById('searchInput');
-    if (searchInputEl && typeof debounce === 'function') {
-        searchInputEl.addEventListener('input', debounce(() => performSearch(), 350));
+    if (searchInputEl) {
+        // Trigger search when Enter is pressed in the input
+        searchInputEl.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                performSearch();
+            }
+        });
     }
 
     // Close modal when clicking outside
@@ -997,6 +1073,7 @@ function showPreviewModal(encodedKey, filename, extension) {
         contentEl.appendChild(iframe);
     } else if (textTypes.includes(extension)) {
         dialog.classList.add('preview-compact');
+        
         fetch(`/mbkbucket/view/${encodedKey}`)
             .then(r => r.text())
             .then(text => {
@@ -1223,9 +1300,47 @@ async function createFolder() {
     }
 }
 
-// Start/clear upload buttons
-document.getElementById('startUploadBtn')?.addEventListener('click', startAllUploads);
-document.getElementById('clearQueueBtn')?.addEventListener('click', function () { uploadQueue.length = 0; renderUploadQueue(); });
+// Create new file
+async function createFile() {
+    let name = prompt('Enter new file name:');
+    if (!name) return;
+    
+    name = name.trim();
+    if (!name.includes('.')) {
+        name += '.txt';
+    }
+    
+    // Ensure no leading slashes, we upload to currentPrefix
+    if (name.startsWith('/')) name = name.substring(1);
+    
+    // Check if valid
+    if (!name) return showAlert('Invalid file name', 'error');
+
+    // Create empty file content
+    const file = new File([" "], name, { type: "text/plain" });
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('prefix', currentPrefix);
+    
+    try {
+        const resp = await fetch('/mbkbucket/upload', {
+            method: 'POST',
+            body: formData
+        });
+        
+        const json = await resp.json();
+        if (json.success) {
+            showAlert('File created', 'success');
+            loadFiles(currentPage, currentPrefix);
+        } else {
+            showAlert(json.error || 'Create file failed', 'error');
+        }
+    } catch (err) {
+        showAlert('Create file failed: ' + err.message, 'error');
+    }
+}
+
+
 
 // mbkbucket shared utilities (exposed to global window for backward compatibility)
 (function (w) {

package/views/bucket.handlebars

@@ -125,7 +125,7 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
-            margin-bottom: 2rem;
+            margin-bottom: 1rem;
             padding-bottom: 1rem;
             border-bottom: 2px solid var(--gray-light-color-ml)
         }

package/views/bucketadmincontent.handlebars

@@ -1,6 +1,6 @@
 {{!-- File Management System - Bucket Dashboard --}}
-<link rel="stylesheet" href="/css/bucketadmin.css?v={{assetVersion}}">
-<div id="bucketAppData" data-app-name="{{mbkautheVar.APP_NAME}}" hidden></div>
+<link rel="stylesheet" href="/mbkbucket/bucketadmin.css?v={{assetVersion}}">
+<div id="bucketAppData" data-app-name="{{APP_NAME}}" hidden></div>
 <!-- File Statistics -->
 <div class="dashboard-card file-stats">
   <div class="card-body">
@@ -36,9 +36,9 @@
 </div>
 {{/if}}
 
-<div class="row g-4 mb-4">
+<div class="mb-4">
   <!-- Upload Form -->
-  <div class="col-lg-6">
+  <div class="col-lg-12">
     <div class="dashboard-card h-100">
       <div class="card-header">
         <h5 class="card-title">
@@ -54,14 +54,14 @@
 
           <div class="mb-3">
             <label for="fileInput" class="form-label">Select Files or drag & drop</label>
-            <div id="dropZone" class="form-control form-control-lg"
-              style="min-height:120px; display:flex; align-items:center; justify-content:center; cursor:pointer; text-align:center;">
-              <div>
-                <i class="fas fa-cloud-upload-alt fa-2x" style="opacity: .65;"></i>
-                <div style="margin-top: 0.5rem; color: var(--gray-color-ml);">Drop files here or click to browse</div>
+            <div id="dropZone" class="upload-drop-zone">
+              <div class="drop-zone-content">
+                <i class="fas fa-cloud-upload-alt"></i>
+                <div class="drop-text">Drop files here or click to browse</div>
+                <div class="drop-hint">Supports multiple files</div>
               </div>
             </div>
-            <input type="file" class="form-control d-none" id="fileInput" name="files" multiple>
+            <input type="file" class="form-control d-none" style="display: none;" id="fileInput" name="files" multiple>
             <div class="form-text">
               <i class="fas fa-info-circle"></i>
               You can drop multiple files. Large files will use chunked upload when available.
@@ -99,41 +99,6 @@
       </div>
     </div>
   </div>
-
-  <!-- Search Filter -->
-  <div class="col-lg-6">
-    <div class="dashboard-card h-100">
-      <div class="card-header">
-        <h5 class="card-title">
-          <div class="card-icon">
-            <i class="fas fa-search"></i>
-          </div>
-          Search Files & Folders
-        </h5>
-      </div>
-      <div class="card-body">
-        <div class="mb-3">
-          <label for="searchInput" class="form-label">Search by Name</label>
-          <input type="text" class="form-control form-control-lg" id="searchInput" placeholder="Enter search term..."
-            onkeypress="if(event.key==='Enter') performSearch()">
-          <div class="form-text">
-            <i class="fas fa-info-circle"></i>
-            Search across all files and folders by name (case-insensitive)
-          </div>
-        </div>
-        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
-          <button type="button" class="btn btn-primary btn-lg" onclick="performSearch()">
-            <i class="fas fa-search"></i>
-            Search
-          </button>
-          <button type="button" class="btn btn-outline-secondary btn-lg" onclick="clearSearch()">
-            <i class="fas fa-times"></i>
-            Clear
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
 </div>
 
 <!-- File List -->
@@ -145,7 +110,23 @@
       </div>
       <span id="fileListTitle">Files</span>
     </h5>
-    
+
+    <!-- Inline Search (moved from separate card) -->
+    <div class="search-inline" style="flex:1; max-width:640px; display:flex; gap:0.5rem; align-items:center; justify-content:center;">
+      <input type="text" class="form-control form-control-sm" id="searchInput" placeholder="Search files and folders..." aria-label="Search files">
+      <button type="button" class="btn btn-sm btn-primary" onclick="performSearch()" aria-label="Search"><i class="fas fa-search"></i></button>
+      <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearSearch()" aria-label="Clear search"><i class="fas fa-times"></i></button>
+    </div>
+
+    <div class="btn-group" role="group" aria-label="Actions">
+      <button type="button" class="btn btn-sm btn-success" onclick="createFile()" title="New Text File">
+        <i class="fas fa-file-alt"></i> New File
+      </button>
+      <button type="button" class="btn btn-sm btn-outline-success" onclick="createFolder()" title="New Folder">
+        <i class="fas fa-folder-plus"></i> New Folder
+      </button>
+    </div>
+
     <div class="btn-group" role="group" aria-label="View Mode">
       <button type="button" class="btn btn-sm btn-light view-toggle-btn active" id="viewBtnFolder" onclick="changeViewMode('folder')" title="Folder View" style="border-top-right-radius: 0; border-bottom-right-radius: 0;">
         <i class="fas fa-folder"></i> Folders
@@ -230,7 +211,7 @@
         </div>
       </div>
       <div class="modal-body">
-        <div class="preview-content" aria-live="polite">
+        <div class="preview-content" id="previewContent" aria-live="polite">
           <div class="empty-preview">
             <i class="fas fa-spinner fa-spin"></i>
             <div style="margin-top:0.5rem; color:var(--gray-color-ml);">Loading preview...</div>
@@ -250,4 +231,7 @@
   </div>
 </div>
 
-<script src="/js/bucketadmincontent.js?v={{assetVersion}}"></script>
+<!-- Toast Container -->
+<div id="toast-container" style="position: fixed; bottom: 20px; right: 20px; z-index: 1050; display: flex; flex-direction: column; gap: 10px;"></div>
+
+<script src="/mbkbucket/bucketadmin.js?v={{assetVersion}}"></script>