feat: ✨ Optimize calendar sidebar interaction

src/components/Calendar.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import Calendar, { ISchedule } from 'tui-calendar'
 import { format, isSameDay, parse } from 'date-fns'
 import { getDefaultCalendarOptions, getInitalSettings, genDailyLogCalendarOptions } from '@/util/baseInfo'
-import { CALENDAR_VIEWS, SHOW_DATE_FORMAT } from '@/util/constants'
+import { CALENDAR_VIEWS, DEFAULT_SETTINGS, SHOW_DATE_FORMAT } from '@/util/constants'
 import { deleteProjectTaskTime, updateProjectTaskTime } from '@/util/schedule'
 import ModifySchedule, { IScheduleValue } from '@/components/ModifySchedule'
 import Sidebar from '@/components/Sidebar'
@@ -12,6 +12,8 @@ import { Button, Modal, Segmented, Tooltip } from 'antd'
 import { LeftOutlined, RightOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
 import { ICustomCalendar } from '@/util/type'
 import { IEvent } from '@/util/events'
+import { useAtom } from 'jotai'
+import { calendarSchedulesCalendarIdsAtom } from '@/model/events'
 
 // import { schedulesAtom } from '@/model/schedule'
 
@@ -22,6 +24,7 @@ const CalendarCom: React.FC<{
 }> = ({ schedules, isProjectCalendar = true, isDailyLogCalendar = false }) => {
   // const [schedules] = useAtom(schedulesAtom)
 
+  const [fullCalendarIds] = useAtom(calendarSchedulesCalendarIdsAtom)
   const { subscriptionList, logKey, projectList = [], journal } = getInitalSettings()
 
   const [showDate, setShowDate] = useState<string>()
@@ -76,10 +79,12 @@ const CalendarCom: React.FC<{
     changeShowDate()
   }
   const onShowCalendarChange = (showCalendarList: string[]) => {
-    const enabledCalendarIds = enabledCalendarList.concat(enabledSubscriptionList)?.map(calendar => calendar.id)
+    const subscriptionIds = enabledSubscriptionList?.map(calendar => calendar.id)
+    const enabledCalendarIds = enabledCalendarList?.map(calendar => calendar.id).concat(subscriptionIds)
 
-    enabledCalendarIds.forEach(calendarId => {
-      if (showCalendarList.includes(calendarId)) {
+    fullCalendarIds.concat(subscriptionIds).forEach(calendarId => {
+      const judgeCalendarId = enabledCalendarIds.includes(calendarId) ? calendarId : 'Other Projects'
+      if (showCalendarList.includes(judgeCalendarId)) {
         calendarRef.current?.toggleSchedules(calendarId, false)
       } else {
         calendarRef.current?.toggleSchedules(calendarId, true)
@@ -269,7 +274,10 @@ const CalendarCom: React.FC<{
         <div className={`transition-all overflow-hidden bg-quaternary title-text mr-2 ${isFold ? 'w-0 mr-0' : 'w-40'}`}>
           <Sidebar
             onShowCalendarChange={onShowCalendarChange}
-            calendarList={enabledCalendarList}
+            calendarList={enabledCalendarList.concat({
+              ...(DEFAULT_SETTINGS.logKey as ICustomCalendar),
+              id: 'Other Projects',
+            })}
             subscriptionList={enabledSubscriptionList}
             />
         </div>

src/components/Checkbox.tsx

@@ -2,15 +2,18 @@ import React from 'react'
 
 const Checkbox: React.FC<{
   checked?: boolean
-  color?: string
+  markColor?: string
+  bgColor?: string
   indeterminate?: boolean
   onChange?: (checked: boolean) => void
   [props: string]: any
-}> = ({ checked, color, indeterminate, onChange, children, ...props }) => {
+}> = ({ checked, markColor, bgColor, indeterminate, onChange, children, ...props }) => {
   // TODO: add indeterminate state
   return (
     <div onClick={() => onChange?.(!checked)} {...props}>
-      <span className={`check-box mr-2 ${checked ? 'checked' : ''}`} style={{ backgroundColor: color }}></span>
+      <span className={`check-box mr-2 ${checked ? 'checked' : ''}`} style={{ backgroundColor: bgColor }}>
+        <span style={{ borderColor: markColor }}></span>
+      </span>
       {children}
     </div>
   )

src/components/Sidebar.tsx

@@ -49,7 +49,8 @@ const Sidebar: React.FC<{
                 <Checkbox
                   className="mb-1 cursor-pointer flex items-center"
                   key={calendar.id}
-                  color={calendar.bgColor}
+                  markColor={calendar.textColor}
+                  bgColor={calendar.bgColor}
                   checked={checkedCalendarList?.includes(calendar.id)}
                   onChange={(checked) => onCheck(calendar.id, checked)}
                 >
@@ -68,7 +69,8 @@ const Sidebar: React.FC<{
                   <Checkbox
                     className="mb-1 cursor-pointer flex items-center"
                     key={subscription.id}
-                    color={subscription.bgColor}
+                    cmarkColor={subscription.textColor}
+                    bgColor={subscription.bgColor}
                     checked={checkedCalendarList?.includes(subscription.id)}
                     onChange={(checked) => onCheck(subscription.id, checked)}
                   >
@@ -86,7 +88,8 @@ const Sidebar: React.FC<{
       <Divider className="my-2" />
       <div style={{ padding: '0 10px' }}>
         <Checkbox
-          color="#047857"
+          markColor="#fff"
+          bgColor="#047857"
           checked={checkedCalendarList?.length === calendarList.length + subscriptionList?.length}
           onChange={(checked) => onCheckAll(checked)}
         >

src/model/events.ts

@@ -36,6 +36,12 @@ export const projectCalendarSchedulesAtom = atom((get) => {
     schedules: full.filter(({ calendarId }) => calendarId === project.id),
   }))
 })
+export const calendarSchedulesCalendarIdsAtom = atom<string[]>(get => {
+  const full = get(fullCalendarSchedulesAtom)
+  const calendarIdSet = new Set<string>()
+  full.forEach(({ calendarId }) => calendarIdSet.add(calendarId as string))
+  return Array.from(calendarIdSet)
+})
 
 
 // ========================= dashboard =========================

src/style/index.less

@@ -133,32 +133,17 @@ a {
   width: 16px;
   height: 16px;
   border-radius: 4px;
-  /* border: 2px solid #409eff; */
   box-sizing: border-box;
   vertical-align: middle;
 }
 /* checked border */
-.check-box.checked::before {
-  content: "";
-  box-sizing: border-box;
-  display: inline-block;
-  width: 8px;
-  height: 11px;
-  border: 4px solid rgba(4, 85, 62, 0.5);
-  border-top: 0;
-  border-left: 0;
-  position: absolute;
-  left: 4px;
-  top: 7px;
-  transform: translateY(-50%) rotate(45deg);
-}
-.check-box.checked::after {
+.check-box.checked span {
   content: "";
   box-sizing: border-box;
   display: inline-block;
   width: 6px;
   height: 9px;
-  border: 2px solid #ddd;
+  border: 2px solid #fff;
   border-top: 0;
   border-left: 0;
   position: absolute;