diff --git a/src/client/app.ts b/src/client/app.ts
new file mode 100644
index 0000000..ec0c9f4
--- /dev/null
+++ b/src/client/app.ts
@@ -0,0 +1,1023 @@
+// @ts-nocheck
+import exifr from "https://cdn.jsdelivr.net/npm/exifr@7.1.3/+esm";
+import { createPhotoMarkerIcon } from "./map-view.js";
+import { parseListing, resolveDavBaseUrl } from "./nextcloud-import.js";
+import {
+ buildTimeline,
+ formatTimelineSummary,
+ getPhotoTimestamp
+} from "./timeline.js";
+
+const state = {
+ photos: [],
+ visiblePhotos: [],
+ objectUrls: [],
+ processed: 0,
+ total: 0,
+ activePhotoId: null,
+ timelineSelection: null,
+ timelineViewport: null,
+ timeline: {
+ intervalMs: 15 * 60 * 1000,
+ bins: [],
+ start: null,
+ end: null
+ }
+};
+let activeImportController = null;
+const IMPORT_RENDER_INTERVAL_MS = 180;
+let scheduledRenderFrame = null;
+let scheduledRenderTimer = null;
+let scheduledRenderOptions = { fitMap: false };
+let lastRenderAt = 0;
+const SHARE_PARAM_NAME = "share";
+
+const map = L.map("map", { zoomControl: true }).setView([52.5208, 13.4095], 13);
+const lightMapLayer = L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", {
+ maxZoom: 20,
+ subdomains: "abcd",
+ attribution: "© OpenStreetMap contributors © CARTO"
+});
+const darkMapLayer = L.tileLayer("https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png", {
+ maxZoom: 20,
+ subdomains: "abcd",
+ attribution: "© OpenStreetMap contributors © CARTO"
+});
+const mapLayers = {
+ light: lightMapLayer,
+ dark: darkMapLayer
+};
+let activeMapLayer = lightMapLayer;
+activeMapLayer.addTo(map);
+
+const markers = L.layerGroup().addTo(map);
+const route = L.polyline([], {
+ color: "#2d6cdf",
+ weight: 4,
+ opacity: 0.85
+});
+const routeColors = {
+ light: "#2d6cdf",
+ dark: "#7dd3fc"
+};
+const ROUTE_VISIBLE_STORAGE_KEY = "routeVisible";
+let routeVisible = localStorage.getItem(ROUTE_VISIBLE_STORAGE_KEY) !== "false";
+
+const overlay = mustGet("overlay");
+const overlayTitle = mustGet("overlay-title");
+const overlayImage = mustGet("overlay-image");
+const overlayLoading = mustGet("overlay-loading");
+const overlayLoadingText = mustGet("overlay-loading-text");
+const closeOverlay = mustGet("close-overlay");
+const routeToggle = mustGet("route-toggle");
+const routeToggleIcon = mustGet("route-toggle-icon");
+const photoList = mustGet("photo-list");
+const emptyState = mustGet("empty-state");
+const photoCount = mustGet("photo-count");
+const progressFill = mustGet("progress-fill");
+const progressText = mustGet("progress-text");
+const progressDetail = mustGet("progress-detail");
+const activitySpinner = mustGet("activity-spinner");
+const timelineSummary = mustGet("timeline-summary");
+const timelineClearButton = mustGet("timeline-clear");
+const timelineChart = mustGet("timeline-chart");
+const timelineBars = mustGet("timeline-bars");
+const timelineSelection = mustGet("timeline-selection");
+const timelineBrush = mustGet("timeline-brush");
+const themeToggle = mustGet("theme-toggle");
+const themeToggleIcon = mustGet("theme-toggle-icon");
+const sidebarCollapseButton = mustGet("sidebar-collapse");
+const sidebarCollapseIcon = mustGet("sidebar-collapse-icon");
+const timelineCollapseButton = mustGet("timeline-collapse");
+const timelineCollapseIcon = mustGet("timeline-collapse-icon");
+const importUrlInput = mustGet("share-url");
+const importStatus = mustGet("share-status");
+const importButton = mustGet("load-share");
+const stopImportButton = mustGet("cancel-share");
+let overlayLoadToken = 0;
+
+function mustGet(id) {
+ const element = document.getElementById(id);
+ if (!element) {
+ throw new Error("Missing UI element: " + id);
+ }
+ return element;
+}
+
+function escapeHtml(value) {
+ return String(value ?? "").replace(/[&<>"']/g, (character) => ({
+ "&": "&",
+ "<": "<",
+ ">": ">",
+ '"': """,
+ "'": "'"
+ })[character]);
+}
+
+function buildRemoteImageUrl(shareUrlValue, entryHref) {
+ const params = new URLSearchParams({
+ share: shareUrlValue.trim(),
+ url: entryHref
+ });
+ return "/api/nextcloud/blob?" + params.toString();
+}
+
+async function loadImageElement(blob) {
+ const objectUrl = URL.createObjectURL(blob);
+ const image = new Image();
+
+ try {
+ await new Promise((resolve, reject) => {
+ image.onload = () => resolve();
+ image.onerror = () => reject(new Error("Could not decode image."));
+ image.src = objectUrl;
+ });
+ return image;
+ } finally {
+ URL.revokeObjectURL(objectUrl);
+ }
+}
+
+async function createThumbnailObjectUrl(blob) {
+ const maxDimension = 320;
+ const quality = 0.82;
+ let width = 0;
+ let height = 0;
+ let drawSource = null;
+ let closeBitmap = null;
+ let sourceImage = null;
+
+ if (typeof createImageBitmap === "function") {
+ const bitmap = await createImageBitmap(blob);
+ width = bitmap.width;
+ height = bitmap.height;
+ drawSource = bitmap;
+ closeBitmap = () => bitmap.close();
+ } else {
+ sourceImage = await loadImageElement(blob);
+ width = sourceImage.naturalWidth;
+ height = sourceImage.naturalHeight;
+ drawSource = sourceImage;
+ }
+
+ const scale = Math.min(1, maxDimension / Math.max(width, height));
+ const targetWidth = Math.max(1, Math.round(width * scale));
+ const targetHeight = Math.max(1, Math.round(height * scale));
+ const canvas = document.createElement("canvas");
+ const context = canvas.getContext("2d");
+
+ if (!context) {
+ if (closeBitmap) {
+ closeBitmap();
+ }
+ throw new Error("Canvas 2D context unavailable.");
+ }
+
+ canvas.width = targetWidth;
+ canvas.height = targetHeight;
+ context.drawImage(drawSource, 0, 0, targetWidth, targetHeight);
+
+ const thumbnailBlob = await new Promise((resolve, reject) => {
+ canvas.toBlob(
+ (result) => {
+ if (result) {
+ resolve(result);
+ return;
+ }
+ reject(new Error("Could not create thumbnail."));
+ },
+ "image/jpeg",
+ quality
+ );
+ });
+
+ if (closeBitmap) {
+ closeBitmap();
+ }
+
+ if (sourceImage) {
+ sourceImage.removeAttribute("src");
+ }
+
+ return URL.createObjectURL(thumbnailBlob);
+}
+
+function setTheme(theme, persist = true) {
+ const resolvedTheme = theme === "light" ? "light" : "dark";
+ document.body.dataset.theme = resolvedTheme;
+ if (persist) {
+ localStorage.setItem("theme", resolvedTheme);
+ }
+ setMapTheme(resolvedTheme);
+
+ if (resolvedTheme === "dark") {
+ themeToggle.setAttribute("aria-label", "Switch to light mode");
+ themeToggleIcon.innerHTML =
+ '";
+ } else {
+ themeToggle.setAttribute("aria-label", "Switch to dark mode");
+ themeToggleIcon.innerHTML =
+ '";
+ }
+}
+
+function setMapTheme(theme) {
+ const resolvedTheme = theme === "dark" ? "dark" : "light";
+ const nextMapLayer = mapLayers[resolvedTheme];
+
+ if (activeMapLayer !== nextMapLayer) {
+ map.removeLayer(activeMapLayer);
+ activeMapLayer = nextMapLayer;
+ activeMapLayer.addTo(map);
+ }
+
+ route.setStyle({
+ color: routeColors[resolvedTheme]
+ });
+}
+
+function setRouteVisible(visible) {
+ routeVisible = Boolean(visible);
+ localStorage.setItem(ROUTE_VISIBLE_STORAGE_KEY, routeVisible ? "true" : "false");
+
+ if (routeVisible) {
+ if (!map.hasLayer(route)) {
+ route.addTo(map);
+ }
+ routeToggle.setAttribute("aria-label", "Hide route line");
+ routeToggleIcon.innerHTML =
+ '";
+ } else {
+ if (map.hasLayer(route)) {
+ map.removeLayer(route);
+ }
+ routeToggle.setAttribute("aria-label", "Show route line");
+ routeToggleIcon.innerHTML =
+ '";
+ }
+}
+
+function scheduleMapResize() {
+ window.clearTimeout(scheduleMapResize.timeoutId);
+ scheduleMapResize.timeoutId = window.setTimeout(() => {
+ map.invalidateSize();
+ }, 220);
+}
+scheduleMapResize.timeoutId = 0;
+
+function setSidebarCollapsed(collapsed) {
+ const isCollapsed = Boolean(collapsed);
+ document.querySelector("aside")?.classList.toggle("sidebar-collapsed", isCollapsed);
+ localStorage.setItem("sidebarCollapsed", isCollapsed ? "true" : "false");
+ sidebarCollapseButton.setAttribute("aria-label", isCollapsed ? "Expand left panel" : "Collapse left panel");
+ sidebarCollapseIcon.innerHTML = isCollapsed
+ ? ''
+ : '';
+ scheduleMapResize();
+}
+
+function setTimelineCollapsed(collapsed) {
+ const isCollapsed = Boolean(collapsed);
+ document.querySelector(".timeline")?.classList.toggle("timeline-collapsed", isCollapsed);
+ localStorage.setItem("timelineCollapsed", isCollapsed ? "true" : "false");
+ timelineCollapseButton.setAttribute("aria-label", isCollapsed ? "Expand timeline" : "Collapse timeline");
+ timelineCollapseIcon.innerHTML = isCollapsed
+ ? ''
+ : '';
+ scheduleMapResize();
+}
+
+function getShareUrlFromLocation() {
+ const value = new URL(window.location.href).searchParams.get(SHARE_PARAM_NAME);
+ return value ? value.trim() : "";
+}
+
+function syncShareUrlInLocation(shareUrlValue) {
+ const nextUrl = new URL(window.location.href);
+ const trimmed = shareUrlValue.trim();
+ if (trimmed) {
+ nextUrl.searchParams.set(SHARE_PARAM_NAME, trimmed);
+ } else {
+ nextUrl.searchParams.delete(SHARE_PARAM_NAME);
+ }
+
+ if (nextUrl.toString() !== window.location.href) {
+ window.history.replaceState({}, "", nextUrl);
+ }
+}
+
+const themeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+const storedTheme = localStorage.getItem("theme");
+const initialTheme = storedTheme === "dark" || (storedTheme !== "light" && themeMediaQuery.matches) ? "dark" : "light";
+setTheme(initialTheme, false);
+themeToggle.addEventListener("click", () => {
+ setTheme(document.body.dataset.theme === "dark" ? "light" : "dark");
+});
+if (storedTheme === null) {
+ themeMediaQuery.addEventListener("change", (event) => {
+ setTheme(event.matches ? "dark" : "light", false);
+ });
+}
+setRouteVisible(routeVisible);
+routeToggle.addEventListener("click", () => {
+ setRouteVisible(!routeVisible);
+});
+
+const storedSidebarCollapsed = localStorage.getItem("sidebarCollapsed") === "true";
+setSidebarCollapsed(storedSidebarCollapsed);
+sidebarCollapseButton.addEventListener("click", () => {
+ setSidebarCollapsed(!document.querySelector("aside")?.classList.contains("sidebar-collapsed"));
+});
+
+setTimelineCollapsed(false);
+timelineCollapseButton.addEventListener("click", () => {
+ setTimelineCollapsed(!document.querySelector(".timeline")?.classList.contains("timeline-collapsed"));
+});
+
+function formatDate(value) {
+ if (!value) {
+ return "no timestamp";
+ }
+ const date = new Date(value);
+ return Number.isNaN(date.getTime())
+ ? value
+ : date.toLocaleString("en-US", { dateStyle: "medium", timeStyle: "short" });
+}
+
+function normalizeExifDate(value) {
+ if (typeof value !== "string") {
+ return null;
+ }
+ const match = value.match(/^(\d{4}):(\d{2}):(\d{2}) (\d{2}):(\d{2}):(\d{2})$/);
+ if (!match) {
+ return null;
+ }
+ const [, year, month, day, hour, minute, second] = match;
+ const date = new Date(
+ Number(year),
+ Number(month) - 1,
+ Number(day),
+ Number(hour),
+ Number(minute),
+ Number(second)
+ );
+ return Number.isNaN(date.getTime()) ? null : date.toISOString();
+}
+
+function parseDateOrNull(value) {
+ if (!value) {
+ return null;
+ }
+ const date = new Date(value);
+ return Number.isNaN(date.getTime()) ? null : date.toISOString();
+}
+
+function clamp(value, min, max) {
+ return Math.min(max, Math.max(min, value));
+}
+
+function setImportStatus(message, tone = "info") {
+ importStatus.textContent = message;
+ importStatus.style.color = tone === "error" ? "#9d174d" : "var(--muted)";
+}
+
+function setProgress(processed, total, detail) {
+ state.processed = processed;
+ state.total = total;
+ progressFill.style.width = total > 0 ? Math.round((processed / total) * 100) + "%" : "0%";
+ progressText.textContent = processed + " / " + total;
+ progressDetail.textContent = detail;
+}
+
+function setImporting(isImporting) {
+ activitySpinner.classList.toggle("active", isImporting);
+ importButton.disabled = isImporting;
+ stopImportButton.disabled = !isImporting;
+}
+
+function clearObjectUrls() {
+ for (const url of state.objectUrls) {
+ URL.revokeObjectURL(url);
+ }
+ state.objectUrls = [];
+}
+
+function clearGallery() {
+ cancelScheduledRender();
+ closeOverlayView();
+ state.photos = [];
+ state.visiblePhotos = [];
+ state.activePhotoId = null;
+ state.timelineSelection = null;
+ state.timelineViewport = null;
+ state.timeline = {
+ intervalMs: 15 * 60 * 1000,
+ bins: [],
+ start: null,
+ end: null
+ };
+ markers.clearLayers();
+ route.setLatLngs([]);
+ photoList.replaceChildren(emptyState);
+ emptyState.textContent = "No images imported yet.";
+ photoCount.textContent = "0 photos";
+ timelineSummary.textContent = "No photos imported yet.";
+ timelineClearButton.disabled = true;
+ timelineBars.replaceChildren();
+ timelineSelection.classList.remove("visible");
+ timelineSelection.style.left = "0";
+ timelineSelection.style.width = "0";
+ timelineBrush.classList.remove("visible");
+ setProgress(0, 0, "idle");
+}
+
+function openOverlay(photo) {
+ const requestToken = ++overlayLoadToken;
+ overlay.classList.add("open");
+ overlay.setAttribute("aria-hidden", "false");
+ overlayTitle.textContent = photo.name;
+ overlayImage.alt = photo.name;
+ overlay.classList.add("loading");
+ overlayLoading.classList.add("active");
+ overlayLoading.classList.remove("error");
+ overlayLoadingText.textContent = "Loading full-size image...";
+ overlayImage.onload = () => {
+ if (requestToken !== overlayLoadToken) {
+ return;
+ }
+ overlay.classList.remove("loading");
+ overlayLoading.classList.remove("active");
+ overlayLoading.classList.remove("error");
+ };
+ overlayImage.onerror = () => {
+ if (requestToken !== overlayLoadToken) {
+ return;
+ }
+ overlayLoadingText.textContent = "Could not load full-size image.";
+ overlay.classList.remove("loading");
+ overlayLoading.classList.add("error");
+ overlayLoading.classList.add("active");
+ };
+ overlayImage.removeAttribute("src");
+ overlayImage.src = photo.fullUrl;
+}
+
+function closeOverlayView() {
+ overlayLoadToken += 1;
+ overlay.classList.remove("open");
+ overlay.setAttribute("aria-hidden", "true");
+ overlay.classList.remove("loading");
+ overlayLoading.classList.remove("active");
+ overlayLoading.classList.remove("error");
+ overlayLoadingText.textContent = "Loading full-size image...";
+ overlayImage.removeAttribute("src");
+}
+
+closeOverlay.addEventListener("click", closeOverlayView);
+overlay.addEventListener("click", (event) => {
+ if (event.target === overlay) {
+ closeOverlayView();
+ }
+});
+
+function updateRouteView(photos) {
+ const routePoints = photos
+ .filter((photo) => photo.latitude !== null && photo.longitude !== null && photo.capturedAt)
+ .sort((a, b) => String(a.capturedAt).localeCompare(String(b.capturedAt)))
+ .map((photo) => [photo.latitude, photo.longitude]);
+
+ route.setLatLngs(routePoints);
+
+ if (routePoints.length === 1) {
+ map.setView(routePoints[0], 13);
+ } else if (routePoints.length > 1) {
+ map.fitBounds(route.getBounds(), { padding: [40, 40] });
+ }
+}
+
+function isPhotoInSelection(photo, selection = state.timelineSelection) {
+ if (!selection) {
+ return true;
+ }
+
+ const photoDate = getPhotoTimestamp(photo);
+ if (!photoDate) {
+ return false;
+ }
+
+ return photoDate.getTime() >= selection.start && photoDate.getTime() < selection.end;
+}
+
+function getVisiblePhotos() {
+ return state.photos.filter((photo) => isPhotoInSelection(photo));
+}
+
+function syncTimelineSelectionOverlay() {
+ const selection = state.timelineSelection;
+ if (!selection || !state.timeline.start || !state.timeline.end) {
+ timelineSelection.classList.remove("visible");
+ timelineSelection.style.left = "0";
+ timelineSelection.style.width = "0";
+ return;
+ }
+
+ const total = state.timeline.end.getTime() - state.timeline.start.getTime();
+ if (total <= 0) {
+ timelineSelection.classList.remove("visible");
+ return;
+ }
+
+ const left = clamp((selection.start - state.timeline.start.getTime()) / total, 0, 1);
+ const right = clamp((selection.end - state.timeline.start.getTime()) / total, 0, 1);
+ const startPct = Math.min(left, right) * 100;
+ const widthPct = Math.max(1, (Math.max(left, right) - Math.min(left, right)) * 100);
+ timelineSelection.classList.add("visible");
+ timelineSelection.style.left = startPct + "%";
+ timelineSelection.style.width = widthPct + "%";
+}
+
+function setTimelineSelection(start, end) {
+ if (start === null || end === null) {
+ state.timelineSelection = null;
+ state.timelineViewport = null;
+ timelineClearButton.disabled = true;
+ } else {
+ const normalizedStart = Math.min(start, end);
+ const normalizedEnd = Math.max(start, end);
+ state.timelineSelection = {
+ start: normalizedStart,
+ end: normalizedEnd
+ };
+ state.timelineViewport = {
+ start: normalizedStart,
+ end: normalizedEnd
+ };
+ timelineClearButton.disabled = false;
+ }
+
+ renderVisiblePhotos({ fitMap: true });
+}
+
+function clearTimelineSelection() {
+ setTimelineSelection(null, null);
+}
+
+function renderTimeline() {
+ const timelinePhotos = state.timelineSelection ? state.visiblePhotos : state.photos;
+ const timeline = buildTimeline(timelinePhotos, state.timelineViewport);
+ state.timeline = timeline;
+ timelineSummary.textContent = formatTimelineSummary(state.photos);
+
+ timelineBars.replaceChildren();
+
+ if (!timeline.bins.length) {
+ syncTimelineSelectionOverlay();
+ return;
+ }
+
+ const maxCount = Math.max(...timeline.bins.map((bin) => bin.count), 1);
+ const labelStep = Math.max(1, Math.ceil(timeline.bins.length / 6));
+
+ timeline.bins.forEach((bin, index) => {
+ const bar = document.createElement("button");
+ const isSelected = state.timelineSelection
+ ? bin.end.getTime() > state.timelineSelection.start && bin.start.getTime() < state.timelineSelection.end
+ : false;
+ const isActive = state.activePhotoId ? bin.photoIds.includes(state.activePhotoId) : false;
+
+ bar.type = "button";
+ bar.className = "timeline-bar" + (isSelected ? " selected" : "") + (isActive ? " active" : "");
+ bar.title = bin.label + " - " + bin.count + (bin.count === 1 ? " photo" : " photos");
+ bar.style.gridColumn = String(index + 1);
+
+ const fill = document.createElement("div");
+ fill.className = "timeline-bar-fill";
+ fill.style.height = Math.max(4, Math.round((bin.count / maxCount) * 100)) + "%";
+ bar.appendChild(fill);
+
+ const meta = document.createElement("span");
+ meta.className = "timeline-bar-meta";
+ meta.textContent = index % labelStep === 0 || index === timeline.bins.length - 1 ? bin.label : "";
+ bar.appendChild(meta);
+
+ bar.addEventListener("click", () => {
+ if (timelineClickSuppressed) {
+ return;
+ }
+ setTimelineSelection(bin.start.getTime(), bin.end.getTime());
+ });
+
+ timelineBars.appendChild(bar);
+ });
+
+ syncTimelineSelectionOverlay();
+}
+
+function renderVisiblePhotos(options = {}) {
+ const visiblePhotos = getVisiblePhotos();
+ state.visiblePhotos = visiblePhotos;
+ markers.clearLayers();
+ route.setLatLngs([]);
+ photoList.replaceChildren();
+
+ if (!visiblePhotos.length) {
+ emptyState.textContent = state.photos.length
+ ? "No photos match the selected range."
+ : "No images imported yet.";
+ photoList.appendChild(emptyState);
+ photoCount.textContent = "0 photos";
+ } else {
+ emptyState.textContent = "No images imported yet.";
+ photoCount.textContent =
+ visiblePhotos.length + (visiblePhotos.length === 1 ? " photo shown" : " photos shown");
+
+ for (const photo of visiblePhotos) {
+ if (photo.latitude !== null && photo.longitude !== null) {
+ const marker = L.marker([photo.latitude, photo.longitude], {
+ icon: createPhotoMarkerIcon(L, photo, state.activePhotoId, escapeHtml)
+ }).addTo(markers);
+
+ marker.bindPopup(
+ '' +
+ '
 + ')
' +
+ '
' + escapeHtml(photo.name) + '' +
+ '
' + escapeHtml(formatDate(photo.capturedAt)) + '' +
+ '
' +
- '
' +
- '
' + escapeHtml(photo.name) + '' +
- '
' + escapeHtml(formatDate(photo.capturedAt)) + '' +
- '