From ce58c3673ed98ddaa9aaf237e80df15511e364c2 Mon Sep 17 00:00:00 2001
From: mARTin <mail@martin-bierschenk.de>
Date: Mon, 23 Feb 2026 22:08:57 +0100
Subject: [PATCH] feat: move ViewStyle selection from header to settings menu

- Relocated Simple/Calendar/List toggles to General settings tab

- Positioned ViewStyle above localization setting

- Removed redundant dropdown from settings

- Cleaned up header whitespace
---
 src/components/WeeklyView.tsx | 124 +++++++++++++++-------------------
 1 file changed, 55 insertions(+), 69 deletions(-)

diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx
index e635191..3c84773 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -3266,45 +3266,7 @@ export default function WeeklyView() {
                         </div>
                     )}
 
-                    {/* View Style Toggles */}
-                    <div
-                        className="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded p-1"
-                        title="View Style"
-                    >
-                        <button
-                            onClick={() => {
-                                setViewStyle("simple");
-                                setShowTimeGrid(true);
-                                saveSetting("viewStyle", "simple");
-                                saveSetting("showTimeGrid", true);
-                            }}
-                            className={`px-2 py-0.5 text-xs rounded transition-colors ${showTimeGrid && viewStyle === "simple" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
-                        >
-                            Simple
-                        </button>
-                        <button
-                            onClick={() => {
-                                setViewStyle("calendar");
-                                setShowTimeGrid(true);
-                                saveSetting("viewStyle", "calendar");
-                                saveSetting("showTimeGrid", true);
-                            }}
-                            className={`px-2 py-0.5 text-xs rounded transition-colors ${showTimeGrid && viewStyle === "calendar" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
-                        >
-                            Calendar
-                        </button>
-                        <button
-                            onClick={() => {
-                                setViewStyle("list");
-                                setShowTimeGrid(false);
-                                saveSetting("viewStyle", "list");
-                                saveSetting("showTimeGrid", false);
-                            }}
-                            className={`px-2 py-0.5 text-xs rounded transition-colors ${!showTimeGrid && viewStyle === "list" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
-                        >
-                            List
-                        </button>
-                    </div>
+
                 </div>
 
                 {/* CENTER SECTION: Week/Year, Goal, Focus Mode - Reveal on Hover */}
@@ -7054,35 +7016,7 @@ function SettingsSidebar({
                                             <option value={120}>2 hours</option>
                                         </select>
                                     </div>
-                                    <div>
-                                        <label
-                                            style={{
-                                                display: "block",
-                                                fontSize: "0.9rem",
-                                                fontWeight: 600,
-                                                marginBottom: "4px",
-                                            }}
-                                        >
-                                            {t.viewStyle}
-                                        </label>
-                                        <select
-                                            value={viewStyle}
-                                            onChange={(e) =>
-                                                setViewStyle(e.target.value as ViewStyle)
-                                            }
-                                            className="weekly-input"
-                                            style={{
-                                                width: "100%",
-                                                padding: "8px",
-                                                border: "1px solid #ddd",
-                                                borderRadius: "4px",
-                                            }}
-                                        >
-                                            <option value="simple">{t.simpleView}</option>
-                                            <option value="calendar">{t.calendarView}</option>
-                                            <option value="list">{t.listView}</option>
-                                        </select>
-                                    </div>
+
 
                                     {/* Configurable Hours */}
                                     <div style={{ display: "flex", gap: "12px" }}>
@@ -7192,7 +7126,59 @@ function SettingsSidebar({
                             </div>
 
 
-                            <div style={{ marginTop: "12px" }}>
+                            <div style={{ marginTop: "16px" }}>
+                                <label
+                                    style={{
+                                        display: "block",
+                                        fontSize: "0.9rem",
+                                        fontWeight: 600,
+                                        marginBottom: "8px",
+                                    }}
+                                >
+                                    {t.viewStyle}
+                                </label>
+                                <div
+                                    className="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded p-1"
+                                    style={{ width: "fit-content" }}
+                                >
+                                    <button
+                                        onClick={() => {
+                                            setViewStyle("simple");
+                                            setShowTimeGrid(true);
+                                            saveSetting("viewStyle", "simple");
+                                            saveSetting("showTimeGrid", true);
+                                        }}
+                                        className={`px-4 py-2 text-sm rounded transition-colors ${showTimeGrid && viewStyle === "simple" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
+                                    >
+                                        {t.simpleView}
+                                    </button>
+                                    <button
+                                        onClick={() => {
+                                            setViewStyle("calendar");
+                                            setShowTimeGrid(true);
+                                            saveSetting("viewStyle", "calendar");
+                                            saveSetting("showTimeGrid", true);
+                                        }}
+                                        className={`px-4 py-2 text-sm rounded transition-colors ${showTimeGrid && viewStyle === "calendar" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
+                                    >
+                                        {t.calendarView}
+                                    </button>
+                                    <button
+                                        onClick={() => {
+                                            setViewStyle("list");
+                                            setShowTimeGrid(false);
+                                            saveSetting("viewStyle", "list");
+                                            saveSetting("showTimeGrid", false);
+                                        }}
+                                        className={`px-4 py-2 text-sm rounded transition-colors ${!showTimeGrid && viewStyle === "list" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
+                                    >
+                                        {t.listView}
+                                    </button>
+                                </div>
+                            </div>
+
+
+                            <div style={{ marginTop: "16px" }}>
                                 <label
                                     style={{
                                         display: "block",