library UX polish 4: hover tooltip, inline + new collection, delete icon + CHANGELOG#221
Merged
Conversation
User audit on the icon "+" affordance: - Hover state was just a faint border colour change — no signal what the button does until you click it. - "Add to collection" popover only listed existing collections; creating a new one meant closing it, walking back to the sidebar, typing the name, then re-opening to assign. Five clicks for a one-step intent. - Big "Delete Book" outline-pill in the danger zone (after #220) was better than the primary-row pill but still louder than the circular "+" sitting nearby — visual hierarchy mismatch. Fixes: - Custom CSS tooltip on icon buttons (.add-to-collection-button--icon and .user-book-detail__delete-icon) reads aria-label, shows after a 250ms hover delay (instant feel without flickering), styled to match the dark/light theme. Skips the 1–2s native title delay entirely. - Popover gains an inline "+ New collection" row that swaps to a small text input + Add button on click, creates the collection AND adds the current book in one round-trip, then closes. Apple Notes pattern. - Delete is now a circular trash icon (lucide-style svg, hand-rolled to avoid pulling another dependency) sized 36×36 to match the "+" icon on the page. Same custom tooltip ("Delete this book"). Same red accent. Confirm dialog stays. CHANGELOG.md updated for everything since 2026-04-26 (PR #203 onward — 17 PRs of library + mobile + cleanup work that was missing entries). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
mrviduus
added a commit
that referenced
this pull request
May 5, 2026
Two tooltips were rendering on the "+" icon button — the new custom CSS hover tooltip from #221 plus the leftover native title="…" that the OS surfaces after a ~1s delay. The two messages overlapped visually for a beat before the OS one timed in. - Remove `title` from the icon-mode trigger; aria-label remains as the single source for the CSS tooltip + screen readers. - Empty state (no collections) keeps the help message on aria-label rather than title, so the tooltip explains why the button is disabled the same way every other state explains itself. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
mrviduus
added a commit
that referenced
this pull request
May 5, 2026
The custom CSS tooltip introduced in #221 used white-space: nowrap so single-line phrases like "Add to collection" sat on one line. The disabled-state hint "Create a collection in the sidebar first" — same mechanism, longer string — clipped the right edge on viewports below ~360px and could even overflow off-screen on very narrow phones. Switching to white-space: normal + width: max-content + max-width: min(220px, calc(100vw - 24px)) keeps the short labels on one line (max-content shrinks to fit) while letting the long hint wrap onto two lines well inside the viewport. text-align: center + line-height: 1.35 keeps the wrapped form readable. Same fix on delete-icon tooltip. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Custom hover tooltip on icon buttons (250ms instant). + New collection inline in popover (Apple Notes pattern). Delete book → circular trash icon. CHANGELOG.md gets the 17-PR backlog since 2026-04-26.