etalon/BountyBoard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: messaging with conversations, rich text, attachments, typing, unread (phase 9)

Browse Source 
- conversations: dm (unique pair, find-or-create), group (titled), project
  (customer-bound); participant-only access
- messages: server-sanitized rich text, attachments referencing uploads
  from the generic POST /api/v1/files endpoint (rate limited, MIME sniffed)
- unread counts via aggregation; mark-read pushes readBy receipts
- chat files served only to conversation participants (or uploader)
- @mentions in chat notify the mentioned participant
- typing indicator: client WS event relayed to other participants
- WS targeted delivery (SendTo) + 15s polling fallback
- two-pane messages UI: conversation list with unread badges, composer
  (contenteditable + formatting buttons), drag & drop upload, inline image
  previews with lightbox, new-conversation dialog with user search

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
etalon
2026-06-12 20:15:56 +02:00
parent 70a813edfa
commit 7d3140334e
11 changed files with 1224 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/app.css
+36
View File
@@ -155,6 +155,42 @@ table.list th { color: var(--muted); font-size: 0.875rem; }
.toast.err { border-left-color: var(--err); }
.toast.ok { border-left-color: var(--ok); }
/* chat */
.chat-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; min-height: 70vh; }
.chat-sidebar { overflow: auto; }
.conv-list { list-style: none; margin: 8px 0 0; padding: 0; }
.conv-list li { border-bottom: 1px solid var(--border); }
.conv-list li.active .conv-item { background: var(--surface2); }
.conv-item {
display: flex; justify-content: space-between; align-items: center; gap: 8px;
width: 100%; padding: 10px 8px; font: inherit; text-align: left;
background: none; border: none; color: var(--text); cursor: pointer;
border-radius: var(--radius);
}
.conv-item:hover { background: var(--surface2); }
.chat-main { display: flex; flex-direction: column; }
.chat-messages { flex: 1; overflow: auto; padding: 8px 0; min-height: 320px; }
.chat-msg {
max-width: 75%; margin: 8px 0; padding: 8px 12px;
background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--radius);
}
.chat-msg.own { margin-left: auto; background: color-mix(in srgb, var(--accent) 12%, var(--surface2)); }
.chat-msg p, .chat-msg ul, .chat-msg ol { margin: 4px 0; }
.chat-img { max-width: 240px; max-height: 180px; cursor: zoom-in; border-radius: var(--radius); }
.chat-toolbar { display: flex; gap: 4px; margin-bottom: 8px; }
.chat-composer {
min-height: 60px; max-height: 200px; overflow: auto;
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius); padding: 8px;
}
.chat-composer:empty::before { content: attr(data-placeholder); color: var(--muted); }
.chat-attachments { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.lightbox { border: none; background: transparent; max-width: 92vw; max-height: 92vh; }
.lightbox img { max-width: 90vw; max-height: 88vh; cursor: zoom-out; }
.lightbox::backdrop { background: rgba(0,0,0,0.8); }
@media (max-width: 800px) { .chat-layout { grid-template-columns: 1fr; } }
/* kanban */
.kanban { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kanban-col {