feat(plan): ✨ add tomorrow column

package.json

@@ -1,6 +1,6 @@
 {
   "name": "logseq-plugin-agenda",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "main": "dist/index.html",
   "private": true,
   "logseq": {
@@ -139,4 +139,4 @@
     "vuepress": "2.0.0-beta.60",
     "vuepress-plugin-copy-code2": "2.0.0-beta.173"
   }
-}
+}

src/newModel/tasks.ts

@@ -41,6 +41,14 @@ export const todayTasksAtom = atom<AgendaTaskWithStart[]>((get) => {
     return task.start.isSame(today, 'day')
   })
 })
+export const tomorrowTasksAtom = atom<AgendaTaskWithStart[]>((get) => {
+  const allTasks = get(tasksWithStartAtom)
+
+  const tomorrow = dayjs().add(1, 'day')
+  return allTasks.filter((task) => {
+    return task.start.isSame(tomorrow, 'day')
+  })
+})
 
 export const thisWeekTasksAtom = atom<AgendaTaskWithStart[]>((get) => {
   const allTasks = get(tasksWithStartAtom)
@@ -52,6 +60,18 @@ export const thisWeekTasksAtom = atom<AgendaTaskWithStart[]>((get) => {
     return task.start.isBetween(startDay, endDay, 'day', '(]')
   })
 })
+export const thisWeekExcludeTomorrowTasksAtom = atom<AgendaTaskWithStart[]>((get) => {
+  const allTasks = get(tasksWithStartAtom)
+
+  const today = dayjs()
+  const tomorrow = today.add(1, 'day')
+  const startDay = tomorrow
+  const endDay = today.endOf('week')
+  if (startDay.isSameOrAfter(endDay, 'day')) return []
+  return allTasks.filter((task) => {
+    return task.start.isBetween(startDay, endDay, 'day', '(]')
+  })
+})
 
 export const thisMonthTasksAtom = atom<AgendaTaskWithStart[]>((get) => {
   const allTasks = get(tasksWithStartAtom)
@@ -63,6 +83,18 @@ export const thisMonthTasksAtom = atom<AgendaTaskWithStart[]>((get) => {
     return task.start.isBetween(startDay, endDay, 'day', '(]')
   })
 })
