add onboarding

package.json

@@ -53,6 +53,7 @@
     "cmdk": "^1.0.0",
     "contentlayer": "^0.3.4",
     "date-fns": "^3.6.0",
+    "framer-motion": "^11.0.28",
     "loops": "^1.0.0",
     "lost-pixel": "^3.16.0",
     "lucide-react": "^0.363.0",

src/app/app/(authenticated-routes)/(onboarding)/layout.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { LogOut } from "lucide-react";
+import React from "react";
+import { Zenitho } from "uvcanvas";
+import { AvatarSelection } from "~/components/patterns/avatar-selection";
+import { Button } from "~/components/ui/button";
+import { signOut } from "next-auth/react";
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div>
+      <Button
+        onClick={() => signOut()}
+        variant="ghost"
+        className="absolute left-4 top-4 z-10"
+      >
+        <LogOut className="mr-2 h-5 w-5" /> Sign out
+      </Button>
+      <div className="relative flex w-full flex-col">
+        <div className="block [&_canvas]:h-[250px] [&_canvas]:w-[100vw]">
+          <Zenitho />
+        </div>
+        <AvatarSelection />
+      </div>
+      <div className="px-4">{children}</div>
+    </div>
+  );
+};
+
+export default Layout;

src/app/app/(authenticated-routes)/(onboarding)/onboarding/settings/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+
+import React from "react";
+
+import { api } from "~/trpc/react";
+
+const Onboarding = () => {
+  const session = useSession();
+
+  const getUserQuery = api.user.getUser.useQuery();
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div>
+        <h1 className="text-center text-4xl font-bold tracking-tight">
+          {session.status === "authenticated"
+            ? `Welcome, ${getUserQuery.data?.name}`
+            : "Welcome to Pullout.so"}
+        </h1>
+        <h2 className="text-center text-xl text-muted-foreground">
+          Change your name or avatar so we can personalize your experience
+        </h2>
+      </div>
+    </div>
+  );
+};
+
+export default Onboarding;

src/app/app/(authenticated-routes)/(onboarding)/onboarding/user/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { ChevronRight, Loader2 } from "lucide-react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+
+import React from "react";
+
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { api } from "~/trpc/react";
+import { motion } from "framer-motion";
+
+const Onboarding = () => {
+  const session = useSession();
+  const [name, setName] = React.useState(session.data?.user.name ?? "");
+  const utils = api.useUtils();
+  const getUserQuery = api.user.getUser.useQuery();
+  const updateUserMutation = api.user.updateUser.useMutation({
+    onSuccess: (data) => {
+      utils.user.invalidate();
+      router.push("/app/onboarding/settings");
+    },
+  });
+  const router = useRouter();
+
+  return (
+    <div className="flex flex-col gap-2">
+      <motion.div
+        transition={{ delay: 0.3, duration: 0.4 }}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+      >
+        <h1 className="text-center text-4xl font-bold tracking-tight">
+          {session.status === "authenticated"
+            ? `Welcome, ${name.length > 0 ? name : getUserQuery.data?.name}`
+            : "Welcome to Pullout.so"}
+        </h1>
+        <h2 className="text-center text-xl text-muted-foreground">
+          Change your name or avatar so we can personalize your experience
+        </h2>
+      </motion.div>
+      <motion.div
+        transition={{ delay: 0.4, duration: 0.4 }}
+        initial={{ x: "-5px", opacity: 0 }}
+        animate={{ x: 0, opacity: 1 }}
+        className="mx-auto flex w-fit gap-2 "
+      >
+        <Input
+          className="mx-auto max-w-[200px]"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <Button
+          disabled={updateUserMutation.isPending}
+          onClick={() => {
+            updateUserMutation.mutate({ name });
+          }}
+          className="mx-auto w-fit"
+        >
+          {updateUserMutation.isPending ? (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <ChevronRight className="mr-2 h-4 w-4" />
+          )}
+          Next
+        </Button>
+      </motion.div>
+    </div>
+  );
+};
+
+export default Onboarding;

src/app/layout.tsx

@@ -4,7 +4,7 @@ import "~/styles/globals.css";
 
 import { Inter } from "next/font/google";
 
-import { Layout } from "~/components/patterns/layout";
+import { AppShell } from "~/components/patterns/app-shell";
 import Providers from "~/components/providers";
 import { Suspense } from "react";
 import Script from "next/script";
@@ -31,7 +31,7 @@ export default function RootLayout({
         />
         <Suspense>
           <Providers>
-            <Layout>{children}</Layout>
+            <AppShell>{children}</AppShell>
           </Providers>
         </Suspense>
         <Toaster />

src/components/patterns/layout.tsx → src/components/patterns/app-shell.tsx

@@ -18,12 +18,15 @@ import { ColorModeSwitch } from "./color-mode-switch";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
 
-export async function Layout({ children }: { children: React.ReactNode }) {
+export async function AppShell({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
 
   const isInApplicationRoute = pathname.includes("/app");
+  const isInOnboardingRoute = pathname.includes("/app/onboarding");
 
-  return (
+  return isInOnboardingRoute ? (
+    <main>{children}</main>
+  ) : (
     <div className="flex min-h-screen w-full flex-col">
       <header className="sticky top-0 z-30 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
         <Link href="/" passHref>
@@ -38,6 +41,12 @@ export async function Layout({ children }: { children: React.ReactNode }) {
         <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
           {isInApplicationRoute ? (
             <>
+              <Link
+                href="/app/onboarding/user"
+                className="text-muted-foreground transition-colors hover:text-foreground"
+              >
+                Onboarding
+              </Link>
               <Link
                 href="/app/subscriptions"
                 className="text-muted-foreground transition-colors hover:text-foreground"