feat: shortcuts for agenda v3 (#297)

* feat: ctrl+click to jump to block

* feat: shortcuts to quit, save and toggle a Task

* feat(shortcuts): Add keyboard shortcuts for navigating and toggling views in the calendar
- Double-tap [[ to go to the previous month in the calendar.
- Double-tap ]] to go to the next month in the calendar.
- Press W to toggle the calendar view between month and week.
- Press T to toggle the app view between calendar and tasks.

* fix: shortcuts triggered when typing text

* feat: ctrl+click on TaskCard to jump to the block

* fix: `ctrl+q` forces exiting Logseq. Use `ctrl+w` instead

* refactor: use camel case naming

---------

Co-authored-by: e-zz <>
Co-authored-by: Hayden Chen <hayden.chen.dev@gmail.com>

Author: e-zz

src/Agenda3/components/MainArea.tsx

@@ -2,7 +2,7 @@ import { LeftOutlined, RightOutlined } from '@ant-design/icons'
 import { Button, Segmented } from 'antd'
 import dayjs from 'dayjs'
 import { useAtom, useAtomValue } from 'jotai'
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FiSettings, FiXCircle } from 'react-icons/fi'
 import { LuCalendarDays, LuKanbanSquare } from 'react-icons/lu'
@@ -15,7 +15,7 @@ import { cn } from '@/util/util'
 import Filter from './Filter'
 import UploadIcs from './UploadIcs'
 import Calendar, { type CalendarHandle } from './calendar/Calendar'
-import CalendarOperation, { type CalendarView } from './calendar/CalendarAdvancedOperation'
+import CalendarOperation, { CALENDAR_VIEWS, type CalendarView } from './calendar/CalendarAdvancedOperation'
 import KanBan, { type KanBanHandle } from './kanban/KanBan'
 import SettingsModal from './modals/SettingsModal'
 
@@ -78,6 +78,62 @@ const MultipleView = ({ className }: { className?: string }) => {
     }))
   }
 
