Multi-tab group study side panel with member picker

[hendriebeats]

Summary

Replaces the single-document side panel in the group study view with a Chrome-style multi-tab panel. Members can open any combination of peer documents simultaneously, drag tabs to reorder them, and the panel persists scroll position per document across tab switches and page reloads.

Q&A for code reviewers

WebSocket — multi-doc subscriptions

sideDoc: Maybe DocId → sideDocs: [DocId] — the old state only tracked one side subscription; the new panel supports N open tabs so this becomes a list.

DocListenStart now carries docId — previously the frontend matched responses to tabs via a FIFO queue. If the backend silently dropped a ListenToDoc (doc not found / unauthorised), the queue would desync and the wrong document would load in each tab. The payload now includes the docId so the frontend routes by identity, not position.

sideDocs dedup guard — reconnect calls ListenToDoc for all open tabs; the guard prevents the same docId appearing twice in sideDocs if the message races.

closeSideDoc called directly in dispatch — handleStopListenToDoc was a one-line wrapper that just called closeSideDoc; inlined to remove the indirection.

DocUpdated now carries docId — required so the frontend can route live updates to the correct tab editor rather than broadcasting to all of them.

Email exposure in embedded JSON

stripEmails in Study.hs — GetUser includes email, which was being serialised into the groupStudyJson blob embedded in the page <script> tag and visible in page source. stripEmails recursively removes the email key from the JSON value before embedding. The server-rendered admin page (/group_study/:docId) is unaffected and still shows emails to study owners.

unsafeRawHtml + </script> replacement — Ginger's | safe filter produces empty output for Text GVals in ginger-0.10.5.2, so unsafeRawHtml is the only way to emit raw JSON into a <script> tag. Aeson.encode escapes all user strings as JSON literals; the only remaining HTML risk is a literal </script> in a document name, which is neutralised by replacing it with <\/script> (semantically identical to a JSON parser).

Frontend tab UI

Tab element is a <div role="tab"> not a <button> — a <button> containing another <button> (the close button) is invalid HTML; browsers eject the inner element from the DOM, breaking the close button. The outer element is a div with role="tab" and keyboard handlers instead.

Member picker rows use <button> for clickable rows — interactive rows are <button type="button"> for proper keyboard and assistive technology support; non-interactive rows (owners with no document yet) remain <div>.

Scroll position stored as ProseMirror doc position, not scrollTop pixels — pixel offsets change when text reflows at different viewport widths. Storing the nearest document position (posAtCoords) and restoring via coordsAtPos keeps the same paragraph in view regardless of screen size.

computeLabels disambiguation — tab labels default to first name, falling back to first name + last initial, then first initial + full last name when there are collisions. This avoids showing full names in space-constrained tabs.

Reconnect handling

On WS reconnect, stale editors are destroyed before re-subscribing. Without this, DocListenStart would mount a second ProseMirror instance into the same container while the original leaked.