Added mouseover event for page titles to show day name

src/ts/contentScripts/entry/index.ts

@@ -6,4 +6,4 @@
 import '../../core/features'
 import '../../core/settings/dispatcher'
 import '../../core/settings/shortcuts'
-import '../../core/features/fuzzy_date'
+import '../../core/features/fuzzy_date'

src/ts/core/features/day-title.ts

@@ -0,0 +1,56 @@
+import {browser} from 'webextension-polyfill-ts'
+import {RoamDate} from '../roam/date'
+import {Feature, Settings} from '../settings'
+
+export const config: Feature = {
+    id: 'day-title',
+    name: 'Daily Notes Day Titles',
+}
+
+Settings.isActive(config.id).then(active => {
+    if (active) {
+        registerEventListener()
+    }
+})
+
+browser.runtime.onMessage.addListener(async message => {
+    if (message?.featureId === config.id) {
+        registerEventListener()
+    }
+})
+
+const getDayFromDate = (name: string) => {
+    let re = /(.*) (\d+).{2}, (\d{4})/i
+    const matches = name.match(re)
+    if (matches && matches.length === 4) {
+        const date = RoamDate.parse(name)
+        return RoamDate.getDayName(date)
+    }
+    return null
+}
+
+const isElementPageViewTitle = (element: HTMLElement) =>
+    (element.parentNode?.parentNode as HTMLElement)?.classList?.contains('rm-ref-page-view-title')
+
+const registerEventListener = () => {
+    document.querySelector('body')?.addEventListener('mouseover', ev => {
+        const target = ev.target as HTMLElement
+        if (target === null) {
+            return
+        }
+
+        let day = null
+        if (
+            target.classList.contains('rm-page-ref') ||
+            target.classList.contains(`rm-title-display`) ||
+            isElementPageViewTitle(target)
+        ) {
+            day = getDayFromDate(target.innerText)
+        }
+
+        if (day === null) {
+            return
+        }
+        target.setAttribute('title', day)
+    })
+}

src/ts/core/features/index.ts

@@ -7,6 +7,7 @@ import {config as blockManipulation} from './block-manipulation'
 import {config as estimate} from './estimates'
 import {config as navigation} from './navigation'
 import {config as livePreview} from './livePreview'
+import {config as dateTitle} from './day-title'
 import {filterAsync, mapAsync} from '../common/async'
 
 export const Features = {
@@ -17,6 +18,7 @@ export const Features = {
         estimate,
         customCss,
         navigation,
+        dateTitle,
         livePreview,
     ]),
 

src/ts/core/roam/date/index.ts

@@ -1,5 +1,7 @@
 import dateFormat from 'dateformat'
 
+const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+
 export const RoamDate = {
     formatString: `mmmm dS, yyyy`,
     pageFormatString() {
@@ -22,4 +24,7 @@ export const RoamDate = {
     parseFromReference(name: string): Date {
         return this.parse(name.slice(2).slice(0, -2))
     },
+    getDayName(date: Date) {
+        return days[date.getDay()]
+    },
 }