tanstack_start_ts 1.0.0

package/src/routes/profile.tsx

@@ -0,0 +1,393 @@
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { useAuth } from "@/hooks/use-auth";
+import { supabase } from "@/integrations/supabase/client";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import {
+  ArrowRight,
+  Camera,
+  Crown,
+  Heart,
+  LogOut,
+  Shield,
+  ShoppingBag,
+  Star,
+  User as UserIcon,
+} from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { useQuery } from "@tanstack/react-query";
+
+export const Route = createFileRoute("/profile")({
+  head: () => ({ meta: [{ title: "Profile · Scrollsy" }] }),
+  component: Profile,
+});
+
+function Profile() {
+  const { user, loading } = useAuth();
+  const nav = useNavigate();
+  const [name, setName] = useState("");
+  const [avatarUrl, setAvatarUrl] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [avatarSaving, setAvatarSaving] = useState(false);
+
+  const { data: roleData } = useQuery({
+    queryKey: ["profile-role", user?.id],
+    enabled: !!user,
+    queryFn: async () => {
+      const { data } = await supabase
+        .from("user_roles")
+        .select("admin_id")
+        .eq("user_id", user!.id)
+        .eq("role", "admin")
+        .maybeSingle();
+      return data ?? null;
+    },
+  });
+
+  useEffect(() => {
+    if (!user) return;
+    supabase
+      .from("profiles")
+      .select("display_name, avatar_url")
+      .eq("id", user.id)
+      .maybeSingle()
+      .then(({ data }) => {
+        setName(data?.display_name ?? "");
+        setAvatarUrl(data?.avatar_url ?? "");
+      });
+  }, [user]);
+
+  const initials = useMemo(() => {
+    return (
+      name?.trim()?.slice(0, 1)?.toUpperCase() ?? user?.email?.slice(0, 1)?.toUpperCase() ?? "U"
+    );
+  }, [name, user?.email]);
+
+  if (loading) return <div className="px-4 max-w-7xl mx-auto pt-10">Loading…</div>;
+
+  if (!user) {
+    return (
+      <div className="max-w-md mx-auto pt-24 px-4 text-center">
+        <h1 className="font-display text-2xl font-bold">Sign in to view your profile</h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Track saved finds, update your account, and manage your shop profile.
+        </p>
+        <Link
+          to="/login"
+          className="btn-glow inline-block mt-6 rounded-full px-6 py-3 font-semibold text-sm"
+        >
+          Sign in
+        </Link>
+      </div>
+    );
+  }
+
+  const saveProfile = async () => {
+    setSaving(true);
+    const { error } = await supabase.from("profiles").upsert({
+      id: user.id,
+      display_name: name,
+      avatar_url: avatarUrl || null,
+      updated_at: new Date().toISOString(),
+    });
+    setSaving(false);
+
+    if (error) return toast.error(error.message);
+    toast.success("Profile updated");
+  };
+
+  const onAvatarPick = async (file: File | null) => {
+    if (!file) return;
+
+    if (!file.type.startsWith("image/")) {
+      toast.error("Please choose an image file");
+      return;
+    }
+
+    setAvatarSaving(true);
+    try {
+      const dataUrl = await fileToDataUrl(file);
+      setAvatarUrl(dataUrl);
+      const { error } = await supabase.from("profiles").upsert({
+        id: user.id,
+        display_name: name,
+        avatar_url: dataUrl,
+        updated_at: new Date().toISOString(),
+      });
+      if (error) throw error;
+      toast.success("Profile photo updated");
+    } catch (error: any) {
+      toast.error(error?.message ?? "Could not update profile photo");
+    } finally {
+      setAvatarSaving(false);
+    }
+  };
+
+  return (
+    <div className="px-4 max-w-7xl mx-auto pt-10 pb-16">
+      <div className="grid gap-6 lg:grid-cols-[320px_1fr]">
+        <aside className="glass-strong rounded-[2rem] p-6 shadow-elevated h-fit">
+          <div className="relative">
+            <div className="absolute inset-x-0 top-0 h-32 rounded-[1.5rem] bg-gradient-brand opacity-90" />
+            <div className="relative pt-10 pb-6 px-4">
+              <div className="flex justify-center">
+                <div className="relative">
+                  <Avatar className="h-28 w-28 border-[6px] border-background shadow-2xl">
+                    <AvatarImage src={avatarUrl || undefined} alt={name || "Profile photo"} />
+                    <AvatarFallback className="bg-brand-magenta/20 text-2xl font-bold text-foreground">
+                      {initials}
+                    </AvatarFallback>
+                  </Avatar>
+
+                  <label className="absolute bottom-1 right-1 inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-foreground text-background shadow-lg transition hover:scale-105">
+                    <Camera className="h-4 w-4" />
+                    <input
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={(e) => onAvatarPick(e.target.files?.[0] ?? null)}
+                      disabled={avatarSaving}
+                    />
+                  </label>
+                </div>
+              </div>
+
+              <div className="mt-5 text-center">
+                <h1 className="font-display text-2xl font-bold">{name || "Scrollster"}</h1>
+                <p className="text-sm text-muted-foreground break-all">{user.email}</p>
+
+                {roleData?.admin_id ? (
+                  <div className="mt-3 inline-flex items-center gap-2 rounded-full border border-brand-amber/20 bg-brand-amber/10 px-3 py-1 text-xs font-semibold text-brand-amber">
+                    {roleData.admin_id === "doraexplora" ? (
+                      <Crown className="h-3.5 w-3.5" />
+                    ) : (
+                      <Shield className="h-3.5 w-3.5" />
+                    )}
+                    {roleData.admin_id === "doraexplora"
+                      ? "Master Admin"
+                      : `Admin ID ${roleData.admin_id}`}
+                  </div>
+                ) : null}
+              </div>
+
+              <div className="mt-6 grid grid-cols-2 gap-3">
+                <QuickStat label="Saved items" value="24" icon={<Heart className="h-4 w-4" />} />
+                <QuickStat label="Reviews" value="8" icon={<Star className="h-4 w-4" />} />
+              </div>
+            </div>
+          </div>
+        </aside>
+
+        <main className="space-y-6">
+          <section className="glass-strong rounded-[2rem] p-6 md:p-8 shadow-elevated">
+            <div className="flex flex-col gap-6 md:flex-row md:items-start md:justify-between">
+              <div className="max-w-2xl">
+                <div className="inline-flex items-center gap-2 rounded-full bg-brand-magenta/15 px-3 py-1 text-xs font-semibold text-brand-magenta">
+                  <ShoppingBag className="h-3.5 w-3.5" />
+                  Shopping profile
+                </div>
+                <h2 className="mt-3 font-display text-3xl md:text-4xl font-bold tracking-tight">
+                  Your account, styled like a marketplace profile
+                </h2>
+                <p className="mt-3 text-sm md:text-base text-muted-foreground">
+                  Update your display name and photo, access saved deals, and jump to admin tools if
+                  you manage the store.
+                </p>
+
+                <div className="mt-6 flex flex-wrap gap-3">
+                  <Link
+                    to="/saved"
+                    className="inline-flex items-center gap-2 rounded-full border border-white/10 px-4 py-2 text-sm hover:bg-white/5 transition"
+                  >
+                    <Heart className="h-4 w-4" />
+                    Saved items
+                  </Link>
+                  <Link
+                    to="/search"
+                    search={{ q: "" }}
+                    className="inline-flex items-center gap-2 rounded-full border border-white/10 px-4 py-2 text-sm hover:bg-white/5 transition"
+                  >
+                    <ArrowRight className="h-4 w-4" />
+                    Keep shopping
+                  </Link>
+                  {roleData?.admin_id ? (
+                    <Link
+                      to="/admin"
+                      className="inline-flex items-center gap-2 rounded-full border border-brand-magenta/20 bg-brand-magenta/10 px-4 py-2 text-sm font-medium text-foreground hover:bg-brand-magenta/15 transition"
+                    >
+                      <Shield className="h-4 w-4" />
+                      Admin page
+                    </Link>
+                  ) : null}
+                </div>
+              </div>
+
+              <div className="grid gap-3 sm:grid-cols-3 md:w-[360px]">
+                <MiniCard title="Wishlist" value="12" detail="Items ready to buy" />
+                <MiniCard title="Orders" value="3" detail="Recent purchases" />
+                <MiniCard title="Rewards" value="480" detail="Points available" />
+              </div>
+            </div>
+          </section>
+
+          <section className="grid gap-6 md:grid-cols-2">
+            <div className="glass-strong rounded-[2rem] p-6 shadow-card">
+              <h3 className="font-display text-xl font-bold">Profile details</h3>
+              <div className="mt-5 space-y-4">
+                <label className="block">
+                  <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+                    Display name
+                  </span>
+                  <input
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    className="w-full rounded-2xl border border-white/10 bg-background/60 px-4 py-3 text-sm outline-none"
+                    placeholder="Your display name"
+                  />
+                </label>
+
+                <label className="block">
+                  <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+                    Profile photo
+                  </span>
+                  <div className="rounded-2xl border border-dashed border-white/10 bg-background/40 px-4 py-4 text-sm text-muted-foreground">
+                    Upload a square image to make your profile look polished in the marketplace UI.
+                  </div>
+                </label>
+              </div>
+
+              <div className="mt-6 flex flex-wrap gap-3">
+                <button
+                  onClick={saveProfile}
+                  disabled={saving}
+                  className="btn-glow rounded-full px-5 py-2.5 text-sm font-semibold disabled:opacity-60"
+                >
+                  {saving ? "Saving…" : "Save changes"}
+                </button>
+                <button
+                  onClick={() => {
+                    setName(user.user_metadata?.display_name ?? "");
+                    setAvatarUrl("");
+                  }}
+                  className="rounded-full border border-white/10 px-5 py-2.5 text-sm hover:bg-white/5 transition"
+                >
+                  Reset
+                </button>
+              </div>
+            </div>
+
+            <div className="glass-strong rounded-[2rem] p-6 shadow-card">
+              <h3 className="font-display text-xl font-bold">Quick links</h3>
+              <div className="mt-5 space-y-3">
+                <ActionLink
+                  to="/saved"
+                  icon={<Heart className="h-4 w-4" />}
+                  title="Saved items"
+                  description="Open your wishlist and compare favorites."
+                />
+                <ActionLink
+                  to="/categories"
+                  icon={<ShoppingBag className="h-4 w-4" />}
+                  title="Browse categories"
+                  description="Jump back into shopping by mood or category."
+                />
+                <ActionLink
+                  to="/admin"
+                  icon={<Shield className="h-4 w-4" />}
+                  title="Admin page"
+                  description="Manage products and admins."
+                  hidden={!roleData?.admin_id}
+                />
+              </div>
+
+              <div className="mt-6 flex items-center justify-between rounded-2xl border border-white/10 bg-background/40 px-4 py-3">
+                <div>
+                  <div className="text-sm font-medium">Sign out</div>
+                  <div className="text-xs text-muted-foreground">End your current session</div>
+                </div>
+                <button
+                  onClick={async () => {
+                    await supabase.auth.signOut();
+                    nav({ to: "/" });
+                  }}
+                  className="inline-flex items-center gap-2 rounded-full border border-white/10 px-4 py-2 text-sm hover:bg-white/5 transition"
+                >
+                  <LogOut className="h-4 w-4" />
+                  Sign out
+                </button>
+              </div>
+            </div>
+          </section>
+        </main>
+      </div>
+    </div>
+  );
+}
+
+function fileToDataUrl(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result ?? ""));
+    reader.onerror = () => reject(new Error("Failed to read image"));
+    reader.readAsDataURL(file);
+  });
+}
+
+function QuickStat({
+  label,
+  value,
+  icon,
+}: {
+  label: string;
+  value: string;
+  icon: React.ReactNode;
+}) {
+  return (
+    <div className="rounded-2xl border border-white/10 bg-background/40 p-4">
+      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        {icon}
+        {label}
+      </div>
+      <div className="mt-1 font-display text-2xl font-bold">{value}</div>
+    </div>
+  );
+}
+
+function MiniCard({ title, value, detail }: { title: string; value: string; detail: string }) {
+  return (
+    <div className="rounded-2xl border border-white/10 bg-background/40 p-4">
+      <div className="text-xs uppercase tracking-[0.2em] text-muted-foreground">{title}</div>
+      <div className="mt-2 font-display text-2xl font-bold">{value}</div>
+      <div className="mt-1 text-xs text-muted-foreground">{detail}</div>
+    </div>
+  );
+}
+
+function ActionLink({
+  to,
+  icon,
+  title,
+  description,
+  hidden,
+}: {
+  to: "/saved" | "/categories" | "/admin";
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  hidden?: boolean;
+}) {
+  if (hidden) return null;
+
+  return (
+    <Link
+      to={to}
+      className="flex items-start gap-3 rounded-2xl border border-white/10 bg-background/40 p-4 transition hover:bg-white/5"
+    >
+      <div className="mt-0.5 rounded-full bg-brand-magenta/15 p-2 text-brand-magenta">{icon}</div>
+      <div className="min-w-0">
+        <div className="font-medium">{title}</div>
+        <div className="mt-1 text-sm text-muted-foreground">{description}</div>
+      </div>
+    </Link>
+  );
+}

