feat(ui): consistency polish — disclosure chevrons, toast dismiss, popover autofocus, open-state signals (#102) - #108
Merged
Conversation
…pover autofocus, open-state signals (#102) Unifies the schema tree's expand/collapse chevron on the same rotate technique the login screen's Advanced disclosure already used (one icon, no icon-swap flash). The share toast can now be dismissed early by clicking it. openUserMenu/openFileMenu autofocus a sensible first item on open. shortcutsOpen/editingSavedId/bannerDismissedFor move into state.js as signals, consistent with the rest of the ADR-0001 migration. Closes #102 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DM8nrNFDkSbfappoez2Snb
Code-review findings on #102: the expand/collapse chevron's CSS transition never animated because renderSchema() fully rebuilds each row's DOM on toggle, so the rebuilt node was born already at its target rotation with nothing to interpolate from — flipChevron() now flashes the fresh node back to its pre-toggle rotation and forces a layout read before restoring the target, giving the transition an actual two-frame change to play across. Also move flashToast's auto-hide timer from a module-level field to a per-element field, so a toast in a detached tab's document can't clobber a pending timer that belongs to a toast in the main document's realm. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01784dKCpk5W7rdpUAwcQnix
…olish-102 # Conflicts: # CHANGELOG.md
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.
What & why
Four small, independently-shippable UI-consistency items from #102 (Phase 3 — Windows, roadmap #68), in the style of #85:
src/ui/schema.jsnow renders oneIcon.chevDown()rotated0deg/-90degvia CSS transform, matchinglogin.js.flashToastonly auto-hid after ~1.6s..share-toast.shownow allows pointer events + shows a pointer cursor; a click handler clears the pending timer and hides immediately (guarded against a stale timer double-firing after a manual dismiss).openSavePopover, the library-title rename input, and the saved-edit form already autofocused.openUserMenu(focuses "Log out") andopenFileMenu's dropdown (focuses "New Library") now do too.shortcutsOpen,editingSavedId, andbannerDismissedForwere plain fields (the latter two lived onappdirectly). Converted tosignal(...)and consolidated intostate.jsalongside the codebase's other session-only fields (libraryFilter,resultSort) — more consistent with every other slice in that file than leaving two of the three onapp. Pure.valuemechanical migration; no reactive reader added (each write site already calls its own repaint).Closes #102
Checklist
npm testpasses (the per-file coverage gate is non-negotiable)npm run buildsucceeds (single-filedist/sql.html)src/core/, network insrc/net/(injected fetch), DOM insrc/ui/CHANGELOG.md([Unreleased]) updatedstate.jsvsappplacement), ADR-0001 (new addendum for the three-field signal conversion)Test plan
npm test— 1266 tests passing, per-file coverage gate greennpm run build—dist/sql.htmlbuilds cleannpm run test:e2e— full Playwright suite (Chromium/Firefox/WebKit) green (two Firefox timeouts on unrelated specs were confirmed flaky on isolated re-run)clickhouse-playdemo cluster vianpm run local+ Playwright: chevron rotate on expand/collapse, toast click-to-dismiss + pointer cursor, user-menu/file-menu autofocus (document.activeElement), saved-query inline rename, and the shortcuts modal open/close🤖 Generated with Claude Code
https://claude.ai/code/session_01DM8nrNFDkSbfappoez2Snb