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:
2026-04-15 00:00:00 +01:00
parent 018f25e601
commit e5bfd80ae9
4 changed files with 50 additions and 2 deletions
+27
View File
@@ -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;
+4
View File
@@ -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
+11
View File
@@ -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: '★' });
+8 -2
View File
@@ -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) => {