some cleanup

template/apps/<@if(eq(context.project.frontend,"svelte-kit"))>web/src/routes/+page.svelte

@@ -1,50 +1,55 @@
 <script lang="ts">
   import { createRouter, type Todo } from "@<@var(context.project.name)>/rpc"
-    import type { ChangeEventHandler } from "svelte/elements";
   const router = createRouter("http://127.0.0.1:8080");
+  // Changes made elsewhere (another tab, the mobile app) show up within this interval.
+  const syncIntervalMs = 2000
   let todos = $state<Todo[]>([])
+  let offline = $state(false)
   let todoToCreateTask = $state<string>("")
   const fetchTodos = () => {
     router.todos.listTodos({}).then((r) => {
-      todos = r.todos;
-    })
+      offline = false
+      // Polling returns the same list most of the time; skip re-rendering it.
+      if (JSON.stringify($state.snapshot(todos)) !== JSON.stringify(r.todos)) todos = r.todos
+    }).catch(() => offline = true)
   }
   $effect(() => {
     fetchTodos()
+    const interval = setInterval(fetchTodos, syncIntervalMs)
+    return () => clearInterval(interval)
   })
 
-  const setTodoDone =  (id: string, task: string) => {
-    return async (event : Event & { currentTarget: HTMLInputElement }) => {
-      await router.todos.updateTodo({ todo: { id, task, done: event.currentTarget.checked } })
-      fetchTodos()
+  const setTodoDone = (id: string, task: string) => {
+    return (event: Event & { currentTarget: HTMLInputElement }) => {
+      router.todos.updateTodo({ todo: { id, task, done: event.currentTarget.checked } }).then(fetchTodos, () => offline = true)
     }
   }
 
   const deleteTodo = (id: string) => {
-    return async () => {
-      await router.todos.deleteTodo({ todo: { id } })
-      fetchTodos()
+    return () => {
+      router.todos.deleteTodo({ todo: { id } }).then(fetchTodos, () => offline = true)
     }
   }
 
   const createTodo = () => {
-    router.todos.createTodo({ todo: { id: crypto.randomUUID(), task: todoToCreateTask } }).then((r) => {
-      console.log(r)
+    const task = todoToCreateTask.trim()
+    if (!task) return
+    router.todos.createTodo({ todo: { id: crypto.randomUUID(), task } }).then(() => {
+      todoToCreateTask = ""
       fetchTodos()
-    }).catch((e) => {
-      console.log(e)
-    })
+    }, () => offline = true)
   }
 </script>
 
 <div>
   <h1>Create Todo</h1>
-  <input bind:value={todoToCreateTask} type="text"/>
+  {#if offline}<p style="color: #d32f2f">Can't reach the API, retrying…</p>{/if}
+  <input bind:value={todoToCreateTask} type="text" placeholder="What needs to be done?"/>
   <button onclick={createTodo}> create </button>
   {#each todos as todo (todo.id)}
   <div>
     {todo.task}
-    <input type='checkbox' onchange={setTodoDone(todo.id || "",todo.task)}/>
+    <input type='checkbox' checked={todo.done} onchange={setTodoDone(todo.id || "",todo.task)}/>
     <button onclick={deleteTodo(todo.id || "")}>delete</button>
   </div>
   {/each}