Source

// The landing page's timer: type what you are working on and press Start. The first press makes a
// guest workspace (no sign-up) and opens the app; returning visitors see their running timer.
import { useEffect, useState } from "react";
import { clock } from "../functions/lib/time";
import { session } from "./lib/session";
import { rememberedTimer } from "./lib/data";
import { explain } from "./lib/bounded";
import { navigate } from "./lib/router";
import { Play } from "./ui";
import { useNow } from "./lib/hooks";

const START_KEY = "time:start";

/** A description typed on the landing page, started by the timer page once the workspace is open. */
export function takeLandingStart(): string | null {
  try {
    const v = JSON.parse(sessionStorage.getItem(START_KEY) || "null") as { description?: string } | null;
    sessionStorage.removeItem(START_KEY);
    return v ? String(v.description ?? "") : null;
  } catch {
    return null;
  }
}

export function Start() {
  const [text, setText] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [running] = useState(rememberedTimer);
  const now = useNow(Boolean(running));
  useEffect(() => { if (running) void session().catch(() => null); }, [running]);

  if (running) {
    return (
      <div className="start card">
        <p className="start-label">Your timer is running</p>
        <p className="start-running"><span className="pulse" aria-hidden="true" /><strong>{clock(now - running.start)}</strong> <span className="muted">{running.description || running.projectName || "No description"}</span></p>
        <a className="btn btn-lg btn-block" href="/timer" data-app>Open the timer</a>
        <p className="hint center"><a href="/timesheet" data-app>Timesheet</a> · <a href="/reports" data-app>Reports</a></p>
      </div>
    );
  }

  const start = async () => {
    setBusy(true);
    setError("");
    try {
      await session();
      try { sessionStorage.setItem(START_KEY, JSON.stringify({ description: text.trim() })); } catch { /* the timer page then starts nothing */ }
      navigate("/timer");
    } catch (err) {
      setError(explain(err));
      setBusy(false);
    }
  };
  return (
    <form className="start card" onSubmit={(e) => { e.preventDefault(); void start(); }}>
      <label className="start-label" htmlFor="start-what">What are you working on?</label>
      <input id="start-what" className="input start-input" value={text} maxLength={1000} placeholder="Homepage design for Acme" onChange={(e) => setText(e.target.value)} />
      <button type="submit" className="btn btn-lg btn-block" disabled={busy}><Play size={16} /> {busy ? "Starting..." : "Start the timer"}</button>
      {error && <p className="notice notice-error" role="alert">{error}</p>}
      <p className="hint center">Free. No sign-up. <a href="/timer" data-app>Open the app</a></p>
    </form>
  );
}