Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-02-23 19:49:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #9182 from streetwriters/web/week-format

Browse Source 
web: add setting to change week format
This commit is contained in:
Abdullah Atta
2026-01-14 11:40:26 +05:00
committed by GitHub
parent 22a6271423 36b4d69c2d
commit 72ff45c722
13 changed files with 151 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
apps/mobile/app/screens/add-reminder/index.tsx
View File

@@ -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())}
/>

2
apps/mobile/app/screens/settings/components.tsx
View File

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

24
apps/mobile/app/screens/settings/picker/pickers.jsx
View File

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

9
apps/mobile/app/screens/settings/settings-data.tsx
View File

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

9
apps/mobile/app/stores/use-setting-store.ts
View File

@@ -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()
});
}
}));

14
apps/web/src/dialogs/add-reminder-dialog.tsx
View File

@@ -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("");

22
apps/web/src/dialogs/settings/behaviour-settings.ts
View File

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

9
apps/web/src/stores/setting-store.ts
View File

@@ -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 });

12
packages/core/src/collections/settings.ts
View File

@@ -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}`);
}

2
packages/core/src/types.ts
View File

@@ -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;

8
packages/intl/locale/en.po
View File

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

8
packages/intl/locale/pseudo-LOCALE.po
View File

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

5
packages/intl/src/strings.ts
View File

@@ -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`
};