feat: per-view settings for hour format, sub-hours, weather, checkboxes

Add viewSettings JSON field to User model storing per-view overrides.
Settings like hour label format, sub-hour labels, weather, and task
checkboxes can now be set per view (simple/calendar/list/kanban) or
globally. A clickable badge next to each setting shows "All" (global)
or the current view name (per-view). Click to toggle scope.

Also fixes hourLabelFormat not actually being applied to time column
rendering (was hardcoded, now uses effective per-view value).

v1.49.0

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.48.3",
+  "version": "1.49.0",
   "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": {

prisma/schema.prisma

@@ -105,6 +105,7 @@ model User {
   quoteSourceUrls          String[]              @default([])
   quoteLanguages           String[]              @default(["en", "de"])
   kanbanStages             String?
+  viewSettings             Json?
   accounts                 Account[]
   cachedCalendarEvents     CachedCalendarEvent[]
   calendarConnections      CalendarConnection[]

src/app/api/user/profile/route.ts

@@ -101,6 +101,7 @@ export async function GET(request: NextRequest) {
             weatherLat: true,
             weatherLon: true,
             weatherLocation: true,
+            viewSettings: true,
             createdAt: true
         }
     });
@@ -144,7 +145,7 @@ export async function PATCH(request: NextRequest) {
             showTaskCheckboxes, dayHeaderGap,
             showCompletedTasks, showLines, startDayOffset, weekdayFormat, weekdayCase, customWeekdayNames, quoteSourceUrls, quoteLanguages,
             kanbanStages, lightTheme, darkTheme, notificationsEnabled, mobileFontScale,
-            weatherEnabled, weatherLat, weatherLon, weatherLocation
+            weatherEnabled, weatherLat, weatherLon, weatherLocation, viewSettings
         } = body;
 
         const updateData: any = {
@@ -234,6 +235,7 @@ export async function PATCH(request: NextRequest) {
             ...(weatherLat !== undefined && { weatherLat: weatherLat !== null ? parseFloat(weatherLat) : null }),
             ...(weatherLon !== undefined && { weatherLon: weatherLon !== null ? parseFloat(weatherLon) : null }),
             ...(weatherLocation !== undefined && { weatherLocation }),
+            ...(viewSettings !== undefined && { viewSettings }),
         };
         if (password && password.trim() !== "") {
             updateData.passwordHash = await bcrypt.hash(password, 10);
@@ -332,6 +334,7 @@ export async function PATCH(request: NextRequest) {
                 weatherLat: true,
                 weatherLon: true,
                 weatherLocation: true,
+                viewSettings: true,
             }
         });
 

src/components/WeeklyView.tsx

@@ -1950,6 +1950,72 @@ export default function WeeklyView() {
         slotIdx?: number;
     } | null>(null);
     const [viewStyle, setViewStyle] = useState<ViewStyle>("simple");
