From 53d36f59ff38fa62d957b1cdd4ebc708fc47a276 Mon Sep 17 00:00:00 2001
From: ccmdi <ccmdi.dev@gmail.com>
Date: Sat, 15 Nov 2025 12:09:40 -0500
Subject: [PATCH] feat: timeline view slider area pos

---
 src/views/map-timeline-bases-view.ts | 30 +++++++++-------------------
 styles.css                           | 13 +++++++-----
 2 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/src/views/map-timeline-bases-view.ts b/src/views/map-timeline-bases-view.ts
index 2615114..e5efa21 100644
--- a/src/views/map-timeline-bases-view.ts
+++ b/src/views/map-timeline-bases-view.ts
@@ -24,7 +24,6 @@ export class MapTimelineBasesView extends MapBasesView {
     type = MapTimelineBasesViewType;
 
     private sliderEl: HTMLInputElement | null = null;
-    private dateDisplayEl: HTMLElement | null = null;
 
     private dateProperty: BasesPropertyId | null = null;
     private uniquenessProperty: BasesPropertyId | null = null;
@@ -55,18 +54,16 @@ export class MapTimelineBasesView extends MapBasesView {
         });
 
         dateInputEl.addEventListener('change', () => {
+            if (!dateInputEl.value) return;
+
             const selectedDate = new Date(dateInputEl.value);
             if (!isNaN(selectedDate.getTime())) {
                 this.dateRangeEnd = selectedDate.getTime();
                 this.updateSliderFromDate();
-                this.updateDateDisplay();
                 this.applyTimelineFilter();
             }
         });
 
-        this.dateDisplayEl = sliderContainer.createDiv({ cls: 'timeline-date-display' });
-        this.dateDisplayEl.textContent = this.getDateText();
-
         this.sliderEl = sliderContainer.createEl('input', {
             type: 'range',
             cls: 'timeline-slider',
@@ -77,7 +74,6 @@ export class MapTimelineBasesView extends MapBasesView {
 
         this.sliderEl.addEventListener('input', () => {
             this.updateDateRange();
-            this.updateDateDisplay();
             this.updateDateInput(dateInputEl);
             this.applyTimelineFilter();
         });
@@ -102,26 +98,15 @@ export class MapTimelineBasesView extends MapBasesView {
 
     private updateDateInput(dateInputEl: HTMLInputElement): void {
         const date = new Date(this.dateRangeEnd);
+
+        if (isNaN(date.getTime())) return;
+
         const year = date.getFullYear();
         const month = String(date.getMonth() + 1).padStart(2, '0');
         const day = String(date.getDate()).padStart(2, '0');
         dateInputEl.value = `${year}-${month}-${day}`;
     }
 
-    private getDateText(): string {
-        const endDate = new Date(this.dateRangeEnd);
-        return endDate.toLocaleDateString(undefined, {
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-        });
-    }
-
-    private updateDateDisplay(): void {
-        if (this.dateDisplayEl) {
-            this.dateDisplayEl.textContent = this.getDateText();
-        }
-    }
 
     private destroySlider(): void {
         if (this.sliderEl) {
@@ -261,6 +246,8 @@ export class MapTimelineBasesView extends MapBasesView {
 
     private applyTimelineFilter(): void {
         if (this.allTimelineEntries.length === 0) {
+            // No entries at all, clear the map
+            this.updateMapWithFilteredPoints([]);
             return;
         }
 
@@ -293,6 +280,7 @@ export class MapTimelineBasesView extends MapBasesView {
             }
         }
 
+        // Always update, even if empty (to clear markers when no results)
         this.updateMapWithFilteredPoints(filteredEntries.map(e => e.point));
     }
 
@@ -339,7 +327,7 @@ export class MapTimelineBasesView extends MapBasesView {
                         placeholder: 'None',
                     },
                     {
-                        displayName: 'Uniqueness mode',
+                        displayName: 'Grouping uniqueness mode',
                         type: 'dropdown',
                         key: 'uniquenessMode',
                         options: {
diff --git a/styles.css b/styles.css
index ce29b4b..f30f0ab 100644
--- a/styles.css
+++ b/styles.css
@@ -362,9 +362,9 @@
 
 .bases-timeline-slider {
     position: absolute;
-    bottom: 16px;
-    right: 16px;
-    min-width: 280px;
+    top: 6px;
+    right: 6px;
+    width: 320px;
     padding: 12px 16px;
     background: var(--background-primary);
     border: 1px solid var(--background-modifier-border);
@@ -373,7 +373,7 @@
     z-index: 10;
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 16px;
 }
 
 .timeline-date-input {
@@ -394,12 +394,15 @@
 }
 
 .timeline-slider {
-    width: 100%;
+    width: 100% !important;
     height: 6px;
+    margin: 0 !important;
+    padding: 0 !important;
     border-radius: 3px;
     background: var(--background-modifier-border);
     outline: none;
     -webkit-appearance: none;
+    box-sizing: border-box;
 }
 
 .timeline-slider::-webkit-slider-thumb {