feat: new onboarding flow (#408)09-03-feat_new_onboarding_flow

This is the onboarding flow that you have all seen in my demo.

4 files changed, 54 insertions, 4 deletions

diff --git a/packages/lib/api.ts b/packages/lib/api.ts
index ad343050..bfdc3ac0 100644
--- a/packages/lib/api.ts
+++ b/packages/lib/api.ts
@@ -187,6 +187,11 @@ export const apiSchema = createSchema({
 		}),
 	},
 
+	// MCP operations
+	"@get/mcp/has-login": {
+		output: z.object({ previousLogin: z.boolean() }),
+	},
+
 	// Waitlist operations
 	"@get/waitlist/status": {
 		output: WaitlistStatusResponseSchema,
diff --git a/packages/ui/components/carousel.tsx b/packages/ui/components/carousel.tsx
index 2462c404..2326bd02 100644
--- a/packages/ui/components/carousel.tsx
+++ b/packages/ui/components/carousel.tsx
@@ -181,8 +181,8 @@ function CarouselPrevious({
 			className={cn(
 				"absolute size-8 rounded-full",
 				orientation === "horizontal"
-					? "top-1/2 -left-12 -translate-y-1/2"
-					: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+					? "top-1/2 left-2 -translate-y-1/2"
+					: "top-2 left-1/2 -translate-x-1/2 rotate-90",
 				className,
 			)}
 			data-slot="carousel-previous"
@@ -211,8 +211,8 @@ function CarouselNext({
 			className={cn(
 				"absolute size-8 rounded-full",
 				orientation === "horizontal"
-					? "top-1/2 -right-12 -translate-y-1/2"
-					: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+					? "top-1/2 right-2 -translate-y-1/2"
+					: "bottom-2 left-1/2 -translate-x-1/2 rotate-90",
 				className,
 			)}
 			data-slot="carousel-next"
diff --git a/packages/ui/components/hover-card.tsx b/packages/ui/components/hover-card.tsx
new file mode 100644
index 00000000..bdf3ce94
--- /dev/null
+++ b/packages/ui/components/hover-card.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2a1bfd1b..7c2a564a 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -12,6 +12,7 @@
 		"@radix-ui/react-collapsible": "^1.1.11",
 		"@radix-ui/react-dialog": "^1.1.14",
 		"@radix-ui/react-dropdown-menu": "^2.1.15",
+		"@radix-ui/react-hover-card": "^1.1.15",
 		"@radix-ui/react-label": "^2.1.7",
 		"@radix-ui/react-popover": "^1.1.14",
 		"@radix-ui/react-progress": "^1.1.7",