mbkbucket 3.8.3 → 4.0.1

package/lib/public/bucketadmin.js

@@ -20,7 +20,7 @@
   let currentOrder = 'asc';
   let currentViewMode = localStorage.getItem('mbk_view_mode') || 'grid'; // 'grid' or 'list'
   let currentQuickFilter = 'all'; // 'all', 'media', 'docs', 'code', 'starred'
-  let showThumbnails = localStorage.getItem('mbk_show_thumbnails') === 'true'; // Fast Mode by default (saves Vercel resources & tokens)
+  let showThumbnails = localStorage.getItem('mbk_show_thumbnails') === 'true'; // Fast Mode by default
   let thumbObserver = null;
   let pageFiles = [];
   let pageFolders = [];
@@ -28,6 +28,7 @@
   let currentNextToken = null;
   let selectedFiles = new Set();
   let starredFiles = new Set(JSON.parse(localStorage.getItem('mbk_starred_keys') || '[]'));
+  let currentPreviewKey = '';
 
   // Upload State
   let uploadQueue = [];
@@ -36,6 +37,7 @@
   // DOM Elements & Config
   const bucketAppData = document.getElementById('bucketAppData');
   const bucketAppName = bucketAppData?.dataset.appName || '';
+  const isPublicViewEnabled = bucketAppData?.dataset.publicViewEnabled === 'true';
   const urlParams = new URLSearchParams(window.location.search);
   const selectedBucket = urlParams.get('bucket') || '';
   let activeBucket = selectedBucket;
@@ -46,7 +48,7 @@
   // File categories & extensions
   const MEDIA_EXTS = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico', 'mp4', 'webm', 'ogg', 'avi', 'mov', 'mp3', 'wav', 'flac', 'aac', 'm4a']);
   const DOC_EXTS = new Set(['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'md', 'csv', 'rtf']);
-  const CODE_EXTS = new Set(['js', 'ts', 'jsx', 'tsx', 'html', 'htm', 'css', 'scss', 'php', 'py', 'java', 'cpp', 'c', 'h', 'cs', 'rb', 'go', 'rs', 'sql', 'sh', 'bat', 'ps1', 'yaml', 'yml', 'toml', 'ini', 'conf', 'json', 'xml', 'log']);
+  const CODE_EXTS = new Set(['js', 'ts', 'jsx', 'tsx', 'html', 'htm', 'css', 'scss', 'php', 'py', 'java', 'cpp', 'c', 'h', 'cs', 'rb', 'go', 'rs', 'sql', 'sh', 'bat', 'ps1', 'yaml', 'yml', 'toml', 'ini', 'conf', 'json', 'xml', 'log', 'env']);
 
   const FILE_TYPES = {
     pdf:   { color: 'var(--red)',     bg: 'var(--red-lt)',    label: 'PDF' },
@@ -85,6 +87,8 @@
     media: '<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="12" height="12" rx="2"/><circle cx="5.5" cy="5.5" r="1.5"/><path d="M14 10l-4-4-6 6"/></svg>',
     docs: '<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 2h7l4 4v8a1 1 0 01-1 1H3a1 1 0 01-1-1V3a1 1 0 011-1z"/><path d="M10 2v4h4"/></svg>',
     code: '<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 5L2 8l3 3M11 5l3 3-3 3M9 3L7 13"/></svg>',
+    upload: '<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 11v3H2v-3"/><path d="M11 6L8 3 5 6"/><line x1="8" y1="3" x2="8" y2="11"/></svg>',
+    download: '<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 11v3H2v-3"/><path d="M5 8l3 3 3-3"/><line x1="8" y1="2" x2="8" y2="11"/></svg>',
     more: '<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><circle cx="8" cy="3" r="1.2"/><circle cx="8" cy="8" r="1.2"/><circle cx="8" cy="13" r="1.2"/></svg>'
   };
 
@@ -121,7 +125,7 @@
     if (!dateStr) return '—';
     const d = new Date(dateStr);
     if (isNaN(d.getTime())) return String(dateStr);
-    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit' });
   }
 
   function withBucketUrl(url) {
@@ -134,6 +138,10 @@
     return withBucketUrl(`/mbkbucket/view/${encodeURIComponent(key)}`);
   }
 
+  function getPublicViewUrl(key) {
+    return withBucketUrl(`/mbkbucket/p_view/${encodeURIComponent(key)}`);
+  }
+
   function getDownloadUrl(key) {
     return withBucketUrl(`/mbkbucket/download/${encodeURIComponent(key)}`);
   }
@@ -158,6 +166,10 @@
     return CODE_EXTS.has(ext) || ['txt', 'md', 'csv', 'log', 'json', 'xml', 'env'].includes(ext);
   }
 
