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
@@ -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 {
|
||||
|
||||
Reference in new issue
Block a user