Link gems from the list-as-todo recipe (+ minor fixes) (#91)

Author: seefeldb

typescript/packages/lookslike-high-level/src/data.ts

@@ -1,6 +1,6 @@
 // This file is setting up example data
 import { signal } from "@commontools/common-frp";
-import { Gem, NAME } from "./recipe.js";
+import { Gem } from "./recipe.js";
 const { state } = signal;
 
 import { todoList, todoTask } from "./recipes/todo-list.js";

typescript/packages/lookslike-high-level/src/recipes/todo-list-as-task.ts

@@ -1,8 +1,9 @@
 import { view, tags, render } from "@commontools/common-ui";
 import { signal, Cancel } from "@commontools/common-frp";
 import { Gem, recipe, description, addSuggestion, NAME } from "../recipe.js";
+import { sagaLink } from "../components/saga-link.js";
 const { binding } = view;
-const { include } = tags;
+const { include, vstack, span } = tags;
 const { state, effect, computed } = signal;
 
 const details = render.view("details", {});
@@ -43,8 +44,6 @@ export const todoListAsTask = recipe("todo list as task", ({ list, done }) => {
             item.done ? [] : [item.title]
           );
           const newSummary =
-            list[NAME] +
-            ": " +
             items.length +
             " items. " +
             (notDoneTitles.length
@@ -67,10 +66,15 @@ export const todoListAsTask = recipe("todo list as task", ({ list, done }) => {
 
   const UI = [
     details({}, [
-      summary({}, binding("listSummary")),
+      summary({}, [
+        vstack({}, [
+          sagaLink({ saga: binding("list") }),
+          span({}, binding("listSummary")),
+        ]),
+      ]),
       include({ content: binding("fullUI") }),
     ]),
-    { listSummary, fullUI },
+    { list, listSummary, fullUI },
   ];
 
   return {

typescript/packages/lookslike-high-level/src/recipes/todo-list.ts

@@ -4,15 +4,15 @@ import { recipe, NAME } from "../recipe.js";
 import { annotation } from "../components/annotation.js";
 const { binding, repeat } = view;
 const { list, vstack, include, sendInput, todo, commonInput } = tags;
-const { state } = signal;
+const { state, computed } = signal;
 const { subject } = stream;
 
 export const todoList = recipe("todo list", ({ title, items }) => {
   const newTitle = subject<{ detail: { value: string } }>();
   newTitle.sink({
     send: (event) => {
       const updatedTitle = event.detail?.value?.trim();
-      if (!updatedTitle) return;
+      if (updatedTitle === undefined) return;
       title.send(updatedTitle);
     },
   });
@@ -45,7 +45,7 @@ export const todoList = recipe("todo list", ({ title, items }) => {
     ],
     title,
     items,
-    [NAME]: title,
+    [NAME]: computed([title], (title) => title || "untitled"),
   };
 });