Add edit mode toggle with in-place title editing and score locking for concurrent editing

Edit mode:
- Add edit-mode toggle button in arrangementPalette bottom-right corner
- Decouple toggle via requisitions: button sends editModeChanged,
  App reacts with state change, allowing any component to toggle
- Header auto-pins during edit mode (forceExpanded)
- Hide pin button during editing (redundant while force-pinned)

Title editing:
- In-place editing: native input replaces label with identical styling
- Right-aligned, auto-width via fit-content (grows with text)
- Focus selects all text, Enter/Blur saves only when title differs
- Escape reverts to original and selects all
- Title changes now tracked in undo/redo history (previously ignored)
- Arrangement scoreId persisted through snapshots for localStorage round-trips

Score locking:
- New score_locks table: score_id (PK, FK→scores), user_id, username,
  lock_token, locked_at with 30-minute expiry timeout
- lockScore endpoint: auth + permission check, returns token or conflict
  (409 with username/lockedAt). Supports silent re-lock via prevToken
- unlockScore: token-validated release
- forceUnlockScore: admin-only override for stuck locks
- handleUpdateScore validates optional lock token; rejects with 409
- Client acquires lock on edit-mode enter, releases on exit
- Local-only arrangements skip locking (no DB scoreId)
- Data model passes lockToken on save; 409 conflict surface as error

Fixes:
- Remove duplicate arrangement-title id: use separate instances with
  -collapsed suffix
- Fix title editing corrupting arrangement after undo (stale state)
- Remove placeholder from title input (Chrome native popup)
- Remove data-tooltip=expand from arrangement title
- Suppress browser context menu app-wide
- Remove section comments from Requsitions.ts
- Remove dead code: handleKeyUp, DisplayMode enum, editingTitle state

Tests:
- score-locks.spec.ts: 5 tests for getArrangementSnapshot scoreId
  inclusion and applyArrangementSnapshot scoreId restoration
- UndoRedoStack.spec.ts: updated title change test to reflect new
  tracking behavior

Signed-off-by: Mike Lischke <mike@lischke-online.de>

Author: mike-lischke

src/App.scss

@@ -192,17 +192,29 @@ h6 {
     height: 100%;
 }
 
-#mainArrangementTitle {
+.main-arrangement-title {
     display: block;
     font-size: clamp(12pt, 20pt, 20pt);
-    margin-right: 12px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    min-width: 0;
+
+    text-align: right;
+    padding: 0;
+    margin: 0 12px 2px 0;
+
+    max-width: 100%;
+    min-width: 1ch;
+    width: fit-content;
+}
+
+.main-arrangement-title:focus {
+    outline: 1px solid var(--color-primary);
+    outline-offset: 1px;
+    border-radius: 2px;
 }
 
