feat(chat): custom right-click context menus

Override the native browser menu with resource-specific menus:
- guild (rail icon): open, copy node id/name, add guild
- channel: open, join/leave, close, copy id/name, create channel
- message: copy text/id, mention author, delete (soft)
- user (member row): mention, copy id/name, move-to-bypass
  (discuss/work in-channel only), settings (self)
- blank areas (rail/channels/messages/members/root): scoped
  create/refresh actions

Menu closes on click/Escape/scroll/resize; positioned within the
viewport; the most specific target wins via stopPropagation.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
h z
2026-05-15 19:35:57 +01:00
parent 372805c9fa
commit f063807089
2 changed files with 317 additions and 8 deletions

View File

@@ -806,3 +806,61 @@ button {
.modal-actions .btn {
flex: 1;
}
/* ---- right-click context menu ---- */
.ctx-menu {
position: fixed;
z-index: 1000;
background: var(--elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
padding: 6px;
display: flex;
flex-direction: column;
gap: 1px;
user-select: none;
}
.ctx-menu .ctx-title {
font-size: 11px;
font-weight: 600;
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 4px 8px 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ctx-menu .ctx-sep {
height: 1px;
background: var(--border);
margin: 4px 2px;
}
.ctx-menu .ctx-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: 0;
color: var(--text);
font-size: 13px;
padding: 7px 8px;
border-radius: 5px;
cursor: pointer;
}
.ctx-menu .ctx-item:hover {
background: var(--accent-soft);
color: var(--text-h);
}
.ctx-menu .ctx-item.danger {
color: var(--danger);
}
.ctx-menu .ctx-item.danger:hover {
background: rgba(242, 63, 66, 0.14);
}
.ctx-menu .ctx-item:disabled {
color: var(--text-faint);
cursor: not-allowed;
background: none;
}