mbkbucket 1.3.0 → 1.5.0

package/public/bucketadmin.js

@@ -8,9 +8,35 @@ let currentViewMode = 'folder'; // 'folder' or 'flat'
 let pageFiles = [];
 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.
 
+function stripApiPrefixFromPath(path, apiPrefix = '') {
+    const normalizedPath = String(path || '').replace(/^\/+/, '');
+    const normalizedApiPrefix = String(apiPrefix || '').replace(/^\/+/, '').replace(/\/+$/, '');
+
+    if (!normalizedApiPrefix) return normalizedPath;
+    if (normalizedPath === normalizedApiPrefix || normalizedPath === `${normalizedApiPrefix}/`) return '';
+    if (normalizedPath.startsWith(`${normalizedApiPrefix}/`)) {
+        return normalizedPath.slice(normalizedApiPrefix.length + 1);
+    }
+
+    return normalizedPath;
+}
+
+function toApiFolderPath(prefix = '', apiPrefix = '') {
+    const uiPrefix = String(prefix || '').replace(/^\/+/, '');
+    const normalizedApiPrefix = String(apiPrefix || '').replace(/^\/+/, '').replace(/\/+$/, '');
+
+    if (!uiPrefix) return '';
+    if (!normalizedApiPrefix) return uiPrefix;
+    if (uiPrefix === normalizedApiPrefix || uiPrefix.startsWith(`${normalizedApiPrefix}/`)) {
+        return uiPrefix;
+    }
+    return `${normalizedApiPrefix}/${uiPrefix}`;
+}
+
 // Show alert message (Toast)
 function showAlert(message, type = 'success') {
     const container = document.getElementById('toast-container');
@@ -51,7 +77,7 @@ 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()" style="background:none; border:none; color:white; cursor:pointer; opacity:0.8; font-size:1.2rem;">&times;</button>
+        <button onclick="this.parentElement.remove()" class="toast-close-btn">&times;</button>
     `;
 
     container.appendChild(toast);
@@ -82,8 +108,9 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
     try {
         const parts = [];
         if (prefix) {
+            const folderPathForUrl = toApiFolderPath(prefix, currentApiPrefix);
             // preserve slashes in folder param for readability: encode then restore slashes
-            const folderEncoded = encodeURIComponent(prefix).replace(/%2F/g, '/');
+            const folderEncoded = encodeURIComponent(folderPathForUrl).replace(/%2F/g, '/');
             parts.push(`folder=${folderEncoded}`);
         }
         if (page && page > 1) parts.push(`page=${page}`);
@@ -139,6 +166,7 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
         
         // Store next token
         currentNextToken = data.nextContinuationToken || null;
+        currentApiPrefix = data.prefix || '';
 
         // Update stats
         if (data.totalFiles === -1) {
@@ -151,7 +179,7 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
             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';
+            const label = prefix || bucketAppName || 'app';
             filterInfo.textContent = `Filtered by folder: ${label}`;
             fileListTitle.innerHTML = `Files <span class="text-muted">in: </span><span class="badge bg-info">${label}</span>`;
         }
@@ -176,12 +204,16 @@ async function loadFiles(page = 1, prefix = '', search = '', sort = currentSort,
             pageFiles = data.files || [];
 
             if (data.mode === 'optimized') {
-                 pageFolders = data.folders || [];
+                  pageFolders = (data.folders || []).map(folder => stripApiPrefixFromPath(folder, currentApiPrefix)).filter(Boolean);
             } else {
-                 pageFolders = search ? [] : extractFoldersAtCurrentLevel(data.files, prefix);
+                pageFolders = search
+                    ? []
+                    : extractFoldersAtCurrentLevel(data.files, currentApiPrefix || prefix)
+                      .map(folder => stripApiPrefixFromPath(folder, currentApiPrefix))
+                      .filter(Boolean);
             }
 
-            renderFilesTable(pageFiles, pageFolders, prefix);
+              renderFilesTable(pageFiles, pageFolders, prefix, currentApiPrefix);
             renderPagination(data);
             paginationContainer.style.display = 'block';
         }
@@ -230,7 +262,7 @@ function toggleSort(field) {
             return 0;
         });
 
-        renderFilesTable(pageFiles, pageFolders, currentPrefix);
+        renderFilesTable(pageFiles, pageFolders, currentPrefix, currentApiPrefix);
     }
 }
 
@@ -299,7 +331,7 @@ function changeViewMode(mode) {
     }
 
     // Re-render with existing data
-    renderFilesTable(pageFiles, pageFolders, currentPrefix);
+    renderFilesTable(pageFiles, pageFolders, currentPrefix, currentApiPrefix);
 }
 
 // Extract folders that match a search query from file paths
@@ -331,7 +363,7 @@ function extractMatchingFolders(files, search) {
 }
 
 // Render files table
-function renderFilesTable(files, folders = [], prefix = '') {
+function renderFilesTable(files, folders = [], prefix = '', apiPrefix = '') {
     // Determine which files/folders to show based on view mode
     let displayFiles = [];
     let displayFolders = [];
@@ -347,6 +379,9 @@ function renderFilesTable(files, folders = [], prefix = '') {
             // 1. Show files where FILENAME matches the search term
             const searchLower = currentSearch.toLowerCase();
             displayFiles = files.filter(f => {
+                // Skip folder marker objects (keys ending with /)
+                if (f.Key.endsWith('/')) return false;
+                
                 const fileName = f.Key.split('/').pop();
                 return fileName.toLowerCase().includes(searchLower);
             });
@@ -355,14 +390,19 @@ function renderFilesTable(files, folders = [], prefix = '') {
             displayFolders = extractMatchingFolders(files, currentSearch);
         } else {
             // Normal Flat Mode: Show all files, no folders
-            displayFiles = files;
+            // Filter out folder marker objects (keys ending with /)
+            displayFiles = files.filter(f => !f.Key.endsWith('/'));
             displayFolders = [];
         }
     } else {
         // Normal Folder View logic
         // Filter files to show only those at current level (not in subfolders)
         displayFiles = files.filter(file => {
-            const relativePath = prefix ? file.Key.substring(prefix.length + (prefix.endsWith('/') ? 0 : 1)) : file.Key;
+            // 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;
             // File is at current level if it has no '/' in relative path
             return !relativePath.includes('/');
         });
@@ -379,7 +419,7 @@ function renderFilesTable(files, folders = [], prefix = '') {
         <div class="breadcrumb-nav">
           <div class="breadcrumb-item">
             <i class="fas fa-home"></i>
-            <span class="breadcrumb-link" onclick="loadFiles(1, '')" title="Go to root">Root</span>
+            <span class="breadcrumb-link" onclick="loadFiles(1, '')" title="Go to ${bucketAppName || 'app'}">${bucketAppName || 'app'}</span>
           </div>
       `;
 
@@ -475,7 +515,7 @@ function renderFilesTable(files, folders = [], prefix = '') {
 
         // If in flat mode, we might want to show the folder path more prominently
         const pathDisplay = (currentViewMode === 'flat' && folderPath && folderPath !== prefix + (prefix ? '/' : ''))
-            ? `<div style="font-size: 0.75rem; color: var(--gray-color-ml); margin-bottom:2px;">
+            ? `<div class="file-path-display">
              <i class="fas fa-folder" style="margin-right:4px; opacity:0.5;"></i> ${folderPath}
            </div>`
             : '';
@@ -528,24 +568,25 @@ function renderFilesTable(files, folders = [], prefix = '') {
 
     if (allRows === '') {
         document.getElementById('fileListContainer').innerHTML = `
+                ${breadcrumb}
         <div class="empty-state">
-          <div style="margin-bottom: 1.5rem; position: relative; display: inline-block;">
+          <div class="empty-state-illustration">
             <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>
+            <i class="fas fa-search empty-state-search-icon"></i>
           </div>
           <h4>No files found</h4>
-          <p style="max-width: 400px; margin: 0 auto 1.5rem; color: var(--text-muted-color-ml);">
+          <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.'}
           </p>
-          <div style="display:flex; gap:0.75rem; justify-content:center; flex-wrap: wrap;">
+          <div class="empty-state-actions">
             <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> New Folder
             </button>
-            ${prefix ? `<button class="btn btn-light" onclick="loadFiles(1, '')">
-              <i class="fas fa-home"></i> Go to Root
+                        ${prefix ? `<button class="btn btn-light" onclick="loadFiles(1, '')">
+                            <i class="fas fa-home"></i> Go to ${bucketAppName || 'app'}
             </button>` : ''}
           </div>
         </div>
@@ -555,16 +596,16 @@ function renderFilesTable(files, folders = [], prefix = '') {
 
     // Sort icon helper
     const getSortIcon = (field) => {
-        if (currentSort !== field) return '<i class="fas fa-sort" style="color:var(--gray-color-ml); opacity:0.3; font-size:0.8rem; margin-left:0.5rem;"></i>';
+        if (currentSort !== field) return '<i class="fas fa-sort sort-icon sort-icon-inactive"></i>';
         return currentOrder === 'asc'
-            ? '<i class="fas fa-sort-up" style="color:var(--primary-color-ml); font-size:0.9rem; margin-left:0.5rem;"></i>'
-            : '<i class="fas fa-sort-down" style="color:var(--primary-color-ml); font-size:0.9rem; margin-left:0.5rem;"></i>';
+            ? '<i class="fas fa-sort-up sort-icon sort-icon-active"></i>'
+            : '<i class="fas fa-sort-down sort-icon sort-icon-active"></i>';
     };
 
     document.getElementById('fileListContainer').innerHTML = `
       ${breadcrumb}
       <div class="table-responsive">
-        <div id="bulkActionsBar" style="display:none; padding: 0.5rem; border-bottom: 1px solid var(--gray-light-color-ml); background: var(--light-color-ml);">
+        <div id="bulkActionsBar" class="bulk-actions-bar">
           <span id="bulkSelectedCount">0 selected</span>
           <div style="float: right;">
             <button class="btn btn-danger btn-sm" id="bulkDeleteBtn" disabled>
@@ -823,7 +864,7 @@ function createId() { return Date.now().toString(36) + '-' + Math.random().toStr
 
 function addFilesToQueue(fileList) {
     for (const f of Array.from(fileList)) {
-        uploadQueue.push({ id: createId(), file: f, status: 'queued', progress: 0 });
+        uploadQueue.push({ id: createId(), file: f, status: 'queued', progress: 0, uploadedBytes: 0, uploadRate: 0 });
     }
     renderUploadQueue();
 }
@@ -839,28 +880,46 @@ function renderUploadQueue() {
         return;
     }
 
-    container.innerHTML = uploadQueue.map(item => `
+    // Local size formatter so it's always in scope regardless of IIFE load order
+    function fmtSize(bytes) {
+        if (!bytes || bytes === 0) return '0 B';
+        const units = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+        return (bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1) + ' ' + units[i];
+    }
+
+    container.innerHTML = uploadQueue.map(item => {
+        let statusText;
+        if (item.status === 'uploading') {
+            const pct = Math.round(item.progress || 0);
+            statusText = fmtSize(item.uploadedBytes || 0) + ' / ' + fmtSize(item.file.size) + ' (' + pct + '%)';
+            if (item.uploadRate > 0) statusText += ' \u00b7 ' + fmtSize(item.uploadRate) + '/s';
+        } else {
+            statusText = item.status;
+        }
+        const actionBtn = item.status === 'uploading'
+            ? `<button class="btn btn-sm btn-outline-secondary cancel-upload" data-id="${item.id}"><i class="fas fa-ban"></i></button>`
+            : `<button class="btn btn-sm btn-danger remove-queued" data-id="${item.id}"><i class="fas fa-trash"></i></button>`;
+        return `
       <div class="upload-item" data-id="${item.id}">
         <div class="meta">
-          <div style="display:flex; align-items:center; gap:0.75rem; min-width:0; width:100%; margin-bottom:5px;">
+          <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="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 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>
-          <div style="display:flex; justify-content:space-between; align-items:center; gap:0.5rem;">
-            <small class="text-muted status">${item.status}</small>
-            <div class="controls">
-              ${item.status === 'uploading' ? `<button class="btn btn-sm btn-outline-secondary cancel-upload" data-id="${item.id}"><i class="fas fa-ban"></i></button>` : `<button class="btn btn-sm btn-danger remove-queued" data-id="${item.id}"><i class="fas fa-trash"></i></button>`}
-            </div>
+          <div class="upload-item-status-row">
+            <small class="text-muted status">${statusText}</small>
+            <div class="controls">${actionBtn}</div>
           </div>
         </div>
-      </div>
-    `).join('');
+      </div>`;
+    }).join('');
 
     // Wire up controls
     document.querySelectorAll('.remove-queued').forEach(btn => btn.addEventListener('click', function (e) {
@@ -870,15 +929,27 @@ function renderUploadQueue() {
         renderUploadQueue();
     }));
 
-    document.querySelectorAll('.cancel-upload').forEach(btn => btn.addEventListener('click', function (e) {
+    document.querySelectorAll('.cancel-upload').forEach(btn => btn.addEventListener('click', async function (e) {
         const id = this.dataset.id;
         const handle = xhrMap.get(id);
-        if (handle && handle.abort) {
-            handle.abort();
-        } else if (handle && handle.xhr) {
-            handle.xhr.abort();
-        }
         const entry = uploadQueue.find(i => i.id === id);
+
+        // Abort in-flight fetch
+        if (handle && handle.controller) handle.controller.abort();
+        // Abort legacy XHR (small file path)
+        if (handle && handle.xhr) handle.xhr.abort();
+
+        // Tell S3 to discard the incomplete multipart upload
+        if (entry && entry.s3UploadId && entry.s3Key) {
+            try {
+                await fetch('/mbkbucket/upload-abort', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ uploadId: entry.s3UploadId, key: entry.s3Key })
+                });
+            } catch (_) { /* best-effort */ }
+        }
+
         if (entry) { entry.status = 'cancelled'; entry.progress = 0; }
         xhrMap.delete(id);
         renderUploadQueue();
@@ -913,41 +984,90 @@ async function startUploadEntry(entry) {
     const file = entry.file;
     try {
         if (file.size > CHUNK_SIZE) {
-            // chunked upload
-            const uploadId = createId();
-            entry.uploadId = uploadId;
+            // ---------------------------------------------------------------
+            // S3 Multipart Upload
+            // Step 1 — Initiate: get uploadId + key from the server
+            // ---------------------------------------------------------------
+            const initResp = await fetch('/mbkbucket/upload-init', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    fileName: file.name,
+                    prefix: currentPrefix,
+                    contentType: file.type || 'application/octet-stream'
+                })
+            });
+            const initJson = await initResp.json();
+            if (!initResp.ok || !initJson.success) throw new Error(initJson.error || 'Failed to initiate upload');
+
+            const { uploadId, key } = initJson;
+            entry.s3UploadId = uploadId;  // stored so cancel handler can abort
+            entry.s3Key = key;
+
+            // ---------------------------------------------------------------
+            // Step 2 — Upload parts (1-based partNumber, min 5 MB except last)
+            // ---------------------------------------------------------------
             const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+            const parts = []; // [{ partNumber, ETag }]
             let uploadedBytes = 0;
+
             for (let i = 0; i < totalChunks; i++) {
-                if (entry.status === 'cancelled') throw new Error('Upload cancelled');
+                const _chunkStart = Date.now();
+                if (entry.status === 'cancelled') {
+                    // Clean up on S3
+                    await fetch('/mbkbucket/upload-abort', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ uploadId, key })
+                    }).catch(() => {});
+                    throw new Error('Upload cancelled');
+                }
+
                 const start = i * CHUNK_SIZE;
-                const end = Math.min(file.size, start + CHUNK_SIZE);
-                const blob = file.slice(start, end);
+                const blob = file.slice(start, Math.min(file.size, start + CHUNK_SIZE));
+                const partNumber = i + 1; // S3 parts are 1-based
 
                 const fd = new FormData();
                 fd.append('chunk', blob, file.name);
                 fd.append('uploadId', uploadId);
-                fd.append('fileName', file.name);
-                fd.append('chunkIndex', String(i));
-                fd.append('totalChunks', String(totalChunks));
+                fd.append('key', key);
+                fd.append('partNumber', String(partNumber));
 
                 const controller = new AbortController();
-                xhrMap.set(entry.id, { controller });
+                xhrMap.set(entry.id, { controller, s3UploadId: uploadId, s3Key: key });
 
-                const resp = await fetch('/mbkbucket/upload-chunk', { method: 'POST', body: fd, signal: controller.signal });
-                if (!resp.ok) throw new Error('Chunk upload failed');
+                const chunkResp = await fetch('/mbkbucket/upload-chunk', {
+                    method: 'POST',
+                    body: fd,
+                    signal: controller.signal
+                });
+                const chunkJson = await chunkResp.json();
+                if (!chunkResp.ok || !chunkJson.success) throw new Error(chunkJson.error || `Part ${partNumber} upload failed`);
+
+                parts.push({ partNumber: chunkJson.partNumber, ETag: chunkJson.ETag });
                 uploadedBytes += blob.size;
-                entry.progress = (uploadedBytes / file.size) * 95; // up to 95% until assembly
+                const _chunkDuration = (Date.now() - _chunkStart) / 1000;
+                entry.uploadRate = _chunkDuration > 0 ? blob.size / _chunkDuration : 0;
+                entry.uploadedBytes = uploadedBytes;
+                entry.progress = (uploadedBytes / file.size) * 95; // reserve last 5% for complete call
                 renderUploadQueue();
             }
 
-            // complete
-            const completeResp = await fetch('/mbkbucket/upload-complete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ uploadId: entry.uploadId, fileName: file.name, prefix: currentPrefix, contentType: file.type || 'application/octet-stream' }) });
+            // ---------------------------------------------------------------
+            // Step 3 — Complete: assemble all parts on S3
+            // ---------------------------------------------------------------
+            const completeResp = await fetch('/mbkbucket/upload-complete', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ uploadId, key, parts })
+            });
             const completeJson = await completeResp.json();
-            if (!completeResp.ok || !completeJson.success) throw new Error(completeJson.error || 'Assemble failed');
+            if (!completeResp.ok || !completeJson.success) throw new Error(completeJson.error || 'Failed to complete upload');
 
-            entry.status = 'done'; entry.progress = 100; xhrMap.delete(entry.id); renderUploadQueue();
-            showAlert('File uploaded successfully', 'success');
+            entry.status = 'done'; entry.progress = 100;
+            xhrMap.delete(entry.id);
+            renderUploadQueue();
+            showAlert(`${file.name} uploaded successfully`, 'success');
             loadFiles(currentPage, currentPrefix);
         } else {
             // small file XHR
@@ -960,9 +1080,20 @@ async function startUploadEntry(entry) {
 
             xhr.upload.addEventListener('progress', (e) => {
                 if (!e.lengthComputable) return;
+                const _now = Date.now();
+                const _dt = (_now - (entry._rateLastTime || _now)) / 1000;
+                const _db = e.loaded - (entry._rateLastBytes || 0);
+                if (_dt > 0.2) {
+                    entry.uploadRate = _db / _dt;
+                    entry._rateLastTime = _now;
+                    entry._rateLastBytes = e.loaded;
+                }
+                entry.uploadedBytes = e.loaded;
                 entry.progress = (e.loaded / e.total) * 100;
                 renderUploadQueue();
             });
+            entry._rateLastTime = Date.now();
+            entry._rateLastBytes = 0;
 
             xhr.addEventListener('load', () => {
                 try {
@@ -990,7 +1121,16 @@ async function startUploadEntry(entry) {
         }
     } catch (err) {
         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', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ uploadId: entry.s3UploadId, key: entry.s3Key })
+            }).catch(() => {});
+        }
         entry.status = entry.status === 'cancelled' ? 'cancelled' : 'error';
+        xhrMap.delete(entry.id);
         renderUploadQueue();
         showAlert('Upload failed: ' + (err.message || 'unknown'), 'error');
     }
@@ -1036,7 +1176,7 @@ document.addEventListener('DOMContentLoaded', function () {
     
     // 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 || '';
+    const initialPrefix = urlParams.get('folder') || urlParams.get('prefix') || '';
     const initialPage = parseInt(urlParams.get('page')) || 1;
     loadFiles(initialPage, initialPrefix);
 
@@ -1079,6 +1219,37 @@ document.addEventListener('DOMContentLoaded', function () {
             return;
         }
 
+        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 fallbackCopy = () => {
+                try {
+                    const ta = document.createElement('textarea');
+                    ta.value = link;
+                    ta.style.position = 'fixed';
+                    ta.style.opacity = '0';
+                    document.body.appendChild(ta);
+                    ta.select();
+                    document.execCommand('copy');
+                    document.body.removeChild(ta);
+                    showAlert('Link copied to clipboard!', 'success');
+                } catch {
+                    showAlert('Failed to copy link', 'error');
+                }
+            };
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                navigator.clipboard.writeText(link).then(() => {
+                    showAlert('Link copied to clipboard!', 'success');
+                }).catch(fallbackCopy);
+            } else {
+                fallbackCopy();
+            }
+            return;
+        }
 
     });
 });
