dsh-sidebar-recent 1.0.0 → 1.0.2

package/client.js

@@ -529,6 +529,7 @@ window.__ModuleLoader__.load({
 				const onDown = function (event) {
 					const el = ref.current;
 					if (!el || el.contains(event.target)) return;
+					if (event.target && event.target.closest && event.target.closest('[data-menu-trigger]')) return;
 					onClose();
 				};
 				const onKey = function (event) {
@@ -778,6 +779,7 @@ window.__ModuleLoader__.load({
 				className: 'sr-icon-btn' + (props.active ? ' is-active' : '') + (props.className ? ' ' + props.className : ''),
 				title: props.title,
 				'aria-label': props.title,
+				'data-menu-trigger': props.menuTrigger ? '1' : undefined,
 				disabled: !!props.disabled,
 				onClick: props.onClick
 			}, h(Icon, { name: props.icon, size: props.size || 16 }));
@@ -1049,6 +1051,7 @@ window.__ModuleLoader__.load({
 					icon: 'ellipsis',
 					size: 14,
 					title: props.tr('actions.session'),
+					menuTrigger: true,
 					onClick: props.onMore
 				})));
 				return out;
@@ -1102,6 +1105,7 @@ window.__ModuleLoader__.load({
 					icon: 'ellipsis',
 					size: 14,
 					title: props.tr('actions.workspace'),
+					menuTrigger: true,
 					onClick: props.onMore
 				}))
 			]);
