diff --git a/renderer.ts b/renderer.ts
index 950bf5f..0b0aec1 100644
--- a/renderer.ts
+++ b/renderer.ts
@@ -363,19 +363,17 @@ function addToSidebar(sessionId: string, name: string, hasActivePty: boolean) {
${name}
-
+
+
+
+
`;
- // 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);
});
@@ -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);
});
@@ -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");
+ });
+ }
+});
diff --git a/styles.css b/styles.css
index a1d4d0a..dc5c146 100644
--- a/styles.css
+++ b/styles.css
@@ -73,14 +73,29 @@
@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 {
@@ -88,11 +103,7 @@
}
.session-name-text {
- cursor: pointer;
- }
-
- .session-name-text:hover {
- @apply text-gray-100;
+ @apply text-gray-300;
}
.session-name-input {