tanstack_start_ts 1.0.0

package/src/routes/signup.tsx

@@ -0,0 +1,108 @@
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { supabase } from "@/integrations/supabase/client";
+import { lovable } from "@/integrations/lovable";
+import { Logo } from "@/components/scrollsy/Logo";
+import { Field } from "./login";
+import { toast } from "sonner";
+import { Mail, Lock, User as UserIcon, Sparkles } from "lucide-react";
+
+export const Route = createFileRoute("/signup")({
+  head: () => ({ meta: [{ title: "Join Scrollsy — Sign up free" }] }),
+  component: Signup,
+});
+
+function Signup() {
+  const nav = useNavigate();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    const { error } = await supabase.auth.signUp({
+      email,
+      password,
+      options: {
+        data: { display_name: name },
+        emailRedirectTo: typeof window !== "undefined" ? window.location.origin : undefined,
+      },
+    });
+    setLoading(false);
+    if (error) return toast.error(error.message);
+    toast.success("Account created — check your email to confirm.");
+    nav({ to: "/" });
+  };
+
+  const onGoogle = async () => {
+    const r = await lovable.auth.signInWithOAuth("google", {
+      redirect_uri: window.location.origin,
+    });
+    if (r.error) toast.error("Sign-up failed");
+    if (r.redirected) return;
+    nav({ to: "/" });
+  };
+
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center px-4 py-16">
+      <div className="w-full max-w-md glass-strong rounded-3xl p-8 shadow-elevated animate-scale-in">
+        <div className="flex justify-center">
+          <Logo size={40} />
+        </div>
+        <h1 className="font-display text-3xl font-bold text-center mt-4">Join Scrollsy</h1>
+        <p className="text-center text-sm text-muted-foreground mt-1">
+          Save finds, follow trends, never miss a drop.
+        </p>
+
+        <button
+          onClick={onGoogle}
+          className="mt-6 w-full glass rounded-full py-3 font-medium text-sm hover:bg-white/10 transition"
+        >
+          Continue with Google
+        </button>
+
+        <div className="my-5 flex items-center gap-3 text-xs text-muted-foreground">
+          <div className="flex-1 h-px bg-white/10" /> or <div className="flex-1 h-px bg-white/10" />
+        </div>
+
+        <form onSubmit={onSubmit} className="space-y-3">
+          <Field
+            icon={<UserIcon className="w-4 h-4" />}
+            value={name}
+            onChange={setName}
+            placeholder="Display name"
+          />
+          <Field
+            icon={<Mail className="w-4 h-4" />}
+            type="email"
+            value={email}
+            onChange={setEmail}
+            placeholder="Email"
+          />
+          <Field
+            icon={<Lock className="w-4 h-4" />}
+            type="password"
+            value={password}
+            onChange={setPassword}
+            placeholder="Password (min 6 chars)"
+          />
+          <button
+            disabled={loading}
+            className="btn-glow w-full rounded-full py-3 font-semibold text-sm inline-flex items-center justify-center gap-2 disabled:opacity-60"
+          >
+            <Sparkles className="w-4 h-4" /> {loading ? "Creating…" : "Create account"}
+          </button>
+        </form>
+
+        <p className="mt-6 text-sm text-center text-muted-foreground">
+          Already a Scrollster?{" "}
+          <Link to="/login" className="text-foreground font-semibold">
+            Sign in
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/routes/sitemap[.]xml.ts

@@ -0,0 +1,34 @@
+import { createFileRoute } from "@tanstack/react-router";
+import type {} from "@tanstack/react-start";
+
+const BASE_URL = "";
+
+export const Route = createFileRoute("/sitemap.xml")({
+  server: {
+    handlers: {
+      GET: async () => {
+        const paths = [
+          { path: "/", priority: "1.0", changefreq: "daily" as const },
+          { path: "/categories", priority: "0.9", changefreq: "weekly" as const },
+          { path: "/search", priority: "0.6", changefreq: "weekly" as const },
+          { path: "/about", priority: "0.5", changefreq: "monthly" as const },
+          { path: "/contact", priority: "0.5", changefreq: "monthly" as const },
+          { path: "/faq", priority: "0.5", changefreq: "monthly" as const },
+          { path: "/privacy", priority: "0.3", changefreq: "yearly" as const },
+          { path: "/terms", priority: "0.3", changefreq: "yearly" as const },
+          { path: "/affiliate-disclosure", priority: "0.3", changefreq: "yearly" as const },
+          { path: "/login", priority: "0.3", changefreq: "yearly" as const },
+          { path: "/signup", priority: "0.4", changefreq: "yearly" as const },
+        ];
+        const urls = paths.map(
+          (e) =>
+            `  <url>\n    <loc>${BASE_URL}${e.path}</loc>\n    <changefreq>${e.changefreq}</changefreq>\n    <priority>${e.priority}</priority>\n  </url>`,
+        );
+        const xml = `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n${urls.join("\n")}\n</urlset>`;
+        return new Response(xml, {
+          headers: { "Content-Type": "application/xml", "Cache-Control": "public, max-age=3600" },
+        });
+      },
+    },
+  },
+});

