refactor: daily notes (#1901)

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

@@ -3,7 +3,7 @@ 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'
+import { areDatesInSameDay } from '@/Utils/DateUtils'
 
 type Props = {
   activities: CalendarActivity[]
@@ -29,10 +29,11 @@ const Calendar: FunctionComponent<Props> = ({ activities, startDate, onDateSelec
   }, [startDate])
 
   const today = new Date()
-  const days = isLeapYear(year) ? CalendarDaysLeap : CalendarDays
+  const dayBundle = isLeapYear(year) ? CalendarDaysLeap : CalendarDays
+  const days = Array(dayBundle[month] + (startDay - 1)).fill(null)
 
   return (
-    <div className={`w-300 ${className} border-left border-right border border-neutral`}>
+    <div className={`w-300 ${className} min-h-[210px]`}>
       <div className="mr-auto ml-auto w-70">
         <div className="flex w-full flex-wrap">
           {CalendarDaysOfTheWeek.map((d) => (
@@ -42,23 +43,24 @@ const Calendar: FunctionComponent<Props> = ({ activities, startDate, onDateSelec
           ))}
         </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)}
-                />
-              )
-            })}
+          {days.map((_, index) => {
+            const dayIndex = index - (startDay - 2)
+            const date = new Date(year, month, dayIndex)
+            const day = date.getDate()
+            const activities = activityMap[dateToDateOnlyString(date)] || []
+            const isTemplate = selectedDay && areDatesInSameDay(selectedDay, date)
+            const type = activities.length > 0 ? 'item' : isTemplate ? 'template' : 'empty'
+            return (
+              <CalendarDay
+                isLastMonth={dayIndex <= 0}
+                key={index}
+                day={day}
+                isToday={areDatesInSameDay(date, today)}
+                onClick={() => onDateSelect(date)}
+                type={type}
+              />
+            )
+          })}
         </div>
       </div>
     </div>

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

@@ -1,33 +1,37 @@
 import { FunctionComponent } from 'react'
