web: add setting to change week format

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

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

@@ -25,6 +25,7 @@ import customParseFormat from "dayjs/plugin/customParseFormat";
 import { useRef, useState } from "react";
 import { db } from "../common/db";
 import { useStore } from "../stores/reminder-store";
+import { useStore as useSettingsStore } from "../stores/setting-store";
 import { showToast } from "../utils/toast";
 import { Calendar, Pro } from "../components/icons";
 import { usePersistentState } from "../hooks/use-persistent-state";
@@ -67,6 +68,8 @@ const RecurringModes = {
 } as const;
 
 const 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,
@@ -118,6 +121,8 @@ export const AddReminderDialog = DialogManager.register(
   function AddReminderDialog(props: AddReminderDialogProps) {
     const { reminder, note } = props;
 
+    const weekFormat = useSettingsStore((store) => store.weekFormat);
+    const weekDays = weekFormat === "Sun" ? WEEK_DAYS : WEEK_DAYS_MON;
     const [selectedDays, setSelectedDays] = useState<number[]>(
       reminder?.selectedDays ?? []
     );
@@ -348,7 +353,7 @@ export const AddReminderDialog = DialogManager.register(
                           : "paragraph"
                       }}
                     >
-                      {mode.id === "week" ? WEEK_DAYS[i] : day}
+                      {mode.id === "week" ? weekDays[i] : day}
                     </Button>
                   ))}
                 </Box>
@@ -497,7 +502,7 @@ export const AddReminderDialog = DialogManager.register(
               : strings.reminderRepeatStrings.repeats(
                   1,
                   recurringMode,
-                  getSelectedDaysText(selectedDays, recurringMode),
+                  getSelectedDaysText(selectedDays, recurringMode, weekDays),
                   date.format(timeFormat())
                 )}
           </Text>
@@ -531,7 +536,8 @@ function setDateOnly(str: string, date: dayjs.Dayjs) {
 
 function getSelectedDaysText(
   selectedDays: number[],
-  recurringMode: ValueOf<typeof RecurringModes>
+  recurringMode: ValueOf<typeof RecurringModes>,
+  weekDays: typeof WEEK_DAYS | typeof WEEK_DAYS_MON
 ) {
   const text = selectedDays
     .sort((a, b) => a - b)
@@ -540,7 +546,7 @@ function getSelectedDaysText(
       const isSecondLast = index === selectedDays.length - 2;
       const joinWith = isSecondLast ? " & " : isLast ? "" : ", ";
       return recurringMode === RecurringModes.WEEK
-        ? WEEK_DAYS[day] + joinWith
+        ? weekDays[day] + joinWith
         : `${day}${nth(day)} ${joinWith}`;
     })
     .join("");

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

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { DATE_FORMATS } from "@notesnook/core";
+import { DATE_FORMATS, WeekFormat } from "@notesnook/core";
 import { SettingsGroup } from "./types";
 import {
   ImageCompressionOptions,
@@ -161,6 +161,26 @@ export const BehaviourSettings: SettingsGroup[] = [
             ]
           }
         ]
+      },
+      {
+        key: "week-format",
+        title: strings.weekFormat(),
+        description: strings.weekFormatDesc(),
+        keywords: [],
+        onStateChange: (listener) =>
+          useSettingStore.subscribe((s) => s.weekFormat, listener),
+        components: [
+          {
+            type: "dropdown",
+            onSelectionChanged: (value) =>
+              useSettingStore.getState().setWeekFormat(value as WeekFormat),
+            selectedOption: () => useSettingStore.getState().weekFormat,
+            options: [
+              { value: "Sun", title: "Sunday" },
+              { value: "Mon", title: "Monday" }
+            ]
+          }
+        ]
       }
     ]
   },

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

@@ -23,7 +23,7 @@ import { desktop } from "../common/desktop-bridge";
 import createStore from "../common/store";
 import Config from "../utils/config";
 import BaseStore from "./index";
-import { TimeFormat, DayFormat } from "@notesnook/core";
+import { TimeFormat, DayFormat, WeekFormat } from "@notesnook/core";
 import { Profile, TrashCleanupInterval } from "@notesnook/core";
 import { showToast } from "../utils/toast";
 import { ConfirmDialog } from "../dialogs/confirm";