package/src/routes/terms.tsx

@@ -0,0 +1,40 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Prose } from "./about";
+
+export const Route = createFileRoute("/terms")({
+  head: () => ({
+    meta: [
+      { title: "Terms of Service · Scrollsy" },
+      { name: "description", content: "Scrollsy terms of service." },
+    ],
+  }),
+  component: () => (
+    <Prose title="Terms of Service" subtitle="Last updated May 2026">
+      <p>By using Scrollsy, you agree to these terms.</p>
+      <h2>Use of the platform</h2>
+      <p>
+        Scrollsy is provided as-is for product discovery. You may not scrape, abuse, or misuse the
+        service.
+      </p>
+      <h2>Third-party retailers</h2>
+      <p>
+        All purchases happen on third-party sites. Scrollsy is not responsible for product quality,
+        shipping, returns or any aspect of the transaction with the retailer.
+      </p>
+      <h2>User content</h2>
+      <p>
+        You retain ownership of any content you submit (e.g. profile name). You grant Scrollsy a
+        license to display it as needed to operate the platform.
+      </p>
+      <h2>Termination</h2>
+      <p>
+        We may suspend accounts that violate these terms. You may delete your account at any time.
+      </p>
+      <h2>Liability</h2>
+      <p>
+        Scrollsy is provided without warranties. To the extent permitted by law, our liability is
+        limited.
+      </p>
+    </Prose>
+  ),
+});

package/src/routes/update-password.tsx

@@ -0,0 +1,91 @@
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { supabase } from "@/integrations/supabase/client";
+import { Logo } from "@/components/scrollsy/Logo";
+import { Field } from "./login";
+import { toast } from "sonner";
+import { Lock, Check } from "lucide-react";
+
+export const Route = createFileRoute("/update-password")({
+  head: () => ({ meta: [{ title: "Set a new password · Scrollsy" }] }),
+  component: UpdatePassword,
+});
+
+function UpdatePassword() {
+  const nav = useNavigate();
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [isRecoveryReady, setIsRecoveryReady] = useState(false);
+  const [status, setStatus] = useState("Checking recovery session...");
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data }) => {
+      if (data.session) {
+        setIsRecoveryReady(true);
+        setStatus("");
+      } else {
+        setStatus("No active recovery session found. Request a reset email first.");
+      }
+    });
+  }, []);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!password) return toast.error("Enter a new password.");
+    if (password.length < 6) return toast.error("Password must be at least 6 characters.");
+    if (password !== confirmPassword) return toast.error("Passwords do not match.");
+    setLoading(true);
+    const { error } = await supabase.auth.updateUser({ password });
+    setLoading(false);
+    if (error) {
+      return toast.error(error.message || "Unable to reset password.");
+    }
+    toast.success("Your password has been updated.");
+    nav({ to: "/login" });
+  };
+
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center px-4 py-16">
+      <div className="w-full max-w-md glass-strong rounded-3xl p-8 shadow-elevated animate-scale-in">
+        <div className="flex justify-center mb-2">
+          <Logo size={40} />
+        </div>
+        <h1 className="font-display text-3xl font-bold text-center mt-4">Set a new password</h1>
+        <p className="text-center text-sm text-muted-foreground mt-1">
+          {status || "Create a new password for your account."}
+        </p>
+
+        <form onSubmit={onSubmit} className="space-y-3 mt-6">
+          <Field
+            icon={<Lock className="w-4 h-4" />}
+            type="password"
+            value={password}
+            onChange={setPassword}
+            placeholder="New password"
+          />
+          <Field
+            icon={<Check className="w-4 h-4" />}
+            type="password"
+            value={confirmPassword}
+            onChange={setConfirmPassword}
+            placeholder="Confirm password"
+          />
+          <button
+            disabled={loading || !isRecoveryReady}
+            className="btn-glow w-full rounded-full py-3 font-semibold text-sm inline-flex items-center justify-center gap-2 disabled:opacity-60"
+          >
+            {loading ? "Updating…" : "Save new password"}
+          </button>
+        </form>
+
+        <p className="mt-6 text-sm text-center text-muted-foreground">
+          Need another link?{" "}
+          <Link to="/reset-password" className="text-foreground font-semibold hover:text-gradient">
+            Send reset email again
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/server.ts

