Source

// The landing hero's quick start: one tap adds a first habit, no sign-up. Returning people see today.
import { useState } from "react";
import { useStore, listHabits, getState, update, nextOrder } from "./lib/store";
import { stats, newHabit, MAX_NAME } from "./lib/habits";
import { navigate } from "./lib/router";
import { SUGGESTIONS, addSuggestion } from "./Today";
import { A } from "./ui";
import { Plus, Next, Check } from "./icons";

export function Start() {
  const s = useStore();
  const [name, setName] = useState("");
  const habits = listHabits(s);
  if (habits.length) {
    const rows = habits.map((h) => ({ h, st: stats(h, s.weekStart) })).filter((r) => r.h.kind !== "avoid" && (r.st.due || r.st.doneToday));
    const done = rows.filter((r) => r.st.doneToday).length;
    return (
      <div className="start card">
        <p className="eyebrow">Welcome back</p>
        <p className="start-title">{rows.length ? (done === rows.length ? "All done for today." : `${done} of ${rows.length} done today.`) : "Nothing due today."}</p>
        <ul className="start-today">
          {rows.slice(0, 5).map(({ h, st }) => (
            <li key={h.id} className={st.doneToday ? "done" : ""}><span className="start-dot">{st.doneToday && <Check size={14} />}</span>{h.name}</li>
          ))}
        </ul>
        <A className="btn btn-lg btn-block" href="/today">Open today <Next size={16} /></A>
      </div>
    );
  }
  const add = (e: React.FormEvent) => {
    e.preventDefault();
    const n = name.trim();
    if (!n) return;
    const h = newHabit({ name: n.slice(0, MAX_NAME) }, nextOrder(getState()));
    update((x) => { x.habits[h.id] = h; });
    navigate("/today");
  };
  return (
    <div className="start card">
      <p className="start-title">Start a habit now</p>
      <p className="muted small">One tap adds it. No sign-up, no app store.</p>
      <ul className="suggest-list">
        {SUGGESTIONS.map((sg) => (
          <li key={sg.name}>
            <button type="button" className="suggest" onClick={() => { addSuggestion(sg); navigate("/today"); }}>
              <strong>{sg.name}</strong><span>{sg.about}</span><Plus size={18} />
            </button>
          </li>
        ))}
      </ul>
      <form className="start-own" onSubmit={add}>
        <input className="input" value={name} maxLength={MAX_NAME} placeholder="Or name your own" aria-label="Name your own habit" onChange={(e) => setName(e.target.value)} />
        <button type="submit" className="btn">Add</button>
      </form>
    </div>
  );
}