Adds option to always apply filter color

src/Agenda3/components/Backlog.tsx

@@ -13,6 +13,7 @@ import { logseqAtom } from '@/Agenda3/models/logseq'
 import { settingsAtom } from '@/Agenda3/models/settings'
 import { cn } from '@/util/util'
 
+import { selectTaskColor } from '../helpers/util'
 import { backlogsAtom } from '../models/entities/backlogs'
 import s from './backlog.module.less'
 import LogseqLogo from './icons/LogseqLogo'
@@ -103,11 +104,12 @@ const Backlog = ({ bindCalendar = true }: { bindCalendar?: boolean }) => {
                     return (
                       <div
                         key={task.id}
-                        className="droppable-task-element group cursor-move break-all rounded border bg-[#f9fafb] px-2 py-2 text-sm text-gray-600 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-500"
+                        className="droppable-task-element group cursor-move break-all rounded border bg-[#f9fafb] px-2 py-2 text-sm text-gray-600
+                          dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-500"
                         data-event={JSON.stringify({
                           id: task.id,
                           title: task.showTitle,
-                          color: groupType === 'page' ? task.project.bgColor : task.filters?.[0]?.color,
+                          color: selectTaskColor(groupType, task),
                           backlog: true,
                         })}
                       >

src/Agenda3/components/kanban/Column.tsx

@@ -32,7 +32,11 @@ const Column = ({ day, tasks, allKanbanItems }: ColumnProps, ref) => {
   const isToday = day.isSame(today, 'day')
   const doneTasks = tasks.filter((task) => task.status === 'done')
   const undoneTasks = tasks.filter((task) => task.status !== 'done')
-  const _dayTasks = undoneTasks.concat(doneTasks)
+  const _dayTasks = undoneTasks.concat(doneTasks).sort((a, b) => {
+    if (a.multiDayStart && !b.multiDayStart) return -1
+    if (!a.multiDayStart && b.multiDayStart) return 1
+    return a.multiDayStart?.isAfter(b.multiDayStart) ? 1 : -1
+  })
   const estimatedTime = _dayTasks.reduce((acc, task) => {
     return acc + (task.estimatedTime ?? DEFAULT_ESTIMATED_TIME)
   }, 0)

src/Agenda3/components/kanban/kanban.module.less

@@ -0,0 +1,3 @@
+.multidayTaskElement {
+  filter: brightness(.9);
+}

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

@@ -7,6 +7,7 @@ import { VscDebugConsole } from 'react-icons/vsc'
 
 import { minutesToHHmm } from '@/Agenda3/helpers/fullCalendar'
 import { navToLogseqBlock } from '@/Agenda3/helpers/logseq'
+import { selectTaskColor } from '@/Agenda3/helpers/util'
 import useAgendaEntities from '@/Agenda3/hooks/useAgendaEntities'
 import { logseqAtom } from '@/Agenda3/models/logseq'
 import { settingsAtom } from '@/Agenda3/models/settings'
@@ -17,6 +18,7 @@ import { cn } from '@/util/util'
 
 import Group from '../../Group'
 import TaskModal from '../../modals/TaskModal'
+import s from '../kanban.module.less'
 import Toolbar from './Toolbar'
 
 const TaskCard = ({ task }: { task: AgendaTaskWithStartOrDeadline }) => {
@@ -67,13 +69,14 @@ const TaskCard = ({ task }: { task: AgendaTaskWithStartOrDeadline }) => {
           'bg-[#edeef0] opacity-80 dark:bg-[#2f2f33]': task.status === 'done',
           // 循环任务及多天任务不能拖拽
           'droppable-task-element': !editDisabled && !isMultipleDays && !noStart,
+          [s.multidayTaskElement]: isMultipleDays,
         },
       )}
       data-event={JSON.stringify({
         id: task.id,
         title: task.showTitle,
         duration: minutesToHHmm(estimatedTime),
-        color: groupType === 'page' ? task.project.bgColor : task?.filters?.[0]?.color,
+        color: selectTaskColor(groupType, task),
       })}
       data-id={task.id}
     >

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

@@ -8,7 +8,7 @@ import { IoRepeatOutline } from 'react-icons/io5'
 
 import { minutesToHHmm } from '@/Agenda3/helpers/fullCalendar'
 import { navToLogseqBlock } from '@/Agenda3/helpers/logseq'
-import { getDaysBetween } from '@/Agenda3/helpers/util'
+import { getDaysBetween, selectTaskColor } from '@/Agenda3/helpers/util'
 import { logseqAtom } from '@/Agenda3/models/logseq'
 import { DEFAULT_ESTIMATED_TIME } from '@/constants/agenda'
 import type { AgendaEntity } from '@/types/entity'
@@ -48,7 +48,7 @@ const Toolbar = ({
           <span
             className="rounded px-1 py-0.5 text-[10px] text-white opacity-70"
             style={{
-              backgroundColor: groupType === 'page' ? task.project.bgColor : task?.filters?.[0]?.color,
+              backgroundColor: selectTaskColor(groupType, task),
             }}
           >
             {task.start.format('HH:mm')}

src/Agenda3/components/modals/EditFilterModal.tsx

@@ -1,4 +1,4 @@
-import { Form, Input, Modal } from 'antd'
+import { Form, Input, Modal, Checkbox } from 'antd'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -53,6 +53,14 @@ const EditFilterModal = ({
           <Form.Item label={t('Filter Name')} name="name" rules={[{ required: true }]}>
             <Input />
           </Form.Item>
+          <Form.Item
+            label={t('Always enabled')}
+            name="alwaysEnabled"
+            valuePropName="checked"
+            rules={[{ required: true }]}
+          >
+            <Checkbox />
+          </Form.Item>
           <Form.Item label="Query" name="query" rules={[{ required: true }]}>
             <Input.TextArea autoSize />
           </Form.Item>

src/Agenda3/helpers/fullCalendar.ts

@@ -3,6 +3,8 @@ import type { CalendarEvent } from '@/types/fullcalendar'
 import type { AgendaTaskWithDeadline, AgendaTaskWithStart, AgendaTaskWithStartOrDeadline } from '@/types/task'
 import { padZero } from '@/util/util'
 
+import { selectTaskColor } from './util'
+
 /**
  * transform agenda task to calendar event
  */
@@ -13,7 +15,7 @@ export const transformAgendaTaskToCalendarEvent = (
   },
 ): CalendarEvent[] => {
   const { showFirstEventInCycleOnly = false, showTimeLog = false, groupType } = options
-  const { estimatedTime = DEFAULT_ESTIMATED_TIME, timeLogs = [], status, actualTime } = task
+  const { estimatedTime = task.estimatedTime || 20, timeLogs = [], status, actualTime } = task
   const rrule: CalendarEvent['rrule'] =
     showFirstEventInCycleOnly && task.rrule
       ? {
@@ -30,7 +32,7 @@ export const transformAgendaTaskToCalendarEvent = (
       end: log.end.toDate(),
       extendedProps: task,
       editable: false,
-      color: groupType === 'page' ? task.project.bgColor : task.filters?.[0]?.color,
+      color: selectTaskColor(groupType, task),
     }))
   }
   let spanTime: number
@@ -68,7 +70,7 @@ export const transformAgendaTaskToCalendarEvent = (
       // 只有时间点事件才能传 duration
       duration: allDay ? undefined : { minute: spanTime },
       editable: !(task.recurringPast || task.rrule || !task.start),
-      color: groupType === 'page' ? task.project.bgColor : task.filters?.[0]?.color,
+      color: selectTaskColor(groupType, task),
     },
   ]
 }

src/Agenda3/helpers/task.ts

@@ -79,6 +79,7 @@ export const getAgendaEntities = async (settings: Settings) => {
   blocks = blocks.flat()
 
   const filters = settings.filters?.filter((_filter) => settings.selectedFilters?.includes(_filter.id)) ?? []
+  const filtersEnabledInDefaultView = settings.filters?.filter((_filter) => _filter.alwaysEnabled) ?? []
 
   if (settings.selectedFilters?.length) {
     const filterBlocks = await retrieveFilteredBlocks(filters)
@@ -93,7 +94,18 @@ export const getAgendaEntities = async (settings: Settings) => {
             .map((filterBlock) => filterBlock.filter),
         }
       })
+  } else if (filtersEnabledInDefaultView?.length > 0) {
+    const filterBlocks = await retrieveFilteredBlocks(filtersEnabledInDefaultView)
+    blocks = blocks.map((block) => {
+      return {
+        ...block,
+        filters: filterBlocks
+          .filter((filterBlock) => filterBlock.uuid === block.uuid)
+          .map((filterBlock) => filterBlock.filter),
+      }
+    })
   }
+
   const promiseList: Promise<AgendaEntity[]>[] = blocks.map(async (block) => {
     const _block = {
       ...block,
@@ -261,13 +273,20 @@ export const transformBlockToAgendaEntity = async (
 
   // filters
   let _filters: Filter[] = filters ?? []
-  if (settings.selectedFilters?.length && !filters?.length) {
-    const settingsFilters = settings.filters?.filter((_filter) => settings.selectedFilters?.includes(_filter.id)) ?? []
+  const settingsFilters = settings.filters?.filter((_filter) => settings.selectedFilters?.includes(_filter.id)) ?? []
+  const filtersEnabledInDefaultView = settings.filters?.filter((_filter) => _filter.alwaysEnabled) ?? []
+  if (settingsFilters?.length && !filters?.length) {
     const filterBlocks = await retrieveFilteredBlocks(settingsFilters)
     const belongFilters = filterBlocks
       .filter((filterBlock) => filterBlock.uuid === block.uuid)
       .map((filterBlock) => filterBlock.filter)
     _filters = belongFilters
+  } else if (filtersEnabledInDefaultView?.length > 0) {
+    const filterBlocks = await retrieveFilteredBlocks(filtersEnabledInDefaultView)
+    const belongFilters = filterBlocks
+      .filter((filterBlock) => filterBlock.uuid === block.uuid)
+      .map((filterBlock) => filterBlock.filter)
+    _filters = belongFilters
   }
 
   return {
@@ -381,12 +400,14 @@ export const transformTasksToKanbanTasks = (
       // splitting multi-days task into single-day tasks
       if (allDay && end && start) {
         const days = genDays(start, end)
+        const multiDayStart = start
         return days.map((day) => {
           const isPast = day.isBefore(today, 'day')
           const isEndDay = day.isSame(end, 'day')
           return {
             ...task,
             start: day,
+            multiDayStart,
             // filtered: true,
             // 过去且不是结束日期的任务默认为已完成
             status: (isPast && !isEndDay) || task.status === 'done' ? 'done' : 'todo',

src/Agenda3/helpers/util.ts

@@ -1,5 +1,7 @@
 import type { Dayjs } from 'dayjs'
 
+import type { AgendaEntity } from '@/types/entity'
+
 /**
  * 计算两个日期之间的天数
  */
@@ -8,3 +10,7 @@ export const getDaysBetween = (start: Dayjs, end: Dayjs) => {
   const _end = end.startOf('day')
   return _end.diff(_start, 'day')
 }
+
+export function selectTaskColor(groupType: string, task: AgendaEntity) {
+  return !task?.filters?.[0]?.alwaysEnabled && groupType === 'page' ? task.project.bgColor : task?.filters?.[0]?.color
+}

src/Agenda3/locales/en/translation.json

@@ -35,6 +35,7 @@
   "Edit Filter": "Edit Filter",
   "Filter Color": "Filter Color",
   "Filter Name": "Filter Name",
+  "Always enabled": "Always enabled",
   "Share Agenda": "Share Agenda",
   "ICS File Setting": "ICS File Setting",
   "Github Repo": "Github Repo",

src/Agenda3/models/settings.ts

@@ -35,4 +35,5 @@ export type Filter = {
   name: string
   query: string
   color: string
+  alwaysEnabled: boolean
 }

src/pages/Settings/index.tsx

@@ -80,7 +80,7 @@ const Settings: React.FC<{
     const _allValues = cloneDeep(allValues)
 
     // Automatically changes the color of text and border when the background color changes
-    ;['logKey', 'journal'].forEach((key) => {
+    ;(['logKey', 'journal'] as const).forEach((key) => {
       const bgColor = get(changedValues, [key, 'bgColor'])
       if (bgColor) {
         const textColor = autoTextColor(bgColor)
@@ -90,8 +90,8 @@ const Settings: React.FC<{
         set(_allValues, [key, 'borderColor'], bgColor)
       }
     })
-    ;['projectList', 'calendarList', 'subscriptionList', 'dailyLogTagList'].forEach((key) => {
-      const index = get(changedValues, [key])?.findIndex(Boolean)
+    ;(['projectList', 'calendarList', 'subscriptionList', 'dailyLogTagList'] as const).forEach((key) => {
+      const index = get(changedValues, [key])?.findIndex(Boolean) ?? -1
       const bgColor = get(changedValues, [key, index, 'bgColor'])
       if (bgColor) {
         const textColor = autoTextColor(bgColor)
@@ -174,11 +174,11 @@ const Settings: React.FC<{
   }, [])
 
   return (
-    <div className="page-container p-8 flex flex-col items-center">
+    <div className="page-container flex flex-col items-center p-8">
       <Typography.Title className={classNames(s.title, 'title-text')} level={3}>
         Settings
       </Typography.Title>
-      <div className={classNames(s.content, 'rounded-2xl flex')}>
+      <div className={classNames(s.content, 'flex rounded-2xl')}>
         <div className="flex flex-col justify-between pr-5">
           <Tabs value={tab} tabs={TABS} onChange={onTabChange} />
           <Popconfirm

src/patches.d.ts

@@ -0,0 +1,7 @@
+import '@radix-ui/react-dialog'
+
+declare module '@radix-ui/react-dialog' {
+  interface DialogPortalProps {
+    className?: string
+  }
+}

src/types/entity.ts

@@ -14,6 +14,7 @@ export type AgendaEntity = {
   showTitle: string
   status: 'todo' | 'done'
   allDay: boolean
+  multiDayStart?: Dayjs
   start?: Dayjs // logseq scheduled
   end?: Dayjs // from agenda drawer end
   // logseq deadline

src/util/subscription.ts

@@ -75,7 +75,6 @@ export const getSubCalendarSchedules = async (
   const schedulePromiseList = await Promise.allSettled(subPromiseList)
   const schedules: ISchedule[] = schedulePromiseList
     .filter((item) => item?.status === 'fulfilled')
-    // @ts-expect-error map
     .map((item) => item?.value)
     ?.flat()