core: added functionality for week format change

apps/web/src/dialogs/add-reminder-dialog.tsx

@@ -25,6 +25,7 @@ import dayjs from "dayjs";
 import { useEffect, useState } from "react";
 import { db } from "../common/db";
 import { useStore } from "../stores/reminder-store";
+import { useStore as useSettingStore } from "../stores/setting-store";
 import { showToast } from "../utils/toast";
 import { useIsUserPremium } from "../hooks/use-is-user-premium";
 import { Pro } from "../components/icons";
@@ -56,7 +57,9 @@ const RecurringModes = {
   DAY: "day"
 } as const;
 
-const WEEK_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+let WEEK_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const WEEK_DAYS_MON = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+
 const modes = [
   {
     id: Modes.ONCE,
@@ -116,6 +119,7 @@ export default function AddReminderDialog(props: AddReminderDialogProps) {
   const [title, setTitle] = useState<string>();
   const [description, setDescription] = useState<string>();
   const refresh = useStore((state) => state.refresh);
+  const weekFromat = useSettingStore((state) => state.weekFormat);
   const isUserPremium = useIsUserPremium();
 
   useEffect(() => {
@@ -142,6 +146,10 @@ export default function AddReminderDialog(props: AddReminderDialogProps) {
     setDescription(note.headline);
   }, [noteId]);
 
+  useEffect(() => {
+    if (weekFromat === "Mon") WEEK_DAYS = WEEK_DAYS_MON;
+  }, [weekFromat]);
+
   const repeatsDaily =
     (selectedDays.length === 7 && recurringMode === RecurringModes.WEEK) ||
     (selectedDays.length === 31 && recurringMode === RecurringModes.MONTH) ||

apps/web/src/dialogs/settings/behaviour-settings.ts

@@ -99,6 +99,27 @@ export const BehaviourSettings: SettingsGroup[] = [
             ]
           }
         ]
+      },
+      {
+        key: "week-format",
+        title: "Week format",
+        description:
+          "This will set first day of the week for weekly reminders.",
+        keywords: [],
+        onStateChange: (listener) =>
+          useSettingStore.subscribe((s) => s.weekFormat, listener),
+        components: [
+          {
+            type: "dropdown",
+            onSelectionChanged: (value) =>
+              useSettingStore.getState().setWeekFormat(value),
+            selectedOption: () => useSettingStore.getState().weekFormat,
+            options: [
+              { value: "Sun", title: "Sunday" },
+              { value: "Mon", title: "Monday" }
+            ]
+          }
+        ]
       }
     ]
   },

apps/web/src/stores/setting-store.js

@@ -49,6 +49,8 @@ class SettingStore extends BaseStore {
   /** @type {number} */
   trashCleanupInterval = 7;
   homepage = Config.get("homepage", 0);
+  /**@type {"Sun" | "Mon"} */
+  weekFormat = null;
   /**
    * @type {DesktopIntegrationSettings | undefined}
    */
@@ -59,6 +61,7 @@ class SettingStore extends BaseStore {
     this.set({
       dateFormat: db.settings.getDateFormat(),
       timeFormat: db.settings.getTimeFormat(),
+      weekFormat: db.settings.getWeekFormat(),
       titleFormat: db.settings.getTitleFormat(),
       trashCleanupInterval: db.settings.getTrashCleanupInterval(),
       desktopIntegrationSettings:
@@ -79,6 +82,11 @@ class SettingStore extends BaseStore {
     this.set({ timeFormat });
   };
 
+  setWeekFormat = async (weekFormat) => {
+    await db.settings.setWeekFormat(weekFormat);
+    this.set({ weekFormat });
+  };
+
   setTitleFormat = async (titleFormat) => {
     await db.settings.setTitleFormat(titleFormat);
     this.set({ titleFormat });

packages/core/src/api/settings.js

@@ -188,6 +188,18 @@ class Settings {
     this._settings.dateFormat = format;
     await this._saveSettings();
   }
+  /**
+   *
+   * @returns {"Sun" | "Mon"}
+   */
+  getWeekFormat() {
+    return this._settings.weekFromat || "Sun";
+  }
+
+  async setWeekFormat(format) {
+    this._settings.weekFromat = format;
+    await this._saveSettings();
+  }
   /**
    *
    * @returns {"12-hour" | "24-hour"}