-import { CalendarActivity } from './CalendarActivity'
 
 type Props = {
   day: number
-  activities: CalendarActivity[]
   isToday: boolean
   onClick: () => void
-  hasPendingEntry?: boolean
+  type: 'empty' | 'item' | 'template'
+  isLastMonth: 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'
+const CalendarDay: FunctionComponent<Props> = ({ day, type, isToday, onClick, isLastMonth }) => {
+  let classNames = ''
+  if (isToday) {
+    classNames += 'bg-danger text-danger-contrast font-bold'
+  } else if (isLastMonth) {
+    classNames += 'text-passive-3'
+  } else {
+    if (type === 'empty') {
+      classNames += 'bg-transparent hover:bg-contrast'
+    } else if (type === 'item') {
+      classNames += 'bg-danger-light text-danger font-bold'
+    } else {
+      classNames += '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 : ''}`}
+        className={`${classNames} flex h-full w-full cursor-pointer items-center justify-center rounded`}
         key={day}
         onClick={onClick}
       >
-        {day > 0 ? day : ''}
+        {day}
       </div>
     </div>
   )

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

@@ -1,43 +1,39 @@
-import { areDatesInSameMonth } from '@/Utils/DateUtils'
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import { areDatesInSameDay, areDatesInSameMonth } from '@/Utils/DateUtils'
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import Calendar from './Calendar'
 import { CalendarActivity, CalendarActivityType } from './CalendarActivity'
 import { CalendarMonth } from './CalendarMonth'
 import { CalendarMonths } from './Constants'
 import { insertMonths, insertMonthsWithTarget } from './CalendarUtilts'
+import { InfiniteScrollerInterface, InfinteScroller } from '../InfiniteScroller/InfiniteScroller'
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import { LoggingDomain, log } from '@/Logging'
+import { usePrevious } from './usePrevious'
+import { isMobileScreen } from '@/Utils'
 
 type Props = {
   activityType: CalendarActivityType
   activities: CalendarActivity[]
   onDateSelect: (date: Date) => void
-  selectedTemplateDay?: Date
-  selectedItemDay?: Date
+  selectedDay?: Date
+  selectedDayType?: 'item' | 'template'
+  className?: string
 }
 
 export type InfiniteCalendarInterface = {
-  changeMonth: (month: Date) => void
+  goToMonth: (month: Date) => void
 }
 
-const PageSize = 10
+const PageSize = 2
 
 const InfiniteCalendar = forwardRef<InfiniteCalendarInterface, Props>(
-  ({ activities, onDateSelect, selectedTemplateDay, selectedItemDay }: Props, ref) => {
-    const [date, setDate] = useState(new Date())
-    const [month, setMonth] = useState(date.getMonth())
-    const [year, setYear] = useState(date.getFullYear())
-
+  ({ activities, onDateSelect, selectedDay, className }: Props, ref) => {
     const [expanded, setExpanded] = useState(true)
-    const [scrollWidth, setScrollWidth] = useState(0)
+    const [restoreScrollAfterExpand, setRestoreScrollAfterExpand] = useState(false)
+    const scrollerRef = useRef<InfiniteScrollerInterface | null>(null)
+    const previousSelectedDay = usePrevious(selectedDay)
 
+    const [activeDate, setActiveDate] = useState(new Date())
     const today = new Date()
     const [months, setMonths] = useState<CalendarMonth[]>(() => {
       const base = [{ date: today }]
@@ -46,18 +42,6 @@ const InfiniteCalendar = forwardRef<InfiniteCalendarInterface, Props>(
       return base
     })
 
-    useImperativeHandle(ref, () => ({
-      changeMonth(date: Date) {
-        setDate(date)
-      },
-    }))
-
-    const [firstElement, setFirstElement] = useState<HTMLDivElement | null>(null)
-    const [lastElement, setLastElement] = useState<HTMLDivElement | null>(null)
-    const [didPaginateLeft, setDidPaginateLeft] = useState(false)
-    const [restoreScrollAfterExpand, setRestoreScrollAfterExpand] = useState(false)
-    const scrollArea = useRef<HTMLDivElement>(null)
-
     const hasMonthInList = useCallback(
       (date: Date): boolean => {
         for (const month of months) {
@@ -74,7 +58,38 @@ const InfiniteCalendar = forwardRef<InfiniteCalendarInterface, Props>(
       (date: Date): void => {
         setMonths(insertMonthsWithTarget(months, date))
       },
-      [months, setMonths],
+      [months],
+    )
+
+    const scrollToMonth = useCallback(
+      (date: Date) => {
+        const elementId = elementIdForMonth(date)
+        scrollerRef.current?.scrollToElementId(elementId)
+      },
+      [scrollerRef],
+    )
+
+    const goToMonth = useCallback(
+      (month: Date) => {
+        if (!hasMonthInList(month)) {
+          insertMonthInList(month)
+        }
+
+        log(LoggingDomain.DailyNotes, '[Calendar] Scrolling to month', month, 'from goToMonth')
+        setActiveDate(month)
+        scrollToMonth(month)
+      },
+      [hasMonthInList, insertMonthInList, scrollToMonth],
+    )
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        goToMonth(date: Date) {
+          goToMonth(date)
+        },
+      }),
+      [goToMonth],
     )
 
     const resetNumberOfCalendarsToBase = useCallback(
@@ -88,153 +103,63 @@ const InfiniteCalendar = forwardRef<InfiniteCalendarInterface, Props>(
     )
 
     useEffect(() => {
-      if (selectedTemplateDay) {
-        setDate(selectedTemplateDay)
+      if (selectedDay) {
+        if (previousSelectedDay && areDatesInSameDay(previousSelectedDay, selectedDay)) {
+          log(LoggingDomain.DailyNotes, '[Calendar] selectedDay has changed, but is same as previous', selectedDay)
+          return
+        }
+        log(LoggingDomain.DailyNotes, '[Calendar] selectedDay has changed, going to month:', selectedDay)
+        goToMonth(selectedDay)
       }
-    }, [selectedTemplateDay])
-
-    useEffect(() => {
-      if (selectedItemDay) {
-        setDate(selectedItemDay)
-      }
-    }, [selectedItemDay])
-
-    const scrollToMonth = useCallback((date: Date) => {
-      const elementId = elementIdForMonth(date)
-      const element = document.getElementById(elementId)
-      if (!element) {
-        return
-      }
-
-      scrollArea.current!.scrollLeft = element.offsetLeft + -60
-    }, [])
-
-    useLayoutEffect(() => {
-      setMonth(date.getMonth())
-      setYear(date.getFullYear())
-
-      if (!hasMonthInList(date)) {
-        insertMonthInList(date)
-      }
-
-      scrollToMonth(date)
-    }, [date, hasMonthInList, insertMonthInList, scrollToMonth])
+    }, [selectedDay, goToMonth, previousSelectedDay])
 
     useEffect(() => {
       if (!restoreScrollAfterExpand) {
         return
       }
 
-      if (scrollArea.current && expanded) {
-        scrollToMonth(date)
+      if (expanded) {
+        log(
+          LoggingDomain.DailyNotes,
+          '[Calendar] Scrolling to month',
+          activeDate,
+          'from restoreScrollAfterExpand useEffect',
+        )
+        scrollToMonth(activeDate)
         setRestoreScrollAfterExpand(false)
       }
-    }, [expanded, scrollToMonth, date, restoreScrollAfterExpand, setRestoreScrollAfterExpand])
-
-    useLayoutEffect(() => {
-      if (!scrollArea.current) {
-        return
-      }
-
-      if (didPaginateLeft) {
-        scrollArea.current.scrollLeft += scrollArea.current.scrollWidth - scrollWidth
-        setDidPaginateLeft(false)
-      }
-    }, [months, didPaginateLeft, scrollWidth])
+    }, [expanded, scrollToMonth, activeDate, restoreScrollAfterExpand, setRestoreScrollAfterExpand])
 
     const paginateLeft = useCallback(() => {
-      if (scrollArea.current) {
-        setScrollWidth(scrollArea.current.scrollWidth)
-      }
-
-      const copy = months.slice()
-      insertMonths(copy, 'front', PageSize)
-      setDidPaginateLeft(true)
-      setMonths(copy)
-    }, [months, setMonths])
+      log(LoggingDomain.DailyNotes, '[Calendar] paginateLeft')
+      setMonths((prevMonths) => {
+        const copy = prevMonths.slice()
+        insertMonths(copy, 'front', PageSize)
+        return copy
+      })
+    }, [setMonths])
 
     const paginateRight = useCallback(() => {
-      const copy = months.slice()
-      insertMonths(copy, 'end', PageSize)
-      setDidPaginateLeft(false)
-      setMonths(copy)
-    }, [months, setMonths])
+      log(LoggingDomain.DailyNotes, '[Calendar] paginateRight')
+      setMonths((prevMonths) => {
+        const copy = prevMonths.slice()
+        insertMonths(copy, 'end', PageSize)
+        return copy
+      })
+    }, [setMonths])
 
-    const updateCurrentMonth = useCallback(
-      (index: number) => {
-        const newMonth = months[index]
-        setMonth(newMonth.date.getMonth())
-        setYear(newMonth.date.getFullYear())
+    const onElementVisibility = useCallback(
+      (id: string) => {
+        const index = months.findIndex((candidate) => elementIdForMonth(candidate.date) === id)
+        if (index >= 0) {
+          const newMonth = months[index]
+          log(LoggingDomain.DailyNotes, '[Calendar] Month element did become visible, setting activeDate', newMonth)
+          setActiveDate(newMonth.date)
+        }
       },
-      [months, setMonth, setYear],
+      [months],
     )
 
-    const visibilityObserver = useMemo(
-      () =>
-        new IntersectionObserver(
-          (entries) => {
-            const visibleEntry = entries.find((entry) => entry.isIntersecting)
-            if (visibleEntry) {
-              const id = visibleEntry.target.id
-              const index = months.findIndex((candidate) => elementIdForMonth(candidate.date) === id)
-              updateCurrentMonth(index)
-            }
-          },
-          { threshold: 0.9 },
-        ),
-      [updateCurrentMonth, months],
-    )
-
-    const rightObserver = useMemo(
-      () =>
-        new IntersectionObserver(
-          (entries) => {
-            if (entries[0].isIntersecting) {
-              paginateRight()
-            }
-          },
-          { threshold: 0.5 },
-        ),
-      [paginateRight],
-    )
-
-    const leftObserver = useMemo(
-      () =>
-        new IntersectionObserver(
-          (entries) => {
-            if (entries[0].isIntersecting) {
-              paginateLeft()
-            }
-          },
-          { threshold: 1.0 },
-        ),
-      [paginateLeft],
-    )
-
-    useEffect(() => {
-      if (lastElement) {
-        rightObserver.observe(lastElement)
-      }
-
-      return () => {
-        if (lastElement) {
-          rightObserver.unobserve(lastElement)
-        }
-      }
-    }, [lastElement, rightObserver])
-
-    useEffect(() => {
-      if (firstElement) {
-        leftObserver.observe(firstElement)
-      }
-
-      return () => {
-        if (firstElement) {
-          leftObserver.unobserve(firstElement)
-        }
-      }
-    }, [firstElement, leftObserver])
-
     const toggleVisibility = useCallback(() => {
       setRestoreScrollAfterExpand(true)
 
@@ -254,48 +179,42 @@ const InfiniteCalendar = forwardRef<InfiniteCalendarInterface, Props>(
     )
 
     return (
-      <div className="w-full flex-shrink-0 border-b border-solid border-border">
+      <div className={'border-b border-solid border-border'}>
         <div
-          className="text-md flex cursor-pointer items-center justify-center py-2 px-4 text-center font-bold hover:bg-contrast"
           onClick={toggleVisibility}
+          className={classNames(
+            'text-md flex cursor-pointer items-center justify-center py-2 px-4',
+            'text-center font-bold hover:bg-contrast',
+          )}
         >
-          {CalendarMonths[month]} {year}
+          {CalendarMonths[activeDate.getMonth()]} {activeDate.getFullYear()}
         </div>
         {expanded && (
-          <div
-            style={{ scrollBehavior: 'smooth' }}
-            ref={scrollArea}
-            id="calendar-scroller"
-            className="flex w-full overflow-x-scroll pb-2 md:max-w-full"
+          <InfinteScroller
+            paginateFront={paginateLeft}
+            paginateEnd={paginateRight}
+            direction={'horizontal'}
+            onElementVisibility={onElementVisibility}
+            ref={scrollerRef}
+            className={className}
+            isMobileScreen={isMobileScreen()}
           >
-            {months.map((month, index) => {
-              const isFirst = index === 0
-              const isLast = index === months.length - 1
+            {months.map((month) => {
               const id = elementIdForMonth(month.date)
               return (
-                <div
-                  id={id}
-                  key={id}
-                  ref={(ref) => {
-                    isFirst ? setFirstElement(ref) : isLast ? setLastElement(ref) : null
-
-                    if (ref) {
-                      visibilityObserver.observe(ref)
-                    }
-                  }}
-                >
+                <div id={id} key={id}>
                   <Calendar
                     key={id}
                     className="mx-2"
                     activities={activities}
                     onDateSelect={handleDaySelection}
                     startDate={month.date}
-                    selectedDay={selectedTemplateDay}
+                    selectedDay={selectedDay}
                   />
                 </div>
               )
             })}
-          </div>
+          </InfinteScroller>
         )}
       </div>
     )

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

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react'
+
+export const usePrevious = <T>(value: T): T | undefined => {
+  const ref = useRef<T>()
+  useEffect(() => {
+    ref.current = value
+  })
+  return ref.current
+}

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

@@ -247,7 +247,7 @@ const ContentListView: FunctionComponent<Props> = ({
     <div
       id="items-column"
       className={classNames(
-        'sn-component section app-column flex h-screen flex-col pt-safe-top md:h-full',
+        'sn-component section app-column flex h-screen flex-col overflow-hidden pt-safe-top md:h-full',
         'xl:w-87.5 xsm-only:!w-full sm-only:!w-full',
         isTabletScreenSize && !isNotesListVisibleOnTablets
           ? 'pointer-coarse:md-only:!w-0 pointer-coarse:lg-only:!w-0'
@@ -256,7 +256,7 @@ const ContentListView: FunctionComponent<Props> = ({
       aria-label={'Notes & Files'}
       ref={itemsViewPanelRef}
     >
-      <ResponsivePaneContent paneId={AppPaneId.Items}>
+      <ResponsivePaneContent className="overflow-hidden" paneId={AppPaneId.Items}>
         <div id="items-title-bar" className="section-title-bar border-b border-solid border-border">
           <div id="items-title-bar-container">
             <input

packages/web/src/javascripts/Components/ContentListView/Daily/CreateDailySection.spec.ts

@@ -0,0 +1,9 @@
+import { createDailyItemsWithToday } from './CreateDailySections'
+
+describe('create daily sections', () => {
+  it('createDailyItemsWithToday', () => {
+    const result = createDailyItemsWithToday(10)
+
+    expect(result).toHaveLength(10)
+  })
+})

packages/web/src/javascripts/Components/ContentListView/Daily/CreateDailySections.ts

@@ -31,8 +31,9 @@ export const templateEntryForDate = (date: Date): DailyItemsDay => {
 }
 
 export function createDailyItemsWithToday(count: number): DailyItemsDay[] {
-  const today = templateEntryForDate(new Date())
-  return insertBlanks([today], 'end', count)
+  const items = [templateEntryForDate(new Date())]
+  insertBlanks(items, 'front', count / 2 - 1)
+  return insertBlanks(items, 'end', count / 2)
 }
 
 /**

packages/web/src/javascripts/Components/ContentListView/Daily/DailyContentList.tsx

@@ -1,10 +1,7 @@
 import { FunctionComponent, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
-import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import { ListableContentItem } from '../Types/ListableContentItem'
 import { ItemListController } from '@/Controllers/ItemList/ItemListController'
 import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
-import { ElementIds } from '@/Constants/ElementIDs'
-import { classNames } from '@/Utils/ConcatenateClassNames'
 import { useResponsiveAppPane } from '../../ResponsivePane/ResponsivePaneProvider'
 import { AppPaneId } from '../../ResponsivePane/AppPaneMetadata'
 import { createDailyItemsWithToday, createItemsByDateMapping, insertBlanks } from './CreateDailySections'
@@ -14,6 +11,9 @@ import { SNTag } from '@standardnotes/snjs'
 import { CalendarActivity } from '../Calendar/CalendarActivity'
 import { dateToDailyDayIdentifier } from './Utils'
 import InfiniteCalendar, { InfiniteCalendarInterface } from '../Calendar/InfiniteCalendar'
+import { InfiniteScrollerInterface, InfinteScroller } from '../InfiniteScroller/InfiniteScroller'
+import { LoggingDomain, log } from '@/Logging'
+import { isMobileScreen } from '@/Utils'
 
 type Props = {
   itemListController: ItemListController
@@ -36,12 +36,9 @@ const DailyContentList: FunctionComponent<Props> = ({
   const [needsSelectionReload, setNeedsSelectionReload] = useState(false)
   const [todayItem, setTodayItem] = useState<DailyItemsDay>()
   const [selectedDay, setSelectedDay] = useState<Date>()
-  const [lastElement, setLastElement] = useState<HTMLDivElement | null>(null)
-  const [firstElement, setFirstElement] = useState<HTMLDivElement | null>(null)
-  const [lastScrollHeight, setLastScrollHeight] = useState(0)
-  const [didPaginateTop, setDidPaginateTop] = useState(false)
-  const scrollArea = useRef<HTMLDivElement>(null)
   const calendarRef = useRef<InfiniteCalendarInterface | null>(null)
+  const [lastVisibleDay, setLastVisibleDay] = useState<DailyItemsDay>()
+  const scrollerRef = useRef<InfiniteScrollerInterface | null>(null)
 
   const [dailyItems, setDailyItems] = useState<DailyItemsDay[]>(() => {
     return createDailyItemsWithToday(PageSize)
@@ -57,6 +54,12 @@ const DailyContentList: FunctionComponent<Props> = ({
     setTodayItem(dailyItems.find((item) => item.isToday) as DailyItemsDay)
   }, [dailyItems])
 
+  useLayoutEffect(() => {
+    if (todayItem && scrollerRef.current) {
+      scrollerRef.current?.scrollToElementId(todayItem.id)
+    }
+  }, [todayItem, scrollerRef])
+
   const calendarActivities: CalendarActivity[] = useMemo(() => {
     return items.map((item) => {
       return {
@@ -67,108 +70,37 @@ const DailyContentList: FunctionComponent<Props> = ({
   }, [items])
 
   const paginateBottom = useCallback(() => {
-    const copy = dailyItems.slice()
-    insertBlanks(copy, 'end', PageSize)
-    setDailyItems(copy)
-  }, [dailyItems, setDailyItems])
+    log(LoggingDomain.DailyNotes, '[ContentList] paginateBottom')
+    setDailyItems((prev) => {
+      const copy = prev.slice()
+      insertBlanks(copy, 'end', PageSize)
+      return copy
+    })
+  }, [setDailyItems])
 
   const paginateTop = useCallback(() => {
-    if (scrollArea.current) {
-      setLastScrollHeight(scrollArea.current.scrollHeight)
-    }
-    const copy = dailyItems.slice()
-    insertBlanks(copy, 'front', PageSize)
-    setDidPaginateTop(true)
-    setDailyItems(copy)
-  }, [dailyItems, setDailyItems, setDidPaginateTop])
-
-  useLayoutEffect(() => {
-    if (!scrollArea.current) {
-      return
-    }
-
-    if (didPaginateTop) {
-      scrollArea.current.scrollTop += scrollArea.current.scrollHeight - lastScrollHeight
-      setDidPaginateTop(false)
-    }
-  }, [didPaginateTop, lastScrollHeight])
+    log(LoggingDomain.DailyNotes, '[ContentList] paginateTop')
+    setDailyItems((prev) => {
+      const copy = prev.slice()
+      insertBlanks(copy, 'front', PageSize)
+      return copy
+    })
+  }, [setDailyItems])
 
   const onListItemDidBecomeVisible = useCallback(
     (elementId: string) => {
       const dailyItem = dailyItems.find((candidate) => candidate.id === elementId)
-      if (dailyItem) {
-        calendarRef?.current?.changeMonth(dailyItem.date)
+      if (dailyItem && dailyItem !== lastVisibleDay) {
+        setLastVisibleDay(dailyItem)
+        log(LoggingDomain.DailyNotes, '[ContentList] Item did become visible for date', dailyItem.date)
+        calendarRef?.current?.goToMonth(dailyItem.date)
+      } else {
+        log(LoggingDomain.DailyNotes, '[ContentList] Ignoring duplicate day visibility')
       }
     },
-    [dailyItems],
+    [dailyItems, lastVisibleDay],
   )
 
-  const visibilityObserver = useMemo(
-    () =>
-      new IntersectionObserver(
-        (entries) => {
-          const visibleEntry = entries.find((entry) => entry.isIntersecting)
-          if (visibleEntry) {
-            onListItemDidBecomeVisible(visibleEntry.target.id)
-          }
-        },
-        { threshold: 0.9 },
-      ),
-    [onListItemDidBecomeVisible],
-  )
-
-  const bottomObserver = useMemo(
-    () =>
-      new IntersectionObserver(
-        (entries) => {
-          const first = entries[0]
-          if (first.isIntersecting) {
-            paginateBottom()
-          }
-        },
-        { threshold: 0.5 },
-      ),
-    [paginateBottom],
-  )
-
-  const topObserver = useMemo(
-    () =>
-      new IntersectionObserver(
-        (entries) => {
-          const first = entries[0]
-          if (first.isIntersecting) {
-            paginateTop()
-          }
-        },
-        { threshold: 0.5 },
-      ),
-    [paginateTop],
-  )
-
-  useEffect(() => {
-    if (lastElement) {
-      bottomObserver.observe(lastElement)
-    }
-
-    return () => {
-      if (lastElement) {
-        bottomObserver.unobserve(lastElement)
-      }
-    }
-  }, [lastElement, bottomObserver])
-
-  useEffect(() => {
-    if (firstElement) {
-      topObserver.observe(firstElement)
-    }
-
-    return () => {
-      if (firstElement) {
-        topObserver.unobserve(firstElement)
-      }
-    }
-  }, [firstElement, topObserver])
-
   const onClickItem = useCallback(
     async (day: DailyItemsDay, item: ListableContentItem, userTriggered: boolean) => {
       await onSelect(item, userTriggered)
@@ -239,29 +171,29 @@ const DailyContentList: FunctionComponent<Props> = ({
     [onClickItem, onClickTemplate, dailyItemForDate, itemsByDateMapping],
   )
 
+  const hasItemsOnSelectedDay = selectedDay && itemsByDateMapping[dateToDailyDayIdentifier(selectedDay)]?.length > 0
   return (
     <>
       <InfiniteCalendar
         activities={calendarActivities}
         activityType={'created'}
         onDateSelect={onCalendarSelect}
-        selectedTemplateDay={selectedDay}
-        selectedItemDay={selectedDay}
+        selectedDay={selectedDay}
+        selectedDayType={!selectedDay ? undefined : hasItemsOnSelectedDay ? 'item' : 'template'}
         ref={calendarRef}
+        className={'flex-column flex'}
       />
-      <div
-        className={classNames(
-          'infinite-scroll overflow-y-auto overflow-x-hidden focus:shadow-none focus:outline-none',
-          'md:max-h-full md:overflow-y-hidden md:hover:overflow-y-auto pointer-coarse:md:overflow-y-auto',
-          'md:hover:[overflow-y:_overlay]',
-        )}
-        ref={scrollArea}
-        id={ElementIds.ContentList}
-        tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+
+      <InfinteScroller
+        paginateFront={paginateTop}
+        paginateEnd={paginateBottom}
+        direction="vertical"
+        onElementVisibility={onListItemDidBecomeVisible}
+        className={'flex-1'}
+        ref={scrollerRef}
+        isMobileScreen={isMobileScreen()}
       >
-        {dailyItems.map((dailyItem, index) => {
-          const isFirst = index === 0
-          const isLast = index === dailyItems.length - 1
+        {dailyItems.map((dailyItem) => {
           const items = itemsByDateMapping[dailyItem.id]
           if (items) {
             return items.map((item) => (
@@ -275,12 +207,6 @@ const DailyContentList: FunctionComponent<Props> = ({
                 hidePreview={hideNotePreview}
                 hideTags={hideTags}
                 onClick={() => onClickItem(dailyItem, item, true)}
-                ref={(ref) => {
-                  isLast ? setLastElement(ref) : isFirst ? setFirstElement(ref) : null
-                  if (ref) {
-                    visibilityObserver.observe(ref)
-                  }
-                }}
               />
             ))
           } else {
@@ -291,17 +217,11 @@ const DailyContentList: FunctionComponent<Props> = ({
                 id={dailyItem.id}
                 key={dailyItem.dateKey}
                 onClick={() => onClickTemplate(dailyItem.date)}
-                ref={(ref) => {
-                  isLast ? setLastElement(ref) : isFirst ? setFirstElement(ref) : null
-                  if (ref) {
-                    visibilityObserver.observe(ref)
-                  }
-                }}
               />
             )
           }
         })}
-      </div>
+      </InfinteScroller>
     </>
   )
 }

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

@@ -166,12 +166,9 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
     void changePreferences({ hideEditorIcon: !preferences.hideEditorIcon })
   }, [preferences, changePreferences])
 
-  const setEntryMode = useCallback(
-    (mode: 'normal' | 'daily') => {
-      void changePreferences({ entryMode: mode })
-    },
-    [changePreferences],
-  )
+  const toggleEntryMode = useCallback(() => {
+    void changePreferences({ entryMode: isDailyEntry ? 'normal' : 'daily' })
+  }, [isDailyEntry, changePreferences])
 
   const TabButton: FunctionComponent<{
     label: string
@@ -211,7 +208,10 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
         <h1 className="sk-h3 m-0 text-sm font-semibold">Upgrade for per-tag preferences</h1>
       </div>
       <p className="col-start-1 col-end-3 m-0 mt-1 text-sm">
-        Create powerful workflows and organizational layouts with per-tag display preferences.
+        {DailyEntryModeEnabled &&
+          'Create powerful workflows and organizational layouts with per-tag display preferences and the all-new Daily Notebook feature.'}
+        {!DailyEntryModeEnabled &&
+          'Create powerful workflows and organizational layouts with per-tag display preferences.'}
       </p>
       <Button
         primary
@@ -235,7 +235,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
         {currentMode === 'tag' && <button onClick={resetTagPreferences}>Reset</button>}
       </div>
 
-      {controlsDisabled && <NoSubscriptionBanner />}
+      {!controlsDisabled && <NoSubscriptionBanner />}
 
       <MenuItemSeparator />
 
@@ -376,26 +376,17 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
       {currentMode === 'tag' && DailyEntryModeEnabled && (
         <>
           <MenuItemSeparator />
-          <div className="px-3 py-1 text-xs font-semibold uppercase text-text">Entry Mode</div>
-
           <MenuItem
             disabled={controlsDisabled}
-            className="py-2"
-            type={MenuItemType.RadioButton}
-            onClick={() => setEntryMode('normal')}
-            checked={!selectedTag.preferences?.entryMode || selectedTag.preferences?.entryMode === 'normal'}
-          >
-            <div className="ml-2 flex flex-grow items-center justify-between">Normal</div>
-          </MenuItem>
-
-          <MenuItem
-            disabled={controlsDisabled}
-            className="py-2"
-            type={MenuItemType.RadioButton}
-            onClick={() => setEntryMode('daily')}
+            type={MenuItemType.SwitchButton}
+            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
             checked={isDailyEntry}
+            onChange={toggleEntryMode}
           >
-            <div className="ml-2 flex flex-grow items-center justify-between">Daily</div>
+            <div className="flex flex-col pr-5">
+              <div className="text-xs font-semibold uppercase text-text">Daily Notebook</div>
+              <div className="mt-1">Capture new notes daily with a calendar-based experience</div>
+            </div>
           </MenuItem>
         </>
       )}

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

@@ -0,0 +1,209 @@
+import {
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import { LoggingDomain, log } from '@/Logging'
+
+type Props = {
+  children: ReactNode
+  paginateFront: () => void
+  paginateEnd: () => void
+  direction: 'horizontal' | 'vertical'
+  onElementVisibility?: (elementId: string) => void
+  className?: string
+  isMobileScreen?: boolean
+}
+
+export type InfiniteScrollerInterface = {
+  scrollToElementId: (id: string) => void
+}
+
+export const InfinteScroller = forwardRef<InfiniteScrollerInterface, Props>(
+  (
+    {
+      children,
+      paginateFront,
+      paginateEnd,
+      direction = 'vertical',
+      onElementVisibility,
+      className,
+      isMobileScreen,
+    }: Props,
+    ref,
+  ) => {
+    const frontSentinel = useRef<HTMLDivElement | null>(null)
+    const endSentinel = useRef<HTMLDivElement | null>(null)
+    const [ignoreFirstFrontSentinelEvent, setIgnoreFirstFrontSentinelEvent] = useState(true)
+    const [needsMobilePaginationFix, setNeedsMobilePaginationFix] = useState(false)
+
+    const scrollArea = useRef<HTMLDivElement | null>(null)
+    const [scrollSize, setScrollSize] = useState(0)
+    const [didPaginateFront, setDidPaginateFront] = useState(false)
+
+    useImperativeHandle(ref, () => ({
+      scrollToElementId(id: string) {
+        scrollToElementId(id)
+      },
+    }))
+
+    const visibilityObserver = useMemo(
+      () =>
+        new IntersectionObserver(
+          (entries) => {
+            const visibleEntry = entries.find((entry) => entry.isIntersecting)
+            if (visibleEntry) {
+              onElementVisibility?.(visibleEntry.target.id)
+            }
+          },
+          { threshold: 1.0 },
+        ),
+      [onElementVisibility],
+    )
+
+    useEffect(() => {
+      const childElements = Array.from(scrollArea.current!.children)
+      for (const child of childElements) {
+        visibilityObserver.observe(child)
+      }
+
+      return () => {
+        for (const child of childElements) {
+          visibilityObserver.unobserve(child)
+        }
+      }
+    }, [visibilityObserver, children])
+
+    const scrollToElementId = useCallback((id: string) => {
+      const element = document.getElementById(id)
+      if (!element) {
+        log(LoggingDomain.DailyNotes, 'Element not found', id)
+        return
+      }
+
+      log(LoggingDomain.DailyNotes, 'Scrolling to element', id)
+      element.scrollIntoView({
+        behavior: 'auto',
+        block: 'center',
+        inline: 'center',
+      })
+    }, [])
+
+    useLayoutEffect(() => {
+      if (!scrollArea.current) {
+        return
+      }
+
+      if (didPaginateFront) {
+        if (direction === 'vertical') {
+          scrollArea.current.scrollTop += scrollArea.current.scrollHeight - scrollSize
+          if (isMobileScreen) {
+            setNeedsMobilePaginationFix(true)
+          }
+        } else {
+          scrollArea.current.scrollLeft += scrollArea.current.scrollWidth - scrollSize
+        }
+        setDidPaginateFront(false)
+      }
+    }, [didPaginateFront, scrollSize, direction, isMobileScreen])
+
+    useLayoutEffect(() => {
+      /**
+       * iOS Safari has an issue rendering paginated items from the top where the new
+       * scrolled to area is white until the user interacts with scroll again. The fix
+       * we apply is to re-set scrollTop to its same value to trigger a refresh.
+       * https://stackoverflow.com/questions/9807620
+       */
+      if (needsMobilePaginationFix) {
+        setTimeout(() => {
+          if (!scrollArea.current) {
+            return
+          }
+
+          log(LoggingDomain.DailyNotes, '[InfiniteScroller] Applying mobile pagination fix')
+          scrollArea.current.scrollTop += scrollArea.current.scrollHeight - scrollSize
+          setNeedsMobilePaginationFix(false)
+        }, 50)
+      }
+    }, [needsMobilePaginationFix, scrollSize])
+
+    const _paginateFront = useCallback(() => {
+      if (direction === 'vertical') {
+        setScrollSize(scrollArea!.current!.scrollHeight)
+      } else {
+        setScrollSize(scrollArea!.current!.scrollWidth)
+      }
+      setDidPaginateFront(true)
+      paginateFront()
+    }, [paginateFront, direction])
+
+    const _paginateEnd = useCallback(() => {
+      paginateEnd()
+    }, [paginateEnd])
+
+    const frontObserver = useMemo(
+      () =>
+        new IntersectionObserver(
+          (entries) => {
+            if (entries[0].isIntersecting) {
+              if (ignoreFirstFrontSentinelEvent) {
+                log(LoggingDomain.DailyNotes, '[InfiniteScroller] Ignoring first front sentinel event')
+                setIgnoreFirstFrontSentinelEvent(false)
+                return
+              }
+              _paginateFront()
+            }
+          },
+          { threshold: 0.5 },
+        ),
+      [_paginateFront, ignoreFirstFrontSentinelEvent],
+    )
+
+    useEffect(() => {
+      if (frontSentinel.current) {
+        frontObserver.observe(frontSentinel.current)
+      }
+    }, [frontObserver, frontSentinel])
+
+    const endObserver = useMemo(
+      () =>
+        new IntersectionObserver(
+          (entries) => {
+            if (entries[0].isIntersecting) {
+              _paginateEnd()
+            }
+          },
+          { threshold: 0.5 },
+        ),
+      [_paginateEnd],
+    )
+
+    useEffect(() => {
+      if (endSentinel.current) {
+        endObserver.observe(endSentinel.current)
+      }
+    }, [endObserver, endSentinel])
+
+    return (
+      <div
+        ref={scrollArea}
+        className={className}
+        style={{
+          overflowY: 'scroll',
+          flexDirection: direction === 'vertical' ? 'column' : 'row',
+        }}
+      >
+        <div style={{ width: 1, height: 1, backgroundColor: 'transparent' }} ref={frontSentinel}></div>
+        {children}
+        <div style={{ width: 1, height: 1, backgroundColor: 'transparent' }} ref={endSentinel}></div>
+      </div>
+    )
+  },
+)