Add PNG and TIFF support v0.5

app/static/app.js

@@ -113,6 +113,18 @@ function formatBytes(bytes) {
   return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
 }
 
+function formatType(filename) {
+  const extension = filename.split('.').pop()?.toLowerCase() || '';
+  if (extension === 'jpg' || extension === 'jpeg') return 'JPG';
+  if (extension === 'png') return 'PNG';
+  if (extension === 'tif' || extension === 'tiff') return 'TIFF';
+  return extension.toUpperCase();
+}
+
+function requiresServerPreview(photo) {
+  return photo.format === 'TIFF';
+}
+
 function storageKey() {
   return state.directoryHandle ? `photo-date-editor:${state.directoryHandle.name}` : null;
 }
@@ -164,13 +176,14 @@ async function scanFolder() {
   const photos = [];
 
   for await (const [name, handle] of state.directoryHandle.entries()) {
-    if (handle.kind !== 'file' || !/\.(jpe?g)$/i.test(name)) continue;
+    if (handle.kind !== 'file' || !/\.(jpe?g|png|tiff?)$/i.test(name)) continue;
     const file = await handle.getFile();
     const previous = stored.photos?.[name] || {};
     const unchanged = !previous.lastModified || previous.lastModified === file.lastModified;
     photos.push({
       name,
       handle,
+      format: formatType(name),
       size: file.size,
       lastModified: file.lastModified,
       status: unchanged ? (previous.status || 'pending') : 'pending',
@@ -202,7 +215,7 @@ async function scanFolder() {
   } else {
     elements.viewerContent.classList.add('hidden');
     elements.viewerEmpty.classList.remove('hidden');
-    showToast('No JPG or JPEG files were found in that folder.', true);
+    showToast('No JPG, PNG, or TIFF files were found in that folder.', true);
   }
 }
 
@@ -213,14 +226,34 @@ function clearObjectUrls() {
   state.thumbUrls.clear();
 }
 
-async function getThumbUrl(photo) {
+async function getPreviewUrl(photo, suppliedFile = null) {
   if (state.thumbUrls.has(photo.name)) return state.thumbUrls.get(photo.name);
-  const file = await photo.handle.getFile();
-  const url = URL.createObjectURL(file);
+  const file = suppliedFile || await photo.handle.getFile();
+  let previewBlob = file;
+
+  if (requiresServerPreview(photo)) {
+    const payload = new FormData();
+    payload.append('file', file, photo.name);
+    const response = await fetch('/api/preview', { method: 'POST', body: payload });
+    if (!response.ok) {
+      let message = `Preview failed (${response.status}).`;
+      try { message = (await response.json()).detail || message; } catch {}
+      throw new Error(message);
+    }
+    previewBlob = await response.blob();
+  }
+
+  const url = URL.createObjectURL(previewBlob);
   state.thumbUrls.set(photo.name, url);
   return url;
 }
 
+async function getThumbUrl(photo) {
+  if (state.thumbUrls.has(photo.name)) return state.thumbUrls.get(photo.name);
+  if (requiresServerPreview(photo)) return null;
+  return getPreviewUrl(photo);
+}
+
 function statusSymbol(status) {
   if (status === 'saved') return '✓';
   if (status === 'skipped') return '→';
@@ -243,6 +276,8 @@ function visiblePhotoEntries() {
       const statusDifference = statusSortOrder[a.photo.status] - statusSortOrder[b.photo.status];
       return statusDifference || naturalCompare(a.photo.name, b.photo.name);
     });
+  } else if (elements.sortSelect.value === 'format') {
+    entries.sort((a, b) => naturalCompare(a.photo.format, b.photo.format) || naturalCompare(a.photo.name, b.photo.name));
   } else {
     entries.sort((a, b) => naturalCompare(a.photo.name, b.photo.name));
   }
@@ -264,12 +299,16 @@ function renderFileList() {
     row.className = `file-row${index === state.currentIndex ? ' active' : ''}`;
     row.dataset.index = String(index);
     row.innerHTML = `
-      <div class="file-thumb" aria-hidden="true"></div>
-      <div class="file-meta"><strong>${escapeHtml(photo.name)}</strong><span>${index + 1} / ${state.photos.length} · ${formatBytes(photo.size)}</span></div>
+      <div class="file-thumb format-placeholder" aria-hidden="true">${escapeHtml(photo.format)}</div>
+      <div class="file-meta">
+        <strong>${escapeHtml(photo.name)}</strong>
+        <span class="file-details"><span>${index + 1} / ${state.photos.length}</span><span>${formatBytes(photo.size)}</span><span class="format-badge">${escapeHtml(photo.format)}</span></span>
+      </div>
       <span class="file-state ${photo.status}" title="${photo.status}">${statusSymbol(photo.status)}</span>`;
     row.addEventListener('click', () => selectPhoto(index));
     elements.fileList.appendChild(row);
     getThumbUrl(photo).then((url) => {
+      if (!url || !row.isConnected) return;
       const placeholder = row.querySelector('.file-thumb');
       const image = document.createElement('img');
       image.className = 'file-thumb';
@@ -346,11 +385,9 @@ async function selectPhoto(index, force = false) {
   const selectionToken = ++state.selectionToken;
   const photo = state.photos[index];
   const file = await photo.handle.getFile();
-  if (state.objectUrl) URL.revokeObjectURL(state.objectUrl);
-  state.objectUrl = URL.createObjectURL(file);
-  elements.preview.src = state.objectUrl;
+  elements.preview.removeAttribute('src');
   elements.filename.textContent = photo.name;
-  elements.filesize.textContent = `${formatBytes(file.size)} · modified ${new Date(file.lastModified).toLocaleString()}`;
+  elements.filesize.textContent = `${photo.format} · ${formatBytes(file.size)} · modified ${new Date(file.lastModified).toLocaleString()}`;
   elements.position.textContent = `${index + 1} / ${state.photos.length}`;
   resetView();
   restoreValues(photo.values);
@@ -360,8 +397,20 @@ async function selectPhoto(index, force = false) {
   const active = elements.fileList.querySelector('.file-row.active');
   active?.scrollIntoView({ block: 'nearest' });
 
+  try {
+    if (requiresServerPreview(photo)) setSaveStatus('loading', 'Rendering TIFF preview…', photo.name);
+    const previewUrl = await getPreviewUrl(photo, file);
+    if (selectionToken !== state.selectionToken || state.currentIndex !== index) return;
+    elements.preview.src = previewUrl;
+    renderFileList();
+  } catch (error) {
+    if (selectionToken === state.selectionToken && state.currentIndex === index) {
+      setSaveStatus('failed', 'Could not render preview', error.message || photo.name);
+    }
+  }
+
   if (!photo.metadataLoaded) {
-    if (!photo.values) setSaveStatus('loading', 'Reading EXIF metadata…', photo.name);
+    if (!photo.values) setSaveStatus('loading', 'Reading image metadata…', photo.name);
     try {
       await readPhotoMetadata(photo, file);
       if (selectionToken !== state.selectionToken || state.currentIndex !== index) return;