@@ -1103,25 +1274,32 @@ function handleViewFile(key, filename, event) {
     const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico'];
     const videoTypes = ['mp4', 'webm', 'ogg'];
 
-    // Use inline preview modal for supported types
+    // Determine preview mode from extension groups
     const previewableImage = imageTypes.includes(extension);
     const previewableVideo = videoTypes.includes(extension);
     const previewableAudio = ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a'].includes(extension);
     const previewablePdf = extension === 'pdf';
     const previewableText = ['txt', 'md', 'json', 'xml', 'csv', 'log', 'js', 'ts', 'html', 'htm', 'css', 'py', 'java', 'cpp', 'c', 'h', 'cs', 'rb', 'go', 'rs', 'sql', 'sh', 'bat', 'ps1', 'yaml', 'yml', 'toml', 'ini', 'conf'].includes(extension);
 
+    let previewMode = 'unsupported';
+    if (previewableImage) previewMode = 'image';
+    else if (previewableVideo) previewMode = 'video';
+    else if (previewableAudio) previewMode = 'audio';
+    else if (previewablePdf) previewMode = 'pdf';
+    else if (previewableText) previewMode = 'text';
+
     // Build an encoded key safely (if key already appears encoded, don't double-encode)
     const encodedKey = (key && key.includes('%')) ? key : encodeURIComponent(key || filename);
 
     // Show the inline preview
-    showPreviewModal(encodedKey, filename, extension);
+    showPreviewModal(encodedKey, filename, extension, previewMode);
     return false;
 }
 
 // Function to get file type category
 
 // Preview modal helpers
