fix: Update dayjs configuration after modifying the start day of the week

src/Agenda3/components/modals/SettingsModal/GeneralSettingsForm.tsx

@@ -8,7 +8,7 @@ const GeneralSettingsForm = () => {
  const { t, i18n } = useTranslation()
  const { settings, setSettings } = useSettings()
 
- const onChange = (key: string, value: string | boolean | undefined | Filter[] | string[]) => {
+ const onChange = (key: string, value: number | string | boolean | undefined | Filter[] | string[]) => {
  setSettings(key, value)
  }
  // 当切换语言时，更新 i18n 的语言
@@ -49,16 +49,16 @@ const GeneralSettingsForm = () => {
  <Select
  placeholder="Select Start of Week"
  className="w-[300px]"
- value={settings.general?.startOfWeek || '1'}
+ value={settings.general?.startOfWeek}
  onChange={(e) => onChange('general.startOfWeek', e)}
  options={[
- { label: 'Sun', value: '0' },
- { label: 'Mon', value: '1' },
- { label: 'Tue', value: '2' },
- { label: 'Wed', value: '3' },
- { label: 'Thu', value: '4' },
- { label: 'Fri', value: '5' },
- { label: 'Sat', value: '6' },
+ { label: 'Sun', value: 0 },
+ { label: 'Mon', value: 1 },
+ { label: 'Tue', value: 2 },
+ { label: 'Wed', value: 3 },
+ { label: 'Thu', value: 4 },
+ { label: 'Fri', value: 5 },
+ { label: 'Sat', value: 6 },
  ]}
  />
  </div>

src/Agenda3/hooks/useSettings.ts

@@ -1,15 +1,19 @@
 import { useLocalStorageValue } from '@react-hookz/web'
 import { useAtom } from 'jotai'
-import { clone, set } from 'lodash-es'
+import { clone, set, merge } from 'lodash-es'
 
-import { type Settings, settingsAtom, type Filter } from '@/Agenda3/models/settings'
+import { type Settings, settingsAtom, type Filter, DEFAULT_SETTINGS } from '@/Agenda3/models/settings'
+import initializeDayjs from '@/register/dayjs'
 
 const isPlugin = import.meta.env.VITE_MODE === 'plugin'
 const useSettings = () => {
  const [settings, setAtomSettings] = useAtom(settingsAtom)
  const { set: setLocalStorage, value: valueLocalStorage } = useLocalStorageValue<Settings>('settings')
 
- const setSettings = (key: string, value: string | boolean | undefined | Filter[] | string[]) => {
+ const setSettings = (key: string, value: number | string | boolean | undefined | Filter[] | string[]) => {
+ if (key === 'general.startOfWeek') {
+ initializeDayjs(Number(value))
+ }
  setAtomSettings((oldSettings) => {
  const newSettings = set(clone(oldSettings), key, value)
  if (isPlugin) {
@@ -27,13 +31,12 @@ const useSettings = () => {
  }
  // initialize settings
  const initializeSettings = () => {
- const base: Settings = { isInitialized: true }
- if (isPlugin) {
- const _settings = (logseq.settings as unknown as Settings) ?? {}
- setAtomSettings(_settings ? { ..._settings, isInitialized: true } : base)
- } else {
- setAtomSettings(valueLocalStorage ? { ...valueLocalStorage, isInitialized: true } : base)
+ const getNewSettings = (userSettings?: Settings) => {
+ return merge({}, DEFAULT_SETTINGS, userSettings, { isInitialized: true })
  }
+ const userSettings = isPlugin ? (logseq.settings as unknown as Settings) : valueLocalStorage
+ initializeDayjs(userSettings?.general?.startOfWeek ?? DEFAULT_SETTINGS.general.startOfWeek)
+ setAtomSettings(getNewSettings(userSettings))
  }
  return {
  settings,

src/Agenda3/index.tsx

@@ -7,7 +7,6 @@ import useAgendaEntities from '@/Agenda3/hooks/useAgendaEntities'
 import usePages from '@/Agenda3/hooks/usePages'
 import { appAtom } from '@/Agenda3/models/app'
 import { logseqAtom } from '@/Agenda3/models/logseq'
-import initializeDayjs from '@/register/dayjs'
 import { cn } from '@/util/util'
 
 import MultipleView from './components/MainArea'
@@ -30,7 +29,6 @@ const Dashboard = () => {
  const [connectionErrorModal, setConnectionErrorModal] = useState(false)
 
  const loadData = useCallback(() => {
- initializeDayjs(1)
  refreshEntities().catch((error) => {
  console.error('retrieve tasks failed', error)
  if (import.meta.env.VITE_MODE === 'web') {
@@ -72,7 +70,9 @@ const Dashboard = () => {
  return (
  <div
  className={cn(
- "flex h-screen w-screen bg-gray-100 before:pointer-events-none before:absolute before:h-[180px] before:w-[240px] before:bg-gradient-conic before:from-sky-200 before:via-blue-200 before:blur-2xl before:transition-all before:content-[''] before:dark:from-sky-900 before:dark:via-[#0141ff] before:dark:opacity-40",
+ `flex h-screen w-screen bg-gray-100 before:pointer-events-none before:absolute before:h-[180px] before:w-[240px]
+ before:bg-gradient-conic before:from-sky-200 before:via-blue-200 before:blur-2xl before:transition-all
+ before:content-[''] before:dark:from-sky-900 before:dark:via-[#0141ff] before:dark:opacity-40`,
  {
  'pt-[30px]': import.meta.env.VITE_MODE === 'plugin',
  },

src/Agenda3/models/settings.ts

@@ -6,7 +6,7 @@ export type Settings = {
  general?: {
  useJournalDayAsSchedule?: boolean
  language?: Language
- startOfWeek?: string
+ startOfWeek?: number
  }
  ics?: {
  repo?: string
@@ -23,7 +23,12 @@ export type Settings = {
  objective?: boolean
  }
 }
-export const settingsAtom = atom<Settings>({ isInitialized: false, viewOptions: { showTimeLog: false } })
+export const DEFAULT_SETTINGS = {
+ isInitialized: false,
+ general: { language: 'en', startOfWeek: 1 },
+ viewOptions: { showTimeLog: false },
+} satisfies Settings
+export const settingsAtom = atom<Settings>(DEFAULT_SETTINGS)
 
 export type Filter = {
  id: string

src/register/dayjs.ts

@@ -22,7 +22,7 @@ dayjs.extend(quarterOfYear)
 dayjs.extend(isoWeek)
 dayjs.extend(weekOfYear) // Use plugin
 
-const initializeDayjs = (weekStartDay: 0 | 1) => {
+const initializeDayjs = (weekStartDay: number) => {
  // dayjs.locale('zh-cn')
  dayjs.updateLocale('en', {
  weekStart: weekStartDay,