mbkbucket 1.5.1 → 2.1.0

package/public/bucketadmin.js

@@ -10,7 +10,32 @@ let pageFolders = [];
 let currentNextToken = null;
 let currentApiPrefix = '';
 const bucketAppName = document.getElementById('bucketAppData')?.dataset.appName || '';
-// Bucket is configured centrally on the server; client should not select a bucket.
+const selectedBucket = new URLSearchParams(window.location.search).get('bucket') || '';
+let activeBucket = selectedBucket;
+const isRootApp = String(bucketAppName || '').toLowerCase() === 'portal';
+const rootLabel = isRootApp ? 'root' : (bucketAppName || 'app');
+let currentQuickFilter = 'all';
+let virtualRenderLimit = 0;
+const VIRTUAL_RENDER_THRESHOLD = 500;
+const VIRTUAL_RENDER_BATCH = 250;
+let lastRenderContext = null;
+const MEDIA_EXTENSIONS = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico', 'mp4', 'webm', 'ogg', 'avi', 'mov', 'mp3', 'wav', 'flac', 'aac', 'm4a']);
+const DOC_EXTENSIONS = new Set(['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'md', 'csv']);
+const CODE_EXTENSIONS = new Set(['js', 'ts', 'html', 'htm', 'css', 'php', 'py', 'java', 'cpp', 'c', 'h', 'cs', 'rb', 'go', 'rs', 'sql', 'sh', 'bat', 'ps1', 'yaml', 'yml', 'toml', 'ini', 'conf', 'json', 'xml', 'log']);
+
+function withBucketUrl(url) {
+    if (!activeBucket) return url;
+    const separator = url.includes('?') ? '&' : '?';
+    return `${url}${separator}bucket=${encodeURIComponent(activeBucket)}`;
+}
+
+function getViewUrl(encodedKey) {
+    return withBucketUrl(`/mbkbucket/view/${encodedKey}`);
+}
+
+function getDownloadUrl(encodedKey) {
+    return withBucketUrl(`/mbkbucket/download/${encodedKey}`);
+}
 
 function stripApiPrefixFromPath(path, apiPrefix = '') {
     const normalizedPath = String(path || '').replace(/^\/+/, '');
@@ -37,6 +62,74 @@ function toApiFolderPath(prefix = '', apiPrefix = '') {
     return `${normalizedApiPrefix}/${uiPrefix}`;
 }
 
+function escapeHtml(value = '') {
+    return String(value)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+function escapeAttr(value = '') {
+    return escapeHtml(value);
+}
+
+function getBaseName(path = '') {
+    const value = String(path || '');
+    const lastSlashIndex = value.lastIndexOf('/');
+    return lastSlashIndex === -1 ? value : value.substring(lastSlashIndex + 1);
+}
+
+function dataAttr(name, value = '') {
+    return `data-${name}="${escapeAttr(value)}"`;
+}
+
+function mutedDash() {
+    return '<span class="muted-cell-value">&mdash;</span>';
+}
+
+function syncStateUrl(page = currentPage, prefix = currentPrefix, search = currentSearch) {
+    try {
+        const parts = [];
+        if (activeBucket) parts.push(`bucket=${encodeURIComponent(activeBucket)}`);
+        if (prefix) {
+            const folderPathForUrl = toApiFolderPath(prefix, currentApiPrefix);
+            const folderEncoded = encodeURIComponent(folderPathForUrl).replace(/%2F/g, '/');
+            parts.push(`folder=${folderEncoded}`);
+        }
+        if (page && page > 1) parts.push(`page=${page}`);
+        if (search) parts.push(`search=${encodeURIComponent(search)}`);
+        parts.push(`sort=${encodeURIComponent(currentSort)}`);
+        parts.push(`order=${encodeURIComponent(currentOrder)}`);
+        parts.push(`view=${encodeURIComponent(currentViewMode)}`);
+        parts.push(`filter=${encodeURIComponent(currentQuickFilter)}`);
+
+        const newUrl = '/mbkbucket' + (parts.length ? '?' + parts.join('&') : '');
+        window.history.replaceState(null, '', newUrl);
+    } catch (e) {
+        console.warn('history update failed', e);
+    }
+}
+
+function getActiveBucketLabel() {
+    return activeBucket || 'default bucket';
+}
+
+function matchesQuickFilter(fileName = '', filter = currentQuickFilter) {
+    const ext = getBaseName(fileName).split('.').pop().toLowerCase();
+    if (filter === 'media') return MEDIA_EXTENSIONS.has(ext);
+    if (filter === 'docs') return DOC_EXTENSIONS.has(ext);
+    if (filter === 'code') return CODE_EXTENSIONS.has(ext);
+    return true;
+}
+
+function updateQuickFilterUI() {
+    document.querySelectorAll('.quick-filter-btn').forEach((btn) => {
+        btn.classList.toggle('active', btn.dataset.filter === currentQuickFilter);
+    });
+}
+
 // Show alert message (Toast)
 function showAlert(message, type = 'success') {
     const container = document.getElementById('toast-container');
@@ -75,9 +168,9 @@ function showAlert(message, type = 'success') {
     `;
 
     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()" class="toast-close-btn">&times;</button>
+        <i class="fas ${isSuccess ? 'fa-check-circle' : 'fa-exclamation-circle'} toast-icon"></i>
+        <div class="toast-message">${message}</div>
+        <button type="button" data-action="close-toast" class="toast-close-btn">&times;</button>
     `;
 
     container.appendChild(toast);
@@ -103,26 +196,10 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
     currentSearch = search;
     currentSort = sort;
     currentOrder = order;
+    virtualRenderLimit = 0;
 
-    // Update browser URL so navigation is shareable/bookmarkable (folder shown as readable path)
-    try {
-        const parts = [];
-        if (prefix) {
-            const folderPathForUrl = toApiFolderPath(prefix, currentApiPrefix);
-            // preserve slashes in folder param for readability: encode then restore slashes
-            const folderEncoded = encodeURIComponent(folderPathForUrl).replace(/%2F/g, '/');
-            parts.push(`folder=${folderEncoded}`);
-        }
-        if (page && page > 1) parts.push(`page=${page}`);
-        if (search) parts.push(`search=${encodeURIComponent(search)}`);
-        // Optional: Add sort/order to URL if desired, skipping for simplicity/clean URLs for now
-
-        const newUrl = '/mbkbucket' + (parts.length ? '?' + parts.join('&') : '');
-        window.history.replaceState(null, '', newUrl);
-    } catch (e) {
-        // Ignore history errors in older browsers
-        console.warn('history update failed', e);
-    }
+    // Update browser URL so navigation is shareable/bookmarkable.
+    syncStateUrl(page, prefix, search);
 
     const container = document.getElementById('fileListContainer');
     const paginationContainer = document.getElementById('paginationContainer');
@@ -157,7 +234,7 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
         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 response = await fetch(withBucketUrl(`/mbkbucket/api/files?page=${page}&prefix=${encodeURIComponent(prefix)}${searchParam}${sortParam}${recursiveParam}${tokenParam}`));
         const data = await response.json();
 
         if (!data.success) {
@@ -176,11 +253,13 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
         }
 
         if (search) {
-            filterInfo.textContent = `Search results for: "${search}"`;
+            const filterSuffix = currentQuickFilter !== 'all' ? ` • Filter: ${currentQuickFilter}` : '';
+            filterInfo.textContent = `Bucket: ${getActiveBucketLabel()} • Search: "${search}"${filterSuffix}`;
             fileListTitle.innerHTML = `Search Results <span class="text-muted">for: </span><span class="badge bg-info">${search}</span>`;
         } else {
-            const label = prefix || bucketAppName || 'app';
-            filterInfo.textContent = `Filtered by folder: ${label}`;
+            const label = prefix || rootLabel;
+            const filterSuffix = currentQuickFilter !== 'all' ? ` • Filter: ${currentQuickFilter}` : '';
+            filterInfo.textContent = `Bucket: ${getActiveBucketLabel()} • Folder: ${label}${filterSuffix}`;
             fileListTitle.innerHTML = `Files <span class="text-muted">in: </span><span class="badge bg-info">${label}</span>`;
         }
 
@@ -192,8 +271,8 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
           <div class="empty-state">
             <i class="fas fa-folder-open"></i>
             <h4>No files found</h4>
-            <p>Your bucket is empty. Upload some files to get started!</p>
-            <button class="btn btn-lg" onclick="document.getElementById('fileInput').click()">
+                        <p>Bucket <strong>${escapeHtml(getActiveBucketLabel())}</strong> is empty. Upload some files to get started!</p>
+            <button class="btn btn-lg" data-action="upload-files">
               <i class="fas fa-plus"></i> Upload Your First File
             </button>
           </div>
@@ -221,10 +300,10 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
         console.error('Error loading files:', error);
         container.innerHTML = `
         <div class="empty-state">
-          <i class="fas fa-exclamation-triangle" style="color: var(--danger-color-ml);"></i>
+          <i class="fas fa-exclamation-triangle empty-state-error-icon"></i>
           <h4>Error Loading Files</h4>
-          <p>${error.message}</p>
-          <button class="btn btn-primary" onclick="loadFiles(${page}, '${prefix}')">
+                    <p>Bucket <strong>${escapeHtml(getActiveBucketLabel())}</strong>: ${escapeHtml(error.message)}</p>
+          <button class="btn btn-primary" data-action="retry-load" ${dataAttr('retry-page', page)} ${dataAttr('retry-prefix', prefix)}>
             <i class="fas fa-redo"></i> Retry
           </button>
         </div>
@@ -253,8 +332,8 @@ function toggleSort(field) {
                 valA = new Date(a.LastModified || 0).getTime();
                 valB = new Date(b.LastModified || 0).getTime();
             } else {
-                valA = (a.Key || '').split('/').pop().toLowerCase();
-                valB = (b.Key || '').split('/').pop().toLowerCase();
+                valA = getBaseName(a.Key).toLowerCase();
+                valB = getBaseName(b.Key).toLowerCase();
             }
 
             if (valA < valB) return currentOrder === 'asc' ? -1 : 1;
@@ -263,6 +342,7 @@ function toggleSort(field) {
         });
 
         renderFilesTable(pageFiles, pageFolders, currentPrefix, currentApiPrefix);
+        syncStateUrl(currentPage, currentPrefix, currentSearch);
     }
 }
 
@@ -281,10 +361,18 @@ function clearSearch() {
     loadFiles(1, currentPrefix, '');
 }
 
+function setQuickFilter(filter = 'all') {
+    const nextFilter = String(filter || 'all').toLowerCase();
+    if (currentQuickFilter === nextFilter) return;
+    currentQuickFilter = nextFilter;
+    updateQuickFilterUI();
+    renderFilesTable(pageFiles, pageFolders, currentPrefix, currentApiPrefix);
+    syncStateUrl(currentPage, currentPrefix, currentSearch);
+}
+
 // Extract unique folders at current level
 function extractFoldersAtCurrentLevel(files, prefix) {
     const folderSet = new Set();
-    const prefixDepth = prefix ? prefix.split('/').filter(p => p).length : 0;
 
     files.forEach(file => {
         const key = file.Key;
@@ -330,8 +418,14 @@ function changeViewMode(mode) {
         btnFolder.classList.add('btn-outline-light');
     }
 
-    // Re-render with existing data
-    renderFilesTable(pageFiles, pageFolders, currentPrefix, currentApiPrefix);
+    // Refetch to respect recursive/non-recursive mode and keep URL state.
+    loadFiles(1, currentPrefix, currentSearch, currentSort, currentOrder);
+}
+
+function expandVirtualRows() {
+    if (!lastRenderContext) return;
+    virtualRenderLimit += VIRTUAL_RENDER_BATCH;
+    renderFilesTable(lastRenderContext.files, lastRenderContext.folders, lastRenderContext.prefix, lastRenderContext.apiPrefix);
 }
 
 // Extract folders that match a search query from file paths
@@ -364,6 +458,11 @@ function extractMatchingFolders(files, search) {
 
 // Render files table
 function renderFilesTable(files, folders = [], prefix = '', apiPrefix = '') {
+    lastRenderContext = { files, folders, prefix, apiPrefix };
+    const normalizedPrefix = String(prefix || '').replace(/\/+$/, '');
+    const basePrefix = apiPrefix || prefix;
+    const relativeBaseOffset = basePrefix ? basePrefix.length + (basePrefix.endsWith('/') ? 0 : 1) : 0;
+
     // Determine which files/folders to show based on view mode
     let displayFiles = [];
     let displayFolders = [];
@@ -382,7 +481,7 @@ function renderFilesTable(files, folders = [], prefix = '', apiPrefix = '') {
                 // Skip folder marker objects (keys ending with /)
                 if (f.Key.endsWith('/')) return false;
                 
-                const fileName = f.Key.split('/').pop();
+                const fileName = getBaseName(f.Key);
                 return fileName.toLowerCase().includes(searchLower);
             });
 
@@ -401,27 +500,34 @@ function renderFilesTable(files, folders = [], prefix = '', apiPrefix = '') {
             // Skip folder marker objects (keys ending with /)
             if (file.Key.endsWith('/')) return false;
             
-            const basePrefix = apiPrefix || prefix;
-            const relativePath = basePrefix ? file.Key.substring(basePrefix.length + (basePrefix.endsWith('/') ? 0 : 1)) : file.Key;
+            const relativePath = basePrefix ? file.Key.substring(relativeBaseOffset) : file.Key;
             // File is at current level if it has no '/' in relative path
             return !relativePath.includes('/');
         });
         displayFolders = folders;
     }
 
+    // Apply quick file-type filter after mode/path filtering.
+    displayFiles = displayFiles.filter((f) => {
+        const name = getBaseName(f?.Key);
+        return matchesQuickFilter(name, currentQuickFilter);
+    });
+
     // Generate breadcrumb navigation
     let breadcrumb = '';
     // Show breadcrumb only if we are in folder mode OR if we have a prefix filter active even in flat mode
     // (In flat mode, the prefix acts as a base filter, but we see recursive files under it)
     if (prefix) {
         const parts = prefix.split('/').filter(p => p);
-        let breadcrumbHTML = `
+        const safeRootLabel = escapeHtml(rootLabel);
+        const safeRootTitle = escapeAttr(rootLabel);
+        const breadcrumbParts = [`
         <div class="breadcrumb-nav">
           <div class="breadcrumb-item">
             <i class="fas fa-home"></i>
-            <span class="breadcrumb-link" onclick="loadFiles(1, '')" title="Go to ${bucketAppName || 'app'}">${bucketAppName || 'app'}</span>
+            <button type="button" class="breadcrumb-link" ${dataAttr('nav-prefix', '')} title="Go to ${safeRootTitle}">${safeRootLabel}</button>
           </div>
-      `;
+      `];
 
         let currentPath = '';
         parts.forEach((part, index) => {
@@ -429,62 +535,73 @@ function renderFilesTable(files, folders = [], prefix = '', apiPrefix = '') {
             const isLast = index === parts.length - 1;
 
             if (isLast) {
-                breadcrumbHTML += `
+                const safePart = escapeHtml(part);
+                breadcrumbParts.push(`
             <span class="breadcrumb-separator"><i class="fas fa-chevron-right"></i></span>
             <div class="breadcrumb-item">
-              <span class="breadcrumb-current">${part}</span>
+              <span class="breadcrumb-current">${safePart}</span>
             </div>
-          `;
+          `);
             } else {
                 const pathCopy = currentPath;
-                breadcrumbHTML += `
+                const safePart = escapeHtml(part);
+                const safePathTitle = escapeAttr(pathCopy);
+                breadcrumbParts.push(`
             <span class="breadcrumb-separator"><i class="fas fa-chevron-right"></i></span>
             <div class="breadcrumb-item">
-              <span class="breadcrumb-link" onclick="loadFiles(1, '${pathCopy}')" title="Go to ${pathCopy}">${part}</span>
+              <button type="button" class="breadcrumb-link" ${dataAttr('nav-prefix', pathCopy)} title="Go to ${safePathTitle}">${safePart}</button>
             </div>
-          `;
+          `);
             }
         });
 
-        breadcrumbHTML += `</div>`;
-        breadcrumb = breadcrumbHTML;
+        breadcrumbParts.push(`</div>`);
+        breadcrumb = breadcrumbParts.join('');
     }
 
     // Generate folder rows (only used in folder mode)
-    const folderRows = displayFolders.map(folderPath => {
+        const folderRows = displayFolders.map(folderPath => {
         // Handle folder paths which typically end in a slash (e.g., "folder/subfolder/")
-        const cleanPath = folderPath.replace(/\/+$/, ''); 
-        const folderName = cleanPath.split('/').pop();
+                const rawFolderPath = String(folderPath || '');
+                const cleanPath = rawFolderPath.replace(/\/+$/, '');
+                const folderPathForAction = normalizedPrefix && cleanPath && !cleanPath.startsWith(`${normalizedPrefix}/`)
+                    ? `${normalizedPrefix}/${cleanPath}`
+                    : cleanPath;
+                const folderKeyForDelete = `${folderPathForAction}/`;
+        const folderName = getBaseName(cleanPath);
+                const safeFolderName = escapeHtml(folderName);
+                const safeFolderPathAttr = escapeAttr(`${folderPathForAction}/`);
+                const safeFolderDeleteKeyAttr = escapeAttr(folderKeyForDelete);
         
         return `
-        <tr class="folder-row" onclick="loadFiles(1, '${folderPath}')" title="Open folder: ${folderName}">
-          <td style="text-align:center;">
+                <tr class="folder-row" data-folder-path="${safeFolderPathAttr}" title="Open folder: ${safeFolderName}">
+          <td class="table-cell-center">
             <!-- no selection for folders -->
           </td>
-          <td style="padding-left: 1.5rem;">
-            <div style="display: flex; align-items: center;">
+          <td class="file-name-cell">
+            <div class="file-row-main">
               <div class="file-icon">
                 <i class="fas fa-folder"></i>
               </div>
               <div class="file-info">
-                <div class="file-name" style="font-weight: 700;">
-                  <i class="fas fa-folder" style="margin-right: 0.5rem; color: #f59e0b;"></i>${folderName}/
+                <div class="file-name folder-name">
+                                    <i class="fas fa-folder folder-leading-icon"></i>${safeFolderName}/
                 </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">
+                            <button type="button" class="btn btn-danger btn-sm delete-btn dtm" data-key="${safeFolderDeleteKeyAttr}" data-is-folder="true" title="Delete folder">
                 <i class="fas fa-trash"></i>
               </button>
             </div>
           </td>
           <td>
-            <span style="color: var(--gray-color-ml);">\u2014</span>
+            ${mutedDash()}
           </td>
-          <td style="text-align: center;">
-            <span style="color: var(--gray-color-ml);">\u2014</span>
+          <td class="table-cell-center">
+            ${mutedDash()}
           </td>
-          <td style="text-align: center;">
+          <td class="table-cell-center">
             <div class="btn-group" role="group">
-              <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">
+                            <button type="button" class="btn btn-danger btn-sm delete-btn" data-key="${safeFolderDeleteKeyAttr}" data-is-folder="true" title="Delete folder">
                 <i class="fas fa-trash"></i>
               </button>
             </div>
@@ -493,12 +610,22 @@ function renderFilesTable(files, folders = [], prefix = '', apiPrefix = '') {
       `;
     }).join('');
 
+    const isVirtualized = displayFiles.length > VIRTUAL_RENDER_THRESHOLD;
+    if (!isVirtualized) {
+        virtualRenderLimit = 0;
+    } else if (!virtualRenderLimit) {
+        virtualRenderLimit = VIRTUAL_RENDER_BATCH;
+    }
+    const visibleFiles = isVirtualized ? displayFiles.slice(0, virtualRenderLimit) : displayFiles;
+
     // Generate file rows
-    const fileRows = displayFiles.map(file => {
-        const encodedKey = encodeURIComponent(file.Key);
+    const fileRows = visibleFiles.map(file => {
+        const rawKey = String(file.Key || '');
+        const encodedKey = encodeURIComponent(rawKey);
+        const safeKeyAttr = escapeAttr(rawKey);
 
         // Calculate display name and icon directly
-        const fullPath = file.Key;
+        const fullPath = rawKey;
         const lastSlashIndex = fullPath.lastIndexOf('/');
         let filename = fullPath;
         let folderPath = '';
@@ -512,50 +639,55 @@ function renderFilesTable(files, folders = [], prefix = '', apiPrefix = '') {
         const typeCategory = window.getFileTypeCategory ? window.getFileTypeCategory(filename) : '';
         const truncatedName = (window.truncateFileName ? window.truncateFileName(filename) : filename) || filename;
         const isFileViewable = window.isViewable ? window.isViewable(filename) : false;
+                const safeFilename = escapeHtml(filename);
+                const safeTruncatedName = escapeHtml(truncatedName);
+                const safeFolderPath = escapeHtml(folderPath);
+                const viewButtonClass = isFileViewable ? 'btn btn-primary btn-sm view-btn' : 'btn btn-primary btn-sm view-btn is-disabled';
+                const viewButtonDisabled = isFileViewable ? '' : 'disabled';
 
         // If in flat mode, we might want to show the folder path more prominently
         const pathDisplay = (currentViewMode === 'flat' && folderPath && folderPath !== prefix + (prefix ? '/' : ''))
             ? `<div class="file-path-display">
-             <i class="fas fa-folder" style="margin-right:4px; opacity:0.5;"></i> ${folderPath}
+                         <i class="fas fa-folder path-display-icon"></i> ${safeFolderPath}
            </div>`
             : '';
 
         return `
         <tr class="file-row">
-          <td style="text-align:center;">
-            <input type="checkbox" class="selectFileCheckbox" data-key="${file.Key}" aria-label="Select ${file.Key}" />
+          <td class="table-cell-center">
+                        <input type="checkbox" class="selectFileCheckbox" data-key="${safeKeyAttr}" aria-label="Select ${safeKeyAttr}" />
           </td>
-          <td style="padding-left: 1.5rem;">
-            <div style="display: flex; align-items: center;">
+          <td class="file-name-cell">
+            <div class="file-row-main">
               <div class="file-icon ${typeCategory}">
                 <i class="${iconClass}"></i>
               </div>
               <div class="file-info">
                 ${pathDisplay}
-                <div class="file-name" data-full-path="${file.Key}" title="${filename}">${truncatedName}</div>
+                                <div class="file-name" data-full-path="${safeKeyAttr}" title="${safeFilename}">${safeTruncatedName}</div>
               </div>
             </div>
           </td>
           <td>
-            ${file.Size ? `<span class="file-size">${formatFileSize(file.Size)}</span>` : '<span style="color: var(--gray-color-ml);">N/A</span>'}
+            ${file.Size ? `<span class="file-size">${formatFileSize(file.Size)}</span>` : '<span class="muted-cell-value">N/A</span>'}
           </td>
           <td>
-            ${file.LastModified ? `<span style="color: var(--gray-color-ml);">${formatDate(file.LastModified)}</span>` : '<span style="color: var(--gray-color-ml);">N/A</span>'}
+            ${file.LastModified ? `<span class="muted-cell-value">${formatDate(file.LastModified)}</span>` : '<span class="muted-cell-value">N/A</span>'}
           </td>
-          <td style="text-align: center;">
+          <td class="table-cell-center">
             <div class="btn-group" role="group">
-              <button type="button" class="btn btn-primary btn-sm view-btn" data-key="${file.Key}" data-filename="${file.Key}"
-                data-key-enc="${encodedKey}" title="${isFileViewable ? 'View file in browser' : 'File type not supported for viewing'}" ${!isFileViewable ? 'disabled style="opacity:0.5"' : ''}>
+                            <button type="button" class="${viewButtonClass}" data-key="${safeKeyAttr}" data-filename="${safeKeyAttr}"
+                data-key-enc="${encodedKey}" title="${isFileViewable ? 'View file in browser' : 'File type not supported for viewing'}" ${viewButtonDisabled}>
                 <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;">
+              <button type="button" class="btn btn-info btn-sm copy-btn" data-key-enc="${encodedKey}" title="Copy Link">
                 <i class="fas fa-link"></i>
               </button>
-              <a href="/mbkbucket/download/${encodedKey}" class="btn btn-success btn-sm"
+                            <a href="${getDownloadUrl(encodedKey)}" class="btn btn-success btn-sm"
                 title="Download file">
                 <i class="fas fa-download"></i>
               </a>
-              <button type="button" class="btn btn-danger btn-sm delete-btn" data-key="${file.Key}" title="Delete file">
+                            <button type="button" class="btn btn-danger btn-sm delete-btn" data-key="${safeKeyAttr}" title="Delete file">
                 <i class="fas fa-trash"></i>
               </button>
             </div>
@@ -571,22 +703,22 @@ function renderFilesTable(files, folders = [], prefix = '', apiPrefix = '') {
                 ${breadcrumb}
         <div class="empty-state">
           <div class="empty-state-illustration">
-            <i class="fas fa-folder-open" style="font-size: 4rem; color: #cbd5e0;"></i>
+            <i class="fas fa-folder-open empty-state-folder-icon"></i>
             <i class="fas fa-search empty-state-search-icon"></i>
           </div>
           <h4>No files found</h4>
           <p class="empty-state-description">
-            ${prefix ? `This folder <strong>${prefix}</strong> is currently empty.` : 'Your bucket is empty. Start by uploading files or creating a new folder.'}
+                        ${prefix ? `This folder <strong>${escapeHtml(prefix)}</strong> is currently empty in bucket <strong>${escapeHtml(getActiveBucketLabel())}</strong>.` : `Bucket <strong>${escapeHtml(getActiveBucketLabel())}</strong> is empty. Start by uploading files or creating a new folder.`}
           </p>
           <div class="empty-state-actions">
-            <button class="btn btn-primary" onclick="window.scrollTo({top: 0, behavior: 'smooth'}); document.getElementById('fileInput').click()">
+            <button class="btn btn-primary" data-action="upload-files">
               <i class="fas fa-cloud-upload-alt"></i> Upload Files
             </button>
-            <button class="btn btn-outline-secondary" onclick="createFolder()">
+            <button class="btn btn-outline-secondary" data-action="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-home"></i> Go to ${bucketAppName || 'app'}
+                        ${prefix ? `<button class="btn btn-light" data-action="go-root">
+                            <i class="fas fa-home"></i> Go to ${rootLabel}
             </button>` : ''}
           </div>
         </div>
@@ -602,12 +734,21 @@ function renderFilesTable(files, folders = [], prefix = '', apiPrefix = '') {
             : '<i class="fas fa-sort-down sort-icon sort-icon-active"></i>';
     };
 
-    document.getElementById('fileListContainer').innerHTML = `
+        const virtualizedInfo = isVirtualized
+                ? `<div class="virtualized-info">
+                        <span>Showing ${visibleFiles.length} of ${displayFiles.length} files in this view.</span>
+                        <div class="virtualized-actions">
+                            ${visibleFiles.length < displayFiles.length ? '<button class="btn btn-sm btn-outline-secondary" data-action="expand-virtual">Load more</button>' : ''}
+                        </div>
+                    </div>`
+                : '';
+
+        document.getElementById('fileListContainer').innerHTML = `
       ${breadcrumb}
       <div class="table-responsive">
         <div id="bulkActionsBar" class="bulk-actions-bar">
           <span id="bulkSelectedCount">0 selected</span>
-          <div style="float: right;">
+          <div class="bulk-actions-controls">
             <button class="btn btn-danger btn-sm" id="bulkDeleteBtn" disabled>
               <i class="fas fa-trash"></i> Delete Selected
             </button>
@@ -616,19 +757,19 @@ function renderFilesTable(files, folders = [], prefix = '', apiPrefix = '') {
         <table class="table table-hover mb-0">
           <thead>
             <tr>
-              <th style="width:48px; text-align:center;">
+              <th class="table-select-col">
                 <input type="checkbox" id="selectAllCheckbox" aria-label="Select all files" />
               </th>
-              <th style="padding-left: 1.5rem; cursor: pointer;" onclick="toggleSort('name')">
+              <th class="sortable-heading file-name-heading" data-sort-field="name">
                 <i class="fas fa-file-alt"></i> Name ${getSortIcon('name')}
               </th>
-              <th style="cursor: pointer;" onclick="toggleSort('size')">
+              <th class="sortable-heading" data-sort-field="size">
                 <i class="fas fa-weight"></i> Size ${getSortIcon('size')}
               </th> 
-              <th style="cursor: pointer;" onclick="toggleSort('date')">
+              <th class="sortable-heading" data-sort-field="date">
                 <i class="fas fa-calendar"></i> Last Modified ${getSortIcon('date')}
               </th>
-              <th style="text-align: center;">
+              <th class="table-cell-center">
                 <i class="fas fa-cogs"></i> Actions
               </th>
             </tr>
@@ -637,6 +778,7 @@ function renderFilesTable(files, folders = [], prefix = '', apiPrefix = '') {
             ${allRows}
           </tbody>
         </table>
+                ${virtualizedInfo}
       </div>
     `;
 
@@ -649,6 +791,17 @@ function renderPagination(data) {
     const { currentPage, totalPages, hasPrevPage, hasNextPage, mode } = data;
 
     let paginationHTML = '';
+    const pageLink = (page, label, extra = {}) => {
+        const attrs = [
+            dataAttr('page', page),
+            dataAttr('prefix', currentPrefix),
+            dataAttr('search', currentSearch),
+            dataAttr('sort', extra.sort || currentSort),
+            dataAttr('order', extra.order || currentOrder)
+        ];
+        if (extra.token) attrs.push(dataAttr('token', extra.token));
+        return `<a class="page-link" href="#" ${attrs.join(' ')}>${label}</a>`;
+    };
 
     if (mode === 'optimized') {
         // Optimized Mode: Token-based pagination (Next only, limited Prev)
@@ -671,13 +824,9 @@ function renderPagination(data) {
 
       // 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(${currentPage + 1}, '${currentPrefix}', '${currentSearch}', '${currentSort}', '${currentOrder}', '${tokenStr}')">
-              Next <i class="fas fa-chevron-right"></i>
-            </a>
+            ${pageLink(currentPage + 1, 'Next <i class="fas fa-chevron-right"></i>', { token: currentNextToken || '' })}
           </li>
         `;
       } else {
@@ -697,9 +846,7 @@ function renderPagination(data) {
         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>
+              ${pageLink(currentPage - 1, '<i class="fas fa-chevron-left"></i> Previous')}
             </li>
           `;
         } else {
@@ -725,7 +872,7 @@ function renderPagination(data) {
         if (startPage > 1) {
              paginationHTML += `
             <li class="page-item">
-                <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(1, '${currentPrefix}', '${currentSearch}')">1</a>
+                ${pageLink(1, '1')}
             </li>`;
             if (startPage > 2) {
                  paginationHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
@@ -742,7 +889,7 @@ function renderPagination(data) {
             } else {
                 paginationHTML += `
               <li class="page-item">
-                <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${i}, '${currentPrefix}', '${currentSearch}')">${i}</a>
+                ${pageLink(i, String(i))}
               </li>
             `;
             }
@@ -755,7 +902,7 @@ function renderPagination(data) {
             }
             paginationHTML += `
             <li class="page-item">
-                <a class="page-link" href="#" onclick="event.preventDefault(); loadFiles(${totalPages}, '${currentPrefix}', '${currentSearch}')">${totalPages}</a>
+                ${pageLink(totalPages, String(totalPages))}
             </li>`;
         }
 
@@ -763,9 +910,7 @@ function renderPagination(data) {
         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>
+              ${pageLink(currentPage + 1, 'Next <i class="fas fa-chevron-right"></i>')}
             </li>
           `;
         } else {
@@ -819,7 +964,7 @@ document.getElementById('deleteForm')?.addEventListener('submit', async function
     const isFolder = document.getElementById('deleteIsFolder').value === 'true';
 
     try {
-        const response = await fetch('/mbkbucket/delete', {
+        const response = await fetch(withBucketUrl('/mbkbucket/delete'), {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -858,7 +1003,7 @@ setTimeout(() => {
 // Upload queue, drag-and-drop and multi-file support
 const uploadQueue = []; // { id, file, status, progress, controller/xhr, uploadId }
 const xhrMap = new Map();
-const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB chunk threshold
+const CHUNK_SIZE = 50 * 1024 * 1024; // 50MB chunk threshold
 
 function createId() { return Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 9); }
 
@@ -889,6 +1034,9 @@ function renderUploadQueue() {
     }
 
     container.innerHTML = uploadQueue.map(item => {
+        const safeName = escapeHtml(item.file.name);
+        const iconClass = window.getFileIcon ? window.getFileIcon(item.file.name) : 'fas fa-file-alt';
+        const typeCategory = window.getFileTypeCategory ? window.getFileTypeCategory(item.file.name) : '';
         let statusText;
         if (item.status === 'uploading') {
             const pct = Math.round(item.progress || 0);
@@ -904,14 +1052,14 @@ function renderUploadQueue() {
       <div class="upload-item" data-id="${item.id}">
         <div class="meta">
           <div class="upload-item-meta-row">
-            <div class="file-icon"><i class="fas fa-file"></i></div>
-            <div class="name">${item.file.name}</div>
+                        <div class="file-icon upload-file-icon ${typeCategory}"><i class="${iconClass}"></i></div>
+                        <div class="name upload-item-name" title="${safeName}">${safeName}</div>
             <div class="form-text file-size upload-item-size-label">${formatFileSize(item.file.size)}</div>
           </div>
         </div>
-        <div style="min-width:220px;">
-          <div class="progress-container" style="height: 8px; margin-bottom: 6px;">
-            <div class="progress-bar" style="width: ${Math.round(item.progress)}%; height: 8px;"></div>
+        <div class="upload-progress-cell">
+          <div class="progress-container upload-progress-track">
+            <div class="progress-bar upload-progress-bar" style="width: ${Math.round(item.progress)}%;"></div>
           </div>
           <div class="upload-item-status-row">
             <small class="text-muted status">${statusText}</small>
@@ -942,7 +1090,7 @@ function renderUploadQueue() {
         // Tell S3 to discard the incomplete multipart upload
         if (entry && entry.s3UploadId && entry.s3Key) {
             try {
-                await fetch('/mbkbucket/upload-abort', {
+                await fetch(withBucketUrl('/mbkbucket/upload-abort'), {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ uploadId: entry.s3UploadId, key: entry.s3Key })
@@ -988,7 +1136,7 @@ async function startUploadEntry(entry) {
             // S3 Multipart Upload
             // Step 1 — Initiate: get uploadId + key from the server
             // ---------------------------------------------------------------
-            const initResp = await fetch('/mbkbucket/upload-init', {
+            const initResp = await fetch(withBucketUrl('/mbkbucket/upload-init'), {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
@@ -1015,7 +1163,7 @@ async function startUploadEntry(entry) {
                 const _chunkStart = Date.now();
                 if (entry.status === 'cancelled') {
                     // Clean up on S3
-                    await fetch('/mbkbucket/upload-abort', {
+                    await fetch(withBucketUrl('/mbkbucket/upload-abort'), {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({ uploadId, key })
@@ -1036,7 +1184,7 @@ async function startUploadEntry(entry) {
                 const controller = new AbortController();
                 xhrMap.set(entry.id, { controller, s3UploadId: uploadId, s3Key: key });
 
-                const chunkResp = await fetch('/mbkbucket/upload-chunk', {
+                const chunkResp = await fetch(withBucketUrl('/mbkbucket/upload-chunk'), {
                     method: 'POST',
                     body: fd,
                     signal: controller.signal
@@ -1056,7 +1204,7 @@ async function startUploadEntry(entry) {
             // ---------------------------------------------------------------
             // Step 3 — Complete: assemble all parts on S3
             // ---------------------------------------------------------------
-            const completeResp = await fetch('/mbkbucket/upload-complete', {
+            const completeResp = await fetch(withBucketUrl('/mbkbucket/upload-complete'), {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ uploadId, key, parts })
@@ -1076,7 +1224,7 @@ async function startUploadEntry(entry) {
             fd.append('prefix', currentPrefix);
 
             const xhr = new XMLHttpRequest();
-            xhr.open('POST', '/mbkbucket/upload');
+            xhr.open('POST', withBucketUrl('/mbkbucket/upload'));
 
             xhr.upload.addEventListener('progress', (e) => {
                 if (!e.lengthComputable) return;
@@ -1123,7 +1271,7 @@ async function startUploadEntry(entry) {
         console.error('Upload failed for', entry.file.name, err);
         // If a multipart upload was initiated but didn't finish (not a user cancel), abort it on S3
         if (entry.s3UploadId && entry.s3Key && entry.status !== 'cancelled') {
-            fetch('/mbkbucket/upload-abort', {
+            fetch(withBucketUrl('/mbkbucket/upload-abort'), {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ uploadId: entry.s3UploadId, key: entry.s3Key })
@@ -1151,20 +1299,33 @@ document.getElementById('clearQueueBtn')?.addEventListener('click', function ()
 function initializeUploadCollapse() {
     const toggleBtn = document.getElementById('uploadToggleBtn');
     const uploadSection = document.getElementById('uploadSection');
+    const uploadCard = uploadSection?.closest('.dashboard-card');
     
     if (!toggleBtn || !uploadSection) return;
+
+    const syncUploadCollapseState = (expanded) => {
+        uploadSection.classList.toggle('expanded', expanded);
+        toggleBtn.classList.toggle('expanded', expanded);
+        toggleBtn.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+        uploadSection.setAttribute('aria-hidden', expanded ? 'false' : 'true');
+        if (uploadCard) uploadCard.classList.toggle('upload-panel-open', expanded);
+    };
+
+    toggleBtn.setAttribute('role', 'button');
+    toggleBtn.setAttribute('tabindex', '0');
+    toggleBtn.setAttribute('aria-controls', 'uploadSection');
+    syncUploadCollapseState(uploadSection.classList.contains('expanded'));
     
     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');
+        syncUploadCollapseState(!isExpanded);
+    });
+
+    toggleBtn.addEventListener('keydown', function (event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            const isExpanded = uploadSection.classList.contains('expanded');
+            syncUploadCollapseState(!isExpanded);
         }
     });
 }
@@ -1173,12 +1334,61 @@ function initializeUploadCollapse() {
 document.addEventListener('DOMContentLoaded', function () {
     // Initialize collapsible upload section
     initializeUploadCollapse();
+
+    const bucketSelectorEl = document.getElementById('bucketSelector');
+    const bucketSwitchStatusEl = document.getElementById('bucketSwitchStatus');
+    if (bucketSelectorEl && bucketSelectorEl.value) {
+        activeBucket = bucketSelectorEl.value;
+    }
+    if (bucketSelectorEl) {
+        bucketSelectorEl.addEventListener('change', function () {
+            const nextBucket = String(this.value || '').trim();
+            if (!nextBucket) return;
+            if (nextBucket === activeBucket) return;
+
+            const nextParams = new URLSearchParams(window.location.search);
+            nextParams.set('bucket', nextBucket);
+            nextParams.delete('page');
+            nextParams.delete('token');
+
+            this.disabled = true;
+            this.setAttribute('aria-busy', 'true');
+            bucketSwitchStatusEl?.classList.remove('is-hidden');
+
+            const qs = nextParams.toString();
+            window.location.href = `/mbkbucket${qs ? `?${qs}` : ''}`;
+        });
+    }
     
-    // Load initial files (support both legacy 'prefix' and new 'folder' query param)
+    // Load initial files with persisted state.
     const urlParams = new URLSearchParams(window.location.search);
     const initialPrefix = urlParams.get('folder') || urlParams.get('prefix') || '';
     const initialPage = parseInt(urlParams.get('page')) || 1;
-    loadFiles(initialPage, initialPrefix);
+    const initialSearch = urlParams.get('search') || '';
+    const initialSort = (urlParams.get('sort') || 'name').toLowerCase();
+    const initialOrder = (urlParams.get('order') || 'asc').toLowerCase();
+    const initialView = (urlParams.get('view') || currentViewMode).toLowerCase();
+    const initialFilter = (urlParams.get('filter') || 'all').toLowerCase();
+
+    if (initialView === 'folder' || initialView === 'flat') {
+        currentViewMode = initialView;
+    }
+    currentQuickFilter = ['all', 'media', 'docs', 'code'].includes(initialFilter) ? initialFilter : 'all';
+    updateQuickFilterUI();
+
+    // Ensure view button state reflects restored mode before first render.
+    if (currentViewMode === 'flat') {
+        const btnFolder = document.getElementById('viewBtnFolder');
+        const btnFlat = document.getElementById('viewBtnFlat');
+        btnFlat?.classList.add('active', 'btn-light');
+        btnFlat?.classList.remove('btn-outline-light');
+        btnFolder?.classList.remove('active', 'btn-light');
+        btnFolder?.classList.add('btn-outline-light');
+    }
+
+    const searchInputInit = document.getElementById('searchInput');
+    if (searchInputInit) searchInputInit.value = initialSearch;
+    loadFiles(initialPage, initialPrefix, initialSearch, initialSort, initialOrder);
 
     // Search behavior: Trigger when the Search button is clicked OR when the user presses Enter in the search input
     const searchInputEl = document.getElementById('searchInput');
@@ -1201,6 +1411,77 @@ document.addEventListener('DOMContentLoaded', function () {
 
     // Delegate view and delete button clicks to avoid inline JS with unescaped data
     document.addEventListener('click', function (e) {
+        const actionBtn = e.target.closest('[data-action]');
+        if (actionBtn) {
+            const action = actionBtn.dataset.action;
+            if (action === 'upload-files') {
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+                document.getElementById('fileInput')?.click();
+            } else if (action === 'create-folder') {
+                createFolder();
+            } else if (action === 'create-file') {
+                createFile();
+            } else if (action === 'go-root') {
+                loadFiles(1, '');
+            } else if (action === 'expand-virtual') {
+                expandVirtualRows();
+            } else if (action === 'search') {
+                performSearch();
+            } else if (action === 'clear-search') {
+                clearSearch();
+            } else if (action === 'retry-load') {
+                loadFiles(parseInt(actionBtn.dataset.retryPage, 10) || 1, actionBtn.dataset.retryPrefix || '');
+            } else if (action === 'close-toast') {
+                actionBtn.closest('.toast-notification')?.remove();
+            }
+            return;
+        }
+
+        const quickFilterBtn = e.target.closest('[data-filter]');
+        if (quickFilterBtn) {
+            setQuickFilter(quickFilterBtn.dataset.filter || 'all');
+            return;
+        }
+
+        const viewModeBtn = e.target.closest('[data-view-mode]');
+        if (viewModeBtn) {
+            changeViewMode(viewModeBtn.dataset.viewMode);
+            return;
+        }
+
+        const navBtn = e.target.closest('[data-nav-prefix]');
+        if (navBtn) {
+            loadFiles(1, navBtn.dataset.navPrefix || '');
+            return;
+        }
+
+        const sortHeader = e.target.closest('[data-sort-field]');
+        if (sortHeader) {
+            toggleSort(sortHeader.dataset.sortField);
+            return;
+        }
+
+        const pageLink = e.target.closest('.page-link[data-page]');
+        if (pageLink) {
+            e.preventDefault();
+            loadFiles(
+                parseInt(pageLink.dataset.page, 10) || 1,
+                pageLink.dataset.prefix || '',
+                pageLink.dataset.search || '',
+                pageLink.dataset.sort || currentSort,
+                pageLink.dataset.order || currentOrder,
+                pageLink.dataset.token || ''
+            );
+            return;
+        }
+
+        const folderRow = e.target.closest('.folder-row');
+        if (folderRow && !e.target.closest('.delete-btn')) {
+            const folderPath = folderRow.dataset.folderPath;
+            if (folderPath) loadFiles(1, folderPath);
+            return;
+        }
+
         const vbtn = e.target.closest('.view-btn');
         if (vbtn) {
             const keyEnc = vbtn.dataset.keyEnc;
@@ -1220,12 +1501,11 @@ document.addEventListener('DOMContentLoaded', function () {
         }
 
         const cbtn = e.target.closest('.copy-btn');
-        console.log(cbtn);
         if (cbtn) {
             e.stopPropagation();
             const keyEnc = cbtn.dataset.keyEnc;
             if (!keyEnc) return;
-            const link = `${window.location.origin}/mbkbucket/view/${keyEnc}`;
+            const link = `${window.location.origin}${getViewUrl(keyEnc)}`;
             const fallbackCopy = () => {
                 try {
                     const ta = document.createElement('textarea');
@@ -1302,7 +1582,7 @@ function handleViewFile(key, filename, event) {
 function showPreviewModal(encodedKey, filename, extension, previewMode = 'auto') {
     const modal = document.getElementById('previewModal');
     if (!modal) {
-        window.open(`/mbkbucket/view/${encodedKey}`, '_blank', 'noopener,noreferrer');
+        window.open(getViewUrl(encodedKey), '_blank', 'noopener,noreferrer');
         return;
     }
 
@@ -1316,8 +1596,9 @@ function showPreviewModal(encodedKey, filename, extension, previewMode = 'auto')
     const fsBtn = document.getElementById('previewFullscreenBtn');
 
     titleEl.textContent = filename;
-    openBtn.href = `/mbkbucket/view/${encodedKey}`;
-    downloadBtn.href = `/mbkbucket/download/${encodedKey}`;
+    titleEl.title = filename;
+    openBtn.href = getViewUrl(encodedKey);
+    downloadBtn.href = getDownloadUrl(encodedKey);
     // Ensure downloaded file has the original filename
     downloadBtn.setAttribute('download', filename);
 
@@ -1345,7 +1626,7 @@ function showPreviewModal(encodedKey, filename, extension, previewMode = 'auto')
         dialog.classList.add('preview-compact');
         const img = document.createElement('img');
         img.className = 'preview-img';
-        img.src = `/mbkbucket/view/${encodedKey}`;
+        img.src = getViewUrl(encodedKey);
         img.alt = filename;
         img.onload = () => { };
         img.onerror = () => { contentEl.textContent = 'Could not load preview.'; };
@@ -1356,7 +1637,7 @@ function showPreviewModal(encodedKey, filename, extension, previewMode = 'auto')
         const video = document.createElement('video');
         video.className = 'preview-video';
         video.controls = true;
-        video.src = `/mbkbucket/view/${encodedKey}`;
+        video.src = getViewUrl(encodedKey);
         contentEl.innerHTML = '';
         contentEl.appendChild(video);
     } else if (effectiveMode === 'audio') {
@@ -1364,20 +1645,20 @@ function showPreviewModal(encodedKey, filename, extension, previewMode = 'auto')
         const audio = document.createElement('audio');
         audio.className = 'preview-audio';
         audio.controls = true;
-        audio.src = `/mbkbucket/view/${encodedKey}`;
+        audio.src = getViewUrl(encodedKey);
         contentEl.innerHTML = '';
         contentEl.appendChild(audio);
     } else if (effectiveMode === 'pdf') {
         dialog.classList.add('preview-large');
         const iframe = document.createElement('iframe');
         iframe.className = 'preview-iframe';
-        iframe.src = `/mbkbucket/view/${encodedKey}`;
+        iframe.src = getViewUrl(encodedKey);
         contentEl.innerHTML = '';
         contentEl.appendChild(iframe);
     } else if (effectiveMode === 'text') {
         dialog.classList.add('preview-compact');
         
-        fetch(`/mbkbucket/view/${encodedKey}`)
+        fetch(getViewUrl(encodedKey))
             .then(r => r.text())
             .then(text => {
                 contentEl.innerHTML = '';
@@ -1388,7 +1669,7 @@ function showPreviewModal(encodedKey, filename, extension, previewMode = 'auto')
             })
             .catch(err => { contentEl.textContent = 'Could not load preview.'; });
     } else {
-        contentEl.innerHTML = `<div style="text-align:center;">Preview not available for this file type. <a href="/mbkbucket/download/${encodedKey}">Download</a></div>`;
+        contentEl.innerHTML = `<div style="text-align:center;">Preview not available for this file type. <a href="${getDownloadUrl(encodedKey)}">Download</a></div>`;
     }
 
     // Show modal
@@ -1567,7 +1848,7 @@ function setupSelection() {
             if (!confirm('Delete selected files? This cannot be undone.')) return;
             const keys = Array.from(selected);
             try {
-                const resp = await fetch('/mbkbucket/delete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ keys }) });
+                const resp = await fetch(withBucketUrl('/mbkbucket/delete'), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ keys }) });
                 const json = await resp.json();
                 if (json.success) {
                     showAlert('Deleted selected files', 'success');
@@ -1590,7 +1871,7 @@ async function createFolder() {
     if (!safe) return showAlert('Invalid folder name', 'error');
 
     try {
-        const resp = await fetch('/mbkbucket/create-folder', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prefix: currentPrefix, folderName: safe }) });
+        const resp = await fetch(withBucketUrl('/mbkbucket/create-folder'), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prefix: currentPrefix, folderName: safe }) });
         const json = await resp.json();
         if (json.success) {
             showAlert('Folder created', 'success');
@@ -1626,7 +1907,7 @@ async function createFile() {
     formData.append('prefix', currentPrefix);
     
     try {
-        const resp = await fetch('/mbkbucket/upload', {
+        const resp = await fetch(withBucketUrl('/mbkbucket/upload'), {
             method: 'POST',
             body: formData
         });
@@ -1815,4 +2096,4 @@ async function createFile() {
         };
     };
 
-})(window);
+})(window);