feat(ui): filter field on the reaction emoji picker (LC-274) #315

Merged

longjacksonle merged 1 commit from feat/lc-274-reaction-picker-filter into main

2026-06-14 15:50:56 +02:00

longjacksonle commented

2026-06-14 15:49:48 +02:00

Owner

What

The reaction emoji picker now opens with a filter input that narrows the emoji buttons as you type (LC-274). As an enclave accrues custom emojis the picker was an unsearchable strip; now you can type to find one fast.

How

routes::reactions::get_picker: each button gains a data-lc-emoji-name token - human keywords for the six unicode defaults (thumbsup +1, heart, joy laugh, tada party, wow, cry sad) and the shortcode for custom emojis. The fragment is restructured into a small bordered box: an autofocused data-lc-emoji-filter input + the cancel × on top, and a wrapping, scrollable data-lc-emoji-grid of buttons below. The localized placeholder/aria come from crate::i18n::translate_current and are attribute-escaped.
layout.html: one delegated input listener finds the picker's grid and toggles each [data-lc-emoji-name] button's hidden by case-insensitive substring. The picker is ephemeral (htmx-swapped), so a single permanent listener suffices.
Strings localized in en + es.

Access gating and the reaction POST are unchanged. No new route/DB/env. Not operator-visible.

Tests

routes_reactions_authz::picker_ships_filter_and_name_tokens asserts the picker ships the filter input + per-button name tokens. just test and just test-saas pass.

QA note

JS filtering is client-side, so worth a quick manual pass: open the picker (filter input is focused), type heart / tada (unicode defaults narrow by keyword), type a custom-emoji shortcode (custom narrows), clear the box (all return), and confirm the × still closes the picker and clicking an emoji still reacts.

## What The reaction emoji picker now opens with a filter input that narrows the emoji buttons as you type (LC-274). As an enclave accrues custom emojis the picker was an unsearchable strip; now you can type to find one fast. ## How - `routes::reactions::get_picker`: each button gains a `data-lc-emoji-name` token - human keywords for the six unicode defaults (`thumbsup +1`, `heart`, `joy laugh`, `tada party`, `wow`, `cry sad`) and the shortcode for custom emojis. The fragment is restructured into a small bordered box: an autofocused `data-lc-emoji-filter` input + the cancel `×` on top, and a wrapping, scrollable `data-lc-emoji-grid` of buttons below. The localized placeholder/aria come from `crate::i18n::translate_current` and are attribute-escaped. - `layout.html`: one delegated `input` listener finds the picker's grid and toggles each `[data-lc-emoji-name]` button's `hidden` by case-insensitive substring. The picker is ephemeral (htmx-swapped), so a single permanent listener suffices. - Strings localized in en + es. Access gating and the reaction POST are unchanged. No new route/DB/env. Not operator-visible. ## Tests `routes_reactions_authz::picker_ships_filter_and_name_tokens` asserts the picker ships the filter input + per-button name tokens. `just test` and `just test-saas` pass. ## QA note JS filtering is client-side, so worth a quick manual pass: open the picker (filter input is focused), type `heart` / `tada` (unicode defaults narrow by keyword), type a custom-emoji shortcode (custom narrows), clear the box (all return), and confirm the `×` still closes the picker and clicking an emoji still reacts.

longjacksonle added 1 commit

2026-06-14 15:49:48 +02:00

feat(ui): filter field on the reaction emoji picker (LC-274)

check-secrets / TruffleHog (push) Successful in 5s

Details

check-secrets / Kingfisher (push) Successful in 5s

Details

check-secrets / Nosey parker (push) Successful in 5s

Details

check-secrets / TruffleHog (pull_request) Successful in 4s

Details

check-secrets / Nosey parker (pull_request) Successful in 6s

Details

check-secrets / Kingfisher (pull_request) Successful in 7s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

Check / clippy + fmt + tests (pull_request) Successful in 3m3s

Details

6b7bf70027

The reaction picker now opens with a filter input that narrows the emoji buttons as you type, so reacting with a specific emoji is fast in enclaves with many custom emojis.

get_picker now emits each button with a data-lc-emoji-name token (human keywords for the six unicode defaults - thumbsup/+1, heart, joy/laugh, tada/party, wow, cry/sad - and the shortcode for custom emojis) and wraps them in a small box: an autofocused filter input + cancel on top, a scrollable wrapping grid below. A single delegated input listener in the persistent shell toggles each button's hidden by case-insensitive substring match. The localized placeholder/aria come from translate_current and are attribute-escaped.

Strings localized in en + es. Test asserts the picker ships the filter input + per-button name tokens. Access gating and the reaction POST are unchanged.

#LC-274
#LC-275

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>