Skip to content

Replace glyph text input with tile button and picker - #191

Merged
lann merged 1 commit into
mainfrom
visor/glyph-tile-picker
Sep 10, 2026
Merged

Replace glyph text input with tile button and picker#191
lann merged 1 commit into
mainfrom
visor/glyph-tile-picker

Conversation

@lann

@lann lann commented Sep 10, 2026

Copy link
Copy Markdown
Contributor

Changes glyph selection from a text input field to a button tile that opens a picker interface, matching the UI pattern for emoji/glyph selection across settings and app sheets.

Changes

visor/src/ui.rs:

  • Rename GlyphInput component to GlyphPicker to better reflect its new purpose
  • Replace text input with a button tile (glyph-tile-button) that displays the selected glyph
  • Move search functionality into the picker, keeping the search field separate from the draft state
  • Search field now retains raw input without normalization; normalization applies only to generate the direct candidate result
  • Add direct candidate button (normalized grapheme from current search query) as first result when non-empty
  • Add "Clear glyph" button inside picker when a glyph is selected
  • Simplify state management: remove raw and input_revision signals; composition events now only control search behavior

visor/src/style.rs:

  • Rename #visor-app-glyph to .glyph-tile-face (class-based for reusability)
  • Replace .glyph-input with .glyph-control as container
  • Add .glyph-tile-button styles (minimal padding, transparent background, 44px minimum touch target)
  • Add pointer-events: none to .glyph-tile-face inside button
  • Add .glyph-clear button styling inside picker
  • Fix #visor-circle with overflow: clip for proper border-radius clipping

e2e/run.ts:

  • Update test selectors: replace input field queries with button tile and picker searches
  • Change field interaction from fill() to click() + picker navigation
  • Update assertions from inputValue() to textContent() for the tile
  • Update search placeholder text from "Search emoji" to "Enter glyph or search"
  • Add tests for direct candidate selection, compound queries, composition handling, and "Clear glyph" action
  • Verify that picker search does not mutate draft state
  • Add mobile viewport tests for picker interaction

@lann
lann enabled auto-merge September 10, 2026 19:47
@lann
lann merged commit 3554bc6 into main Sep 10, 2026
2 checks passed
@lann
lann deleted the visor/glyph-tile-picker branch September 10, 2026 19:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant