Added "rm", "help" commands and fixed empty lists

Author: technoph1le

src/components/CommandLine.tsx

@@ -1,4 +1,4 @@
-import { FormEvent } from "preact/compat";
+import { FormEvent, useRef } from "preact/compat";
 
 type Props = {
   command: string;
@@ -7,16 +7,24 @@ type Props = {
 };
 
 const CommandLine = ({ command, setCommand, handleCommand }: Props) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
   const onSubmit = (e: FormEvent) => {
     e.preventDefault();
     handleCommand(command);
+
+    // keep the input in focus after command submission
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
   };
 
   return (
     <div className="terminal__commandline">
       <span className="terminal__user">~$</span>
       <form onSubmit={onSubmit} className="terminal__form">
         <input
+          ref={inputRef}
           type="text"
           value={command}
           onChange={(e) => setCommand((e.target as HTMLInputElement).value)}

src/hooks/useTerminal.ts

@@ -9,6 +9,7 @@ export const useTerminal = () => {
   const [tasks, dispatch] = useReducer(taskReducer, []);
 
   const executeCommand = (command: string) => {
+    // "add" command
     if (command.startsWith("add")) {
       const task = command.match(/"([^"]+)"/)?.[1];
       if (!task) {
@@ -18,7 +19,7 @@ export const useTerminal = () => {
       return `Task added: ${task}`;
     }
 
-    if (command.startsWith("mark")) {
+    if (command.startsWith("check")) {
       const match = command.match(/#(\d+)/);
       if (!match) {
         return `Invalid command format. Use: check #taskId (e.g., check #1)`;
@@ -38,6 +39,28 @@ export const useTerminal = () => {
       return `Task marked as done: ${task.name}`;
     }
 
+    // "rm" command
+    if (command.startsWith("rm")) {
+      const match = command.match(/#(\d+)/);
+      if (!match) {
+        return `Invalid command format. Use: rm #taskId (e.g., rm #1)`;
+      }
+
+      const taskId = parseInt(match[1], 10);
+      if (isNaN(taskId)) {
+        return `Invalid task ID. Use a valid number with the format: rm #taskId (e.g., rm #1)`;
+      }
+
+      const task = tasks.find((task) => task.id === taskId);
+      if (!task) {
+        return `Task with ID #${taskId} not found.`;
+      }
+
+      dispatch({ type: "REMOVE_TASK", payload: { id: taskId } });
+      return `Task removed: ${task.name}`;
+    }
+
+    // "cat" command
     if (command.startsWith("cat")) {
       const match = command.match(/#(\d+)/);
       if (!match) {
@@ -64,15 +87,35 @@ export const useTerminal = () => {
         `;
     }
 
+    // "ls" command
     if (command === "ls") {
-      return tasks
+      const listedTasks = tasks
         .map(
           (task) =>
             `${task.id}. [${task.status === "done" ? "x" : " "}] ${task.name}`
         )
         .join("\n");
+
+      if (!listedTasks) {
+        return "<empty list>";
+      }
+
+      return listedTasks;
+    }
+
+    // "help" command
+    if (command === "help") {
+      return `
+        add "task name" - Add a new task\n
+        rm #taskId - Remove a task\n
+        cat #taskId - Show info about a task\n
+        check #taskId - Mark the task as done\n
+        ls - List all the tasks\n
+        clear - Clear the terminal display\n
+      `;
     }
 
+    // "clear" command
     if (command === "clear") {
       setHistory([]);
       setCommand("");