Fix vertical three-dot menu button styling (#18)

* Add three-dot menu for session management

Replaces delete button and click-to-edit with a three-dot menu button
that appears on hover. The menu provides options to rename or delete
sessions. Menu closes when clicking outside or after selecting an option.

Changes:
- Added three-dot menu button that appears on hover
- Menu contains "Rename" and "Delete" options
- Removed direct click-to-edit on session name
- Removed standalone delete button
- Added click-outside handler to close menus
- Delete option highlights red on hover for clarity

Co-Authored-By: Claude <[email protected]>

* Fix vertical three-dot menu button styling

Adjusts the hover state to properly fit the vertical menu button instead
of appearing as a wide rectangle. The button now has a more natural
pill-shaped hover background that wraps around the vertical dots.

Changes:
- Reduced font size from 16px to 14px for more compact appearance
- Adjusted padding to 6px vertical, 3px horizontal (was 2px/4px)
- Reduced letter-spacing from -4px to -2px for better dot spacing
- Adjusted line-height to 0.8 to keep dots closer together
- Increased border-radius to 6px for pill-shaped hover effect
- Removed fixed width to allow natural content sizing

Co-Authored-By: Claude <[email protected]>

---------

Co-authored-by: Claude <[email protected]>

Author: built-by-as

renderer.ts

@@ -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);
   });
@@ -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");
+    });
+  }
+});

styles.css

@@ -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 {