From c465cc93345e4f781be25b826cf25e6620ac6afb Mon Sep 17 00:00:00 2001
From: Arne Baeumler <arne@br0tkasten.de>
Date: Wed, 10 Jun 2026 20:29:57 +0200
Subject: [PATCH] fix: make timeline background transparent

---
 AGENTS.md                     |  2 ++
 src/server/request-handler.ts | 44 +++++++++++++++++------------------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 6bd77b8..568e66d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -33,6 +33,7 @@ This repository is a browser-first photo mapping prototype.
 - Keep the timeline zoomable and tied to the selected date range.
 - Keep the code style consistent with the existing TypeScript/DOM approach.
 - Keep your output during editing as short as possible.
+- Keep interim chat updates short and to the point when the work is straightforward.
 
 ## UI Rules
 
@@ -44,6 +45,7 @@ This repository is a browser-first photo mapping prototype.
 ## Change Process
 
 - Make small, focused changes.
+- Commit every git change set before finishing a task.
 - Use conventional commit messages.
 - Verify the result with `git diff --check` when possible.
 - Update the README only when the user-facing setup or features change.
diff --git a/src/server/request-handler.ts b/src/server/request-handler.ts
index ca33461..0ffeae2 100644
--- a/src/server/request-handler.ts
+++ b/src/server/request-handler.ts
@@ -678,14 +678,14 @@ function htmlPage(): string {
         gap: 4px;
         z-index: 650;
         backdrop-filter: none;
-        background: #f0f0f0c0;
+        background: transparent;
         opacity: 1;
         border-color: rgba(255, 255, 255, 0.08);
         transition: height 180ms ease, transform 180ms ease, opacity 180ms ease, padding 180ms ease;
       }
 
       .timeline.timeline-collapsed {
-        height: 34px;
+        height: 40px;
         padding: 4px;
         overflow: hidden;
       }
@@ -798,7 +798,8 @@ function htmlPage(): string {
         display: flex;
         align-items: flex-start;
         gap: 4px;
-        padding-top: 4px;
+        justify-content: flex-end;
+        padding-top: 0;
       }
 
       .timeline-actions .panel-collapse {
@@ -941,23 +942,23 @@ function htmlPage(): string {
           <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="timeline-actions">
+        <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>
+        <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>
       </div>
     </section>
 
@@ -1150,8 +1151,7 @@ function htmlPage(): string {
         setSidebarCollapsed(!document.querySelector("aside")?.classList.contains("sidebar-collapsed"));
       });
 
-      const storedTimelineCollapsed = localStorage.getItem("timelineCollapsed") === "true";
-      setTimelineCollapsed(storedTimelineCollapsed);
+      setTimelineCollapsed(false);
       timelineCollapseButton.addEventListener("click", () => {
         setTimelineCollapsed(!document.querySelector(".timeline")?.classList.contains("timeline-collapsed"));
       });