Add edit button to sidebar items and fix initial terminal fit
- Add pencil edit button on each sidebar profile item (visible on hover) - Fire fitAddon.fit() multiple times after terminal creation (50/150/400ms) to catch the panel finishing its CSS layout - Re-fit terminal when session:state transitions to 'connected'
This commit is contained in:
@@ -212,6 +212,33 @@
|
|||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Edit button (appears on hover, beside name) */
|
||||||
|
.sidebar-item-edit {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-disabled);
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item:hover .sidebar-item-edit {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item-edit:hover {
|
||||||
|
color: var(--accent);
|
||||||
|
background: var(--bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
/* Favourite star */
|
/* Favourite star */
|
||||||
.sidebar-item-star {
|
.sidebar-item-star {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|||||||
@@ -134,6 +134,10 @@ class App {
|
|||||||
window.runtime.EventsOn('session:state', (payload) => {
|
window.runtime.EventsOn('session:state', (payload) => {
|
||||||
this.tabs.updateSessionState(payload.sessionID, payload.state, payload.error);
|
this.tabs.updateSessionState(payload.sessionID, payload.state, payload.error);
|
||||||
this.updateStatusBar();
|
this.updateStatusBar();
|
||||||
|
// Re-fit the terminal once connected so it picks up the final container size
|
||||||
|
if (payload.state === 'connected') {
|
||||||
|
setTimeout(() => this.terminals.fitActive(), 50);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Session closed by backend
|
// Session closed by backend
|
||||||
|
|||||||
@@ -170,6 +170,17 @@ class Sidebar {
|
|||||||
textWrapper.appendChild(subEl);
|
textWrapper.appendChild(subEl);
|
||||||
item.appendChild(textWrapper);
|
item.appendChild(textWrapper);
|
||||||
|
|
||||||
|
// Edit button (visible on hover)
|
||||||
|
const editBtn = createElement('button', 'sidebar-item-edit', {
|
||||||
|
textContent: '✎',
|
||||||
|
title: 'Edit profile',
|
||||||
|
});
|
||||||
|
editBtn.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.app.profileEditor.openEdit(profile.id);
|
||||||
|
});
|
||||||
|
item.appendChild(editBtn);
|
||||||
|
|
||||||
// Favourite star
|
// Favourite star
|
||||||
if (profile.favourite) {
|
if (profile.favourite) {
|
||||||
const star = createElement('span', 'sidebar-item-star is-favourite', { textContent: '★' });
|
const star = createElement('span', 'sidebar-item-star is-favourite', { textContent: '★' });
|
||||||
|
|||||||
@@ -67,8 +67,14 @@ class TerminalManager {
|
|||||||
const container = document.getElementById(containerId);
|
const container = document.getElementById(containerId);
|
||||||
term.open(container);
|
term.open(container);
|
||||||
|
|
||||||
// Initial fit
|
// Fit the terminal once the container has had time to lay out.
|
||||||
requestAnimationFrame(() => fitAddon.fit());
|
// A single requestAnimationFrame is not enough — the panel may
|
||||||
|
// still be transitioning from display:none, so we retry briefly.
|
||||||
|
const doFit = () => { try { fitAddon.fit(); } catch (_) { /* noop */ } };
|
||||||
|
requestAnimationFrame(doFit);
|
||||||
|
setTimeout(doFit, 50);
|
||||||
|
setTimeout(doFit, 150);
|
||||||
|
setTimeout(doFit, 400);
|
||||||
|
|
||||||
// Forward user keystrokes to the backend
|
// Forward user keystrokes to the backend
|
||||||
term.onData((data) => {
|
term.onData((data) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user