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

+56 -3
View File
@@ -76,11 +76,20 @@
font-size: 0.78rem;
}
.message-edit-link {
.message-row-actions {
display: none;
position: absolute;
top: 2px;
right: var(--sp-2);
align-items: center;
gap: 4px;
}
.message-row:hover .message-row-actions {
display: flex;
}
.message-edit-link {
background: var(--ds-surface-2);
border: 1px solid var(--ds-border);
color: var(--ds-muted);
@@ -95,8 +104,52 @@
border-color: var(--ds-accent);
}
.message-row:hover .message-edit-link {
display: inline;
.message-reaction-wrap {
position: relative;
}
.message-reaction-trigger {
background: var(--ds-surface-2);
border: 1px solid var(--ds-border);
color: var(--ds-muted);
font-size: 0.78rem;
line-height: 1;
cursor: pointer;
padding: 2px 6px;
border-radius: 6px;
}
.message-reaction-trigger:hover {
border-color: var(--ds-accent);
}
.message-reaction-pills {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.message-reaction-pill {
display: flex;
align-items: center;
gap: 4px;
background: var(--ds-surface-2);
border: 1px solid var(--ds-border);
border-radius: var(--radius-pill);
color: var(--ds-muted);
font-size: 0.76rem;
padding: 2px 8px;
cursor: pointer;
}
.message-reaction-pill:hover {
border-color: var(--ds-accent);
}
.message-reaction-pill-mine {
border-color: var(--ds-accent);
color: var(--ds-text);
}
.message-edit-input {