From 465aba4e47ae2997bbd0b88f18a86215b22b0b8c Mon Sep 17 00:00:00 2001
From: Arne Baeumler <arne@br0tkasten.de>
Date: Tue, 9 Jun 2026 21:00:59 +0200
Subject: [PATCH] fix: update timeline

---
 src/server/request-handler.ts | 917 +++++++++++++++++-----------------
 1 file changed, 447 insertions(+), 470 deletions(-)

diff --git a/src/server/request-handler.ts b/src/server/request-handler.ts
index 3048760..ca33461 100644
--- a/src/server/request-handler.ts
+++ b/src/server/request-handler.ts
@@ -102,8 +102,10 @@ function htmlPage(): string {
         --bg-accent-a: rgba(71, 85, 105, 0.1);
         --bg-accent-b: rgba(30, 41, 59, 0.08);
         --panel: rgba(15, 23, 42, 0.84);
+        --panel-float: rgba(15, 23, 42, 0.52);
         --panel-strong: rgba(15, 23, 42, 0.96);
         --surface: rgba(15, 23, 42, 0.6);
+        --surface-float: rgba(15, 23, 42, 0.42);
         --surface-strong: rgba(30, 41, 59, 0.88);
         --border: rgba(148, 163, 184, 0.14);
         --border-strong: rgba(148, 163, 184, 0.2);
@@ -123,15 +125,22 @@ function htmlPage(): string {
         --photo-active-bg: rgba(71, 85, 105, 0.22);
         --photo-active-border: rgba(148, 163, 184, 0.28);
         --empty-border: rgba(148, 163, 184, 0.18);
-        --map-label-bg: rgba(15, 23, 42, 0.94);
-        --map-label-border: rgba(148, 163, 184, 0.14);
         --overlay-bg: rgba(2, 6, 23, 0.84);
         --card-border: rgba(148, 163, 184, 0.12);
         --leaflet-popup-bg: rgba(15, 23, 42, 0.96);
         --leaflet-popup-text: #e2e8f0;
-        --timeline-bg:
-          linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9)),
-          radial-gradient(circle at top left, rgba(71, 85, 105, 0.14), transparent 42%);
+        --timeline-bg: #f0f0f0c0;
+        --timeline-bar-border: rgba(55, 65, 81, 0.92);
+        --timeline-bar-fill: rgba(156, 163, 175, 0.78);
+        --timeline-bar-hover: rgba(203, 213, 225, 0.9);
+        --timeline-bar-selected: rgba(209, 213, 219, 0.92);
+        --timeline-axis-color: rgba(156, 163, 175, 0.55);
+        --timeline-axis-label: rgba(156, 163, 175, 0.72);
+        --timeline-meta: rgba(156, 163, 175, 0.68);
+        --timeline-selection-border: rgba(107, 114, 128, 0.42);
+        --timeline-selection-bg: rgba(107, 114, 128, 0.08);
+        --timeline-brush-border: rgba(107, 114, 128, 0.62);
+        --timeline-brush-bg: rgba(107, 114, 128, 0.12);
         --chart-grid: rgba(255, 255, 255, 0.04);
       }
 
@@ -141,8 +150,10 @@ function htmlPage(): string {
         --bg-accent-a: rgba(100, 116, 139, 0.08);
         --bg-accent-b: rgba(148, 163, 184, 0.06);
         --panel: rgba(255, 255, 255, 0.86);
+        --panel-float: rgba(255, 255, 255, 0.52);
         --panel-strong: rgba(255, 255, 255, 0.96);
         --surface: rgba(255, 255, 255, 0.8);
+        --surface-float: rgba(255, 255, 255, 0.46);
         --surface-strong: rgba(241, 245, 249, 0.96);
         --border: rgba(15, 23, 42, 0.1);
         --border-strong: rgba(15, 23, 42, 0.16);
@@ -162,15 +173,22 @@ function htmlPage(): string {
         --photo-active-bg: rgba(100, 116, 139, 0.12);
         --photo-active-border: rgba(100, 116, 139, 0.3);
         --empty-border: rgba(15, 23, 42, 0.16);
-        --map-label-bg: rgba(255, 255, 255, 0.94);
-        --map-label-border: rgba(15, 23, 42, 0.08);
         --overlay-bg: rgba(8, 12, 18, 0.78);
         --card-border: rgba(15, 23, 42, 0.11);
         --leaflet-popup-bg: rgba(255, 255, 255, 0.97);
         --leaflet-popup-text: #0f172a;
-        --timeline-bg:
-          linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.92)),
-          radial-gradient(circle at top left, rgba(100, 116, 139, 0.08), transparent 42%);
+        --timeline-bg: #f0f0f0c0;
+        --timeline-bar-border: rgba(75, 85, 99, 0.9);
+        --timeline-bar-fill: rgba(156, 163, 175, 0.74);
+        --timeline-bar-hover: rgba(209, 213, 219, 0.88);
+        --timeline-bar-selected: rgba(220, 224, 230, 0.92);
+        --timeline-axis-color: rgba(107, 114, 128, 0.52);
+        --timeline-axis-label: rgba(107, 114, 128, 0.7);
+        --timeline-meta: rgba(107, 114, 128, 0.66);
+        --timeline-selection-border: rgba(107, 114, 128, 0.3);
+        --timeline-selection-bg: rgba(107, 114, 128, 0.08);
+        --timeline-brush-border: rgba(107, 114, 128, 0.52);
+        --timeline-brush-bg: rgba(107, 114, 128, 0.12);
         --chart-grid: rgba(15, 23, 42, 0.06);
       }
 