+
+    // Per-view settings: overrides that apply only to a specific view
+    type PerViewOverrides = { hourLabelFormat?: "short" | "full"; showSubHourSlots?: boolean; weatherEnabled?: boolean; showTaskCheckboxes?: boolean };
+    const PER_VIEW_KEYS = ["hourLabelFormat", "showSubHourSlots", "weatherEnabled", "showTaskCheckboxes"] as const;
+    const [viewSettings, setViewSettings] = useState<Record<string, PerViewOverrides>>({});
+
+    const getEffective = <K extends keyof PerViewOverrides>(key: K, globalVal: PerViewOverrides[K]): PerViewOverrides[K] => {
+        const vs = viewSettings[viewStyle];
+        if (vs && vs[key] !== undefined) return vs[key] as PerViewOverrides[K];
+        return globalVal;
+    };
+    const isPerView = (key: keyof PerViewOverrides): boolean => {
+        const vs = viewSettings[viewStyle];
+        return !!(vs && vs[key] !== undefined);
+    };
+    const saveViewSetting = async <K extends keyof PerViewOverrides>(key: K, value: PerViewOverrides[K], perView: boolean) => {
+        const updated = { ...viewSettings };
+        if (perView) {
+            updated[viewStyle] = { ...(updated[viewStyle] || {}), [key]: value };
+        } else {
+            // Remove per-view overrides for this key from ALL views and set globally
+            for (const v of Object.keys(updated)) {
+                if (updated[v] && updated[v][key] !== undefined) {
+                    const { [key]: _, ...rest } = updated[v] as any;
+                    updated[v] = rest;
+                }
+            }
+        }
+        setViewSettings(updated);
+        // Save to DB
+        try {
+            await fetch("/api/user/profile", {
+                method: "PATCH",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ viewSettings: updated }),
+            });
+        } catch (e) { console.error("Failed to save view settings:", e); }
+    };
+    const togglePerView = async (key: keyof PerViewOverrides, globalVal: any) => {
+        if (isPerView(key)) {
+            // Remove per-view override (revert to global)
+            const updated = { ...viewSettings };
+            if (updated[viewStyle]) {
+                const { [key]: _, ...rest } = updated[viewStyle] as any;
+                updated[viewStyle] = rest;
+            }
+            setViewSettings(updated);
+            try {
+                await fetch("/api/user/profile", {
+                    method: "PATCH",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ viewSettings: updated }),
+                });
+            } catch (e) { console.error("Failed to save view settings:", e); }
+        } else {
+            // Set per-view override to current global value
+            saveViewSetting(key, globalVal, true);
+        }
+    };
+
+    // Effective per-view values (override if set for current view, else global)
+    const effectiveHourLabelFormat = getEffective("hourLabelFormat", hourLabelFormat);
+    const effectiveShowSubHourSlots = getEffective("showSubHourSlots", showSubHourSlots);
+    const effectiveWeatherEnabled = getEffective("weatherEnabled", profile.weatherEnabled);
+    const effectiveShowTaskCheckboxes = getEffective("showTaskCheckboxes", profile.showTaskCheckboxes);
+
     const defaultKanbanStages: KanbanStage[] = [
         { id: "backlog", name: "Backlog", color: "#94a3b8" },
         { id: "todo", name: "To Do", color: "#3b82f6" },
@@ -2132,6 +2198,7 @@ export default function WeeklyView() {
                     if (profileData.hourLabelFormat) setHourLabelFormat(profileData.hourLabelFormat);
                     if (profileData.showSubHourSlots !== undefined) setShowSubHourSlots(profileData.showSubHourSlots);
                     if (profileData.allDayPosition) setAllDayPosition(profileData.allDayPosition);
+                    if (profileData.viewSettings) setViewSettings(profileData.viewSettings);
                 }
             }
         } catch (err) {
@@ -3010,6 +3077,7 @@ export default function WeeklyView() {
                         setShowSubHourSlots(data.user.showSubHourSlots);
                     if (data.user.allDayPosition)
                         setAllDayPosition(data.user.allDayPosition as "above" | "below");
+                    if (data.user.viewSettings) setViewSettings(data.user.viewSettings);
                     if (data.user.headlineFont) setHeadlineFont(data.user.headlineFont);
                     if (data.user.headlineFontSize)
                         setHeadlineFontSize(data.user.headlineFontSize);
@@ -6599,7 +6667,7 @@ export default function WeeklyView() {
                                 const hour = getHourFromSlot(slot);
                                 const minutes = slot.split(":")[1];
                                 const isHourStart = minutes === "00";
-                                if (!isHourStart && !showSubHourSlots) return (
+                                if (!isHourStart && !effectiveShowSubHourSlots) return (
                                     <div
                                         key={slot}
                                         className="time-slot-label"
@@ -6614,8 +6682,8 @@ export default function WeeklyView() {
                                         onClick={isHourStart ? () => jumpToHour(hour) : undefined}
                                         title={isHourStart ? `Jump to ${hour}:00` : undefined}
                                     >
-                                        {(isHourStart || showSubHourSlots) && (
+                                        {(isHourStart || effectiveShowSubHourSlots) && (
-                                            <span>{formatHour(hour, parseInt(minutes), (isHourStart ? 'short' : 'full') as "short" | "full", timeFormat)}</span>
+                                            <span>{formatHour(hour, parseInt(minutes), (isHourStart ? effectiveHourLabelFormat : 'full') as "short" | "full", timeFormat)}</span>
                                         )}
                                     </div>
                                 );
@@ -6868,7 +6936,7 @@ export default function WeeklyView() {
                                                     deleteSubTask={deleteSubTask}
                                                     onSetEditingTaskId={setEditingTaskId}
                                                     workingHoursStart={workingHoursStart}
-                                                    showTaskCheckboxes={profile.showTaskCheckboxes}
+                                                    showTaskCheckboxes={effectiveShowTaskCheckboxes}
                                                     projects={projects}
                                                     onProjectAssign={assignProject}
                                                     kanbanStages={kanbanStages}
@@ -6945,7 +7013,7 @@ export default function WeeklyView() {
                                                     onDrop={handleSlotDrop}
                                                 >
                                                     {/* Weather indicator for hour-start slots */}
-                                                    {isHourStart && profile.weatherEnabled && (() => {
+                                                    {isHourStart && effectiveWeatherEnabled && (() => {
                                                         const h = parseInt(slot.split(":")[0]);
                                                         const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}T${String(h).padStart(2, "0")}:00`;
                                                         const w = weatherData[dateStr];
@@ -7167,7 +7235,7 @@ export default function WeeklyView() {
                                                     onUpdateSubTask={updateSubTask}
                                                     editingTaskId={editingTaskId}
                                                     onSetEditingTaskId={setEditingTaskId}
-                                                    showTaskCheckboxes={profile.showTaskCheckboxes}
+                                                    showTaskCheckboxes={effectiveShowTaskCheckboxes}
                                                     projects={projects}
                                                     onProjectAssign={assignProject}
                                                     kanbanStages={kanbanStages}
@@ -7863,7 +7931,7 @@ export default function WeeklyView() {
                                                                                     onUpdateSubTask={updateSubTask}
                                                                                     editingTaskId={editingTaskId}
                                                                                     onSetEditingTaskId={setEditingTaskId}
-                                                                                    showTaskCheckboxes={profile.showTaskCheckboxes}
+                                                                                    showTaskCheckboxes={effectiveShowTaskCheckboxes}
                                                                                     projects={projects}
                                                                                     onProjectAssign={assignProject}
                                                                                     kanbanStages={kanbanStages}
@@ -7934,7 +8002,7 @@ export default function WeeklyView() {
                                                                             onUpdateSubTask={updateSubTask}
                                                                             editingTaskId={editingTaskId}
                                                                             onSetEditingTaskId={setEditingTaskId}
-                                                                            showTaskCheckboxes={profile.showTaskCheckboxes}
+                                                                            showTaskCheckboxes={effectiveShowTaskCheckboxes}
                                                                             projects={projects}
                                                                             onProjectAssign={assignProject}
                                                                             kanbanStages={kanbanStages}
@@ -8443,6 +8511,12 @@ export default function WeeklyView() {
                             onStartHourChange: (h: number) => { setStartHour(h); saveSetting("startHour", h); },
                             onEndHourChange: (h: number) => { setEndHour(h); saveSetting("endHour", h); },
                         }}
+                        perView={{
+                            isPerView: isPerView as any,
+                            togglePerView: togglePerView as any,
+                            saveViewSetting: saveViewSetting as any,
+                            viewLabel: viewStyle === "simple" ? (language === "de" ? "Einfach" : "Simple") : viewStyle === "calendar" ? (language === "de" ? "Kalender" : "Calendar") : viewStyle === "list" ? (language === "de" ? "Liste" : "List") : "Kanban",
+                        }}
                     />
                 )
             }
@@ -9978,6 +10052,12 @@ interface SettingsSidebarProps {
         onStartHourChange: (h: number) => void;
         onEndHourChange: (h: number) => void;
     };
+    perView: {
+        isPerView: (key: string) => boolean;
+        togglePerView: (key: string, globalVal: any) => void;
+        saveViewSetting: (key: string, value: any, perView: boolean) => void;
+        viewLabel: string;
+    };
 }
 // Notes Sidebar Component
 interface NotesSidebarProps {
@@ -10202,7 +10282,33 @@ function SettingsSidebar({
     setProfile,
     isMobile: isMobileSidebar,
     mobileActions,
+    perView,
 }: SettingsSidebarProps) {
+    // Per-view badge: shows which view a setting applies to, click to toggle
+    const PerViewBadge = ({ settingKey, globalVal }: { settingKey: string; globalVal: any }) => {
+        const isPV = perView.isPerView(settingKey);
+        return (
+            <button
+                onClick={() => perView.togglePerView(settingKey, globalVal)}
+                title={isPV ? (profile.language === "de" ? `Nur für ${perView.viewLabel} — klicken für alle Ansichten` : `Only for ${perView.viewLabel} — click for all views`) : (profile.language === "de" ? `Alle Ansichten — klicken für nur ${perView.viewLabel}` : `All views — click for ${perView.viewLabel} only`)}
+                style={{
+                    fontSize: "0.55rem",
+                    padding: "1px 5px",
+                    borderRadius: "8px",
+                    border: isPV ? "1px solid #6366f1" : "1px solid #d1d5db",
+                    background: isPV ? "#eef2ff" : "transparent",
+                    color: isPV ? "#6366f1" : "#9ca3af",
+                    cursor: "pointer",
+                    fontWeight: 600,
+                    whiteSpace: "nowrap" as const,
+                    marginLeft: "4px",
+                }}
+            >
+                {isPV ? perView.viewLabel : (profile.language === "de" ? "Alle" : "All")}
+            </button>
+        );
+    };
+
     const [activeTab, setActiveTab] = useState<
         "calendar" | "general" | "account" | "styling" | "motivation" | "about" | "localisation"
     >(initialTab || "general");
@@ -10850,16 +10956,20 @@ function SettingsSidebar({
                                     type="checkbox"
                                     id="showTaskCheckboxes"
                                     checked={profile.showTaskCheckboxes || false}
-                                    onChange={(e) =>
+                                    onChange={(e) => {
-                                        setProfile({ ...profile, showTaskCheckboxes: e.target.checked })
+                                        setProfile({ ...profile, showTaskCheckboxes: e.target.checked });
-                                    }
+                                        if (perView.isPerView("showTaskCheckboxes")) {
+                                            perView.saveViewSetting("showTaskCheckboxes", e.target.checked, true);
+                                        }
+                                    }}
                                     style={{ width: "16px", height: "16px" }}
                                 />
                                 <label
                                     htmlFor="showTaskCheckboxes"
-                                    style={{ fontSize: "0.9rem", fontWeight: 600 }}
+                                    style={{ fontSize: "0.9rem", fontWeight: 600, display: "flex", alignItems: "center" }}
                                 >
                                     {t.showTaskCheckboxes}
+                                    <PerViewBadge settingKey="showTaskCheckboxes" globalVal={profile.showTaskCheckboxes} />
                                 </label>
                             </div>
                             <div
@@ -11068,20 +11178,26 @@ function SettingsSidebar({
                                     <div style={{ marginTop: "4px" }}>
                                         <label
                                             style={{
-                                                display: "block",
+                                                display: "flex",
+                                                alignItems: "center",
                                                 fontSize: "0.9rem",
                                                 fontWeight: 600,
                                                 marginBottom: "4px",
                                             }}
                                         >
                                             {t.hourLabelFormat}
+                                            <PerViewBadge settingKey="hourLabelFormat" globalVal={hourLabelFormat} />
                                         </label>
                                         <select
                                             value={hourLabelFormat}
                                             onChange={(e) => {
                                                 const fmt = e.target.value as "short" | "full";
                                                 setHourLabelFormat(fmt);
-                                                saveSetting("hourLabelFormat", fmt);
+                                                if (perView.isPerView("hourLabelFormat")) {
+                                                    perView.saveViewSetting("hourLabelFormat", fmt, true);
+                                                } else {
+                                                    saveSetting("hourLabelFormat", fmt);
+                                                }
                                             }}
                                             className="weekly-input"
                                             style={{
@@ -11106,15 +11222,20 @@ function SettingsSidebar({
                                             checked={showSubHourSlots}
                                             onChange={(e) => {
                                                 setShowSubHourSlots(e.target.checked);
-                                                saveSetting("showSubHourSlots", e.target.checked);
+                                                if (perView.isPerView("showSubHourSlots")) {
+                                                    perView.saveViewSetting("showSubHourSlots", e.target.checked, true);
+                                                } else {
+                                                    saveSetting("showSubHourSlots", e.target.checked);
+                                                }
                                             }}
                                             style={{ width: "16px", height: "16px" }}
                                         />
                                         <label
                                             htmlFor="showSubHourSlots"
-                                            style={{ fontSize: "0.9rem", fontWeight: 600 }}
+                                            style={{ fontSize: "0.9rem", fontWeight: 600, display: "flex", alignItems: "center" }}
                                         >
                                             {t.showSubhourLabels}
+                                            <PerViewBadge settingKey="showSubHourSlots" globalVal={showSubHourSlots} />
                                         </label>
                                     </div>
                                 </div>
@@ -11245,11 +11366,18 @@ function SettingsSidebar({
                                         checked={profile.weatherEnabled || false}
                                         onChange={(e) => {
                                             setProfile({ ...profile, weatherEnabled: e.target.checked });
-                                            saveSetting("weatherEnabled", e.target.checked);
+                                            if (perView.isPerView("weatherEnabled")) {
+                                                perView.saveViewSetting("weatherEnabled", e.target.checked, true);
+                                            } else {
+                                                saveSetting("weatherEnabled", e.target.checked);
+                                            }
                                         }}
                                         style={{ width: "18px", height: "18px" }}
                                     />
-                                    <span style={{ fontSize: "0.85rem", fontWeight: 500 }}>{profile.language === "de" ? "Wetter anzeigen" : "Show weather"}</span>
+                                    <span style={{ fontSize: "0.85rem", fontWeight: 500, display: "flex", alignItems: "center" }}>
+                                        {profile.language === "de" ? "Wetter anzeigen" : "Show weather"}
+                                        <PerViewBadge settingKey="weatherEnabled" globalVal={profile.weatherEnabled} />
+                                    </span>
                                 </label>
                                 {profile.weatherEnabled && (
                                     <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>