tlv84yb7n: Build the sign-in screen and signed-in placeholder shell

src/components/App.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { loadSession, type Person } from "@/lib/auth-client";
+import { SignInForm } from "./SignInForm";
+import { Logo } from "./Logo";
+
+type State = { kind: "loading" } | { kind: "out" } | { kind: "in"; person: Person };
+
+export function App() {
+  const [state, setState] = useState<State>({ kind: "loading" });
+
+  useEffect(() => {
+    let live = true;
+    loadSession().then((person) => {
+      if (live) setState(person ? { kind: "in", person } : { kind: "out" });
+    });
+    return () => {
+      live = false;
+    };
+  }, []);
+
+  if (state.kind === "loading") {
+    return (
+      <main className="center">
+        <p aria-live="polite">Loading...</p>
+      </main>
+    );
+  }
+  if (state.kind === "out") {
+    return <SignInForm onSignedIn={(person) => setState({ kind: "in", person })} />;
+  }
+  // Placeholder shell. The home feed and sign-out are later tasks.
+  return (
+    <main className="shell">
+      <header>
+        <Logo size={32} />
+        <div>
+          <strong>{state.person.name}</strong>
+          <span>{state.person.email}</span>
+        </div>
+      </header>
+    </main>
+  );
+}