feat: combine session actions into options dropdown

SessionCard desktop view:
- Retain primary action button: Open (active) or Start (inactive)
- Replace individual Stop/Tunnel/Delete buttons with a single Options
  dropdown triggered by a ⋯ button
- Dropdown contains applicable actions:
  - Active: Stop, Recreate Tunnel (web), Delete
  - Inactive: Start, Delete
- Add window.confirm before Delete as a safety net
- Dropdown closes on outside click or Escape key
- Add 'more' icon (DotsThreeVertical) to icon component
- Add session-options-dropdown CSS with subtle animation

Mobile view unchanged (already uses MobileActionSheet).

Quality gates: tsc --noEmit pass, npm run build pass, 82/82 tests pass
This commit is contained in:
Developer
2026-06-11 15:32:03 +00:00
parent f1180f6053
commit b4d08b0232
3 changed files with 203 additions and 124 deletions
+64
View File
@@ -54,6 +54,70 @@
}
}
/* Session options dropdown */
.session-options {
position: relative;
}
.session-options-dropdown {
position: absolute;
bottom: calc(100% + 0.25rem);
right: 0;
z-index: 100;
min-width: 12rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
overflow: hidden;
animation: dropdown-in 0.12s ease-out;
}
@keyframes dropdown-in {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.session-option-item {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: var(--space-2) var(--space-3);
font-size: 0.875rem;
color: var(--text);
background: transparent;
border: none;
cursor: pointer;
white-space: nowrap;
}
.session-option-item:hover {
background: var(--surface-hover, rgba(0, 0, 0, 0.05));
}
.session-option-item.danger-text {
color: var(--danger);
}
.session-option-item.danger-text:hover {
background: var(--danger-subtle, rgba(239, 68, 68, 0.08));
}
.session-card-actions {
display: flex;
align-items: center;
gap: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.session-card-actions.mobile {
display: flex;
gap: var(--space-2);