mobile: week format settings

apps/mobile/app/screens/add-reminder/index.tsx

@@ -42,9 +42,9 @@ import { DDS } from "../../services/device-detection";
 import { ToastManager } from "../../services/event-manager";
 import Navigation, { NavigationProps } from "../../services/navigation";
 import Notifications from "../../services/notifications";
-import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
 import { useRelationStore } from "../../stores/use-relation-store";
+import { useSettingStore } from "../../stores/use-setting-store";
 import { AppFontSize, defaultBorderRadius } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { getFormattedDate, useIsFeatureAvailable } from "@notesnook/common";
@@ -70,7 +70,8 @@ const RecurringModes = {
   Year: "year"
 };
 
-const WeekDays = new Array(7).fill(true);
+const WeekDays = [0, 1, 2, 3, 4, 5, 6];
+const WeekDaysMon = [1, 2, 3, 4, 5, 6, 0];
 const MonthDays = new Array(31).fill(true);
 const WeekDayNames = {
   0: "Sunday",
@@ -92,6 +93,7 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
   const { reminder, reference } = props.route.params;
   useNavigationFocus(props.navigation, { focusOnInit: true });
   const { colors, isDark } = useThemeColors();
+  const weekFormat = useSettingStore((state) => state.weekFormat);
   const [reminderMode, setReminderMode] = useState<Reminder["mode"]>(
     reminder?.mode || "once"
   );
@@ -151,7 +153,7 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
         const isSecondLast = index === selectedDays.length - 2;
         const joinWith = isSecondLast ? " & " : isLast ? "" : ", ";
         return recurringMode === RecurringModes.Week
-          ? WeekDayNames[day as keyof typeof WeekDayNames] + joinWith
+          ? strings.weekDayNames[day as keyof typeof WeekDayNames]() + joinWith
           : `${day}${nth(day)} ${joinWith}`;
       })
       .join("");
@@ -390,37 +392,39 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
                 recurringMode === RecurringModes.Year
                   ? null
                   : recurringMode === RecurringModes.Week
