fix(desktop): custom emoji reaction rendering + picker autofocus#831
Merged
Conversation
Custom emoji reactions rendered as a broken image while the same emoji worked inline in chat. WKWebView's network stack bypasses WARP, so a direct relay `/media/...` URL gets a Cloudflare Access 403. Every other media `<img>` in the app goes through `rewriteRelayUrl()` to proxy via localhost; the reaction renderer (`EmojiGlyph`) was the one path that used the raw `reaction.emojiUrl`, shipped that way in the custom-emoji launch (PR #816). Wrap `reaction.emojiUrl` in `rewriteRelayUrl()`, matching the chat renderer and the rest of the app. Add an e2e guard (custom-emoji.spec.ts) that drives the real interactive react flow and asserts the rendered reaction `<img>` src resolves to the localhost media proxy — it fails on the pre-fix raw relay URL. The guard also toggles the reaction off and asserts the pill disappears, covering the mock-bridge deletion path. To support the guard, the e2e bridge gains `add_reaction` / `remove_reaction` / `get_media_proxy_port` mocks and a relay-hosted reaction fixture. Reaction events use a 64-hex id so the kind:5 deletion is honored by the timeline (getDeletionTargets requires a 64-hex `e` tag); `createMockEvent`'s default id shape is unchanged. Signed-off-by: Wes <wesbillman@users.noreply.github.com> Co-authored-by: Brain <21994759fc7a6fa6b965551d35cfd7897d262f2495467f2d78694ddcfa6a5c7e@sprout-oss.stage.blox.sqprod.co> Signed-off-by: Wes <wesbillman@users.noreply.github.com>
Add `autoFocus` to the reaction emoji Picker in MessageActionBar so the picker's search field receives focus the moment the picker opens, letting the user type to filter immediately without an extra click. Co-authored-by: Brain <21994759fc7a6fa6b965551d35cfd7897d262f2495467f2d78694ddcfa6a5c7e@sprout-oss.stage.blox.sqprod.co> Signed-off-by: Wes <wesbillman@users.noreply.github.com>
michaelneale
added a commit
that referenced
this pull request
Jun 4, 2026
* origin/main: (36 commits) fix: use immutable commit-SHA URLs in screenshot PR comments (#842) feat(mobile+desktop): two-tier Slack-style app icon badge (#802) chore: simplify file-size check to a flat 1000-line limit (#839) fix(desktop): robust emoji picker — unify picker + fix custom emoji in editing, status, reactions (#837) feat(desktop): reusable screenshot workflow for agents (#826) desktop(mesh-llm): let a serving node route a different model (#833) chore(release): release version 0.3.9 (#832) fix: native arbitrary-file download + image context-menu flash (#830) fix(desktop): custom emoji reaction rendering + picker autofocus (#831) Mesh-LLM v1: relay-gated direct-iroh inference between users (WAN) (#822) chore(release): release version 0.3.8 (#829) chore(release): release version 0.3.7 (#825) feat: code block rendering, syntax highlighting, and compose fixes (#803) feat: custom emoji — user-owned NIP-30 sets with a client-side union (#816) Install sprout-cli skill at repo root + fix desktop clippy (#818) fix(desktop): use public re-export path for ensure_client_node_for_model (#824) refactor(desktop): feature-gate mesh-llm-sdk behind optional Cargo feature (#823) fix(desktop): align workflow read/save commands to the frontend contract (#820) fix(desktop): disable mesh-llm auto-build to prevent git config corruption (#819) fix(desktop): clear clippy lints in agents/mesh_llm commands (#817) ... # Conflicts: # Cargo.lock # desktop/scripts/check-file-sizes.mjs # desktop/src-tauri/Cargo.toml # desktop/src/app/AppShell.tsx # desktop/src/app/AppTopChrome.tsx # desktop/src/features/messages/hooks.ts # desktop/src/features/workspaces/useWorkspaceInit.ts # desktop/src/shared/api/tauri.ts
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
Two related desktop fixes for the custom-emoji reaction flow:
rewriteRelayUrl()fix inMessageReactions.tsx.autoFocuson the reaction emojiPickerso the picker's search field is focused the instant it opens; the user can type to filter immediately.Test support + guard
custom-emoji.spec.ts: a:react:relay-origin fixture provesrewriteRelayUrl()actually ran (avoids theexample.comfalse-positive trap), plus a toggle-off assertion that the reaction pill disappears afterremove_reaction.e2eBridge.ts): added mockadd_reaction/remove_reactionhandlers. Reaction event ids are now 64-hex viamockEventId()so the kind:5 deletion'setag is actually honored by the timeline deletion logic (it rejects 32-hex ids) — without this, toggling off a reaction in mock mode silently left a stale pill.Verification
pnpm typecheck✅pnpm biome check✅ on all touched filespnpm test:e2e:smoke custom-emoji.spec.ts✅ — 4/4 (proxy rewrite + toggle-off), with autofocus in placeReviewer notes
test:e2e:smokeaggregate is flaky in this environment (non-deterministic search/focus/visibility assertions under contention) — pre-existing, unrelated to this diff; every suite touching the changed paths passes clean in isolation.