ui.jsx

<div className={VSS(focus.styles, "todo")}>  
  <h1>Todo List</h1>
  <If test={!focus.user}>
    <div className="app">
      <input type="text" placeholder="Sign in with your nickname"
        onKeyPress={(e) => {
          if(e.which === 13) { focus.user = e.target.value }
        }}/>
    </div>
  </If>
  <If test={focus.user}
    context={{ 
      user: focus.user,
      tasks: focus.tasks[Relatable.getRelations]("task")
    }}>
    <div className="app">
      <span className="username">{user} </span>
      <span className="signOut" onClick={() => focus.user = null}>Sign out</span>
      <label className="hideDone">
      <input type="checkbox" checked={focus.hideCompleted} 
        onClick={(e) => focus.hideCompleted = e.target.checked} />
      Hide completed tasks</label>
      <input type="text" placeholder="Add new task"
        onKeyPress={(e) => {
          if(e.which === 13) {
            focus.tasks.newTask(e.target.value, user); 
            e.target.value = null; 
          }
        }}/> 
      <ul>
      <ForEach focus={tasks.sort( (a, b) => {return b.date - a.date})} context={{origin: focus}}>
        <If test={(!focus.isPrivate || user === focus.user) && (!focus.done || !origin.hideCompleted)}>
          <li className={focus.done ? "completed" : null)>
            <input type="checkbox" checked={focus.done}
              onClick={(e) => focus.done = e.target.checked} />
            <If test={user === focus.user}>
              <button onClick={() => focus.isPrivate ? focus.isPrivate = false : focus.isPrivate = true}>
                {focus.isPrivate ? "Private" : "Public"}  
              </button>
            </If>
            <span className="text"><strong>{focus.user}</strong> - {focus.text}</span> 
            <If test={user === focus.user}>
              <button onClick={() => Valaa.Resource.destroy(focus)}>X</button>
            </If>
          </li>
        </If>
      </ForEach>
      </ul>
    </div>
  </If> 
</div>