Fix blank canvas on pages without line annotations and add user guidance (#371)

* Initial plan

* Fix blank page when loading pages with no lines

Handle pages without lines in updateTranscriptionImages by still loading and displaying the canvas even when there are no line annotations. Shows the full page image instead of returning early.

Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>

* Add dismissible modal for pages without lines

Shows an alert when a page has no line annotations with a link to the annotation interface where users can manually define lines. The alert is dismissible by clicking the "Got it" button.

Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>

* Improve alert security and encapsulation

- Encode URL parameters to prevent injection vulnerabilities
- Replace innerHTML with DOM element creation for better security
- Add CSS via style element instead of inline styles
- Add fallback for potential future public API on AlertContainer

Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>

* fix links and build alert cleanly

* Update index.js

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>
Co-authored-by: cubap <cubap@slu.edu>

Author: Copilot

components/gui/alert/AlertContainer.js

@@ -86,6 +86,10 @@ class AlertContainer extends HTMLElement {
                 transition: all 0.3s ease-in-out;
                 font-size: 14pt;
             }
+                tpen-alert a {
+                    color: var(--primary-color);
+                    text-decoration: underline;
+                }
             .alert-area tpen-alert {
                 top: 0px;
                 right: 0px;

interfaces/transcription/index.js

@@ -7,6 +7,7 @@ import '../../components/line-image/index.js'
 import CheckPermissions from "../../components/check-permissions/checkPermissions.js"
 import { orderPageItemsByColumns } from "../../utilities/columnOrdering.js"
 import { renderPermissionError } from "../../utilities/renderPermissionError.js"
+import '../../components/gui/alert/AlertContainer.js'
 export default class TranscriptionInterface extends HTMLElement {
   #page
   #canvas
@@ -419,6 +420,49 @@ export default class TranscriptionInterface extends HTMLElement {
     })
   }
 
+  showNoLinesAlert() {
+    const alertContainer = document.querySelector('tpen-alert-container')
+    if (!alertContainer) return
+    
+    const projectId = encodeURIComponent(TPEN.screen?.projectInQuery ?? '')
+    const pageId = encodeURIComponent(TPEN.screen?.pageInQuery ?? '')
+    const annotatorUrl = `/interfaces/annotator?projectID=${projectId}&pageID=${pageId}`
+    
+    const alertElem = document.createElement('tpen-alert')
+    alertElem.innerHTML = `
+      <style>
+        .no-lines-message p:first-child {
+          margin-bottom: 1em;
+        }
+        .alert-link {
+          color: var(--primary-color, #4fc3f7);
+          text-decoration: underline;
+        }
+      </style>
+      <div class="no-lines-message">
+        <p>This page has no line annotations defined.</p>
+        <p>To add lines, visit the <a href="${annotatorUrl}" class="alert-link">column and line interface</a>.</p>
+      </div>
+      <div class="button-container">
+        <button id="no-lines-ok">Got it</button>
+      </div>
+    `
+    
+    alertElem.querySelector('#no-lines-ok').addEventListener('click', () => {
+      alertElem.dismiss()
+    })
+    
+    if (typeof alertContainer.addCustomAlert === 'function') {
+      alertContainer.addCustomAlert(alertElem)
+    } else {
+      const screenLockingSection = alertContainer.shadowRoot.querySelector('.alert-area')
+      if (screenLockingSection) {
+        screenLockingSection.appendChild(alertElem)
+        alertElem.show()
+      }
+    }
+  }
+
   updateLines() {
     if (TPEN.activeLineIndex < 0 || !this.#page) return
     const topImage = this.shadowRoot.querySelector('#topImage')
@@ -518,7 +562,23 @@ export default class TranscriptionInterface extends HTMLElement {
     const { orderedItems, columnsInPage } = orderPageItemsByColumns(projectPage, this.#page)
     this.#page.items = orderedItems
     let thisLine = this.#page.items?.[0]
-    if (!thisLine) return
+    
+    // Handle pages with no lines - still load the canvas
+    if (!thisLine) {
+      // Get canvas from page target even when there are no lines
+      const { canvasID } = this.setCanvasAndSelector(null, this.#page)
+      if (!canvasID) return
+      const canvas = this.#canvas = await vault.get(canvasID, 'canvas')
+      // Show full page when there are no lines
+      const regionValue = `0,0,${canvas?.width ?? 'full'},${(canvas?.height && canvas?.height / 10) ?? 120}`
+      topImage.canvas = canvasID
+      bottomImage.canvas = canvas
+      topImage.setAttribute('region', regionValue)
+      // Show alert to inform user about missing lines
+      this.showNoLinesAlert()
+      return
+    }
+    
     if (!(thisLine?.body)) thisLine = await vault.get(thisLine, 'annotation', true)
     const { canvasID, region } = this.setCanvasAndSelector(thisLine, this.#page)
     const canvas = this.#canvas = await vault.get(canvasID, 'canvas')