Private
Public Access
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:
1 parent
f2a59f798b
commit
c6f90d49fc
22 files changed
+854
-34
No files matched your search
@@ -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);
|
||||
}
|
||||
Reference in new issue
Block a user