Skip to content

Fix vertical three-dot menu button styling #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 24, 2025
Merged

Fix vertical three-dot menu button styling #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0edd296
Add three-dot menu for session management
built-by-as Oct 24, 2025
92b5220
Fix vertical three-dot menu button styling
built-by-as Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 50 additions & 14 deletions renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -363,19 +363,17 @@ function addToSidebar(sessionId: string, name: string, hasActivePty: boolean) {
<span class="truncate session-name-text" data-id="${sessionId}">${name}</span>
<input type="text" class="session-name-input hidden" data-id="${sessionId}" value="${name}" />
</div>
<button class="session-delete-btn" data-id="${sessionId}" title="Delete session">×</button>
<div class="relative">
<button class="session-menu-btn" data-id="${sessionId}" title="Session options">⋯</button>
<div class="session-menu hidden" data-id="${sessionId}">
<button class="session-menu-item rename-session-btn" data-id="${sessionId}">Rename</button>
<button class="session-menu-item delete-session-btn" data-id="${sessionId}">Delete</button>
</div>
</div>
`;

// Click on session name to edit
const nameText = item.querySelector(".session-name-text");
const nameInput = item.querySelector(".session-name-input") as HTMLInputElement;

nameText?.addEventListener("click", (e) => {
e.stopPropagation();
startEditingSessionName(sessionId);
});

// Handle input blur and enter key
const nameInput = item.querySelector(".session-name-input") as HTMLInputElement;
nameInput?.addEventListener("blur", () => {
finishEditingSessionName(sessionId);
});
Expand All @@ -388,18 +386,46 @@ function addToSidebar(sessionId: string, name: string, hasActivePty: boolean) {
}
});

// Click on item to activate session
item.addEventListener("click", (e) => {
const target = e.target as HTMLElement;
if (!target.classList.contains("session-delete-btn") &&
!target.classList.contains("session-name-text") &&
!target.classList.contains("session-name-input")) {
if (!target.classList.contains("session-menu-btn") &&
!target.classList.contains("session-menu-item") &&
!target.classList.contains("session-name-input") &&
!target.closest(".session-menu")) {
handleSessionClick(sessionId);
}
});

const deleteBtn = item.querySelector(".session-delete-btn");
// Menu button toggle
const menuBtn = item.querySelector(".session-menu-btn");
const menu = item.querySelector(".session-menu") as HTMLElement;

menuBtn?.addEventListener("click", (e) => {
e.stopPropagation();

// Close all other menus
document.querySelectorAll(".session-menu").forEach(m => {
if (m !== menu) m.classList.add("hidden");
});

// Toggle this menu
menu?.classList.toggle("hidden");
});

// Rename button
const renameBtn = item.querySelector(".rename-session-btn");
renameBtn?.addEventListener("click", (e) => {
e.stopPropagation();
menu?.classList.add("hidden");
startEditingSessionName(sessionId);
});

// Delete button
const deleteBtn = item.querySelector(".delete-session-btn");
deleteBtn?.addEventListener("click", (e) => {
e.stopPropagation();
menu?.classList.add("hidden");
deleteSession(sessionId);
});

Expand Down Expand Up @@ -1464,3 +1490,13 @@ saveSettingsBtn?.addEventListener("click", async () => {

// Load settings on startup
loadSettings();

// Close session menus when clicking outside
document.addEventListener("click", (e) => {
const target = e.target as HTMLElement;
if (!target.closest(".session-menu") && !target.classList.contains("session-menu-btn")) {
document.querySelectorAll(".session-menu").forEach(menu => {
menu.classList.add("hidden");
});
}
});
33 changes: 22 additions & 11 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,26 +73,37 @@
@apply bg-red-500;
}

.session-delete-btn {
@apply text-gray-500 hover:text-red-500 ml-2;
opacity: 0;
transition: opacity 0.2s;
.session-menu-btn {
@apply text-gray-500 hover:text-gray-300 hover:bg-gray-600 ml-2 transition-all;
font-size: 14px;
line-height: 0.8;
writing-mode: vertical-lr;
letter-spacing: -2px;
padding: 6px 3px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.session-list-item:hover .session-delete-btn {
opacity: 1;
.session-menu {
@apply absolute right-0 mt-1 bg-gray-700 border border-gray-600 rounded shadow-lg z-10 py-1 min-w-[120px];
}

.session-menu-item {
@apply w-full text-left px-3 py-2 text-sm text-gray-300 hover:bg-gray-600 hover:text-white transition-colors;
}

.session-menu-item.delete-session-btn {
@apply hover:bg-red-600 hover:text-white;
}

.session-name-container {
min-width: 0;
}

.session-name-text {
cursor: pointer;
}

.session-name-text:hover {
@apply text-gray-100;
@apply text-gray-300;
}

.session-name-input {
Expand Down