feat: task grouping and sorting (#57)

Co-authored-by: Claude <[email protected]>

Author: jonathanlab

.claude/CLAUDE.md

@@ -4,6 +4,7 @@
 - Use `Kbd` for key hints. Fallback to Tailwind CSS when Radix lacks props.
 - Use zustand for state management.
 - Prefer creating separate, reusable components over large monolithic components.
+- When using Phosphor Icons, use the Icon name suffixed by `Icon` for the component name. For example, `<ArrowsDownUpIcon>`, not `<ArrowsDownUpIcon>`. Also import them  like so: `import { ArrowsDownUpIcon } from "@phosphor-icons/react";`
 
 ## Layout Components
 

src/api/posthogClient.ts

@@ -242,4 +242,11 @@ export class PostHogAPIClient {
     const data = await response.json();
     return data.results ?? data ?? [];
   }
+
+  async getUsers() {
+    const data = await this.api.get("/api/users/", {
+      query: { limit: 1000 },
+    });
+    return data.results ?? [];
+  }
 }

src/renderer/components/FolderPicker.tsx

@@ -1,4 +1,4 @@
-import { Folder, FolderIcon } from "@phosphor-icons/react";
+import { Folder as FolderIcon } from "@phosphor-icons/react";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import {
   Box,
@@ -187,7 +187,11 @@ export function FolderPicker({
         >
           <Flex justify="between" align="center" gap="2" width="100%">
             <Flex align="center" gap="2" style={{ minWidth: 0, flex: 1 }}>
-              <Folder size={16} weight="regular" style={{ flexShrink: 0 }} />
+              <FolderIcon
+                size={16}
+                weight="regular"
+                style={{ flexShrink: 0 }}
+              />
               <Text
                 size={size}
                 style={{

src/renderer/components/LogView.tsx

@@ -1,4 +1,9 @@
-import { CaretDown, CaretUp, Copy, Trash } from "@phosphor-icons/react";
+import {
+  CaretDown as CaretDownIcon,
+  CaretUp as CaretUpIcon,
+  Copy as CopyIcon,
+  Trash as TrashIcon,
+} from "@phosphor-icons/react";
 import type { AgentEvent } from "@posthog/agent";
 import {
   Box,
@@ -268,7 +273,7 @@ export function LogView({ logs, isRunning, onClearLogs }: LogViewProps) {
                     color="gray"
                     onClick={() => setExpandAll(false)}
                   >
-                    <CaretUp size={16} />
+                    <CaretUpIcon size={16} />
                   </IconButton>
                 </Tooltip>
                 <Tooltip content="Expand all">
@@ -278,7 +283,7 @@ export function LogView({ logs, isRunning, onClearLogs }: LogViewProps) {
                     color="gray"
                     onClick={() => setExpandAll(true)}
                   >
-                    <CaretDown size={16} />
+                    <CaretDownIcon size={16} />
                   </IconButton>
                 </Tooltip>
               </>
@@ -290,7 +295,7 @@ export function LogView({ logs, isRunning, onClearLogs }: LogViewProps) {
                 color="gray"
                 onClick={handleCopyLogs}
               >
-                <Copy size={16} />
+                <CopyIcon size={16} />
               </IconButton>
             </Tooltip>
             {onClearLogs && (
@@ -301,7 +306,7 @@ export function LogView({ logs, isRunning, onClearLogs }: LogViewProps) {
                   color="red"
                   onClick={onClearLogs}
                 >
-                  <Trash size={16} />
+                  <TrashIcon size={16} />
                 </IconButton>
               </Tooltip>
             )}

src/renderer/components/MainLayout.tsx

@@ -9,9 +9,9 @@ import { CommandMenu } from "./command";
 import { SettingsView } from "./SettingsView";
 import { StatusBar } from "./StatusBar";
 import { TabBar } from "./TabBar";
-import { TaskCreate } from "./TaskCreate";
-import { TaskDetail } from "./TaskDetail";
-import { TaskList } from "./TaskList";
+import { TaskCreate } from "./tasks/TaskCreate";
+import { TaskDetail } from "./tasks/TaskDetail";
+import { TaskList } from "./tasks/TaskList";
 
 export function MainLayout() {
   const { activeTabId, tabs, createTab, setActiveTab, closeTab } =

src/renderer/components/RichTextEditor.tsx

@@ -30,6 +30,7 @@ interface RichTextEditorProps {
   style?: React.CSSProperties;
   showToolbar?: boolean;
   minHeight?: string;
+  readOnly?: boolean;
 }
 
 export function RichTextEditor({
@@ -43,6 +44,7 @@ export function RichTextEditor({
   style,
   showToolbar = true,
   minHeight = "100px",
+  readOnly = false,
 }: RichTextEditorProps) {
   const [mentionItems, setMentionItems] = useState<MentionItem[]>([]);
   const mentionItemsRef = useRef(mentionItems);
@@ -63,6 +65,7 @@ export function RichTextEditor({
   }, [repoPath]);
 
   const editor = useEditor({
+    editable: !readOnly,
     extensions: [
       StarterKit.configure({
         // Disable default keyboard shortcuts to override them