feat: add objective board

src/Agenda3/components/Backlog.tsx

@@ -1,7 +1,6 @@
 import { CaretRightOutlined } from '@ant-design/icons'
 import { Draggable } from '@fullcalendar/interaction'
 import { Collapse, Empty, Select } from 'antd'
-import clsx from 'clsx'
 import { useAtom, useAtomValue } from 'jotai'
 import { useEffect, useRef, useState } from 'react'
 import { BsArchive } from 'react-icons/bs'
@@ -12,6 +11,7 @@ import { categorizeTasksByPage, formatTaskTitle } from '@/Agenda3/helpers/task'
 import { logseqAtom } from '@/Agenda3/models/logseq'
 import { settingsAtom } from '@/Agenda3/models/settings'
 import { backlogTasksAtom } from '@/Agenda3/models/tasks'
+import { cn } from '@/util/util'
 
 import s from './backlog.module.less'
 import LogseqLogo from './icons/LogseqLogo'
@@ -46,7 +46,7 @@ const Backlog = ({ bindCalendar = true }: { bindCalendar?: boolean }) => {
     }
   }, [backlogTasks.length, bindCalendar])
   return (
-    <div className={clsx('w-[290px] h-full border-l pl-2 flex flex-col bg-gray-50 shadow-md', s.backlog)}>
+    <div className={cn('w-[290px] h-full border-l pl-2 flex flex-col bg-gray-50 shadow-md', s.backlog)}>
       <div className="h-[44px] flex items-center gap-1.5 relative after:shadow after:absolute after:bottom-0 after:w-full after:h-1">
         <BsArchive /> Backlog
         <Select
@@ -67,7 +67,7 @@ const Backlog = ({ bindCalendar = true }: { bindCalendar?: boolean }) => {
         />
       </div>
       <div
-        className={clsx('flex flex-col gap-2 flex-1 overflow-auto pt-2', {
+        className={cn('flex flex-col gap-2 flex-1 overflow-auto pt-2', {
           'justify-center': showCategorizedTasks?.length <= 0,
         })}
         ref={taskContainerRef}

src/Agenda3/components/MainArea.tsx

@@ -53,6 +53,14 @@ const MultipleView = ({ className }: { className?: string }) => {
     }
     track('Today Button', { view: app.view })
   }
+  const onClickAppViewChange = (view) => {
+    const _view = view as App['view']
+    setApp((_app) => {
+      const _sidebarType = _view === 'tasks' ? 'timebox' : 'backlog'
+      return { ..._app, view: _view, sidebarType: _sidebarType }
+    })
+    track('View Change', { view: view })
+  }
 
   return (
     <div className={cn('flex flex-col pl-2 py-1 flex-1 w-0 z-0 relative', className)}>
@@ -119,15 +127,7 @@ const MultipleView = ({ className }: { className?: string }) => {
               }}
             />
           ) : null}
-          <Segmented
-            defaultValue={app.view}
-            className="!bg-gray-200"
-            options={VIEWS}
-            onChange={(view) => {
-              setApp((_app) => ({ ..._app, view: view as App['view'] }))
-              track('View Change', { view: view })
-            }}
-          />
+          <Segmented defaultValue={app.view} className="!bg-gray-200" options={VIEWS} onChange={onClickAppViewChange} />
           {settings.filters?.length ? <Filter /> : null}
           {settings.ics?.repo && settings.ics?.token ? <UploadIcs className="text-lg cursor-pointer" /> : null}
           <SettingsModal initialTab="general">

src/Agenda3/components/ObjectiveBoard.tsx

@@ -0,0 +1,15 @@
+import { GoGoal } from 'react-icons/go'
+
+import { cn } from '@/util/util'
+
+const ObjectiveBoard = () => {
+  return (
+    <div className={cn('w-[290px] h-full border-l pl-2 flex flex-col bg-gray-50 shadow-md')}>
+      <div className="h-[44px] flex items-center gap-1.5 relative after:shadow after:absolute after:bottom-0 after:w-full after:h-1">
+        <GoGoal /> Objective
+      </div>
+    </div>
+  )
+}
+
+export default ObjectiveBoard

src/Agenda3/components/Sidebar.tsx

@@ -0,0 +1,43 @@
+import { useAtom } from 'jotai'
+import { AiOutlineLeft, AiOutlineRight } from 'react-icons/ai'
+
+import { type App, appAtom } from '@/Agenda3/models/app'
+import { cn } from '@/util/util'
+
+import Backlog from './Backlog'
+import ObjectiveBoard from './ObjectiveBoard'
+import TimeBox from './timebox/TimeBox'
+
+const Sidebar = () => {
+  const [app, setApp] = useAtom(appAtom)
+
+  return (
+    <div className={cn('transition-all group/sidebar relative', app.rightSidebarFolded ? 'w-0' : 'w-[290px]')}>
+      <SidebarContent sidebarType={app.sidebarType} />
+      {/* folded option bar */}
+      <div className="w-[16px] h-full absolute -left-[16px] top-0 flex items-center z-10 opacity-0 group-hover/sidebar:opacity-100 transition-opacity">
+        <div
+          className="bg-[#f0f0f0] h-[50px] w-full rounded-tl rounded-bl flex items-center text-gray-400 hover:bg-gray-200 cursor-pointer border-l border-t border-b"
+          onClick={() => setApp((_app) => ({ ..._app, rightSidebarFolded: !_app.rightSidebarFolded }))}
+        >
+          {app.rightSidebarFolded ? <AiOutlineLeft /> : <AiOutlineRight />}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarContent({ sidebarType }: { sidebarType: App['sidebarType'] }) {
+  switch (sidebarType) {
+    case 'backlog':
+      return <Backlog />
+    case 'timebox':
+      return <TimeBox onChangeType={() => {}} />
+    case 'objective':
+      return <ObjectiveBoard />
+    default:
+      return null
+  }
+}
+
+export default Sidebar

src/Agenda3/components/calendar/Calendar.tsx

@@ -23,6 +23,7 @@ import TaskModal from '../modals/TaskModal'
 import { type CreateTaskForm } from '../modals/TaskModal/useCreate'
 import { type CalendarView } from './CalendarAdvancedOperation'
 import TheCalendarEvent from './TheCalendarEvent'
+import WeekNumber from './WeekNumber'
 import s from './calendar.module.less'
 
 const FULL_CALENDAR_24HOUR_FORMAT = {
@@ -175,7 +176,7 @@ const Calendar = ({ onCalendarTitleChange }: CalendarProps, ref) => {
         selectable
         dayMaxEventRows // allow "more" link when too many events
         weekNumbers
-        weekNumberClassNames="text-xs"
+        weekNumberContent={({ num }) => <WeekNumber weekNumber={num} />}
         defaultTimedEventDuration="00:30"
         firstDay={1}
         fixedWeekCount={false}
@@ -225,6 +226,9 @@ const Calendar = ({ onCalendarTitleChange }: CalendarProps, ref) => {
           track('Calendar: Click Event', { calendarView: info.view.type })
         }}
         select={(info) => {
+          // prevent click week number to create task
+          // @ts-expect-error type correctly
+          if (info.jsEvent?.target?.className?.includes('faiz-week-number')) return
           track('Calendar: Select Event', { calendarView: info.view.type })
           onSelect(info)
         }}

src/Agenda3/components/calendar/WeekNumber.tsx

@@ -0,0 +1,20 @@
+import { useSetAtom } from 'jotai'
+import React from 'react'
+import { GoGoal } from 'react-icons/go'
+
+import { appAtom } from '@/Agenda3/models/app'
+
+const WeekNumber = ({ weekNumber }: { weekNumber: number }) => {
+  const setApp = useSetAtom(appAtom)
+  const onClick = () => {
+    setApp((_app) => ({ ..._app, sidebarType: 'objective' }))
+  }
+  return (
+    <div onClick={onClick} className="faiz-week-number text-xs flex gap-1 items-center cursor-pointer">
+      W{weekNumber}
+      <GoGoal />
+    </div>
+  )
+}
+
+export default WeekNumber

src/Agenda3/index.tsx

@@ -1,8 +1,7 @@
 // import { Analytics } from '@vercel/analytics/react'
 import { Modal, message } from 'antd'
-import { useAtom, useSetAtom } from 'jotai'
+import { useAtomValue, useSetAtom } from 'jotai'
 import { useCallback, useEffect, useState } from 'react'
-import { AiOutlineLeft, AiOutlineRight } from 'react-icons/ai'
 
 import useAgendaTasks from '@/Agenda3/hooks/useAgendaTasks'
 import usePages from '@/Agenda3/hooks/usePages'
@@ -11,17 +10,15 @@ import { logseqAtom } from '@/Agenda3/models/logseq'
 import initializeDayjs from '@/register/dayjs'
 import { cn } from '@/util/util'
 
-import Backlog from './components/Backlog'
 import MultipleView from './components/MainArea'
-import TimeBox from './components/timebox/TimeBox'
+import Sidebar from './components/Sidebar'
 import useSettings from './hooks/useSettings'
 
 // import TimeBoxActual from './components/TimeBoxActual'
 
 export type TimeBoxType = 'estimated' | 'actual'
 const Dashboard = () => {
-  const [timeBoxType, setTimeBoxType] = useState<TimeBoxType>('estimated')
-  const [app, setApp] = useAtom(appAtom)
+  const app = useAtomValue(appAtom)
   // 需要初始化 settings
   const { initializeSettings } = useSettings()
   const setLogseq = useSetAtom(logseqAtom)
@@ -86,18 +83,7 @@ const Dashboard = () => {
       <MultipleView className="flex-1" />
 
       {/* ========== Sidebar ========= */}
-      <div className={cn('transition-all group/sidebar relative', app.rightSidebarFolded ? 'w-0' : 'w-[290px]')}>
-        {app.view === 'calendar' ? <Backlog /> : <TimeBox onChangeType={() => setTimeBoxType('actual')} />}
-        {/* folded option bar */}
-        <div className="w-[16px] h-full absolute -left-[16px] top-0 flex items-center z-10 opacity-0 group-hover/sidebar:opacity-100 transition-opacity">
-          <div
-            className="bg-[#f0f0f0] h-[50px] w-full rounded-tl rounded-bl flex items-center text-gray-400 hover:bg-gray-200 cursor-pointer border-l border-t border-b"
-            onClick={() => setApp((_app) => ({ ..._app, rightSidebarFolded: !_app.rightSidebarFolded }))}
-          >
-            {app.rightSidebarFolded ? <AiOutlineLeft /> : <AiOutlineRight />}
-          </div>
-        </div>
-      </div>
+      <Sidebar />
 
       {/* ========== Toolbar ======== */}
       {/* <div></div> */}

src/Agenda3/models/app.ts

@@ -6,9 +6,11 @@ export type App = {
   view: 'tasks' | 'calendar'
   rightSidebarFolded: boolean
   calendarView: CalendarView
+  sidebarType: 'timebox' | 'backlog' | 'objective'
 }
 export const appAtom = atom<App>({
   view: 'tasks',
   rightSidebarFolded: false,
   calendarView: 'dayGridMonth',
+  sidebarType: 'timebox',
 })