feat: Add basic todo functionality (#74)

m4tt72 · web-flow · commit 20978f1ec1b7 · 2025-09-20T12:56:39.000+02:00
diff --git a/src/utils/commands.ts b/src/utils/commands.ts
@@ -1,21 +1,44 @@
-import packageJson from '../../package.json';
-import themes from '../../themes.json';
-import { history } from '../stores/history';
-import { theme } from '../stores/theme';
+import packageJson from "../../package.json";
+import themes from "../../themes.json";
+import { history } from "../stores/history";
+import { theme } from "../stores/theme";
+import { todoManager } from "./todo";
 
 const hostname = window.location.hostname;
 
 export const commands: Record<string, (args: string[]) => Promise<string> | string> = {
-  help: () => 'Available commands: ' + Object.keys(commands).join(', '),
+  help: () => {
+    const categories = {
+      System: ["help", "clear", "date", "exit"],
+      Productivity: ["todo", "weather"],
+      Customization: ["theme", "banner"],
+      Network: ["curl", "hostname", "whoami"],
+      Contact: ["email", "repo", "donate"],
+      Fun: ["echo", "sudo", "vi", "vim", "emacs"],
+    };
+
+    let output = "Available commands:\n\n";
+
+    for (const [category, cmds] of Object.entries(categories)) {
+      output += `${category}:\n`;
+      output += cmds.map((cmd) => `  ${cmd}`).join("\n");
+      output += "\n\n";
+    }
+
+    output +=
+      'Type "[command] help" or "[command]" without args for more info.';
+
+    return output;
+  },
   hostname: () => hostname,
-  whoami: () => 'guest',
+  whoami: () => "guest",
   date: () => new Date().toLocaleString(),
   vi: () => `why use vi? try 'emacs'`,
   vim: () => `why use vim? try 'emacs'`,
   emacs: () => `why use emacs? try 'vim'`,
-  echo: (args: string[]) => args.join(' '),
+  echo: (args: string[]) => args.join(" "),
   sudo: (args: string[]) => {
-    window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
+    window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ");
 
     return `Permission denied: unable to run the command '${args[0]}' as root.`;
   },
@@ -34,14 +57,14 @@ export const commands: Record<string, (args: string[]) => Promise<string> | stri
     }
 
     switch (args[0]) {
-      case 'ls': {
-        let result = themes.map((t) => t.name.toLowerCase()).join(', ');
+      case "ls": {
+        let result = themes.map((t) => t.name.toLowerCase()).join(", ");
         result += `You can preview all these themes here: ${packageJson.repository.url}/tree/master/docs/themes`;
 
         return result;
       }
 
-      case 'set': {
+      case "set": {
         if (args.length !== 2) {
           return usage;
         }
@@ -64,42 +87,42 @@ export const commands: Record<string, (args: string[]) => Promise<string> | stri
     }
   },
   repo: () => {
-    window.open(packageJson.repository.url, '_blank');
+    window.open(packageJson.repository.url, "_blank");
 
-    return 'Opening repository...';
+    return "Opening repository...";
   },
   clear: () => {
     history.set([]);
 
-    return '';
+    return "";
   },
   email: () => {
     window.open(`mailto:${packageJson.author.email}`);
 
     return `Opening mailto:${packageJson.author.email}...`;
   },
   donate: () => {
-    window.open(packageJson.funding.url, '_blank');
+    window.open(packageJson.funding.url, "_blank");
 
-    return 'Opening donation url...';
+    return "Opening donation url...";
   },
   weather: async (args: string[]) => {
-    const city = args.join('+');
+    const city = args.join("+");
 
     if (!city) {
-      return 'Usage: weather [city]. Example: weather Brussels';
+      return "Usage: weather [city]. Example: weather Brussels";
     }
 
     const weather = await fetch(`https://wttr.in/${city}?ATm`);
 
     return weather.text();
   },
   exit: () => {
-    return 'Please close the tab to exit.';
+    return "Please close the tab to exit.";
   },
   curl: async (args: string[]) => {
     if (args.length === 0) {
-      return 'curl: no URL provided';
+      return "curl: no URL provided";
     }
 
     const url = args[0];
@@ -123,4 +146,76 @@ export const commands: Record<string, (args: string[]) => Promise<string> | stri
 
 Type 'help' to see list of available commands.
 `,
+  todo: (args: string[]) => {
+    const usage = `Usage: todo [command] [args]
+
+Commands:
+  add <text>     Add a new todo
+  ls [filter]    List todos (filter: all, completed, pending)
+  done <id>      Mark todo as completed
+  rm <id>        Remove a todo
+  clear [completed]  Clear todos (add 'completed' to clear only completed)
+  stats          Show todo statistics
+
+Examples:
+  todo add Buy groceries
+  todo ls
+  todo ls pending
+  todo done 1
+  todo rm 2
+  todo clear completed`;
+
+    if (args.length === 0) {
+      return usage;
+    }
+
+    const [subCommand, ...subArgs] = args;
+
+    switch (subCommand) {
+      case "add":
+        if (subArgs.length === 0) {
+          return "Error: Please provide todo text. Example: todo add Buy milk";
+        }
+        return todoManager.add(subArgs.join(" "));
+
+      case "ls":
+      case "list":
+        const filter = subArgs[0] as
+          | "all"
+          | "completed"
+          | "pending"
+          | undefined;
+        if (filter && !["all", "completed", "pending"].includes(filter)) {
+          return "Error: Invalid filter. Use: all, completed, or pending";
+        }
+        return todoManager.list(filter);
+
+      case "done":
+      case "complete":
+        const completeId = parseInt(subArgs[0]);
+        if (isNaN(completeId)) {
+          return "Error: Please provide a valid todo ID number";
+        }
+        return todoManager.complete(completeId);
+
+      case "rm":
+      case "remove":
+      case "delete":
+        const removeId = parseInt(subArgs[0]);
+        if (isNaN(removeId)) {
+          return "Error: Please provide a valid todo ID number";
+        }
+        return todoManager.remove(removeId);
+
+      case "clear":
+        const onlyCompleted = subArgs[0] === "completed";
+        return todoManager.clear(onlyCompleted);
+
+      case "stats":
+        return todoManager.stats();
+
+      default:
+        return `Unknown todo command: ${subCommand}\n\n${usage}`;
+    }
+  },
 };
diff --git a/src/utils/todo.ts b/src/utils/todo.ts
@@ -0,0 +1,144 @@
+interface Todo {
+  id: number;
+  text: string;
+  completed: boolean;
+  createdAt: Date;
+  completedAt?: Date;
+}
+
+class TodoManager {
+  private todos: Todo[] = [];
+  private nextId: number = 1;
+  private readonly storageKey = "terminal-todos";
+
+  constructor() {
+    this.loadTodos();
+  }
+
+  private loadTodos(): void {
+    const stored = localStorage.getItem(this.storageKey);
+    if (stored) {
+      try {
+        const parsed = JSON.parse(stored);
+        this.todos = parsed.todos || [];
+        this.nextId = parsed.nextId || 1;
+        // Convert date strings back to Date objects
+        this.todos = this.todos.map((todo) => ({
+          ...todo,
+          createdAt: new Date(todo.createdAt),
+          completedAt: todo.completedAt
+            ? new Date(todo.completedAt)
+            : undefined,
+        }));
+      } catch (e) {
+        console.error("Failed to load todos:", e);
+      }
+    }
+  }
+
+  private saveTodos(): void {
+    localStorage.setItem(
+      this.storageKey,
+      JSON.stringify({
+        todos: this.todos,
+        nextId: this.nextId,
+      })
+    );
+  }
+
+  add(text: string): string {
+    const todo: Todo = {
+      id: this.nextId++,
+      text,
+      completed: false,
+      createdAt: new Date(),
+    };
+    this.todos.push(todo);
+    this.saveTodos();
+    return `✓ Added todo #${todo.id}: ${text}`;
+  }
+
+  list(filter?: "all" | "completed" | "pending"): string {
+    let filteredTodos = this.todos;
+
+    if (filter === "completed") {
+      filteredTodos = this.todos.filter((t) => t.completed);
+    } else if (filter === "pending") {
+      filteredTodos = this.todos.filter((t) => !t.completed);
+    }
+
+    if (filteredTodos.length === 0) {
+      return filter
+        ? `No ${filter} todos found.`
+        : 'No todos found. Use "todo add <text>" to create one.';
+    }
+
+    const todoList = filteredTodos
+      .map((todo) => {
+        const status = todo.completed ? "✓" : "○";
+        const prefix = `${status} [${todo.id}]`;
+        // Add visual indication for completed todos
+        const text = todo.completed ? `~~${todo.text}~~` : todo.text;
+        return `${prefix} ${text}`;
+      })
+      .join("\n");
+
+    const total = this.todos.length;
+    const completedCount = this.todos.filter((t) => t.completed).length;
+    const pendingCount = this.todos.filter((t) => !t.completed).length;
+
+    const summary = `\n─────────────────────────────\nTotal: ${total} | Completed: ${completedCount} | Pending: ${pendingCount}`;
+
+    return todoList + summary;
+  }
+
+  complete(id: number): string {
+    const todo = this.todos.find((t) => t.id === id);
+    if (!todo) {
+      return `Todo #${id} not found.`;
+    }
+    if (todo.completed) {
+      return `Todo #${id} is already completed.`;
+    }
+    todo.completed = true;
+    todo.completedAt = new Date();
+    this.saveTodos();
+    return `✓ Completed todo #${id}: ${todo.text}`;
+  }
+
+  remove(id: number): string {
+    const index = this.todos.findIndex((t) => t.id === id);
+    if (index === -1) {
+      return `Todo #${id} not found.`;
+    }
+    const removed = this.todos.splice(index, 1)[0];
+    this.saveTodos();
+    return `✗ Removed todo #${id}: ${removed.text}`;
+  }
+
+  clear(onlyCompleted: boolean = false): string {
+    if (onlyCompleted) {
+      const completedCount = this.todos.filter((t) => t.completed).length;
+      this.todos = this.todos.filter((t) => !t.completed);
+      this.saveTodos();
+      return `Cleared ${completedCount} completed todo(s).`;
+    } else {
+      const count = this.todos.length;
+      this.todos = [];
+      this.saveTodos();
+      return `Cleared all ${count} todo(s).`;
+    }
+  }
+
+  stats(): string {
+    const total = this.todos.length;
+    const completed = this.todos.filter((t) => t.completed).length;
+    const pending = total - completed;
+    const completionRate =
+      total > 0 ? ((completed / total) * 100).toFixed(1) : 0;
+
+    return `📊 Todo Statistics:\n├─ Total todos: ${total}\n├─ Completed: ${completed}\n├─ Pending: ${pending}\n└─ Completion rate: ${completionRate}%`;
+  }
+}
+
+export const todoManager = new TodoManager();
