tanstack_start_ts 1.0.0

package/src/routes/__root.tsx

@@ -0,0 +1,177 @@
+import { QueryClient, QueryClientProvider, useQueryClient } from "@tanstack/react-query";
+import {
+  Outlet,
+  Link,
+  createRootRouteWithContext,
+  useRouter,
+  HeadContent,
+  Scripts,
+} from "@tanstack/react-router";
+import { useEffect } from "react";
+import { Analytics } from "@vercel/analytics/react";
+
+import appCss from "../styles.css?url";
+import { Nav } from "@/components/scrollsy/Nav";
+import { Footer } from "@/components/scrollsy/Footer";
+import { SupportWidget } from "@/components/scrollsy/SupportWidget";
+import { Toaster } from "@/components/ui/sonner";
+import { supabase } from "@/integrations/supabase/client";
+
+function NotFoundComponent() {
+  return (
+    <div className="flex min-h-screen items-center justify-center px-4">
+      <div className="max-w-md text-center">
+        <h1 className="text-8xl font-display font-bold text-gradient">404</h1>
+        <h2 className="mt-4 text-2xl font-semibold">Page not found</h2>
+        <p className="mt-2 text-sm text-muted-foreground">
+          This deal might have scrolled off the page.
+        </p>
+        <div className="mt-6">
+          <Link
+            to="/"
+            className="btn-glow inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-semibold"
+          >
+            Back to discovery
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ErrorComponent({ error, reset }: { error: Error; reset: () => void }) {
+  console.error(error);
+  const router = useRouter();
+  return (
+    <div className="flex min-h-screen items-center justify-center px-4">
+      <div className="max-w-md text-center glass-strong rounded-3xl p-8">
+        <h1 className="text-xl font-semibold">Something went wrong</h1>
+        <p className="mt-2 text-sm text-muted-foreground">Try again or head home.</p>
+        <div className="mt-6 flex flex-wrap justify-center gap-2">
+          <button
+            onClick={() => {
+              router.invalidate();
+              reset();
+            }}
+            className="btn-glow rounded-full px-4 py-2 text-sm font-semibold"
+          >
+            Try again
+          </button>
+          <a
+            href="/"
+            className="rounded-full border border-white/10 px-4 py-2 text-sm hover:bg-white/5"
+          >
+            Go home
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
+  head: () => ({
+    meta: [
+      { charSet: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { title: "Scrollsy — Scroll. Discover. Save." },
+      {
+        name: "description",
+        content:
+          "Scrollsy is the visual marketplace for viral gadgets, hidden gems, and trending finds. Scroll, discover, and save deals from across the web.",
+      },
+      { name: "author", content: "Scrollsy" },
+      { name: "theme-color", content: "#0a0a14" },
+      { property: "og:title", content: "Scrollsy — Scroll. Discover. Save." },
+      {
+        property: "og:description",
+        content:
+          "Scrollsy is the visual marketplace for viral gadgets, hidden gems, and trending finds. Scroll, discover, and save deals from across the web.",
+      },
+      { property: "og:type", content: "website" },
+      { name: "twitter:card", content: "summary_large_image" },
+      { name: "twitter:site", content: "@scrollsy" },
+      { name: "twitter:title", content: "Scrollsy — Scroll. Discover. Save." },
+      {
+        name: "twitter:description",
+        content:
+          "Scrollsy is the visual marketplace for viral gadgets, hidden gems, and trending finds. Scroll, discover, and save deals from across the web.",
+      },
+      {
+        property: "og:image",
+        content:
+          "https://storage.googleapis.com/gpt-engineer-file-uploads/attachments/og-images/65d9820e-6b8c-4ad9-8991-3bc47757ff5e",
+      },
+      {
+        name: "twitter:image",
+        content:
+          "https://storage.googleapis.com/gpt-engineer-file-uploads/attachments/og-images/65d9820e-6b8c-4ad9-8991-3bc47757ff5e",
+      },
+    ],
+    links: [{ rel: "stylesheet", href: appCss }],
+  }),
+  shellComponent: RootShell,
+  component: RootComponent,
+  notFoundComponent: NotFoundComponent,
+  errorComponent: ErrorComponent,
+});
+
+function RootShell({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    if (typeof window === "undefined" || !("serviceWorker" in navigator)) return;
+    navigator.serviceWorker.register("/sw.js").catch(() => undefined);
+  }, []);
+
+  return (
+    <html lang="en" className="dark">
+      <head>
+        <HeadContent />
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap"
+        />
+        <link rel="manifest" href="/manifest.webmanifest" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+function AuthInvalidator() {
+  const router = useRouter();
+  const qc = useQueryClient();
+  useEffect(() => {
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange(() => {
+      router.invalidate();
+      qc.invalidateQueries();
+    });
+    return () => subscription.unsubscribe();
+  }, [router, qc]);
+  return null;
+}
+
+function RootComponent() {
+  const { queryClient } = Route.useRouteContext();
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthInvalidator />
+      <div className="min-h-screen flex flex-col">
+        <Nav />
+        <main className="flex-1">
+          <Outlet />
+        </main>
+        <Footer />
+      </div>
+      <SupportWidget />
+      <Toaster theme="dark" position="bottom-right" />
+      <Analytics />
+    </QueryClientProvider>
+  );
+}

package/src/routes/about.tsx

@@ -0,0 +1,66 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/about")({
+  head: () => ({
+    meta: [
+      { title: "About · Scrollsy" },
+      {
+        name: "description",
+        content:
+          "Scrollsy is the visual marketplace for trending products, viral finds and smart shopping discoveries.",
+      },
+    ],
+    links: [{ rel: "canonical", href: "/about" }],
+  }),
+  component: () => (
+    <Prose
+      title="The Scrollsy story"
+      subtitle="Built for the way Gen Z actually discovers products."
+    >
+      <p>
+        Scrollsy is a visual product discovery platform. We curate viral gadgets, smart shopping
+        finds and hidden deals from across the web — and present them in a feed that's built for
+        endless, addictive scrolling.
+      </p>
+      <p>
+        We started Scrollsy because online shopping was broken. Marketplaces feel like spreadsheets.
+        Social feeds bury the good stuff between ads. We wanted a place where the products feel like
+        the content — beautiful, surprising, share-worthy.
+      </p>
+      <h2>What we believe</h2>
+      <ul>
+        <li>Great product discovery feels like inspiration, not advertising.</li>
+        <li>Affordable doesn't have to mean cheap.</li>
+        <li>Trends move fast — the feed should too.</li>
+      </ul>
+      <h2>How it works</h2>
+      <p>
+        Every product on Scrollsy links out to a trusted retailer through an affiliate link. You buy
+        directly from the store, and Scrollsy may earn a small commission. It costs you nothing
+        extra and helps keep the platform free.
+      </p>
+    </Prose>
+  ),
+});
+
+export function Prose({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="max-w-3xl mx-auto px-4 pt-12">
+      <h1 className="font-display text-4xl md:text-5xl font-bold tracking-tight">
+        <span className="text-gradient">{title}</span>
+      </h1>
+      {subtitle && <p className="text-lg text-muted-foreground mt-3">{subtitle}</p>}
+      <div className="prose prose-invert mt-8 space-y-4 [&_h2]:font-display [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:mt-10 [&_h2]:mb-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:space-y-1 [&_p]:text-muted-foreground [&_li]:text-muted-foreground">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/routes/admin.login.tsx

@@ -0,0 +1,95 @@
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { useServerFn } from "@tanstack/react-start";
+import { supabase } from "@/integrations/supabase/client";
+import { verifyAdminId } from "@/lib/admin.functions";
+import { Logo } from "@/components/scrollsy/Logo";
+import { Field } from "@/routes/login";
+import { Mail, Lock, Shield, KeyRound } from "lucide-react";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/admin/login")({
+  head: () => ({
+    meta: [{ title: "Admin sign-in · Scrollsy" }, { name: "robots", content: "noindex" }],
+  }),
+  component: AdminLogin,
+});
+
+function AdminLogin() {
+  const nav = useNavigate();
+  const verifyFn = useServerFn(verifyAdminId);
+  const [adminId, setAdminId] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const { error } = await supabase.auth.signInWithPassword({ email, password });
+      if (error) throw new Error(error.message);
+      await verifyFn({ data: { admin_id: adminId.trim() } });
+      toast.success("Welcome, admin");
+      nav({ to: "/admin" });
+    } catch (err: any) {
+      await supabase.auth.signOut();
+      toast.error(err.message ?? "Sign-in failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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>
+        <div className="inline-flex items-center gap-2 mx-auto mt-4 px-3 py-1 rounded-full bg-brand-magenta/15 text-brand-magenta text-xs font-semibold w-fit block">
+          <Shield className="w-3.5 h-3.5" /> Restricted area
+        </div>
+        <h1 className="font-display text-3xl font-bold text-center mt-3">Admin sign-in</h1>
+        <p className="text-center text-sm text-muted-foreground mt-1">
+          Enter your assigned Admin ID along with your email and password.
+        </p>
+
+        <form onSubmit={onSubmit} className="space-y-3 mt-6">
+          <Field
+            icon={<KeyRound className="w-4 h-4" />}
+            value={adminId}
+            onChange={setAdminId}
+            placeholder="Admin ID"
+          />
+          <Field
+            icon={<Mail className="w-4 h-4" />}
+            type="email"
+            value={email}
+            onChange={setEmail}
+            placeholder="Admin email"
+          />
+          <Field
+            icon={<Lock className="w-4 h-4" />}
+            type="password"
+            value={password}
+            onChange={setPassword}
+            placeholder="Password"
+          />
+          <button
+            disabled={loading || !adminId || !email || !password}
+            className="btn-glow w-full rounded-full py-3 font-semibold text-sm disabled:opacity-60"
+          >
+            {loading ? "Verifying…" : "Sign in as admin"}
+          </button>
+        </form>
+
+        <p className="mt-6 text-xs text-center text-muted-foreground">
+          Not an admin?{" "}
+          <Link to="/login" className="text-foreground font-semibold">
+            Regular sign-in
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}