feat: session rename UX overhaul

- Edit button (✎) moved to left of row, separated from delete (×)
- Clicking ✎ hides name/meta/delete and expands input to full row width
- Button changes to ✓ (accent color) while editing
- Enter or ✓ click = save; Escape = cancel without saving
- Removed accidental-save-on-blur behavior
- Edit button: 30% opacity at rest, 75% on row hover, 100% on direct hover
- Touch devices: edit button always at 60% opacity (no hover to reveal it)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-05-05 19:00:39 -04:00
parent 508fb638ad
commit 7a0fbdb659
2 changed files with 92 additions and 38 deletions

View File

@@ -320,7 +320,7 @@
}
.session-delete-btn:hover { color: #e06c75; }
.session-rename-btn {
.session-edit-btn {
background: none;
border: none;
color: var(--muted);
@@ -330,13 +330,30 @@
cursor: pointer;
border-radius: 3px;
flex-shrink: 0;
opacity: 0.4;
opacity: 0.3;
transition: opacity 0.15s, color 0.15s;
min-width: 24px;
text-align: center;
}
.session-item:hover .session-rename-btn { opacity: 1; }
.session-rename-btn:hover { color: var(--accent); }
.session-item:hover .session-edit-btn { opacity: 0.75; }
.session-edit-btn:hover { color: var(--accent); opacity: 1; }
.session-save-btn {
background: none;
border: none;
color: var(--accent);
font-size: 1rem;
font-weight: bold;
line-height: 1;
padding: 2px 6px;
cursor: pointer;
border-radius: 3px;
flex-shrink: 0;
min-width: 24px;
text-align: center;
transition: opacity 0.15s;
}
.session-save-btn:hover { opacity: 0.75; }
.session-rename-input {
flex: 1;
@@ -1609,6 +1626,9 @@
min-width: 36px;
min-height: 36px;
}
/* On touch: edit button always fully visible (no hover to reveal it) */
.session-edit-btn { opacity: 0.6; }
}
@media (max-width: 380px) {