feat: group by project/chronological sort improvements (#821)

Author: jonathanlab

apps/twig/src/renderer/features/sidebar/components/DraggableFolder.tsx

@@ -0,0 +1,32 @@
+import { useSortable } from "@dnd-kit/react/sortable";
+import type { ReactNode } from "react";
+
+interface DraggableFolderProps {
+  id: string;
+  index: number;
+  children: ReactNode;
+}
+
+export function DraggableFolder({ id, index, children }: DraggableFolderProps) {
+  const { ref, isDragging } = useSortable({
+    id,
+    index,
+    group: "sidebar-folders",
+    transition: {
+      duration: 200,
+      easing: "ease",
+    },
+  });
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        opacity: isDragging ? 0.5 : 1,
+        cursor: isDragging ? "grabbing" : undefined,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

apps/twig/src/renderer/features/sidebar/components/HistoryView.tsx

@@ -30,7 +30,7 @@ export function SidebarItem({
       className="group focus-visible:-outline-offset-2 flex w-full cursor-pointer items-start bg-transparent px-2 py-1.5 text-left font-mono text-[12px] text-gray-11 transition-colors hover:bg-gray-3 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent-8 data-[active]:bg-accent-4 data-[active]:text-gray-12"
       data-active={isActive || undefined}
       style={{
-        paddingLeft: `${depth * INDENT_SIZE + 8}px`,
+        paddingLeft: `${depth * INDENT_SIZE + 8 + (depth > 0 ? 4 : 0)}px`,
         gap: "4px",
       }}
       onClick={onClick}
@@ -39,14 +39,18 @@ export function SidebarItem({
       {icon && (
         <span
           className="flex shrink-0 items-center text-gray-10 group-data-[active]:text-gray-11"
-          style={{ height: "18px" }}
+          style={{
+            height: "18px",
+            width: "18px",
+            justifyContent: "center",
+          }}
         >
           {icon}
         </span>
       )}
       <span className="flex min-w-0 flex-1 flex-col overflow-hidden">
         <span className="flex items-center gap-1" style={{ height: "18px" }}>
-          <span className="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
+          <span className="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-gray-12">
             {label}
           </span>
           {endContent}

apps/twig/src/renderer/features/sidebar/components/SidebarItem.tsx

@@ -1,8 +1,6 @@
 import { DotsCircleSpinner } from "@components/DotsCircleSpinner";
 import { RenameTaskDialog } from "@components/RenameTaskDialog";
 import { useDeleteTask, useTasks } from "@features/tasks/hooks/useTasks";
-import { useTaskStore } from "@features/tasks/stores/taskStore";
-import { useMeQuery } from "@hooks/useMeQuery";
 import { useTaskContextMenu } from "@hooks/useTaskContextMenu";
 import { Box, Flex } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
@@ -12,15 +10,13 @@ import { useWorkspaceStore } from "@/renderer/features/workspace/stores/workspac
 import { useSidebarData } from "../hooks/useSidebarData";
 import { usePinnedTasksStore } from "../stores/pinnedTasksStore";
 import { useTaskViewedStore } from "../stores/taskViewedStore";
-import { HistoryView } from "./HistoryView";
 import { NewTaskItem } from "./items/HomeItem";
 import { SidebarItem } from "./SidebarItem";
+import { TaskListView } from "./TaskListView";
 
 function SidebarMenuComponent() {
   const { view, navigateToTask, navigateToTaskInput } = useNavigationStore();
 
-  const activeFilters = useTaskStore((state) => state.activeFilters);
-  const { data: currentUser } = useMeQuery();
   const { data: allTasks = [] } = useTasks();
 
   const workspaces = useWorkspaceStore.use.workspaces();
@@ -33,8 +29,6 @@ function SidebarMenuComponent() {
 
   const sidebarData = useSidebarData({
     activeView: view,
-    activeFilters,
-    currentUser,
   });
 
   const previousTaskIdRef = useRef<string | null>(null);
@@ -131,13 +125,15 @@ function SidebarMenuComponent() {
                 label="Loading tasks..."
               />
             ) : (
-              <HistoryView
-                historyData={sidebarData.historyData}
-                pinnedData={sidebarData.pinnedData}
+              <TaskListView
+                pinnedTasks={sidebarData.pinnedTasks}
+                flatTasks={sidebarData.flatTasks}
+                groupedTasks={sidebarData.groupedTasks}
                 activeTaskId={sidebarData.activeTaskId}
                 onTaskClick={handleTaskClick}
                 onTaskContextMenu={handleTaskContextMenu}
                 onTaskDelete={handleTaskDelete}
+                hasMore={sidebarData.hasMore}
               />
             )}
           </Flex>