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>
+  );
+}

src/components/Logo.tsx

@@ -0,0 +1,8 @@
+export function Logo({ size = 44 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 48 48" role="img" aria-label="Minnect">
+      <polygon points="24,2 43,13 43,35 24,46 5,35 5,13" fill="#E8202A" />
+      <path d="M14 33V15l10 11 10-11v18" fill="none" stroke="#fff" strokeWidth="3.5" strokeLinejoin="round" strokeLinecap="round" />
+    </svg>
+  );
+}

src/components/SignInForm.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { signIn, type Person } from "@/lib/auth-client";
+import { Logo } from "./Logo";
+
+export function SignInForm({ onSignedIn }: { onSignedIn: (p: Person) => void }) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function submit(e: FormEvent) {
+    e.preventDefault();
+    if (busy) return;
+    setBusy(true);
+    setError(null);
+    const result = await signIn(email.trim(), password);
+    setBusy(false);
+    if (result.ok) {
+      setPassword("");
+      onSignedIn(result.person);
+    } else {
+      setPassword("");
+      setError(result.message);
+    }
+  }
+
+  return (
+    <main className="center">
+      <form className="card" onSubmit={submit} noValidate>
+        <Logo />
+        <h1>Sign in to Minnect</h1>
+        {error && (
+          <p role="alert" className="error">
+            {error}
+          </p>
+        )}
+        <label htmlFor="email">Email</label>
+        <input
+          id="email"
+          name="email"
+          type="email"
+          autoComplete="username"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <label htmlFor="password">Password</label>
+        <input
+          id="password"
+          name="password"
+          type="password"
+          autoComplete="current-password"
+          required
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <button type="submit" disabled={busy || !email || !password}>
+          {busy ? "Signing in..." : "Sign in"}
+        </button>
+      </form>
+    </main>
+  );
+}