From f1780f91dec2196d8d34c6b350168757c6826460 Mon Sep 17 00:00:00 2001 From: JonathanLab Date: Tue, 21 Apr 2026 16:50:00 +0200 Subject: [PATCH 1/2] feat(sidebar): group tasks by relative date in task list view Generated-By: PostHog Code Task-Id: 844c45f7-36dd-4201-b51f-2120c4ee7561 --- apps/code/package.json | 2 +- .../sidebar/components/TaskListView.tsx | 58 +++++++++++++------ apps/code/src/renderer/utils/time.ts | 17 ++++++ 3 files changed, 58 insertions(+), 19 deletions(-) diff --git a/apps/code/package.json b/apps/code/package.json index ef6fc96e9..a2b014c83 100644 --- a/apps/code/package.json +++ b/apps/code/package.json @@ -130,8 +130,8 @@ "@posthog/electron-trpc": "workspace:*", "@posthog/git": "workspace:*", "@posthog/hedgehog-mode": "^0.0.48", - "@posthog/quill": "0.1.0-alpha.7", "@posthog/platform": "workspace:*", + "@posthog/quill": "0.1.0-alpha.7", "@posthog/shared": "workspace:*", "@radix-ui/react-collapsible": "^1.1.12", "@radix-ui/react-icons": "^1.3.2", diff --git a/apps/code/src/renderer/features/sidebar/components/TaskListView.tsx b/apps/code/src/renderer/features/sidebar/components/TaskListView.tsx index 820fe3be6..6e306f501 100644 --- a/apps/code/src/renderer/features/sidebar/components/TaskListView.tsx +++ b/apps/code/src/renderer/features/sidebar/components/TaskListView.tsx @@ -20,7 +20,8 @@ import { Flex, Text } from "@radix-ui/themes"; import { useWorkspace } from "@renderer/features/workspace/hooks/useWorkspace"; import { normalizeRepoKey } from "@shared/utils/repo"; import { useNavigationStore } from "@stores/navigationStore"; -import { useCallback, useEffect } from "react"; +import { getRelativeDateGroup } from "@utils/time"; +import { Fragment, useCallback, useEffect, useMemo } from "react"; import type { TaskData, TaskGroup } from "../hooks/useSidebarData"; import { useSidebarStore } from "../stores/sidebarStore"; import { DraggableFolder } from "./DraggableFolder"; @@ -246,6 +247,20 @@ export function TaskListView({ const timestampKey: "lastActivityAt" | "createdAt" = sortMode === "updated" ? "lastActivityAt" : "createdAt"; + const dateGroupedTasks = useMemo(() => { + const groups: { label: string; tasks: TaskData[] }[] = []; + for (const task of flatTasks) { + const label = getRelativeDateGroup(task[timestampKey]); + const last = groups[groups.length - 1]; + if (last && last.label === label) { + last.tasks.push(task); + } else { + groups.push({ label, tasks: [task] }); + } + } + return groups; + }, [flatTasks, timestampKey]); + return ( {pinnedTasks.length > 0 && ( @@ -363,23 +378,30 @@ export function TaskListView({ ) : ( - {flatTasks.map((task) => ( - onTaskClick(task.id)} - onDoubleClick={() => onTaskDoubleClick(task.id)} - onContextMenu={(e, isPinned) => - onTaskContextMenu(task.id, e, isPinned) - } - onArchive={() => onTaskArchive(task.id)} - onTogglePin={() => onTaskTogglePin(task.id)} - onEditSubmit={(newTitle) => onTaskEditSubmit(task.id, newTitle)} - onEditCancel={onTaskEditCancel} - timestamp={task[timestampKey]} - /> + {dateGroupedTasks.map((group) => ( + + + {group.tasks.map((task) => ( + onTaskClick(task.id)} + onDoubleClick={() => onTaskDoubleClick(task.id)} + onContextMenu={(e, isPinned) => + onTaskContextMenu(task.id, e, isPinned) + } + onArchive={() => onTaskArchive(task.id)} + onTogglePin={() => onTaskTogglePin(task.id)} + onEditSubmit={(newTitle) => + onTaskEditSubmit(task.id, newTitle) + } + onEditCancel={onTaskEditCancel} + timestamp={task[timestampKey]} + /> + ))} + ))} {hasMore && (
diff --git a/apps/code/src/renderer/utils/time.ts b/apps/code/src/renderer/utils/time.ts index 5b49aa831..d1e3bc6f5 100644 --- a/apps/code/src/renderer/utils/time.ts +++ b/apps/code/src/renderer/utils/time.ts @@ -50,3 +50,20 @@ export function formatRelativeTimeLong(timestamp: number | string): string { year: "numeric", }); } + +export function getRelativeDateGroup(timestamp: number | string): string { + const date = + typeof timestamp === "string" ? new Date(timestamp) : new Date(timestamp); + const startOfToday = new Date(); + startOfToday.setHours(0, 0, 0, 0); + const startOfDate = new Date(date); + startOfDate.setHours(0, 0, 0, 0); + const days = Math.round( + (startOfToday.getTime() - startOfDate.getTime()) / 86_400_000, + ); + if (days <= 0) return "Today"; + if (days === 1) return "Yesterday"; + if (days < 7) return "This week"; + if (days < 30) return "This month"; + return "Earlier"; +} From 4c1535ab479cb16be70cf4355f88905767669af9 Mon Sep 17 00:00:00 2001 From: JonathanLab Date: Tue, 21 Apr 2026 16:51:59 +0200 Subject: [PATCH 2/2] feat(sidebar): return null from getRelativeDateGroup for today's tasks Generated-By: PostHog Code Task-Id: 844c45f7-36dd-4201-b51f-2120c4ee7561 --- .../renderer/features/sidebar/components/TaskListView.tsx | 6 +++--- apps/code/src/renderer/utils/time.ts | 6 ++++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/apps/code/src/renderer/features/sidebar/components/TaskListView.tsx b/apps/code/src/renderer/features/sidebar/components/TaskListView.tsx index 6e306f501..93425cd93 100644 --- a/apps/code/src/renderer/features/sidebar/components/TaskListView.tsx +++ b/apps/code/src/renderer/features/sidebar/components/TaskListView.tsx @@ -248,7 +248,7 @@ export function TaskListView({ sortMode === "updated" ? "lastActivityAt" : "createdAt"; const dateGroupedTasks = useMemo(() => { - const groups: { label: string; tasks: TaskData[] }[] = []; + const groups: { label: string | null; tasks: TaskData[] }[] = []; for (const task of flatTasks) { const label = getRelativeDateGroup(task[timestampKey]); const last = groups[groups.length - 1]; @@ -379,8 +379,8 @@ export function TaskListView({ ) : ( {dateGroupedTasks.map((group) => ( - - + + {group.label && } {group.tasks.map((task) => (