feat: new note title format w/ prefs (#1629)

packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts

@@ -32,6 +32,13 @@ export enum PrefKey {
   MobileDoNotShowAgainUnsupportedEditors = 'mobileDoNotShowAgainUnsupportedEditors',
   MobileSelectedTagUuid = 'mobileSelectedTagUuid',
   MobileNotesHideEditorIcon = 'mobileHideEditorIcon',
+  NewNoteTitleFormat = 'newNoteTitleFormat',
+}
+
+export enum NewNoteTitleFormat {
+  CurrentDateAndTime = 'CurrentDateAndTime',
+  CurrentNoteCount = 'CurrentNoteCount',
+  Empty = 'Empty',
 }
 
 export type PrefValue = {
@@ -65,4 +72,5 @@ export type PrefValue = {
   [PrefKey.MobileDoNotShowAgainUnsupportedEditors]: boolean
   [PrefKey.MobileSelectedTagUuid]: string | undefined
   [PrefKey.MobileNotesHideEditorIcon]: boolean
+  [PrefKey.NewNoteTitleFormat]: NewNoteTitleFormat
 }

packages/web/src/javascripts/Components/Preferences/Panes/General/Defaults.tsx

@@ -7,6 +7,7 @@ import {
   ComponentMutator,
   SNComponent,
   StorageValueModes,
+  NewNoteTitleFormat,
 } from '@standardnotes/snjs'
 import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import { WebApplication } from '@/Application/Application'
@@ -61,6 +62,14 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
 
   const [spellcheck, setSpellcheck] = useState(() => application.getPreference(PrefKey.EditorSpellcheck, true))
 
+  const [newNoteTitleFormat, setNewNoteTitleFormat] = useState(() =>
+    application.getPreference(PrefKey.NewNoteTitleFormat, NewNoteTitleFormat.CurrentDateAndTime),
+  )
+  const handleNewNoteTitleFormatChange = (value: string) => {
+    setNewNoteTitleFormat(value as NewNoteTitleFormat)
+    application.setPreference(PrefKey.NewNoteTitleFormat, value as NewNoteTitleFormat)
+  }
+
   const [addNoteToParentFolders, setAddNoteToParentFolders] = useState(() =>
     application.getPreference(PrefKey.NoteAddToParentFolders, true),
   )
@@ -138,7 +147,7 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
         )}
         <div>
           <Subtitle>Default Note Type</Subtitle>
-          <Text>New notes will be created using this type.</Text>
+          <Text>New notes will be created using this type</Text>
           <div className="mt-2">
             <Dropdown
               id="def-editor-dropdown"
@@ -150,6 +159,33 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
           </div>
         </div>
         <HorizontalSeparator classes="my-4" />
+        <div>
+          <Subtitle>Default Note Title Format</Subtitle>
+          <Text>New notes will be created with a title in this format</Text>
+          <div className="mt-2">
+            <Dropdown
+              id="def-new-note-title-format"
+              label="Select the default note type"
+              items={[
+                {
+                  label: 'Current date and time',
+                  value: NewNoteTitleFormat.CurrentDateAndTime,
+                },
+                {
+                  label: 'Current note count',
+                  value: NewNoteTitleFormat.CurrentNoteCount,
+                },
+                {
+                  label: 'Empty',
+                  value: NewNoteTitleFormat.Empty,
+                },
+              ]}
+              value={newNoteTitleFormat}
+              onChange={handleNewNoteTitleFormatChange}
+            />
+          </div>
+        </div>
+        <HorizontalSeparator classes="my-4" />
         <div className="flex items-center justify-between">
           <div className="flex flex-col">
             <Subtitle>Spellcheck</Subtitle>

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

@@ -18,6 +18,7 @@ import {
   FileViewController,
   FileItem,
   WebAppEvent,
+  NewNoteTitleFormat,
 } from '@standardnotes/snjs'
 import { action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'
 import { WebApplication } from '../../Application/Application'
@@ -29,6 +30,7 @@ import { SearchOptionsController } from '../SearchOptionsController'
 import { SelectedItemsController } from '../SelectedItemsController'
 import { NotesController } from '../NotesController'
 import { NoteTagsController } from '../NoteTagsController'
+import { formatDateAndTimeForNote } from '@/Utils/DateUtils'
 
 const MinNoteCellHeight = 51.0
 const DefaultListNumNotes = 20
@@ -485,7 +487,19 @@ export class ItemListController extends AbstractViewController implements Intern
       await this.navigationController.selectHomeNavigationView()
     }
 
-    let title = `Note ${this.notes.length + 1}`
+    const titleFormat = this.application.getPreference(
+      PrefKey.NewNoteTitleFormat,
+      NewNoteTitleFormat.CurrentDateAndTime,
+    )
+
+    let title = formatDateAndTimeForNote(new Date())
+
+    if (titleFormat === NewNoteTitleFormat.CurrentNoteCount) {
+      title = `Note ${this.notes.length + 1}`
+    } else if (titleFormat === NewNoteTitleFormat.Empty) {
+      title = ''
+    }
+
     if (this.isFiltering) {
       title = this.noteFilterText
     }

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

@@ -11,3 +11,9 @@ export const formatDateForContextMenu = (date: Date | undefined) => {
 
   return `${date.toDateString()} ${date.toLocaleTimeString()}`
 }
+
+export const formatDateAndTimeForNote = (date: Date) => {
+  return `${date.toLocaleDateString(undefined, {
+    dateStyle: 'full',
+  })} ${date.toLocaleTimeString()}`
+}