addTask skeleton

ts/main.ts

@@ -1,5 +1,7 @@
 import { ElemWrapper } from "./elemwrapper";
+import { SLCard } from "./slcard";
 import { SLIcon } from "./slicon";
+import { SLInput } from "./slinput";
 import { SLTabGroup } from "./sltabgroup";
 
 async function main() {
@@ -9,7 +11,40 @@ async function main() {
     root.append(tabGroup);
 
     const [tasksTab, tasksPanel] = tabGroup.addTabSet("tasks");
-    tasksTab.append(new SLIcon("slash-circle"));
+    tasksTab.append(new SLIcon("list-task"));
+
+    const tasksCard = new SLCard();
+    tasksPanel.append(tasksCard);
+
+    const tasksInput = new SLInput();
+    tasksCard.append(tasksInput);
+    tasksInput.setPill();
+    
+    const tasksAddIcon = tasksInput.addSuffixIcon("plus-circle");
+
+    const addTask = () => {
+        const task = tasksInput.getValue();
+        if (task.length === 0) {
+            return;
+        }
+
+        tasksInput.clear();
+        tasksInput.focus();
+
+        tasksAddIcon.classList.remove("highlight");
+        void tasksAddIcon.elem.offsetWidth; // force reflow
+        tasksAddIcon.classList.add("highlight");
+    };
+
+    tasksAddIcon.addEventListener("click", () => {
+        addTask();
+    });
+
+    tasksInput.addEventListener("keydown", (e) => {
+        if ((e as KeyboardEvent).key === "Enter") {
+            addTask();
+        }
+    });
 
     const [tagsTab, tagsPanel] = tabGroup.addTabSet("tags");
     tagsTab.append(new SLIcon("tags"));