-function showPreviewModal(encodedKey, filename, extension) {
+function showPreviewModal(encodedKey, filename, extension, previewMode = 'auto') {
     const modal = document.getElementById('previewModal');
     if (!modal) {
         window.open(`/mbkbucket/view/${encodedKey}`, '_blank', 'noopener,noreferrer');
@@ -1153,9 +1331,17 @@ function showPreviewModal(encodedKey, filename, extension) {
     const videoTypes = ['mp4', 'webm', 'ogg'];
     const audioTypes = ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a'];
     const textTypes = ['txt', 'md', 'json', 'xml', 'csv', 'log', 'js', 'ts', 'html', 'htm', 'css', 'py', 'java', 'cpp', 'c', 'h', 'cs', 'rb', 'go', 'rs', 'sql', 'sh', 'bat', 'ps1', 'yaml', 'yml', 'toml', 'ini', 'conf'];
+    const effectiveMode = previewMode === 'auto'
+        ? (imgTypes.includes(extension) ? 'image'
+            : videoTypes.includes(extension) ? 'video'
+                : audioTypes.includes(extension) ? 'audio'
+                    : extension === 'pdf' ? 'pdf'
+                        : textTypes.includes(extension) ? 'text'
+                            : 'unsupported')
+        : previewMode;
 
     // Render content and adjust dialog size
-    if (imgTypes.includes(extension)) {
+    if (effectiveMode === 'image') {
         dialog.classList.add('preview-compact');
         const img = document.createElement('img');
         img.className = 'preview-img';
@@ -1165,7 +1351,7 @@ function showPreviewModal(encodedKey, filename, extension) {
         img.onerror = () => { contentEl.textContent = 'Could not load preview.'; };
         contentEl.innerHTML = '';
         contentEl.appendChild(img);
-    } else if (videoTypes.includes(extension)) {
+    } else if (effectiveMode === 'video') {
         dialog.classList.add('preview-large');
         const video = document.createElement('video');
         video.className = 'preview-video';
@@ -1173,7 +1359,7 @@ function showPreviewModal(encodedKey, filename, extension) {
         video.src = `/mbkbucket/view/${encodedKey}`;
         contentEl.innerHTML = '';
         contentEl.appendChild(video);
-    } else if (audioTypes.includes(extension)) {
+    } else if (effectiveMode === 'audio') {
         dialog.classList.add('preview-compact');
         const audio = document.createElement('audio');
         audio.className = 'preview-audio';
@@ -1181,14 +1367,14 @@ function showPreviewModal(encodedKey, filename, extension) {
         audio.src = `/mbkbucket/view/${encodedKey}`;
         contentEl.innerHTML = '';
         contentEl.appendChild(audio);
-    } else if (extension === 'pdf') {
+    } else if (effectiveMode === 'pdf') {
         dialog.classList.add('preview-large');
         const iframe = document.createElement('iframe');
         iframe.className = 'preview-iframe';
         iframe.src = `/mbkbucket/view/${encodedKey}`;
         contentEl.innerHTML = '';
         contentEl.appendChild(iframe);
-    } else if (textTypes.includes(extension)) {
+    } else if (effectiveMode === 'text') {
         dialog.classList.add('preview-compact');
         
         fetch(`/mbkbucket/view/${encodedKey}`)

package/views/bucket.handlebars

@@ -63,12 +63,12 @@
         /* Removed unused sidebar/menu styles to reduce CSS size. */
 
         .logo {
-            font-size: 1.25rem;
+            font-size: 2rem;
             font-weight: 700;
             color: var(--primary-color-ml);
             display: flex;
             align-items: center;
-            gap: .5rem
+            gap: .3rem
         }
 
         .logo img {
@@ -205,7 +205,7 @@
         <nav class="top-nav">
             <div class="logo">
                 <img onclick="window.location='/'" src="/icon.svg" alt="Logo">
-                <span onclick="window.location='/'" style="cursor:pointer;">MBKBucket</span>
+                <span onclick="window.location='/'" style="cursor:pointer;">BKBucket</span>
             </div>
 
             {{> profilemenu }}

package/views/bucketadmin_alerts.handlebars

@@ -0,0 +1,15 @@
+{{#if message}}
+<div class="alert alert-success alert-dismissible fade show" role="alert" id="successAlert">
+  <i class="fas fa-check-circle"></i>
+  <span id="successMessage">{{message}}</span>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">&times;</button>
+</div>
+{{/if}}
+
+{{#if error}}
+<div class="alert alert-danger alert-dismissible fade show" role="alert" id="errorAlert">
+  <i class="fas fa-exclamation-triangle"></i>
+  <span id="errorMessage">{{error}}</span>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">&times;</button>
+</div>
+{{/if}}