Add DB schema versioning, make dialogs awaitable, and implement reset pipeline

- Add ScoreBookChangeReason enum to differentiate scoreBookLoaded events
- Add features table with schema_version key for DB version tracking
- initialize() only creates tables on fresh installs, never modifies existing DBs
- handleHealth detects pre-versioning and outdated schemas, reports dbError
- handleSetup allows emergency reset without auth when hasUsers() fails
- Remove unused build/serve-dist.mjs

- Make LoginDialog awaitable: remove callbacks, add show() with Semaphore
- Make BackendSetupDialog awaitable: remove onSetupComplete, add show()
- Add setStatePromise() to UIComponent for clean awaitable state transitions
- Implement reset pipeline: logout → setup → confirm → login → reset → restart
- Clear session on dbError before showing setup dialog
- Reset pipeline uses dataModel.resetDatabase() instead of raw fetch()
- Add NODE_NO_WARNINGS=1 to e2e test scripts
- Make backend-config.json optional with existsSync check

- Fix NotificationCenter: clearHistory also removes mainList entries
- Fix NotificationCenter: add wrap prop to Label in main toast rendering
- Fix ScoreLibrary toggle icon after drawer reopen (scoreBookLoaded refinement)
- Suppress Node deprecation warnings in e2e tests
- Remove this.props/this.state violations across 9 files
- Update seed.sql with current score library data

- Update readme: remove sound library manager mention
- Add paths-ignore to GitHub workflows for docs/config-only pushes

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

Author: mike-lischke

.github/copilot-instructions.md