@@ -1196,7 +1200,12 @@ window.__ModuleLoader__.load({
 				let frame = 0;
 				function measure() {
 					frame = 0;
-					const next = Math.round(el.getBoundingClientRect().height * 100) / 100;
+					const root = el.parentElement;
+					if (!root) return;
+					const headEl = el.previousElementSibling;
+					const headH = headEl ? headEl.offsetHeight : 0;
+					const raw = root.clientHeight - headH - 6;
+					const next = raw > 0 ? Math.round(raw * 100) / 100 : 0;
 					setBodyH(function (prev) { return Math.abs(prev - next) < 0.5 ? prev : next; });
 				}
 				function schedule() {
@@ -1206,7 +1215,7 @@ window.__ModuleLoader__.load({
 				measure();
 				if (typeof ResizeObserver === 'function') {
 					const ro = new ResizeObserver(schedule);
-					ro.observe(el);
+					ro.observe(el.parentElement || el);
 					return function () {
 						if (frame) window.cancelAnimationFrame(frame);
 						ro.disconnect();
@@ -1823,7 +1832,15 @@ window.__ModuleLoader__.load({
 			function openMenuAt(kind, event, extra) {
 				const rect = event && event.currentTarget ? event.currentTarget.getBoundingClientRect() : null;
 				const point = event && typeof event.clientX === 'number' ? { x: event.clientX, y: event.clientY } : null;
-				setMenu(Object.assign({ kind: kind, anchor: rect, point: point }, extra || {}));
+				const next = Object.assign({ kind: kind, anchor: rect, point: point }, extra || {});
+				setMenu(function (current) {
+					if (current && current.kind === next.kind) {
+						if (kind === 'view') return null;
+						if (kind === 'session' && current.id === next.id) return null;
+						if (kind === 'workspace' && current.group && next.group && current.group.id === next.group.id) return null;
+					}
+					return next;
+				});
 			}
 
 			function renderSession(id, opts) {
@@ -2052,6 +2069,7 @@ window.__ModuleLoader__.load({
 					key: 'view',
 					type: 'button',
 					className: 'sr-icon-btn' + (menu && menu.kind === 'view' ? ' is-active' : ''),
+					'data-menu-trigger': '1',
 					title: tr('viewOptions.label'),
 					'aria-label': tr('viewOptions.label'),
 					onClick: function (event) {
@@ -2110,8 +2128,8 @@ window.__ModuleLoader__.load({
 			const wsRatio = resizeLive && typeof resizeLive.ws === 'number'
 				? resizeLive.ws
 				: (typeof view.wsRatio === 'number' ? view.wsRatio : null);
-			const availH = bodyH > 0
-				? Math.max(120, bodyH - BODY_PAD - (HANDLE_H + BODY_GAP))
+			const availH = bodyH >= 80
+				? bodyH - BODY_PAD - (HANDLE_H + BODY_GAP)
 				: 0;
 			let wsH = WS_HEAD_H;
 			let recentH = WS_HEAD_H;
@@ -2121,7 +2139,8 @@ window.__ModuleLoader__.load({
 					wsH = WS_HEAD_H;
 					recentH = WS_HEAD_H;
 				} else if (view.recentCollapsed) {
-					wsH = Math.max(WS_HEAD_H, pair - WS_HEAD_H);
+					const fitH = wsContentH > 0 ? wsContentH + WS_HEAD_H : (pair - WS_HEAD_H);
+					wsH = Math.max(WS_HEAD_H, Math.min(fitH, pair - WS_HEAD_H));
 					recentH = WS_HEAD_H;
 				} else if (view.wsCollapsed) {
 					wsH = WS_HEAD_H;
@@ -2317,31 +2336,55 @@ window.__ModuleLoader__.load({
 					event.preventDefault();
 					const bodyEl = event.currentTarget.closest('.sr-body');
 					if (!bodyEl) return;
-					const rect = bodyEl.getBoundingClientRect();
-					if (!rect.height) return;
-					const live = { ws: wsRatio === null ? 0.46 : wsRatio };
-					setResizeLive({ ws: live.ws });
+					const wsEl = bodyEl.querySelector('.sr-section-ws');
+					const recentEl = bodyEl.querySelector('.sr-section-recent');
+					if (!wsEl || !recentEl) return;
+					const rootEl = bodyEl.closest('.sr-root');
+					const startWsH = wsEl.getBoundingClientRect().height;
+					const startRecentH = recentEl.getBoundingClientRect().height;
+					const pairH = startWsH + startRecentH;
+					if (pairH <= 120) return;
+					const MIN_H = 34;
+					const startY = event.clientY;
+					let wsH = startWsH;
+					let lastY = startY;
+					let rafId = 0;
+					if (rootEl) rootEl.classList.add('is-resizing');
+					wsEl.style.transition = 'none';
+					recentEl.style.transition = 'none';
+					document.body.style.userSelect = 'none';
+					const paint = function () {
+						rafId = 0;
+						let next = startWsH + (lastY - startY);
+						if (next < MIN_H) next = MIN_H;
+						if (next > pairH - MIN_H) next = pairH - MIN_H;
+						if (Math.abs(next - wsH) < 0.5) return;
+						wsH = next;
+						wsEl.style.height = next + 'px';
+						recentEl.style.height = (pairH - next) + 'px';
+					};
 					const onMove = function (moveEvent) {
-						const ratio = (moveEvent.clientY - rect.top) / rect.height;
-						live.ws = Math.min(0.9, Math.max(0.12, ratio));
-						setResizeLive({ ws: live.ws });
+						lastY = moveEvent.clientY;
+						if (rafId) return;
+						rafId = window.requestAnimationFrame(paint);
 					};
-					const stop = function () {
+					const finish = function () {
 						document.removeEventListener('pointermove', onMove);
 						document.removeEventListener('mousemove', onMove);
-						document.removeEventListener('pointerup', stop);
-						document.removeEventListener('mouseup', stop);
+						document.removeEventListener('pointerup', finish);
+						document.removeEventListener('mouseup', finish);
+						if (rafId) { window.cancelAnimationFrame(rafId); rafId = 0; }
 						document.body.style.cursor = '';
 						document.body.style.userSelect = '';
-						setResizeLive(null);
-						patchView({ wsRatio: Math.round(live.ws * 1000) / 1000, recentRatio: null });
+						wsEl.style.transition = '';
+						recentEl.style.transition = '';
+						if (rootEl) rootEl.classList.remove('is-resizing');
+						patchView({ wsRatio: Math.round((wsH / pairH) * 1000) / 1000, recentRatio: null });
 					};
 					document.addEventListener('pointermove', onMove);
 					document.addEventListener('mousemove', onMove);
-					document.addEventListener('pointerup', stop);
-					document.addEventListener('mouseup', stop);
-					document.body.style.cursor = 'row-resize';
-					document.body.style.userSelect = 'none';
+					document.addEventListener('pointerup', finish);
+					document.addEventListener('mouseup', finish);
 				};
 			}
 
@@ -2376,6 +2419,7 @@ window.__ModuleLoader__.load({
 					key: 'body',
 					ref: bodyRef,
 					className: 'sr-body'
+						+ (availH > 0 ? ' is-sized' : '')
 						+ (view.wsCollapsed ? ' is-ws-collapsed' : '')
 						+ (view.recentCollapsed ? ' is-recent-collapsed' : '')
 				}, query.trim() ? renderSearchResults() : [
@@ -2452,19 +2496,22 @@ window.__ModuleLoader__.load({
 			'.sr-body{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:4px;padding-top:2px}',
 			'.sr-section{display:flex;flex-direction:column;min-height:0;border-radius:10px;overflow:hidden;transition:height .3s cubic-bezier(.4,0,.2,1),flex-grow .3s cubic-bezier(.4,0,.2,1),flex-basis .3s cubic-bezier(.4,0,.2,1),min-height .3s cubic-bezier(.4,0,.2,1);background:rgba(127,127,127,.055);background:color-mix(in srgb,var(--dsw-alias-bg-layer-2,#f4f4f5) 46%,transparent);border:1px solid color-mix(in srgb,var(--dsw-alias-border-l1,rgba(0,0,0,.08)) 66%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}',
 			'.sr-section-ws{flex:0 0 auto;min-height:0;overflow:hidden}',
+			'.sr-body:not(.is-sized) .sr-section-ws{flex:0 0 auto;max-height:62%}',
 						'.sr-section-recent{flex:0 0 auto;min-height:34px;overflow:hidden}',
+			'.sr-body:not(.is-sized) .sr-section-recent{flex:1 1 0;min-height:34px}',
 			
 			'.sr-section-body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}',
 			'.sr-section-inner{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column}',
 			'.sr-root.is-animating .sr-scroll{-webkit-mask-image:none;mask-image:none}',
 			'.sr-root.is-animating .sr-section{will-change:height}',
-			'.sr-resize{position:relative;flex:none;height:10px;margin:0 4px -3px;display:flex;align-items:center;justify-content:center;cursor:row-resize;border-radius:6px;touch-action:none;user-select:none;opacity:0;transition:opacity .18s ease,height .3s cubic-bezier(.4,0,.2,1),margin .3s cubic-bezier(.4,0,.2,1)}',
+			'.sr-resize{position:relative;flex:none;height:10px;margin:0 4px -3px;display:flex;align-items:center;justify-content:center;cursor:default;border-radius:6px;touch-action:none;user-select:none;opacity:0;transition:opacity .18s ease,height .3s cubic-bezier(.4,0,.2,1),margin .3s cubic-bezier(.4,0,.2,1)}',
 			'.sr-body.is-ws-collapsed .sr-resize,.sr-body.is-recent-collapsed .sr-resize{opacity:0;pointer-events:none}',
 			'.sr-resize::before{content:"";position:absolute;left:0;right:0;top:-3px;bottom:-3px}',
 			'.sr-resize:hover,.sr-resize.is-dragging{opacity:1}',
 			'.sr-resize:hover{background:color-mix(in srgb,var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.14)) 75%,transparent)}',
 			'.sr-resize-grip{width:40px;height:3px;border-radius:2px;background:var(--dsw-alias-border-l2,rgba(0,0,0,.18));transition:background .12s ease,width .12s ease}',
-			'.sr-resize:hover .sr-resize-grip,.sr-resize.is-dragging .sr-resize-grip{background:var(--dsw-alias-brand-primary,#4d6bfe);width:44px}',
+			'.sr-resize:hover .sr-resize-grip{width:44px;background:rgba(0,0,0,.30);background:color-mix(in srgb,var(--dsw-alias-label-primary,#111) 30%,transparent)}',
+			'.sr-root.is-resizing .sr-resize-grip{width:46px;background:rgba(0,0,0,.52);background:color-mix(in srgb,var(--dsw-alias-label-primary,#111) 52%,transparent)}',
 			'.sr-root[data-panel="blend"] .sr-glass{opacity:0}',
 			'.sr-root[data-panel="blend"] .sr-section{background:transparent;border-color:transparent;box-shadow:none;border-radius:6px;backdrop-filter:none;-webkit-backdrop-filter:none}',
 			'.sr-root[data-panel="contrast"] .sr-glass{background:linear-gradient(180deg,color-mix(in srgb,var(--dsw-alias-bg-layer-1,#fff) 52%,transparent),color-mix(in srgb,var(--dsw-alias-bg-base,#fff) 28%,transparent))}',
@@ -2476,10 +2523,11 @@ window.__ModuleLoader__.load({
 			'.sr-collapse:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.14))}',
 			'.sr-collapse svg{transform:rotate(90deg);transition:transform .16s ease}',
 			'.sr-collapse.is-collapsed svg{transform:rotate(0deg)}',
-			'.sr-scroll{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px 1px 11px;scrollbar-gutter:stable;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%)}',
+			'.sr-scroll{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px 1px 10px;scrollbar-gutter:stable;-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.30) 4px,rgba(0,0,0,.78) 7px,#000 10px,#000 calc(100% - 10px),rgba(0,0,0,.78) calc(100% - 7px),rgba(0,0,0,.30) calc(100% - 4px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.30) 4px,rgba(0,0,0,.78) 7px,#000 10px,#000 calc(100% - 10px),rgba(0,0,0,.78) calc(100% - 7px),rgba(0,0,0,.30) calc(100% - 4px),transparent 100%)}',
 			'.sr-section-ws .sr-scroll{flex:0 1 auto}',
 			'.sr-section-inner .sr-scroll{flex:1 1 auto;min-height:0}',
 			'.sr-section-recent .sr-scroll{display:flex;flex-direction:column;gap:5px}',
+			'.sr-section-recent .sr-scroll{padding-top:6px}',
 			'.sr-scroll::-webkit-scrollbar{width:5px}',
 			'.sr-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--dsw-alias-label-tertiary,rgba(0,0,0,.3)) 42%,transparent);border-radius:3px}',
 			'.sr-scroll::-webkit-scrollbar-track{background:transparent}',
@@ -2513,6 +2561,9 @@ window.__ModuleLoader__.load({
 			'.sr-row-snippet{font-size:10.5px;color:var(--dsw-alias-label-primary,#111);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
 			'.sr-group{margin-bottom:0}',
 			'.sr-group-list{display:flex;flex-direction:column;gap:5px}',
+			'.sr-group:has(.sr-group-body.is-open){margin-bottom:3px}',
+			'.sr-root.is-resizing .sr-section{transition:none !important}',
+			'.sr-root.is-resizing .sr-resize{opacity:1}',
 			'.sr-ws-row{display:flex;flex:0 0 auto;align-items:center;border-radius:10px;transition:background .16s ease,box-shadow .16s ease}',
 			'.sr-ws-row:hover{background:rgba(0,0,0,.04);background:color-mix(in srgb,var(--dsw-alias-label-primary,#111) 5%,transparent);box-shadow:0 1px 2px rgba(0,0,0,.05)}',
 						'.sr-ws-head{display:flex;align-items:center;gap:5px;flex:1 1 auto;min-width:0;height:32px;padding:0 7px 0 5px;border:none;background:transparent;cursor:pointer;text-align:left;font-family:inherit;font-size:var(--sr-fs-group);font-weight:400;color:var(--dsw-alias-label-primary,#111)}',
@@ -2540,6 +2591,7 @@ window.__ModuleLoader__.load({
 			'.sr-results-label{padding:8px 6px 3px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dsw-alias-label-primary,#111)}',
 			'.sr-results-note{padding:6px;font-size:11px;color:var(--dsw-alias-label-primary,#111)}',
 			'.sr-menu{position:fixed;z-index:1200;min-width:170px;max-width:212px;max-height:min(86vh,900px);overflow-y:auto;overscroll-behavior:contain;padding:4px;border-radius:var(--dsw-radius-lg,10px);background:#FCFDFD;background:color-mix(in srgb,#FCFDFD 88%,transparent);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);border:.5px solid var(--dsw-alias-border-l2,rgba(0,0,0,.1));box-shadow:var(--dsw-elevation-prominent,0 12px 28px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.08));animation:sr-fade .12s ease}',
+			'body[data-ds-dark-theme] .sr-menu{background:#29292D;background:color-mix(in srgb,#29292D 90%,transparent);border-color:rgba(255,255,255,.10);box-shadow:var(--dsw-elevation-prominent,0 12px 28px rgba(0,0,0,.52),0 2px 6px rgba(0,0,0,.34))}',
 			'.sr-menu::-webkit-scrollbar{width:5px}',
 			'.sr-menu::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--dsw-alias-label-tertiary,rgba(0,0,0,.3)) 42%,transparent);border-radius:3px}',
 			'.sr-menu-chips{display:flex;align-items:center;gap:6px;padding:2px 8px 6px}',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-sidebar-recent",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": false,
   "type": "module",
   "description": "Sidebar Recent: a project-grouped session browser with a chronological Recent list for DeepSeek Harness.",