Add emoji picker and message reactions (Gitea issue #11)

Composer gains an emoji picker (static curated unicode list, insert at
cursor position) and messages gain Slack/Mattermost-style reactions:
react with any emoji, toggle off by reacting again, see who reacted via
a tooltip on each pill.

Backend: MessageReaction model (unique on message_id+user_id+emoji backs
toggle semantics), WS "reaction" envelope broadcasts the full recomputed
reaction list per message (same approach as message edits), REST message
list embeds reactions so a reload doesn't lose state that only arrived
over WS.

Frontend: shared EmojiPicker component (anchored popover, Escape/outside-
click dismiss via new useEscapeKey hook) used by both the composer and a
new hover-revealed reaction trigger on each message row.
This commit is contained in:
ksmith committed 2026-08-14 15:37:59 -06:00
1 parent f2a59f798b
commit c6f90d49fc
22 files changed
+854 -34

No files matched your search

+65
View File
@@ -0,0 +1,65 @@
.emoji-picker-scrim {
position: fixed;
inset: 0;
z-index: 30;
}
.emoji-picker {
position: absolute;
z-index: 31;
width: 280px;
max-height: 320px;
overflow-y: auto;
background: var(--card-bg);
border: 1px solid var(--ds-border);
border-radius: var(--radius);
padding: var(--sp-2);
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.emoji-picker-below {
top: calc(100% + 8px);
}
.emoji-picker-above {
bottom: calc(100% + 8px);
}
.emoji-picker-left {
left: 0;
}
.emoji-picker-right {
right: 0;
}
.emoji-picker-category-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ds-muted);
padding: 4px 4px 2px;
}
.emoji-picker-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 2px;
}
.emoji-picker-item {
background: transparent;
border: none;
border-radius: 6px;
font-size: 1.1rem;
line-height: 1;
padding: 6px 0;
cursor: pointer;
}
.emoji-picker-item:hover {
background: var(--ds-surface-2);
}