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 {