feat: daily notes

packages/models/src/Domain/Syncable/Tag/Tag.ts

@@ -28,6 +28,10 @@ export class SNTag extends DecryptedItem<TagContent> implements TagContentSpecia
     this.preferences = this.payload.content.preferences
   }
 
+  get isDailyEntry(): boolean {
+    return this.preferences?.entryMode === 'daily'
+  }
+
   get noteReferences(): ContentReference[] {
     const references = this.payload.references
     return references.filter((ref) => ref.content_type === ContentType.Note)

packages/models/src/Domain/Syncable/Tag/TagPreferences.ts

@@ -16,4 +16,5 @@ export interface TagPreferences {
   newNoteTitleFormat?: NewNoteTitleFormat
   customNoteTitleFormat?: string
   editorIdentifier?: FeatureIdentifier | string
+  entryMode?: 'normal' | 'daily'
 }

packages/services/src/Domain/Item/ItemManagerInterface.ts

@@ -11,6 +11,7 @@ import {
   DeletedItemInterface,
   ItemContent,
   PredicateInterface,
+  DecryptedPayload,
 } from '@standardnotes/models'
 import { AbstractService } from '../Service/AbstractService'
 
@@ -93,6 +94,7 @@ export interface ItemManagerInterface extends AbstractService {
   >(
     contentType: ContentType,
     content?: C,
+    override?: Partial<DecryptedPayload<C>>,
   ): I
 
   /**

packages/services/src/Domain/Mutator/MutatorClientInterface.ts

@@ -3,6 +3,7 @@ import {
   BackupFile,
   DecryptedItemInterface,
   DecryptedItemMutator,
+  DecryptedPayload,
   EncryptedItemInterface,
   FileItem,
   ItemContent,
@@ -117,6 +118,7 @@ export interface MutatorClientInterface {
   >(
     contentType: ContentType,
     content?: C,
+    override?: Partial<DecryptedPayload<C>>,
   ): I
 
   /**

packages/snjs/lib/Client/NoteViewController.spec.ts

@@ -28,6 +28,7 @@ describe('note view controller', () => {
     expect(application.mutator.createTemplateItem).toHaveBeenCalledWith(
       ContentType.Note,
       expect.objectContaining({ noteType: NoteType.Plain }),
+      expect.anything(),
     )
   })
 })

packages/snjs/lib/Client/NoteViewController.ts

@@ -34,22 +34,20 @@ export class NoteViewController implements ItemViewControllerInterface {
   private removeStreamObserver?: () => void
   public isTemplateNote = false
   private saveTimeout?: ReturnType<typeof setTimeout>
-  private defaultTitle: string | undefined
   private defaultTagUuid: UuidString | undefined
   private defaultTag?: SNTag
   public runtimeId = `${Math.random()}`
 
   constructor(
     private application: SNApplication,
     item?: SNNote,
-    templateNoteOptions?: TemplateNoteViewControllerOptions,
+    public templateNoteOptions?: TemplateNoteViewControllerOptions,
   ) {
     if (item) {
       this.item = item
     }
 
     if (templateNoteOptions) {
-      this.defaultTitle = templateNoteOptions.title
       this.defaultTagUuid = templateNoteOptions.tag
     }
 
@@ -80,13 +78,19 @@ export class NoteViewController implements ItemViewControllerInterface {
         ? this.application.componentManager.componentWithIdentifier(editorIdentifier)
         : undefined
 
-      const note = this.application.mutator.createTemplateItem<NoteContent, SNNote>(ContentType.Note, {
-        text: '',
-        title: this.defaultTitle || '',
-        noteType: defaultEditor?.noteType || NoteType.Plain,
-        editorIdentifier: editorIdentifier,
-        references: [],
-      })
+      const note = this.application.mutator.createTemplateItem<NoteContent, SNNote>(
+        ContentType.Note,
+        {
+          text: '',
+          title: this.templateNoteOptions?.title || '',
+          noteType: defaultEditor?.noteType || NoteType.Plain,
+          editorIdentifier: editorIdentifier,
+          references: [],
+        },
+        {
+          created_at: this.templateNoteOptions?.createdAt || new Date(),
+        },
+      )
 
       this.isTemplateNote = true
       this.item = note
@@ -109,6 +113,10 @@ export class NoteViewController implements ItemViewControllerInterface {
   }
 
   private streamItems() {
+    if (this.dealloced) {
+      return
+    }
+
     this.removeStreamObserver = this.application.streamItems<SNNote>(
       ContentType.Note,
       ({ changed, inserted, source }) => {

packages/snjs/lib/Client/TemplateNoteViewControllerOptions.ts

@@ -3,4 +3,8 @@ import { UuidString } from '@Lib/Types/UuidString'
 export type TemplateNoteViewControllerOptions = {
   title?: string
   tag?: UuidString
+  createdAt?: Date
+  autofocusBehavior?: TemplateNoteViewAutofocusBehavior
 }
+
+export type TemplateNoteViewAutofocusBehavior = 'title' | 'editor'

packages/snjs/lib/Client/Types.ts

@@ -3,6 +3,6 @@ export const STRING_SAVING_WHILE_DOCUMENT_HIDDEN =
 export const STRING_INVALID_NOTE =
   "The note you are attempting to save can not be found or has been deleted. Changes you make will not be synced. Please copy this note's text and start a new note."
 export const STRING_ELLIPSES = '...'
-export const NOTE_PREVIEW_CHAR_LIMIT = 80
+export const NOTE_PREVIEW_CHAR_LIMIT = 160
 export const SAVE_TIMEOUT_DEBOUNCE = 350
 export const SAVE_TIMEOUT_NO_DEBOUNCE = 100

packages/snjs/lib/Client/index.ts

@@ -3,3 +3,4 @@ export * from './NoteViewController'
 export * from './FileViewController'
 export * from './ItemGroupController'
 export * from './ReactNativeToWebEvent'
+export * from './TemplateNoteViewControllerOptions'

packages/snjs/lib/Services/Items/ItemManager.ts

@@ -805,12 +805,13 @@ export class ItemManager
   public createTemplateItem<
     C extends Models.ItemContent = Models.ItemContent,
     I extends Models.DecryptedItemInterface<C> = Models.DecryptedItemInterface<C>,
-  >(contentType: ContentType, content?: C): I {
+  >(contentType: ContentType, content?: C, override?: Partial<Models.DecryptedPayload<C>>): I {
     const payload = new Models.DecryptedPayload<C>({
       uuid: UuidGenerator.GenerateUuid(),
       content_type: contentType,
       content: Models.FillItemContent<C>(content || {}),
       ...Models.PayloadTimestampDefaults(),
+      ...override,
     })
     const item = Models.CreateDecryptedItemFromPayload<C, I>(payload)
     return item

packages/snjs/lib/Services/Mutator/MutatorService.ts

@@ -29,6 +29,7 @@ import {
   CreateEncryptedBackupFileContextPayload,
   DecryptedItemInterface,
   DecryptedItemMutator,
+  DecryptedPayload,
   DecryptedPayloadInterface,
   EncryptedItemInterface,
   FileItem,
@@ -221,8 +222,8 @@ export class MutatorService extends AbstractService implements MutatorClientInte
   public createTemplateItem<
     C extends ItemContent = ItemContent,
     I extends DecryptedItemInterface<C> = DecryptedItemInterface<C>,
-  >(contentType: ContentType, content?: C): I {
-    return this.itemManager.createTemplateItem(contentType, content)
+  >(contentType: ContentType, content?: C, override?: Partial<DecryptedPayload<C>>): I {
+    return this.itemManager.createTemplateItem(contentType, content, override)
   }
 
   public async setItemNeedsSync(

packages/styles/src/Styles/_colors.scss

@@ -15,6 +15,7 @@
 
   --sn-stylekit-danger-color: #cc2128;
   --sn-stylekit-danger-contrast-color: #ffffff;
+  --sn-stylekit-danger-light-color: #f9e4e5;
 
   --sn-stylekit-shadow-color: #c8c8c8;
   --sn-stylekit-background-color: #ffffff;

packages/web/src/javascripts/Components/ContentListView/Calendar/Calendar.tsx

@@ -0,0 +1,68 @@
+import { useState, useEffect, FunctionComponent, useMemo } from 'react'
+import { CalendarActivity } from './CalendarActivity'
+import CalendarDay from './CalendarDay'
+import { CalendarDays, CalendarDaysLeap, CalendarDaysOfTheWeek } from './Constants'
+import { createActivityRecord, dateToDateOnlyString, isLeapYear, getStartDayOfMonth } from './CalendarUtilts'
+import { isDateInSameDay } from '@/Utils/DateUtils'
+
+type Props = {
+  activities: CalendarActivity[]
+  onDateSelect: (date: Date) => void
+  startDate: Date
+  className?: string
+  selectedDay?: Date
+}
+
+const Calendar: FunctionComponent<Props> = ({ activities, startDate, onDateSelect, selectedDay, className }) => {
+  const activityMap = useMemo(() => createActivityRecord(activities), [activities])
+
+  const [date, setDate] = useState(startDate || new Date())
+  const [month, setMonth] = useState(date.getMonth())
+  const [year, setYear] = useState(date.getFullYear())
+  const [startDay, setStartDay] = useState(getStartDayOfMonth(date))
+
+  useEffect(() => {
+    setDate(startDate)
+    setMonth(startDate.getMonth())
+    setYear(startDate.getFullYear())
+    setStartDay(getStartDayOfMonth(startDate))
+  }, [startDate])
+
+  const today = new Date()
+  const days = isLeapYear(year) ? CalendarDaysLeap : CalendarDays
+
+  return (
+    <div className={`w-300 ${className} border-left border-right border border-neutral`}>
+      <div className="mr-auto ml-auto w-70">
+        <div className="flex w-full flex-wrap">
+          {CalendarDaysOfTheWeek.map((d) => (
+            <div className={'flex h-8 w-[14.2%] items-center justify-center'} key={d}>
+              {d}
+            </div>
+          ))}
+        </div>
+        <div className="flex w-full flex-wrap">
+          {Array(days[month] + (startDay - 1))
+            .fill(null)
+            .map((_, index) => {
+              const d = index - (startDay - 2)
+              const date = new Date(year, month, d)
+              const activities = activityMap[dateToDateOnlyString(date)] || []
+              return (
+                <CalendarDay
+                  key={index}
+                  day={d}
+                  isToday={isDateInSameDay(date, today)}
+                  activities={activities}
+                  onClick={() => onDateSelect(date)}
+                  hasPendingEntry={selectedDay && isDateInSameDay(selectedDay, date)}
+                />
+              )
+            })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Calendar

packages/web/src/javascripts/Components/ContentListView/Calendar/CalendarActivity.ts

@@ -0,0 +1,7 @@
+import { ListableContentItem } from '@/Components/ContentListView/Types/ListableContentItem'
+export type CalendarActivityType = 'created' | 'edited'
+
+export type CalendarActivity = {
+  date: Date
+  item: ListableContentItem
+}

packages/web/src/javascripts/Components/ContentListView/Calendar/CalendarDay.tsx

@@ -0,0 +1,36 @@
+import { FunctionComponent } from 'react'
+import { CalendarActivity } from './CalendarActivity'
+
+type Props = {
+  day: number
+  activities: CalendarActivity[]
+  isToday: boolean
+  onClick: () => void
+  hasPendingEntry?: boolean
+}
+
+const CalendarDay: FunctionComponent<Props> = ({ day, activities = [], hasPendingEntry, isToday, onClick }) => {
+  const hasActivity = day > 0 && activities.length > 0
+  const todayClassNames = 'bg-danger text-danger-contrast font-bold'
+  const hasActivityClassNames = 'bg-danger-light text-danger font-bold'
+  const defaultClassNames = 'bg-transparent hover:bg-contrast'
+  const hasPendingEntryNames = 'bg-contrast'
+
+  return (
+    <div className="h-7 w-[14.2%] p-0.5">
+      <div
+        className={`${
+          !hasActivity && !isToday ? defaultClassNames : ''
+        } flex h-full w-full cursor-pointer items-center justify-center rounded ${
+          isToday ? todayClassNames : hasActivity ? hasActivityClassNames : ''
+        } ${hasPendingEntry ? hasPendingEntryNames : ''}`}
+        key={day}
+        onClick={onClick}
+      >
+        {day > 0 ? day : ''}
+      </div>
+    </div>
+  )
+}
+
+export default CalendarDay

packages/web/src/javascripts/Components/ContentListView/Calendar/CalendarMonth.tsx

@@ -0,0 +1,4 @@
+export type CalendarMonth = {
+  /** Any date in the month */
+  date: Date
+}

packages/web/src/javascripts/Components/ContentListView/Calendar/CalendarUtils.spec.ts

@@ -0,0 +1,27 @@
+import { addMonths, areDatesInSameMonth } from '@/Utils/DateUtils'
+import { CalendarMonth } from './CalendarMonth'
+import { insertMonthsWithTarget } from './CalendarUtilts'
+
+describe('calendar utils', () => {
+  it('insertMonthsWithTarget in past', () => {
+    const today = new Date()
+    const months: CalendarMonth[] = [{ date: addMonths(today, -1) }, { date: today }, { date: addMonths(today, 1) }]
+    const targetMonth = addMonths(today, -12)
+
+    const result = insertMonthsWithTarget(months, targetMonth)
+
+    expect(result).toHaveLength(14)
+    expect(areDatesInSameMonth(result[0].date, targetMonth))
+  })
+
+  it('insertMonthsWithTarget in future', () => {
+    const today = new Date()
+    const months: CalendarMonth[] = [{ date: addMonths(today, -1) }, { date: today }, { date: addMonths(today, 1) }]
+    const targetMonth = addMonths(today, 12)
+
+    const result = insertMonthsWithTarget(months, targetMonth)
+
+    expect(result).toHaveLength(14)
+    expect(areDatesInSameMonth(result[result.length - 1].date, targetMonth))
+  })
+})