feat: Todo Panel polish — empty state, color bleed, edge cases (#53)

apps/web/src/components/TodoPanel.tsx

@@ -233,7 +233,13 @@ export function TodoPanel() {
         {loading && <div className="px-3 py-2 text-xs text-muted-foreground">Loading...</div>}
         {error && <div className="px-3 py-2 text-xs text-red-500">Failed to load todos</div>}
         {!loading && !error && filteredCategories.length === 0 && doneItems.length === 0 && (
-          <div className="px-3 py-2 text-xs text-muted-foreground">No todos yet</div>
+          <div className="flex items-center justify-center h-full px-4 py-8">
+            <p className="text-xs text-muted-foreground text-center">
+              No categories yet.
+              <br />
+              Click <span className="font-medium">+</span> to create one.
+            </p>
+          </div>
         )}
         <SortableContext items={categorySortableIds} strategy={verticalListSortingStrategy}>
           {filteredCategories.map((category) => (
@@ -378,12 +384,14 @@ function SortableCategoryHeader({
 
 function SortableTodoItem({
   item,
+  categoryColor,
   categoryJiraLink,
   onCycleItem,
   onSelectItem,
   mutate,
 }: {
   item: TodoItem;
+  categoryColor: string;
   categoryJiraLink: string | undefined;
   onCycleItem: (itemId: string) => void;
   onSelectItem: (itemId: string) => void;
@@ -453,7 +461,7 @@ function SortableTodoItem({
   return (
     <div
       ref={setNodeRef}
-      style={style}
+      style={{ ...style, backgroundColor: categoryColor + "08" }}
       className="flex items-center gap-2 pl-7 pr-3 py-0.5 text-xs hover:bg-accent/50"
       onContextMenu={handleContextMenu}
     >
@@ -540,9 +548,8 @@ function TodoCategoryRow({
 
   const commitAdd = () => {
     const trimmed = addValue.trim();
-    if (trimmed) {
-      mutate([{ type: "createItem", categoryId: category.id, title: trimmed }]);
-    }
+    if (!trimmed) return;
+    mutate([{ type: "createItem", categoryId: category.id, title: trimmed }]);
     setAdding(false);
     setAddValue("");
   };
@@ -682,6 +689,7 @@ function TodoCategoryRow({
                 <SortableTodoItem
                   key={item.id}
                   item={item}
+                  categoryColor={category.color}
                   categoryJiraLink={category.jiraLink}
                   onCycleItem={onCycleItem}
                   onSelectItem={onSelectItem}

packages/shared/src/todoStore.test.ts

@@ -749,6 +749,34 @@ describe("todoStore", () => {
       const created = next.items.find((i) => i.categoryId === "cat-1");
       expect(created!.sortOrder).toBe(0);
     });
+
+    it("rejects empty title and returns unchanged state", () => {
+      const state = loadTodos(sampleCategories, sampleItems);
+      const next = createItem(state, "cat-1", "");
+
+      expect(next).toBe(state);
+      expect(next.items).toHaveLength(2);
+    });
+
+    it("rejects whitespace-only title and returns unchanged state", () => {
+      const state = loadTodos(sampleCategories, sampleItems);
+      const next = createItem(state, "cat-1", "   ");
+
+      expect(next).toBe(state);
+      expect(next.items).toHaveLength(2);
+    });
+
+    it("rejects whitespace-only title through applyMutation", () => {
+      const state = loadTodos(sampleCategories, sampleItems);
+      const next = applyMutation(state, {
+        type: "createItem",
+        categoryId: "cat-1",
+        title: "   ",
+      });
+
+      expect(next).toBe(state);
+      expect(next.items).toHaveLength(2);
+    });
   });
 
   describe("updateDescription", () => {

packages/shared/src/todoStore.ts

@@ -114,6 +114,8 @@ export function deleteCategory(
 }
 
 export function createItem(state: TodoState, categoryId: string, title: string): TodoState {
+  if (!title.trim()) return state;
+
   // @effect-diagnostics-next-line globalDate:off
   const now = new Date().toISOString();
   const categoryItems = state.items.filter((item) => item.categoryId === categoryId);