claude-code-marketplace 0.5.8 → 0.5.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-marketplace",
-  "version": "0.5.8",
+  "version": "0.5.10",
   "description": "Web UI for browsing and managing Claude Code marketplace plugins",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -7,6 +7,7 @@ let componentCache = {};
 const detailHistory = [];
 let focusedRowId = null;
 let _focusedRowEl = null;
+let treeContainer;
 
 function matchKey(e, ...keys) {
   if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return false;
@@ -91,11 +92,13 @@ function updateArrow(p) {
 
 // --- Init ---
 document.addEventListener('DOMContentLoaded', () => {
+  treeContainer = document.getElementById('treeContainer');
   document.getElementById('contentOpenEditor').innerHTML = ICONS.openEditor;
   document.getElementById('contentCopyPath').innerHTML = ICONS.copyPath;
   restoreAppState();
   loadProject();
   loadData();
+  initSidebarResize();
 
   let searchTimer;
   document.getElementById('searchInput').addEventListener('input', (e) => {
@@ -1168,13 +1171,13 @@ function shortenPath(p) {
     .replace(/^\/home\/[^/]+/i, home);
 }
 
-let toastTimeout;
 function toast(msg, type = 'info') {
-  const el = document.getElementById('toast');
+  const container = document.getElementById('toast');
+  const el = document.createElement('div');
+  el.className = `toast toast-${type}`;
   el.textContent = msg;
-  el.className = `toast ${type} show`;
-  clearTimeout(toastTimeout);
-  toastTimeout = setTimeout(() => el.classList.remove('show'), 3000);
+  container.appendChild(el);
+  setTimeout(() => el.remove(), 3000);
 }
 
 function closeModal(id) {
@@ -1218,7 +1221,19 @@ async function submitAddMarketplace() {
 // --- Keyboard Navigation ---
 
 function getVisibleRows() {
-  return [...document.querySelectorAll('#treeContainer .tree-row')].filter((r) => r.offsetParent !== null);
+  return [...treeContainer.querySelectorAll('.tree-row')].filter((r) => r.offsetParent !== null);
+}
+
+function scrollRowIntoView(row) {
+  const rowTop = row.getBoundingClientRect().top - treeContainer.getBoundingClientRect().top + treeContainer.scrollTop;
+  const rowBottom = rowTop + row.offsetHeight;
+  const cTop = treeContainer.scrollTop;
+  const cBottom = cTop + treeContainer.clientHeight;
+  if (rowTop < cTop) {
+    treeContainer.scrollTop = rowTop;
+  } else if (rowBottom > cBottom) {
+    treeContainer.scrollTop = rowBottom - treeContainer.clientHeight;
+  }
 }
 
 function setFocusedRow(index, rows) {
@@ -1232,7 +1247,7 @@ function setFocusedRow(index, rows) {
   index = Math.max(0, Math.min(index, rows.length - 1));
   const row = rows[index];
   row.classList.add('focused');
-  row.scrollIntoView({ block: 'nearest' });
+  scrollRowIntoView(row);
   focusedRowId = row.dataset.rowId;
   _focusedRowEl = row;
 }
@@ -1388,6 +1403,46 @@ if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/sw.js');
 }
 
+function initSidebarResize() {
+  const handle = document.getElementById('resizeHandle');
+  const treePanel = document.getElementById('treePanel');
+  const STORAGE_KEY = 'marketplace-sidebar-width';
+
+  const saved = parseInt(localStorage.getItem(STORAGE_KEY), 10);
+  if (saved) document.documentElement.style.setProperty('--sidebar-w', `${saved}px`);
+
+  let dragging = false;
+  let startX, startW, maxW, currentW;
+
+  handle.addEventListener('mousedown', (e) => {
+    dragging = true;
+    startX = e.clientX;
+    startW = treePanel.getBoundingClientRect().width;
+    currentW = startW;
+    const detailMinW = parseInt(getComputedStyle(document.getElementById('detailPanel')).minWidth, 10);
+    maxW = treePanel.parentElement.clientWidth - detailMinW - handle.offsetWidth;
+    handle.classList.add('is-dragging');
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    e.preventDefault();
+  });
+
+  document.addEventListener('mousemove', (e) => {
+    if (!dragging) return;
+    currentW = Math.max(200, Math.min(maxW, startW + e.clientX - startX));
+    document.documentElement.style.setProperty('--sidebar-w', `${currentW}px`);
+  });
+
+  document.addEventListener('mouseup', () => {
+    if (!dragging) return;
+    dragging = false;
+    handle.classList.remove('is-dragging');
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+    localStorage.setItem(STORAGE_KEY, currentW);
+  });
+}
+
 // #region HUB_INTEGRATION
 (async function initHub() {
   const cfg = await fetch('/hub-config')

package/public/index.html

@@ -46,24 +46,25 @@
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
       Refresh
     </button>
+    <button class="topbar-btn" id="themeBtn" title="Toggle theme">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+    </button>
     <button class="topbar-btn" id="helpBtn" title="Keyboard shortcuts (?)">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><circle cx="12" cy="17" r="0.5" fill="currentColor"/></svg>
       <kbd style="font-size:10px">?</kbd>
     </button>
-    <button class="topbar-btn" id="themeBtn" title="Toggle theme">
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
-    </button>
     <a class="topbar-btn" href="https://github.com/NikiforovAll/claude-code-marketplace" target="_blank" rel="noopener" title="GitHub">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
     </a>
   </div>
 
   <div class="main-layout">
-    <div class="tree-panel">
+    <div class="tree-panel" id="treePanel">
       <div class="tree-container" id="treeContainer">
         <div class="loading">Loading marketplaces...</div>
       </div>
     </div>
+    <div class="resize-handle" id="resizeHandle"></div>
     <div class="detail-panel" id="detailPanel">
       <div class="detail-empty">
         <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" opacity="0.3"><path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
@@ -72,7 +73,7 @@
     </div>
   </div>
 
-  <div class="toast" id="toast"></div>
+  <div class="toast-container" id="toast"></div>
 
   <!-- Add marketplace modal -->
   <div class="modal-overlay" id="addMarketplaceModal">

package/public/style.css

@@ -279,11 +279,25 @@ body {
 /* === TREE PANEL === */
 
 .tree-panel {
-  flex: 1;
+  flex: 0 0 var(--sidebar-w, 400px);
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  min-width: 400px;
+  min-width: 200px;
+}
+
+.resize-handle {
+  width: 4px;
+  flex-shrink: 0;
+  cursor: col-resize;
+  background: transparent;
+  transition: background 0.15s;
+  position: relative;
+  z-index: 1;
+}
+.resize-handle:hover,
+.resize-handle.is-dragging {
+  background: var(--accent);
 }
 
 .tree-expand-toggle {
@@ -670,8 +684,8 @@ body.light .scope-toggle.local {
 /* === DETAIL PANEL === */
 
 .detail-panel {
-  width: 500px;
-  flex-shrink: 0;
+  flex: 1;
+  min-width: 300px;
   background: var(--bg-surface);
   border-left: 1px solid var(--border);
   display: flex;
@@ -995,37 +1009,47 @@ body.light .scope-toggle.local {
 
 /* === TOAST === */
 
-.toast {
+.toast-container {
   position: fixed;
-  bottom: 20px;
-  right: 20px;
-  padding: 10px 16px;
+  bottom: 16px;
+  right: 16px;
+  z-index: 100;
+}
+
+.toast {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
   border-radius: 6px;
-  font-size: 12px;
-  font-weight: 500;
-  font-family: var(--mono);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  z-index: 1000;
-  opacity: 0;
-  transform: translateY(10px);
-  transition: all 300ms ease;
-  max-width: 400px;
+  padding: 8px 14px;
+  font-size: 11px;
+  color: var(--text-secondary);
+  animation: slideIn 0.2s ease;
 }
-.toast.show {
-  opacity: 1;
-  transform: translateY(0);
+
+.toast.toast-success {
+  border-color: #2ea043;
+  color: #2ea043;
 }
-.toast.success {
-  background: var(--success);
-  color: #000;
+
+.toast.toast-error {
+  border-color: #f85149;
+  color: #f85149;
 }
-.toast.error {
-  background: var(--error);
-  color: #fff;
+
+.toast.toast-info {
+  border-color: var(--accent);
+  color: var(--accent);
 }
-.toast.info {
-  background: var(--accent);
-  color: #fff;
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* === MODAL === */

package/server.js

@@ -258,7 +258,12 @@ function loadMarketplaces() {
       const components = {};
       for (const k of compKeys) {
         if (fsComps && Array.isArray(fsComps[k]) && fsComps[k].length > 0) {
-          components[k] = fsComps[k];
+          if (Array.isArray(pd[k]) && pd[k].length > 0) {
+            const allowed = new Set(pd[k].map(p => path.basename(typeof p === 'string' ? p : (p.name || String(p)))));
+            components[k] = fsComps[k].filter(name => allowed.has(name));
+          } else {
+            components[k] = fsComps[k];
+          }
         } else if (Array.isArray(pd[k]) && pd[k].length > 0) {
           components[k] = pd[k].map(p => typeof p === 'string' ? path.basename(p) : (p.name || String(p)));
         } else if (pd[k]) {
@@ -617,9 +622,9 @@ app.get('/api/plugins/:pluginId/components', (req, res) => {
   }
   if (!plugin?._pluginDir) return res.status(404).json({ error: 'Plugin directory not found', pluginId });
 
-  const comps = plugin._fsComps || countComponents(plugin._pluginDir, plugin.metadata);
-  comps._pluginDir = plugin._pluginDir;
-  res.json(comps);
+  const comps = plugin.components || plugin._fsComps || countComponents(plugin._pluginDir, plugin.metadata);
+  const result = { ...comps, _pluginDir: plugin._pluginDir };
+  res.json(result);
 });
 
 app.get('/api/plugins/:pluginId/preview/*', (req, res) => {