use bootstrap's d-none class to hide modal dialog

There is no need to have a "hidden" class to set "display:none" of
the modal backdrop, as Bootstrap already provides a class.

frontend/src/App.test.tsx

@@ -165,7 +165,7 @@ describe("main entry-point app", () => {
     await findByText("Stream to play");
     expect(appState).toBeDefined();
     const elt = document.querySelector('.modal-backdrop');
-    expect(elt.className).toEqual('modal-backdrop hidden');
+    expect(elt.className).toEqual('modal-backdrop d-none');
     act(() => {
       appState!.dialog.value = {
         backdrop: true,
@@ -177,7 +177,7 @@ describe("main entry-point app", () => {
         backdrop: false,
       };
     });
-    expect(elt.className).toEqual('modal-backdrop hidden');
+    expect(elt.className).toEqual('modal-backdrop d-none');
   });
 
   test("doesn't reload page when navigating to another SPA page", async () => {

frontend/src/__snapshots__/App.test.tsx.snap

@@ -2549,7 +2549,8 @@ exports[`main entry-point app > matches snapshot for CGI options 1`] = `
     </div>
   </footer>
   <div
-    class="modal-backdrop hidden"
+    class="modal-backdrop d-none"
+    data-testid="modal-backdrop"
   />
 </DocumentFragment>
 `;
@@ -3168,7 +3169,8 @@ exports[`main entry-point app > matches snapshot for edit MPS 1`] = `
     </div>
   </footer>
   <div
-    class="modal-backdrop hidden"
+    class="modal-backdrop d-none"
+    data-testid="modal-backdrop"
   />
 </DocumentFragment>
 `;
@@ -5335,7 +5337,8 @@ exports[`main entry-point app > matches snapshot for home page 1`] = `
     </div>
   </footer>
   <div
-    class="modal-backdrop hidden"
+    class="modal-backdrop d-none"
+    data-testid="modal-backdrop"
   />
 </DocumentFragment>
 `;
@@ -7502,7 +7505,8 @@ exports[`main entry-point app > matches snapshot for home page when user not log
     </div>
   </footer>
   <div
-    class="modal-backdrop hidden"
+    class="modal-backdrop d-none"
+    data-testid="modal-backdrop"
   />
 </DocumentFragment>
 `;
@@ -7791,7 +7795,8 @@ exports[`main entry-point app > matches snapshot for list MPS 1`] = `
     </div>
   </footer>
   <div
-    class="modal-backdrop hidden"
+    class="modal-backdrop d-none"
+    data-testid="modal-backdrop"
   />
 </DocumentFragment>
 `;

frontend/src/components/ModalBackdrop.test.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, test } from "vitest";
+import { computed, signal } from "@preact/signals";
+import { act, render } from "@testing-library/preact";
+
+import { AppStateContext, AppStateType } from "../appState";
+import { DialogState } from "../types/DialogState";
+import { ModalBackdrop } from "./ModalBackdrop";
+
+describe("ModalBackdrop component", () => {
+  const dialog = signal<DialogState>({ backdrop: false });
+  const appState: AppStateType = {
+    backdrop: computed<boolean>(() => dialog.value?.backdrop ?? false),
+    dialog,
+  };
+
+  test("shows and hides backdrop", () => {
+    const { getByTestId } = render(
+      <AppStateContext.Provider value={appState}>
+        <ModalBackdrop />
+      </AppStateContext.Provider>
+    );
+    const elt = getByTestId("modal-backdrop") as HTMLDivElement;
+    expect(elt.classList.contains("d-none")).toBe(true);
+    expect(elt.classList.contains("show")).toBe(false);
+    act(() => {
+      dialog.value = { backdrop: true };
+    });
+    expect(elt.classList.contains("d-none")).toBe(false);
+    expect(elt.classList.contains("show")).toBe(true);
+  });
+});

frontend/src/components/ModalBackdrop.tsx

@@ -1,9 +1,10 @@
 import { useContext } from 'preact/hooks';
 import { AppStateContext } from '../appState';
+import { useComputed } from '@preact/signals';
 
 
 export function ModalBackdrop() {
   const { backdrop } = useContext(AppStateContext);
-  const className = `modal-backdrop ${backdrop.value ? "show" : "hidden"}`;
-  return <div className={className} />;
+  const className = useComputed<string>(() => `modal-backdrop ${backdrop.value ? "show" : "d-none"}`);
+  return <div data-testid="modal-backdrop" className={className} />;
 }

static/js/media.js

@@ -325,7 +325,7 @@ function showDialog() {
     dialog.addClass("dialog-active show");
     dialog.css({ display: "block", });
     $('.modal-backdrop').addClass('show');
-    $('.modal-backdrop').removeClass('hidden');
+    $('.modal-backdrop').removeClass('d-none');
     $('body').addClass('modal-open');
 }
 

templates/layout.html

@@ -66,7 +66,7 @@ <h1>{{ title }}</h1>
         <div class="col-3 text-end copyright">&copy;2023 Alexis Ashley</div>
       </footer>
       {% endblock %}
-      <div class="modal-backdrop hidden"></div>
+      <div class="modal-backdrop d-none"></div>
       {% block extrascripts %}{% endblock %}
     </body>
 </html>