+  const setCalendarView = (view: CalendarView) => {
+    calendarRef.current?.changeView(view as CalendarView)
+    setApp((_app) => ({ ..._app, calendarView: view }))
+    track('Calendar View Change', { calendarView: view })
+  }
+
+  const togCalendarView = () => {
+    const view =
+      app.calendarView === CALENDAR_VIEWS.dayGridMonth ? CALENDAR_VIEWS.timeGridWeek : CALENDAR_VIEWS.dayGridMonth
+    setCalendarView(view)
+  }
+
+  useEffect(() => {
+    let lastKeyDownTime = 0
+    let lastKey = ''
+    const doubleClickThreshold = 500 // 500 milliseconds
+
+    function handleKeyDown(event) {
+      // Get the currently focused element
+      const activeElement = document.activeElement
+
+      // If the focused element is an input or textarea, ignore the keydown event
+      if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) return
+
+      const calendarApi = calendarRef.current
+
+      const currentTime = new Date().getTime()
+
+      // Handle double-tap [[ or ]]
+      if (currentTime - lastKeyDownTime <= doubleClickThreshold && lastKey === event.code) {
+        // [[ : go to the previous month
+        if (event.code === 'BracketLeft') calendarApi?.prev()
+        // ]] : go to the next month
+        if (event.code === 'BracketRight') calendarApi?.next()
+      }
+
+      // Handle other keystrokes
+      if (event.code === 'KeyW') togCalendarView()
+
+      if (event.code === 'KeyT') {
+        const view = app.view === 'calendar' ? 'tasks' : 'calendar'
+        onClickAppViewChange(view)
+        // TODO UI: toggle the state of Calendar-Tasks slider accordingly
+      }
+
+      lastKey = event.code
+      lastKeyDownTime = currentTime
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [app.calendarView, app.view, setApp])
+
   return (
     <div className={cn('relative z-0 flex w-0 flex-1 flex-col py-1 pl-2', className)}>
       {/* ========= View Actions ========= */}

src/Agenda3/components/calendar/Calendar.tsx

@@ -12,10 +12,12 @@ import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } f
 import { useTheme } from '@/Agenda3/components/ThemeProvider'
 import { genDurationString } from '@/Agenda3/helpers/block'
 import { transformAgendaTaskToCalendarEvent } from '@/Agenda3/helpers/fullCalendar'
+import { navToLogseqBlock } from '@/Agenda3/helpers/logseq'
 import { track } from '@/Agenda3/helpers/umami'
 import useAgendaEntities from '@/Agenda3/hooks/useAgendaEntities'
 import { appAtom } from '@/Agenda3/models/app'
 import { tasksWithStartAtom } from '@/Agenda3/models/entities/tasks'
+import { logseqAtom } from '@/Agenda3/models/logseq'
 import { settingsAtom } from '@/Agenda3/models/settings'
 // import useTheme from '@/hooks/useTheme'
 import type { AgendaTaskWithStart } from '@/types/task'
@@ -42,6 +44,7 @@ const Calendar = ({ onCalendarTitleChange }: CalendarProps, ref) => {
   const { updateEntity } = useAgendaEntities()
   const tasksWithStart = useAtomValue(tasksWithStartAtom)
   const settings = useAtomValue(settingsAtom)
+  const { currentGraph } = useAtomValue(logseqAtom)
   const startingDay = settings.general?.startOfWeek
   const groupType = settings.selectedFilters?.length ? 'filter' : 'page'
   const showTasks = tasksWithStart?.filter((task) =>
@@ -80,6 +83,9 @@ const Calendar = ({ onCalendarTitleChange }: CalendarProps, ref) => {
       task: info.event.extendedProps as AgendaTaskWithStart,
     })
   }
+  const onEventCtrlClick = (info: EventClickArg) => {
+    navToLogseqBlock(info.event.extendedProps as AgendaTaskWithStart, currentGraph)
+  }
   const onEventScheduleUpdate = (info: EventResizeDoneArg | EventReceiveArg | EventDropArg) => {
     // const calendarApi = calendarRef.current?.getApi()
     const { start, end, id: blockUUID, allDay, extendedProps } = info.event
@@ -232,7 +238,11 @@ const Calendar = ({ onCalendarTitleChange }: CalendarProps, ref) => {
         }}
         // click event
         eventClick={(info) => {
-          onEventClick(info)
+          if (info.jsEvent?.ctrlKey) {
+            onEventCtrlClick(info)
+          } else {
+            onEventClick(info)
+          }
           track('Calendar: Click Event', { calendarView: info.view.type })
         }}
         select={(info) => {

src/Agenda3/components/calendar/CalendarAdvancedOperation.tsx

@@ -6,7 +6,7 @@ import { IoMdCheckmark } from 'react-icons/io'
 import useSettings from '@/Agenda3/hooks/useSettings'
 import { cn } from '@/util/util'
 
-const CALENDAR_VIEWS = {
+export const CALENDAR_VIEWS = {
   dayGridMonth: 'dayGridMonth',
   timeGridWeek: 'timeGridWeek',
 } as const

src/Agenda3/components/kanban/taskCard/TaskCard.tsx

@@ -6,7 +6,9 @@ import { RiDeleteBin4Line } from 'react-icons/ri'
 import { VscDebugConsole } from 'react-icons/vsc'
 
 import { minutesToHHmm } from '@/Agenda3/helpers/fullCalendar'
+import { navToLogseqBlock } from '@/Agenda3/helpers/logseq'
 import useAgendaEntities from '@/Agenda3/hooks/useAgendaEntities'
+import { logseqAtom } from '@/Agenda3/models/logseq'
 import { settingsAtom } from '@/Agenda3/models/settings'
 import { DEFAULT_ESTIMATED_TIME } from '@/constants/agenda'
 import type { AgendaEntity } from '@/types/entity'
@@ -18,6 +20,7 @@ import TaskModal from '../../modals/TaskModal'
 import Toolbar from './Toolbar'
 
 const TaskCard = ({ task }: { task: AgendaTaskWithStart }) => {
+  const currentGraph = useAtomValue(logseqAtom).currentGraph
   const settings = useAtomValue(settingsAtom)
   const groupType = settings.selectedFilters?.length ? 'filter' : 'page'
 
@@ -45,6 +48,15 @@ const TaskCard = ({ task }: { task: AgendaTaskWithStart }) => {
   const onRemoveDate = async (taskId: string) => {
     updateEntity({ type: 'task-remove-date', id: taskId, data: null })
   }
+  const onClickTask = (e: React.MouseEvent, task: AgendaTaskWithStart) => {
+    if (e.ctrlKey) {
+      navToLogseqBlock(task, currentGraph)
+      console.log(task)
+    } else {
+      setEditTaskModal({ open: true, task })
+    }
+    e.stopPropagation()
+  }
 
   return (
     <div
@@ -96,7 +108,11 @@ const TaskCard = ({ task }: { task: AgendaTaskWithStart }) => {
           },
         }}
       >
-        <div onClick={() => setEditTaskModal({ open: true, task })}>
+        <div
+          onClick={(e) => {
+            onClickTask(e, task)
+          }}
+        >
           {/* ========= Toolbar ========= */}
           <Toolbar task={task} groupType={groupType} onClickMark={onClickTaskMark} />
 

src/Agenda3/components/modals/TaskModal/index.tsx

@@ -21,6 +21,7 @@ import TimeSelect from '@/components/TaskModal/components/TimeSelect'
 import { SHOW_DATETIME_FORMATTER, SHOW_DATE_FORMATTER } from '@/constants/agenda'
 import type { AgendaEntity } from '@/types/entity'
 import type { AgendaTaskWithStart, TimeLog } from '@/types/task'
+import { getOS } from '@/util/util'
 
 import ObjectiveSelect from '../../forms/ObjectiveSelect'
 import PageSelect from '../../forms/PageSelect'
@@ -151,6 +152,42 @@ const TaskModal = ({
     onCancel?.()
     setInternalOpen(false)
   }
+  // Add keyboard event listener
+  useEffect(() => {
+    function handleKeyDown(event) {
+      const isMac = getOS() === 'mac'
+      const mainModifierKey = isMac ? event.metaKey : event.ctrlKey
+
+      if (event.code === 'KeyW' && mainModifierKey) {
+        // Close the modal on pressing ctrl+q (or cmd+q on Mac)
+        onCancel?.()
+        setInternalOpen(false)
+        event.stopPropagation()
+      } else if (event.code === 'KeyS' && mainModifierKey) {
+        // Save and close the modal on pressing ctrl+s (or cmd+s on Mac)
+        onOk?.()
+        setInternalOpen(false)
+        event.stopPropagation()
+      } else if (event.code === 'Enter' && mainModifierKey) {
+        // toggle TODO status on pressing ctrl+Enter (or cmd+Enter on Mac)
+        if (info.type === 'edit' && info.initialTaskData.status === 'done') {
+          onSwitchTaskStatus('todo')
+        }
+        if (info.type === 'edit' && info.initialTaskData.status === 'todo') {
+          onSwitchTaskStatus('done')
+          setInternalOpen(false)
+        }
+        event.stopPropagation()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [])
+
   useEffect(() => {
     // 增加延时，否则二次打开无法自动聚焦
     if (_open) setTimeout(() => titleInputRef.current?.focus(), 0)