From 4f140baa38084fdcd2b596a8a8ebfd3ce94bdbb9 Mon Sep 17 00:00:00 2001
From: mARTin-B78 <mail@martin-bierschenk.de>
Date: Fri, 29 May 2026 12:14:34 +0200
Subject: [PATCH] feat: move jump-to-date icon left of nav pill, picker opens
 below

- Calendar icon is now a standalone button to the left of the << < Today > >> cluster
- Uses its own ref (navDatePickerBtnRef) so SimpleDatePicker anchors and
  opens directly below the icon instead of at the center date display
- Removed separator inside nav pill (no longer needed)

v1.112.1
---
 package.json                  |  2 +-
 src/components/WeeklyView.tsx | 25 +++++++++++++++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 0fcb189..b0f28de 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.112.0",
+  "version": "1.112.1",
   "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
   "main": "index.js",
   "scripts": {
diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx
index 63724e0..6f7d789 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -1261,6 +1261,8 @@ export default function WeeklyView() {
     const [isRecurringTasksOpen, setIsRecurringTasksOpen] = useState(false);
     const [showDatePicker, setShowDatePicker] = useState(false);
     const datePickerBtnRef = useRef<HTMLDivElement>(null);
+    const [showNavDatePicker, setShowNavDatePicker] = useState(false);
+    const navDatePickerBtnRef = useRef<HTMLButtonElement>(null);
     const [showQuickSettings, setShowQuickSettings] = useState(false);
     const [leftRailExpanded, setLeftRailExpanded] = useState(false);
     const [flyoutSection, setFlyoutSection] = useState<string | null>(null);
@@ -6567,6 +6569,27 @@ export default function WeeklyView() {
                         </div>
                     )}
 
+                    {/* Jump to Date — left of nav, picker opens below */}
+                    <div style={{ position: "relative" }}>
+                        <button
+                            ref={navDatePickerBtnRef}
+                            className="weekly-btn-icon"
+                            onClick={() => setShowNavDatePicker(v => !v)}
+                            title={profile.language === "de" ? "Datum wählen" : "Jump to date"}
+                        >
+                            <Calendar size={17} />
+                        </button>
+                        {showNavDatePicker && !isMobile && (
+                            <SimpleDatePicker
+                                selected={currentWeekStart}
+                                onSelect={(date) => { setCurrentWeekStart(getStartOfWeek(date)); setShowNavDatePicker(false); }}
+                                onClose={() => setShowNavDatePicker(false)}
+                                language={profile.language}
+                                anchorRef={navDatePickerBtnRef}
+                            />
+                        )}
+                    </div>
+
                     {/* Navigation Controls — always visible */}
                     <div className="flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-0.5">
                         <button className="p-1 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm rounded text-gray-500 hover:text-black dark:hover:text-white transition-all" onClick={goToPrevWeek} title="Previous Week"><ChevronsLeft size={15} /></button>
@@ -6574,8 +6597,6 @@ export default function WeeklyView() {
                         <button className="px-2 py-1 text-xs font-bold text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm rounded transition-all" onClick={goToToday} title="Go to Today">Today</button>
                         <button className="p-1 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm rounded text-gray-500 hover:text-black dark:hover:text-white transition-all" onClick={goToNextDay} title="Next Day"><ChevronLeft size={15} className="rotate-180" /></button>
                         <button className="p-1 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm rounded text-gray-500 hover:text-black dark:hover:text-white transition-all" onClick={goToNextWeek} title="Next Week"><ChevronsLeft size={15} className="rotate-180" /></button>
-                        <div style={{ width: 1, height: 14, background: "var(--line, #e5e7eb)", margin: "0 2px", flexShrink: 0 }} />
-                        <button className="p-1 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm rounded text-gray-500 hover:text-black dark:hover:text-white transition-all" onClick={() => setShowDatePicker(true)} title={profile.language === "de" ? "Datum wählen" : "Jump to date"}><Calendar size={15} /></button>
                     </div>
 
                     {/* Always visible: Search, Settings, User */}