vibefast-cli 0.6.2 → 0.7.1

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

@@ -1,336 +0,0 @@
-"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

@@ -1,15 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,77 +0,0 @@
-"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

@@ -1,23 +0,0 @@
-"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

@@ -1,66 +0,0 @@
-"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

@@ -1,24 +0,0 @@
-"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

@@ -1,85 +0,0 @@
-"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>
-    </>
-  );
-}
-