feat: support more emoji note reactions #5379

ffischbach-ino · 2025-09-05T16:09:35Z

Description

Enhanced the emoji reaction system by replacing the limited 7-emoji selection with a full emoji picker supporting hundreds of emojis. The system now shows your 5 most recently used emojis as quick selections, falling back to legacy reactions when none are available. Added smart positioning, dark mode support, and localStorage persistence for recent emojis while maintaining backward compatibility.

Changelog

Backend

server/src/reactions/type.go: Relaxed validation to accept any emoji string (up to 50 chars)
server/src/reactions/type_test.go: Added test coverage for flexible emoji validation

Frontend Core

package.json: Added [email protected]
src/store/features/reactions/types.ts: Changed ReactionType to string, added legacy emoji mappings and utilities

Components

NEW: EmojiPickerReactionBar/: Full emoji picker with portal rendering, smart positioning, recent emojis tracking
NoteReactionList.tsx: Replaced old reaction bar, added showBoardReactions enforcement
NoteReactionChip.tsx*: Migrated to emoji-picker-react library for consistent rendering
NoteReactionPopup.tsx: Updated to use unified emoji display
Appearance.tsx: Restored skin tone selector for other features

Features

Recently used emojis (localStorage, max 5)
Smart positioning (shows above when near screen bottom)
Dark/light/auto theme integration
Viewport-aware positioning with margins
Keyboard navigation (Enter/Escape)

Fixes

Plus icon dark mode visibility and alignment
showBoardReactions setting enforcement
Emoji picker positioning conflicts
Focus management improvements

Checklist

I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
The light- and dark-theme are both supported and tested
The design was implemented and is responsive for all devices and screen sizes
The application was tested in the most commonly used browsers (e.g. Chrome, Firefox, Safari)

(Optional) Visual Changes

White and darkmode are supported:

Multiple skin colors are supported:

As a new user I have a quick selection of emojis:

After I already used a emoji, it will appear in the quick selection

octomind-dev · 2025-09-05T16:48:25Z

🐙 Octomind

Test Report

❌ Failed: 9/14

description	details
test all ways to open the setup flow	click
sign-in	click
share_session	click
edit_notes_and_actions_v5	click
create lean coffee board	click
Create Board and Invite Team Members	click
create_and_delete_notes_and_actions_v2	click
create and delete board columns	click
change avatar	click

✅ Passed: 5/14

description	details
get started	click
close cookie banner - sign-in	click
check terms & conditions	click
check Privacy Policy	click
About Section Visibility Test	click

commit sha: 967fe1c

Schwehn42 · 2025-09-15T11:56:40Z

the emoji picker component uses https://cdn.jsdelivr.net to lazily fetch all the emojis, so we probably need to ask someone about GDPR compliance (or locally add all the emojis, see emojis.json)

Add [email protected] for comprehensive emoji selection support

- Change ReactionType from union type to string for flexibility - Add LEGACY_REACTION_EMOJI_MAP with unified Unicode codes - Add utility functions getEmojiDisplay() and reactionSupportsSkinTone() - Define QUICK_REACTIONS for reaction bar (limited to 5 for space) - Maintain backward compatibility with existing reactions

- Create EmojiPickerReactionBar with portal-based rendering - Support quick reactions (5 legacy emojis) plus full emoji picker - Implement proper event handling to prevent modal conflicts - Add keyboard navigation support (Enter/Escape) - Use ReactFocusLock for accessibility - Position picker dynamically relative to trigger button

- Replace NoteReactionBar with EmojiPickerReactionBar component - Update click-outside handler to recognize emoji picker portal - Modify NoteReactionBar to disable interaction when board locked - Update tests to reflect component interface changes - Maintain existing reaction functionality while adding emoji picker

- Update NoteReactionChip to use Emoji component for legacy reactions - Update NoteReactionChipCondensed with consistent emoji rendering - Update NoteReactionPopup to use unified emoji display - Maintain size consistency across components (14px, 16px, 18px) - Support both legacy reactions and new unicode emojis - Remove unused imports and clean up code

