Redesign study block editor UI with drag-and-drop, add/rename, and group study modal

[hendriebeats]

Replaces the minimal study block editor with a fully redesigned modal that supports drag-and-drop reordering, block removal/restore, adding new blocks, and inline block renaming. Also redesigns the group study modal with an inline invite form.

Reviewer notes

Study block editor — drag-and-drop

The drag implementation uses position: fixed during the drag and a placeholder div to hold the vacated space, rather than the previous approach of swapping adjacent siblings. This is needed to support dragging across two separate lists (active vs. removed blocks) — the old sibling-swap approach can't span two containers.

Study block editor — removed blocks

Removed blocks stay in the DOM in a "removed" section rather than being deleted immediately, letting users restore them before committing. The remove/restore buttons swap visibility in-place; the section itself is hidden when empty.

Cross-list drag hysteresis

The mousemove handler uses a 10px hysteresis band when deciding whether to move the placeholder back from the removed list to the active list. Without this, the placeholder oscillates when the mouse is near the boundary because moving the placeholder changes the section's top position, immediately re-triggering the opposite condition.

abortDrag on modal close

If the modal is closed (e.g., via the × button) during an active drag, abortDrag cleans up the fixed-positioned element and placeholder. Without this, the dragged item would be left floating.

startFixedTop calculation

startFixedTop = rect.top - (e.clientY - startMouseY) anchors the element at its pre-drag screen position so it doesn't jump when the 3px threshold is crossed to start the drag.

Block rename via textarea

Block names use a <textarea rows="1"> instead of <input> so they auto-grow vertically for long names; Enter is suppressed since names are single-line.

withRenamedHeader / createGeneralStudyBlockNode

New editorUtils helpers produce ProseMirror nodes for renamed and newly-created blocks. They live in editorUtils rather than StudyBlockEditor.ts because they operate on ProseMirror schema types and belong with the other schema utilities.

Group study modal — inline invite form

The old flow opened a separate /group_study/invite/:groupId route to render an "Invite New People" view. The invite form is now embedded directly in groupStudyHTML, making getInvite and getInviteNewMemberHTML dead code — both are removed along with the route.

Pencil icon changes

The gray circle background was removed and the stroke colour changed to blue (#0057d1) to match the new button style context the icon appears in.

Cyrillic → Latin "x" in SidebarSections

The remove button was using a Cyrillic "х" (U+0445) that looks like Latin "x" but renders differently across fonts/OSes.

Modal close buttons

All three modals (#groupStudy create, #groupStudy view, #newStudy) previously used bare <img onclick> for the close icon — not keyboard-accessible and invisible to screen readers. Changed to <button aria-label="Close"> with a decorative <img alt=""> child, matching the pattern already used in the study block editor modal.

ProseMirror mousedown guards

Four places in Editor.tsx had onclick handlers on non-editable widgets without a mousedown guard. ProseMirror processes mousedown first, repositioning the cursor before the click handler fired. Adding e.preventDefault() on mousedown (and adding "mousedown" to stopEvent for the question-mark decoration) prevents the double cursor placement.

[hendriebeats]

@boxyoman as per our last conversation, I buffed this up quite a bit.