@@ -67,7 +67,7 @@ Always put a blank line after blocks (`if`/`for`/`while`/`switch`/`case`/anonymo
 - Blank line before `@returns`; always use `@returns` (not `@return`).
 - `@param` descriptions follow the tag with a single space — never column-align across entries. Wrapped continuation lines indent to where the description text starts.
 
-### React
+### React + Preact
 
 - Never use `this.props.` or `this.state.` — destructure fields into individual variables at the top of the method.
 - **JSX must be logic-free.** The rendering tree (everything after `return (`) must contain only markup with minimal interpolations like `{userRows}` or `{condition && <Foo />}`. No inline `.map()`, no ternaries with more than one line per branch, no IIFEs, no `Array.from().find()`.

build/seed.sql

@@ -194,7 +194,9 @@ export class App extends UIComponent<{}, IAppState> {
     }
 
     public override componentDidUpdate(_prevProps: {}, prevState: IAppState): void {
-        if (prevState.phase !== AppPhase.Running && this.state.phase === AppPhase.Running) {
+        const { phase } = this.state;
+
+        if (prevState.phase !== AppPhase.Running && phase === AppPhase.Running) {
             this.updateStatsItem();
         }
     }
@@ -213,7 +215,8 @@ export class App extends UIComponent<{}, IAppState> {
     }
 
     public render() {
-        const { phase, displayMode, sidebarOpen, headerPinned, instrumentEditorEnabled } = this.state;
+        const { phase, displayMode, sidebarOpen, headerPinned, instrumentEditorEnabled, printing,
+            printOptions } = this.state;
         const isRunning = phase === AppPhase.Running;
 
         let splashContent: ComponentChild;
@@ -225,9 +228,6 @@ export class App extends UIComponent<{}, IAppState> {
                 splashContent = (
                     <BackendSetupDialog
                         ref={this.backendSetupDialogRef}
-                        onSetupComplete={() => {
-                            void this.handleBackendSetupComplete();
-                        }}
                     />
                 );
 
@@ -249,8 +249,6 @@ export class App extends UIComponent<{}, IAppState> {
                     <LoginDialog
                         ref={this.loginDialogRef}
                         dataModel={this.dataModel}
-                        onLoginSuccess={this.handleLoginSuccess}
-                        onContinueAnonymous={this.handleContinueAnonymous}
                     />
                 );
 
@@ -500,14 +498,9 @@ export class App extends UIComponent<{}, IAppState> {
                         <LoginDialog
                             ref={this.loginDialogRef}
                             dataModel={this.dataModel}
-                            onLoginSuccess={this.handleLoginSuccess}
-                            onContinueAnonymous={this.handleContinueAnonymous}
                         />
                         <BackendSetupDialog
                             ref={this.backendSetupDialogRef}
-                            onSetupComplete={() => {
-                                void this.handleBackendSetupComplete();
-                            }}
                         />
                         <PrintDialog ref={this.printDialogRef} onAccept={this.handlePrintAccept} />
                         <UserGroupEditor
@@ -524,11 +517,11 @@ export class App extends UIComponent<{}, IAppState> {
                             }}
                         />
                         {
-                            this.state.printing && this.dataModel.arrangement && this.state.printOptions
+                            printing && this.dataModel.arrangement && printOptions
                             && this.arrangementPlayer && this.undoManager && (
                                 <PrintView
                                     arrangement={this.dataModel.arrangement as Arrangement}
-                                    options={this.state.printOptions}
+                                    options={printOptions}
                                     dataModel={this.dataModel}
                                     arrangementPlayer={this.arrangementPlayer}
                                     services={this.services}
@@ -567,6 +560,8 @@ export class App extends UIComponent<{}, IAppState> {
     /**
      * Checks if the backend is reachable and initialised. If not, opens the setup dialog.
      * Once the backend is ready, proceeds with data model initialisation.
+     *
+     * @returns A promise that resolves when the check is complete.
      */
     private async checkBackendThenInitialize(): Promise<void> {
         let health: {
@@ -588,7 +583,7 @@ export class App extends UIComponent<{}, IAppState> {
 
         if (!health.configLoaded) {
             this.setState({ phase: AppPhase.Setup }, () => {
-                this.backendSetupDialogRef.current?.open({
+                void this.backendSetupDialogRef.current?.show({
                     mode: "fatal",
                     configError: health.configError,
                 });
@@ -599,7 +594,7 @@ export class App extends UIComponent<{}, IAppState> {
 
         if (!health.initialized) {
             this.setState({ phase: AppPhase.Setup }, () => {
-                this.backendSetupDialogRef.current?.open({
+                void this.backendSetupDialogRef.current?.show({
                     mode: "initial",
                     dbError: health.dbError,
                 });
@@ -608,6 +603,50 @@ export class App extends UIComponent<{}, IAppState> {
             return;
         }
 
+        if (health.dbError) {
+            // Pipeline: logout → setup dialog → confirmation → login → reset.
+            await this.dataModel.logout();
+            await this.setStatePromise({ phase: AppPhase.Setup });
+
+            const setupResult = await this.backendSetupDialogRef.current?.show({
+                mode: "admin",
+                dbError: health.dbError,
+            });
+
+            if (setupResult !== "reset") {
+                return;
+            }
+
+            const confirmed = await this.confirmDialogRef.current?.show(
+                "This will delete all scores, folders, users and groups.\n"
+                + "The database tables will be recreated from scratch.",
+                { accept: "Reset Database", refuse: "Cancel" },
+                "Reset Database",
+                ["This cannot be undone. Make sure to export your scores if you want to keep them."],
+            );
+
+            if (confirmed !== DialogResponseClosure.Accept) {
+                return;
+            }
+
+            await this.setStatePromise({ phase: AppPhase.Login });
+            const loggedIn = await this.loginDialogRef.current?.show(true);
+
+            if (!loggedIn) {
+                return;
+            }
+
+            const ok = await this.dataModel.resetDatabase();
+
+            if (!ok) {
+                // Reset failed — restart the health check so the setup dialog can show the error.
+                return this.checkBackendThenInitialize();
+            }
+
+            // Restart the health check — the backend is now fresh.
+            return this.checkBackendThenInitialize();
+        }
+
         if (!health.hasUsers) {
             this.setState({ phase: AppPhase.AdminSetup }, () => {
                 this.adminSetupDialogRef.current?.open();
@@ -655,7 +694,7 @@ export class App extends UIComponent<{}, IAppState> {
         }
 
         this.setState({ phase: AppPhase.Login }, () => {
-            this.loginDialogRef.current?.open();
+            void this.loginDialogRef.current?.show().then(this.handleLoginDialogResult);
         });
     }
 
@@ -671,9 +710,11 @@ export class App extends UIComponent<{}, IAppState> {
     };
 
     private handleAuthChanged = (): Promise<boolean> => {
-        if (!this.dataModel.authenticated && this.state.phase === AppPhase.Running) {
+        const { phase } = this.state;
+
+        if (!this.dataModel.authenticated && phase === AppPhase.Running) {
             this.setState({ phase: AppPhase.Login }, () => {
-                this.loginDialogRef.current?.open();
+                void this.loginDialogRef.current?.show().then(this.handleLoginDialogResult);
             });
         } else {
             this.forceUpdate();
@@ -682,6 +723,19 @@ export class App extends UIComponent<{}, IAppState> {
         return Promise.resolve(true);
     };
 
+    /**
+     * Handles the result of a login dialog show() call for non-pipeline paths.
+     *
+     * @param loggedIn Whether the user logged in successfully.
+     */
+    private handleLoginDialogResult = (loggedIn: boolean): void => {
+        if (loggedIn) {
+            this.handleLoginSuccess();
+        } else {
+            this.handleContinueAnonymous();
+        }
+    };
+
     private handleLoginSuccess = (): void => {
         this.signInFromRunning = false;
         void this.initializeApp().then(() => {
@@ -747,7 +801,7 @@ export class App extends UIComponent<{}, IAppState> {
                 }
 
                 this.setState({ phase: AppPhase.Login }, () => {
-                    this.loginDialogRef.current?.open();
+                    void this.loginDialogRef.current?.show().then(this.handleLoginDialogResult);
                 });
 
                 return;
@@ -826,7 +880,7 @@ export class App extends UIComponent<{}, IAppState> {
     private handleSignInClick = () => {
         this.signInFromRunning = true;
         this.setState({ phase: AppPhase.Login }, () => {
-            this.loginDialogRef.current?.open();
+            void this.loginDialogRef.current?.show().then(this.handleLoginDialogResult);
         });
     };
 
@@ -848,7 +902,7 @@ export class App extends UIComponent<{}, IAppState> {
         this.notificationItem = undefined;
 
         this.setState({ phase: AppPhase.Login }, () => {
-            this.loginDialogRef.current?.open();
+            void this.loginDialogRef.current?.show().then(this.handleLoginDialogResult);
         });
     };
 
@@ -880,7 +934,7 @@ export class App extends UIComponent<{}, IAppState> {
                 label: "Reset Backend",
                 icon: <Icon src={Codicon.Server} />,
                 onClick: () => {
-                    this.backendSetupDialogRef.current?.open({ mode: "admin" });
+                    void this.backendSetupDialogRef.current?.show({ mode: "admin" });
                 },
             });
         } else if (user) {

src/App.tsx

@@ -294,6 +294,7 @@ export class ArrangementViewer extends UIComponent<IArrangementViewerProps, IArr
     private autoFollow = (realTime: RealTime) => {
         if (this.viewerRef.current && this.playBeamRef.current && this.viewerContentHostRef.current) {
             const { arrangementPlayer } = this.props;
+            const { trackViewMode } = this.state;
 
             const viewer = this.viewerRef.current;
             const contentHost = this.viewerContentHostRef.current;
@@ -303,7 +304,7 @@ export class ArrangementViewer extends UIComponent<IArrangementViewerProps, IArr
             const maxScroll = Math.max(0, contentWidth - clientWidth);
 
             const metrics = arrangementPlayer.scoreMetrics;
-            const prefixWidthPixels = this.state.trackViewMode === "staff" ? this.measureStaffPrefixWidthPx() : 0;
+            const prefixWidthPixels = trackViewMode === "staff" ? this.measureStaffPrefixWidthPx() : 0;
             const musicalContentWidth = Math.max(0, contentWidth - prefixWidthPixels);
             const barWidthPixels = metrics.bars > 0 ? musicalContentWidth / metrics.bars : 0;
             const stepWidthPixels = barWidthPixels / metrics.stepsPerBar;

src/components/ui/Arrangement/ArrangementViewer.tsx

@@ -109,7 +109,9 @@ export class Overlay extends UIComponent<IOverlayProps, IOverlayState> {
     };
 
     private handleOverlayVisibilityChanged = (data: { name: string; visible: boolean; }): Promise<boolean> => {
-        if (data.name !== this.props.name) {
+        const { name } = this.props;
+
+        if (data.name !== name) {
             return Promise.resolve(false);
         }
 

src/components/ui/Overlay.tsx

@@ -217,8 +217,10 @@ export class PrintDialog extends UIComponent<IPrintDialogProps, IPrintDialogStat
 
     private handleClose = (returnValue: string): void => {
         const { onAccept } = this.props;
+        const { options } = this.state;
+
         if (returnValue === "print") {
-            onAccept?.(this.state.options);
+            onAccept?.(options);
         }
     };
 }

src/components/ui/Print/PrintDialog.tsx

@@ -58,7 +58,7 @@ export class ConfirmDialog extends UIComponent<{}, IConfirmDialogState> {
     }
 
     public render(): ComponentChild {
-        const { title, message, buttons, description } = this.state;
+        const { title, message, buttons, description, closeOnBackdropClick } = this.state;
 
         const className = this.generateFinalClassName(["confirmDialog"]);
         let dialogContent = null;
@@ -114,7 +114,7 @@ export class ConfirmDialog extends UIComponent<{}, IConfirmDialogState> {
             <Dialog
                 ref={this.dialogRef}
                 className={className}
-                closeOnBackdropClick={this.state.closeOnBackdropClick}
+                closeOnBackdropClick={closeOnBackdropClick}
                 caption={
                     <>
                         <Icon src={Codicon.Question} />

src/components/ui/composites/ConfirmDialog.tsx

@@ -120,9 +120,11 @@ export class StatusDialog extends UIComponent<IStatusDialogProperties> {
      * Closes the dialog programmatically.
      */
     public dismiss(): void {
+        const { onClose } = this.props;
+
         this.closingIntentionally = true;
         this.valueDialogRef.current?.dismiss();
-        this.props.onClose?.();
+        onClose?.();
     }
 
     public render(): ComponentChild {

src/components/ui/composites/StatusDialog.tsx

@@ -36,10 +36,10 @@ export class DrawerSidebar extends UIComponent<IDrawerSidebarProps, IDrawerSideb
     }
 
     public override componentDidUpdate(prevProps: IDrawerSidebarProps, prevState: IDrawerSidebarState): void {
-
         const { open, alwaysOpen } = this.props;
+        const { everOpened } = this.state;
 
-        if (!this.state.everOpened && (open || alwaysOpen === true)) {
+        if (!everOpened && (open || alwaysOpen === true)) {
             this.setState({ everOpened: true });
         }
     }

src/components/ui/framework/DrawerSidebar.tsx

@@ -51,7 +51,7 @@ export class Menu extends UIComponent<IMenuProperties, IMenuState> {
     }
 
     public render(): ComponentChild {
-        const { id, caption, icon, items, style } = this.props;
+        const { id, caption, icon, items, style, onItemClick } = this.props;
         const triggerShown = (caption ?? icon) !== undefined;
         const className = this.generateFinalClassName(["menuHost"]);
 
@@ -88,7 +88,7 @@ export class Menu extends UIComponent<IMenuProperties, IMenuState> {
                                 onClick={(e) => {
                                     e.stopPropagation();
                                     if (!item.disabled && item.label !== "-") {
-                                        this.props.onItemClick?.(item.id);
+                                        onItemClick?.(item.id);
                                         this.close();
                                     }
                                 }}