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

Add context menus and SFTP transfer progress handling

Browse Source 
- Implemented context menu styles in components.css.
- Added SFTP transfer progress queue and related styles in sftp.css.
- Enhanced app.js to handle SFTP transfer progress events.
- Updated sftp.js to manage transfer progress and render the transfer queue.
- Modified terminal.js to include context menu shortcuts.
- Adjusted manager.go to emit SFTP transfer progress events with direction.
- Updated sshclient.go to modify terminal modes for better performance.
This commit is contained in:
Andy Dixon
2026-05-21 11:28:37 +01:00
parent 23aaa1b53e
commit 96c603f3f4
7 changed files with 288 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/css/components.css
+78
View File
@@ -899,3 +899,81 @@
@keyframes spin {
to { transform: rotate(360deg); }
}
/* =======================================================================
CONTEXT MENUS
======================================================================= */
.context-menu {
position: fixed;
z-index: var(--z-modal, 1000);
min-width: 180px;
max-width: 260px;
padding: var(--space-1) 0;
background: var(--bg-elevated);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.35),
0 1px 4px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.context-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 6px var(--space-3);
border: none;
background: none;
color: var(--text-primary);
font-size: var(--text-sm);
text-align: left;
cursor: pointer;
transition: background var(--transition-fast);
gap: var(--space-3);
}
.context-menu-item:hover {
background: var(--bg-hover);
}
.context-menu-item:active {
background: var(--bg-active);
}
.context-menu-item.context-menu-disabled {
color: var(--text-disabled);
cursor: not-allowed;
}
.context-menu-item.context-menu-disabled:hover {
background: none;
}
.context-menu-item.context-menu-danger {
color: var(--error);
}
.context-menu-item.context-menu-danger:hover {
background: rgba(239, 83, 80, 0.1);
}
.context-menu-label {
flex: 1;
min-width: 0;
}
.context-menu-shortcut {
font-size: 11px;
color: var(--text-tertiary);
flex-shrink: 0;
margin-left: var(--space-3);
}
.context-menu-divider {
height: 1px;
margin: var(--space-1) 0;
background: var(--border-subtle);
}
frontend/src/css/sftp.css
+71
View File
@@ -419,3 +419,74 @@
font-size: 10px;
color: var(--text-tertiary);
}
/* -----------------------------------------------------------------------
Transfer progress queue
----------------------------------------------------------------------- */
.sftp-transfer-queue {
flex-shrink: 0;
border-bottom: 1px solid var(--border-subtle);
background: var(--bg-elevated);
max-height: 140px;
overflow-y: auto;
}
.sftp-transfer-header {
font-size: 10px;
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-tertiary);
padding: var(--space-1) var(--space-2) 0;
}
.sftp-transfer-row {
display: flex;
align-items: center;
gap: var(--space-1);
padding: 4px var(--space-2);
}
.sftp-transfer-icon {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--accent);
flex-shrink: 0;
width: 16px;
text-align: center;
}
.sftp-transfer-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.sftp-transfer-name {
font-size: var(--text-xs);
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sftp-transfer-progress {
height: 3px;
background: var(--border-subtle);
border-radius: 2px;
overflow: hidden;
}
.sftp-transfer-bar {
height: 100%;
background: var(--accent);
border-radius: 2px;
transition: width 0.15s ease-out;
}
.sftp-transfer-meta {
font-size: 10px;
color: var(--text-tertiary);
}
frontend/src/js/app.js
+8
View File
@@ -213,9 +213,12 @@
}
}
// Also re-fit to catch any layout changes that occurred while connecting.
// Multiple delays help byobu/tmux render correctly after its status
// bar initialisation completes.
const fit = () => this.terminals.fitSession(payload.sessionID);
setTimeout(fit, 50);
setTimeout(fit, 300);
setTimeout(fit, 800);
}
});
@@ -319,6 +322,11 @@
}
});
// SFTP transfer progress events
window.runtime.EventsOn("session:sftp:progress", (payload) => {
this.sftp.handleTransferProgress(payload);
});
// Password/passphrase prompt requests from the backend
window.runtime.EventsOn("session:secret:prompt", async (payload) => {
try {
frontend/src/js/sftp.js
+107
View File
@@ -784,6 +784,113 @@
});
}
/* ── Transfer progress queue ─────────────────────────────────── */
/**
* Handles a transfer progress event from the backend.
* @param {Object} payload - { sessionID, direction, transferred, total, path, done }
*/
handleTransferProgress(payload) {
var state = this.panels.get(payload.sessionID);
if (!state) {
// Panel not open — still track so we can show a notification on completion
if (payload.done) {
var dir = payload.direction === "upload" ? "↑ Uploaded" : "↓ Downloaded";
var name = payload.path.split("/").pop() || payload.path;
this.app.notifications.success(dir + " " + name);
}
return;
}
// Initialise transfers map if needed
if (!state.transfers) state.transfers = new Map();
var key = payload.direction + ":" + payload.path;
if (payload.done) {
state.transfers.delete(key);
this._renderTransferQueue(payload.sessionID);
// Refresh file list after upload completes
if (payload.direction === "upload") {
this._refresh(payload.sessionID);
}
return;
}
state.transfers.set(key, {
direction: payload.direction,
path: payload.path,
name: payload.path.split("/").pop() || payload.path,
transferred: payload.transferred,
total: payload.total,
});
this._renderTransferQueue(payload.sessionID);
}
/**
* Renders the transfer queue panel showing active transfers.
*/
_renderTransferQueue(sessionId) {
var state = this.panels.get(sessionId);
if (!state) return;
var queue = state.el.querySelector(".sftp-transfer-queue");
if (!state.transfers || state.transfers.size === 0) {
if (queue) queue.remove();
return;
}
if (!queue) {
queue = createElement("div", "sftp-transfer-queue");
// Insert between toolbar and file-list
var fileList = state.el.querySelector(".sftp-file-list");
state.el.insertBefore(queue, fileList);
}
queue.innerHTML = "";
var header = createElement("div", "sftp-transfer-header");
header.textContent = "Transfers (" + state.transfers.size + ")";
queue.appendChild(header);
var self = this;
state.transfers.forEach(function (transfer) {
var row = createElement("div", "sftp-transfer-row");
var icon = createElement("span", "sftp-transfer-icon");
icon.textContent = transfer.direction === "upload" ? "↑" : "↓";
row.appendChild(icon);
var info = createElement("div", "sftp-transfer-info");
var nameEl = createElement("span", "sftp-transfer-name", {
textContent: transfer.name,
title: transfer.path,
});
info.appendChild(nameEl);
var progress = createElement("div", "sftp-transfer-progress");
var bar = createElement("div", "sftp-transfer-bar");
var pct = transfer.total > 0
? Math.min(100, Math.round((transfer.transferred / transfer.total) * 100))
: 0;
bar.style.width = pct + "%";
progress.appendChild(bar);
info.appendChild(progress);
var meta = createElement("span", "sftp-transfer-meta");
var transferredStr = formatBytes(transfer.transferred);
var totalStr = transfer.total > 0 ? formatBytes(transfer.total) : "?";
meta.textContent = transferredStr + " / " + totalStr + " (" + pct + "%)";
info.appendChild(meta);
row.appendChild(info);
queue.appendChild(row);
});
}
/* ── Resize handle ────────────────────────────────────────────── */
_setupResize(sessionId, state) {
frontend/src/js/terminal.js
+18 -1
View File
@@ -47,6 +47,8 @@
allowProposedApi: true,
convertEol: false,
windowsMode: false,
scrollOnUserInput: true,
altClickMovesCursor: true,
});
// Load addons
@@ -504,6 +506,8 @@
const { createElement, dismissContextMenus } = window.NexusTerminal;
dismissContextMenus();
const isMac = navigator.platform.indexOf("Mac") !== -1;
const modKey = isMac ? "⌘" : "Ctrl+";
const hasSelection = term.hasSelection();
const menu = createElement("div", "context-menu");
menu.style.left = `${x}px`;
@@ -512,6 +516,7 @@
const items = [
{
label: "Copy",
shortcut: modKey + "C",
disabled: !hasSelection,
action: () => {
const text = term.getSelection();
@@ -527,6 +532,7 @@
},
{
label: "Paste",
shortcut: modKey + "V",
action: () => {
if (window.runtime && window.runtime.ClipboardGetText) {
window.runtime
@@ -548,10 +554,12 @@
{ divider: true },
{
label: "Select All",
shortcut: modKey + "A",
action: () => term.selectAll(),
},
{
label: "Find…",
shortcut: modKey + "F",
action: () => this.app._openTerminalSearch(),
},
{
@@ -561,6 +569,7 @@
{ divider: true },
{
label: "Clear Terminal",
shortcut: modKey + "K",
action: () => term.clear(),
},
{
@@ -574,9 +583,17 @@
menu.appendChild(createElement("div", "context-menu-divider"));
continue;
}
const btn = createElement("button", "context-menu-item", {
const btn = createElement("button", "context-menu-item");
const labelSpan = createElement("span", "context-menu-label", {
textContent: entry.label,
});
btn.appendChild(labelSpan);
if (entry.shortcut) {
const shortcutSpan = createElement("span", "context-menu-shortcut", {
textContent: entry.shortcut,
});
btn.appendChild(shortcutSpan);
}
if (entry.disabled) {
btn.disabled = true;
btn.classList.add("context-menu-disabled");