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

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>