Photo setPhoto(e.target.files?.[0] || null)} /> {photo && (

{orientation} · {Math.round(photo.size / 1024)} KB

)} Recipient setRecipientName(e.target.value)} placeholder="Mara" /> Message

setMessage(e.target.value)}
              placeholder={"Mara — sat at a tile bench above\nthe river all afternoon. The trams\nkeep going by but I don't get on\nany of them.\n— J"}
            />
            <div className="field-hint">{message.length} chars · {message.split(/\r?\n/).length} lines</div>
          </label>

<label className="field">
            <span>City</span>
            <input type="text" value={city} onChange={(e) => setCity(e.target.value)} placeholder="Lisboa" />
          </label>

<label className="field">
            <span>Country</span>
            <input type="text" value={country} onChange={(e) => setCountry(e.target.value)} placeholder="Portugal" />
          </label>

<label className="field">
            <span>Country code <em>(optional)</em></span>
            <input
              type="text" value={countryCode}
              onChange={(e) => setCountryCode(e.target.value.toUpperCase())}
              placeholder="PT" maxLength={2}
            />
          </label>

<div className="field">
            <span>Timezone</span>
            <div className="stamp-art-picker">
              {TZ_OPTIONS.map((opt) => (
                <button
                  key={opt.value}
                  type="button"
                  className={"stamp-art-opt" + (timezone === opt.value ? " on" : "")}
                  onClick={() => setTimezone(opt.value)}
                >
                  {opt.label}
                </button>
              ))}
            </div>
          </div>

<div className="field">
            <span>Stamp art</span>
            <div className="stamp-art-picker">
              {ALL_STAMP_ARTS.map((opt) => (
                <button
                  key={opt}
                  type="button"
                  className={"stamp-art-opt" + (stampArt === opt ? " on" : "")}
                  onClick={() => setStampArt(opt)}
                >
                  {opt}
                </button>
              ))}
            </div>
          </div>

<button type="submit" className="btn-primary" disabled={submitting}>
            {submitting ? "creating…" : "create postcard"}
          </button>
        </div>

<div className="create-preview">
          <div className="create-preview-eyebrow">Preview</div>
          <LivePreview frontUrl={photoUrl} backUrl={previewUrl} />
        </div>
      </div>
    </form>
  );
}

function App() {
  const [authChecked, setAuthChecked] = React.useState(false);
  const [cards, setCards] = React.useState([]);
  const [toast, setToast] = React.useState({ msg: "", kind: "" });

const flash = (msg, kind = "") => {
    setToast({ msg, kind });
    setTimeout(() => setToast({ msg: "", kind: "" }), 2600);
  };

const refresh = React.useCallback(async () => {
    try {
      const r = await api.listCards();
      setCards(r.cards || []);
    } catch (e) { /* 401 redirects */ }
  }, []);

React.useEffect(() => {
    (async () => {
      try {
        const s = await api.authStatus();
        if (!s.has_owner) { location.href = "/login"; return; }
        if (!s.authed) { location.href = "/login"; return; }
        await refresh();
        setAuthChecked(true);
      } catch (e) { /* 401 redirects */ }
    })();
  }, [refresh]);

// Refetch when the user returns to this tab — view counts on the public
  // viewer don't push back, so we pull on focus.
  React.useEffect(() => {
    const onVis = () => { if (!document.hidden) refresh(); };
    document.addEventListener("visibilitychange", onVis);
    window.addEventListener("focus", refresh);
    return () => {
      document.removeEventListener("visibilitychange", onVis);
      window.removeEventListener("focus", refresh);
    };
  }, [refresh]);

const onCreated = (card) => {
    setCards((prev) => [card, ...prev]);
  };

const onLogout = async () => {
    try { await api.logout(); } catch {}
    location.href = "/login";
  };

if (!authChecked) {
    return <div className="center-note">loading…</div>;
  }

return (
    <div className="app">
      <header className="app-bar">
        <div className="app-bar-eyebrow">card</div>
        <h1 className="app-bar-title">Postcards</h1>
        <button type="button" className="btn-ghost" onClick={onLogout}>sign out</button>
      </header>

<section className="section">
        <h2 className="section-title">Compose</h2>
        <CreatePanel onCreated={onCreated} flash={flash} latest={cards[0]} />
      </section>

<section className="section">
        <h2 className="section-title">Sent ({cards.length})</h2>
        {cards.length === 0 ? (
          <div className="empty">No postcards yet. Create one above.</div>
        ) : (
          <div className="card-list">
            {cards.map((c) => (
              <CardRow key={c.slug} card={c} onDelete={onDelete} />
            ))}
          </div>
        )}
      </section>

<Toast msg={toast.msg} kind={toast.kind} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);