mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: move ViewStyle selection from header to settings menu

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

- Positioned ViewStyle above localization setting

- Removed redundant dropdown from settings

- Cleaned up header whitespace
This commit is contained in:
mARTin 2026-02-23 22:08:57 +01:00
parent 138f5d8030
commit ce58c3673e
1 changed files with 55 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/components/WeeklyView.tsx
View File

@ -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",