tanstack_start_ts 1.0.0

package/src/components/scrollsy/Nav.tsx

@@ -0,0 +1,255 @@
+import { Link, useRouterState } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Search,
+  Heart,
+  User as UserIcon,
+  Menu,
+  X,
+  Sparkles,
+  ChevronDown,
+  Shield,
+  LogOut,
+} from "lucide-react";
+import { useState } from "react";
+import { Logo } from "./Logo";
+import { useAuth } from "@/hooks/use-auth";
+import { supabase } from "@/integrations/supabase/client";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+const navLinks = [
+  { to: "/", label: "Discover" },
+  { to: "/categories", label: "Categories" },
+  { to: "/search", label: "Search" },
+];
+
+export function Nav() {
+  const { user } = useAuth();
+  const path = useRouterState({ select: (r) => r.location.pathname });
+  const [open, setOpen] = useState(false);
+
+  const { data: profile } = useQuery({
+    queryKey: ["nav-profile", user?.id],
+    enabled: !!user,
+    queryFn: async () => {
+      const { data } = await supabase
+        .from("profiles")
+        .select("display_name, avatar_url")
+        .eq("id", user!.id)
+        .maybeSingle();
+      return data ?? null;
+    },
+  });
+
+  const initials =
+    profile?.display_name?.slice(0, 1)?.toUpperCase() ??
+    user?.email?.slice(0, 1)?.toUpperCase() ??
+    "U";
+
+  return (
+    <header className="sticky top-0 z-50 px-3 pt-3">
+      <nav className="glass-strong rounded-2xl px-4 md:px-6 h-14 flex items-center justify-between max-w-7xl mx-auto shadow-card">
+        <div className="flex items-center gap-8">
+          <Logo />
+          <div className="hidden md:flex items-center gap-1">
+            {navLinks.map((l) => (
+              <Link
+                key={l.to}
+                to={l.to}
+                className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+                  path === l.to
+                    ? "text-foreground bg-white/5"
+                    : "text-muted-foreground hover:text-foreground hover:bg-white/5"
+                }`}
+              >
+                {l.label}
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Link
+            to="/search"
+            search={{ q: "" }}
+            className="hidden sm:flex items-center gap-2 glass rounded-full px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground transition w-56"
+          >
+            <Search className="w-4 h-4" />
+            <span>Search trending finds…</span>
+          </Link>
+
+          {user ? (
+            <>
+              <Link
+                to="/saved"
+                className="hidden sm:inline-flex p-2 rounded-full hover:bg-white/5 transition"
+                aria-label="Saved"
+              >
+                <Heart className="w-5 h-5" />
+              </Link>
+
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    className="flex items-center gap-2 rounded-full p-1.5 pr-2.5 hover:bg-white/5 transition"
+                    aria-label="Open profile menu"
+                  >
+                    <Avatar className="h-9 w-9 border border-white/10">
+                      <AvatarImage
+                        src={profile?.avatar_url ?? undefined}
+                        alt={profile?.display_name ?? "Profile"}
+                      />
+                      <AvatarFallback className="bg-brand-magenta/20 text-sm font-semibold text-foreground">
+                        {initials}
+                      </AvatarFallback>
+                    </Avatar>
+                    <ChevronDown className="hidden sm:block w-4 h-4 text-muted-foreground" />
+                  </button>
+                </DropdownMenuTrigger>
+
+                <DropdownMenuContent align="end" className="w-64">
+                  <DropdownMenuLabel>
+                    <div className="flex items-center gap-3">
+                      <Avatar className="h-10 w-10 border border-white/10">
+                        <AvatarImage
+                          src={profile?.avatar_url ?? undefined}
+                          alt={profile?.display_name ?? "Profile"}
+                        />
+                        <AvatarFallback className="bg-brand-magenta/20 text-sm font-semibold text-foreground">
+                          {initials}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="min-w-0">
+                        <div className="truncate text-sm font-semibold">
+                          {profile?.display_name || "Your account"}
+                        </div>
+                        <div className="truncate text-xs text-muted-foreground">{user.email}</div>
+                      </div>
+                    </div>
+                  </DropdownMenuLabel>
+
+                  <DropdownMenuSeparator />
+
+                  <DropdownMenuItem asChild>
+                    <Link to="/profile" className="flex w-full items-center gap-2">
+                      <UserIcon className="w-4 h-4" />
+                      Profile
+                    </Link>
+                  </DropdownMenuItem>
+
+                  <DropdownMenuItem asChild>
+                    <Link to="/saved" className="flex w-full items-center gap-2">
+                      <Heart className="w-4 h-4" />
+                      Saved items
+                    </Link>
+                  </DropdownMenuItem>
+
+                  <DropdownMenuItem asChild>
+                    <Link to="/admin" className="flex w-full items-center gap-2">
+                      <Shield className="w-4 h-4" />
+                      Admin page
+                    </Link>
+                  </DropdownMenuItem>
+
+                  <DropdownMenuSeparator />
+
+                  <DropdownMenuItem
+                    className="flex items-center gap-2 text-destructive focus:text-destructive"
+                    onSelect={() => {
+                      supabase.auth.signOut();
+                    }}
+                  >
+                    <LogOut className="w-4 h-4" />
+                    Sign out
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </>
+          ) : (
+            <>
+              <Link
+                to="/login"
+                className="hidden sm:inline-flex px-3 py-1.5 text-sm rounded-lg hover:bg-white/5 transition"
+              >
+                Log in
+              </Link>
+              <Link
+                to="/signup"
+                className="btn-glow rounded-full px-4 py-1.5 text-sm font-semibold inline-flex items-center gap-1.5"
+              >
+                <Sparkles className="w-3.5 h-3.5" /> Join free
+              </Link>
+            </>
+          )}
+
+          <button
+            className="md:hidden p-2 rounded-lg hover:bg-white/5"
+            onClick={() => setOpen(!open)}
+            aria-label="Menu"
+          >
+            {open ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+          </button>
+        </div>
+      </nav>
+
+      {open && (
+        <div className="md:hidden glass-strong rounded-2xl mt-2 max-w-7xl mx-auto p-3 animate-fade-up">
+          {navLinks.map((l) => (
+            <Link
+              key={l.to}
+              to={l.to}
+              onClick={() => setOpen(false)}
+              className="block px-3 py-2 rounded-lg text-sm hover:bg-white/5"
+            >
+              {l.label}
+            </Link>
+          ))}
+
+          {user ? (
+            <div className="mt-2 border-t border-white/10 pt-2 space-y-1">
+              <Link
+                to="/profile"
+                onClick={() => setOpen(false)}
+                className="block px-3 py-2 rounded-lg text-sm hover:bg-white/5"
+              >
+                Profile
+              </Link>
+              <Link
+                to="/saved"
+                onClick={() => setOpen(false)}
+                className="block px-3 py-2 rounded-lg text-sm hover:bg-white/5"
+              >
+                Saved items
+              </Link>
+              <Link
+                to="/admin"
+                onClick={() => setOpen(false)}
+                className="block px-3 py-2 rounded-lg text-sm hover:bg-white/5"
+              >
+                Admin page
+              </Link>
+              <button
+                onClick={async () => {
+                  setOpen(false);
+                  await supabase.auth.signOut();
+                }}
+                className="w-full text-left px-3 py-2 rounded-lg text-sm text-destructive hover:bg-white/5"
+              >
+                Sign out
+              </button>
+            </div>
+          ) : null}
+        </div>
+      )}
+    </header>
+  );
+}

package/src/components/scrollsy/ProductCard.tsx

@@ -0,0 +1,190 @@
+import { Link } from "@tanstack/react-router";
+import { Heart, ExternalLink, Flame, TrendingUp, Truck } from "lucide-react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { supabase } from "@/integrations/supabase/client";
+import { useAuth } from "@/hooks/use-auth";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { resolveBuyUrl, resolveProductLabel } from "@/lib/product-links";
+
+export type Product = {
+  id: string;
+  title: string;
+  description: string | null;
+  image_url: string;
+  price: number;
+  original_price: number | null;
+  affiliate_url: string;
+  merchant: string | null;
+  badges: string[];
+  tags: string[];
+  is_trending: boolean;
+  is_hot: boolean;
+  shipping_info: string | null;
+  delivery_estimate: string | null;
+  view_count: number;
+};
+
+export function ProductCard({
+  product,
+  aspect = "auto",
+  className,
+  priority = false,
+}: {
+  product: Product;
+  aspect?: "auto" | "square" | "tall" | "wide";
+  className?: string;
+  priority?: boolean;
+}) {
+  const { user } = useAuth();
+  const qc = useQueryClient();
+
+  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));
+    },
+  });
+  const isSaved = savedIds?.has(product.id) ?? false;
+
+  const toggleSave = useMutation({
+    mutationFn: async () => {
+      if (!user) throw new Error("login");
+      if (isSaved) {
+        await supabase
+          .from("saved_items")
+          .delete()
+          .eq("user_id", user.id)
+          .eq("product_id", product.id);
+      } else {
+        await supabase.from("saved_items").insert({ user_id: user.id, product_id: product.id });
+      }
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["saved-ids", user?.id] });
+      qc.invalidateQueries({ queryKey: ["saved-products", user?.id] });
+      toast.success(isSaved ? "Removed from saved" : "Saved to favorites", { duration: 1500 });
+    },
+    onError: (e: Error) => {
+      if (e.message === "login") toast.error("Sign in to save items");
+    },
+  });
+
+  const discount = product.original_price
+    ? Math.round((1 - Number(product.price) / Number(product.original_price)) * 100)
+    : 0;
+
+  const aspectClass = {
+    auto: "",
+    square: "aspect-square",
+    tall: "aspect-[3/4]",
+    wide: "aspect-[4/3]",
+  }[aspect];
+
+  const buyUrl = resolveBuyUrl(product);
+  const productLabel = resolveProductLabel(product);
+  const [imageError, setImageError] = useState(false);
+
+  return (
+    <article
+      className={cn(
+        "group card-tilt relative overflow-hidden rounded-3xl bg-gradient-card border border-white/5",
+        className,
+      )}
+    >
+      <Link to="/product/$id" params={{ id: product.id }} className="block">
+        <div className={cn("relative overflow-hidden", aspectClass)}>
+          <img
+            src={
+              imageError
+                ? "https://images.unsplash.com/photo-1556742205-9fe6f32a8f6f?auto=format&fit=crop&w=1200&q=80"
+                : product.image_url
+            }
+            alt={product.title}
+            loading={priority ? "eager" : "lazy"}
+            onError={() => setImageError(true)}
+            className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/0 to-black/0" />
+
+          {/* Top-left badges */}
+          <div className="absolute top-3 left-3 flex flex-col gap-1.5">
+            {discount > 0 && (
+              <span className="bg-gradient-brand text-white text-[11px] font-bold px-2 py-1 rounded-full shadow-lg">
+                -{discount}%
+              </span>
+            )}
+            {product.is_hot && (
+              <span className="glass text-[10px] font-semibold px-2 py-1 rounded-full inline-flex items-center gap-1">
+                <Flame className="w-3 h-3 text-brand-orange" /> Hot
+              </span>
+            )}
+            {product.is_trending && !product.is_hot && (
+              <span className="glass text-[10px] font-semibold px-2 py-1 rounded-full inline-flex items-center gap-1">
+                <TrendingUp className="w-3 h-3 text-brand-magenta" /> Trending
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="p-4 space-y-2">
+          <h3 className="font-display font-semibold text-sm leading-snug line-clamp-2 min-h-[2.5rem]">
+            {product.title}
+          </h3>
+          {product.description && (
+            <p className="text-xs text-muted-foreground line-clamp-2">{product.description}</p>
+          )}
+          <div className="flex items-baseline gap-2 pt-1">
+            <span className="text-lg font-bold text-gradient">
+              ${Number(product.price).toFixed(2)}
+            </span>
+            {product.original_price && (
+              <span className="text-xs text-muted-foreground line-through">
+                ${Number(product.original_price).toFixed(2)}
+              </span>
+            )}
+          </div>
+          {product.shipping_info && (
+            <div className="flex items-center gap-1 text-[11px] text-muted-foreground">
+              <Truck className="w-3 h-3" />
+              <span>{product.shipping_info}</span>
+              {product.delivery_estimate && <span>· {product.delivery_estimate}</span>}
+            </div>
+          )}
+        </div>
+      </Link>
+
+      {/* Floating action buttons */}
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          toggleSave.mutate();
+        }}
+        className={cn(
+          "absolute top-3 right-3 p-2 rounded-full glass transition-all",
+          isSaved && "bg-gradient-brand border-transparent",
+        )}
+        aria-label={isSaved ? "Unsave" : "Save"}
+      >
+        <Heart className={cn("w-4 h-4", isSaved ? "fill-white text-white" : "text-white/90")} />
+      </button>
+
+      <a
+        href={buyUrl ?? product.affiliate_url}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={(e) => e.stopPropagation()}
+        className="absolute bottom-4 right-4 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all btn-glow rounded-full px-3 py-1.5 text-xs font-semibold inline-flex items-center gap-1"
+        title={`Open ${productLabel}`}
+      >
+        Buy Now <ExternalLink className="w-3 h-3" />
+      </a>
+    </article>
+  );
+}

package/src/components/scrollsy/ProductFilters.tsx

@@ -0,0 +1,226 @@
+import type { ReactNode } from "react";
+import { Filter, RotateCcw, SlidersHorizontal } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type ProductSort = "relevance" | "newest" | "popular" | "price-asc" | "price-desc";
+
+export type ProductFiltersState = {
+  sort: ProductSort;
+  maxPrice: string;
+  trending: boolean;
+  hot: boolean;
+  featured: boolean;
+  freeShipping: boolean;
+};
+
+export type FilterableProduct = {
+  id: string;
+  title: string;
+  price: number;
+  original_price: number | null;
+  view_count: number;
+  created_at?: string;
+  is_trending?: boolean;
+  is_hot?: boolean;
+  is_featured?: boolean;
+  shipping_info?: string | null;
+};
+
+export const defaultProductFilters = (): ProductFiltersState => ({
+  sort: "relevance",
+  maxPrice: "",
+  trending: false,
+  hot: false,
+  featured: false,
+  freeShipping: false,
+});
+
+export function applyProductFilters(products: FilterableProduct[], filters: ProductFiltersState) {
+  const maxPrice = filters.maxPrice ? Number(filters.maxPrice) : Number.POSITIVE_INFINITY;
+
+  let filtered = products.filter((product) => {
+    if (Number.isFinite(maxPrice) && product.price > maxPrice) return false;
+    if (filters.trending && !product.is_trending) return false;
+    if (filters.hot && !product.is_hot) return false;
+    if (filters.featured && !product.is_featured) return false;
+    if (filters.freeShipping && !product.shipping_info?.toLowerCase().includes("free"))
+      return false;
+    return true;
+  });
+
+  filtered = [...filtered].sort((a, b) => {
+    switch (filters.sort) {
+      case "newest":
+        return new Date(b.created_at ?? 0).getTime() - new Date(a.created_at ?? 0).getTime();
+      case "popular":
+        return (b.view_count ?? 0) - (a.view_count ?? 0);
+      case "price-asc":
+        return a.price - b.price;
+      case "price-desc":
+        return b.price - a.price;
+      default:
+        return 0;
+    }
+  });
+
+  return filtered;
+}
+
+export function ProductFilters({
+  filters,
+  onChange,
+  resultCount,
+}: {
+  filters: ProductFiltersState;
+  onChange: (next: ProductFiltersState) => void;
+  resultCount: number;
+}) {
+  const set = <K extends keyof ProductFiltersState>(key: K, value: ProductFiltersState[K]) =>
+    onChange({ ...filters, [key]: value });
+
+  const reset = () => onChange(defaultProductFilters());
+
+  return (
+    <div className="glass-strong rounded-3xl p-4 md:p-5 border border-white/10">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+        <div>
+          <div className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
+            <SlidersHorizontal className="w-4 h-4" />
+            Filters
+          </div>
+          <h2 className="font-display text-xl font-bold mt-2">Refine your results</h2>
+          <p className="text-sm text-muted-foreground mt-1">
+            {resultCount} products match your filters
+          </p>
+        </div>
+
+        <button
+          type="button"
+          onClick={reset}
+          className="inline-flex items-center justify-center gap-2 rounded-full border border-white/10 px-4 py-2 text-sm hover:bg-white/5 transition"
+        >
+          <RotateCcw className="w-4 h-4" />
+          Reset
+        </button>
+      </div>
+
+      <div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-5">
+        <Field label="Sort by">
+          <select
+            value={filters.sort}
+            onChange={(e) => set("sort", e.target.value as ProductSort)}
+            className="w-full rounded-2xl border border-white/10 bg-background/60 px-3 py-2.5 text-sm outline-none"
+          >
+            <option value="relevance">Relevance</option>
+            <option value="newest">Newest</option>
+            <option value="popular">Most popular</option>
+            <option value="price-asc">Price: low to high</option>
+            <option value="price-desc">Price: high to low</option>
+          </select>
+        </Field>
+
+        <Field label="Max price">
+          <input
+            inputMode="numeric"
+            type="number"
+            min="0"
+            value={filters.maxPrice}
+            onChange={(e) => set("maxPrice", e.target.value)}
+            placeholder="Any price"
+            className="w-full rounded-2xl border border-white/10 bg-background/60 px-3 py-2.5 text-sm outline-none"
+          />
+        </Field>
+
+        <FilterToggle
+          label="Trending"
+          checked={filters.trending}
+          onChange={(checked) => set("trending", checked)}
+        />
+        <FilterToggle
+          label="Hot"
+          checked={filters.hot}
+          onChange={(checked) => set("hot", checked)}
+        />
+        <FilterToggle
+          label="Featured"
+          checked={filters.featured}
+          onChange={(checked) => set("featured", checked)}
+        />
+      </div>
+
+      <div className="mt-3 flex flex-wrap gap-2">
+        <FilterPill
+          active={filters.freeShipping}
+          onClick={() => set("freeShipping", !filters.freeShipping)}
+          label="Free shipping"
+          icon={<Filter className="w-3.5 h-3.5" />}
+        />
+      </div>
+    </div>
+  );
+}
+
+function Field({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <label className="block">
+      <span className="mb-2 block text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+        {label}
+      </span>
+      {children}
+    </label>
+  );
+}
+
+function FilterToggle({
+  label,
+  checked,
+  onChange,
+}: {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={() => onChange(!checked)}
+      className={cn(
+        "rounded-2xl border px-4 py-3 text-left text-sm transition",
+        checked
+          ? "border-brand-magenta/60 bg-brand-magenta/15 text-foreground shadow-lg"
+          : "border-white/10 bg-background/40 text-muted-foreground hover:bg-white/5 hover:text-foreground",
+      )}
+    >
+      <span className="block font-medium">{label}</span>
+      <span className="mt-0.5 block text-xs opacity-80">{checked ? "On" : "Off"}</span>
+    </button>
+  );
+}
+
+function FilterPill({
+  label,
+  icon,
+  active,
+  onClick,
+}: {
+  label: string;
+  icon: ReactNode;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm transition",
+        active
+          ? "bg-foreground text-background"
+          : "border border-white/10 bg-background/40 text-muted-foreground hover:bg-white/5 hover:text-foreground",
+      )}
+    >
+      {icon}
+      {label}
+    </button>
+  );
+}