update the tasklist

Author: Fr4nc3

src/frontend_react/src/components/content/TaskList.tsx

@@ -0,0 +1,70 @@
+import {
+    Accordion,
+    AccordionHeader,
+    AccordionItem,
+    AccordionPanel,
+    Button,
+    Menu,
+    MenuList,
+    MenuItem,
+    MenuPopover,
+    MenuTrigger,
+} from "@fluentui/react-components";
+import { MoreHorizontal20Regular } from "@fluentui/react-icons";
+import React from "react";
+import "../../styles/TaskList.css";
+
+
+
+const TaskList: React.FC<TaskListProps> = ({
+    inProgressTasks,
+    completedTasks,
+    onTaskSelect,
+}) => {
+    const renderTaskItem = (task: Task) => (<div
+        key={task.id}
+        className="task-list-task-item"
+        onClick={() => onTaskSelect(task.id)}
+    >
+        <div>
+            <div>{task.name}</div>
+            {task.date && (
+                <div className="task-list-task-date">
+                    {task.date}
+                </div>
+            )}
+        </div>            <Menu>
+            <MenuTrigger>
+                <Button
+                    appearance="subtle"
+                    icon={<MoreHorizontal20Regular />}
+                    onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                />
+            </MenuTrigger>
+        </Menu>
+    </div>
+    );
+
+    return (
+        <Accordion defaultOpenItems={["inprogress"]} collapsible>
+            <AccordionItem value="inprogress">
+                <AccordionHeader>
+                    In progress
+                </AccordionHeader>
+                <AccordionPanel>
+                    {inProgressTasks.map(renderTaskItem)}
+                </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem value="completed">
+                <AccordionHeader>
+                    Completed
+                </AccordionHeader>
+                <AccordionPanel>
+                    {completedTasks.map(renderTaskItem)}
+                </AccordionPanel>
+            </AccordionItem>
+        </Accordion>
+    );
+};
+
+export default TaskList; 

src/frontend_react/src/models/index.tsx

@@ -11,5 +11,6 @@ export * from './messages';
 export * from './inputTask';
 export * from './agentMessage';
 export * from './taskDetails';
+export * from './taskList';
 
 // Add other model exports as needed

src/frontend_react/src/models/taskList.tsx

@@ -0,0 +1,12 @@
+export interface Task {
+    id: string;
+    name: string;
+    status: 'inprogress' | 'completed';
+    date?: string;
+}
+
+export interface TaskListProps {
+    inProgressTasks: Task[];
+    completedTasks: Task[];
+    onTaskSelect: (taskId: string) => void;
+}

src/frontend_react/src/pages/PlanPage.tsx

@@ -7,6 +7,7 @@ import {
     CardHeader
 } from '@fluentui/react-components';
 import {
+    Add20Regular,
     ArrowLeft24Regular,
     ErrorCircle24Regular
 } from '@fluentui/react-icons';
@@ -15,6 +16,9 @@ import '../styles/PlanPage.css';
 import CoralShellColumn from '../coral/components/Layout/CoralShellColumn';
 import CoralShellRow from '../coral/components/Layout/CoralShellRow';
 import Content from '../coral/components/Content/Content';
+import PanelLeft from '../coral/components/Panels/PanelLeft';
+import PanelLeftToolbar from '../coral/components/Panels/PanelLeftToolbar';
+import TaskList from '../components/content/TaskList';
 
 /**
  * Page component for displaying a specific plan
@@ -28,17 +32,37 @@ const PlanPage: React.FC = () => {
     const handleBackClick = () => {
         navigate(-1);
     };
-
+    const handleTaskSelect = (taskId: string) => {
+        setActiveTaskId(taskId);
+    };
     // Show error if no planId is provided
 
 
     return (
         <CoralShellColumn>
             <CoralShellRow>
-                <Content>
-
-                </Content>
+                <div style={{ flexShrink: 0, display: "flex", overflow: "hidden" }}>
+                    <PanelLeft
+                        panelWidth={280}
+                        panelResize={true}>
+                        <PanelLeftToolbar panelTitle="" panelIcon={null}>
+                            <Button
+                                icon={<Add20Regular />}
+                                onClick={() => handleNewTask("New task")}
+                            >
+                                New task
+                            </Button>
+                        </PanelLeftToolbar>
+                        <TaskList
+                            inProgressTasks={inProgressTasks}
+                            completedTasks={completedTasks}
+                            onTaskSelect={handleTaskSelect}
+                        />
+                    </PanelLeft>
+                    <Content>
 
+                    </Content>
+                </div>
             </CoralShellRow>
         </CoralShellColumn>
     );

src/frontend_react/src/styles/TaskList.css

@@ -0,0 +1,22 @@
+/* TaskList Component Styles */
+
+.task-list-task-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    cursor: pointer;
+    background-color: #fafafa; /* tokens.colorNeutralBackground1 */
+    transition-property: background-color;
+    transition-duration: 0.1s; /* tokens.durationFaster */
+    transition-timing-function: cubic-bezier(0.33, 0.00, 0.67, 1.00); /* tokens.curveEasyEase */
+}
+
+.task-list-task-item:hover {
+    background-color: #f5f5f5; /* tokens.colorNeutralBackground1Hover */
+}
+
+.task-list-task-date {
+    font-size: 0.75rem; /* tokens.fontSizeBase200 */
+    color: #616161; /* tokens.colorNeutralForeground2 */
+}