@@ -0,0 +1,80 @@
+import "./lib/error-capture";
+
+import { consumeLastCapturedError } from "./lib/error-capture";
+import { renderErrorPage } from "./lib/error-page";
+
+type ServerEntry = {
+  fetch: (request: Request, env: unknown, ctx: unknown) => Promise<Response> | Response;
+};
+
+let serverEntryPromise: Promise<ServerEntry> | undefined;
+
+async function getServerEntry(): Promise<ServerEntry> {
+  if (!serverEntryPromise) {
+    serverEntryPromise = import("@tanstack/react-start/server-entry").then(
+      (m) => (m as { default?: ServerEntry }).default ?? (m as unknown as ServerEntry),
+    );
+  }
+  return serverEntryPromise;
+}
+
+function brandedErrorResponse(): Response {
+  return new Response(renderErrorPage(), {
+    status: 500,
+    headers: { "content-type": "text/html; charset=utf-8" },
+  });
+}
+
+function isCatastrophicSsrErrorBody(body: string, responseStatus: number): boolean {
+  let payload: unknown;
+  try {
+    payload = JSON.parse(body);
+  } catch {
+    return false;
+  }
+
+  if (!payload || Array.isArray(payload) || typeof payload !== "object") {
+    return false;
+  }
+
+  const fields = payload as Record<string, unknown>;
+  const expectedKeys = new Set(["message", "status", "unhandled"]);
+  if (!Object.keys(fields).every((key) => expectedKeys.has(key))) {
+    return false;
+  }
+
+  return (
+    fields.unhandled === true &&
+    fields.message === "HTTPError" &&
+    (fields.status === undefined || fields.status === responseStatus)
+  );
+}
+
+// h3 swallows in-handler throws into a normal 500 Response with body
+// {"unhandled":true,"message":"HTTPError"} — try/catch alone never fires for those.
+async function normalizeCatastrophicSsrResponse(response: Response): Promise<Response> {
+  if (response.status < 500) return response;
+  const contentType = response.headers.get("content-type") ?? "";
+  if (!contentType.includes("application/json")) return response;
+
+  const body = await response.clone().text();
+  if (!isCatastrophicSsrErrorBody(body, response.status)) {
+    return response;
+  }
+
+  console.error(consumeLastCapturedError() ?? new Error(`h3 swallowed SSR error: ${body}`));
+  return brandedErrorResponse();
+}
+
+export default {
+  async fetch(request: Request, env: unknown, ctx: unknown) {
+    try {
+      const handler = await getServerEntry();
+      const response = await handler.fetch(request, env, ctx);
+      return await normalizeCatastrophicSsrResponse(response);
+    } catch (error) {
+      console.error(error);
+      return brandedErrorResponse();
+    }
+  },
+};

package/src/start.ts

@@ -0,0 +1,24 @@
+import { createStart, createMiddleware } from "@tanstack/react-start";
+
+import { renderErrorPage } from "./lib/error-page";
+import { attachSupabaseAuth } from "@/integrations/supabase/auth-attacher";
+
+const errorMiddleware = createMiddleware().server(async ({ next }) => {
+  try {
+    return await next();
+  } catch (error) {
+    if (error != null && typeof error === "object" && "statusCode" in error) {
+      throw error;
+    }
+    console.error(error);
+    return new Response(renderErrorPage(), {
+      status: 500,
+      headers: { "content-type": "text/html; charset=utf-8" },
+    });
+  }
+});
+
+export const startInstance = createStart(() => ({
+  requestMiddleware: [errorMiddleware],
+  functionMiddleware: [attachSupabaseAuth],
+}));