- Add showBoardReactions selector from view state - Hide reaction system when showBoardReactions is disabled - Ensure setting properly controls reaction visibility

- Remove SkinToneSelector component from appearance settings - Remove unused import for SkinToneSelector - Skin tone selection is no longer needed since emoji picker has skin tones disabled - Simplify appearance settings interface

- Implement intelligent positioning that shows picker above button when near viewport bottom - Add viewport boundary detection to ensure picker is always fully visible - Calculate optimal horizontal positioning to prevent overflow - Include buffer zones for comfortable spacing from viewport edges - Automatically adjust position based on available space

- Add theme detection from app state to EmojiPickerReactionBar - Pass current theme (light/dark/auto) to emoji-picker-react library - Create type-safe theme conversion between app and library types - Ensure emoji picker automatically adapts to user's theme preference - Maintain existing SCSS dark mode styles for wrapper components

- Fix plus icon dark mode compatibility with proper color theming - Improve plus icon alignment with better positioning and padding - Replace static quick reactions with recently used emojis system - Add localStorage-based recent emojis tracking (max 5 emojis) - Automatically track new emoji usage and update quick selection - Fall back to legacy reactions when no recent emojis available - Maintain backward compatibility with existing reaction system

Remove unused index parameter to satisfy eslint max-warnings 0 requirement

- Replace old NoteReactionBar with EmojiPickerReactionBar in tests - Add emoji-picker-react mocks to avoid test environment issues - Update test expectations to match new component behavior - Remove unused imports and simplify test cases - All tests now pass successfully

- Update Appearance snapshots to reflect SkinToneSelector restoration - Update Column snapshots for component structure changes - All snapshot tests now pass successfully

Switch emoji picker components to use EmojiStyle.NATIVE to prevent loading emoji PNG files from external CDN. This ensures emojis are rendered using the system's native emoji font instead of downloading images from emoji-picker-react's default CDN.

ffischbach-ino · 2025-10-01T14:35:29Z

I refactored the emoji picker components to native emoji style. This means, there is no more client side communication to jsdelivr!

- Replace complex LEGACY_REACTION_EMOJI_MAP with clean DEFAULT_EMOJIS array - Add buildQuickReactions utility function for cleaner logic - Introduce PERMANENT_EMOJIS and FALLBACK_EMOJIS constants - Add utility functions: isDefaultEmoji, getEmojiDisplay, getDefaultEmojiData - Maintain backwards compatibility with deprecated LEGACY_REACTION_EMOJI_MAP - Improve code readability and maintainability

- Add show-more-default-light.svg and show-more-default-dark.svg - Add show-more-hover-light.svg and show-more-hover-dark.svg - Add show-more-active-light.svg and show-more-active-dark.svg - Support different states (default, hover, active) and themes (light, dark) - Icons designed for emoji picker "show more" button functionality

- Export ShowMoreDefaultLight, ShowMoreDefaultDark - Export ShowMoreHoverLight, ShowMoreHoverDark - Export ShowMoreActiveLight, ShowMoreActiveDark - Follow existing project icon architecture and naming conventions - Enable centralized icon management through components/Icon

- Create reusable icon component with automatic theme and state switching - Support default, hover, and active states through CSS - Support light and dark themes automatically via theme attribute - Use all 6 show-more SVG variants for complete state coverage - Integrate with existing emoji picker button styling system

- Replace ➕ emoji with ShowMoreEmojiesIcon component - Integrate with existing button state management and theme system - Use buildQuickReactions utility for cleaner emoji logic - Simplify component structure and improve maintainability - Remove complex inline emoji selection logic

- Update test descriptions from "plus button" to "show more button" - Change test selectors from emoji text to aria-label - Maintain test coverage for all existing functionality - Update comments to reflect new icon-based implementation

…ndling

k8s/deployment.yaml

github-actions · 2025-12-03T09:26:25Z

