fix: make timeline background transparent

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.

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,14 +942,8 @@ function htmlPage(): string {
           <div class="timeline-selection" id="timeline-selection"></div>
           <div class="timeline-brush" id="timeline-brush"></div>
         </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">
@@ -957,7 +952,13 @@ function htmlPage(): string {
             </svg>
           </span>
         </button>
-        </div>
+        <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"));
       });