Toolkit for building
native desktop apps

<column background="background">
  <row height="{header_height}" padding="12" gap="10" cross="center"
       background="surface" window-drag="true" label="Inbox header">
    <spacer width="{chrome_leading}" />
    <spacer grow="1" />
    <if test="{doneCount}">
      <button variant="ghost" on-press="clear_done">Clear done</button>
    </if>
  </row>
  <separator />
  <column grow="1" gap="12" padding="16">
    <row gap="8" cross="center">
      <text-field text="{draft}" placeholder="New task…"
                  on-input="draft_edit" on-submit="add" grow="1" />
      <button variant="primary" on-press="add">Add task</button>
    </row>
    <tabs gap="8">
      <for each="filters" as="f">
        <button size="sm" selected="{f == filter}"
                on-press="set_filter:{f}">{f}</button>
      </for>
    </tabs>
    <scroll grow="1">
      <column gap="2">
        <for each="visible" key="id" as="t">
          <row gap="8" padding="6" cross="center">
            <checkbox checked="{t.done}" on-toggle="toggle:{t.id}"
                      label="Done" />
            <text grow="1">{t.title}</text>
          </row>
        </for>
      </column>
    </scroll>
  </column>
  <status-bar>{openCount} open · {doneCount} done</status-bar>
</column>

export type Msg =
  | { readonly kind: "add" }
  | { readonly kind: "toggle"; readonly id: number }
  | { readonly kind: "set_filter"; readonly filter: Filter }
  | { readonly kind: "clear_done" }
  | { readonly kind: "draft_edit"; readonly edit: TextInputEvent };

export function update(model: Model, msg: Msg): Model {
  switch (msg.kind) {
    case "add":
      return addTask(model);
    case "toggle":
      return {
        ...model,
        tasks: model.tasks.map((task) =>
          task.id === msg.id ? { ...task, done: !task.done } : task,
        ),
      };
    case "set_filter":
      return { ...model, filter: msg.filter };
    case "clear_done":
      return { ...model, tasks: model.tasks.filter((task) => !task.done) };
    case "draft_edit":
      return { ...model, draft: applyDraftEdit(model.draft, msg.edit) };
  }
}