From 2f29355bb926de8cd72b0b812eb49d05c8c0ddd7 Mon Sep 17 00:00:00 2001
From: mARTin-B78 <mail@martin-bierschenk.de>
Date: Mon, 11 May 2026 09:22:43 +0200
Subject: [PATCH] fix: header readability, icon consistency, settings menu
 position toggle, account tab

- Remove hover blur/opacity on header center section when left rail is active
  (group-hover:opacity-20 blur only applies in top-toolbar mode)
- Add min-height to desktop header so it doesn't collapse when both left/right
  sections are hidden in left-rail mode
- User icon in left rail now opens Settings on the Account tab directly
- Add Menu Position toggle (Left/Top) to Settings > General tab so users
  can find and change toolbar layout from the settings menu
- Replace FolderPlus with Briefcase icon for Projects in left rail to match
  the Settings sidebar's Projects tab icon

v1.106.4
---
 package.json                       |  2 +-
 src/components/SettingsSidebar.tsx | 33 ++++++++++++++++++++++++++++++
 src/components/WeeklyView.tsx      |  9 ++++----
 3 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index d33e7e3..9e79171 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.106.3",
+  "version": "1.106.4",
   "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/SettingsSidebar.tsx b/src/components/SettingsSidebar.tsx
index 6fd9da2..6b35ea5 100644
--- a/src/components/SettingsSidebar.tsx
+++ b/src/components/SettingsSidebar.tsx
@@ -1013,6 +1013,39 @@ function SettingsSidebar({
                         >
                             {/* ── General settings (not view-specific) ── */}
                             <div style={{ display: "flex", flexDirection: "column", gap: "12px", paddingBottom: "16px", borderBottom: "1px solid var(--weekly-border, #e5e7eb)" }}>
+                                {/* Menu Position */}
+                                <div>
+                                    <label style={{ fontSize: "0.85rem", fontWeight: 600, color: "var(--weekly-settings-label)" }}>
+                                        {profile.language === "de" ? "Menüposition" : "Menu Position"}
+                                    </label>
+                                    <div className="mt-1 flex gap-2">
+                                        {[
+                                            { value: "left", label: profile.language === "de" ? "Links (Seitenleiste)" : "Left (Sidebar)" },
+                                            { value: "top", label: profile.language === "de" ? "Oben (Kopfleiste)" : "Top (Header)" },
+                                        ].map(({ value, label }) => (
+                                            <button
+                                                key={value}
+                                                onClick={() => {
+                                                    setProfile((p: any) => ({ ...p, menuPosition: value }));
+                                                    saveSetting("menuPosition", value);
+                                                }}
+                                                style={{
+                                                    flex: 1,
+                                                    padding: "6px 10px",
+                                                    fontSize: "0.8rem",
+                                                    borderRadius: "6px",
+                                                    border: "1px solid var(--weekly-border, #e5e7eb)",
+                                                    cursor: "pointer",
+                                                    fontWeight: (profile.menuPosition || "left") === value ? 700 : 400,
+                                                    background: (profile.menuPosition || "left") === value ? "var(--weekly-text, #333)" : "transparent",
+                                                    color: (profile.menuPosition || "left") === value ? "#fff" : "var(--weekly-settings-label)",
+                                                }}
+                                            >
+                                                {label}
+                                            </button>
+                                        ))}
+                                    </div>
+                                </div>
                                 {/* Header Display */}
                                 <div>
                                     <label style={{ fontSize: "0.85rem", fontWeight: 600, color: "var(--weekly-settings-label)" }}>
diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx
index 6eceeca..8eafa1d 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -93,6 +93,7 @@ import {
     Printer,
     Star,
     LogOut,
+    Briefcase,
 } from "lucide-react";
 
 const stripHtml = (html: string) => html.replace(/<[^>]*>/g, '').trim();
@@ -5917,7 +5918,7 @@ export default function WeeklyView() {
                             <button onClick={() => setIsSearchOpen(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Suche" : "Search"}><Search size={15} /></button>
                             <button onClick={() => setShowDatePicker(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Datum wählen" : "Jump to date"}><CalendarDays size={15} /></button>
                             <button onClick={() => { const now = new Date(); setCalendarEventModal({ isOpen: true, event: undefined, initialDate: now, initialStartTime: `${String(now.getHours()).padStart(2, "0")}:00` }); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Kalendereintrag" : "Calendar Event"}><Plus size={15} /></button>
-                            <button onClick={() => setShowProjectsSidebar(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Projekte" : "Projects"}><FolderPlus size={15} /></button>
+                            <button onClick={() => setShowProjectsSidebar(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Projekte" : "Projects"}><Briefcase size={15} /></button>
                             <button onClick={() => setIsRecurringTasksOpen(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Wiederkehrend" : "Recurring"}><Repeat size={15} /></button>
                             <button onClick={() => { const nv = !profile.showNextTask; setShowNextTask(nv); saveSetting("showNextTask", nv); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Ziel" : "Goal"}>{profile.showNextTask ? <Play size={15} /> : <Target size={15} />}</button>
                             <button onClick={() => setShowFocusMode(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Fokus" : "Focus"}><Zap size={15} /></button>
@@ -5947,7 +5948,7 @@ export default function WeeklyView() {
                                                 <p style={{ fontSize: "0.8rem", fontWeight: 600, color: darkMode ? "#e5e7eb" : "#374151", margin: 0 }}>{profile.language === "de" ? "Angemeldet als" : "Signed in as"}</p>
                                                 <p style={{ fontSize: "0.75rem", color: darkMode ? "#9ca3af" : "#6b7280", margin: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{session?.user?.email || "User"}</p>
                                             </div>
-                                            <button onClick={() => { setShowSettings(true); setShowRailUserMenu(false); }} style={{ width: "100%", textAlign: "left", padding: "8px 14px", fontSize: "0.85rem", color: darkMode ? "#e5e7eb" : "#374151", background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: "8px" }}
+                                            <button onClick={() => { setActiveTab("account"); setShowSettings(true); setShowRailUserMenu(false); }} style={{ width: "100%", textAlign: "left", padding: "8px 14px", fontSize: "0.85rem", color: darkMode ? "#e5e7eb" : "#374151", background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: "8px" }}
                                                 onMouseEnter={(e) => (e.currentTarget.style.background = darkMode ? "#374151" : "#f3f4f6")}
                                                 onMouseLeave={(e) => (e.currentTarget.style.background = "none")}>
                                                 <Settings size={15} style={{ opacity: 0.5 }} />
@@ -6107,7 +6108,7 @@ export default function WeeklyView() {
             )}
 
             {/* Desktop Header: Left, Center, Right */}
-            <header className="group relative flex items-center justify-between w-full px-4 py-1.5 border-b bg-white dark:bg-gray-900 dark:text-white transition-colors duration-200" style={isMobile ? { display: "none" } : { borderBottomColor: 'var(--line)' }}>
+            <header className="group relative flex items-center justify-between w-full px-4 py-1.5 border-b bg-white dark:bg-gray-900 dark:text-white transition-colors duration-200" style={isMobile ? { display: "none" } : { borderBottomColor: 'var(--line)', minHeight: useLeftRail ? "44px" : undefined }}>
                 {/* LEFT SECTION: View Switcher, Days, Hours, Slot Duration — only shown in top-toolbar mode */}
                 <div className="weekly-header-controls flex items-center gap-4" style={{ zIndex: 1, display: useLeftRail ? "none" : undefined, ...(showIntroHints ? { opacity: 1 } : {}) }}>
                     {/* Quick-settings button (top mode only) */}
@@ -6206,7 +6207,7 @@ export default function WeeklyView() {
                 </div>
 
                 {/* CENTER SECTION: Week/Year, Goal, Focus Mode - Reveal on Hover */}
-                <div className="flex items-center justify-center gap-6 absolute left-1/2 transform -translate-x-1/2 z-0 transition-all duration-300 group-hover:opacity-20 group-hover:blur-[2px]">
+                <div className={`flex items-center justify-center gap-6 absolute left-1/2 transform -translate-x-1/2 z-0 transition-all duration-300 ${useLeftRail ? "" : "group-hover:opacity-20 group-hover:blur-[2px]"}`}>
                     {/* Week & Year */}
                     <div className="whitespace-nowrap flex items-center gap-2">
                         {/* Clickable Week & Year */}