The deployment to the dev cluster was successful. You can find the deployment here: https://5379.development.scrumlr.fra.ics.inovex.io
This deployment is only for testing purposes and will be deleted after 1 week.
To redeploy rerun the workflow.
DO NOT STORE IMPORTANT DATA ON THIS DEPLOYMENT

Deployed Images

ghcr.io/inovex/scrumlr.io/scrumlr-frontend:sha-d6ba609
ghcr.io/inovex/scrumlr.io/scrumlr-server:sha-d6ba609

Schwehn42

looks very well and solid!

one thing I was wondering, do we want to merge emojis of same type but different color?

e.g. these would be displayed as 👍 (2) with your own emoji getting priority on the color

Schwehn42 · 2025-12-08T12:51:03Z

src/store/features/recentEmojis/thunks.ts

+ * - Maximum of 3 recent emojis
+ * - Permanent emojis are ignored
+ */
+export const addRecentEmoji = createAsyncThunk<EmojiData[], EmojiData>("recentEmojis/addRecentEmoji", async (emojiData, {getState}) => {


Suggested change

export const addRecentEmoji = createAsyncThunk<EmojiData[], EmojiData>("recentEmojis/addRecentEmoji", async (emojiData, {getState}) => {

export const addRecentEmoji = createAsyncThunk<EmojiData[], EmojiData, {state: ApplicationState}>("recentEmojis/addRecentEmoji", async (emojiData, {getState}) => {

this enables getState to be typed, so we can drop the as any casts

Schwehn42 · 2025-12-08T13:38:28Z

src/components/Note/NoteReactionList/EmojiPicker/EmojiPicker.tsx

+    if (element && lang !== "en") {
+      let i18nPromise;
+      if (lang === "de") {
+        i18nPromise = import("emoji-picker-element/i18n/de");
+      } else if (lang === "fr") {
+        i18nPromise = import("emoji-picker-element/i18n/fr");
+      }
+
+      if (i18nPromise) {
+        i18nPromise
+          .then((module) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (element as any).i18n = module.default;
+          })
+          .catch(() => {
+            // Fallback to English if translation is missing


this part looks a bit odd, is it just for on the fly language change?

Schwehn42 · 2025-12-08T13:41:16Z

src/components/Note/NoteReactionList/NoteReactionPicker/NoteReactionPicker.tsx

+  handleClickReaction: (e: React.MouseEvent<HTMLButtonElement>, emoji: string) => void;
+}
+
+const getPickerPosition = (buttonRect: DOMRect) => {


it think this should be updated dynamically when the screen size changes

ffischbach-ino requested a review from Schwehn42 September 5, 2025 16:10

ffischbach-ino added 14 commits September 29, 2025 16:08

feat(deps): add emoji-picker-react library

6d50f14

Add [email protected] for comprehensive emoji selection support

fix(ui): respect showBoardReactions setting in NoteReactionList

9ccc46a

- Add showBoardReactions selector from view state - Hide reaction system when showBoardReactions is disabled - Ensure setting properly controls reaction visibility

fix(lint): remove unused index parameter in quickReactions map

3f15d6c

Remove unused index parameter to satisfy eslint max-warnings 0 requirement

fix(tests): update snapshots for Appearance and Column components

567cf2e

- Update Appearance snapshots to reflect SkinToneSelector restoration - Update Column snapshots for component structure changes - All snapshot tests now pass successfully

ffischbach-ino force-pushed the ff/support-more-emoji-reactions-#4168 branch from 0d15d64 to c4c6a7e Compare October 1, 2025 14:10

ffischbach-ino and others added 7 commits October 2, 2025 16:46

Merge branch 'main' into ff/support-more-emoji-reactions-#4168

991a806

BingeCode changed the title ~~feat: support more emoji reactions #4168~~ feat: support more emoji note reactions Nov 21, 2025

BingeCode added 3 commits November 21, 2025 11:48

fix: layout shift in note reaction toggle

42fc381

refactor: Swap emoji-picker-react with emoji-picker-element

cae7b49

refactor: EmojiPicker to use custom data endpoint; clean up EmojiPicker

17915f2

BingeCode added 25 commits November 28, 2025 16:50

refactor: revert to old reactionType nomenclature; fix click event ha…

5b45acd

…ndling

chore: consolidate event types

8c8b521

style: fix border and hover states in light mode

106e926

style: fix indicator color in light mode

230a100

style: Override dark/light styles in emoji picker

c428168

fix: Duplicate vars

eb1dce6

refactor: Replace redundant ShowMoreEmojisIcon with existing Plus Icon

d0bc541

style: fix hover styles light/dark in EmojiPickerReactionBar

1b0c113

refactor: rename EmojiPickerReactionBar to NoteReactionPicker

33b4355

fix: EmojiPicker closing unexpectedly

d3e18a1

chore: add TODO with issue number and description

8cbfb08

style: render only 6 columns on mobile in EmojiPicker

2588c9b

style: add padding to EmojiPicker

5cea402

Merge branch 'main' into ff/support-more-emoji-reactions-#4168

f3f810a

style: remove bottom padding

e89dfd6

chore: restore previous snapshot tests

3f4b969

test: Update snapshots

1c1e86b

test: provide jest mock for emoji-picker-element Database object

614298b

style: Add focus outline to reaction picker emoji buttons

58ccfb3

style: only transition background, not focus-outline

d97af72

fix: import path for emoji-data

2dfa89d

test: NoteReactionPicker

07bb3fe

fix: emoji-data loading path

cf73d19

fix: white-list /emoji-data path prefix in dev/prd^

1b70e0f

fix: path for emoji-data

8e8fa11

Planlos5000 reviewed Dec 3, 2025

View reviewed changes

k8s/deployment.yaml Outdated Show resolved Hide resolved

fix: Add missing )

3f31033

Planlos5000 added the feat This pull request or issue adds a new feature label Dec 3, 2025

Schwehn42 reviewed Dec 8, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: support more emoji note reactions #5379

feat: support more emoji note reactions #5379

Uh oh!

ffischbach-ino commented Sep 5, 2025 •

edited by BingeCode

Loading

Uh oh!

octomind-dev bot commented Sep 5, 2025 •

edited

Loading

Uh oh!

Schwehn42 commented Sep 15, 2025

Uh oh!

ffischbach-ino commented Oct 1, 2025

Uh oh!

Uh oh!

github-actions bot commented Dec 3, 2025

Uh oh!

Schwehn42 left a comment

Uh oh!

Schwehn42 Dec 8, 2025

Uh oh!

Schwehn42 Dec 8, 2025

Uh oh!

Schwehn42 Dec 8, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

	export const addRecentEmoji = createAsyncThunk<EmojiData[], EmojiData>("recentEmojis/addRecentEmoji", async (emojiData, {getState}) => {
	export const addRecentEmoji = createAsyncThunk<EmojiData[], EmojiData, {state: ApplicationState}>("recentEmojis/addRecentEmoji", async (emojiData, {getState}) => {

feat: support more emoji note reactions #5379

Are you sure you want to change the base?

feat: support more emoji note reactions #5379

Uh oh!

Conversation

ffischbach-ino commented Sep 5, 2025 • edited by BingeCode Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Checklist

(Optional) Visual Changes

Uh oh!

octomind-dev bot commented Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🐙 Octomind

Uh oh!

Schwehn42 commented Sep 15, 2025

Uh oh!

ffischbach-ino commented Oct 1, 2025

Uh oh!

Uh oh!

github-actions bot commented Dec 3, 2025

Uh oh!

Schwehn42 left a comment

Choose a reason for hiding this comment

Uh oh!

Schwehn42 Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Schwehn42 Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Schwehn42 Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ffischbach-ino commented Sep 5, 2025 •

edited by BingeCode

Loading

octomind-dev bot commented Sep 5, 2025 •

edited

Loading