Files
claudemesh/apps/web/src/app/[locale]/dashboard/(user)/page.tsx
Alejandro Gutiérrez 138b5a24ae
Some checks failed
CI / Tests / 🧪 Test (push) Has been cancelled
feat(web): first-time user onboarding flow
New user signs in → /dashboard (user) → hits server-side getMyMeshes → 0
results → redirects to /dashboard/meshes/new?onboarding=1. Create-mesh
page renders a welcome banner explaining what a mesh is. After submit,
if ?onboarding=1 was set, the form bounces to
/dashboard/meshes/[id]/invite?onboarding=1 instead of the mesh detail
page. Invite page renders a "🎉 Mesh created" banner with the
`claudemesh join <link>` CLI snippet.

The onboarding flag is URL-driven — no persistence needed, dismissal
happens naturally when the user navigates away.

Also rewrites the /dashboard (user) home page from the placeholder
"Welcome to your Dashboard" TurboStarter card grid to a claudemesh-
native view: top 6 meshes with badges, All meshes / New mesh CTAs.
Removes the unused Card/Icons imports.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-04 23:47:52 +01:00

86 lines
2.8 KiB
TypeScript

import Link from "next/link";
import { redirect } from "next/navigation";
import { getMyMeshesResponseSchema } from "@turbostarter/api/schema";
import { handle } from "@turbostarter/api/utils";
import { Badge } from "@turbostarter/ui-web/badge";
import { buttonVariants } from "@turbostarter/ui-web/button";
import { pathsConfig } from "~/config/paths";
import { api } from "~/lib/api/server";
import { getMetadata } from "~/lib/metadata";
export const generateMetadata = getMetadata({
title: "Dashboard",
description: "Your meshes.",
});
export default async function DashboardHomePage() {
const { data } = await handle(api.my.meshes.$get, {
schema: getMyMeshesResponseSchema,
})({
query: { page: "1", perPage: "6", sort: JSON.stringify([]) },
});
// First-time onboarding: 0-mesh user → bounce to create
if (data.length === 0) {
redirect(`${pathsConfig.dashboard.user.meshes.new}?onboarding=1`);
}
return (
<div className="space-y-8">
<div>
<h1 className="text-2xl font-medium tracking-tight">Your meshes</h1>
<p className="text-muted-foreground text-sm">
Open one to see its members, generate invites, or share it.
</p>
</div>
<div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
{data.map((m) => (
<Link
key={m.id}
href={pathsConfig.dashboard.user.meshes.mesh(m.id)}
className="group rounded-lg border p-5 transition-colors hover:border-primary hover:bg-muted/30"
>
<div className="mb-3 flex items-start justify-between gap-2">
<div className="min-w-0 flex-1">
<h3 className="group-hover:text-primary truncate font-medium">
{m.name}
</h3>
<p className="text-muted-foreground truncate font-mono text-xs">
{m.slug}
</p>
</div>
<Badge variant="outline" className="text-xs">
{m.isOwner ? "owner" : m.myRole}
</Badge>
</div>
<div className="flex items-center gap-3 text-xs">
<Badge variant="secondary" className="text-xs">
{m.tier}
</Badge>
<span className="text-muted-foreground">
{m.memberCount} {m.memberCount === 1 ? "member" : "members"}
</span>
</div>
</Link>
))}
</div>
<div className="flex gap-3">
<Link
href={pathsConfig.dashboard.user.meshes.index}
className={buttonVariants({ variant: "outline" })}
>
All meshes
</Link>
<Link
href={pathsConfig.dashboard.user.meshes.new}
className={buttonVariants({ variant: "default" })}
>
New mesh
</Link>
</div>
</div>
);
}