-                    ? WeekDays.map((item, index) => (
-                        <Button
-                          key={strings.weekDayNamesShort[
-                            index as keyof typeof strings.weekDayNamesShort
-                          ]()}
-                          title={strings.weekDayNamesShort[
-                            index as keyof typeof strings.weekDayNamesShort
-                          ]()}
-                          type={
-                            selectedDays.indexOf(index) > -1
-                              ? "selected"
-                              : "plain"
-                          }
-                          fontSize={AppFontSize.xs}
-                          style={{
-                            height: 40,
-                            borderRadius: 100,
-                            marginRight: 10
-                          }}
-                          onPress={() => {
-                            setSelectedDays((days) => {
-                              if (days.indexOf(index) > -1) {
-                                days.splice(days.indexOf(index), 1);
+                    ? (weekFormat === "Mon" ? WeekDaysMon : WeekDays).map(
+                        (item) => (
+                          <Button
+                            key={strings.weekDayNamesShort[
+                              item as keyof typeof strings.weekDayNamesShort
+                            ]()}
+                            title={strings.weekDayNamesShort[
+                              item as keyof typeof strings.weekDayNamesShort
+                            ]()}
+                            type={
+                              selectedDays.indexOf(item) > -1
+                                ? "selected"
+                                : "plain"
+                            }
+                            fontSize={AppFontSize.xs}
+                            style={{
+                              height: 40,
+                              borderRadius: 100,
+                              marginRight: 10
+                            }}
+                            onPress={() => {
+                              setSelectedDays((days) => {
+                                if (days.indexOf(item) > -1) {
+                                  days.splice(days.indexOf(item), 1);
+                                  return [...days];
+                                }
+                                days.push(item);
                                 return [...days];
-                              }
-                              days.push(index);
-                              return [...days];
-                            });
-                          }}
-                        />
-                      ))
+                              });
+                            }}
+                          />
+                        )
+                      )
                     : MonthDays.map((item, index) => (
                         <Button
                           key={index + "monthday"}
@@ -468,6 +472,7 @@ export default function AddReminder(props: NavigationProps<"AddReminder">) {
                 onConfirm={handleConfirm}
                 onCancel={hideDatePicker}
                 isDarkModeEnabled={isDark}
+                firstDayOfWeek={weekFormat === "Mon" ? 1 : 0}
                 is24Hour={db.settings.getTimeFormat() === "24-hour"}
                 date={date || new Date(Date.now())}
               />

apps/mobile/app/screens/settings/components.tsx

@@ -33,6 +33,7 @@ import {
   BackupWithAttachmentsReminderPicker,
   DateFormatPicker,
   DayFormatPicker,
+  WeekFormatPicker,
   FontPicker,
   HomePicker,
   SidebarTabPicker,
@@ -59,6 +60,7 @@ export const components: { [name: string]: ReactElement } = {
   "date-format-selector": <DateFormatPicker />,
   "time-format-selector": <TimeFormatPicker />,
   "day-format-selector": <DayFormatPicker />,
+  "week-format-selector": <WeekFormatPicker />,
   "theme-selector": <ThemeSelector />,
   "applock-timer": <ApplockTimerPicker />,
   autobackupsattachments: <BackupWithAttachmentsReminderPicker />,

apps/mobile/app/screens/settings/picker/pickers.jsx

@@ -38,6 +38,12 @@ const DayFormatFormats = {
   long: "dddd"
 };
 
+const WEEK_FORMATS = ["Sun", "Mon"];
+const WeekFormatNames = {
+  Sun: "Sunday",
+  Mon: "Monday"
+};
+
 export const FontPicker = createSettingsPicker({
   getValue: () => useSettingStore.getState().settings.defaultFontFamily,
   updateValue: (item) => {
@@ -176,6 +182,24 @@ export const DayFormatPicker = createSettingsPicker({
   isOptionAvailable: () => true
 });
 
+export const WeekFormatPicker = createSettingsPicker({
+  getValue: () => db.settings.getWeekFormat(),
+  updateValue: (item) => {
+    db.settings.setWeekFormat(item);
+    useSettingStore.setState({
+      weekFormat: item
+    });
+  },
+  formatValue: (item) => {
+    return `${WeekFormatNames[item]}`;
+  },
+  getItemKey: (item) => item,
+  options: WEEK_FORMATS,
+  compareValue: (current, item) => current === item,
+  isFeatureAvailable: () => true,
+  isOptionAvailable: () => true
+});
+
 const TimeFormats = {
   "12-hour": "hh:mm A",
   "24-hour": "HH:mm"

apps/mobile/app/screens/settings/settings-data.tsx

@@ -724,6 +724,14 @@ export const settingsGroups: SettingSection[] = [
             component: "day-format-selector",
             icon: "calendar-today"
           },
+          {
+            id: "week-format",
+            name: strings.weekFormat(),
+            description: strings.weekFormatDesc(),
+            type: "component",
+            component: "week-format-selector",
+            icon: "calendar"
+          },
           {
             id: "time-format",
             name: strings.timeFormat(),
@@ -819,6 +827,7 @@ export const settingsGroups: SettingSection[] = [
             name: strings.defaultFontFamily(),
             description: strings.defaultFontFamilyDesc(),
             type: "component",
+            icon: "format-font",
             property: "defaultFontFamily",
             component: "font-selector"
           },

apps/mobile/app/stores/use-setting-store.ts

@@ -24,9 +24,9 @@ import { initialWindowMetrics } from "react-native-safe-area-context";
 import { FileType } from "react-native-scoped-storage";
 import { create } from "zustand";
 import { ThemeDark, ThemeLight, ThemeDefinition } from "@notesnook/theme";
-import { EDITOR_LINE_HEIGHT } from "../utils/constants";
-import { DayFormat, Reminder } from "@notesnook/core";
+import { DayFormat, WeekFormat, Reminder } from "@notesnook/core";
 import { db } from "../common/database";
+import { EDITOR_LINE_HEIGHT } from "../utils/constants";
 export const HostIds = [
   "API_HOST",
   "AUTH_HOST",
@@ -138,6 +138,7 @@ export interface SettingStore {
   timeFormat: string;
   dateFormat: string;
   dayFormat: DayFormat;
+  weekFormat: WeekFormat;
   dbPassword?: string;
   isOldAppLock: () => boolean;
   initialUrl: string | null;
@@ -229,6 +230,7 @@ export const useSettingStore = create<SettingStore>((set, get) => ({
   timeFormat: "12-hour",
   dateFormat: "DD-MM-YYYY",
   dayFormat: "short",
+  weekFormat: "Sun",
   setAppDidEnterBackgroundForAction: (value: boolean) => {
     set({
       appDidEnterBackgroundForAction: value
@@ -250,7 +252,8 @@ export const useSettingStore = create<SettingStore>((set, get) => ({
     set({
       dayFormat: db.settings.getDayFormat(),
       timeFormat: db.settings.getTimeFormat(),
-      dateFormat: db.settings?.getTimeFormat()
+      dateFormat: db.settings?.getTimeFormat(),
+      weekFormat: db.settings.getWeekFormat()
     });
   }
 }));