mbkbucket 1.2.1 → 1.3.0

package/index.js

@@ -49,6 +49,7 @@ server.get('/mbkbucket/bucketadmin.css', (req, res) => {
     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) => {

package/lib/bucket.js

@@ -33,9 +33,7 @@ router.get(['/mbkbucket/info', "/mbkbucket/i"], validateSessionAndRole('SuperAdm
 
 // API endpoint for fetching files
 router.get('/mbkbucket/api/files', validateSessionAndRole('SuperAdmin'), async (req, res) => {
-  //mock response for testing
-  //return res.json({success: true,files: [],prefix: getAppName(),search: '',bucket: '',currentPage: 1,totalPages: 1,hasNextPage: false,hasPrevPage: false,nextPage: 2,prevPage: 1,totalFiles: 1});
-  const { prefix = '', page = '1', search = '' } = req.query;
+  const { prefix = '', page = '1', search = '', recursive = 'true', token = '' } = req.query;
   const pageSize = 100;
   let effectivePrefix;
   try {
@@ -44,64 +42,121 @@ router.get('/mbkbucket/api/files', validateSessionAndRole('SuperAdmin'), async (
     return res.status(400).json({ success: false, error: e.message });
   }
 
+  // Determine mode: Optimized (Folder View, No Search) vs Legacy/Deep (Flat View or Search)
+  const isSearch = search && search.trim().length > 0;
+  // If recursive is explicitly 'false', we respect it. Default to true if missing (though frontend should send it)
+  // Logic: Optimization works only if NOT recursive and NOT searching.
+  const isRecursive = recursive === 'true'; 
+  const useOptimizedListing = !isSearch && !isRecursive;
+
   try {
     let files = [];
-    let continuationToken = undefined;
+    let folders = []; // For CommonPrefixes (subfolders)
+    let nextContinuationToken = null;
     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);
+    if (useOptimizedListing) {
+      // --- OPTIMIZED PATH: S3 Delimiter (Folder View) ---
+      // We process only one page from S3. This reduces API calls significantly.
+      
+      // FIX: Ensure root listing uses trailing slash to prevent "app-name" matching "app-name-backup"
+      // and ensure directory browsing works correctly if ensurePrefix didn't append slash (which it now does if present in input).
+      // But for root, input is empty, ensurePrefix returns "app", so we force "app/" here.
+      let listPrefix = effectivePrefix;
+      if (listPrefix === getAppName() && !listPrefix.endsWith('/')) {
+        listPrefix += '/';
       }
-      continuationToken = result.nextToken;
-    } while (continuationToken);
-
-    // If no files found under the app prefixed path, try root as a legacy fallback
-    if (!files.length) {
-      try {
-        const rootResult = await listfiles('');
-        if ((rootResult.Contents || []).length) {
-          files = rootResult.Contents || [];
-          usedPrefix = '';
-          legacyFallback = true;
+
+      const result = await listfiles(listPrefix, { 
+        continuationToken: token || undefined, // Use token from query if provided
+        delimiter: '/', 
+        maxKeys: 1000 // Fetch a healthy batch.
+      });
+      
+      files = result.Contents || [];
+      // S3 returns CommonPrefixes for folders when delimiter is used
+      folders = (result.CommonPrefixes || []).map(p => p.Prefix).filter(p => p !== effectivePrefix); 
+      nextContinuationToken = result.NextContinuationToken;
+
+      // Note: In optimized mode, totalFiles is unknown without scanning everything.
+    } else {
+      // --- LEGACY PATH: Recursive Scan (Search or Flat View) ---
+      let continuationToken = undefined;
+
+      // Fetch all files recursively (handling S3 pagination)
+      do {
+        const result = await listfiles(effectivePrefix, { continuationToken });
+        if (result.Contents) {
+          files = files.concat(result.Contents);
         }
-      } catch (fallbackErr) {
-        // ignore fallback errors and continue with empty files
-        console.warn('Fallback root listing failed:', fallbackErr.message);
+        continuationToken = result.nextToken;
+      } while (continuationToken);
+
+      // If no files found under the app prefixed path, try root as a legacy fallback
+      if (!files.length && !search) {
+        try {
+          const rootResult = await listfiles('');
+          if ((rootResult.Contents || []).length) {
+            files = rootResult.Contents || [];
+            usedPrefix = '';
+            legacyFallback = true;
+          }
+        } catch (fallbackErr) {
+          console.warn('Fallback root listing failed:', fallbackErr.message);
+        }
+      }
+      
+      // Apply search filter if provided
+      if (isSearch) {
+        const searchLower = search.toLowerCase();
+        files = files.filter(file => {
+          return file.Key.toLowerCase().includes(searchLower);
+        });
       }
     }
 
-    // Apply search filter if provided
-    if (search.trim()) {
-      const searchLower = search.toLowerCase();
-      files = files.filter(file => {
-        return file.Key.toLowerCase().includes(searchLower);
-      });
+    // Response Construction
+    if (useOptimizedListing) {
+       res.json({
+         success: true,
+         files: files,
+         folders: folders, 
+         prefix: effectivePrefix,
+         search: search,
+         // In optimized mode, we don't support random access "Page X". We support "Next".
+         currentPage: 1, 
+         totalPages: nextContinuationToken ? 9999 : 1, 
+         hasNextPage: !!nextContinuationToken,
+         nextContinuationToken: nextContinuationToken,
+         mode: 'optimized',
+         totalFiles: -1 
+       });
+       
+    } else {
+       // Legacy Pagination Logic (In-Memory)
+       const totalFiles = files.length;
+       const totalPages = Math.max(1, Math.ceil(totalFiles / pageSize));
+       const currentPage = Math.max(1, parseInt(page, 10) || 1);
+       const startIndex = (currentPage - 1) * pageSize;
+       const paginatedFiles = files.slice(startIndex, startIndex + pageSize);
+
+       res.json({
+         success: true,
+         files: paginatedFiles,
+         folders: [], // In recursive mode, frontend calculates folders from file paths
+         prefix: effectivePrefix,
+         search: search,
+         currentPage: currentPage,
+         totalPages,
+         hasNextPage: currentPage < totalPages,
+         hasPrevPage: currentPage > 1,
+         nextPage: currentPage + 1,
+         prevPage: Math.max(1, currentPage - 1),
+         totalFiles
+       });
     }
 
-    // Pagination logic
-    const totalFiles = files.length;
-    const totalPages = Math.max(1, Math.ceil(totalFiles / pageSize));
-    const currentPage = Math.max(1, parseInt(page, 10) || 1);
-    const startIndex = (currentPage - 1) * pageSize;
-    const paginatedFiles = files.slice(startIndex, startIndex + pageSize);
-
-    res.json({
-      success: true,
-      files: paginatedFiles,
-      prefix: effectivePrefix,
-      search: search,
-      currentPage: currentPage,
-      totalPages,
-      hasNextPage: currentPage < totalPages,
-      hasPrevPage: currentPage > 1,
-      nextPage: currentPage + 1,
-      prevPage: Math.max(1, currentPage - 1),
-      totalFiles
-    });
   } catch (error) {
     console.error("Error listing files:", error);
     res.status(500).json({
@@ -128,7 +183,7 @@ router.post('/mbkbucket/upload', validateSessionAndRole('SuperAdmin'), upload.si
       return res.status(400).json({ success: false, error: e.message });
     }
 
-    const key = `${effectivePrefix}/${req.file.originalname}`;
+    const key = `${effectivePrefix.replace(/\/+$/, '')}/${req.file.originalname}`;
 
     // Check if file already exists
     const exists = await fileExists(key);
@@ -196,7 +251,7 @@ router.post('/mbkbucket/upload-complete', validateSessionAndRole('SuperAdmin'),
     // Upload to bucket
     let effectivePrefix;
     try { effectivePrefix = ensurePrefix(prefix); } catch (e) { return res.status(400).json({ success: false, error: e.message }); }
-    const key = `${effectivePrefix}/${fileName}`;
+    const key = `${effectivePrefix.replace(/\/+$/, '')}/${fileName}`;
 
     // Check existence
     const exists = await fileExists(key);
@@ -226,7 +281,7 @@ router.post('/mbkbucket/create-folder', validateSessionAndRole('SuperAdmin'), as
     let effectivePrefix;
     try { effectivePrefix = ensurePrefix(prefix); } catch (e) { return res.status(400).json({ success: false, error: e.message }); }
 
-    const folderKey = `${effectivePrefix}/${folderName}/`;
+    const folderKey = `${effectivePrefix.replace(/\/+$/, '')}/${folderName}/`;
 
     // Check if exists
     const exists = await fileExists(folderKey);

package/lib/s3.js

@@ -66,10 +66,15 @@ export function ensureKeyHasAppPrefix(key = '') {
 export function ensurePrefix(prefix = '') {
   const app = getAppName();
   if (!app) throw new Error('APP_NAME is not configured; set mbkautheVar.APP_NAME or MBKAUTHE_APP_NAME');
-  let p = String(prefix || '').replace(/^\/+/, '').replace(/\/+$/g, '');
+  // Only strip LEADING slashes. Preserve trailing slashes for directory listing.
+  let p = String(prefix || '').replace(/^\/+/, '');
+  
   if (!p) return `${app}`;
+  
   // If prefix already equals app or already starts with app/, normalize and return single app prefix
-  if (p === app) return app;
+  if (p === app) return app; // If p is exactly "app", we return "app". (Caller should append / if listing root)
+  if (p === `${app}/`) return `${app}/`;
+
   if (p.startsWith(`${app}/`)) {
     // collapse repeated app/ sequences
     const appPrefixRegex = new RegExp(`^(?:${app}\/)+`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mbkbucket",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "S3 Bucket manager for mbktech.org apps",
   "author": "Muhammad Bin Khalid",
   "homepage": "https://github.com/MIbnEKhalid/mbkbucket#readme",

package/public/bucketadmin.css

@@ -43,6 +43,48 @@
     padding: 1rem;
 }
 
+/* Collapsible Upload Section */
+.upload-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.collapse-btn {
+    background: none;
+    border: none;
+    color: white;
+    padding: 0.5rem;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.collapse-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.collapse-btn i {
+    transition: transform 0.3s ease;
+}
+
+.collapse-btn.expanded i {
+    transform: rotate(180deg);
+}
+
+.collapsible-content {
+    padding: 0rem !important;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
+}
+
+.collapsible-content.expanded {
+    padding: 1rem !important;
+    max-height: 2000px;
+    transition: max-height 0.3s ease-in;
+}
+
 /* File Stats Card - Welcome Style */
 .file-stats {
     background: linear-gradient(135deg, var(--primary-color-ml) 0%, var(--primary-dark-color-ml) 100%);
@@ -1077,32 +1119,30 @@
     align-items: center;
 }
 
-/* Skeleton loaders */
+/* Skeleton loaders - tuned grid to equalize column spacing visually */
 .skeleton-row {
-    display: flex;
+    display: grid;
+    grid-template-columns: 48px minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 240px); /* icon + 3 columns with balanced min widths */
     gap: 1rem;
     padding: 1rem;
+    align-items: center;
+    justify-items: stretch; /* make cells span their tracks evenly */
 }
 
+/* make skeleton boxes flexible and responsive */
 .skeleton-box {
     background: linear-gradient(90deg, #f5f7fa, #eef2f6);
     border-radius: 6px;
-}
-
-.skeleton-box.s-80 {
-    width: 80px;
     height: 16px;
+    width: 100%;
+    min-width: 0;
+    justify-self: stretch;
 }
 
-.skeleton-box.s-200 {
-    width: 200px;
-    height: 16px;
-}
-
-.skeleton-box.s-40 {
-    width: 40px;
-    height: 16px;
-}
+/* semantic size hints (max widths) and alignment to ensure visual balance */
+.skeleton-box.s-40 { max-width: 48px; justify-self: start; }
+.skeleton-box.s-80 { max-width: 160px; justify-self: center; }
+.skeleton-box.s-200 { max-width: 220px; justify-self: end; }
 
 .skeleton-row .file-icon {
     width: 40px;
@@ -1110,6 +1150,26 @@
     border-radius: 8px;
 }
 
+/* Responsive adjustments */
+@media (max-width: 992px) {
+    .skeleton-row {
+        grid-template-columns: 40px minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 200px);
+        gap: 0.9rem;
+    }
+    .skeleton-box.s-200 { max-width: 180px; }
+}
+
+@media (max-width: 768px) {
+    .skeleton-row {
+        grid-template-columns: 40px 1fr 1fr 1fr;
+        gap: 0.75rem;
+    }
+    .skeleton-box.s-80 { justify-self: start; }
+    .skeleton-box.s-200 { max-width: 140px; justify-self: end; }
+}
+
+
+
 .btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -1187,12 +1247,21 @@
     }
 
     .stats-content {
-        flex-direction: column;
-        text-align: center;
+        gap: 0.75rem;
     }
 
     .stats-icon {
-        margin: 0 auto;
+        width: 50px;
+        height: 50px;
+        font-size: 1.3rem;
+    }
+
+    .stats-text h2 {
+        font-size: 1.3rem;
+    }
+
+    .stats-text p {
+        font-size: 0.85rem;
     }
 
     .filter-form {
@@ -1209,8 +1278,23 @@
         padding: 1rem;
     }
 
+    .stats-content {
+        gap: 0.5rem;
+    }
+
+    .stats-icon {
+        width: 40px;
+        height: 40px;
+        font-size: 1.2rem;
+    }
+
     .stats-text h2 {
-        font-size: 1.35rem;
+        font-size: 1.2rem;
+    }
+
+    .stats-text p {
+        font-size: 0.8rem;
+        margin: 0.25rem 0 0;
     }
 
     .btn-group {
@@ -1481,6 +1565,67 @@
     display: none;
 }
 
+/* Additional utility classes for removing inline styles */
+.file-list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.search-inline {
+    flex: 1;
+    max-width: 640px;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: center;
+}
+
+.view-btn-left {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.view-btn-right {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.pagination-container {
+    display: none;
+    padding: 1rem;
+    border-top: 1px solid var(--gray-light-color-ml);
+    background: var(--light-color-ml);
+}
+
+.modal-body-text-style {
+    color: var(--gray-color-ml);
+    margin-bottom: 0;
+}
+
+.modal-body-text-top {
+    color: var(--gray-color-ml);
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+}
+
+.modal-header-spacing {
+    margin-top: 0.5rem;
+    color: var(--gray-color-ml);
+}
+
+.toast-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1050;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
 @media (max-width: 768px) {
     .dtm {
         display: block;

package/public/bucketadmin.js

@@ -7,6 +7,7 @@ let currentOrder = 'asc';
 let currentViewMode = 'folder'; // 'folder' or 'flat'
 let pageFiles = [];
 let pageFolders = [];
+let currentNextToken = null;
 const bucketAppName = document.getElementById('bucketAppData')?.dataset.appName || '';
 // Bucket is configured centrally on the server; client should not select a bucket.
 
@@ -70,7 +71,7 @@ function showAlert(message, type = 'success') {
 }
 
 // Fetch and render files
-async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort, order = currentOrder) {
+async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort, order = currentOrder, token = '') {
     currentPage = page;
     currentPrefix = prefix;
     currentSearch = search;
@@ -109,19 +110,13 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
           <div class="skeleton-box s-40"></div>
           <div class="skeleton-box s-200"></div>
           <div class="skeleton-box s-80"></div>
-          <div class="skeleton-box s-80"></div>
-        </div>
-        <div class="skeleton-row">
-          <div class="skeleton-box s-40"></div>
           <div class="skeleton-box s-200"></div>
-          <div class="skeleton-box s-80"></div>
-          <div class="skeleton-box s-80"></div>
         </div>
         <div class="skeleton-row">
           <div class="skeleton-box s-40"></div>
           <div class="skeleton-box s-200"></div>
           <div class="skeleton-box s-80"></div>
-          <div class="skeleton-box s-80"></div>
+          <div class="skeleton-box s-200"></div>
         </div>
       </div>
     `;
@@ -129,15 +124,28 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
     try {
         const searchParam = search ? `&search=${encodeURIComponent(search)}` : '';
         const sortParam = `&sort=${sort}&order=${order}`;
-        const response = await fetch(`/mbkbucket/api/files?page=${page}&prefix=${encodeURIComponent(prefix)}${searchParam}${sortParam}`);
+        
+        // Determine recursive mode
+        const isFolderMode = currentViewMode === 'folder';
+        const recursiveParam = `&recursive=${!isFolderMode}`; // false if folder mode, true if flat mode
+        const tokenParam = token ? `&token=${encodeURIComponent(token)}` : '';
+
+        const response = await fetch(`/mbkbucket/api/files?page=${page}&prefix=${encodeURIComponent(prefix)}${searchParam}${sortParam}${recursiveParam}${tokenParam}`);
         const data = await response.json();
 
         if (!data.success) {
             throw new Error(data.error || 'Failed to load files');
         }
+        
+        // Store next token
+        currentNextToken = data.nextContinuationToken || null;
 
         // Update stats
-        totalFilesCount.textContent = `${data.totalFiles} ${search ? 'Results' : 'Files'}`;
+        if (data.totalFiles === -1) {
+             totalFilesCount.textContent = `${(data.files.length + (data.folders ? data.folders.length : 0))}${data.hasNextPage ? '+' : ''} Items`;
+        } else {
+             totalFilesCount.textContent = `${data.totalFiles} ${search ? 'Results' : 'Files'}`;
+        }
 
         if (search) {
             filterInfo.textContent = `Search results for: "${search}"`;
@@ -149,7 +157,9 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
         }
 
         // Render files or empty state
-        if (data.files.length === 0 && !prefix) {
+        const hasContent = (data.files && data.files.length > 0) || (data.folders && data.folders.length > 0);
+
+        if (!hasContent && !prefix && !search) {
             container.innerHTML = `
           <div class="empty-state">
             <i class="fas fa-folder-open"></i>
@@ -163,11 +173,13 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
             paginationContainer.style.display = 'none';
         } else {
             // Store for client-side sorting and view switching
-            pageFiles = data.files;
+            pageFiles = data.files || [];
 
-            // Only calculate folders if we are in search or folder mode (for potential future switching)
-            // But mainly we rely on currentViewMode in the render function
-            pageFolders = search ? [] : extractFoldersAtCurrentLevel(data.files, prefix);
+            if (data.mode === 'optimized') {
+                 pageFolders = data.folders || [];
+            } else {
+                 pageFolders = search ? [] : extractFoldersAtCurrentLevel(data.files, prefix);
+            }
 
             renderFilesTable(pageFiles, pageFolders, prefix);
             renderPagination(data);
@@ -400,7 +412,10 @@ function renderFilesTable(files, folders = [], prefix = '') {
 
     // Generate folder rows (only used in folder mode)
     const folderRows = displayFolders.map(folderPath => {
-        const folderName = folderPath.split('/').pop();
+        // Handle folder paths which typically end in a slash (e.g., "folder/subfolder/")
+        const cleanPath = folderPath.replace(/\/+$/, ''); 
+        const folderName = cleanPath.split('/').pop();
+        
         return `
         <tr class="folder-row" onclick="loadFiles(1, '${folderPath}')" title="Open folder: ${folderName}">
           <td style="text-align:center;">
@@ -453,10 +468,10 @@ function renderFilesTable(files, folders = [], prefix = '') {
             folderPath = fullPath.substring(0, lastSlashIndex + 1); // include trailing slash
         }
 
-        const iconClass = getFileIcon(filename);
-        const typeCategory = getFileTypeCategory(filename);
-        const truncatedName = truncateFileName(filename);
-        const isFileViewable = isViewable(filename);
+        const iconClass = window.getFileIcon ? window.getFileIcon(filename) : 'fas fa-file';
+        const typeCategory = window.getFileTypeCategory ? window.getFileTypeCategory(filename) : '';
+        const truncatedName = (window.truncateFileName ? window.truncateFileName(filename) : filename) || filename;
+        const isFileViewable = window.isViewable ? window.isViewable(filename) : false;
 
         // If in flat mode, we might want to show the folder path more prominently
         const pathDisplay = (currentViewMode === 'flat' && folderPath && folderPath !== prefix + (prefix ? '/' : ''))
@@ -493,6 +508,9 @@ function renderFilesTable(files, folders = [], prefix = '') {
                 data-key-enc="${encodedKey}" title="${isFileViewable ? 'View file in browser' : 'File type not supported for viewing'}" ${!isFileViewable ? 'disabled style="opacity:0.5"' : ''}>
                 <i class="fas fa-eye"></i>
               </button>
+              <button type="button" class="btn btn-info btn-sm copy-btn" data-key-enc="${encodedKey}" title="Copy Link" style="color:white;">
+                <i class="fas fa-link"></i>
+              </button>
               <a href="/mbkbucket/download/${encodedKey}" class="btn btn-success btn-sm"
                 title="Download file">
                 <i class="fas fa-download"></i>
@@ -587,63 +605,137 @@ function renderFilesTable(files, folders = [], prefix = '') {
 
 // Render pagination
 function renderPagination(data) {
-    const { currentPage, totalPages, hasPrevPage, hasNextPage } = data;
+    const { currentPage, totalPages, hasPrevPage, hasNextPage, mode } = data;
 
     let paginationHTML = '';
 
-    // Previous button
-    if (hasPrevPage) {
-        paginationHTML += `
-        <li class="page-item">
-          <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${currentPage - 1}, '${currentPrefix}', '${currentSearch}')">
-            <i class="fas fa-chevron-left"></i> Previous
-          </a>
-        </li>
-      `;
-    } else {
+    if (mode === 'optimized') {
+        // Optimized Mode: Token-based pagination (Next only, limited Prev)
+        
+        // Previous button (Disabled for now as we don't track history stack of tokens)
         paginationHTML += `
         <li class="page-item disabled">
-          <span class="page-link">
+          <span class="page-link" title="Previous page not supported in optimized view">
             <i class="fas fa-chevron-left"></i> Previous
           </span>
         </li>
       `;
-    }
-
-    // Page numbers
-    for (let i = 1; i <= totalPages; i++) {
-        if (i === currentPage) {
-            paginationHTML += `
+      
+      // Current Page Indicator
+      paginationHTML += `
           <li class="page-item active">
-            <span class="page-link">${i}</span>
+            <span class="page-link">${currentPage}</span>
           </li>
-        `;
-        } else {
-            paginationHTML += `
+      `;
+
+      // Next button
+      if (hasNextPage) {
+          // Quote the token correctly
+          const tokenStr = currentNextToken ? currentNextToken.replace(/'/g, "\\'") : "";
+          paginationHTML += `
           <li class="page-item">
-            <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${i}, '${currentPrefix}', '${currentSearch}')">${i}</a>
+            <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${currentPage + 1}, '${currentPrefix}', '${currentSearch}', '${currentSort}', '${currentOrder}', '${tokenStr}')">
+              Next <i class="fas fa-chevron-right"></i>
+            </a>
           </li>
         `;
-        }
-    }
+      } else {
+          paginationHTML += `
+          <li class="page-item disabled">
+            <span class="page-link">
+              Next <i class="fas fa-chevron-right"></i>
+            </span>
+          </li>
+        `;
+      }
 
-    // Next button
-    if (hasNextPage) {
-        paginationHTML += `
-        <li class="page-item">
-          <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${currentPage + 1}, '${currentPrefix}', '${currentSearch}')">
-            Next <i class="fas fa-chevron-right"></i>
-          </a>
-        </li>
-      `;
     } else {
-        paginationHTML += `
-        <li class="page-item disabled">
-          <span class="page-link">
-            Next <i class="fas fa-chevron-right"></i>
-          </span>
-        </li>
-      `;
+        // Legacy Mode: Numbered pagination
+        
+        // Previous button
+        if (hasPrevPage) {
+            paginationHTML += `
+            <li class="page-item">
+              <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${currentPage - 1}, '${currentPrefix}', '${currentSearch}')">
+                <i class="fas fa-chevron-left"></i> Previous
+              </a>
+            </li>
+          `;
+        } else {
+            paginationHTML += `
+            <li class="page-item disabled">
+              <span class="page-link">
+                <i class="fas fa-chevron-left"></i> Previous
+              </span>
+            </li>
+          `;
+        }
+
+        // Smart Page Numbers (limit visible pages)
+        const maxPagesToShow = 7;
+        let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
+        let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
+        
+        if (endPage - startPage + 1 < maxPagesToShow) {
+            startPage = Math.max(1, endPage - maxPagesToShow + 1);
+        }
+
+        // First page
+        if (startPage > 1) {
+             paginationHTML += `
+            <li class="page-item">
+                <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(1, '${currentPrefix}', '${currentSearch}')">1</a>
+            </li>`;
+            if (startPage > 2) {
+                 paginationHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
+            }
+        }
+
+        for (let i = startPage; i <= endPage; i++) {
+            if (i === currentPage) {
+                paginationHTML += `
+              <li class="page-item active">
+                <span class="page-link">${i}</span>
+              </li>
+            `;
+            } else {
+                paginationHTML += `
+              <li class="page-item">
+                <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${i}, '${currentPrefix}', '${currentSearch}')">${i}</a>
+              </li>
+            `;
+            }
+        }
+        
+        // Last page
+        if (endPage < totalPages) {
+            if (endPage < totalPages - 1) {
+                 paginationHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
+            }
+            paginationHTML += `
+            <li class="page-item">
+                <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${totalPages}, '${currentPrefix}', '${currentSearch}')">${totalPages}</a>
+            </li>`;
+        }
+
+        // Next button
+        if (hasNextPage) {
+            paginationHTML += `
+            <li class="page-item">
+              <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${currentPage + 1}, '${currentPrefix}', '${currentSearch}')">
+                Next <i class="fas fa-chevron-right"></i>
+              </a>
+            </li>
+          `;
+        } else {
+            paginationHTML += `
+            <li class="page-item disabled">
+              <span class="page-link">
+                Next <i class="fas fa-chevron-right"></i>
+              </span>
+            </li>
+          `;
+        }
     }
 
     document.getElementById('paginationList').innerHTML = paginationHTML;
@@ -915,8 +1007,33 @@ document.getElementById('clearQueueBtn')?.addEventListener('click', function ()
 
 
 
+// Initialize upload section collapse functionality
+function initializeUploadCollapse() {
+    const toggleBtn = document.getElementById('uploadToggleBtn');
+    const uploadSection = document.getElementById('uploadSection');
+    
+    if (!toggleBtn || !uploadSection) return;
+    
+    toggleBtn.addEventListener('click', function() {
+        const isExpanded = uploadSection.classList.contains('expanded');
+        
+        if (isExpanded) {
+            // Collapse
+            uploadSection.classList.remove('expanded');
+            toggleBtn.classList.remove('expanded');
+        } else {
+            // Expand
+            uploadSection.classList.add('expanded');
+            toggleBtn.classList.add('expanded');
+        }
+    });
+}
+
 // Add hover effects and animations
 document.addEventListener('DOMContentLoaded', function () {
+    // Initialize collapsible upload section
+    initializeUploadCollapse();
+    
     // Load initial files (support both legacy 'prefix' and new 'folder' query param)
     const urlParams = new URLSearchParams(window.location.search);
     const initialPrefix = urlParams.get('folder') || urlParams.get('prefix') || bucketAppName || '';

package/views/bucket.handlebars

@@ -72,7 +72,7 @@
         }
 
         .logo img {
-            width: 40px
+            width: 35px
         }
 
         .main-content {

package/views/bucketadmincontent.handlebars

@@ -40,15 +40,18 @@
   <!-- Upload Form -->
   <div class="col-lg-12">
     <div class="dashboard-card h-100">
-      <div class="card-header">
+      <div class="card-header upload-card-header" id="uploadToggleBtn">
         <h5 class="card-title">
           <div class="card-icon">
             <i class="fas fa-upload"></i>
           </div>
           Upload File
         </h5>
+        <button type="button" class="collapse-btn">
+          <i class="fas fa-chevron-down"></i>
+        </button>
       </div>
-      <div class="card-body">
+      <div class="card-body collapsible-content" id="uploadSection">
         <form id="uploadForm" action="/mbkbucket/upload" method="post" enctype="multipart/form-data">
           <input type="hidden" name="prefix" value="{{prefix}}">
 
@@ -103,7 +106,7 @@
 
 <!-- File List -->
 <div class="dashboard-card">
-  <div class="card-header" style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;">
+  <div class="card-header file-list-header">
     <h5 class="card-title">
       <div>
         <i class="fas fa-folder-open"></i>
@@ -112,7 +115,7 @@
     </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;">
+    <div class="search-inline">
       <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>
@@ -128,10 +131,10 @@
     </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;">
+      <button type="button" class="btn btn-sm btn-light view-toggle-btn view-btn-left active" id="viewBtnFolder" onclick="changeViewMode('folder')" title="Folder View">
         <i class="fas fa-folder"></i> Folders
       </button>
-      <button type="button" class="btn btn-sm btn-outline-light view-toggle-btn" id="viewBtnFlat" onclick="changeViewMode('flat')" title="Flat List (All Files)" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">
+      <button type="button" class="btn btn-sm btn-outline-light view-toggle-btn view-btn-right" id="viewBtnFlat" onclick="changeViewMode('flat')" title="Flat List (All Files)">
         <i class="fas fa-list-ul"></i> Flat View
       </button>
     </div>
@@ -146,8 +149,7 @@
     </div>
 
     <!-- Pagination -->
-    <div id="paginationContainer"
-      style="display: none; padding: 1rem; border-top: 1px solid var(--gray-light-color-ml); background: var(--light-color-ml);">
+    <div id="paginationContainer" class="pagination-container">
       <nav aria-label="File pagination">
         <ul class="pagination" id="paginationList">
         </ul>
@@ -171,10 +173,10 @@
       <div class="modal-body">
         <i class="fas fa-trash-alt fa-3x"></i>
         <h6>Are you sure you want to delete this file?</h6>
-        <p style="color: var(--gray-color-ml); margin-bottom: 0;">
+        <p class="modal-body-text-style">
           <strong id="deleteFileName" style="color: var(--dark-color-ml);"></strong>
         </p>
-        <p style="color: var(--gray-color-ml); margin-top: 0.5rem; margin-bottom: 0;">
+        <p class="modal-body-text-top">
           <small>This action cannot be undone.</small>
         </p>
       </div>
@@ -214,7 +216,7 @@
         <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>
+            <div class="modal-header-spacing">Loading preview...</div>
           </div>
         </div>
       </div>
@@ -232,6 +234,6 @@
 </div>
 
 <!-- Toast Container -->
-<div id="toast-container" style="position: fixed; bottom: 20px; right: 20px; z-index: 1050; display: flex; flex-direction: column; gap: 10px;"></div>
+<div id="toast-container" class="toast-container"></div>
 
 <script src="/mbkbucket/bucketadmin.js?v={{assetVersion}}"></script>