From 60794f63e2bde8a4298fe7677f9cad4942fab3ef Mon Sep 17 00:00:00 2001 From: MaheshtheDev <38828053+MaheshtheDev@users.noreply.github.com> Date: Wed, 1 Oct 2025 21:59:53 +0000 Subject: [PATCH] UI: onboarding improvements (#435) UI: onboarding improvements ui(onboarding): updated onboarding ui patterns --- apps/web/app/layout.tsx | 48 +- apps/web/app/onboarding/bio-form.tsx | 173 +++---- apps/web/app/onboarding/extension-form.tsx | 161 ++++--- apps/web/app/onboarding/intro.tsx | 6 +- apps/web/app/onboarding/mcp-form.tsx | 441 ++++++++++-------- apps/web/app/onboarding/name-form.tsx | 177 +++---- apps/web/app/onboarding/nav-menu.tsx | 2 +- .../app/onboarding/onboarding-background.tsx | 35 ++ .../web/app/onboarding/onboarding-context.tsx | 356 +++++++------- apps/web/app/onboarding/onboarding-form.tsx | 183 ++++---- apps/web/app/onboarding/page.tsx | 44 +- apps/web/app/onboarding/progress-bar.tsx | 39 +- apps/web/app/onboarding/welcome.tsx | 45 +- apps/web/app/page.tsx | 209 +-------- apps/web/biome.json | 7 + apps/web/components/menu.tsx | 21 - apps/web/components/tour.tsx | 414 ---------------- apps/web/lib/analytics.ts | 3 - apps/web/lib/tour-constants.ts | 23 - apps/web/public/onboarding-complete.png | Bin 0 -> 3984689 bytes apps/web/public/onboarding.png | Bin 0 -> 5195205 bytes packages/hooks/use-onboarding-storage.ts | 33 ++ 22 files changed, 994 insertions(+), 1426 deletions(-) create mode 100644 apps/web/app/onboarding/onboarding-background.tsx delete mode 100644 apps/web/components/tour.tsx delete mode 100644 apps/web/lib/tour-constants.ts create mode 100644 apps/web/public/onboarding-complete.png create mode 100644 apps/web/public/onboarding.png create mode 100644 packages/hooks/use-onboarding-storage.ts diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 8b1adc85..70d4916f 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -1,47 +1,45 @@ -import type { Metadata } from "next"; -import { Inter, JetBrains_Mono, Instrument_Serif } from "next/font/google"; -import "../globals.css"; -import "@ui/globals.css"; -import { AuthProvider } from "@lib/auth-context"; -import { ErrorTrackingProvider } from "@lib/error-tracking"; -import { PostHogProvider } from "@lib/posthog"; -import { QueryProvider } from "@lib/query-client"; -import { AutumnProvider } from "autumn-js/react"; -import { Suspense } from "react"; -import { Toaster } from "sonner"; -import { TourProvider } from "@/components/tour"; -import { MobilePanelProvider } from "@/lib/mobile-panel-context"; -import { NuqsAdapter } from 'nuqs/adapters/next/app' +import type { Metadata } from "next" +import { Inter, JetBrains_Mono, Instrument_Serif } from "next/font/google" +import "../globals.css" +import "@ui/globals.css" +import { AuthProvider } from "@lib/auth-context" +import { ErrorTrackingProvider } from "@lib/error-tracking" +import { PostHogProvider } from "@lib/posthog" +import { QueryProvider } from "@lib/query-client" +import { AutumnProvider } from "autumn-js/react" +import { Suspense } from "react" +import { Toaster } from "sonner" +import { MobilePanelProvider } from "@/lib/mobile-panel-context" +import { NuqsAdapter } from "nuqs/adapters/next/app" - -import { ViewModeProvider } from "@/lib/view-mode-context"; +import { ViewModeProvider } from "@/lib/view-mode-context" const sans = Inter({ subsets: ["latin"], variable: "--font-sans", -}); +}) const mono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-mono", -}); +}) const serif = Instrument_Serif({ subsets: ["latin"], variable: "--font-serif", weight: ["400"], -}); +}) export const metadata: Metadata = { metadataBase: new URL("https://app.supermemory.ai"), description: "Your memories, wherever you are", title: "supermemory app", -}; +} export default function RootLayout({ children, }: Readonly<{ - children: React.ReactNode; + children: React.ReactNode }>) { return ( @@ -61,10 +59,8 @@ export default function RootLayout({ - - {children} - - + {children} + @@ -75,5 +71,5 @@ export default function RootLayout({ - ); + ) } diff --git a/apps/web/app/onboarding/bio-form.tsx b/apps/web/app/onboarding/bio-form.tsx index 984309a9..d985a775 100644 --- a/apps/web/app/onboarding/bio-form.tsx +++ b/apps/web/app/onboarding/bio-form.tsx @@ -1,86 +1,97 @@ -"use client"; +"use client" -import { Textarea } from "@ui/components/textarea"; -import { useOnboarding } from "./onboarding-context"; -import { useState } from "react"; -import { Button } from "@ui/components/button"; -import { AnimatePresence, motion } from "motion/react"; -import { NavMenu } from "./nav-menu"; -import { $fetch } from "@lib/api"; +import { Textarea } from "@ui/components/textarea" +import { useOnboarding } from "./onboarding-context" +import { useState } from "react" +import { Button } from "@ui/components/button" +import { AnimatePresence, motion } from "motion/react" +import { NavMenu } from "./nav-menu" +import { $fetch } from "@lib/api" export function BioForm() { - const [bio, setBio] = useState(""); - const { totalSteps, nextStep, getStepNumberFor } = useOnboarding(); + const [bio, setBio] = useState("") + const { totalSteps, nextStep, getStepNumberFor } = useOnboarding() - function handleNext() { - const trimmed = bio.trim(); - if (!trimmed) { - nextStep(); - return; - } + function handleNext() { + const trimmed = bio.trim() + if (!trimmed) { + nextStep() + return + } - nextStep(); - void $fetch("@post/memories", { - body: { - content: trimmed, - containerTags: ["sm_project_default"], - metadata: { sm_source: "consumer" }, - }, - }).catch((error) => { - console.error("Failed to save onboarding bio memory:", error); - }); - } - return ( -
-
- -

- Step {getStepNumberFor("bio")} of {totalSteps} -

-
-

Tell us about yourself

-

- What should Supermemory know about you? -

-
-