feat: add SFTP drag-and-drop file handling and upload functionality
- Implemented drag-and-drop support for file uploads in the terminal. - Added a modal for users to choose between uploading files or pasting contents. - Enhanced SFTP browser with a directory picker for selecting upload destinations. - Introduced methods for handling file uploads and reading file contents from the local system. - Added a new API endpoint for uploading raw file data to the server. - Implemented session management improvements to retrieve the current working directory for SSH sessions. - Updated documentation to include an overview and quick start guide for Nexus Terminal.
This commit is contained in:
Andy Dixon
@@ -113,6 +113,13 @@
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.modal-body.sftp-picker-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.modal-body p {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
|
||||
@@ -189,6 +189,20 @@
|
||||
background: var(--accent-strong);
|
||||
}
|
||||
|
||||
.sftp-file-row.is-readonly .sftp-file-meta {
|
||||
color: var(--warning);
|
||||
font-weight: var(--weight-semibold);
|
||||
}
|
||||
|
||||
.sftp-file-row.is-unreadable {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.sftp-file-row.is-unreadable .sftp-file-name {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.sftp-file-icon {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
@@ -337,3 +351,63 @@
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--accent-muted);
|
||||
}
|
||||
|
||||
/* Picker-specific input in the toolbar */
|
||||
.sftp-picker-filter {
|
||||
width: 160px;
|
||||
height: 26px;
|
||||
padding: 0 var(--space-2);
|
||||
font-size: var(--text-xs);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-input);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.sftp-picker-filter:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 2px var(--accent-muted);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sftp-picker-status {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
margin-right: var(--space-2);
|
||||
}
|
||||
|
||||
.sftp-picker-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 18px;
|
||||
padding: 0 var(--space-2);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 10px;
|
||||
font-weight: var(--weight-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
border: 1px solid var(--border-default);
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.sftp-picker-badge.is-readonly {
|
||||
border-color: rgba(255, 167, 38, 0.35);
|
||||
color: var(--warning);
|
||||
background: rgba(255, 167, 38, 0.12);
|
||||
}
|
||||
|
||||
.sftp-picker-badge.is-noread {
|
||||
border-color: rgba(239, 83, 80, 0.35);
|
||||
color: var(--error);
|
||||
background: rgba(239, 83, 80, 0.12);
|
||||
}
|
||||
|
||||
.sftp-picker-legend {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
font-size: 10px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
+241
-210
@@ -8,335 +8,366 @@
|
||||
Individual tab
|
||||
----------------------------------------------------------------------- */
|
||||
.tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
height: var(--tab-bar-height);
|
||||
padding: 0 var(--space-3);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid var(--border-subtle);
|
||||
transition:
|
||||
background var(--transition-fast),
|
||||
color var(--transition-fast);
|
||||
user-select: none;
|
||||
max-width: 200px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
height: var(--tab-bar-height);
|
||||
padding: 0 var(--space-3);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid var(--border-subtle);
|
||||
transition:
|
||||
background var(--transition-fast),
|
||||
color var(--transition-fast);
|
||||
user-select: none;
|
||||
max-width: 200px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Active tab */
|
||||
.tab.active {
|
||||
background: var(--bg-base);
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-base);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Active indicator — accent bar at the bottom */
|
||||
.tab.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
border-radius: var(--radius-full) var(--radius-full) 0 0;
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
border-radius: var(--radius-full) var(--radius-full) 0 0;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Tab icon (small terminal/protocol icon)
|
||||
----------------------------------------------------------------------- */
|
||||
.tab-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.tab.active .tab-icon {
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Tab label
|
||||
----------------------------------------------------------------------- */
|
||||
.tab-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
.tab-label,
|
||||
.tab-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Protocol mini-badge inside tab
|
||||
----------------------------------------------------------------------- */
|
||||
.tab-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 14px;
|
||||
padding: 0 3px;
|
||||
font-size: 9px;
|
||||
font-weight: var(--weight-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 14px;
|
||||
padding: 0 3px;
|
||||
font-size: 9px;
|
||||
font-weight: var(--weight-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tab-badge.badge-ssh {
|
||||
background: rgba(78, 205, 196, 0.15);
|
||||
color: var(--protocol-ssh);
|
||||
background: rgba(78, 205, 196, 0.15);
|
||||
color: var(--protocol-ssh);
|
||||
}
|
||||
.tab-badge.badge-telnet {
|
||||
background: rgba(255, 167, 38, 0.15);
|
||||
color: var(--protocol-telnet);
|
||||
background: rgba(255, 167, 38, 0.15);
|
||||
color: var(--protocol-telnet);
|
||||
}
|
||||
.tab-badge.badge-raw {
|
||||
background: rgba(171, 71, 188, 0.15);
|
||||
color: var(--protocol-raw);
|
||||
background: rgba(171, 71, 188, 0.15);
|
||||
color: var(--protocol-raw);
|
||||
}
|
||||
.tab-badge.badge-github {
|
||||
background: rgba(124, 138, 255, 0.15);
|
||||
color: var(--protocol-github);
|
||||
background: rgba(124, 138, 255, 0.15);
|
||||
color: var(--protocol-github);
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Status dot (connection state)
|
||||
----------------------------------------------------------------------- */
|
||||
.tab-status {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: var(--text-tertiary);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.tab-status.is-connected { background: var(--success); }
|
||||
.tab-status.is-connecting { background: var(--warning); animation: pulse-dot 1.2s ease infinite; }
|
||||
.tab-status.is-reconnecting { background: var(--warning); animation: pulse-dot 0.8s ease infinite; }
|
||||
.tab-status.is-error { background: var(--error); }
|
||||
.tab-status.is-disconnected { background: var(--text-tertiary); }
|
||||
.tab-status.is-connected {
|
||||
background: var(--success);
|
||||
}
|
||||
.tab-status.is-connecting {
|
||||
background: var(--warning);
|
||||
animation: pulse-dot 1.2s ease infinite;
|
||||
}
|
||||
.tab-status.is-reconnecting {
|
||||
background: var(--warning);
|
||||
animation: pulse-dot 0.8s ease infinite;
|
||||
}
|
||||
.tab-status.is-error {
|
||||
background: var(--error);
|
||||
}
|
||||
.tab-status.is-disconnected {
|
||||
background: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* Also match the status-* pattern used by updateSessionState */
|
||||
.tab-status.status-connected { background: var(--success); }
|
||||
.tab-status.status-connecting { background: var(--warning); animation: pulse-dot 1.2s ease infinite; }
|
||||
.tab-status.status-reconnecting { background: var(--warning); animation: pulse-dot 0.8s ease infinite; }
|
||||
.tab-status.status-error { background: var(--error); }
|
||||
.tab-status.status-disconnected { background: var(--text-tertiary); }
|
||||
.tab-status.status-connected {
|
||||
background: var(--success);
|
||||
}
|
||||
.tab-status.status-connecting {
|
||||
background: var(--warning);
|
||||
animation: pulse-dot 1.2s ease infinite;
|
||||
}
|
||||
.tab-status.status-reconnecting {
|
||||
background: var(--warning);
|
||||
animation: pulse-dot 0.8s ease infinite;
|
||||
}
|
||||
.tab-status.status-error {
|
||||
background: var(--error);
|
||||
}
|
||||
.tab-status.status-disconnected {
|
||||
background: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
SFTP toggle button — revealed on hover (SSH tabs only)
|
||||
----------------------------------------------------------------------- */
|
||||
.tab-sftp {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 10px;
|
||||
color: var(--text-tertiary);
|
||||
flex-shrink: 0;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity var(--transition-fast),
|
||||
background var(--transition-fast),
|
||||
color var(--transition-fast);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin-left: auto;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 10px;
|
||||
color: var(--text-tertiary);
|
||||
flex-shrink: 0;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity var(--transition-fast),
|
||||
background var(--transition-fast),
|
||||
color var(--transition-fast);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.tab:hover .tab-sftp,
|
||||
.tab.active .tab-sftp {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tab-sftp:hover {
|
||||
background: var(--bg-active);
|
||||
color: var(--accent);
|
||||
background: var(--bg-active);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Close button — revealed on hover
|
||||
----------------------------------------------------------------------- */
|
||||
.tab-close {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
flex-shrink: 0;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity var(--transition-fast),
|
||||
background var(--transition-fast),
|
||||
color var(--transition-fast);
|
||||
cursor: pointer;
|
||||
margin-left: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
flex-shrink: 0;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity var(--transition-fast),
|
||||
background var(--transition-fast),
|
||||
color var(--transition-fast);
|
||||
cursor: pointer;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.tab:hover .tab-close,
|
||||
.tab.active .tab-close {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tab-close:hover {
|
||||
background: var(--bg-active);
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-active);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Pin indicator
|
||||
----------------------------------------------------------------------- */
|
||||
.tab-pin {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 9px;
|
||||
color: var(--text-disabled);
|
||||
flex-shrink: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 9px;
|
||||
color: var(--text-disabled);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab.is-pinned .tab-pin {
|
||||
color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Pinned tabs are always narrow */
|
||||
.tab.is-pinned {
|
||||
max-width: 100px;
|
||||
padding: 0 var(--space-2);
|
||||
max-width: 100px;
|
||||
padding: 0 var(--space-2);
|
||||
}
|
||||
|
||||
.tab.is-pinned .tab-label {
|
||||
/* Hide label on pinned tabs to save space */
|
||||
display: none;
|
||||
/* Hide label on pinned tabs to save space */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab.is-pinned .tab-close {
|
||||
/* Pinned tabs don't show close by default */
|
||||
display: none;
|
||||
/* Pinned tabs don't show close by default */
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Drag handle area (for tab reordering)
|
||||
----------------------------------------------------------------------- */
|
||||
.tab-drag-handle {
|
||||
cursor: grab;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
cursor: grab;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-drag-handle:active {
|
||||
cursor: grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* Drag ghost styling */
|
||||
.tab.is-dragging {
|
||||
opacity: 0.5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.tab.is-drag-over-left::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
width: 2px;
|
||||
background: var(--accent);
|
||||
border-radius: var(--radius-full);
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
width: 2px;
|
||||
background: var(--accent);
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.tab.is-drag-over-right::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
width: 2px;
|
||||
background: var(--accent);
|
||||
border-radius: var(--radius-full);
|
||||
/* Note: this re-uses ::after — active tab indicator is overridden while dragging */
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
width: 2px;
|
||||
background: var(--accent);
|
||||
border-radius: var(--radius-full);
|
||||
/* Note: this re-uses ::after — active tab indicator is overridden while dragging */
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
New-tab button (+)
|
||||
----------------------------------------------------------------------- */
|
||||
.tab-new {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--tab-bar-height);
|
||||
height: var(--tab-bar-height);
|
||||
font-size: var(--text-lg);
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: background var(--transition-fast), color var(--transition-fast);
|
||||
border: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--tab-bar-height);
|
||||
height: var(--tab-bar-height);
|
||||
font-size: var(--text-lg);
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition:
|
||||
background var(--transition-fast),
|
||||
color var(--transition-fast);
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.tab-new:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tab-new:active {
|
||||
background: var(--bg-active);
|
||||
background: var(--bg-active);
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Broadcast toggle button
|
||||
----------------------------------------------------------------------- */
|
||||
.tab-broadcast {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--tab-bar-height);
|
||||
height: var(--tab-bar-height);
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: background var(--transition-fast), color var(--transition-fast);
|
||||
border: none;
|
||||
background: none;
|
||||
opacity: 0.5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--tab-bar-height);
|
||||
height: var(--tab-bar-height);
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition:
|
||||
background var(--transition-fast),
|
||||
color var(--transition-fast);
|
||||
border: none;
|
||||
background: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.tab-broadcast:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
opacity: 0.8;
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tab-broadcast.is-active {
|
||||
color: var(--error);
|
||||
opacity: 1;
|
||||
animation: pulse-dot 1.5s ease infinite;
|
||||
color: var(--error);
|
||||
opacity: 1;
|
||||
animation: pulse-dot 1.5s ease infinite;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
@@ -344,41 +375,41 @@
|
||||
----------------------------------------------------------------------- */
|
||||
.tab-bar-overflow-left,
|
||||
.tab-bar-overflow-right {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
flex-shrink: 0;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
background: linear-gradient(90deg, var(--bg-surface), transparent);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
flex-shrink: 0;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
background: linear-gradient(90deg, var(--bg-surface), transparent);
|
||||
}
|
||||
|
||||
.tab-bar-overflow-right {
|
||||
background: linear-gradient(-90deg, var(--bg-surface), transparent);
|
||||
background: linear-gradient(-90deg, var(--bg-surface), transparent);
|
||||
}
|
||||
|
||||
.tab-bar.has-overflow-left .tab-bar-overflow-left,
|
||||
.tab-bar.has-overflow-right .tab-bar-overflow-right {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Tab context menu trigger (on right-click)
|
||||
----------------------------------------------------------------------- */
|
||||
.tab-context-area {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
/* Transparent hit area for right-click context menu */
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
/* Transparent hit area for right-click context menu */
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Modified indicator (unsaved changes)
|
||||
----------------------------------------------------------------------- */
|
||||
.tab.is-modified .tab-close::before {
|
||||
content: '●';
|
||||
font-size: 8px;
|
||||
color: var(--accent);
|
||||
content: "●";
|
||||
font-size: 8px;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
@@ -158,6 +158,16 @@ class SFTPBrowser {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the current directory for an open SFTP panel, or an empty string.
|
||||
* @param {string} sessionId
|
||||
* @returns {string}
|
||||
*/
|
||||
getCwd(sessionId) {
|
||||
var state = this.panels.get(sessionId);
|
||||
return state ? state.cwd : '';
|
||||
}
|
||||
|
||||
/* ── Toolbar ──────────────────────────────────────────────────── */
|
||||
|
||||
_buildToolbar(sessionId, state) {
|
||||
|
||||
@@ -102,6 +102,21 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Drag-and-drop file handling
|
||||
container.addEventListener("dragover", (e) => {
|
||||
if (e.dataTransfer && Array.from(e.dataTransfer.types || []).includes("Files")) {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = "copy";
|
||||
}
|
||||
});
|
||||
container.addEventListener("drop", (e) => {
|
||||
const files = e.dataTransfer ? e.dataTransfer.files : null;
|
||||
if (!files || files.length === 0) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this._handleFileDrop(sessionId, term, files);
|
||||
});
|
||||
|
||||
// Force a synchronous layout reflow so the container reports its
|
||||
// true dimensions, then fit the terminal to fill the space.
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
@@ -509,6 +524,526 @@
|
||||
menu.style.top = `${window.innerHeight - rect.height - 8}px`;
|
||||
}
|
||||
|
||||
_handleFileDrop(sessionId, term, fileList) {
|
||||
const session = this.app.state.getSession(sessionId);
|
||||
if (!session) return;
|
||||
|
||||
const files = Array.from(fileList || []);
|
||||
if (files.length === 0) return;
|
||||
|
||||
const canUpload = session.protocol === "ssh";
|
||||
this._promptFileDropAction(files, canUpload).then((choice) => {
|
||||
if (!choice) return;
|
||||
if (choice === "paste") {
|
||||
this._pasteFileContents(files, term);
|
||||
return;
|
||||
}
|
||||
if (choice === "upload") {
|
||||
if (!canUpload) {
|
||||
this.app.notifications.error("Upload is only available for SSH sessions.");
|
||||
return;
|
||||
}
|
||||
this._uploadDroppedFiles(sessionId, files);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_promptFileDropAction(files, canUpload) {
|
||||
const { createElement, formatBytes } = window.NexusTerminal;
|
||||
return new Promise((resolve) => {
|
||||
const backdrop = createElement("div", "modal-backdrop");
|
||||
const modal = createElement("div", "modal modal-sm");
|
||||
const count = files.length;
|
||||
const first = files[0];
|
||||
const sizeLabel = first && typeof first.size === "number" ? formatBytes(first.size) : "";
|
||||
const title = count === 1 ? (first ? first.name : "File") : count + " files";
|
||||
|
||||
modal.innerHTML = `
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">File Drop</h3>
|
||||
<button class="btn btn-icon btn-xs modal-close">x</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p style="font-size:var(--text-sm);color:var(--text-secondary)">
|
||||
<strong>${title}</strong>${count === 1 && sizeLabel ? " (" + sizeLabel + ")" : ""}
|
||||
</p>
|
||||
<p style="font-size:var(--text-sm);color:var(--text-tertiary)">
|
||||
Choose what to do with the dropped ${count === 1 ? "file" : "files"}.
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-sm prompt-cancel">Cancel</button>
|
||||
<button class="btn btn-sm btn-secondary action-paste">Paste contents</button>
|
||||
<button class="btn btn-sm btn-primary action-upload">Upload to current directory</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
backdrop.appendChild(modal);
|
||||
document.body.appendChild(backdrop);
|
||||
requestAnimationFrame(() => {
|
||||
backdrop.classList.add("is-visible");
|
||||
modal.classList.add("is-visible");
|
||||
});
|
||||
|
||||
const uploadBtn = modal.querySelector(".action-upload");
|
||||
if (!canUpload) {
|
||||
uploadBtn.disabled = true;
|
||||
uploadBtn.title = "Upload is only available for SSH sessions.";
|
||||
}
|
||||
|
||||
const close = (value) => {
|
||||
backdrop.classList.remove("is-visible");
|
||||
modal.classList.remove("is-visible");
|
||||
setTimeout(() => backdrop.remove(), 200);
|
||||
resolve(value);
|
||||
};
|
||||
|
||||
modal
|
||||
.querySelector(".modal-close")
|
||||
.addEventListener("click", () => close(null));
|
||||
modal
|
||||
.querySelector(".prompt-cancel")
|
||||
.addEventListener("click", () => close(null));
|
||||
modal
|
||||
.querySelector(".action-paste")
|
||||
.addEventListener("click", () => close("paste"));
|
||||
uploadBtn.addEventListener("click", () => close("upload"));
|
||||
backdrop.addEventListener("click", (e) => {
|
||||
if (e.target === backdrop) close(null);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
_pasteFileContents(files, term) {
|
||||
const readFile = (file) =>
|
||||
new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => resolve(reader.result || "");
|
||||
reader.onerror = () => reject(new Error("read failed"));
|
||||
reader.readAsText(file);
|
||||
});
|
||||
|
||||
const run = async () => {
|
||||
try {
|
||||
let combined = "";
|
||||
for (let i = 0; i < files.length; i += 1) {
|
||||
const text = await readFile(files[i]);
|
||||
if (text) {
|
||||
if (combined) combined += "\n";
|
||||
combined += text;
|
||||
}
|
||||
}
|
||||
if (combined) term.paste(combined);
|
||||
} catch (_) {
|
||||
this.app.notifications.error("Failed to read file contents.");
|
||||
}
|
||||
};
|
||||
|
||||
run();
|
||||
}
|
||||
|
||||
_uploadDroppedFiles(sessionId, files) {
|
||||
const run = async () => {
|
||||
const remoteDir = await this._promptUploadDirectory(sessionId);
|
||||
if (!remoteDir) return;
|
||||
|
||||
if (files.length > 1) {
|
||||
this.app.notifications.info("Uploading " + files.length + " files...");
|
||||
}
|
||||
|
||||
for (let i = 0; i < files.length; i += 1) {
|
||||
const file = files[i];
|
||||
try {
|
||||
const buffer = await this._readFileBuffer(file);
|
||||
const base64Data = this._arrayBufferToBase64(buffer);
|
||||
await window.go.api.Service.SFTPUploadData(
|
||||
sessionId,
|
||||
remoteDir,
|
||||
file.name,
|
||||
base64Data,
|
||||
);
|
||||
} catch (err) {
|
||||
const msg = err && err.message ? err.message : String(err);
|
||||
this.app.notifications.error("Upload failed for " + file.name + ": " + msg);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (files.length === 1) {
|
||||
this.app.notifications.success("Uploaded " + files[0].name);
|
||||
} else {
|
||||
this.app.notifications.success("Uploaded " + files.length + " files");
|
||||
}
|
||||
};
|
||||
|
||||
run().catch((err) => {
|
||||
const msg = err && err.message ? err.message : String(err);
|
||||
this.app.notifications.error("Upload failed: " + msg);
|
||||
});
|
||||
}
|
||||
|
||||
_readFileBuffer(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => resolve(reader.result);
|
||||
reader.onerror = () => reject(new Error("read failed"));
|
||||
reader.readAsArrayBuffer(file);
|
||||
});
|
||||
}
|
||||
|
||||
async _promptUploadDirectory(sessionId) {
|
||||
return this._openUploadDirectoryPicker(sessionId);
|
||||
}
|
||||
|
||||
_openUploadDirectoryPicker(sessionId) {
|
||||
const { createElement, escapeHtml } = window.NexusTerminal;
|
||||
return new Promise((resolve) => {
|
||||
const backdrop = createElement("div", "modal-backdrop");
|
||||
const modal = createElement("div", "modal modal-lg");
|
||||
modal.innerHTML = `
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Select Upload Directory</h3>
|
||||
<button class="btn btn-icon btn-xs modal-close">x</button>
|
||||
</div>
|
||||
<div class="modal-body sftp-picker-body">
|
||||
<div class="sftp-toolbar">
|
||||
<div class="sftp-breadcrumb" data-role="breadcrumb"></div>
|
||||
<input class="sftp-picker-filter" type="text" placeholder="Filter folders" />
|
||||
<div class="sftp-toolbar-actions">
|
||||
<button class="sftp-toolbar-btn sftp-picker-up" title="Up">Up</button>
|
||||
<button class="sftp-toolbar-btn sftp-picker-refresh" title="Refresh">Ref</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sftp-file-list sftp-picker-list"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="modal-footer-left">
|
||||
<span class="form-help sftp-picker-path"></span>
|
||||
<span class="sftp-picker-status"></span>
|
||||
<span class="sftp-picker-legend">
|
||||
<span class="sftp-picker-badge is-readonly">READ ONLY</span>
|
||||
<span class="sftp-picker-badge is-noread">NO READ</span>
|
||||
</span>
|
||||
</div>
|
||||
<button class="btn btn-sm prompt-cancel">Cancel</button>
|
||||
<button class="btn btn-sm btn-primary prompt-ok">Use this folder</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
backdrop.appendChild(modal);
|
||||
document.body.appendChild(backdrop);
|
||||
requestAnimationFrame(() => {
|
||||
backdrop.classList.add("is-visible");
|
||||
modal.classList.add("is-visible");
|
||||
});
|
||||
|
||||
const listEl = modal.querySelector(".sftp-picker-list");
|
||||
const breadcrumbEl = modal.querySelector("[data-role=\"breadcrumb\"]");
|
||||
const pathLabel = modal.querySelector(".sftp-picker-path");
|
||||
const upBtn = modal.querySelector(".sftp-picker-up");
|
||||
const refreshBtn = modal.querySelector(".sftp-picker-refresh");
|
||||
const useBtn = modal.querySelector(".prompt-ok");
|
||||
const filterInput = modal.querySelector(".sftp-picker-filter");
|
||||
const statusLabel = modal.querySelector(".sftp-picker-status");
|
||||
|
||||
const state = {
|
||||
cwd: "",
|
||||
selected: "",
|
||||
selectedWritable: true,
|
||||
cwdWritable: true,
|
||||
entries: [],
|
||||
visibleEntries: [],
|
||||
loading: false,
|
||||
filter: "",
|
||||
cursorIndex: -1,
|
||||
};
|
||||
|
||||
const close = (value) => {
|
||||
backdrop.classList.remove("is-visible");
|
||||
modal.classList.remove("is-visible");
|
||||
setTimeout(() => backdrop.remove(), 200);
|
||||
resolve(value);
|
||||
};
|
||||
|
||||
modal
|
||||
.querySelector(".modal-close")
|
||||
.addEventListener("click", () => close(null));
|
||||
modal
|
||||
.querySelector(".prompt-cancel")
|
||||
.addEventListener("click", () => close(null));
|
||||
useBtn.addEventListener("click", () => close(state.selected || state.cwd));
|
||||
backdrop.addEventListener("click", (e) => {
|
||||
if (e.target === backdrop) close(null);
|
||||
});
|
||||
|
||||
const renderBreadcrumb = () => {
|
||||
breadcrumbEl.innerHTML = "";
|
||||
const segments = this._pathSegments(state.cwd);
|
||||
for (let i = 0; i < segments.length; i += 1) {
|
||||
if (i > 0) {
|
||||
breadcrumbEl.appendChild(
|
||||
createElement("span", "sftp-breadcrumb-sep", { textContent: ">" }),
|
||||
);
|
||||
}
|
||||
const seg = segments[i];
|
||||
const btn = createElement("button", "sftp-breadcrumb-segment", {
|
||||
textContent: seg.label,
|
||||
title: seg.path,
|
||||
});
|
||||
btn.addEventListener("click", () => loadDir(seg.path));
|
||||
breadcrumbEl.appendChild(btn);
|
||||
}
|
||||
};
|
||||
|
||||
const updateStatus = () => {
|
||||
if (state.selected) {
|
||||
statusLabel.textContent = state.selectedWritable ? "" : "No write permission";
|
||||
} else {
|
||||
statusLabel.textContent = state.cwdWritable ? "" : "Current folder is read only";
|
||||
}
|
||||
};
|
||||
|
||||
const setSelection = (entry, index) => {
|
||||
listEl.querySelectorAll(".sftp-file-row").forEach((el) => {
|
||||
el.classList.remove("is-selected");
|
||||
});
|
||||
const row = listEl.querySelector(`.sftp-file-row[data-index="${index}"]`);
|
||||
if (row) row.classList.add("is-selected");
|
||||
state.selected = entry.path;
|
||||
state.selectedWritable = entry.canWrite !== false;
|
||||
state.cursorIndex = index;
|
||||
pathLabel.textContent = entry.path;
|
||||
useBtn.disabled = !state.selectedWritable;
|
||||
useBtn.title = state.selectedWritable ? "" : "No write permission";
|
||||
updateStatus();
|
||||
};
|
||||
|
||||
const renderList = () => {
|
||||
listEl.innerHTML = "";
|
||||
const basePath = state.selected || state.cwd || "";
|
||||
const suffix = state.selected ? "" : (state.cwdWritable ? "" : " (read only)");
|
||||
pathLabel.textContent = basePath + suffix;
|
||||
|
||||
if (state.cwd && state.cwd !== "/") {
|
||||
const parentRow = this._buildPickerRow({
|
||||
name: "..",
|
||||
isDir: true,
|
||||
path: this._parentPath(state.cwd),
|
||||
});
|
||||
parentRow.classList.add("is-parent");
|
||||
parentRow.addEventListener("dblclick", () => loadDir(parentRow.dataset.path));
|
||||
listEl.appendChild(parentRow);
|
||||
}
|
||||
|
||||
const filtered = state.filter
|
||||
? state.entries.filter((entry) => entry.name.toLowerCase().includes(state.filter))
|
||||
: state.entries;
|
||||
state.visibleEntries = filtered;
|
||||
|
||||
if (!filtered.length) {
|
||||
const empty = createElement("div", "sftp-state");
|
||||
empty.innerHTML = "<div class=\"sftp-state-icon\">D</div><div class=\"sftp-state-msg\">No folders found</div>";
|
||||
listEl.appendChild(empty);
|
||||
state.cursorIndex = -1;
|
||||
updateStatus();
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((entry, index) => {
|
||||
const row = this._buildPickerRow(entry, index);
|
||||
if (entry.canRead === false) {
|
||||
row.classList.add("is-unreadable");
|
||||
}
|
||||
if (entry.canWrite === false) {
|
||||
row.classList.add("is-readonly");
|
||||
}
|
||||
row.addEventListener("click", () => {
|
||||
if (entry.canRead === false) return;
|
||||
setSelection(entry, index);
|
||||
});
|
||||
row.addEventListener("dblclick", () => {
|
||||
if (entry.canRead === false) return;
|
||||
loadDir(entry.path);
|
||||
});
|
||||
listEl.appendChild(row);
|
||||
});
|
||||
updateStatus();
|
||||
};
|
||||
|
||||
const renderLoading = () => {
|
||||
listEl.innerHTML = "";
|
||||
const s = createElement("div", "sftp-state");
|
||||
s.innerHTML = "<div class=\"sftp-spinner\"></div><div class=\"sftp-state-msg\">Loading...</div>";
|
||||
listEl.appendChild(s);
|
||||
};
|
||||
|
||||
const renderError = (msg) => {
|
||||
listEl.innerHTML = "";
|
||||
const s = createElement("div", "sftp-state");
|
||||
s.innerHTML =
|
||||
"<div class=\"sftp-state-icon\">!</div>" +
|
||||
"<div class=\"sftp-state-msg\">" + escapeHtml(msg) + "</div>" +
|
||||
"<button class=\"btn btn-sm btn-secondary sftp-state-retry\">Retry</button>";
|
||||
const retryBtn = s.querySelector(".sftp-state-retry");
|
||||
if (retryBtn) retryBtn.addEventListener("click", () => loadDir(state.cwd));
|
||||
listEl.appendChild(s);
|
||||
};
|
||||
|
||||
const loadDir = async (path) => {
|
||||
if (state.loading) return;
|
||||
state.loading = true;
|
||||
renderLoading();
|
||||
try {
|
||||
const targetPath = path || (await window.go.api.Service.SFTPPwd(sessionId));
|
||||
const files = await window.go.api.Service.SFTPList(sessionId, targetPath);
|
||||
const stat = await window.go.api.Service.SFTPStat(sessionId, targetPath);
|
||||
state.cwd = targetPath;
|
||||
state.selected = "";
|
||||
state.selectedWritable = true;
|
||||
state.cwdWritable = stat && this._modeCanWrite(stat.mode);
|
||||
state.entries = (files || []).filter((e) => e.isDir).sort((a, b) =>
|
||||
a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
|
||||
);
|
||||
state.entries = state.entries.map((entry) => {
|
||||
const canRead = this._modeCanRead(entry.mode);
|
||||
const canWrite = this._modeCanWrite(entry.mode);
|
||||
return Object.assign({}, entry, { canRead, canWrite });
|
||||
});
|
||||
useBtn.disabled = !state.cwdWritable;
|
||||
useBtn.title = state.cwdWritable ? "" : "No write permission";
|
||||
renderBreadcrumb();
|
||||
renderList();
|
||||
} catch (err) {
|
||||
renderError(err.message || String(err));
|
||||
} finally {
|
||||
state.loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
upBtn.addEventListener("click", () => {
|
||||
if (state.cwd) loadDir(this._parentPath(state.cwd));
|
||||
});
|
||||
refreshBtn.addEventListener("click", () => loadDir(state.cwd));
|
||||
|
||||
filterInput.addEventListener("input", () => {
|
||||
state.filter = filterInput.value.trim().toLowerCase();
|
||||
renderList();
|
||||
});
|
||||
|
||||
const moveSelection = (delta) => {
|
||||
if (!state.visibleEntries.length) return;
|
||||
let idx = state.cursorIndex;
|
||||
const max = state.visibleEntries.length - 1;
|
||||
let attempts = 0;
|
||||
do {
|
||||
idx = idx + delta;
|
||||
if (idx < 0) idx = max;
|
||||
if (idx > max) idx = 0;
|
||||
const entry = state.visibleEntries[idx];
|
||||
if (entry && entry.canRead !== false) {
|
||||
setSelection(entry, idx);
|
||||
return;
|
||||
}
|
||||
attempts += 1;
|
||||
} while (attempts <= max);
|
||||
};
|
||||
|
||||
modal.addEventListener("keydown", (e) => {
|
||||
const isInput = e.target === filterInput;
|
||||
if (isInput && e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
|
||||
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
moveSelection(1);
|
||||
} else if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
moveSelection(-1);
|
||||
} else if (e.key === "Enter") {
|
||||
if (state.selected && state.selectedWritable) {
|
||||
e.preventDefault();
|
||||
close(state.selected);
|
||||
} else if (!state.selected && state.cwd && state.cwdWritable) {
|
||||
e.preventDefault();
|
||||
close(state.cwd);
|
||||
}
|
||||
} else if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
close(null);
|
||||
}
|
||||
});
|
||||
|
||||
const initial = this.app.sftp && typeof this.app.sftp.getCwd === "function"
|
||||
? this.app.sftp.getCwd(sessionId)
|
||||
: "";
|
||||
loadDir(initial || "");
|
||||
});
|
||||
}
|
||||
|
||||
_buildPickerRow(entry, index) {
|
||||
const { createElement } = window.NexusTerminal;
|
||||
const dataset = { path: entry.path || "" };
|
||||
if (typeof index === "number") {
|
||||
dataset.index = String(index);
|
||||
}
|
||||
const row = createElement("div", "sftp-file-row", { dataset });
|
||||
const icon = createElement("span", "sftp-file-icon is-dir", { textContent: "DIR" });
|
||||
const name = createElement("span", "sftp-file-name", {
|
||||
textContent: entry.name || entry.path || "",
|
||||
title: entry.name || entry.path || "",
|
||||
});
|
||||
let metaLabel = "";
|
||||
if (entry.canRead === false) {
|
||||
metaLabel = "NO READ";
|
||||
} else if (entry.canWrite === false) {
|
||||
metaLabel = "READ ONLY";
|
||||
}
|
||||
const meta = createElement("span", "sftp-file-meta", { textContent: metaLabel });
|
||||
row.appendChild(icon);
|
||||
row.appendChild(name);
|
||||
row.appendChild(meta);
|
||||
return row;
|
||||
}
|
||||
|
||||
_modeCanRead(mode) {
|
||||
if (!mode || typeof mode !== "string") return true;
|
||||
return mode.indexOf("r") !== -1;
|
||||
}
|
||||
|
||||
_modeCanWrite(mode) {
|
||||
if (!mode || typeof mode !== "string") return true;
|
||||
return mode.indexOf("w") !== -1;
|
||||
}
|
||||
|
||||
_pathSegments(p) {
|
||||
const parts = (p || "").split("/").filter(Boolean);
|
||||
const segs = [{ label: "/", path: "/" }];
|
||||
let acc = "";
|
||||
for (let i = 0; i < parts.length; i += 1) {
|
||||
acc += "/" + parts[i];
|
||||
segs.push({ label: parts[i], path: acc });
|
||||
}
|
||||
return segs;
|
||||
}
|
||||
|
||||
_parentPath(p) {
|
||||
if (!p || p === "/") return "/";
|
||||
const trimmed = p.replace(/\/+$/, "");
|
||||
const idx = trimmed.lastIndexOf("/");
|
||||
return idx <= 0 ? "/" : trimmed.substring(0, idx);
|
||||
}
|
||||
|
||||
_arrayBufferToBase64(buffer) {
|
||||
if (!buffer) return "";
|
||||
const bytes = new Uint8Array(buffer);
|
||||
let binary = "";
|
||||
const chunkSize = 0x8000;
|
||||
for (let i = 0; i < bytes.length; i += chunkSize) {
|
||||
const chunk = bytes.subarray(i, i + chunkSize);
|
||||
binary += String.fromCharCode.apply(null, chunk);
|
||||
}
|
||||
return btoa(binary);
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds the xterm.js colour theme.
|
||||
* @returns {Object}
|
||||
|
||||
Reference in New Issue
Block a user