1 files changed, 82 insertions, 0 deletions
diff --git a/frontend/src/lightbox.ts b/frontend/src/lightbox.ts
new file mode 100644
index 0000000..cdc628e
--- /dev/null
+++ b/frontend/src/lightbox.ts
@@ -0,0 +1,82 @@
+import type { Note } from './main';
+
+let currentMedia: Note['media'] = [];
+let currentIndex = 0;
+
+function updateLightbox() {
+  const item = currentMedia![currentIndex];
+  const img = document.getElementById('lightbox-img') as HTMLImageElement;
+  const alt = document.getElementById('lightbox-alt')!;
+  const prev = document.getElementById('lightbox-prev')!;
+  const next = document.getElementById('lightbox-next')!;
+
+  img.src = item.url;
+  img.alt = item.alt || '';
+
+  if (item.alt) {
+    alt.textContent = item.alt;
+    alt.style.display = 'block';
+  } else {
+    alt.style.display = 'none';
+  }
+
+  prev.style.display = currentIndex > 0 ? 'block' : 'none';
+  next.style.display = currentIndex < currentMedia!.length - 1 ? 'block' : 'none';
+}
+
+function navigateLightbox(dir: number) {
+  const next = currentIndex + dir;
+  if (next < 0 || next >= currentMedia!.length) return;
+  currentIndex = next;
+  updateLightbox();
+}
+
+function lightboxKeyHandler(e: KeyboardEvent) {
+  if (e.key === 'Escape') closeLightbox();
+  if (e.key === 'ArrowLeft') navigateLightbox(-1);
+  if (e.key === 'ArrowRight') navigateLightbox(1);
+}
+
+export function openLightbox(media: NonNullable<Note['media']>, index: number) {
+  currentMedia = media;
+  currentIndex = index;
+
+  const overlay = document.createElement('div');
+  overlay.id = 'lightbox';
+  overlay.addEventListener('click', e => {
+    if (e.target === overlay) closeLightbox();
+  });
+
+  const close = document.createElement('button');
+  close.id = 'lightbox-close';
+  close.textContent = '×';
+  close.addEventListener('click', closeLightbox);
+  overlay.appendChild(close);
+
+  const img = document.createElement('img');
+  img.id = 'lightbox-img';
+
+  const alt = document.createElement('div');
+  alt.id = 'lightbox-alt';
+
+  const prev = document.createElement('button');
+  prev.id = 'lightbox-prev';
+  prev.textContent = '‹';
+  prev.addEventListener('click', () => navigateLightbox(-1));
+
+  const next = document.createElement('button');
+  next.id = 'lightbox-next';
+  next.textContent = '›';
+  next.addEventListener('click', () => navigateLightbox(1));
+
+  overlay.append(prev, img, alt, next);
+  document.body.appendChild(overlay);
+  updateLightbox();
+
+  document.addEventListener('keydown', lightboxKeyHandler);
+}
+
+export function closeLightbox() {
+  document.getElementById('lightbox')?.remove();
+  document.removeEventListener('keydown', lightboxKeyHandler);
+}