package/src/routes/reset-password.tsx

@@ -0,0 +1,71 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useState } from "react";
+import { supabase } from "@/integrations/supabase/client";
+import { Logo } from "@/components/scrollsy/Logo";
+import { Field } from "./login";
+import { toast } from "sonner";
+import { Mail, ArrowRight } from "lucide-react";
+
+export const Route = createFileRoute("/reset-password")({
+  head: () => ({ meta: [{ title: "Reset password · Scrollsy" }] }),
+  component: ResetPassword,
+});
+
+function ResetPassword() {
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email) return toast.error("Enter the email for your account.");
+    setLoading(true);
+    const { error } = await supabase.auth.resetPasswordForEmail(email, {
+      redirectTo: `${window.location.origin}/update-password`,
+    });
+    setLoading(false);
+    if (error) {
+      return toast.error(error.message || "Unable to send reset email.");
+    }
+    setSubmitted(true);
+    toast.success("Check your email for a password reset link.");
+  };
+
+  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">Forgot your password?</h1>
+        <p className="text-center text-sm text-muted-foreground mt-1">
+          Enter the email tied to your Scrollsy account and we’ll send a secure reset link.
+        </p>
+
+        <form onSubmit={onSubmit} className="space-y-3 mt-6">
+          <Field
+            icon={<Mail className="w-4 h-4" />}
+            type="email"
+            value={email}
+            onChange={setEmail}
+            placeholder="Email"
+          />
+          <button
+            disabled={loading || submitted}
+            className="btn-glow w-full rounded-full py-3 font-semibold text-sm inline-flex items-center justify-center gap-2 disabled:opacity-60"
+          >
+            <ArrowRight className="w-4 h-4" />{" "}
+            {loading ? "Sending…" : submitted ? "Email sent" : "Send reset link"}
+          </button>
+        </form>
+
+        <p className="mt-6 text-sm text-center text-muted-foreground">
+          Remembered it?{" "}
+          <Link to="/login" className="text-foreground font-semibold hover:text-gradient">
+            Sign in
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/routes/saved.tsx

