andy/nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Final tweaks for v3

Browse Source
This commit is contained in:
Andy Dixon
2026-06-16 16:08:05 +01:00
parent d5295772cb
commit 3577b800d1
4 changed files with 355 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/scripts/test-regressions.js
+55
View File
@@ -144,6 +144,61 @@ assertContains(
"height: var(--tab-bar-height);",
"tab bar must use the shared sidebar header height",
);
assertContains(
"frontend/src/js/tabs.js",
"this._setupScrolling();",
"tab bar must enable horizontal scroll handling for overflowed tabs",
);
assertContains(
"frontend/src/js/tabs.js",
"this._setupTooltip();",
"tab bar must show rich hover hints for truncated tabs",
);
assertContains(
"frontend/src/js/tabs.js",
"removeTab(sessionId) {\n this._hideTabTooltip();",
"removing a tab must clear any visible tab tooltip",
);
assertContains(
"frontend/src/js/tabs.js",
"async closeTab(sessionId) {\n this._hideTabTooltip();",
"closing a tab must clear any visible or pending tab tooltip",
);
assertContains(
"frontend/src/js/tabs.js",
"!tab?.isConnected",
"tab tooltip timers must not show hints for removed tab elements",
);
assertContains(
"frontend/src/js/tabs.js",
"_clearTabTooltipTimer",
"tab tooltip cleanup must cancel pending hover timers",
);
assertContains(
"frontend/src/js/tabs.js",
"session.protocol !== \"leviathan\"",
"Leviathan tabs must close without connected-session confirmation",
);
assertContains(
"frontend/src/js/tabs.js",
"Connected since:",
"connection tab hover hints must include the connected-since timestamp",
);
assertContains(
"frontend/src/js/tabs.js",
"tab.appendChild(closeBtn);\n\n // Protocol badge",
"tab close button must render on the left side of each tab",
);
assertContains(
"frontend/src/css/layout.css",
"scrollbar-gutter: stable;",
"overflowing tab lists must expose a stable horizontal scrollbar",
);
assertContains(
"frontend/src/css/tabs.css",
".tab-tooltip",
"tab hover hints must have dedicated tooltip styling",
);
assertContains(
"frontend/src/js/leviathan.js",
"Hex Editor",
frontend/src/css/layout.css
+41 -2
View File
@@ -40,6 +40,7 @@
.tab-bar {
grid-column: 2;
grid-row: 1;
position: relative;
background: var(--bg-surface);
border-bottom: 1px solid var(--border-subtle);
display: flex;
@@ -53,13 +54,51 @@
display: flex;
align-items: center;
flex: 1;
height: 100%;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none; /* Firefox */
scrollbar-width: thin;
scrollbar-gutter: stable;
scroll-behavior: smooth;
}
.tab-list::-webkit-scrollbar {
display: none;
height: 6px;
}
.tab-list::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--radius-full);
}
.tab-list::-webkit-scrollbar-thumb:hover {
background: var(--text-tertiary);
}
.tab-bar::before,
.tab-bar::after {
content: "";
position: absolute;
top: 0;
bottom: 1px;
z-index: 2;
width: 18px;
pointer-events: none;
opacity: 0;
transition: opacity var(--transition-fast);
}
.tab-bar::before {
left: 0;
background: linear-gradient(90deg, var(--bg-surface), transparent);
}
.tab-bar::after {
right: calc(var(--tab-bar-height) * 2);
background: linear-gradient(-90deg, var(--bg-surface), transparent);
}
.tab-bar.has-overflow-left::before,
.tab-bar.has-overflow-right::after {
opacity: 1;
}
/* -----------------------------------------------------------------------
frontend/src/css/tabs.css
+29 -3
View File
@@ -240,7 +240,7 @@
}
.tab:hover .tab-sftp,
.tab.active .tab-sftp {
.tab.tab-active .tab-sftp {
opacity: 1;
}
@@ -268,11 +268,15 @@
background var(--transition-fast),
color var(--transition-fast);
cursor: pointer;
margin-left: 2px;
margin: 0 2px 0 0;
padding: 0;
border: 0;
background: none;
line-height: 1;
}
.tab:hover .tab-close,
.tab.active .tab-close {
.tab.tab-active .tab-close {
opacity: 1;
}
@@ -456,6 +460,28 @@
/* Transparent hit area for right-click context menu */
}
/* -----------------------------------------------------------------------
Tab hover tooltip
----------------------------------------------------------------------- */
.tab-tooltip {
max-width: 360px;
white-space: normal;
}
.tab-tooltip-title {
max-width: 320px;
overflow: hidden;
color: var(--text-primary);
text-overflow: ellipsis;
white-space: nowrap;
}
.tab-tooltip-meta {
margin-top: 2px;
color: var(--text-tertiary);
font-weight: var(--weight-normal);
}
/* -----------------------------------------------------------------------
Modified indicator (unsaved changes)
----------------------------------------------------------------------- */
frontend/src/js/tabs.js
+230 -12
View File
@@ -32,7 +32,13 @@
/** @type {string[]} Ordered list of session IDs. */
this.order = [];
this.tooltip = null;
this.tooltipTimer = null;
this.tooltipSessionId = null;
this._setupDragAndDrop();
this._setupScrolling();
this._setupTooltip();
}
// ── Public API ───────────────────────────────────────────────────
@@ -56,6 +62,7 @@
// Hide the empty-state BEFORE activating the panel so the
// panel-container gets the full workspace height immediately.
this._updateEmptyState();
this._updateScrollState();
this.setActive(sessionInfo.id);
}
@@ -64,6 +71,7 @@
* @param {string} sessionId
*/
removeTab(sessionId) {
this._hideTabTooltip();
const idx = this.order.indexOf(sessionId);
const wasActive = this.app.state.activeSessionId === sessionId;
if (idx !== -1) this.order.splice(idx, 1);
@@ -92,6 +100,7 @@
}
this._updateEmptyState();
this._updateScrollState();
}
/**
@@ -120,6 +129,7 @@
this.app.sidebar.highlightActive(session.profileId);
}
this.app.leviathan?.handleTabFocus?.(sessionId);
this._scrollTabIntoView(sessionId);
// Fit and refresh the terminal for the newly active session.
// Double-RAF ensures the panel has layout dimensions before fitting.
@@ -157,12 +167,14 @@
* @param {string} sessionId
*/
async closeTab(sessionId) {
this._hideTabTooltip();
const session = this.app.state.getSession(sessionId);
// Ask for confirmation if connected and the preference is set
if (
session &&
session.state === "connected" &&
session.protocol !== "leviathan" &&
this.app.state.preferences.confirmOnDisconnect
) {
const ok = await this._confirmClose(sessionId);
@@ -191,7 +203,7 @@
*/
_confirmClose(sessionId) {
const createElement = window.NexusTerminal.createElement;
const label = this._tabLabel(sessionId);
const label = escapeHtml(this._tabLabel(sessionId));
return new Promise((resolve) => {
const backdrop = createElement("div", "modal-backdrop");
const modal = createElement("div", "modal modal-sm");
@@ -479,6 +491,18 @@
draggable: "true",
});
// Close button
const closeBtn = createElement("button", "tab-close", {
textContent: "×",
"aria-label": "Close tab",
});
closeBtn.addEventListener("click", (e) => {
e.stopPropagation();
this._hideTabTooltip();
this.closeTab(sessionInfo.id);
});
tab.appendChild(closeBtn);
// Protocol badge
const protoLabel =
sessionInfo.protocol === "github"
@@ -534,17 +558,6 @@
tab.appendChild(sftpBtn);
}
// Close button
const closeBtn = createElement("button", "tab-close", {
textContent: "×",
"aria-label": "Close tab",
});
closeBtn.addEventListener("click", (e) => {
e.stopPropagation();
this.closeTab(sessionInfo.id);
});
tab.appendChild(closeBtn);
// Click → activate
tab.addEventListener("click", () => this.setActive(sessionInfo.id));
@@ -579,6 +592,7 @@
const el = this.tabList.querySelector(`[data-session-id="${id}"]`);
if (el) this.tabList.appendChild(el);
}
this._updateScrollState();
}
/**
@@ -596,6 +610,210 @@
}
}
/**
* Makes the tab strip usable when the tab list overflows horizontally.
* @private
*/
_setupScrolling() {
if (!this.tabList) return;
this.tabList.addEventListener(
"wheel",
(event) => {
if (this.tabList.scrollWidth <= this.tabList.clientWidth) return;
const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY)
? event.deltaX
: event.deltaY;
if (!delta) return;
event.preventDefault();
this.tabList.scrollLeft += delta;
this._updateScrollState();
},
{ passive: false },
);
this.tabList.addEventListener("scroll", () => this._updateScrollState(), {
passive: true,
});
window.addEventListener("resize", () => this._updateScrollState());
}
/**
* Keeps the active tab visible inside the scrollable tab list.
* @param {string} sessionId
* @private
*/
_scrollTabIntoView(sessionId) {
const tab = this.tabList?.querySelector(`[data-session-id="${sessionId}"]`);
if (!tab) return;
requestAnimationFrame(() => {
tab.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "nearest",
});
this._updateScrollState();
});
}
/**
* Reflects whether tab overflow exists at either edge.
* @private
*/
_updateScrollState() {
if (!this.tabList || !this.tabBar) return;
const max = this.tabList.scrollWidth - this.tabList.clientWidth;
this.tabBar.classList.toggle("has-tab-overflow", max > 1);
this.tabBar.classList.toggle("has-overflow-left", this.tabList.scrollLeft > 1);
this.tabBar.classList.toggle(
"has-overflow-right",
max > 1 && this.tabList.scrollLeft < max - 1,
);
}
/**
* Shows a custom hover hint for tabs with full names and connection start.
* @private
*/
_setupTooltip() {
if (!this.tabList) return;
this.tooltip = createElement("div", "tooltip tab-tooltip", {
role: "tooltip",
});
document.body.appendChild(this.tooltip);
this.tabList.addEventListener("pointerover", (event) => {
const tab = event.target.closest(".tab");
if (!tab || !this.tabList.contains(tab)) return;
if (tab.contains(event.relatedTarget)) return;
this._clearTabTooltipTimer();
this.tooltipTimer = setTimeout(() => {
this.tooltipTimer = null;
this._showTabTooltip(tab.dataset.sessionId, tab);
}, 250);
});
this.tabList.addEventListener("pointerdown", () => this._hideTabTooltip());
this.tabList.addEventListener("pointermove", (event) => {
const tab = event.target.closest(".tab");
if (!tab || !this.tooltip?.classList.contains("is-visible")) return;
this._positionTabTooltip(tab);
});
this.tabList.addEventListener("pointerout", (event) => {
const tab = event.target.closest(".tab");
if (!tab || tab.contains(event.relatedTarget)) return;
this._hideTabTooltip();
});
this.tabList.addEventListener("scroll", () => this._hideTabTooltip(), {
passive: true,
});
window.addEventListener("blur", () => this._hideTabTooltip());
document.addEventListener("visibilitychange", () => {
if (document.hidden) this._hideTabTooltip();
});
}
/**
* Renders and positions the tab hover tooltip.
* @param {string} sessionId
* @param {HTMLElement} tab
* @private
*/
_showTabTooltip(sessionId, tab) {
const session = this.app.state.getSession(sessionId);
if (!session || !this.tooltip || !tab?.isConnected || !this.tabList.contains(tab)) {
this._hideTabTooltip();
return;
}
this.tooltip.replaceChildren();
this.tooltip.appendChild(
createElement("div", "tab-tooltip-title", {
textContent: this._tabLabel(sessionId),
}),
);
if (
session.protocol !== "leviathan" &&
session.state === "connected" &&
session.connectedAt
) {
const connected = this._formatConnectedSince(session.connectedAt);
if (connected) {
this.tooltip.appendChild(
createElement("div", "tab-tooltip-meta", {
textContent: `Connected since: ${connected}`,
}),
);
}
}
this._positionTabTooltip(tab);
this.tooltipSessionId = sessionId;
this.tooltip.classList.add("is-visible");
}
/**
* Positions the tab tooltip under the hovered tab.
* @param {HTMLElement} tab
* @private
*/
_positionTabTooltip(tab) {
if (!this.tooltip) return;
if (!tab?.isConnected || !this.tabList.contains(tab)) {
this._hideTabTooltip();
return;
}
const rect = tab.getBoundingClientRect();
const tooltipRect = this.tooltip.getBoundingClientRect();
const left = Math.min(
Math.max(8, rect.left + rect.width / 2 - tooltipRect.width / 2),
window.innerWidth - tooltipRect.width - 8,
);
const top = Math.min(rect.bottom + 8, window.innerHeight - tooltipRect.height - 8);
this.tooltip.style.left = `${left}px`;
this.tooltip.style.top = `${top}px`;
}
/**
* Hides the tab hover tooltip.
* @private
*/
_hideTabTooltip() {
this._clearTabTooltipTimer();
this.tooltipSessionId = null;
if (!this.tooltip) return;
this.tooltip.classList.remove("is-visible");
this.tooltip.replaceChildren();
}
/**
* Cancels any pending tab tooltip show timer.
* @private
*/
_clearTabTooltipTimer() {
if (!this.tooltipTimer) return;
clearTimeout(this.tooltipTimer);
this.tooltipTimer = null;
}
/**
* Formats a session connection timestamp for the tab tooltip.
* @param {string} value
* @returns {string}
* @private
*/
_formatConnectedSince(value) {
const date = new Date(value);
if (Number.isNaN(date.getTime()) || date.getFullYear() <= 1) return "";
try {
return date.toLocaleString([], {
dateStyle: "medium",
timeStyle: "short",
});
} catch (_) {
return date.toLocaleString();
}
}
/**
* Shows/hides the empty-state panel based on whether tabs exist.
* @private