@@ -185,8 +203,7 @@ function htmlPage(): string {
       }
 
       body {
-        display: grid;
-        grid-template-rows: auto minmax(0, 1fr);
+        position: relative;
         height: 100dvh;
         overflow: hidden;
         font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -197,49 +214,12 @@ function htmlPage(): string {
           var(--bg);
       }
 
-      header {
-        display: flex;
-        justify-content: space-between;
-        align-items: end;
-        gap: 16px;
-        padding: 20px 24px 12px;
-      }
-
-      .header-actions {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-      }
-
-      .theme-toggle {
-        min-width: 128px;
-        justify-content: center;
-      }
-
       h1,
       h2,
       p {
         margin: 0;
       }
 
-      .brand h1 {
-        font-size: clamp(1.6rem, 2.4vw, 2.2rem);
-      }
-
-      .brand p,
-      .meta,
-      .muted {
-        color: var(--muted);
-      }
-
-      .layout {
-        min-height: 0;
-        display: grid;
-        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
-        gap: 14px;
-        padding: 0 14px 14px;
-      }
-
       aside,
       main,
       .overlay-card {
@@ -250,22 +230,62 @@ function htmlPage(): string {
         box-shadow: var(--shadow);
       }
 
+      .muted {
+        color: var(--muted);
+      }
+
       aside {
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        bottom: 128px;
+        width: min(280px, calc(100vw - 32px));
         min-height: 0;
         min-width: 0;
-        padding: 16px;
+        padding: 8px;
         display: grid;
         grid-template-rows: auto minmax(0, 1fr);
-        gap: 14px;
-        overflow: auto;
+        gap: 8px;
+        overflow: hidden;
+        z-index: 700;
+        backdrop-filter: blur(16px);
+        background: var(--panel-float);
+        border-color: rgba(255, 255, 255, 0.08);
+        transition: width 180ms ease, transform 180ms ease, opacity 180ms ease, padding 180ms ease;
+      }
+
+      aside.sidebar-collapsed {
+        width: 44px;
+        padding: 6px;
+      }
+
+      aside.sidebar-collapsed .panel-stack {
+        padding: 0;
+        background: transparent;
+        border-color: transparent;
+        backdrop-filter: none;
+      }
+
+      aside.sidebar-collapsed .panel-stack > :not(.panel-toolbar),
+      aside.sidebar-collapsed .photo-card {
+        display: none;
+      }
+
+      aside.sidebar-collapsed .panel-toolbar {
+        justify-content: center;
+      }
+
+      aside.sidebar-collapsed .theme-toggle {
+        display: none;
       }
 
       .card {
         min-width: 0;
-        padding: 15px;
+        padding: 10px;
         border-radius: var(--radius-lg);
         border: 1px solid var(--card-border);
-        background: var(--surface);
+        background: var(--surface-float);
+        backdrop-filter: blur(16px);
       }
 
       .photo-card {
@@ -275,8 +295,8 @@ function htmlPage(): string {
       }
 
       .card h2 {
-        font-size: 1rem;
-        margin-bottom: 8px;
+        font-size: 0.92rem;
+        margin-bottom: 6px;
       }
 
       .card p,
@@ -286,16 +306,16 @@ function htmlPage(): string {
 
       label {
         display: grid;
-        gap: 8px;
-        margin-top: 12px;
-        font-size: 0.92rem;
+        gap: 6px;
+        margin-top: 10px;
+        font-size: 0.84rem;
       }
 
       input {
         width: 100%;
         border: 1px solid var(--border-strong);
         border-radius: var(--radius-md);
-        padding: 11px 13px;
+        padding: 9px 11px;
         font: inherit;
         color: var(--text);
         background: var(--input-bg);
@@ -303,15 +323,41 @@ function htmlPage(): string {
 
       .button-row {
         display: flex;
-        gap: 10px;
-        margin-top: 12px;
+        gap: 8px;
+        margin-top: 8px;
         flex-wrap: wrap;
       }
 
+      .panel-stack {
+        display: grid;
+        gap: 8px;
+      }
+
+      .panel-toolbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .theme-toggle {
+        min-width: 112px;
+        justify-content: center;
+      }
+
+      .panel-collapse {
+        width: 32px;
+        min-width: 32px;
+        height: 32px;
+        padding: 0;
+        justify-content: center;
+        flex: 0 0 auto;
+      }
+
       button {
         border: 0;
         border-radius: var(--radius-md);
-        padding: 10px 13px;
+        padding: 8px 11px;
         font: inherit;
         cursor: pointer;
         display: inline-flex;
@@ -363,8 +409,8 @@ function htmlPage(): string {
       }
 
       .status {
-        margin-top: 10px;
-        font-size: 0.9rem;
+        margin-top: 6px;
+        font-size: 0.8rem;
         color: var(--muted);
         overflow-wrap: anywhere;
       }
@@ -372,8 +418,8 @@ function htmlPage(): string {
       .status-row {
         display: flex;
         align-items: center;
-        gap: 10px;
-        margin-top: 10px;
+        gap: 8px;
+        margin-top: 6px;
         min-width: 0;
       }
 
@@ -406,12 +452,12 @@ function htmlPage(): string {
 
       .progress {
         display: grid;
-        gap: 8px;
-        margin-top: 12px;
+        gap: 6px;
+        margin-top: 8px;
       }
 
       .progress-bar {
-        height: 10px;
+        height: 8px;
         border-radius: var(--radius-md);
         overflow: hidden;
         background: var(--progress-track);
@@ -429,7 +475,7 @@ function htmlPage(): string {
         display: flex;
         justify-content: space-between;
         gap: 12px;
-        font-size: 0.82rem;
+        font-size: 0.76rem;
         color: var(--muted);
         min-width: 0;
       }
@@ -441,7 +487,7 @@ function htmlPage(): string {
 
       .list {
         display: grid;
-        gap: 10px;
+        gap: 6px;
         min-height: 0;
         overflow: auto;
         padding-right: 2px;
@@ -449,10 +495,10 @@ function htmlPage(): string {
 
       .photo {
         display: grid;
-        grid-template-columns: 52px 1fr;
-        gap: 12px;
+        grid-template-columns: 38px 1fr;
+        gap: 8px;
         align-items: center;
-        padding: 11px;
+        padding: 8px;
         border-radius: var(--radius-md);
         background: var(--photo-bg);
         border: 1px solid var(--card-border);
@@ -460,15 +506,15 @@ function htmlPage(): string {
       }
 
       .photo img {
-        width: 52px;
-        height: 52px;
+        width: 38px;
+        height: 38px;
         object-fit: cover;
         border-radius: 0;
       }
 
       .photo strong {
         display: block;
-        font-size: 0.95rem;
+        font-size: 0.8rem;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -476,7 +522,7 @@ function htmlPage(): string {
 
       .photo span {
         color: var(--muted);
-        font-size: 0.82rem;
+        font-size: 0.7rem;
         display: block;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -489,7 +535,7 @@ function htmlPage(): string {
       }
 
       .empty-state {
-        padding: 14px;
+        padding: 10px;
         border-radius: var(--radius-md);
         border: 1px dashed var(--empty-border);
         color: var(--muted);
@@ -498,43 +544,28 @@ function htmlPage(): string {
       }
 
       main {
-        position: relative;
+        position: absolute;
+        inset: 0;
         min-height: 0;
         min-width: 0;
         overflow: hidden;
-        display: grid;
-        grid-template-rows: minmax(460px, 1fr) auto;
-        gap: 16px;
       }
 
       .map-panel {
-        position: relative;
+        position: absolute;
+        inset: 0;
         min-height: 0;
         overflow: hidden;
-        border-radius: var(--radius-xl);
-        border: 1px solid var(--border);
-        background: var(--panel);
-        backdrop-filter: blur(14px);
-        box-shadow: var(--shadow);
+        border-radius: 0;
+        border: 0;
+        background: transparent;
+        backdrop-filter: none;
+        box-shadow: none;
       }
 
       #map {
         width: 100%;
         height: 100%;
-        min-height: 460px;
-      }
-
-      .map-label {
-        position: absolute;
-        z-index: 500;
-        top: 16px;
-        left: 16px;
-        padding: 10px 12px;
-        border-radius: 0;
-        background: var(--map-label-bg);
-        border: 1px solid var(--map-label-border);
-        box-shadow: var(--shadow-soft);
-        font-size: 0.88rem;
       }
 
       .overlay {
@@ -638,63 +669,74 @@ function htmlPage(): string {
       }
 
       .timeline {
-        padding: 15px;
+        position: absolute;
+        left: 8px;
+        right: 8px;
+        bottom: 6px;
+        padding: 4px;
         display: grid;
-        gap: 12px;
+        gap: 4px;
+        z-index: 650;
+        backdrop-filter: none;
+        background: #f0f0f0c0;
+        opacity: 1;
+        border-color: rgba(255, 255, 255, 0.08);
+        transition: height 180ms ease, transform 180ms ease, opacity 180ms ease, padding 180ms ease;
       }
 
-      .timeline-header,
-      .timeline-footer {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: 12px;
+      .timeline.timeline-collapsed {
+        height: 34px;
+        padding: 4px;
+        overflow: hidden;
+      }
+
+      .timeline.timeline-collapsed .timeline-summary,
+      .timeline.timeline-collapsed .timeline-chart,
+      .timeline.timeline-collapsed .timeline-body {
+        display: none;
       }
 
       .timeline-header h2 {
         margin: 0 0 4px;
-        font-size: 1rem;
+        font-size: 0.84rem;
       }
 
       .timeline-summary {
         color: var(--muted);
-        font-size: 0.88rem;
+        font-size: 0.72rem;
+      }
+
+      .timeline-body {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        gap: 4px;
+        align-items: stretch;
       }
 
       .timeline-chart {
         position: relative;
-        min-height: 170px;
-        padding: 14px 12px 10px;
+        min-height: 64px;
+        padding: 4px 6px 4px;
         border-radius: 0;
-        border: 1px solid rgba(148, 163, 184, 0.18);
+        border: 0;
         background: var(--timeline-bg);
         overflow: hidden;
         touch-action: none;
         user-select: none;
-        box-shadow:
-          inset 0 1px 0 rgba(255, 255, 255, 0.05),
-          inset 0 -1px 0 rgba(255, 255, 255, 0.03);
+        box-shadow: none;
       }
 
       .timeline-chart::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        background:
-          linear-gradient(to top, var(--chart-grid) 1px, transparent 1px),
-          linear-gradient(to right, var(--chart-grid) 1px, transparent 1px);
-        background-size: 100% 33.333%, 10% 100%;
-        opacity: 0.35;
-        pointer-events: none;
+        content: none;
       }
 
       .timeline-bars {
-        height: 124px;
+        height: 36px;
         display: grid;
         grid-auto-flow: column;
-        grid-auto-columns: minmax(10px, 1fr);
+        grid-auto-columns: minmax(8px, 1fr);
         align-items: end;
-        gap: 2px;
+        gap: 0;
         position: relative;
         z-index: 1;
       }
@@ -706,27 +748,30 @@ function htmlPage(): string {
         align-items: end;
         cursor: pointer;
         border-radius: 0;
+        background: transparent;
+        padding: 0;
+        border: 0;
       }
 
       .timeline-bar-fill {
         width: 100%;
         border-radius: inherit;
-        min-height: 4px;
-        background: linear-gradient(180deg, rgba(96, 165, 250, 0.98), rgba(59, 130, 246, 0.36));
+        min-height: 3px;
+        background: #808080;
+        border: 1px solid #404040;
         transition: transform 140ms ease, background 140ms ease, opacity 140ms ease, box-shadow 140ms ease;
         transform-origin: bottom;
-        box-shadow: 0 0 0 1px rgba(30, 64, 175, 0.28);
+        box-shadow: none;
+        box-sizing: border-box;
       }
 
       .timeline-bar:hover .timeline-bar-fill,
       .timeline-bar.active .timeline-bar-fill {
-        background: linear-gradient(180deg, #38bdf8, #0ea5e9);
-        box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.38), 0 0 18px rgba(14, 165, 233, 0.18);
+        background: #909090;
       }
 
       .timeline-bar.selected .timeline-bar-fill {
-        background: linear-gradient(180deg, #22c55e, #86efac);
-        box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35), 0 0 18px rgba(34, 197, 94, 0.18);
+        background: #a0a0a0;
       }
 
       .timeline-bar.active .timeline-bar-fill {
@@ -734,84 +779,38 @@ function htmlPage(): string {
       }
 
       .timeline-bar.selected.active .timeline-bar-fill {
-        background: linear-gradient(180deg, #34d399, #10b981);
-        box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.38), 0 0 22px rgba(16, 185, 129, 0.24);
+        background: #b0b0b0;
       }
 
       .timeline-bar-meta {
         position: absolute;
         left: 50%;
-        bottom: -18px;
+        bottom: -12px;
         transform: translateX(-50%);
         white-space: nowrap;
-        font-size: 0.72rem;
-        color: rgba(226, 232, 240, 0.82);
+        font-size: 0.62rem;
+        color: var(--timeline-meta);
         font-variant-numeric: tabular-nums;
         pointer-events: none;
       }
 
-      .timeline-axis {
-        position: relative;
-        height: 20px;
-        margin-top: -2px;
-        color: rgba(226, 232, 240, 0.72);
+      .timeline-actions {
+        display: flex;
+        align-items: flex-start;
+        gap: 4px;
+        padding-top: 4px;
       }
 
-      .timeline-axis-label {
-        position: absolute;
-        top: 0;
-        transform: translateX(-50%);
-        font-size: 0.72rem;
-        color: rgba(226, 232, 240, 0.78);
-        font-variant-numeric: tabular-nums;
-        white-space: nowrap;
-      }
-
-      .timeline-selection {
-        position: absolute;
-        top: 14px;
-        bottom: 34px;
-        border-radius: 0;
-        border: 1px solid rgba(56, 189, 248, 0.55);
-        background:
-          linear-gradient(180deg, rgba(56, 189, 248, 0.18), rgba(14, 165, 233, 0.08)),
-          rgba(14, 165, 233, 0.12);
-        pointer-events: none;
-        opacity: 0;
-        transition: opacity 120ms ease;
-        box-shadow:
-          inset 0 0 0 1px rgba(255, 255, 255, 0.06),
-          0 0 22px rgba(14, 165, 233, 0.12);
-      }
-
-      .timeline-selection.visible {
-        opacity: 1;
-      }
-
-      .timeline-brush {
-        position: absolute;
-        top: 14px;
-        bottom: 34px;
-        border-radius: 0;
-        border: 1px dashed rgba(56, 189, 248, 0.9);
-        background: rgba(56, 189, 248, 0.16);
-        pointer-events: none;
-        opacity: 0;
-        box-shadow: 0 0 20px rgba(56, 189, 248, 0.12);
-      }
-
-      .timeline-brush.visible {
-        opacity: 1;
-      }
-
-      .timeline-footer {
-        font-size: 0.84rem;
-        color: var(--muted);
-        font-variant-numeric: tabular-nums;
-      }
-
-      .timeline-footer span:last-child {
+      .timeline-actions .panel-collapse {
+        width: 28px;
+        min-width: 28px;
+        height: 28px;
+        padding: 0;
+        justify-content: center;
+        background: rgba(255, 255, 255, 0.42);
         color: var(--text);
+        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+        border: 1px solid rgba(75, 85, 99, 0.24);
       }
 
       @media (max-width: 920px) {
@@ -821,12 +820,13 @@ function htmlPage(): string {
           overflow: auto;
         }
 
-        .layout {
-          grid-template-columns: 1fr;
-          min-height: 0;
-        }
-
         aside {
+          position: static;
+          width: auto;
+          margin: 12px;
+          bottom: auto;
+          right: auto;
+          top: auto;
           overflow: visible;
         }
 
@@ -835,125 +835,131 @@ function htmlPage(): string {
         }
 
         main {
-          grid-template-rows: minmax(400px, 1fr) auto;
+          position: static;
+          inset: auto;
+          min-height: 60vh;
         }
 
         #map {
-          min-height: 460px;
+          min-height: 60vh;
         }
 
-        .timeline-header,
-        .timeline-footer {
-          flex-direction: column;
-          align-items: flex-start;
+        .timeline {
+          position: static;
+          left: auto;
+          right: auto;
+          bottom: auto;
+          margin: 0 12px 12px;
         }
       }
     </style>
   </head>
   <body data-theme="light">
-    <header>
-      <div class="brand">
-        <h1>mapy-mg</h1>
-        <p>Browser-based photo geolocation on OpenStreetMap.</p>
+    <main>
+      <section class="map-panel">
+        <div id="map"></div>
+      </section>
+    </main>
+
+    <aside>
+      <section class="card panel-stack">
+        <div class="panel-toolbar">
+          <button class="secondary panel-collapse" id="sidebar-collapse" type="button" aria-label="Collapse left panel">
+            <span class="button-icon" id="sidebar-collapse-icon" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M9.5 4 5.5 8l4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </span>
+          </button>
+          <button class="secondary theme-toggle" id="theme-toggle" type="button" aria-label="Switch color theme">
+            <span class="button-icon" id="theme-toggle-icon" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M10.7 12.2a5.7 5.7 0 1 1 0-8.4 4.9 4.9 0 0 0 0 8.4Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
+              </svg>
+            </span>
+            <span id="theme-toggle-label" class="theme-toggle-label">Light mode</span>
+          </button>
+        </div>
+        <label>
+          Share URL
+          <input
+            id="share-url"
+            placeholder="https://cloud.example.com/index.php/s/..."
+            spellcheck="false"
+            autocomplete="off"
+          />
+        </label>
+        <div class="button-row">
+          <button class="primary" id="load-share" type="button">
+            <span class="button-icon" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M8 2v7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+                <path d="M5 6.5 8 9.5 11 6.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M3 12.5h10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+              </svg>
+            </span>
+            <span>Import</span>
+          </button>
+          <button class="danger" id="cancel-share" type="button" disabled>
+            <span class="button-icon" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+              </svg>
+            </span>
+            <span>Stop</span>
+          </button>
+        </div>
+        <div class="status-row">
+          <span class="spinner" id="activity-spinner" aria-hidden="true"></span>
+          <div class="status" id="share-status">Ready to import.</div>
+        </div>
+        <div class="progress" aria-label="Loading progress">
+          <div class="progress-bar" aria-hidden="true">
+            <div class="progress-fill" id="progress-fill"></div>
+          </div>
+          <div class="progress-meta">
+            <span id="progress-text">0 / 0</span>
+            <span id="progress-detail">ready</span>
+          </div>
+        </div>
+      </section>
+
+      <section class="card photo-card">
+        <h2>Photos</h2>
+        <small id="photo-count" class="muted">0 photos</small>
+        <div id="photo-list" class="list">
+          <div class="empty-state" id="empty-state">No images imported yet.</div>
+        </div>
+      </section>
+    </aside>
+
+    <section class="card timeline" aria-label="Photo timeline">
+      <div class="timeline-summary" id="timeline-summary">No photos imported yet.</div>
+      <div class="timeline-body">
+        <div class="timeline-chart" id="timeline-chart">
+          <div class="timeline-bars" id="timeline-bars"></div>
+          <div class="timeline-selection" id="timeline-selection"></div>
+          <div class="timeline-brush" id="timeline-brush"></div>
+        </div>
+        <div class="timeline-actions">
+          <button class="secondary panel-collapse" id="timeline-collapse" type="button" aria-label="Collapse timeline">
+            <span class="button-icon" id="timeline-collapse-icon" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M4 6.5 8 10.5l4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </span>
+          </button>
+          <button class="secondary panel-collapse" id="timeline-clear" type="button" aria-label="Reset range" disabled>
+            <span class="button-icon" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M13 8a5 5 0 1 1-1.5-3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M11.8 2.9v3.2H8.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </span>
+          </button>
+        </div>
       </div>
-      <div class="header-actions">
-        <div class="meta">Client-side processing, no server-side storage</div>
-        <button class="secondary theme-toggle" id="theme-toggle" type="button" aria-label="Switch color theme">
-          <span class="button-icon" id="theme-toggle-icon" aria-hidden="true">
-            <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M10.7 12.2a5.7 5.7 0 1 1 0-8.4 4.9 4.9 0 0 0 0 8.4Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
-            </svg>
-          </span>
-          <span id="theme-toggle-label">Light mode</span>
-        </button>
-      </div>
-    </header>
-
-    <div class="layout">
-      <aside>
-        <section class="card">
-          <h2>Nextcloud Import</h2>
-          <p>Paste a public share link to import images directly in the browser.</p>
-          <label>
-            Share URL
-            <input
-              id="share-url"
-              placeholder="https://cloud.example.com/index.php/s/..."
-              spellcheck="false"
-              autocomplete="off"
-            />
-          </label>
-          <div class="button-row">
-            <button class="primary" id="load-share" type="button">
-              <span class="button-icon" aria-hidden="true">
-                <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M8 2v7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
-                  <path d="M5 6.5 8 9.5 11 6.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path d="M3 12.5h10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
-                </svg>
-              </span>
-              <span>Import</span>
-            </button>
-            <button class="danger" id="cancel-share" type="button" disabled>
-              <span class="button-icon" aria-hidden="true">
-                <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
-                </svg>
-              </span>
-              <span>Stop</span>
-            </button>
-          </div>
-          <div class="status-row">
-            <span class="spinner" id="activity-spinner" aria-hidden="true"></span>
-            <div class="status" id="share-status">Ready to import.</div>
-          </div>
-          <div class="progress" aria-label="Loading progress">
-            <div class="progress-bar" aria-hidden="true">
-              <div class="progress-fill" id="progress-fill"></div>
-            </div>
-            <div class="progress-meta">
-              <span id="progress-text">0 / 0</span>
-              <span id="progress-detail">ready</span>
-            </div>
-          </div>
-          <small>Public Nextcloud shares are read via WebDAV.</small>
-        </section>
-
-        <section class="card photo-card">
-          <h2>Photos</h2>
-          <small id="photo-count" class="muted">0 photos</small>
-          <div id="photo-list" class="list">
-            <div class="empty-state" id="empty-state">No images imported yet.</div>
-          </div>
-        </section>
-      </aside>
-
-      <main>
-        <section class="map-panel">
-          <div class="map-label">Hover for thumbnail · click for fullscreen · route sorted by time</div>
-          <div id="map"></div>
-        </section>
-        <section class="card timeline" aria-label="Photo timeline">
-          <div class="timeline-header">
-            <div>
-              <h2>Timeline</h2>
-              <div class="timeline-summary" id="timeline-summary">No photos imported yet.</div>
-            </div>
-            <button class="secondary" id="timeline-clear" type="button" disabled>Reset range</button>
-          </div>
-          <div class="timeline-chart" id="timeline-chart">
-            <div class="timeline-bars" id="timeline-bars"></div>
-            <div class="timeline-selection" id="timeline-selection"></div>
-            <div class="timeline-brush" id="timeline-brush"></div>
-          </div>
-          <div class="timeline-axis" id="timeline-axis"></div>
-          <div class="timeline-footer">
-            <span id="timeline-range">All photos</span>
-            <span id="timeline-unit">Scale: Day</span>
-          </div>
-        </section>
-      </main>
-    </div>
+    </section>
 
     <div class="overlay" id="overlay" aria-hidden="true">
       <div class="overlay-card">
@@ -986,7 +992,7 @@ function htmlPage(): string {
         timelineSelection: null,
         timelineViewport: null,
         timeline: {
-          unit: "day",
+          intervalMs: 15 * 60 * 1000,
           bins: [],
           start: null,
           end: null
@@ -998,6 +1004,7 @@ function htmlPage(): string {
       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);
       L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
@@ -1029,12 +1036,13 @@ function htmlPage(): string {
       const timelineBars = mustGet("timeline-bars");
       const timelineSelection = mustGet("timeline-selection");
       const timelineBrush = mustGet("timeline-brush");
-      const timelineAxis = mustGet("timeline-axis");
-      const timelineRange = mustGet("timeline-range");
-      const timelineUnit = mustGet("timeline-unit");
       const themeToggle = mustGet("theme-toggle");
       const themeToggleIcon = mustGet("theme-toggle-icon");
       const themeToggleLabel = mustGet("theme-toggle-label");
+      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");
@@ -1081,12 +1089,73 @@ function htmlPage(): string {
         }
       }
 
+      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
+          ? '<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 4 10.5 8l-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+          : '<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.5 4 5.5 8l4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+        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
+          ? '<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 9.5 8 5.5l4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+          : '<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6.5 8 10.5l4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+        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 storedTheme = localStorage.getItem("theme");
       setTheme(storedTheme === "dark" ? "dark" : "light");
       themeToggle.addEventListener("click", () => {
         setTheme(document.body.dataset.theme === "dark" ? "light" : "dark");
       });
 
+      const storedSidebarCollapsed = localStorage.getItem("sidebarCollapsed") === "true";
+      setSidebarCollapsed(storedSidebarCollapsed);
+      sidebarCollapseButton.addEventListener("click", () => {
+        setSidebarCollapsed(!document.querySelector("aside")?.classList.contains("sidebar-collapsed"));
+      });
+
+      const storedTimelineCollapsed = localStorage.getItem("timelineCollapsed") === "true";
+      setTimelineCollapsed(storedTimelineCollapsed);
+      timelineCollapseButton.addEventListener("click", () => {
+        setTimelineCollapsed(!document.querySelector(".timeline")?.classList.contains("timeline-collapsed"));
+      });
+
       function formatDate(value) {
         if (!value) {
           return "no timestamp";
@@ -1159,135 +1228,64 @@ function htmlPage(): string {
         return copy;
       }
 
-      function startOfDay(date) {
-        const copy = new Date(date);
-        copy.setHours(0, 0, 0, 0);
-        return copy;
+      function getTimelineIntervalMs(spanMs) {
+        const minute = 60 * 1000;
+        const hour = 60 * minute;
+
+        if (spanMs <= 12 * hour) {
+          return 5 * minute;
+        }
+
+        if (spanMs <= 2 * 24 * hour) {
+          return 15 * minute;
+        }
+
+        if (spanMs <= 7 * 24 * hour) {
+          return 30 * minute;
+        }
+
+        if (spanMs <= 21 * 24 * hour) {
+          return 60 * minute;
+        }
+
+        if (spanMs <= 60 * 24 * hour) {
+          return 2 * hour;
+        }
+
+        return 4 * hour;
       }
 
-      function startOfWeek(date) {
-        const copy = startOfDay(date);
-        const day = copy.getDay();
-        const offset = (day + 6) % 7;
-        copy.setDate(copy.getDate() - offset);
-        return copy;
+      function floorToInterval(date, intervalMs) {
+        return new Date(Math.floor(date.getTime() / intervalMs) * intervalMs);
       }
 
-      function startOfMonth(date) {
-        const copy = startOfDay(date);
-        copy.setDate(1);
-        return copy;
+      function ceilToInterval(date, intervalMs) {
+        return new Date(Math.ceil(date.getTime() / intervalMs) * intervalMs);
       }
 
-      function addUnit(date, unit) {
-        const copy = new Date(date);
-
-        if (unit === "hour") {
-          copy.setHours(copy.getHours() + 1);
-          return copy;
-        }
-
-        if (unit === "day") {
-          copy.setDate(copy.getDate() + 1);
-          return copy;
-        }
-
-        if (unit === "week") {
-          copy.setDate(copy.getDate() + 7);
-          return copy;
-        }
-
-        copy.setMonth(copy.getMonth() + 1);
-        return copy;
-      }
-
-      function getUnitStart(date, unit) {
-        if (unit === "hour") {
-          return startOfHour(date);
-        }
-
-        if (unit === "day") {
-          return startOfDay(date);
-        }
-
-        if (unit === "week") {
-          return startOfWeek(date);
-        }
-
-        return startOfMonth(date);
-      }
-
-      function chooseTimelineUnit(spanMs) {
-        const hour = 60 * 60 * 1000;
-        const day = 24 * hour;
-        const week = 7 * day;
-
-        if (spanMs <= 48 * hour) {
-          return "hour";
-        }
-
-        if (spanMs <= 21 * day) {
-          return "day";
-        }
-
-        if (spanMs <= 16 * week) {
-          return "week";
-        }
-
-        return "month";
-      }
-
-      function formatTimelineLabel(date, unit) {
-        if (unit === "hour") {
-          return date.toLocaleString("en-US", {
-            month: "short",
-            day: "numeric",
-            hour: "2-digit",
-            minute: "2-digit"
-          });
-        }
-
-        if (unit === "day") {
-          return date.toLocaleDateString("en-US", {
-            month: "short",
-            day: "numeric"
-          });
-        }
-
-        if (unit === "week") {
-          return date.toLocaleDateString("en-US", {
-            month: "short",
-            day: "numeric"
-          });
-        }
-
-        return date.toLocaleDateString("en-US", {
+      function formatTimelineLabel(date) {
+        return date.toLocaleString("en-US", {
           month: "short",
-          year: "numeric"
+          day: "numeric",
+          hour: "2-digit",
+          minute: "2-digit"
         });
       }
 
-      function formatTimelineSummary(photos, unit) {
+      function formatTimelineSummary(photos) {
         if (!photos.length) {
           return "No photos imported yet.";
         }
 
         const count = photos.length + (photos.length === 1 ? " photo" : " photos");
-        const unitLabel = {
-          hour: "hourly",
-          day: "daily",
-          week: "weekly",
-          month: "monthly"
-        }[unit] || unit;
-
-        return count + " across a " + unitLabel + " timeline.";
+        return count + " across a compact timeline.";
       }
 
       function formatSelectionRange(start, end) {
         return (
-          formatTimelineLabel(start, state.timeline.unit) +
+          formatTimelineLabel(start) +
           " - " +
-          formatTimelineLabel(end, state.timeline.unit)
+          formatTimelineLabel(end)
         );
       }
 
@@ -1299,7 +1297,7 @@ function htmlPage(): string {
 
         if (!datedPhotos.length) {
           return {
-            unit: "day",
+            intervalMs: 15 * 60 * 1000,
             bins: [],
             start: null,
             end: null
@@ -1311,19 +1309,19 @@ function htmlPage(): string {
         const startDate = viewport ? new Date(viewport.start) : dataStart;
         const endDate = viewport ? new Date(viewport.end) : dataEnd;
         const spanMs = Math.max(1, endDate.getTime() - startDate.getTime());
-        const unit = chooseTimelineUnit(spanMs);
-        const domainStart = getUnitStart(startDate, unit);
-        const domainEnd = addUnit(getUnitStart(endDate, unit), unit);
+        const intervalMs = getTimelineIntervalMs(spanMs);
+        const domainStart = floorToInterval(startDate, intervalMs);
+        const domainEnd = ceilToInterval(endDate, intervalMs);
         const bins = [];
 
-        for (let cursor = new Date(domainStart); cursor < domainEnd; cursor = addUnit(cursor, unit)) {
-          const next = addUnit(cursor, unit);
+        for (let cursor = new Date(domainStart); cursor < domainEnd; cursor = new Date(cursor.getTime() + intervalMs)) {
+          const next = new Date(cursor.getTime() + intervalMs);
           bins.push({
             start: new Date(cursor),
             end: next,
             count: 0,
             photoIds: [],
-            label: formatTimelineLabel(cursor, unit)
+            label: formatTimelineLabel(cursor)
           });
         }
 
@@ -1337,7 +1335,7 @@ function htmlPage(): string {
             continue;
           }
 
-          const bucketStart = getUnitStart(entry.date, unit).getTime();
+          const bucketStart = floorToInterval(entry.date, intervalMs).getTime();
           const binIndex = binIndexByStart.get(bucketStart);
           if (binIndex !== undefined) {
             const bin = bins[binIndex];
@@ -1347,7 +1345,7 @@ function htmlPage(): string {
         }
 
         return {
-          unit,
+          intervalMs,
           bins,
           start: domainStart,
           end: domainEnd
@@ -1388,7 +1386,7 @@ function htmlPage(): string {
         state.timelineSelection = null;
         state.timelineViewport = null;
         state.timeline = {
-          unit: "day",
+          intervalMs: 15 * 60 * 1000,
           bins: [],
           start: null,
           end: null
@@ -1399,11 +1397,8 @@ function htmlPage(): string {
         emptyState.textContent = "No images imported yet.";
         photoCount.textContent = "0 photos";
         timelineSummary.textContent = "No photos imported yet.";
-        timelineRange.textContent = "All photos";
-        timelineUnit.textContent = "Scale: Day";
         timelineClearButton.disabled = true;
         timelineBars.replaceChildren();
-        timelineAxis.replaceChildren();
         timelineSelection.classList.remove("visible");
         timelineSelection.style.left = "0";
         timelineSelection.style.width = "0";
@@ -1529,18 +1524,11 @@ function htmlPage(): string {
         const timelinePhotos = state.timelineSelection ? state.visiblePhotos : state.photos;
         const timeline = buildTimeline(timelinePhotos, state.timelineViewport);
         state.timeline = timeline;
-        timelineSummary.textContent = formatTimelineSummary(state.photos, timeline.unit);
-        timelineUnit.textContent =
-          "Scale: " +
-          timeline.unit.charAt(0).toUpperCase() +
-          timeline.unit.slice(1) +
-          (state.timelineSelection ? " · zoomed" : "");
+        timelineSummary.textContent = formatTimelineSummary(state.photos);
 
         timelineBars.replaceChildren();
-        timelineAxis.replaceChildren();
 
         if (!timeline.bins.length) {
-          timelineRange.textContent = "All photos";
           syncTimelineSelectionOverlay();
           return;
         }
@@ -1580,26 +1568,6 @@ function htmlPage(): string {
           timelineBars.appendChild(bar);
         });
 
-        const selection = state.timelineSelection;
-        timelineRange.textContent = selection
-          ? formatSelectionRange(new Date(selection.start), new Date(selection.end))
-          : "All photos";
-
-        const axisLabels = [];
-        timeline.bins.forEach((bin, index) => {
-          if (index % labelStep !== 0 && index !== timeline.bins.length - 1) {
-            return;
-          }
-
-          const label = document.createElement("span");
-          label.className = "timeline-axis-label";
-          const position = timeline.bins.length === 1 ? 0 : index / (timeline.bins.length - 1);
-          label.style.left = position * 100 + "%";
-          label.textContent = bin.label;
-          axisLabels.push(label);
-        });
-
-        axisLabels.forEach((label) => timelineAxis.appendChild(label));
         syncTimelineSelectionOverlay();
       }
 
@@ -1947,6 +1915,7 @@ function htmlPage(): string {
           return;
         }
 
+        syncShareUrlInLocation(importUrlInput.value);
         const controller = new AbortController();
         activeImportController = controller;
         setImporting(true);
@@ -2039,6 +2008,14 @@ function htmlPage(): string {
         }
       });
 
+      const initialShareUrl = getShareUrlFromLocation();
+      if (initialShareUrl) {
+        importUrlInput.value = initialShareUrl;
+        window.queueMicrotask(() => {
+          void importFromShare();
+        });
+      }
+
       clearGallery();
       setImportStatus("Ready to import.");
     </script>