@@ -0,0 +1,83 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/integrations/supabase/client";
+import { useAuth } from "@/hooks/use-auth";
+import { ProductCard } from "@/components/scrollsy/ProductCard";
+import { Heart } from "lucide-react";
+
+export const Route = createFileRoute("/saved")({
+  head: () => ({ meta: [{ title: "Saved · Scrollsy" }] }),
+  component: Saved,
+});
+
+function Saved() {
+  const { user, loading } = useAuth();
+
+  const { data: products, isLoading } = useQuery({
+    queryKey: ["saved-products", user?.id],
+    enabled: !!user,
+    queryFn: async () => {
+      const { data } = await supabase
+        .from("saved_items")
+        .select("created_at, products(*)")
+        .eq("user_id", user!.id)
+        .order("created_at", { ascending: false });
+      return (data ?? []).map((r: any) => r.products).filter(Boolean);
+    },
+  });
+
+  if (loading) return <div className="px-4 max-w-7xl mx-auto pt-10">Loading…</div>;
+
+  if (!user) {
+    return (
+      <div className="max-w-md mx-auto pt-24 px-4 text-center">
+        <Heart className="w-12 h-12 mx-auto text-brand-magenta" />
+        <h1 className="font-display text-3xl font-bold mt-4">Save your favorite finds</h1>
+        <p className="text-muted-foreground mt-2">Sign in to start building your wishlist.</p>
+        <Link
+          to="/login"
+          className="btn-glow inline-block mt-6 rounded-full px-6 py-3 font-semibold text-sm"
+        >
+          Sign in
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-4 max-w-7xl mx-auto pt-10">
+      <h1 className="font-display text-4xl md:text-5xl font-bold tracking-tight">
+        Your <span className="text-gradient">saved</span>
+      </h1>
+      <p className="text-muted-foreground mt-2">{products?.length ?? 0} finds in your collection</p>
+
+      {isLoading ? (
+        <div className="mt-10 grid grid-cols-2 md:grid-cols-4 gap-4">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="aspect-[3/4] rounded-3xl shimmer bg-surface-elevated" />
+          ))}
+        </div>
+      ) : (products?.length ?? 0) === 0 ? (
+        <div className="glass rounded-3xl p-12 text-center mt-10">
+          <div className="text-5xl mb-3">💝</div>
+          <h3 className="font-display text-xl font-semibold">No saved items yet</h3>
+          <p className="text-sm text-muted-foreground mt-1 mb-5">
+            Tap the heart on any find to save it here.
+          </p>
+          <Link
+            to="/"
+            className="btn-glow inline-block rounded-full px-5 py-2.5 text-sm font-semibold"
+          >
+            Start discovering
+          </Link>
+        </div>
+      ) : (
+        <div className="mt-8 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          {products!.map((p: any) => (
+            <ProductCard key={p.id} product={p} aspect="tall" />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/routes/search.tsx

@@ -0,0 +1,136 @@
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { searchProducts } from "@/lib/products.functions";
+import { ProductCard } from "@/components/scrollsy/ProductCard";
+import { Search as SearchIcon } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { z } from "zod";
+import {
+  applyProductFilters,
+  defaultProductFilters,
+  ProductFilters,
+  type FilterableProduct,
+  type ProductFiltersState,
+} from "@/components/scrollsy/ProductFilters";
+
+const searchSchema = z.object({ q: z.string().optional().default("") });
+
+export const Route = createFileRoute("/search")({
+  validateSearch: (s) => searchSchema.parse(s),
+  head: () => ({
+    meta: [
+      { title: "Search · Scrollsy" },
+      { name: "description", content: "Search trending products and viral finds on Scrollsy." },
+    ],
+  }),
+  component: SearchPage,
+});
+
+function SearchPage() {
+  const { q } = Route.useSearch();
+  const nav = useNavigate();
+  const [input, setInput] = useState(q);
+  const [filters, setFilters] = useState<ProductFiltersState>(defaultProductFilters());
+
+  useEffect(() => setInput(q), [q]);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["search", q],
+    queryFn: () => searchProducts({ data: { q } }),
+  });
+
+  const products = useMemo(() => (data ?? []) as FilterableProduct[], [data]);
+  const filteredProducts = useMemo(
+    () => applyProductFilters(products, filters),
+    [products, filters],
+  );
+
+  return (
+    <div className="px-4 max-w-7xl mx-auto pt-10 pb-16">
+      <div className="flex flex-col gap-5 md:flex-row md:items-end md:justify-between">
+        <div>
+          <h1 className="font-display text-4xl md:text-5xl font-bold tracking-tight">
+            {q ? (
+              <>
+                Results for <span className="text-gradient">"{q}"</span>
+              </>
+            ) : (
+              "Discover trending finds"
+            )}
+          </h1>
+          <p className="text-sm text-muted-foreground mt-2">
+            Shop the web like a marketplace — sort, filter, and compare at a glance.
+          </p>
+        </div>
+
+        <div className="text-sm text-muted-foreground">
+          {isLoading ? "Searching…" : `${filteredProducts.length} products found`}
+        </div>
+      </div>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          nav({ to: "/search", search: { q: input } });
+        }}
+        className="mt-6 flex glass-strong rounded-2xl p-1.5 max-w-2xl"
+      >
+        <div className="px-3 flex items-center">
+          <SearchIcon className="w-5 h-5 text-muted-foreground" />
+        </div>
+        <input
+          autoFocus
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Search anything…"
+          className="flex-1 bg-transparent outline-none text-sm py-3"
+        />
+        <button className="btn-glow rounded-xl px-5 text-sm font-semibold">Search</button>
+      </form>
+
+      <div className="mt-6">
+        <ProductFilters
+          filters={filters}
+          onChange={setFilters}
+          resultCount={filteredProducts.length}
+        />
+      </div>
+
+      <div className="mt-8">
+        {isLoading ? (
+          <SkeletonGrid />
+        ) : filteredProducts.length === 0 ? (
+          <EmptyState />
+        ) : (
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {filteredProducts.map((p) => (
+              <ProductCard key={p.id} product={p as any} aspect="tall" />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SkeletonGrid() {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      {Array.from({ length: 8 }).map((_, i) => (
+        <div key={i} className="aspect-[3/4] rounded-3xl shimmer bg-surface-elevated" />
+      ))}
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="glass rounded-3xl p-12 text-center">
+      <div className="text-6xl mb-3">🔍</div>
+      <h3 className="font-display text-xl font-semibold">No finds match that search</h3>
+      <p className="text-sm text-muted-foreground mt-1">
+        Try a different keyword or relax a few filters.
+      </p>
+    </div>
+  );
+}