Add prev/next navigation to screenshot dialog

Show one image at a time with prev/next buttons and a counter
instead of stacking all images in a scrollable view. Remove
position: relative that interfered with native dialog centering.

Author: danielnaab

src/design/components/lab-card/index.tsx

@@ -90,19 +90,34 @@ export function LabCard({ lab, basePath = '/' }: { lab: FeaturedLab; basePath?:
       {screenshotLinks.map(({ link, id }) => (
         <screenshot-dialog>
           <dialog id={id} class="screenshot-dialog">
-            <button class="screenshot-dialog__close" data-close-dialog aria-label="Close" type="button">
-              &times;
-            </button>
+            <div class="screenshot-dialog__header">
+              <span class="screenshot-dialog__counter" aria-live="polite"></span>
+              <button class="screenshot-dialog__close" data-close-dialog aria-label="Close" type="button">
+                &times;
+              </button>
+            </div>
             <div class="screenshot-dialog__images">
-              {link.images.map((img) => (
+              {link.images.map((img, i) => (
                 <img
                   class="screenshot-dialog__img"
                   src={url(img.src, basePath)}
                   alt={img.alt}
                   loading="lazy"
+                  data-index={i}
+                  hidden={i > 0}
                 />
               ))}
             </div>
+            {link.images.length > 1 ? (
+              <div class="screenshot-dialog__nav">
+                <button class="screenshot-dialog__nav-btn" data-prev type="button" aria-label="Previous screenshot">
+                  &larr; Prev
+                </button>
+                <button class="screenshot-dialog__nav-btn" data-next type="button" aria-label="Next screenshot">
+                  Next &rarr;
+                </button>
+              </div>
+            ) : null}
           </dialog>
         </screenshot-dialog>
       ))}

src/design/components/lab-card/styles.css

@@ -125,17 +125,25 @@
     border-radius: var(--radius-sm);
     padding: var(--space-6);
     overflow-y: auto;
-    position: relative;
   }
 
   .screenshot-dialog::backdrop {
     background: rgb(0 0 0 / 0.6);
   }
 
+  .screenshot-dialog__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-block-end: var(--space-4);
+  }
+
+  .screenshot-dialog__counter {
+    font-size: var(--step--1);
+    color: var(--color-ink-subtle);
+  }
+
   .screenshot-dialog__close {
-    position: absolute;
-    inset-block-start: var(--space-3);
-    inset-inline-end: var(--space-3);
     background: none;
     border: none;
     font-size: var(--step-3);
@@ -144,6 +152,7 @@
     color: var(--color-ink-subtle);
     padding: var(--space-1) var(--space-2);
     border-radius: var(--radius-sm);
+    margin-inline-start: auto;
   }
 
   .screenshot-dialog__close:hover,
@@ -154,8 +163,7 @@
 
   .screenshot-dialog__images {
     display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
+    justify-content: center;
   }
 
   .screenshot-dialog__img {
@@ -164,4 +172,32 @@
     border-radius: var(--radius-sm);
     box-shadow: var(--shadow-card);
   }
+
+  .screenshot-dialog__nav {
+    display: flex;
+    justify-content: space-between;
+    margin-block-start: var(--space-4);
+  }
+
+  .screenshot-dialog__nav-btn {
+    background: none;
+    border: 1px solid var(--color-surface-alt);
+    border-radius: var(--radius-sm);
+    padding: var(--space-2) var(--space-4);
+    cursor: pointer;
+    font: inherit;
+    font-size: var(--step--1);
+    color: var(--color-link);
+  }
+
+  .screenshot-dialog__nav-btn:hover,
+  .screenshot-dialog__nav-btn:focus-visible {
+    background: var(--color-surface-alt);
+    color: var(--color-link-hover);
+  }
+
+  .screenshot-dialog__nav-btn:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
 }

src/design/components/screenshot-dialog/client.ts

@@ -1,27 +1,59 @@
 class ScreenshotDialogElement extends HTMLElement {
   private dialog: HTMLDialogElement | null = null
+  private images: HTMLImageElement[] = []
+  private current = 0
 
   connectedCallback() {
     this.dialog = this.querySelector('dialog')
     if (!this.dialog) return
 
+    this.images = Array.from(this.dialog.querySelectorAll('.screenshot-dialog__img'))
     this.dialog.addEventListener('click', this.handleBackdropClick)
 
-    const closeBtn = this.dialog.querySelector('[data-close-dialog]')
-    closeBtn?.addEventListener('click', () => this.dialog?.close())
+    this.dialog.querySelector('[data-close-dialog]')
+      ?.addEventListener('click', () => this.dialog?.close())
+
+    this.dialog.querySelector('[data-prev]')
+      ?.addEventListener('click', () => this.show(this.current - 1))
+
+    this.dialog.querySelector('[data-next]')
+      ?.addEventListener('click', () => this.show(this.current + 1))
 
     // Find the button that opens this dialog (outside this element, in the card)
     const dialogId = this.dialog.id
     if (dialogId) {
       const opener = document.querySelector(`[data-open-dialog="${dialogId}"]`)
-      opener?.addEventListener('click', () => this.dialog?.showModal())
+      opener?.addEventListener('click', () => {
+        this.show(0)
+        this.dialog?.showModal()
+      })
     }
   }
 
   disconnectedCallback() {
     this.dialog?.removeEventListener('click', this.handleBackdropClick)
   }
 
+  private show(index: number) {
+    if (index < 0 || index >= this.images.length) return
+    this.current = index
+
+    for (const img of this.images) {
+      img.hidden = true
+    }
+    this.images[index].hidden = false
+
+    const counter = this.dialog?.querySelector('.screenshot-dialog__counter')
+    if (counter && this.images.length > 1) {
+      counter.textContent = `${index + 1} of ${this.images.length}`
+    }
+
+    const prev = this.dialog?.querySelector('[data-prev]') as HTMLButtonElement | null
+    const next = this.dialog?.querySelector('[data-next]') as HTMLButtonElement | null
+    if (prev) prev.disabled = index === 0
+    if (next) next.disabled = index === this.images.length - 1
+  }
+
   handleBackdropClick = (e: Event) => {
     if (e.target === this.dialog) {
       this.dialog.close()

tests/views/components.test.tsx

@@ -186,13 +186,19 @@ describe('LabCard', () => {
     expect(html).not.toContain('href="/assets/images/')
   })
 
-  test('screenshot link renders a dialog with images', async () => {
+  test('screenshot link renders a dialog with images and nav buttons', async () => {
     const html = await renderToHtml(<LabCard lab={withScreenshots} />)
     expect(html).toContain('<dialog')
     expect(html).toContain('src="/assets/images/messaging-dashboard.png"')
     expect(html).toContain('alt="Dashboard"')
     expect(html).toContain('src="/assets/images/messaging-get-started.png"')
     expect(html).toContain('alt="Get started"')
+    // First image visible, second hidden
+    expect(html).toContain('data-index="0"')
+    expect(html).toContain('data-index="1"')
+    // Prev/next nav buttons
+    expect(html).toContain('data-prev')
+    expect(html).toContain('data-next')
   })
 
   test('screenshot image src respects basePath', async () => {