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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user