+  function isMarkdown(fileName) {
+    return getFileExt(fileName) === 'md';
+  }
+
   function isPdf(fileName) {
     return getFileExt(fileName) === 'pdf';
   }
@@ -208,6 +220,22 @@
     return Array.from(folderSet).sort();
   }
 
+  function renderMarkdownToHtml(mdText) {
+    let html = escapeHtml(mdText);
+    html = html.replace(/```([a-zA-Z0-9_+-]*)\n([\s\S]*?)```/g, (_m, _lang, code) => `<pre><code>${code}</code></pre>`);
+    html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+    html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
+    html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
+    html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
+    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+    html = html.replace(/^\> (.*$)/gim, '<blockquote>$1</blockquote>');
+    html = html.replace(/^\s*[\-\*] (.*$)/gim, '<li>$1</li>');
+    html = html.replace(/(<li>.*<\/li>)/gim, '<ul>$1</ul>');
+    html = html.replace(/\n\n/g, '<br><br>');
+    return `<div class="rendered-markdown">${html}</div>`;
+  }
+
   function syncStateUrl() {
     try {
       const parts = [];
@@ -255,6 +283,70 @@
     }, 4000);
   }
 
+  // Live Health Check
+  async function checkConnectionHealth(silent = true) {
+    const healthBadge = document.getElementById('topHealthBadge');
+    const healthText = document.getElementById('topHealthText');
+    const latencyTag = document.getElementById('storageLatency');
+
+    if (healthBadge) {
+      healthBadge.className = 'health-status-badge checking';
+      if (healthText) healthText.textContent = 'Checking...';
+    }
+
+    const startTime = Date.now();
+    try {
+      const response = await fetch(withBucketUrl('/mbkbucket/api/health'));
+      const data = await response.json();
+      const latency = data.responseTime || (Date.now() - startTime);
+
+      if (data.status === 'healthy' || data.success) {
+        if (healthBadge) {
+          healthBadge.className = 'health-status-badge healthy';
+          if (healthText) healthText.textContent = 'Healthy';
+        }
+        if (latencyTag) latencyTag.textContent = `${latency}ms`;
+        if (!silent) showToast(`Storage connection healthy (${latency}ms)`, 'success');
+      } else {
+        if (healthBadge) {
+          healthBadge.className = 'health-status-badge unhealthy';
+          if (healthText) healthText.textContent = 'Unhealthy';
+        }
+        if (latencyTag) latencyTag.textContent = 'err';
+        if (!silent) showToast(`Connection error: ${data.error || 'Check configuration'}`, 'error');
+      }
+    } catch (err) {
+      if (healthBadge) {
+        healthBadge.className = 'health-status-badge unhealthy';
+        if (healthText) healthText.textContent = 'Offline';
+      }
+      if (latencyTag) latencyTag.textContent = 'offline';
+      if (!silent) showToast(`Connection test failed: ${err.message}`, 'error');
+    }
+  }
+
+  // Batch Selection System
+  function updateBatchBar() {
+    const bar = document.getElementById('batchActionBar');
+    const countEl = document.getElementById('batchSelectedCount');
+    if (!bar) return;
+
+    const count = selectedFiles.size;
+    if (count > 0) {
+      bar.style.display = 'block';
+      if (countEl) countEl.textContent = count;
+    } else {
+      bar.style.display = 'none';
+    }
+  }
+
+  function clearBatchSelection() {
+    selectedFiles.clear();
+    document.querySelectorAll('.file-select-cb').forEach(cb => { cb.checked = false; });
+    document.querySelectorAll('.fm-item.is-selected').forEach(item => { item.classList.remove('is-selected'); });
+    updateBatchBar();
+  }
+
   // Tree Renderer
   function renderTree() {
     const treeEl = document.getElementById('fm-tree');
@@ -366,13 +458,11 @@
   function getFilteredFiles() {
     let list = (pageFiles || []).filter(f => !String(f.Key || '').endsWith('/'));
 
-    // Search filter
     if (currentSearch) {
       const q = currentSearch.toLowerCase();
       list = list.filter(f => getBaseName(f.Key).toLowerCase().includes(q));
     }
 
-    // Quick filter
     if (currentQuickFilter === 'media') {
       list = list.filter(f => MEDIA_EXTS.has(getFileExt(f.Key)));
     } else if (currentQuickFilter === 'docs') {
@@ -404,7 +494,6 @@
     const files = getFilteredFiles();
     const folders = getFilteredFolders();
 
-    // Update stats
     const totalCountEl = document.getElementById('totalFilesCount');
     const filterInfoEl = document.getElementById('filterInfo');
     const totalItems = files.length + folders.length;
@@ -433,11 +522,10 @@
 
     let html = '';
 
-    // If List view, add header row
     if (currentViewMode === 'list') {
       html += `
         <div class="fm-list-header">
-          <div></div>
+          <div><input type="checkbox" id="selectAllCb" title="Select All"></div>
           <div></div>
           <div>Name</div>
           <div>Size</div>
@@ -499,6 +587,7 @@
       const safeKey = escapeAttr(rawKey);
       const safeName = escapeHtml(fileName);
       const isStarred = starredFiles.has(rawKey);
+      const isSelected = selectedFiles.has(rawKey);
       const isImg = isImage(fileName);
       const typeCfg = getFileTypeConfig(fileName);
       const formattedSize = file.Size ? formatFileSize(file.Size) : '—';
@@ -512,7 +601,10 @@
 
       if (currentViewMode === 'grid') {
         html += `
-          <div class="fm-item ${isStarred ? 'starred' : ''}" data-type="file" data-key="${safeKey}" tabindex="0">
+          <div class="fm-item ${isStarred ? 'starred' : ''} ${isSelected ? 'is-selected' : ''}" data-type="file" data-key="${safeKey}" tabindex="0">
+            <div class="fm-item-checkbox-grid">
+              <input type="checkbox" class="file-select-cb" data-key="${safeKey}" ${isSelected ? 'checked' : ''} title="Select">
+            </div>
             <div class="fm-item-icon" style="${showImgThumb ? '' : `background:${typeCfg.bg};color:${typeCfg.color}`}">
               ${iconInner}
             </div>
@@ -530,9 +622,9 @@
         `;
       } else {
         html += `
-          <div class="fm-item ${isStarred ? 'starred' : ''}" data-type="file" data-key="${safeKey}" tabindex="0">
+          <div class="fm-item ${isStarred ? 'starred' : ''} ${isSelected ? 'is-selected' : ''}" data-type="file" data-key="${safeKey}" tabindex="0">
             <div class="fm-item-checkbox">
-              <input type="checkbox" class="file-select-cb" data-key="${safeKey}">
+              <input type="checkbox" class="file-select-cb" data-key="${safeKey}" ${isSelected ? 'checked' : ''} title="Select">
             </div>
             <div class="fm-item-icon" style="${isImg ? '' : `background:${typeCfg.bg};color:${typeCfg.color}`}">
               <span class="ext">${typeCfg.label}</span>
@@ -553,6 +645,7 @@
 
     gridEl.innerHTML = html;
     observeThumbnails();
+    updateBatchBar();
   }
 
   function observeThumbnails() {
@@ -646,6 +739,7 @@
       renderBreadcrumbs();
       renderFiles();
       renderPagination(data);
+      checkConnectionHealth(true);
     } catch (err) {
       console.error('Error loading files:', err);
       showToast(err.message || 'Error loading files', 'error');
@@ -717,8 +811,8 @@
 
     menu.style.display = 'block';
 
-    const menuWidth = 180;
-    const menuHeight = menu.offsetHeight || 150;
+    const menuWidth = 190;
+    const menuHeight = menu.offsetHeight || 160;
     const posX = Math.min(x, window.innerWidth - menuWidth - 10);
     const posY = Math.min(y, window.innerHeight - menuHeight - 10);
 
@@ -743,7 +837,7 @@
     if (menu) menu.style.display = 'none';
   }
 
-  // Actions: Star, Download, Preview, Delete, New Folder
+  // Actions: Star, Download, Preview, Delete, New Folder, Move
   function toggleStar(key) {
     if (starredFiles.has(key)) {
       starredFiles.delete(key);
@@ -787,8 +881,18 @@
     });
   }
 
+  function copyPublicLink(key) {
+    const publicUrl = window.location.origin + getPublicViewUrl(key);
+    navigator.clipboard.writeText(publicUrl).then(() => {
+      showToast('Public link copied to clipboard', 'success');
+    }).catch(() => {
+      showToast('Failed to copy public link', 'error');
+    });
+  }
+
   // Preview Modal
-  function openPreview(key) {
+  async function openPreview(key) {
+    currentPreviewKey = key;
     const modal = document.getElementById('previewModal');
     const titleEl = document.getElementById('previewFileName');
     const contentEl = document.getElementById('previewContent');
@@ -797,6 +901,13 @@
 
     if (!modal || !contentEl) return;
 
+    // Reset tabs
+    document.querySelectorAll('.preview-tab').forEach(t => t.classList.toggle('active', t.dataset.previewTab === 'preview'));
+    const panePreview = document.getElementById('pane-preview');
+    const paneInfo = document.getElementById('pane-info');
+    if (panePreview) panePreview.style.display = 'block';
+    if (paneInfo) paneInfo.style.display = 'none';
+
     const fileName = getBaseName(key);
     const viewUrl = getViewUrl(key);
     const downloadUrl = getDownloadUrl(key);
@@ -808,6 +919,42 @@
     contentEl.innerHTML = '<div class="empty-preview"><div class="spinner-border text-light"></div><div class="mt-2 text-light">Loading preview...</div></div>';
     modal.classList.add('show');
 
+    // Populate file info tab
+    const fileInfoKey = document.getElementById('infoFileKey');
+    const fileInfoSize = document.getElementById('infoFileSize');
+    const fileInfoMime = document.getElementById('infoMimeType');
+    const fileInfoDate = document.getElementById('infoLastModified');
+    const fileInfoETag = document.getElementById('infoETag');
+
+    if (fileInfoKey) fileInfoKey.textContent = key;
+
+    // Async fetch full metadata
+    fetch(withBucketUrl(`/mbkbucket/api/file-info/${encodeURIComponent(key)}`))
+      .then(r => r.json())
+      .then(info => {
+        if (fileInfoSize) fileInfoSize.textContent = info.ContentLength ? formatFileSize(info.ContentLength) : '—';
+        if (fileInfoMime) fileInfoMime.textContent = info.ContentType || '—';
+        if (fileInfoDate) fileInfoDate.textContent = info.LastModified ? formatDate(info.LastModified) : '—';
+        if (fileInfoETag) fileInfoETag.textContent = info.ETag || '—';
+      }).catch(() => {});
+
+    // Configure public link button and metadata card
+    const copyPublicBtn = document.getElementById('previewCopyPublicLinkBtn');
+    if (copyPublicBtn) {
+      copyPublicBtn.style.display = isPublicViewEnabled ? '' : 'none';
+    }
+
+    const publicUrl = window.location.origin + getPublicViewUrl(key);
+    const infoPublicLinkCard = document.getElementById('infoPublicLinkCard');
+    const infoPublicUrl = document.getElementById('infoPublicUrl');
+    if (infoPublicLinkCard) {
+      infoPublicLinkCard.style.display = isPublicViewEnabled ? '' : 'none';
+    }
+    if (infoPublicUrl) {
+      infoPublicUrl.textContent = publicUrl;
+    }
+
+    // Render Preview Content
     if (isImage(fileName)) {
       contentEl.innerHTML = `<img src="${viewUrl}" alt="${escapeAttr(fileName)}">`;
     } else if (isVideo(fileName)) {
@@ -816,6 +963,12 @@
       contentEl.innerHTML = `<div class="p-4 text-center"><audio controls autoplay class="w-100"><source src="${viewUrl}"></audio></div>`;
     } else if (isPdf(fileName)) {
       contentEl.innerHTML = `<iframe src="${viewUrl}" class="preview-iframe"></iframe>`;
+    } else if (isMarkdown(fileName)) {
+      fetch(viewUrl).then(res => res.text()).then(text => {
+        contentEl.innerHTML = renderMarkdownToHtml(text);
+      }).catch(err => {
+        contentEl.innerHTML = `<div class="p-4 text-danger text-center">Failed to load preview: ${escapeHtml(err.message)}</div>`;
+      });
     } else if (isTextOrCode(fileName)) {
       fetch(viewUrl).then(res => res.text()).then(text => {
         contentEl.innerHTML = `<pre class="preview-code-block"><code>${escapeHtml(text)}</code></pre>`;
@@ -837,6 +990,70 @@
     if (modal) modal.classList.remove('show');
   };
 
+  window.copyCurrentPreviewLink = function () {
+    if (currentPreviewKey) copyShareLink(currentPreviewKey);
+  };
+
+  window.copyCurrentPreviewPublicLink = function () {
+    if (currentPreviewKey) copyPublicLink(currentPreviewKey);
+  };
+
+  // Move & Rename Modal
+  function promptMove(key, isCopy = false) {
+    const modal = document.getElementById('moveModal');
+    const title = document.getElementById('moveModalTitle');
+    const preview = document.getElementById('moveSourcePathPreview');
+    const srcInput = document.getElementById('moveSourceKeyInput');
+    const destInput = document.getElementById('moveDestNameInput');
+    const copyInput = document.getElementById('moveIsCopyInput');
+    const label = document.getElementById('moveDestNameLabel');
+
+    if (!modal) return;
+
+    if (title) title.textContent = isCopy ? 'Copy File' : 'Move or Rename File';
+    if (preview) preview.textContent = key;
+    if (srcInput) srcInput.value = key;
+    if (copyInput) copyInput.value = isCopy ? 'true' : 'false';
+    if (destInput) destInput.value = key;
+    if (label) label.textContent = isCopy ? 'Destination Key / Name' : 'New Key / Name';
+
+    modal.classList.add('show');
+    setTimeout(() => destInput?.focus(), 50);
+  }
+
+  window.closeMoveModal = function () {
+    const modal = document.getElementById('moveModal');
+    if (modal) modal.classList.remove('show');
+  };
+
+  window.submitMoveItem = async function () {
+    const srcKey = document.getElementById('moveSourceKeyInput')?.value;
+    const destKey = document.getElementById('moveDestNameInput')?.value?.trim();
+    const isCopy = document.getElementById('moveIsCopyInput')?.value === 'true';
+
+    if (!srcKey || !destKey) {
+      showToast('Source and destination paths are required', 'warning');
+      return;
+    }
+
+    const endpoint = isCopy ? '/mbkbucket/copy' : '/mbkbucket/move';
+    try {
+      const response = await fetch(withBucketUrl(endpoint), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sourceKey: srcKey, destKey })
+      });
+      const data = await response.json();
+      if (!data.success) throw new Error(data.error || `${isCopy ? 'Copy' : 'Move'} failed`);
+
+      window.closeMoveModal();
+      showToast(`${isCopy ? 'Copied' : 'Moved'} to ${destKey}`, 'success');
+      loadFiles(currentPage, currentPrefix);
+    } catch (err) {
+      showToast(err.message, 'error');
+    }
+  };
+
   // Delete Modal
   function promptDelete(key, isFolder = false) {
     const modal = document.getElementById('deleteModal');
@@ -989,6 +1206,35 @@
 
   // Event Listeners Setup
   function initEventListeners() {
+    // Refresh button
+    document.getElementById('refresh-btn')?.addEventListener('click', () => {
+      loadFiles(currentPage, currentPrefix, currentSearch);
+      checkConnectionHealth(false);
+    });
+
+    // Health check button
+    document.getElementById('checkHealthBtn')?.addEventListener('click', () => {
+      checkConnectionHealth(false);
+    });
+
+    // Preview Tabs switcher
+    document.querySelector('.preview-tabs')?.addEventListener('click', (e) => {
+      const btn = e.target.closest('.preview-tab');
+      if (!btn) return;
+      document.querySelectorAll('.preview-tab').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      const target = btn.dataset.previewTab;
+      const pPane = document.getElementById('pane-preview');
+      const iPane = document.getElementById('pane-info');
+      if (target === 'preview') {
+        if (pPane) pPane.style.display = 'block';
+        if (iPane) iPane.style.display = 'none';
+      } else {
+        if (pPane) pPane.style.display = 'none';
+        if (iPane) iPane.style.display = 'block';
+      }
+    });
+
     // Tree clicks
     document.getElementById('fm-tree')?.addEventListener('click', (e) => {
       const link = e.target.closest('.tree-link');
@@ -1092,8 +1338,40 @@
       renderFiles();
     });
 
-    // Grid Item Interactions (Click, Double Click, Star, Context Menu)
+    // Grid Item Interactions (Click, Double Click, Star, Checkbox, Context Menu)
     document.getElementById('fm-grid')?.addEventListener('click', (e) => {
+      // Checkbox selection
+      const cb = e.target.closest('.file-select-cb');
+      if (cb) {
+        e.stopPropagation();
+        const key = cb.dataset.key;
+        if (cb.checked) {
+          selectedFiles.add(key);
+        } else {
+          selectedFiles.delete(key);
+        }
+        const parentItem = cb.closest('.fm-item');
+        if (parentItem) parentItem.classList.toggle('is-selected', cb.checked);
+        updateBatchBar();
+        return;
+      }
+
+      // Select All in list header
+      const selectAll = e.target.closest('#selectAllCb');
+      if (selectAll) {
+        e.stopPropagation();
+        const checked = selectAll.checked;
+        const visibleFiles = getFilteredFiles();
+        visibleFiles.forEach(f => {
+          if (checked) selectedFiles.add(f.Key);
+          else selectedFiles.delete(f.Key);
+        });
+        document.querySelectorAll('.file-select-cb').forEach(c => { c.checked = checked; });
+        document.querySelectorAll('.fm-item[data-type="file"]').forEach(item => item.classList.toggle('is-selected', checked));
+        updateBatchBar();
+        return;
+      }
+
       // Star click
       const starBtn = e.target.closest('[data-star-key]');
       if (starBtn) {
@@ -1112,19 +1390,35 @@
 
         if (fileKey) {
           const isStarred = starredFiles.has(fileKey);
-          openContextMenu(rect.left, rect.bottom + 4, [
-            { id: 'view', label: 'Preview', icon: '<i class="fas fa-eye"></i>', action: () => openPreview(fileKey) },
-            { id: 'download', label: 'Download', icon: '<i class="fas fa-download"></i>', action: () => downloadFile(fileKey) },
-            { id: 'share', label: 'Copy link', icon: '<i class="fas fa-link"></i>', action: () => copyShareLink(fileKey) },
-            { id: 'star', label: isStarred ? 'Unstar' : 'Star', icon: '<i class="fas fa-star"></i>', action: () => toggleStar(fileKey) },
+          const menuItems = [
+            { id: 'view', label: 'Preview & Info', icon: '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M1 8s3-5 7-5 7 5 7 5-3 5-7 5-7-5-7-5z"/><circle cx="8" cy="8" r="2.5"/></svg>', action: () => openPreview(fileKey) },
+            { id: 'download', label: 'Download', icon: '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 11v3H2v-3"/><path d="M5 8l3 3 3-3"/><line x1="8" y1="2" x2="8" y2="11"/></svg>', action: () => downloadFile(fileKey) },
+            { id: 'share', label: 'Copy Link', icon: '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 2h8a1 1 0 011 1v8M3 5h8a1 1 0 011 1v8a1 1 0 01-1 1H3a1 1 0 01-1-1V6a1 1 0 011-1z"/></svg>', action: () => copyShareLink(fileKey) },
+          ];
+
+          if (isPublicViewEnabled) {
+            menuItems.push({
+              id: 'public-share',
+              label: 'Copy Public Link',
+              icon: '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.25"/><path d="M1.75 8h12.5M8 1.75a10.5 10.5 0 010 12.5 10.5 10.5 0 010-12.5z"/></svg>',
+              action: () => copyPublicLink(fileKey)
+            });
+          }
+
+          menuItems.push(
+            { id: 'move', label: 'Rename / Move', icon: '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M11 2L14 5L11 8M14 5H5C3.34315 5 2 6.34315 2 8V14"/></svg>', action: () => promptMove(fileKey, false) },
+            { id: 'copy', label: 'Duplicate / Copy', icon: '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="5" width="9" height="9" rx="1.5"/><path d="M3 11V3a1.5 1.5 0 011.5-1.5h8"/></svg>', action: () => promptMove(fileKey, true) },
+            { id: 'star', label: isStarred ? 'Unstar' : 'Star', icon: '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 1l2 5 5 .5-4 3.5 1 5-4-2.5-4 2.5 1-5-4-3.5 5-.5z"/></svg>', action: () => toggleStar(fileKey) },
             '-',
-            { id: 'delete', label: 'Delete', icon: '<i class="fas fa-trash"></i>', danger: true, action: () => promptDelete(fileKey, false) }
-          ]);
+            { id: 'delete', label: 'Delete', icon: '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 4h10M6 4V2h4v2M5 4l1 9h4l1-9"/></svg>', danger: true, action: () => promptDelete(fileKey, false) }
+          );
+
+          openContextMenu(rect.left, rect.bottom + 4, menuItems);
         } else if (folderPath) {
           openContextMenu(rect.left, rect.bottom + 4, [
-            { id: 'open', label: 'Open Folder', icon: '<i class="fas fa-folder-open"></i>', action: () => loadFiles(1, folderPath) },
+            { id: 'open', label: 'Open Folder', icon: '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4a1 1 0 011-1h3l2 2h5a1 1 0 011 1v6a1 1 0 01-1 1H3a1 1 0 01-1-1V4z"/></svg>', action: () => loadFiles(1, folderPath) },
             '-',
-            { id: 'delete', label: 'Delete Folder', icon: '<i class="fas fa-trash"></i>', danger: true, action: () => promptDelete(folderPath + '/', true) }
+            { id: 'delete', label: 'Delete Folder', icon: '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 4h10M6 4V2h4v2M5 4l1 9h4l1-9"/></svg>', danger: true, action: () => promptDelete(folderPath + '/', true) }
           ]);
         }
         return;
@@ -1140,17 +1434,53 @@
 
       // File click to preview
       const fileItem = e.target.closest('[data-type="file"]');
-      if (fileItem && !e.target.closest('.file-select-cb')) {
+      if (fileItem && !e.target.closest('.file-select-cb') && !e.target.closest('.fm-star')) {
         e.stopPropagation();
         openPreview(fileItem.dataset.key);
       }
     });
 
+    // Batch Bar Actions
+    document.getElementById('batchClearBtn')?.addEventListener('click', clearBatchSelection);
+
+    document.getElementById('batchDownloadBtn')?.addEventListener('click', async () => {
+      const keys = Array.from(selectedFiles);
+      if (!keys.length) return;
+      showToast(`Starting download for ${keys.length} item(s)...`);
+      for (const key of keys) {
+        await downloadFile(key);
+      }
+    });
+
+    document.getElementById('batchDeleteBtn')?.addEventListener('click', () => {
+      const keys = Array.from(selectedFiles);
+      if (!keys.length) return;
+      promptDelete(`${keys.length} selected files`, false);
+    });
+
+    document.getElementById('batchMoveBtn')?.addEventListener('click', () => {
+      const keys = Array.from(selectedFiles);
+      if (!keys.length) return;
+      promptMove(keys[0], false);
+    });
+
     // Bucket Selector
     document.getElementById('bucketSelector')?.addEventListener('change', (e) => {
+      const opt = e.target.selectedOptions?.[0];
       const newBucket = e.target.value;
       if (!newBucket) return;
       activeBucket = newBucket;
+
+      // Update provider badge
+      const providerType = opt?.dataset?.type || 's3';
+      const badge = document.getElementById('topProviderBadge');
+      if (badge) {
+        badge.className = `provider-badge provider-${providerType}`;
+        const lbl = badge.querySelector('.provider-label');
+        if (lbl) lbl.textContent = providerType;
+      }
+
+      clearBatchSelection();
       loadFiles(1, '');
     });
 
@@ -1236,17 +1566,22 @@
       const key = formData.get('key');
       const isFolder = formData.get('folder') === 'true';
 
+      const payload = selectedFiles.size > 0 && key?.includes('selected')
+        ? { keys: Array.from(selectedFiles), prefix: currentPrefix }
+        : { key, isFolder, prefix: currentPrefix };
+
       try {
         const response = await fetch(withBucketUrl('/mbkbucket/delete'), {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ key, isFolder, prefix: currentPrefix })
+          body: JSON.stringify(payload)
         });
         const data = await response.json();
         if (!data.success) throw new Error(data.error || 'Delete failed');
 
         closeModal();
-        showToast(`Successfully deleted ${key}`, 'success');
+        clearBatchSelection();
+        showToast('Deleted successfully', 'success');
         loadFiles(currentPage, currentPrefix);
       } catch (err) {
         showToast(err.message, 'error');
@@ -1256,7 +1591,6 @@
 
   // Initialization
   document.addEventListener('DOMContentLoaded', () => {
-    // Sync view mode buttons
     if (currentViewMode === 'list') {
       document.getElementById('view-list')?.classList.add('active');
       document.getElementById('view-grid')?.classList.remove('active');
@@ -1267,19 +1601,21 @@
 
     initEventListeners();
 
-    // Initial load with URL params
     const initialFolder = urlParams.get('folder') || '';
     const initialPage = parseInt(urlParams.get('page') || '1', 10);
     const initialSearch = urlParams.get('search') || '';
 
     loadFiles(initialPage, initialFolder, initialSearch);
+    checkConnectionHealth(true);
   });
 
-  // Expose global methods if needed
+  // Expose global methods
   window.mbkbucket = {
     loadFiles,
     openPreview,
     downloadFile,
+    promptMove,
+    checkConnectionHealth,
     showToast
   };