vibefast-cli 0.2.4 → 0.3.1

package/2/apps/web/components/AdminDashboard.tsx

@@ -0,0 +1,336 @@
+"use client"
+
+import Link from "next/link";
+import { useMemo } from "react";
+import { api } from "@vibefast/backend/_generated/api";
+import type { FunctionReference } from "@vibefast/backend";
+import { Button } from "@/components/ui/button";
+import { useQuery } from "convex/react";
+
+const numberFormatter = new Intl.NumberFormat("en-US");
+const dateFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+});
+
+const contextTiles = [
+  {
+    title: "apps/web",
+    description:
+      "Next.js now hosts your admin surface. Keep using the shared component library in `components` to iterate quickly.",
+    badge: "Web Console",
+  },
+  {
+    title: "apps/native",
+    description:
+      "The Expo surface shares the same Convex backend, so this admin summary can be referenced there when you build mobile monitoring screens.",
+    badge: "Mobile Console",
+  },
+  {
+    title: "packages/backend",
+    description:
+      "Convex functions live inside `packages/backend/convex`. Add more queries or actions there whenever you want to extend admin tooling.",
+    badge: "Convex Core",
+  },
+];
+
+const badgeForStatus = (status: string) => {
+  const map: Record<string, string> = {
+    completed: "bg-emerald-100 text-emerald-700",
+    processing: "bg-sky-100 text-sky-700",
+    failed: "bg-rose-100 text-rose-700",
+    open: "bg-amber-100 text-amber-700",
+    resolved: "bg-emerald-100 text-emerald-700",
+    dismissed: "bg-muted/80 text-muted-foreground",
+  };
+  return map[status] ?? "bg-muted/80 text-muted-foreground";
+};
+
+type AdminSummary = {
+  stats: {
+    userCount: number;
+    verifiedUsers: number;
+    totalCredits: number;
+    totalPurchases: number;
+    openReports: number;
+    activeConversations: number;
+  };
+  analysisStatus: {
+    completed: number;
+    processing: number;
+    failed: number;
+  };
+  recentPurchases: Array<{
+    _id: string;
+    productId: string;
+    creditsAdded: number;
+    quantity: number;
+    purchaseDate: number;
+    userId: string;
+  }>;
+  recentAnalyses: Array<{
+    _id: string;
+    status: "completed" | "processing" | "failed";
+    userId: string;
+    _creationTime: number;
+  }>;
+  reportHighlights: Array<{
+    _id: string;
+    status: "open" | "resolved" | "dismissed";
+    reason: string;
+    reportTimestamp: number;
+  }>;
+  generatedAt: number;
+};
+
+const adminSummaryQuery = (
+  api.reportFunctions as unknown as {
+    adminDashboardSummary: FunctionReference<
+      "query",
+      "public",
+      never,
+      AdminSummary
+    >;
+  }
+).adminDashboardSummary;
+
+function formatDate(timestamp?: number) {
+  if (!timestamp) return "—";
+  return dateFormatter.format(new Date(timestamp));
+}
+
+export function AdminDashboard({
+  user,
+}: {
+  user: Awaited<ReturnType<typeof api.sharedUsers.viewer>> | null | undefined;
+}) {
+  const summary = useQuery<AdminSummary>(adminSummaryQuery);
+  const heroName = user?.name ?? "Platform Admin";
+  const heroContact = user?.email ?? user?.phone ?? "Connected admin session";
+
+  const stats = summary?.stats;
+  const statCards = [
+    {
+      label: "Registered users",
+      value: stats?.userCount ?? "—",
+      detail: `${stats?.verifiedUsers ?? 0} verified`,
+    },
+    {
+      label: "Purchases logged",
+      value: stats?.totalPurchases ?? "—",
+      detail: `${numberFormatter.format(stats?.totalCredits ?? 0)} credits issued`,
+    },
+    {
+      label: "Open reports",
+      value: stats?.openReports ?? "—",
+      detail: "AI safety inbox",
+    },
+    {
+      label: "Active conversations",
+      value: stats?.activeConversations ?? "—",
+      detail: "Chatbot threads",
+    },
+  ];
+
+  const analysisStatus = summary?.analysisStatus;
+  const totalAnalyses = useMemo(
+    () =>
+      (analysisStatus?.completed ?? 0) +
+      (analysisStatus?.processing ?? 0) +
+      (analysisStatus?.failed ?? 0),
+    [analysisStatus],
+  );
+
+  return (
+    <section className="space-y-8">
+      <div className="space-y-6 rounded-2xl border bg-card/80 p-6 shadow-lg">
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="space-y-1">
+            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
+              Starter kit admin console
+            </p>
+            <h2 className="text-2xl font-semibold text-foreground">
+              VibeFast admin overview
+            </h2>
+            <p className="max-w-2xl text-sm text-muted-foreground">
+              This dashboard is tuned for your VibeFast admin team. It aggregates data across `apps/web`, `apps/native`, and the Convex core (`packages/backend/convex`)
+              so you can monitor usage, payments, and safety signals in one glance.
+            </p>
+          </div>
+          <div className="rounded-2xl border bg-background/60 p-4 text-right">
+            <p className="text-sm font-semibold text-foreground">{heroName}</p>
+            <p className="text-xs text-muted-foreground">{heroContact}</p>
+          </div>
+        </div>
+        <div className="flex flex-wrap gap-2 text-[0.65rem] font-semibold uppercase tracking-[0.25em] text-muted-foreground">
+          <span className="rounded-full border px-3 py-1">apps/web</span>
+          <span className="rounded-full border px-3 py-1">apps/native</span>
+          <span className="rounded-full border px-3 py-1">packages/backend</span>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        {statCards.map((card) => (
+          <div
+            key={card.label}
+            className="rounded-2xl border bg-background/60 p-5 shadow-sm transition hover:border-primary"
+          >
+            <p className="text-xs font-medium uppercase tracking-[0.25em] text-muted-foreground">{card.label}</p>
+            <p className="mt-3 text-3xl font-semibold text-foreground">{card.value}</p>
+            <p className="mt-1 text-xs text-muted-foreground">{card.detail}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,0.9fr)]">
+        <div className="rounded-2xl border bg-card/60 p-6 shadow-sm">
+          <div className="mb-4 flex items-center justify-between">
+            <div>
+              <p className="text-sm font-semibold text-foreground">Recent global purchases</p>
+              <p className="text-xs text-muted-foreground">Sorted by newest first</p>
+            </div>
+            <span className="text-xs font-semibold uppercase text-primary">Top view</span>
+          </div>
+          {(!summary?.recentPurchases || summary.recentPurchases.length === 0) && (
+            <p className="text-sm text-muted-foreground">
+              No purchases logged yet. Hook up your payments pipeline inside `packages/backend/convex/paymentFunctions.ts`.
+            </p>
+          )}
+          {summary?.recentPurchases && summary.recentPurchases.length > 0 && (
+            <div className="space-y-4">
+              {summary.recentPurchases.map((purchase) => (
+                <div
+                  key={purchase._id}
+                  className="flex items-center justify-between rounded-2xl border border-dashed border-border/60 p-4"
+                >
+                  <div className="space-y-1">
+                    <p className="text-sm font-semibold text-foreground">{purchase.productId}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {purchase.quantity} item(s) · {formatDate(purchase.purchaseDate)}
+                    </p>
+                    <p className="text-[0.65rem] uppercase tracking-[0.25em] text-muted-foreground">
+                      {purchase.userId}
+                    </p>
+                  </div>
+                  <div className="text-right text-sm font-semibold text-foreground">
+                    +{numberFormatter.format(purchase.creditsAdded)} credits
+                    <p className="text-xs text-muted-foreground">credits granted</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="space-y-6">
+          <div className="rounded-2xl border bg-card/60 p-6 shadow-sm">
+            <div className="mb-4 flex items-center justify-between">
+              <div>
+                <p className="text-sm font-semibold text-foreground">Image analysis health</p>
+                <p className="text-xs text-muted-foreground">Status distribution (total {totalAnalyses})</p>
+              </div>
+              <span className="text-xs font-semibold uppercase text-primary">Overview</span>
+            </div>
+            <div className="flex gap-3">
+              {analysisStatus && (
+                <>
+                  <div className="rounded-2xl border bg-background/40 p-3 text-center text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+                    Completed <span className="text-foreground">{analysisStatus.completed}</span>
+                  </div>
+                  <div className="rounded-2xl border bg-background/40 p-3 text-center text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+                    Processing <span className="text-foreground">{analysisStatus.processing}</span>
+                  </div>
+                  <div className="rounded-2xl border bg-background/40 p-3 text-center text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+                    Failed <span className="text-foreground">{analysisStatus.failed}</span>
+                  </div>
+                </>
+              )}
+            </div>
+            <div className="mt-5 space-y-3">
+              {(summary?.recentAnalyses ?? []).map((analysis) => (
+                <div key={analysis._id} className="rounded-2xl border bg-background/40 p-4">
+                  <div className="flex items-center justify-between">
+                    <p className="text-sm font-semibold text-foreground">Analysis {analysis._id.slice(0, 6)}</p>
+                    <span className={`text-[0.65rem] font-semibold uppercase tracking-[0.3em] ${badgeForStatus(analysis.status)}`}>
+                      {analysis.status}
+                    </span>
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    {analysis.userId} · {formatDate(analysis._creationTime)}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="rounded-2xl border bg-card/60 p-6 shadow-sm">
+            <div className="mb-3">
+              <p className="text-sm font-semibold text-foreground">Reporting inbox</p>
+              <p className="text-xs text-muted-foreground">Highest priority items</p>
+            </div>
+            {(summary?.reportHighlights ?? []).length === 0 && (
+              <p className="text-sm text-muted-foreground">No reports to surface yet — great sign for now.</p>
+            )}
+            {(summary?.reportHighlights ?? []).length > 0 && (
+              <div className="space-y-3">
+                {summary.reportHighlights.map((report) => (
+                  <div key={report._id} className="rounded-2xl border bg-background/40 p-4">
+                    <div className="flex items-center justify-between">
+                      <p className="text-sm font-semibold text-foreground">{report.reason}</p>
+                      <span className={`text-[0.65rem] font-semibold uppercase tracking-[0.25em] ${badgeForStatus(report.status)}`}>
+                        {report.status}
+                      </span>
+                    </div>
+                    <p className="text-xs text-muted-foreground">{formatDate(report.reportTimestamp)}</p>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        {contextTiles.map((tile) => (
+          <div key={tile.title} className="space-y-2 rounded-2xl border bg-card/80 p-5">
+            <p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">{tile.badge}</p>
+            <h3 className="text-lg font-semibold text-foreground">{tile.title}</h3>
+            <p className="text-xs text-muted-foreground">{tile.description}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="rounded-2xl border bg-background/60 p-6 text-sm">
+        <p className="text-xs uppercase tracking-[0.3em] text-muted-foreground">Next actions</p>
+        <ul className="mt-4 space-y-4 text-foreground">
+          <li>
+            <p className="font-semibold">1. Extend this starter kit</p>
+            <p className="text-xs text-muted-foreground">
+              Add more Convex queries, triggers, or scheduled tasks inside `packages/backend/convex` and surface them right here by calling the new query you just built.
+            </p>
+          </li>
+          <li>
+            <p className="font-semibold">2. Pin this view to the admin nav</p>
+            <p className="text-xs text-muted-foreground">
+              The `Layout` component is light, so hook in new nav links or actions (see `components/Layout.tsx`) to make this the default landing for your team.
+            </p>
+          </li>
+          <li>
+            <p className="font-semibold">3. Monitor data trends</p>
+            <p className="text-xs text-muted-foreground">
+              Schedule scripts or actions (Convex mutations, schedulers, or third-party uploads) to populate the backend, then refresh this page to see the stats change.
+            </p>
+          </li>
+        </ul>
+        <div className="mt-6 flex flex-wrap items-center gap-3">
+          <Button asChild variant="outline" size="sm">
+            <Link href="/users">Open the Users console</Link>
+          </Button>
+          <p className="text-xs text-muted-foreground">
+            Filter through accounts, view feedback, and delete when necessary.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

package/2/apps/web/components/AppleLogo.tsx

@@ -0,0 +1,15 @@
+export function AppleLogo(props: React.HTMLAttributes<SVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="4 32 376.4 449.4"
+      width="32"
+      height="32"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" />
+    </svg>
+  );
+}
+

package/2/apps/web/components/GitHubLogo.tsx

@@ -0,0 +1,11 @@
+export function GitHubLogo(props: React.HTMLAttributes<SVGElement>) {
+  return (
+    <svg viewBox="0 0 438.549 438.549" {...props}>
+      <path
+        fill="currentColor"
+        d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+      ></path>
+    </svg>
+  );
+}
+

package/2/apps/web/components/GoogleLogo.tsx

@@ -0,0 +1,23 @@
+export function GoogleLogo(props: React.HTMLAttributes<SVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        fill="#EA4335 "
+        d="M5.26620003,9.76452941 C6.19878754,6.93863203 8.85444915,4.90909091 12,4.90909091 C13.6909091,4.90909091 15.2181818,5.50909091 16.4181818,6.49090909 L19.9090909,3 C17.7818182,1.14545455 15.0545455,0 12,0 C7.27006974,0 3.1977497,2.69829785 1.23999023,6.65002441 L5.26620003,9.76452941 Z"
+      />
+      <path
+        fill="#34A853"
+        d="M16.0407269,18.0125889 C14.9509167,18.7163016 13.5660892,19.0909091 12,19.0909091 C8.86648613,19.0909091 6.21911939,17.076871 5.27698177,14.2678769 L1.23746264,17.3349879 C3.19279051,21.2936293 7.26500293,24 12,24 C14.9328362,24 17.7353462,22.9573905 19.834192,20.9995801 L16.0407269,18.0125889 Z"
+      />
+      <path
+        fill="#4A90E2"
+        d="M19.834192,20.9995801 C22.0291676,18.9520994 23.4545455,15.903663 23.4545455,12 C23.4545455,11.2909091 23.3454545,10.5272727 23.1818182,9.81818182 L12,9.81818182 L12,14.4545455 L18.4363636,14.4545455 C18.1187732,16.013626 17.2662994,17.2212117 16.0407269,18.0125889 L19.834192,20.9995801 Z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M5.27698177,14.2678769 C5.03832634,13.556323 4.90909091,12.7937589 4.90909091,12 C4.90909091,11.2182781 5.03443647,10.4668121 5.26620003,9.76452941 L1.23999023,6.65002441 C0.43658717,8.26043162 0,10.0753848 0,12 C0,13.9195484 0.444780743,15.7301709 1.23746264,17.3349879 L5.27698177,14.2678769 Z"
+      />
+    </svg>
+  );
+}
+

package/2/apps/web/components/Layout.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import Link from "next/link";
+import { ReactNode } from "react";
+
+export function Layout({
+  menu,
+  children,
+}: {
+  menu?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen flex-col bg-background text-foreground">
+      <header className="sticky top-0 z-10 border-b bg-background/80 backdrop-blur">
+        <nav className="mx-auto flex w-full max-w-6xl items-center justify-between px-4 py-4">
+          <div className="flex items-center gap-6">
+            <Link
+              href="/"
+              className="text-lg font-semibold tracking-tight transition-colors hover:text-foreground"
+            >
+              VibeFast Console
+            </Link>
+            <div className="flex items-center gap-4 text-sm text-muted-foreground">
+              <Link href="/" className="transition-colors hover:text-foreground">
+                Dashboard
+              </Link>
+              <Link href="/users" className="transition-colors hover:text-foreground">
+                Users
+              </Link>
+            </div>
+          </div>
+          <div className="flex items-center gap-4 text-sm text-muted-foreground">
+            <a
+              href="https://www.vibefast.pro"
+              className="transition-colors hover:text-foreground"
+              target="_blank"
+              rel="noreferrer"
+            >
+              vibefast.pro
+            </a>
+            <a
+              href="https://docs.convex.dev"
+              className="transition-colors hover:text-foreground"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Convex Docs
+            </a>
+            <div className="flex items-center gap-2">{menu}</div>
+          </div>
+        </nav>
+      </header>
+      <main className="flex grow flex-col">
+        <div className="mx-auto flex w-full max-w-6xl flex-col px-4 py-10">
+          {children}
+        </div>
+      </main>
+      <footer className="border-t">
+        <div className="mx-auto w-full max-w-6xl px-4 py-4 text-sm leading-loose text-muted-foreground">
+          Built with ❤️ on VibeFast. Powered by Convex,{" "}
+          <FooterLink href="https://nextjs.org/">Next.js</FooterLink>,{" "}
+          <FooterLink href="https://react.dev/">React</FooterLink> and{" "}
+          <FooterLink href="https://ui.shadcn.com/">shadcn/ui</FooterLink>.
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+function FooterLink({ href, children }: { href: string; children: ReactNode }) {
+  return (
+    <a href={href} className="underline underline-offset-4 hover:no-underline" target="_blank" rel="noreferrer">
+      {children}
+    </a>
+  );
+}

package/2/apps/web/components/ThemeToggle.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { DesktopIcon, MoonIcon, SunIcon } from "@radix-ui/react-icons";
+import { useTheme } from "next-themes";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  return (
+    <ToggleGroup type="single" size="sm" onValueChange={setTheme} value={theme}>
+      <ToggleGroupItem value="light" aria-label="Light">
+        <SunIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="dark" aria-label="Dark">
+        <MoonIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="system" aria-label="System">
+        <DesktopIcon />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+}
+

package/2/apps/web/components/UserMenu.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { ThemeToggle } from "@/components/ThemeToggle";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { PersonIcon } from "@radix-ui/react-icons";
+import { ReactNode } from "react";
+import { useAuthActions } from "@convex-dev/auth/react";
+
+export function UserMenu({
+  favoriteColor,
+  children,
+}: {
+  favoriteColor: string | undefined;
+  children: ReactNode;
+}) {
+  return (
+    <div className="flex items-center gap-2 text-sm font-medium">
+      {children}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="secondary" size="icon" className="rounded-full">
+            <PersonIcon className="h-5 w-5" />
+            <span className="sr-only">Toggle user menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuLabel>{children}</DropdownMenuLabel>
+          {favoriteColor !== undefined && (
+            <DropdownMenuLabel className="flex items-center">
+              Favorite color:
+              <div
+                style={{ backgroundColor: favoriteColor }}
+                className="inline-block ml-1 w-5 h-5 border border-gray-800 rounded-sm"
+              >
+                &nbsp;
+              </div>
+            </DropdownMenuLabel>
+          )}
+          <DropdownMenuSeparator />
+          <DropdownMenuLabel className="flex items-center gap-2 py-0 font-normal">
+            Theme
+            <ThemeToggle />
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <SignOutButton />
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+function SignOutButton() {
+  const { signOut } = useAuthActions();
+  return (
+    <DropdownMenuItem onClick={() => void signOut()}>Sign out</DropdownMenuItem>
+  );
+}
+

package/2/apps/web/components/auth/CodeInput.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "@/components/ui/input-otp";
+
+export function CodeInput({ length = 8 }: { length?: number }) {
+  return (
+    <div className="mb-4">
+      <InputOTP maxLength={8} name="code" id="code">
+        <InputOTPGroup>
+          {Array(length)
+            .fill(null)
+            .map((_, index) => (
+              <InputOTPSlot key={index} index={index} />
+            ))}
+        </InputOTPGroup>
+      </InputOTP>
+    </div>
+  );
+}
+

package/2/apps/web/components/auth/ResetPasswordWithEmailCode.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import { useAuthActions } from "@convex-dev/auth/react";
+import { CodeInput } from "@/components/auth/CodeInput";
+import { SignInWithEmailCode } from "@/components/auth/SignInWithEmailCode";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useToast } from "@/components/ui/use-toast";
+import { useState } from "react";
+
+export function ResetPasswordWithEmailCode({
+  handleCancel,
+  provider,
+}: {
+  handleCancel: () => void;
+  provider: string;
+}) {
+  const { signIn } = useAuthActions();
+  const { toast } = useToast();
+  const [step, setStep] = useState<"forgot" | { email: string }>("forgot");
+  const [submitting, setSubmitting] = useState(false);
+  return step === "forgot" ? (
+    <>
+      <h2 className="font-semibold text-2xl tracking-tight">
+        Send password reset code
+      </h2>
+      <SignInWithEmailCode
+        handleCodeSent={(email) => setStep({ email })}
+        provider={provider}
+      >
+        <input name="flow" type="hidden" value="reset" />
+      </SignInWithEmailCode>
+      <Button type="button" variant="link" onClick={handleCancel}>
+        Cancel
+      </Button>
+    </>
+  ) : (
+    <>
+      <h2 className="font-semibold text-2xl tracking-tight">
+        Check your email
+      </h2>
+      <p className="text-muted-foreground text-sm">
+        Enter the 8-digit code we sent to your email address and choose a new
+        password.
+      </p>
+      <form
+        className="flex flex-col"
+        onSubmit={(event) => {
+          event.preventDefault();
+          setSubmitting(true);
+          const formData = new FormData(event.currentTarget);
+          signIn(provider, formData).catch((error) => {
+            console.error(error);
+            toast({
+              title:
+                "Code could not be verified or new password is too short, try again",
+              variant: "destructive",
+            });
+            setSubmitting(false);
+          });
+        }}
+      >
+        <label htmlFor="email">Code</label>
+        <CodeInput />
+        <label htmlFor="newPassword">New Password</label>
+        <Input
+          type="password"
+          name="newPassword"
+          id="newPassword"
+          className="mb-4 "
+          autoComplete="new-password"
+        />
+        <input type="hidden" name="flow" value="reset-verification" />
+        <input type="hidden" name="email" value={step.email} />
+        <Button type="submit" disabled={submitting}>
+          Continue
+        </Button>
+        <Button type="button" variant="link" onClick={() => setStep("forgot")}>
+          Cancel
+        </Button>
+      </form>
+    </>
+  );
+}
+