+export const thisMonthExcludeTomorrowTasksAtom = atom<AgendaTaskWithStart[]>((get) => {
+  const allTasks = get(tasksWithStartAtom)
+
+  const today = dayjs()
+  const tomorrow = today.add(1, 'day')
+  const startDay = tomorrow
+  const endDay = today.endOf('month')
+  if (startDay.isSameOrAfter(endDay, 'day')) return []
+  return allTasks.filter((task) => {
+    return task.start.isBetween(startDay, endDay, 'day', '(]')
+  })
+})
 
 export const overdueTasksAtom = atom<AgendaTaskWithStart[]>((get) => {
   const allTasks = get(tasksWithStartAtom)

src/pages/NewDashboard/components/FullScreenModal.tsx

@@ -22,7 +22,7 @@ const FullScreenModal = ({
       })}
     >
       {children}
-      <div className={cn('absolute right-2', import.meta.env.VITE_MODE === 'plugin' ? 'top-[38px]' : 'top-2')}>
+      <div className={cn('absolute right-2', import.meta.env.VITE_MODE === 'plugin' ? 'top-[34px]' : 'top-1')}>
         <Button icon={<CloseOutlined />} onClick={onClose}>
           Exit
         </Button>

src/pages/NewDashboard/components/KanBan.tsx

@@ -124,6 +124,7 @@ const KanBan = (props, ref) => {
         const dateStr = day.format('MM-DD ddd')
         const columnTasks = tasksInDay.get(day.format(DATE_FORMATTER_FOR_KEY)) || []
         const isToday = day.isSame(today, 'day')
+        const isTomorrow = day.isSame(today.add(1, 'day'), 'day')
         const isFuture = day.isAfter(today, 'day')
         const doneTasks = columnTasks.filter((task) => task.status === 'done')
         const undoneTasks = columnTasks.filter((task) => task.status !== 'done')
@@ -144,7 +145,18 @@ const KanBan = (props, ref) => {
               </div>
               <div className="flex gap-2 items-center">
                 {isToday ? (
-                  <PlannerModal triggerClassName="text-[10px] text-gray-400 hover:text-gray-700 cursor-pointer">
+                  <PlannerModal
+                    type="today"
+                    triggerClassName="text-[10px] text-gray-400 hover:text-gray-700 cursor-pointer"
+                  >
+                    Plan
+                  </PlannerModal>
+                ) : null}
+                {isTomorrow ? (
+                  <PlannerModal
+                    type="tomorrow"
+                    triggerClassName="text-[10px] text-gray-400 hover:text-gray-700 cursor-pointer"
+                  >
                     Plan
                   </PlannerModal>
                 ) : null}

src/pages/NewDashboard/components/PlannerModal.tsx

@@ -21,11 +21,14 @@ import { logseqAtom } from '@/newModel/logseq'
 import {
   backlogTasksAtom,
   overdueTasksAtom,
+  thisMonthExcludeTomorrowTasksAtom,
   thisMonthObjectivesAtom,
   thisMonthTasksAtom,
+  thisWeekExcludeTomorrowTasksAtom,
   thisWeekObjectivesAtom,
   thisWeekTasksAtom,
   todayTasksAtom,
+  tomorrowTasksAtom,
 } from '@/newModel/tasks'
 import type { AgendaObjective, AgendaTask, AgendaTaskWithStart } from '@/types/task'
 import { cn, replaceDateInfo } from '@/util/util'
@@ -35,7 +38,15 @@ import FullScreenModal from './FullScreenModal'
 import LogseqLogo from './LogseqLogo'
 import TaskModal from './TaskModal'
 
-const PlannerModal = ({ children, triggerClassName }: { children: React.ReactNode; triggerClassName?: string }) => {
+const PlannerModal = ({
+  children,
+  triggerClassName,
+  type,
+}: {
+  children: React.ReactNode
+  triggerClassName?: string
+  type: 'today' | 'tomorrow'
+}) => {
   const today = dayjs()
   const [open, setOpen] = useState(false)
   const [backlogFolded, setBacklogFolded] = useState(false)
@@ -49,24 +60,33 @@ const PlannerModal = ({ children, triggerClassName }: { children: React.ReactNod
   const backlogTasks = useAtomValue(backlogTasksAtom)
   const { currentGraph } = useAtomValue(logseqAtom)
   const todayTasks = useAtomValue(todayTasksAtom)
+  const tomorrowTasks = useAtomValue(tomorrowTasksAtom)
   const thisWeekTasks = useAtomValue(thisWeekTasksAtom)
   const thisMonthTasks = useAtomValue(thisMonthTasksAtom)
+  const thisWeekExcludeTomorrowTasks = useAtomValue(thisWeekExcludeTomorrowTasksAtom)
+  const thisMonthExcludeTomorrowTasks = useAtomValue(thisMonthExcludeTomorrowTasksAtom)
   const overdueTasks = useAtomValue(overdueTasksAtom)
-  const tasks = [...todayTasks, ...thisWeekTasks, ...thisMonthTasks]
+  const tasks =
+    type === 'today'
+      ? [...todayTasks, ...thisWeekTasks, ...thisMonthTasks]
+      : [...todayTasks, ...tomorrowTasks, ...thisWeekExcludeTomorrowTasks, ...thisMonthExcludeTomorrowTasks]
 
   const thisWeekObjectives = useAtomValue(thisWeekObjectivesAtom)
   const thisMonthObjectives = useAtomValue(thisMonthObjectivesAtom)
 
-  const cycles = ['today', 'week', 'month'] as const
+  const cycles =
+    type === 'today' ? (['today', 'week', 'month'] as const) : (['today', 'tomorrow', 'week', 'month'] as const)
   const dayMap = {
     today,
+    tomorrow: today.add(1, 'day'),
     week: today.endOf('week'),
     month: today.endOf('month'),
   }
   const tasksInCycle = {
     today: todayTasks,
-    week: thisWeekTasks,
-    month: thisMonthTasks,
+    tomorrow: tomorrowTasks,
+    week: type === 'today' ? thisWeekTasks : thisWeekExcludeTomorrowTasks,
+    month: type === 'tomorrow' ? thisMonthTasks : thisMonthExcludeTomorrowTasks,
   }
   const objectivesInCycle = {
     week: thisWeekObjectives,
@@ -520,8 +540,8 @@ const PlannerModal = ({ children, triggerClassName }: { children: React.ReactNod
   )
 }
 
-function getCycleText(day: Dayjs, cycle: 'today' | 'week' | 'month') {
-  if (cycle === 'today') return day.format('MMM DD, ddd')
+function getCycleText(day: Dayjs, cycle: 'today' | 'tomorrow' | 'week' | 'month') {
+  if (cycle === 'today' || cycle === 'tomorrow') return day.format('MMM DD, ddd')
   if (cycle === 'week') return 'W' + day.isoWeek()
   if (cycle === 'month') return day.format('MMMM')
   return ''