tanstack_start_ts 1.0.0

package/src/routes/login.tsx

@@ -0,0 +1,160 @@
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { supabase } from "@/integrations/supabase/client";
+import { lovable } from "@/integrations/lovable";
+import { Logo } from "@/components/scrollsy/Logo";
+import { toast } from "sonner";
+import { Mail, Lock, Sparkles } from "lucide-react";
+
+export const Route = createFileRoute("/login")({
+  head: () => ({ meta: [{ title: "Log in · Scrollsy" }] }),
+  component: Login,
+});
+
+function Login() {
+  const nav = useNavigate();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data }) => {
+      if (data.session) nav({ to: "/" });
+    });
+  }, [nav]);
+
+  const onEmail = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    const { error } = await supabase.auth.signInWithPassword({ email, password });
+    setLoading(false);
+    if (error) return toast.error(error.message);
+    toast.success("Welcome back!");
+    nav({ to: "/" });
+  };
+
+  const onGoogle = async () => {
+    const result = await lovable.auth.signInWithOAuth("google", {
+      redirect_uri: window.location.origin,
+    });
+    if (result.error) return toast.error("Sign-in failed");
+    if (result.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 mb-2">
+          <Logo size={40} />
+        </div>
+        <h1 className="font-display text-3xl font-bold text-center mt-4">Welcome back</h1>
+        <p className="text-center text-sm text-muted-foreground mt-1">
+          Sign in to save your favorite finds
+        </p>
+
+        <button
+          onClick={onGoogle}
+          className="mt-6 w-full glass rounded-full py-3 font-medium text-sm hover:bg-white/10 transition flex items-center justify-center gap-2"
+        >
+          <GoogleIcon /> 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={onEmail} className="space-y-3">
+          <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"
+          />
+          <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 ? "Signing in…" : "Sign in"}
+          </button>
+        </form>
+
+        <div className="mt-6 text-sm text-center text-muted-foreground space-y-2">
+          <p>
+            Forgot your password?{" "}
+            <Link
+              to="/reset-password"
+              className="text-foreground font-semibold hover:text-gradient"
+            >
+              Reset it
+            </Link>
+          </p>
+          <p>
+            New here?{" "}
+            <Link to="/signup" className="text-foreground font-semibold hover:text-gradient">
+              Create account
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function Field({
+  icon,
+  value,
+  onChange,
+  type = "text",
+  placeholder,
+}: {
+  icon: React.ReactNode;
+  value: string;
+  onChange: (v: string) => void;
+  type?: string;
+  placeholder?: string;
+}) {
+  return (
+    <label className="flex items-center gap-2 glass rounded-xl px-3 py-2.5">
+      <span className="text-muted-foreground">{icon}</span>
+      <input
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="flex-1 bg-transparent outline-none text-sm placeholder:text-muted-foreground"
+      />
+    </label>
+  );
+}
+
+function GoogleIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 48 48" aria-hidden="true">
+      <path
+        fill="#20b47c"
+        d="M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.3 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.5 6 29.5 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.3-.4-3.5z"
+      />
+      <path
+        fill="#9e0ea3"
+        d="M6.3 14.7l6.6 4.8C14.7 16 19 13 24 13c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.5 7 29.5 5 24 5 16.3 5 9.7 9.4 6.3 14.7z"
+      />
+      <path
+        fill="#59e9f3"
+        d="M24 44c5.4 0 10.3-2.1 14-5.4l-6.5-5.3C29.6 34.8 26.9 36 24 36c-5.3 0-9.7-3.3-11.3-7.9l-6.5 5C9.6 39.6 16.2 44 24 44z"
+      />
+      <path
+        fill="#e64ce6"
+        d="M43.6 20.5H42V20H24v8h11.3c-.8 2.3-2.3 4.2-4.2 5.6l6.5 5.3C42 35 44 30 44 24c0-1.3-.1-2.3-.4-3.5z"
+      />
+    </svg>
+  );
+}

package/src/routes/privacy.tsx

