Remember scroll position per person in side-by-side group study viewer (108 LOC)

[hendriebeats]

Summary

This PR does two things:

1. Remembers scroll position in the split-screen group study viewer, so switching between member documents and returning to one you've already read doesn't lose your place.
2. Refactors the group study modal UI — replaces the separate "Invite New Members" page with an inline invite form, redesigns the members/invites list with status badges, and adds a close button and descriptive copy to the create-study dialog.

---

frontend/src/GroupStudy.ts — scroll position memory

makeScrollMemory

A small closure that wraps localStorage reads/writes for scroll position, scoped to a specific container element. Keys are namespaced as split-scroll:{pageDocId}:{docId} so positions don't collide across different study pages.

• save(docId) — writes container.scrollTop to localStorage.
• restore(docId) — reads the saved value and applies it inside a requestAnimationFrame, which is necessary because the editor isn't fully painted yet when DocListenStart fires.
• watch(getCurrentDocId) — attaches a debounced scroll listener (200 ms) so saves don't hammer localStorage on every pixel of scroll.

loadEditor

• Sends StopListenToDoc for the old document and saves its scroll position before switching.
• Guards if (!docId) return to avoid sending an empty doc ID if the select has no selected option.
• Sends ListenToDoc for the newly selected document.

DocListenStart handler

Calls scroll?.restore(currentDocId) after mounting the editor so the panel jumps to the remembered position.

---

backend/lib/Api/Htmx/GroupStudy.hs — group study modal refactor

createStudyGroupHTML

• Added a close (×) icon button and a descriptive paragraph explaining what a group study is.
• Labels now use field-label / field-desc classes. The people label was renamed to "Invite people (optional)" with a note that invites can be sent later.

shareHTML

• Status is now shown as a colour-coded badge ("Invited" / "Rejected" / "Expired") instead of a plain red text suffix.
• Remove button changed from a trash-icon image (red trash) to a text "Remove" button (remove-btn) for clarity.
• Layout uses shared person-row / person-info / person-actions grid classes.

memberHTML

• Shows the member's email address below their name.
• Shows "Owner" or "Member" role label when the viewer is not the owner (so non-owners can see who runs the group).
• The (you) indicator is now a styled you-label span.

groupStudyHTML

• Close button added.
• Renamed section: name-edit input is now under a field-label, with a read-only fallback for non-owners.
• "Invite New Members" button replaced with an inline email invite form (email input + role dropdown + submit button). On submit, htmx replaces #groupStudyInner with the updated panel — no separate page needed.
• Members and pending invites are merged into a single "People with access" section.

postInvite

• Removed the old html =<< getInviteNewMemberHTML response (that rendered the now-deleted separate invite page). The endpoint now ends with getGroupStudy' user groupId, returning the full refreshed panel, which htmx swaps into #groupStudyInner.

---

backend/lib/Entity/User.hs

Added email to the GetUser projection so member rows can display email addresses in the group study modal.

---

backend/static/scripts/studyGroup.js

After htmx settles inside the open modal, focuses the email input in the inline invite form and attaches an Enter-key handler (guarded with _inviteHandlerAttached to avoid duplicate listeners across htmx swaps).

---

backend/static/styles/component/groupstudy.css

Full visual refresh of the modal to match the redesigned HTML:

• person-row grid, person-info, person-actions, person-name, person-email, you-label, person-role — shared layout primitives for both member and invite rows.
• badge / badge-pending / badge-error — pill badges for invite status.
• ghost-blue / remove-btn — low-visual-weight action buttons.
• groupStudy-invite-row — three-column grid (email | role | button) for the inline invite form.
• p-select part styles scoped to the modal.

---

frontend/src/Editor/StudyBlockArrowPlugin.ts + Editor.tsx

Arrow-key navigation plugin that fixes cursor movement at study block cell boundaries in the two-column table layout. ProseMirror's default navigation follows document order, which causes the cursor to jump to the wrong column. This plugin intercepts ArrowUp/ArrowDown at cell edges and uses coordinate probing (coordsAtPos / posAtCoords) to land the cursor on the correct visual line in the adjacent cell.

Also fixed verseRefWidget to use onmousedown + getPos() instead of a stale closure over position, and removed the erroneous contentEditable = "true" from verse ref spans.

---

Minor fixes

• study.html: fixed typo "grad" → "drag".
• SidebarSections.ts: removed two lines of commented-out dead code.
• StudyBlockEditor.ts: removed an unused currentIndex variable read inside the drag mouseup handler.