update return home page button

Author: Fr4nc3

src/frontend_react/src/components/content/HomeInput.tsx

@@ -18,16 +18,33 @@ import "./../../styles/Chat.css"; // Assuming you have a CSS file for additional
 import "./../../styles/HomeInput.css";
 import { HomeInputProps, quickTasks, QuickTask } from "../../models/homeInput";
 import { TaskService } from "../../services/TaskService";
+import { NewTaskService } from "../../services/NewTaskService";
 
 
 const HomeInput: React.FC<HomeInputProps> = ({
     onInputSubmit,
     onQuickTaskSelect,
-}) => {
-    const [inputValue, setInputValue] = React.useState("");
+}) => {    const [inputValue, setInputValue] = React.useState("");
     const textareaRef = useRef<HTMLTextAreaElement>(null);
     const navigate = useNavigate();
 
+    /**
+     * Reset textarea to empty state
+     */
+    const resetTextarea = () => {
+        setInputValue("");
+        if (textareaRef.current) {
+            textareaRef.current.style.height = "auto";
+            textareaRef.current.focus();
+        }
+    };
+
+    // Listen for new task reset events
+    useEffect(() => {
+        const cleanup = NewTaskService.addResetListener(resetTextarea);
+        return cleanup;
+    }, []);
+
     const handleSubmit = async () => {
         if (inputValue.trim()) {
             try {

src/frontend_react/src/pages/HomePage.tsx

@@ -25,6 +25,7 @@ import { TaskService } from '../services/TaskService';
 import { apiService } from '../api/apiService';
 import { PlanWithSteps } from '../models';
 import HomeInput from '@/components/content/HomeInput';
+import { NewTaskService } from '../services/NewTaskService';
 
 /**
  * HomePage component - displays task lists and provides navigation
@@ -63,9 +64,16 @@ const HomePage: React.FC = () => {
     // Load data on component mount
     useEffect(() => {
         loadPlansData();
-    }, [loadPlansData]);
+    }, [loadPlansData]);    /**
+     * Handle new task creation from the "New task" button
+     * Resets textarea to empty state on HomePage
+     */
+    const handleNewTaskButton = useCallback(() => {
+        NewTaskService.handleNewTaskFromHome();
+    }, []);
+
     /**
-     * Handle new task creation - placeholder for future implementation
+     * Handle new task creation from input submission - placeholder for future implementation
      */
     const handleNewTask = useCallback((taskName: string) => {
         console.log('Creating new task:', taskName);
@@ -116,11 +124,10 @@ const HomePage: React.FC = () => {
                     <div style={{ flexShrink: 0, display: "flex", overflow: "hidden" }}>
                         <PanelLeft
                             panelWidth={280}
-                            panelResize={true}>
-                            <PanelLeftToolbar panelTitle="Tasks" panelIcon={null}>
+                            panelResize={true}>                            <PanelLeftToolbar panelTitle="Tasks" panelIcon={null}>
                                 <Button
                                     icon={<Add20Regular />}
-                                    onClick={() => handleNewTask("New task")}
+                                    onClick={handleNewTaskButton}
                                     disabled={plansLoading}
                                 >
                                     New task

src/frontend_react/src/pages/PlanPage.tsx

@@ -18,6 +18,7 @@ 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';
+import { NewTaskService } from '../services/NewTaskService';
 
 /**
  * Page component for displaying a specific plan
@@ -38,10 +39,9 @@ const PlanPage: React.FC = () => {
 
     const handleTaskSelect = (taskId: string) => {
         console.log(`Selected task ID: ${taskId}`);
-    };
-
-    const handleNewTask = (taskName: string) => {
-        console.log(`Creating new task: ${taskName}`);
+    };    const handleNewTask = () => {
+        // Use NewTaskService to handle navigation to homepage and reset textarea
+        NewTaskService.handleNewTaskFromPlan(navigate);
     };
 
     // Show error if no planId is provided
@@ -60,11 +60,10 @@ const PlanPage: React.FC = () => {
                 <div style={{ flexShrink: 0, display: "flex", overflow: "hidden" }}>
                     <PanelLeft
                         panelWidth={280}
-                        panelResize={true}>
-                        <PanelLeftToolbar panelTitle="" panelIcon={null}>
+                        panelResize={true}>                        <PanelLeftToolbar panelTitle="" panelIcon={null}>
                             <Button
                                 icon={<Add20Regular />}
-                                onClick={() => handleNewTask("New task")}
+                                onClick={handleNewTask}
                             >
                                 New task
                             </Button>

src/frontend_react/src/services/NewTaskService.tsx

@@ -0,0 +1,63 @@
+
+/**
+ * Service for handling "New Task" button functionality across different pages
+ * Provides reusable methods for navigating to homepage and resetting textarea
+ */
+export class NewTaskService {
+    /**
+     * Event name for textarea reset functionality
+     */
+    private static readonly RESET_TEXTAREA_EVENT = 'resetTextarea';
+
+    /**
+     * Handle new task action from PlanPage
+     * Navigates to homepage and resets textarea
+     * @param navigate - React Router navigate function
+     */
+    static handleNewTaskFromPlan(navigate: (to: string) => void): void {
+        // Navigate to homepage
+        navigate('/');
+        
+        // Emit event to reset textarea after navigation
+        // Use setTimeout to ensure navigation completes first
+        setTimeout(() => {
+            NewTaskService.resetTextarea();
+        }, 100);
+    }
+
+    /**
+     * Handle new task action from HomePage
+     * Resets textarea to empty state
+     */
+    static handleNewTaskFromHome(): void {
+        NewTaskService.resetTextarea();
+    }
+
+    /**
+     * Reset textarea to empty state
+     * Emits a custom event that HomeInput component can listen to
+     */
+    static resetTextarea(): void {
+        const event = new CustomEvent(NewTaskService.RESET_TEXTAREA_EVENT);
+        window.dispatchEvent(event);
+    }
+
+    /**
+     * Add event listener for textarea reset
+     * Should be called in HomeInput component
+     * @param callback - Function to call when reset event is triggered
+     * @returns Cleanup function to remove the event listener
+     */
+    static addResetListener(callback: () => void): () => void {
+        const handleReset = () => {
+            callback();
+        };
+
+        window.addEventListener(NewTaskService.RESET_TEXTAREA_EVENT, handleReset);
+
+        // Return cleanup function
+        return () => {
+            window.removeEventListener(NewTaskService.RESET_TEXTAREA_EVENT, handleReset);
+        };
+    }
+}