@@ -0,0 +1,39 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Prose } from "./about";
+
+export const Route = createFileRoute("/privacy")({
+  head: () => ({
+    meta: [
+      { title: "Privacy Policy · Scrollsy" },
+      { name: "description", content: "How Scrollsy collects, uses and protects your data." },
+    ],
+  }),
+  component: () => (
+    <Prose title="Privacy Policy" subtitle="Last updated May 2026">
+      <p>Your privacy matters. This policy explains what we collect and how we use it.</p>
+      <h2>Information we collect</h2>
+      <ul>
+        <li>Account info (email, display name) when you sign up.</li>
+        <li>Saved items and browsing activity to personalize recommendations.</li>
+        <li>Anonymous analytics (page views, clicks) to improve the product.</li>
+      </ul>
+      <h2>How we use it</h2>
+      <p>
+        To run Scrollsy, deliver recommendations, send transactional emails and improve the
+        platform. We don't sell your personal data.
+      </p>
+      <h2>Affiliate clicks</h2>
+      <p>
+        When you click an affiliate link, the destination retailer may set cookies and collect their
+        own data per their privacy policy.
+      </p>
+      <h2>Your choices</h2>
+      <p>
+        You can edit your profile, delete saved items, or close your account at any time from your
+        profile page.
+      </p>
+      <h2>Contact</h2>
+      <p>Questions? Email privacy@scrollsy.app.</p>
+    </Prose>
+  ),
+});

package/src/routes/product.$id.tsx

