feat(ux): PR 1.3 — replace 0→100 hover-reveals with calm baseline
Affordances on MicroSteps rows (thumbs/edit/speaker/just-start) and transcript-viewer segments (star, copy, delete) used opacity-0 → opacity-100 on group-hover, which (a) hid them from keyboard users until focus and (b) violated the "always-visible affordance" line in the Kon design audit. Replace with opacity-30 baseline + group-hover:opacity-100 + focus-visible:opacity-100 (MicroSteps) / focus-within:opacity-100 (viewer, since the actions sit inside an interactive segment row). Result: affordances are calm but visible at rest, lift on hover or keyboard focus, never invisible. HistoryPage was checked — its row checkbox at line 757 is already opacity-50 → opacity-100 on hover, the pattern this PR is moving toward, so no change needed there. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -534,7 +534,7 @@
|
||||
>
|
||||
<!-- Star -->
|
||||
<button
|
||||
class="mt-0.5 flex-shrink-0 {seg.starred ? 'text-accent' : 'text-text-tertiary opacity-0 group-hover:opacity-100'}"
|
||||
class="mt-0.5 flex-shrink-0 {seg.starred ? 'text-accent' : 'text-text-tertiary opacity-30 group-hover:opacity-100 focus-within:opacity-100'}"
|
||||
onclick={(e) => { e.stopPropagation(); toggleStar(seg._idx); }}
|
||||
aria-label={seg.starred ? "Unstar" : "Star"}
|
||||
>
|
||||
@@ -570,7 +570,7 @@
|
||||
</p>
|
||||
{/if}
|
||||
<!-- Actions (hover reveal) -->
|
||||
<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 flex-shrink-0">
|
||||
<div class="flex items-center gap-1 opacity-30 group-hover:opacity-100 focus-within:opacity-100 flex-shrink-0">
|
||||
<button
|
||||
class="text-text-tertiary hover:text-accent"
|
||||
onclick={(e) => { e.stopPropagation(); copySegment(seg._idx); }}
|
||||
|
||||
Reference in New Issue
Block a user