@@ -69,6 +69,7 @@ class SettingStore extends BaseStore<SettingStore> {
   dateFormat = "DD-MM-YYYY";
   timeFormat: TimeFormat = "12-hour";
   dayFormat: DayFormat = "short";
+  weekFormat: WeekFormat = "Sun";
   titleFormat = "Note $date$ $time$";
   profile?: Profile;
 
@@ -96,6 +97,7 @@ class SettingStore extends BaseStore<SettingStore> {
     this.set({
       dateFormat: db.settings.getDateFormat(),
       timeFormat: db.settings.getTimeFormat(),
+      weekFormat: db.settings.getWeekFormat(),
       dayFormat: db.settings.getDayFormat(),
       titleFormat: db.settings.getTitleFormat(),
       trashCleanupInterval: db.settings.getTrashCleanupInterval(),
@@ -128,6 +130,11 @@ class SettingStore extends BaseStore<SettingStore> {
     this.set({ dayFormat });
   };
 
+  setWeekFormat = async (weekFormat: WeekFormat) => {
+    await db.settings.setWeekFormat(weekFormat);
+    this.set({ weekFormat });
+  };
+
   setTitleFormat = async (titleFormat: string) => {
     await db.settings.setTitleFormat(titleFormat);
     this.set({ titleFormat });

packages/core/src/collections/settings.ts

@@ -31,7 +31,8 @@ import {
   ToolbarConfigPlatforms,
   TrashCleanupInterval,
   TimeFormat,
-  DayFormat
+  DayFormat,
+  WeekFormat
 } from "../types.js";
 import { ICollection } from "./collection.js";
 import { SQLCachedCollection } from "../database/sql-cached-collection.js";
@@ -56,6 +57,7 @@ const defaultSettings: SettingItemMap = {
   timeFormat: "12-hour",
   dayFormat: "short",
   dateFormat: "DD-MM-YYYY",
+  weekFormat: "Sun",
   titleFormat: "Note $date$ $time$",
   defaultNotebook: undefined,
   defaultTag: undefined,
@@ -214,6 +216,14 @@ export class Settings implements ICollection {
     return this.set("dayFormat", format);
   }
 
+  getWeekFormat() {
+    return this.get("weekFormat");
+  }
+
+  setWeekFormat(format: WeekFormat) {
+    return this.set("weekFormat", format);
+  }
+
   getSideBarOrder(section: SideBarSection) {
     return this.get(`sideBarOrder:${section}`);
   }

packages/core/src/types.ts

@@ -22,6 +22,7 @@ import { isCipher } from "./utils/index.js";
 
 export type TimeFormat = "12-hour" | "24-hour";
 export type DayFormat = "short" | "long";
+export type WeekFormat = "Sun" | "Mon";
 
 export type SortOptions = {
   sortBy:
@@ -474,6 +475,7 @@ export type SettingItemMap = {
   titleFormat: string;
   timeFormat: TimeFormat;
   dayFormat: DayFormat;
+  weekFormat: WeekFormat;
   dateFormat: string;
   defaultNotebook: string | undefined;
   defaultTag: string | undefined;

packages/intl/locale/en.po

@@ -1502,6 +1502,10 @@ msgstr "Choose how time is displayed in the app"
 msgid "Choose how you want to secure your notes locally."
 msgstr "Choose how you want to secure your notes locally."
 
+#: src/strings.ts:2625
+msgid "Choose what day to display as the first day of the week"
+msgstr "Choose what day to display as the first day of the week"
+
 #: src/strings.ts:1228
 msgid "Choose where to save your backups"
 msgstr "Choose where to save your backups"
@@ -7140,6 +7144,10 @@ msgstr "Wednesday"
 msgid "Week"
 msgstr "Week"
 
+#: src/strings.ts:2623
+msgid "Week format"
+msgstr "Week format"
+
 #: src/strings.ts:168
 #: src/strings.ts:1569
 msgid "Weekly"

packages/intl/locale/pseudo-LOCALE.po

@@ -1502,6 +1502,10 @@ msgstr ""
 msgid "Choose how you want to secure your notes locally."
 msgstr ""
 
+#: src/strings.ts:2625
+msgid "Choose what day to display as the first day of the week"
+msgstr ""
+
 #: src/strings.ts:1228
 msgid "Choose where to save your backups"
 msgstr ""
@@ -7090,6 +7094,10 @@ msgstr ""
 msgid "Week"
 msgstr ""
 
+#: src/strings.ts:2623
+msgid "Week format"
+msgstr ""
+
 #: src/strings.ts:168
 #: src/strings.ts:1569
 msgid "Weekly"

packages/intl/src/strings.ts

@@ -2619,5 +2619,8 @@ Use this if changes from other devices are not appearing on this device. This wi
   dayFormat: () => t`Day format`,
   dayFormatDesc: () => t`Choose how day is displayed in the app`,
   trialOnGoing: (trialExpiryDate: string) =>
-    t`Your free trial is on-going. Your subscription will start on ${trialExpiryDate}`
+    t`Your free trial is on-going. Your subscription will start on ${trialExpiryDate}`,
+  weekFormat: () => t`Week format`,
+  weekFormatDesc: () =>
+    t`Choose what day to display as the first day of the week`
 };