chore: fix issue with custom note title format

packages/web/package.json

@@ -66,7 +66,7 @@
     "circular-dependency-plugin": "^5.2.2",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "*",
-    "dayjs": "^1.11.7",
+    "dayjs": "^1.11.9",
     "dotenv": "^16.0.3",
     "eslint": "*",
     "eslint-config-prettier": "^8.9.0",

packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx

@@ -21,14 +21,8 @@ import { EditorOption, getDropdownItemsForAllEditors } from '@/Utils/DropdownIte
 import { classNames } from '@standardnotes/utils'
 import { NoteTitleFormatOptions } from './NoteTitleFormatOptions'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
-
+import { getDayjsFormattedString } from '@/Utils/GetDayjsFormattedString'
-import dayjs from 'dayjs'
+import { ErrorBoundary } from '@/Utils/ErrorBoundary'
-import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat'
-import dayjsUTC from 'dayjs/plugin/utc'
-import dayjsTimezone from 'dayjs/plugin/timezone'
-dayjs.extend(dayjsAdvancedFormat)
-dayjs.extend(dayjsUTC)
-dayjs.extend(dayjsTimezone)
 
 const PrefChangeDebounceTimeInMs = 25
 
@@ -42,6 +36,10 @@ type Props = {
   disabled?: boolean
 }
 
+function CustomNoteTitleFormatPreview({ format }: { format: string }) {
+  return <em>{getDayjsFormattedString(undefined, format)}</em>
+}
+
 const NewNotePreferences: FunctionComponent<Props> = ({
   application,
   selectedTag,
@@ -209,7 +207,9 @@ const NewNotePreferences: FunctionComponent<Props> = ({
           </div>
           <div className="mt-3 text-neutral">
             <span className="font-bold">Preview: </span>
-            <em>{dayjs().format(customNoteTitleFormat)}</em>
+            <ErrorBoundary>
+              <CustomNoteTitleFormatPreview format={customNoteTitleFormat} />
+            </ErrorBoundary>
           </div>
           <div className="mt-2 text-neutral">
             <a

packages/web/src/javascripts/Controllers/ItemList/ItemListController.ts

@@ -34,10 +34,6 @@ import { SelectedItemsController } from '../SelectedItemsController'
 import { NotesController } from '../NotesController/NotesController'
 import { formatDateAndTimeForNote } from '@/Utils/DateUtils'
 
-import dayjs from 'dayjs'
-import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat'
-dayjs.extend(dayjsAdvancedFormat)
-
 import { AbstractViewController } from '../Abstract/AbstractViewController'
 import { log, LoggingDomain } from '@/Logging'
 import { NoteViewController } from '@/Components/NoteView/Controller/NoteViewController'
@@ -45,6 +41,7 @@ import { FileViewController } from '@/Components/NoteView/Controller/FileViewCon
 import { TemplateNoteViewAutofocusBehavior } from '@/Components/NoteView/Controller/TemplateNoteViewControllerOptions'
 import { ItemsReloadSource } from './ItemsReloadSource'
 import { VaultDisplayServiceEvent } from '@standardnotes/ui-services'
+import { getDayjsFormattedString } from '@/Utils/GetDayjsFormattedString'
 
 const MinNoteCellHeight = 51.0
 const DefaultListNumNotes = 20
@@ -671,7 +668,12 @@ export class ItemListController extends AbstractViewController implements Intern
         this.navigationController.selected?.preferences?.customNoteTitleFormat ||
         this.application.getPreference(PrefKey.CustomNoteTitleFormat, PrefDefaults[PrefKey.CustomNoteTitleFormat])
 
-      return dayjs(createdAt).format(customFormat)
+      try {
+        return getDayjsFormattedString(createdAt, customFormat)
+      } catch (error) {
+        console.error(error)
+        return formatDateAndTimeForNote(createdAt || new Date())
+      }
     }
 
     if (titleFormat === NewNoteTitleFormat.Empty) {

packages/web/src/javascripts/Utils/GetDayjsFormattedString.ts

@@ -0,0 +1,18 @@
+import dayjs from 'dayjs'
+import AdvancedFormat from 'dayjs/plugin/advancedFormat'
+import IsoWeek from 'dayjs/plugin/isoWeek'
+import UTC from 'dayjs/plugin/utc'
+import Timezone from 'dayjs/plugin/timezone'
+import WeekYear from 'dayjs/plugin/weekYear'
+import WeekOfYear from 'dayjs/plugin/weekOfYear'
+
+dayjs.extend(AdvancedFormat)
+dayjs.extend(IsoWeek)
+dayjs.extend(UTC)
+dayjs.extend(Timezone)
+dayjs.extend(WeekYear)
+dayjs.extend(WeekOfYear)
+
+export function getDayjsFormattedString(date: Parameters<typeof dayjs>[0], format: string): string {
+  return dayjs(date).format(format)
+}