DarkSingularity/ds-chat
Private
Public Access
3
0
Fork 0
Code Releases 4 Activity

Add resizable room panel, searchable user picker, and direct room membership

Browse Source 
Room info panel is now user-resizable (fixing a layout clip at narrow
widths), and every user-selection spot (room membership, admin ownership
transfer) uses a new searchable UserPicker instead of raw text input or
prompt(). Member rows fold role + actions into a single inline dropdown
instead of a row of buttons, so the member list stays usable as rooms grow.

Room invites (the accept/decline flow) are replaced by adding a user to a
room directly -- an admin/owner picks someone and they're a member
immediately, with a "you've been added" notification email instead of an
invite email. Drops the now-unused room_invites table.
This commit is contained in:
ksmith
2026-08-14 20:40:37 -06:00
parent b724f8a33b
commit 91589ee647
32 changed files with 735 additions and 1052 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/RoomInfoPanel.css
+39 -30
View File
@@ -1,14 +1,33 @@
.room-info-panel {
width: 260px;
position: relative;
flex: none;
min-width: 260px;
max-width: 480px;
border-left: 1px solid var(--ds-border);
background: var(--ds-void-2);
padding: var(--sp-4);
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.room-info-resize-handle {
position: absolute;
top: 0;
bottom: 0;
left: -3px;
width: 6px;
cursor: col-resize;
z-index: 5;
touch-action: none;
}
.room-info-resize-handle:hover,
.room-info-resize-handle:active {
background: color-mix(in srgb, var(--ds-accent) 40%, transparent);
}
.room-info-header {
display: flex;
justify-content: space-between;
@@ -81,26 +100,27 @@
white-space: nowrap;
}
.room-info-member-actions {
display: flex;
gap: 6px;
width: 100%;
padding-left: 32px;
}
.room-info-member-actions button {
background: transparent;
border: 1px solid var(--ds-border);
color: var(--ds-muted);
font-size: 0.7rem;
padding: 3px 7px;
border-radius: 6px;
.room-info-role-select {
appearance: none;
-webkit-appearance: none;
font-family: inherit;
cursor: pointer;
padding-right: 20px;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 11px) 55%, calc(100% - 6px) 55%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
opacity: 0.85;
}
.room-info-member-actions button:hover {
color: var(--ds-text);
border-color: var(--ds-accent);
.room-info-role-select:hover:not(:disabled) {
opacity: 1;
}
.room-info-role-select:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.role-badge {
@@ -135,6 +155,7 @@
.room-info-invite-form {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
}
.room-info-invite-form input {
@@ -147,18 +168,6 @@
font-size: 0.84rem;
}
.room-info-pending {
margin-top: var(--sp-2);
}
.room-info-pending-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.82rem;
color: var(--ds-text);
padding: 5px 0;
}
.room-info-error {
color: var(--ds-danger);