v3: added onboarding email on account creation

src/pages/Index.tsx

@@ -11,7 +11,11 @@ import { useLocation } from "react-router";
 import { AppHeader } from "../components/AppHeader.tsx";
 import { SearchBar } from "../components/SearchBar.tsx";
 import { PresenceRow } from "../components/PresenceRow.tsx";
-import { FeedTabBar, type FeedTab, VALID_TABS } from "../components/FeedTabBar.tsx";
+import {
+  type FeedTab,
+  FeedTabBar,
+  VALID_TABS,
+} from "../components/FeedTabBar.tsx";
 
 import { API_URL, DEFAULT_PAGE_SIZE } from "../config/api.ts";
 

src/pages/Search.tsx

@@ -111,7 +111,10 @@ export function Search() {
             ...prev,
             dumps: {
               ...prev.dumps,
-              items: [...prev.dumps.items, ...data.dumps.items.map(deserializeDump)],
+              items: [
+                ...prev.dumps.items,
+                ...data.dumps.items.map(deserializeDump),
+              ],
               hasMore: data.dumps.hasMore,
               page,
               loadingMore: false,
@@ -131,7 +134,10 @@ export function Search() {
   }, [q, fetchSearch]);
 
   const loadMore = useCallback(() => {
-    if (state.status !== "loaded" || !state.dumps.hasMore || state.dumps.loadingMore) return;
+    if (
+      state.status !== "loaded" || !state.dumps.hasMore ||
+      state.dumps.loadingMore
+    ) return;
     setState((prev) => {
       if (prev.status !== "loaded") return prev;
       return { ...prev, dumps: { ...prev.dumps, loadingMore: true } };
@@ -141,7 +147,8 @@ export function Search() {
 
   const sentinelRef = useInfiniteScroll(
     loadMore,
-    state.status === "loaded" && tab === "dumps" && state.dumps.hasMore && !state.dumps.loadingMore,
+    state.status === "loaded" && tab === "dumps" && state.dumps.hasMore &&
+      !state.dumps.loadingMore,
   );
 
   function setTab(t: Tab) {
@@ -154,10 +161,16 @@ export function Search() {
 
   const dumpCount = state.status === "loaded" ? state.dumps.total : null;
   const userCount = state.status === "loaded" ? state.users.length : null;
-  const playlistCount = state.status === "loaded" ? state.playlists.length : null;
+  const playlistCount = state.status === "loaded"
+    ? state.playlists.length
+    : null;
 
   function tabLabel(t: Tab, count: number | null) {
-    const label = t === "dumps" ? "Dumps" : t === "users" ? "Users" : "Playlists";
+    const label = t === "dumps"
+      ? "Dumps"
+      : t === "users"
+      ? "Users"
+      : "Playlists";
     return count !== null ? `${label} (${count})` : label;
   }
 
@@ -174,7 +187,14 @@ export function Search() {
                 className={`feed-sort-btn${tab === t ? " active" : ""}`}
                 onClick={() => setTab(t)}
               >
-                {tabLabel(t, t === "dumps" ? dumpCount : t === "users" ? userCount : playlistCount)}
+                {tabLabel(
+                  t,
+                  t === "dumps"
+                    ? dumpCount
+                    : t === "users"
+                    ? userCount
+                    : playlistCount,
+                )}
               </button>
             ))}
           </div>
@@ -213,7 +233,9 @@ export function Search() {
                 </ul>
               )}
             <div ref={sentinelRef} />
-            {state.dumps.loadingMore && <p className="feed-loading-more">Loading more…</p>}
+            {state.dumps.loadingMore && (
+              <p className="feed-loading-more">Loading more…</p>
+            )}
             {!state.dumps.hasMore && state.dumps.items.length > 0 && (
               <p className="feed-end">You've reached the end.</p>
             )}
@@ -227,10 +249,15 @@ export function Search() {
               <ul className="user-results">
                 {state.users.map((u) => (
                   <li key={u.id}>
-                    <Link to={`/users/${u.username}`} className="user-result-item">
+                    <Link
+                      to={`/users/${u.username}`}
+                      className="user-result-item"
+                    >
                       <span className="user-result-name">@{u.username}</span>
                       {u.description && (
-                        <span className="user-result-description">{u.description}</span>
+                        <span className="user-result-description">
+                          {u.description}
+                        </span>
                       )}
                     </Link>
                   </li>

src/pages/UserPublicProfile.tsx

@@ -233,6 +233,11 @@ export function UserPublicProfile() {
   const [descDraft, setDescDraft] = useState("");
   const [descSaving, setDescSaving] = useState(false);
   const [descError, setDescError] = useState<string | null>(null);
+
+  const [emailEditing, setEmailEditing] = useState(false);
+  const [emailDraft, setEmailDraft] = useState("");
+  const [emailSaving, setEmailSaving] = useState(false);
+  const [emailError, setEmailError] = useState<string | null>(null);
   const prevMyVotesRef = useRef<Set<string> | null>(null);
 
   useEffect(() => {
@@ -507,6 +512,36 @@ export function UserPublicProfile() {
     }
   };
 
+  const handleEmailSave = async () => {
+    if (state.status !== "loaded") return;
+    setEmailSaving(true);
+    setEmailError(null);
+    try {
+      const res = await authFetch(`${API_URL}/api/users/me`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(
+          { email: emailDraft.trim() } satisfies UpdateUserRequest,
+        ),
+      });
+      const body = parseAPIResponse<RawPublicUser>(await res.json());
+      if (!body.success) {
+        setEmailError(body.error.message);
+        return;
+      }
+      const storedRaw = localStorage.getItem("authResponse");
+      if (storedRaw) {
+        const prev = deserializeAuthResponse(JSON.parse(storedRaw));
+        login({ ...prev, user: { ...prev.user, email: emailDraft.trim() } });
+      }
+      setEmailEditing(false);
+    } catch {
+      setEmailError("Failed to save");
+    } finally {
+      setEmailSaving(false);
+    }
+  };
+
   const handleDescSave = async () => {
     if (state.status !== "loaded") return;
     setDescSaving(true);
@@ -584,7 +619,7 @@ export function UserPublicProfile() {
             userId={profileUser.id}
             username={profileUser.username}
             hasAvatar={!!profileUser.avatarMime}
-            size={72}
+            size={128}
             version={profileUser.updatedAt?.getTime()}
           />
           {isOwnProfile && (
@@ -620,6 +655,66 @@ export function UserPublicProfile() {
                 O.G.
               </p>
             )}
+          {isOwnProfile && (
+            emailEditing
+              ? (
+                <form
+                  className="profile-email-editor"
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    handleEmailSave();
+                  }}
+                >
+                  <input
+                    type="email"
+                    className="profile-email-input"
+                    value={emailDraft}
+                    onChange={(e) => setEmailDraft(e.currentTarget.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Escape") setEmailEditing(false);
+                    }}
+                    disabled={emailSaving}
+                    autoFocus
+                  />
+                  <div className="profile-email-actions">
+                    <button
+                      type="submit"
+                      className="profile-email-btn profile-email-btn--save"
+                      disabled={emailSaving || !emailDraft.trim()}
+                    >
+                      {emailSaving ? "Saving…" : "Save"}
+                    </button>
+                    <button
+                      type="button"
+                      className="profile-email-btn profile-email-btn--cancel"
+                      onClick={() => setEmailEditing(false)}
+                      disabled={emailSaving}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                  {emailError && (
+                    <ErrorCard title="Failed to save" message={emailError} />
+                  )}
+                </form>
+              )
+              : (
+                <p
+                  className="profile-email-display"
+                  onClick={() => {
+                    setEmailDraft(me?.email ?? "");
+                    setEmailError(null);
+                    setEmailEditing(true);
+                  }}
+                  title="Edit email"
+                >
+                  {me?.email ?? "Add email…"}
+                  <span className="profile-description-edit-btn" aria-hidden>
+                    ✎
+                  </span>
+                </p>
+              )
+          )}
           {avatarError && (
             <ErrorCard title="Failed to update avatar" message={avatarError} />
           )}

src/pages/UserRegister.tsx

@@ -54,13 +54,19 @@ export function UserRegister() {
     const formData = new FormData(e.currentTarget);
     const username = formData.get("username") as string;
     const password = formData.get("password") as string;
+    const email = formData.get("email") as string;
 
     try {
       const res = await fetch(`${API_URL}/api/users/register`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(
-          { username, password, inviteToken: token } satisfies RegisterRequest,
+          {
+            username,
+            password,
+            inviteToken: token,
+            email,
+          } satisfies RegisterRequest,
         ),
       });
 
@@ -118,6 +124,13 @@ export function UserRegister() {
             disabled={formState.status === "submitting"}
             autoFocus
           />
+          <input
+            name="email"
+            type="email"
+            placeholder="Email address"
+            required
+            disabled={formState.status === "submitting"}
+          />
           <input
             name="password"
             type="password"