-.collapsed-header #mainArrangementTitle {
+.collapsed-header .main-arrangement-title {
     display: block;
     font-size: clamp(10pt, 16pt, 16pt);
     white-space: nowrap;
@@ -214,6 +226,7 @@ h6 {
 #arrangementPalette {
     flex: 1 1 auto;
     min-width: 0;
+    padding: 4px;
 }
 
 #editTitleButton {

src/App.tsx

@@ -7,15 +7,14 @@ import { createRef, type ComponentChild } from "preact";
 
 import type { ISbDmArrangement } from "../../../core/ScoreBookDataModel.js";
 import type { UndoManager } from "../../../core/UndoManager.js";
-import { Input } from "../framework/Input.js";
+import { KeyboardKeys } from "../../../core/utils.js";
 import { Label } from "../framework/Label.js";
 import { UIComponent, type ICommonUIProperties } from "../framework/UIComponent.js";
 
 export interface IArrangementTitleProperties extends ICommonUIProperties {
     arrangement: Readonly<ISbDmArrangement>;
     undoManager: UndoManager;
     editMode: boolean;
-    onEditEnd: () => void;
 }
 
 interface IArrangementTitleState {
@@ -35,10 +34,7 @@ export class ArrangementTitle extends UIComponent<IArrangementTitleProperties, I
     }
 
     public override componentDidMount(): void {
-        const { editMode, arrangement } = this.props;
-        if (editMode) {
-            this.inputRef.current?.focus();
-        }
+        const { arrangement } = this.props;
 
         this.setState({ title: arrangement.title, inputValue: arrangement.title });
     }
@@ -53,30 +49,24 @@ export class ArrangementTitle extends UIComponent<IArrangementTitleProperties, I
     }
 
     public override render(): ComponentChild {
-        const { id, editMode } = this.props;
+        const { id, className, style, editMode } = this.props;
         const { title, inputValue } = this.state;
 
         if (editMode) {
             return (
-                <Input
+                <input
                     id={id}
                     ref={this.inputRef}
-                    className={`input px-0 py-0`}
-                    autoFocus
-                    onChange={(e) => {
+                    className={className}
+                    style={style}
+                    onInput={(e) => {
                         this.setState({
                             inputValue: (e.target as HTMLInputElement).value
                         });
                     }}
-                    onConfirm={this.onConfirm}
-                    onCancel={this.onCancel}
-                    onBlur={this.onBlur}
-                    onKeyDown={(e) => {
-                        // Don't forward key events to parent elements, as they might trigger unwanted actions
-                        // (e.g. space triggering play/pause).
-                        e.stopPropagation();
-                    }}
-                    placeholder="Add a title..."
+                    onFocus={this.handleFocus}
+                    onKeyDown={this.handleInputKeyDown}
+                    onBlur={this.handleBlur}
                     value={inputValue}
                 />
             );
@@ -85,40 +75,65 @@ export class ArrangementTitle extends UIComponent<IArrangementTitleProperties, I
         return (
             <Label
                 id={id}
+                className={className}
+                style={style}
                 {...this.dataAttributes}
             >
                 {title}
             </Label>
         );
     }
 
-    private onBlur = (event: FocusEvent) => {
-        const { editMode, onEditEnd, undoManager, arrangement } = this.props;
-
-        if (editMode) {
-            undoManager.edit({
-                type: "EditCommand_ArrangementTitle", arrangement,
-                newTitle: (event.target as HTMLInputElement).value
-            });
-            onEditEnd();
-        }
+    private handleFocus = (): void => {
+        this.inputRef.current?.select();
     };
 
-    private onConfirm = (event: KeyboardEvent) => {
-        const { onEditEnd, undoManager, arrangement } = this.props;
+    private handleBlur = (event: FocusEvent) => {
+        const { undoManager, arrangement } = this.props;
+        const { title } = this.state;
+        const newTitle = (event.target as HTMLInputElement).value;
+
+        if (newTitle === arrangement.title) {
+            if (title !== arrangement.title) {
+                this.setState({ title: arrangement.title, inputValue: arrangement.title });
+            }
+
+            return;
+        }
 
         undoManager.edit({
             type: "EditCommand_ArrangementTitle", arrangement,
-            newTitle: (event.target as HTMLInputElement).value
+            newTitle
         });
-        onEditEnd();
     };
 
-    private onCancel = (event: KeyboardEvent) => {
-        const { onEditEnd, arrangement } = this.props;
+    private handleInputKeyDown = (e: KeyboardEvent) => {
+        const { arrangement } = this.props;
+
+        switch (e.key) {
+            case KeyboardKeys.Enter: {
+                this.inputRef.current?.blur();
+
+                break;
+            }
 
-        this.setState({ inputValue: arrangement.title });
-        onEditEnd();
+            case KeyboardKeys.Escape: {
+                const input = this.inputRef.current;
+                if (input) {
+                    input.value = arrangement.title;
+                }
+
+                this.setState({ inputValue: arrangement.title }, () => {
+                    this.inputRef.current?.blur();
+                });
+
+                break;
+            }
+
+            default: {
+                break;
+            }
+        }
     };
 
 }

src/components/ui/Arrangement/ArrangementTitle.tsx

@@ -168,6 +168,11 @@ export class Arrangement implements ISbDmArrangement {
         // same TPs. However, applying the full snapshot is required for Undo/Redo.
         this.applyTimeParams(arrangementSnapshot);
         this.title = arrangementSnapshot.title ?? "Untitled Arrangement";
+
+        if (arrangementSnapshot.scoreId !== undefined) {
+            this.id = arrangementSnapshot.scoreId;
+        }
+
         this.measureLabels = arrangementSnapshot.measureLabels
             ? { ...arrangementSnapshot.measureLabels }
             : {};

src/core/Arrangement.ts

@@ -656,6 +656,9 @@ export class ScoreBookDataModel {
         return this.currentCapabilities;
     }
 
+    /** Token for the active score lock. Set by the lockScore flow. */
+    public lockToken?: string;
+
     private accessToken: string | undefined;
     private currentUser: IUserInfo | undefined;
     private currentGroup: { id: number; name: string; } | undefined;
@@ -739,6 +742,10 @@ export class ScoreBookDataModel {
             void this.rewriteMigratedScore(source, arrangement);
         }
 
+        if (this.isScoreEntry(source)) {
+            arrangement.id = source.id;
+        }
+
         this.data.arrangement = arrangement;
         this.applyArrangementPlaybackSettings(arrangement);
         void requisitions.execute("scoreBookLoaded", ScoreBookChangeReason.ScoreLoaded);
@@ -859,6 +866,10 @@ export class ScoreBookDataModel {
 
         const { success, id } = await res.json() as { success: boolean; id: number; };
         if (success) {
+            if (this.data.arrangement) {
+                (this.data.arrangement as Arrangement).id = id;
+            }
+
             const newScore: ISbDmScore = {
                 type: SbDmEntityType.Score,
                 id,
@@ -892,16 +903,28 @@ export class ScoreBookDataModel {
      * @param content The new content string to persist.
      */
     public async updateScoreContent(score: ISbDmScore, content: string): Promise<void> {
+        const body: Record<string, unknown> = { id: score.id, content };
+
+        if (this.lockToken) {
+            body.token = this.lockToken;
+        }
+
         const res = await this.fetchApi(`/api?action=updateScore`, {
             method: "POST",
             headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ id: score.id, content }),
+            body: JSON.stringify(body),
         });
 
         if (!res) {
             return;
         }
 
+        if (res.status === 409) {
+            const data = await res.json() as { error?: string; };
+
+            throw new Error(data.error ?? "Score is locked by another user.");
+        }
+
         score.content = content;
     }
 
@@ -1583,6 +1606,54 @@ export class ScoreBookDataModel {
         void requisitions.execute("scoreBookLoaded", ScoreBookChangeReason.LibraryRefreshed);
     }
 
+    /**
+     * Acquires an edit lock for a score. Returns the lock token on success, or conflict info
+     * if another user holds the lock.
+     *
+     * @param scoreId The ID of the score to lock.
+     * @param prevToken An optional previous token to attempt renewal of an expired lock.
+     *
+     * @returns Lock result with token or conflict details.
+     */
+    public async lockScore(scoreId: number, prevToken?: string): Promise<{
+        success: boolean; token?: string; locked?: boolean; username?: string; lockedAt?: string;
+    }> {
+        const body: Record<string, unknown> = { scoreId };
+
+        if (prevToken) {
+            body.prevToken = prevToken;
+        }
+
+        const res = await this.fetchApi("/api?action=lockScore", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(body),
+        }, true, true);
+
+        if (!res) {
+            return { success: false };
+        }
+
+        return res.json() as unknown as {
+            success: boolean; token?: string; locked?: boolean; username?: string;
+            lockedAt?: string;
+        };
+    }
+
+    /**
+     * Releases an edit lock for a score.
+     *
+     * @param scoreId The ID of the score to unlock.
+     * @param token The lock token to verify ownership.
+     */
+    public async unlockScore(scoreId: number, token: string): Promise<void> {
+        await this.fetchApi("/api?action=unlockScore", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ scoreId, token }),
+        });
+    }
+
     private async rewriteMigratedScore(score: ISbDmScore, arrangement: Arrangement): Promise<void> {
         if (!this.canWriteScores) {
             return;

src/core/ScoreBookDataModel.ts

@@ -5,10 +5,9 @@
 
 import { requisitions } from "../supplement/Requisitions.js";
 import { getArrangementSnapshot } from "./serialisation/snapshots.js";
-import type { EditCommand, EditCommand_ArrangementTitle, EditCommand_Note } from "./types/edit_commands.js";
+import type { EditCommand, EditCommand_Note } from "./types/edit_commands.js";
 import type { IArrangementSnapshot, IAudioData } from "./types/general.js";
 import type { ISbDmArrangement } from "./ScoreBookDataModel.js";
-import { exists } from "./utils.js";
 
 export interface IHistoryState {
     arrangementSnapshot: IArrangementSnapshot;
@@ -22,7 +21,6 @@ export interface IHistoryState {
  *
  * - Stores a timeline of arrangement snapshots as `past` and `future`.
  * - Publishes when `canUndo`/`canRedo` changes for UI controls.
- * - Ignores `EditCommand_ArrangementTitle` changes (title is always read live).
  * - Squashes rapid note-style cycling via a deferred timeout to keep history clean.
  */
 export class UndoRedoStack {
@@ -70,10 +68,7 @@ export class UndoRedoStack {
      * @returns The current `IArrangementSnapshot` including the live title.
      */
     public get currentState(): IArrangementSnapshot {
-        return {
-            ...this.past[this.past.length - 1].arrangementSnapshot,
-            title: this.arrangementView.title // Title is ignored in undo/redo, so we just pull the current title
-        };
+        return this.past[this.past.length - 1].arrangementSnapshot;
     }
 
     /**
@@ -85,10 +80,6 @@ export class UndoRedoStack {
      * @param oldValue Optional note-style being replaced, used by squash heuristics.
      */
     public handleEdit(command: EditCommand, oldValue?: IAudioData): void {
-        if (exists((command as EditCommand_ArrangementTitle).newTitle)) {
-            return; // Title is ignored in undo/redo, so we don't react to it changing at all
-        }
-
         this.past.push(this.getNewHistoryState(this.arrangementView, command, oldValue));
 
         if (this.future.length) {

src/core/UndoRedoStack.ts

@@ -26,6 +26,10 @@ export const getArrangementSnapshot = (arrangementView: Readonly<ISbDmArrangemen
         tracks: arrangementView.tracks.map(getTrackSnapshot),
     };
 
+    if (arrangementView.id >= 10000) {
+        snapshot.scoreId = arrangementView.id;
+    }
+
     if (Object.keys(arrangementView.measureLabels).length > 0) {
         snapshot.measureLabels = { ...arrangementView.measureLabels };
     }

src/core/serialisation/snapshots.ts

@@ -55,6 +55,9 @@ export interface IArrangementSnapshot {
     timeParams: ITimeParamsBase;
     tracks: ITrackSnapshot[];
 
+    /** The database score ID, if this arrangement is backed by a DB score. */
+    scoreId?: number;
+
     /** Optional per-measure section labels, keyed by 1-based measure number. */
     measureLabels?: Record<number, string>;
 }