From 75bb3301f9b0e22ee9504fac5c60f7fec90ba3e8 Mon Sep 17 00:00:00 2001
From: mARTin-B78 <mail@martin-bierschenk.de>
Date: Mon, 11 May 2026 14:33:23 +0200
Subject: [PATCH] fix(rail): collapse left rail icons to fit screens < 960px
 height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Nav arrows (5 icons) → single ArrowLeftRight flyout with prev/next week/day + today
- Undo/Redo/Refresh/Print (4 icons) → single Undo2 history flyout
- Removed duplicate standalone dark mode toggle (already in Appearance flyout)
- Same flyout sections added to mobile icon rail
- Nav flyout also added to mobile rail

v1.110.6
---
 package.json                  |  2 +-
 src/components/WeeklyView.tsx | 71 +++++++++++++++++++++++++++--------
 2 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index e1e5af3..9bad571 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.110.5",
+  "version": "1.110.6",
   "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 397a9b3..5d63e07 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -5906,12 +5906,8 @@ export default function WeeklyView() {
                             {/* Expand toggle */}
                             <button onClick={() => setLeftRailExpanded(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Erweitern" : "Expand"}><PanelLeftOpen size={16} /></button>
                             {railSep}
-                            {/* Navigation */}
-                            <button onClick={goToPrevWeek} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Vorherige Woche" : "Previous Week"}><ChevronsLeft size={15} /></button>
-                            <button onClick={goToPrevDay} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Vorheriger Tag" : "Previous Day"}><ChevronLeft size={15} /></button>
-                            <button onClick={goToToday} style={{ ...railIconBtnStyle, fontSize: "0.55rem", fontWeight: 800, letterSpacing: "0.05em" }} title="Today">{profile.language === "de" ? "HEUTE" : "TODAY"}</button>
-                            <button onClick={goToNextDay} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Nächster Tag" : "Next Day"}><ChevronRight size={15} /></button>
-                            <button onClick={goToNextWeek} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Nächste Woche" : "Next Week"}><ChevronsRight size={15} /></button>
+                            {/* Navigation flyout */}
+                            <button style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Navigation" : "Navigation"} onMouseEnter={(e) => openFlyout("nav", e)} onMouseLeave={closeFlyoutDelayed}><ArrowLeftRight size={15} /></button>
                             {railSep}
                             {/* View flyout */}
                             <button style={{ ...railIconBtnStyle, color: "var(--accent)" }} title={profile.language === "de" ? "Ansicht" : "View"} onMouseEnter={(e) => openFlyout("view", e)} onMouseLeave={closeFlyoutDelayed}>
@@ -5936,12 +5932,8 @@ export default function WeeklyView() {
                             {/* Appearance flyout */}
                             <button style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Darstellung" : "Appearance"} onMouseEnter={(e) => openFlyout("display", e)} onMouseLeave={closeFlyoutDelayed}>{darkMode ? <Moon size={15} /> : <Sun size={15} />}</button>
                             {railSep}
-                            {/* History & Utilities */}
-                            <button onClick={handleUndo} disabled={undoCount === 0} style={{ ...railIconBtnStyle, opacity: undoCount === 0 ? 0.3 : 1 }} title="Undo"><Undo2 size={15} /></button>
-                            <button onClick={handleRedo} disabled={redoCount === 0} style={{ ...railIconBtnStyle, opacity: redoCount === 0 ? 0.3 : 1 }} title="Redo"><Redo2 size={15} /></button>
-                            <button onClick={() => { fetchCalendarEvents(true); fetchTasks(); }} style={{ ...railIconBtnStyle }} title="Refresh"><RefreshCcw size={15} /></button>
-                            <button onClick={() => setShowWeekPrintModal(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Drucken" : "Print"}><Printer size={15} /></button>
-                            <button onClick={() => setDarkMode(!darkMode)} style={{ ...railIconBtnStyle }} title={darkMode ? "Light Mode" : "Dark Mode"}>{darkMode ? <Sun size={15} /> : <Moon size={15} />}</button>
+                            {/* History & Utilities flyout */}
+                            <button style={{ ...railIconBtnStyle, opacity: undoCount === 0 && redoCount === 0 ? 0.5 : 1 }} title={profile.language === "de" ? "Verlauf" : "History"} onMouseEnter={(e) => openFlyout("history", e)} onMouseLeave={closeFlyoutDelayed}><Undo2 size={15} /></button>
                             <div style={{ flex: 1 }} />
                             {railSep}
                             {/* Settings (cogwheel) + User menu at bottom */}
@@ -5980,6 +5972,29 @@ export default function WeeklyView() {
                 {/* Flyout panels — rendered outside the rail so they can overflow */}
                 {!leftRailExpanded && flyoutSection && (
                     <div style={{ ...flyoutPanelStyle }} onMouseEnter={keepFlyoutOpen} onMouseLeave={closeFlyoutDelayed}>
+                        {flyoutSection === "nav" && (
+                            <>
+                                <div style={flyoutLabelStyle}>{profile.language === "de" ? "Navigation" : "Navigation"}</div>
+                                <div style={{ display: "flex", gap: "4px" }}>
+                                    <button onClick={() => { goToPrevWeek(); setFlyoutSection(null); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Vorherige Woche" : "Prev Week"}><ChevronsLeft size={14} /></button>
+                                    <button onClick={() => { goToPrevDay(); setFlyoutSection(null); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Vorheriger Tag" : "Prev Day"}><ChevronLeft size={14} /></button>
+                                    <button onClick={() => { goToToday(); setFlyoutSection(null); }} style={{ flex: 2, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#374151" : "var(--ink)", color: "#fff", fontSize: "0.55rem", fontWeight: 800, letterSpacing: "0.05em" }} title="Today">{profile.language === "de" ? "HEUTE" : "TODAY"}</button>
+                                    <button onClick={() => { goToNextDay(); setFlyoutSection(null); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Nächster Tag" : "Next Day"}><ChevronRight size={14} /></button>
+                                    <button onClick={() => { goToNextWeek(); setFlyoutSection(null); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Nächste Woche" : "Next Week"}><ChevronsRight size={14} /></button>
+                                </div>
+                            </>
+                        )}
+                        {flyoutSection === "history" && (
+                            <>
+                                <div style={flyoutLabelStyle}>{profile.language === "de" ? "Verlauf" : "History"}</div>
+                                <div style={{ display: "flex", gap: "4px" }}>
+                                    <button onClick={handleUndo} disabled={undoCount === 0} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: undoCount === 0 ? "default" : "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center", opacity: undoCount === 0 ? 0.3 : 1 }} title="Undo"><Undo2 size={14} /></button>
+                                    <button onClick={handleRedo} disabled={redoCount === 0} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: redoCount === 0 ? "default" : "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center", opacity: redoCount === 0 ? 0.3 : 1 }} title="Redo"><Redo2 size={14} /></button>
+                                    <button onClick={() => { fetchCalendarEvents(true); fetchTasks(); setFlyoutSection(null); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title="Refresh"><RefreshCcw size={14} /></button>
+                                    <button onClick={() => { setShowWeekPrintModal(true); setFlyoutSection(null); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Drucken" : "Print"}><Printer size={14} /></button>
+                                </div>
+                            </>
+                        )}
                         {flyoutSection === "view" && (
                             <>
                                 <div style={flyoutLabelStyle}>{profile.language === "de" ? "Ansicht" : "View"}</div>
@@ -6134,6 +6149,9 @@ export default function WeeklyView() {
                         {/* Collapse — same icon as header toggle */}
                         <button className="mobile-rail-btn" onClick={() => { setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title="Close"><PanelLeftOpen size={16} /></button>
                         {railSep}
+                        {/* Navigation flyout */}
+                        <button className="mobile-rail-btn" style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Navigation" : "Navigation"} onClick={(e) => { const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); setFlyoutY(rect.top); setFlyoutSection(flyoutSection === "nav" ? null : "nav"); }}><ArrowLeftRight size={15} /></button>
+                        {railSep}
                         {/* View flyout */}
                         <button className="mobile-rail-btn" style={{ ...railIconBtnStyle, color: "var(--accent)" }} title={profile.language === "de" ? "Ansicht" : "View"} onClick={(e) => { const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); setFlyoutY(rect.top); setFlyoutSection(flyoutSection === "view" ? null : "view"); }}>
                             {profile.viewStyle === "simple" ? <Calendar size={15} /> : profile.viewStyle === "calendar" ? <CalendarDays size={15} /> : profile.viewStyle === "list" ? <ListTodo size={15} /> : profile.viewStyle === "kanban" ? <Kanban size={15} /> : <Target size={15} />}
@@ -6157,10 +6175,8 @@ export default function WeeklyView() {
                         {/* Appearance flyout */}
                         <button className="mobile-rail-btn" style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Darstellung" : "Appearance"} onClick={(e) => { const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); setFlyoutY(rect.top); setFlyoutSection(flyoutSection === "display" ? null : "display"); }}>{darkMode ? <Moon size={15} /> : <Sun size={15} />}</button>
                         {railSep}
-                        {/* History & Utilities */}
-                        <button className="mobile-rail-btn" onClick={handleUndo} disabled={undoCount === 0} style={{ ...railIconBtnStyle, opacity: undoCount === 0 ? 0.3 : 1 }} title="Undo"><Undo2 size={15} /></button>
-                        <button className="mobile-rail-btn" onClick={handleRedo} disabled={redoCount === 0} style={{ ...railIconBtnStyle, opacity: redoCount === 0 ? 0.3 : 1 }} title="Redo"><Redo2 size={15} /></button>
-                        <button className="mobile-rail-btn" onClick={() => { fetchCalendarEvents(true); fetchTasks(); setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title="Refresh"><RefreshCcw size={15} /></button>
+                        {/* History & Utilities flyout */}
+                        <button className="mobile-rail-btn" style={{ ...railIconBtnStyle, opacity: undoCount === 0 && redoCount === 0 ? 0.5 : 1 }} title={profile.language === "de" ? "Verlauf" : "History"} onClick={(e) => { const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); setFlyoutY(rect.top); setFlyoutSection(flyoutSection === "history" ? null : "history"); }}><Undo2 size={15} /></button>
                         <button className="mobile-rail-btn" onClick={() => setDarkMode(!darkMode)} style={{ ...railIconBtnStyle }} title={darkMode ? "Light Mode" : "Dark Mode"}>{darkMode ? <Sun size={15} /> : <Moon size={15} />}</button>
                         <div style={{ flex: 1 }} />
                         {railSep}
@@ -6174,6 +6190,29 @@ export default function WeeklyView() {
                         <>
                             <div onClick={() => setFlyoutSection(null)} style={{ position: "fixed", inset: 0, zIndex: 202 }} />
                             <div style={{ ...flyoutPanelStyle, left: "68px", zIndex: 203 }} onClick={(e) => e.stopPropagation()}>
+                                {flyoutSection === "nav" && (
+                                    <>
+                                        <div style={flyoutLabelStyle}>{profile.language === "de" ? "Navigation" : "Navigation"}</div>
+                                        <div style={{ display: "flex", gap: "4px" }}>
+                                            <button onClick={() => { goToPrevWeek(); setFlyoutSection(null); setShowMobileRail(false); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Vorherige Woche" : "Prev Week"}><ChevronsLeft size={14} /></button>
+                                            <button onClick={() => { goToPrevDay(); setFlyoutSection(null); setShowMobileRail(false); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Vorheriger Tag" : "Prev Day"}><ChevronLeft size={14} /></button>
+                                            <button onClick={() => { goToToday(); setFlyoutSection(null); setShowMobileRail(false); }} style={{ flex: 2, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#374151" : "var(--ink)", color: "#fff", fontSize: "0.55rem", fontWeight: 800, letterSpacing: "0.05em" }} title="Today">{profile.language === "de" ? "HEUTE" : "TODAY"}</button>
+                                            <button onClick={() => { goToNextDay(); setFlyoutSection(null); setShowMobileRail(false); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Nächster Tag" : "Next Day"}><ChevronRight size={14} /></button>
+                                            <button onClick={() => { goToNextWeek(); setFlyoutSection(null); setShowMobileRail(false); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Nächste Woche" : "Next Week"}><ChevronsRight size={14} /></button>
+                                        </div>
+                                    </>
+                                )}
+                                {flyoutSection === "history" && (
+                                    <>
+                                        <div style={flyoutLabelStyle}>{profile.language === "de" ? "Verlauf" : "History"}</div>
+                                        <div style={{ display: "flex", gap: "4px" }}>
+                                            <button onClick={handleUndo} disabled={undoCount === 0} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: undoCount === 0 ? "default" : "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center", opacity: undoCount === 0 ? 0.3 : 1 }} title="Undo"><Undo2 size={14} /></button>
+                                            <button onClick={handleRedo} disabled={redoCount === 0} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: redoCount === 0 ? "default" : "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center", opacity: redoCount === 0 ? 0.3 : 1 }} title="Redo"><Redo2 size={14} /></button>
+                                            <button onClick={() => { fetchCalendarEvents(true); fetchTasks(); setFlyoutSection(null); setShowMobileRail(false); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title="Refresh"><RefreshCcw size={14} /></button>
+                                            <button onClick={() => { setShowWeekPrintModal(true); setFlyoutSection(null); setShowMobileRail(false); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Drucken" : "Print"}><Printer size={14} /></button>
+                                        </div>
+                                    </>
+                                )}
                                 {flyoutSection === "view" && (
                                     <>
                                         <div style={flyoutLabelStyle}>{profile.language === "de" ? "Ansicht" : "View"}</div>