@@ -0,0 +1,212 @@
+import { createFileRoute, Link, notFound } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { getProduct } from "@/lib/products.functions";
+import { ProductCard } from "@/components/scrollsy/ProductCard";
+import {
+  ExternalLink,
+  Heart,
+  Share2,
+  Truck,
+  Flame,
+  TrendingUp,
+  ChevronLeft,
+  ShieldCheck,
+} from "lucide-react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { supabase } from "@/integrations/supabase/client";
+import { useAuth } from "@/hooks/use-auth";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/product/$id")({
+  head: () => ({
+    meta: [{ title: "Product · Scrollsy" }],
+  }),
+  component: ProductPage,
+});
+
+function ProductPage() {
+  const { id } = Route.useParams();
+  const { user } = useAuth();
+  const qc = useQueryClient();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["product", id],
+    queryFn: () => getProduct({ data: { id } }),
+  });
+
+  const { data: savedIds } = useQuery({
+    queryKey: ["saved-ids", user?.id],
+    enabled: !!user,
+    queryFn: async () => {
+      const { data } = await supabase
+        .from("saved_items")
+        .select("product_id")
+        .eq("user_id", user!.id);
+      return new Set((data ?? []).map((r) => r.product_id));
+    },
+  });
+
+  if (!isLoading && !data?.product) throw notFound();
+  const p = data?.product;
+
+  const toggleSave = useMutation({
+    mutationFn: async () => {
+      if (!user) throw new Error("login");
+      const isSaved = savedIds?.has(id);
+      if (isSaved) {
+        await supabase.from("saved_items").delete().eq("user_id", user.id).eq("product_id", id);
+      } else {
+        await supabase.from("saved_items").insert({ user_id: user.id, product_id: id });
+      }
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["saved-ids", user?.id] });
+      toast.success("Updated favorites");
+    },
+    onError: (e: Error) => {
+      if (e.message === "login") toast.error("Sign in to save items");
+    },
+  });
+
+  const share = async () => {
+    if (typeof navigator !== "undefined" && navigator.share) {
+      await navigator.share({ title: p?.title, url: window.location.href });
+    } else {
+      navigator.clipboard.writeText(window.location.href);
+      toast.success("Link copied");
+    }
+  };
+
+  if (!p) return <div className="px-4 max-w-7xl mx-auto pt-10">Loading…</div>;
+
+  const discount = p.original_price
+    ? Math.round((1 - Number(p.price) / Number(p.original_price)) * 100)
+    : 0;
+  const isSaved = savedIds?.has(id) ?? false;
+
+  return (
+    <div className="px-4 max-w-7xl mx-auto pt-8">
+      <Link
+        to="/"
+        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
+      >
+        <ChevronLeft className="w-4 h-4" /> Back
+      </Link>
+
+      <div className="mt-6 grid md:grid-cols-2 gap-8">
+        <div className="relative rounded-3xl overflow-hidden border border-white/5 bg-gradient-card">
+          <img src={p.image_url} alt={p.title} className="w-full h-auto object-cover" />
+          <div className="absolute top-4 left-4 flex flex-col gap-2">
+            {discount > 0 && (
+              <span className="bg-gradient-brand text-white text-sm font-bold px-3 py-1.5 rounded-full">
+                -{discount}% off
+              </span>
+            )}
+            {p.is_hot && (
+              <span className="glass-strong text-xs font-semibold px-3 py-1.5 rounded-full inline-flex items-center gap-1">
+                <Flame className="w-3.5 h-3.5 text-brand-orange" /> Hot Deal
+              </span>
+            )}
+            {p.is_trending && (
+              <span className="glass-strong text-xs font-semibold px-3 py-1.5 rounded-full inline-flex items-center gap-1">
+                <TrendingUp className="w-3.5 h-3.5 text-brand-magenta" /> Trending
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="space-y-5">
+          {(p as any).categories?.slug && (
+            <Link
+              to="/category/$slug"
+              params={{ slug: (p as any).categories.slug }}
+              className="inline-flex glass rounded-full px-3 py-1 text-xs"
+            >
+              {(p as any).categories.name}
+            </Link>
+          )}
+          <h1 className="font-display text-3xl md:text-4xl font-bold tracking-tight">{p.title}</h1>
+          <p className="text-muted-foreground">{p.description}</p>
+
+          <div className="flex items-baseline gap-3">
+            <span className="text-4xl font-display font-bold text-gradient">
+              ${Number(p.price).toFixed(2)}
+            </span>
+            {p.original_price && (
+              <span className="text-lg text-muted-foreground line-through">
+                ${Number(p.original_price).toFixed(2)}
+              </span>
+            )}
+          </div>
+
+          <div className="glass rounded-2xl p-4 space-y-2 text-sm">
+            {p.shipping_info && (
+              <div className="flex items-center gap-2">
+                <Truck className="w-4 h-4 text-brand-magenta" />
+                <span className="text-muted-foreground">{p.shipping_info}</span>
+                {p.delivery_estimate && (
+                  <span className="text-muted-foreground">· {p.delivery_estimate}</span>
+                )}
+              </div>
+            )}
+            {p.merchant && (
+              <div className="flex items-center gap-2">
+                <ShieldCheck className="w-4 h-4 text-brand-magenta" />
+                <span className="text-muted-foreground">Sold via {p.merchant}</span>
+              </div>
+            )}
+          </div>
+
+          {p.tags?.length > 0 && (
+            <div className="flex flex-wrap gap-1.5">
+              {p.tags.map((t) => (
+                <span
+                  key={t}
+                  className="glass rounded-full px-2.5 py-1 text-[11px] text-muted-foreground"
+                >
+                  #{t}
+                </span>
+              ))}
+            </div>
+          )}
+
+          <div className="flex gap-2 pt-2">
+            <a
+              href={p.affiliate_url}
+              target="_blank"
+              rel="noopener noreferrer sponsored"
+              className="btn-glow flex-1 rounded-full py-3 font-semibold inline-flex items-center justify-center gap-2"
+            >
+              View Deal <ExternalLink className="w-4 h-4" />
+            </a>
+            <button
+              onClick={() => toggleSave.mutate()}
+              className={`glass-strong rounded-full px-4 ${isSaved ? "bg-gradient-brand border-transparent" : ""}`}
+              aria-label="Save"
+            >
+              <Heart className={isSaved ? "fill-white text-white" : ""} />
+            </button>
+            <button onClick={share} className="glass-strong rounded-full px-4" aria-label="Share">
+              <Share2 className="w-5 h-5" />
+            </button>
+          </div>
+
+          <p className="text-[11px] text-muted-foreground/80 pt-2">
+            Scrollsy may earn a commission from purchases through this link.
+          </p>
+        </div>
+      </div>
+
+      {(data?.related ?? []).length > 0 && (
+        <div className="mt-20">
+          <h2 className="font-display text-2xl font-bold mb-6">You might also love</h2>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {data!.related.map((r: any) => (
+              <ProductCard key={r.id} product={r} aspect="tall" />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}