+
-
);
}
@@ -94,6 +98,8 @@ export function NavBar() {
+
+
@@ -116,7 +122,6 @@ export function NavBar() {
-
);
}
diff --git a/apps/web/src/components/onboarding-modal.tsx b/apps/web/src/components/onboarding-modal.tsx
index 284f24eb..9b74aacc 100644
--- a/apps/web/src/components/onboarding-modal.tsx
+++ b/apps/web/src/components/onboarding-modal.tsx
@@ -5,9 +5,16 @@ import { motion, AnimatePresence } from "framer-motion"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
-import { completeOnboarding } from "@/lib/onboarding-api"
+import { completeOnboarding, savePersona } from "@/lib/onboarding-api"
import { useToolVisibilityStore } from "@/store/tool-visibility-store"
+import { usePinnedToolsStore } from "@/store/pinned-tools-store"
+import { useWorkspaceStore } from "@/store/workspace-store"
import { patchUserPreferences } from "@/lib/user-preferences-api"
+import { ONBOARDING_ROLES, type OnboardingRole } from "@/lib/onboarding-roles"
+import { Input } from "@/components/ui/input"
+import useAuth from "@/utils/useAuth"
+import { updateProfile } from "firebase/auth"
+import { auth } from "@/database/firebase"
import {
IconRocket,
IconShield,
@@ -172,7 +179,105 @@ function WelcomeStep() {
)
}
-// ── Step 1: Tool selection ────────────────────────────────────────────────────
+// ── Step 1: About you (name + role) ───────────────────────────────────────────
+
+function AboutYouStep({
+ name,
+ onNameChange,
+ roleId,
+ onRoleChange,
+}: {
+ name: string
+ onNameChange: (v: string) => void
+ roleId: string | null
+ onRoleChange: (role: OnboardingRole) => void
+}) {
+ return (
+
+
+
+
+
+
+
+ Your name
+
+
+
+
+
+ What describes you best?
+
+
+ {ONBOARDING_ROLES.map((role) => {
+ const selected = roleId === role.id
+ const RoleIcon = role.Icon
+ return (
+ onRoleChange(role)}
+ whileTap={{ scale: 0.98 }}
+ className={cn(
+ "group flex items-center gap-3 rounded-xl border p-3.5 text-left transition-all duration-150",
+ selected
+ ? "border-primary/50 bg-gradient-to-r from-primary/[0.14] to-violet-500/[0.06] ring-1 ring-inset ring-primary/25"
+ : "border-white/10 bg-white/[0.03] hover:border-primary/30 hover:bg-white/[0.06]"
+ )}
+ >
+
+
+
+
+ {role.label}
+
+ {role.description}
+
+
+ {selected &&
+
+ )
+ })}
+
+
+ This pre-selects a toolkit for you — you can fine-tune it on the next step.
+
+
+
+
+ )
+}
+
+// ── Step 2: Tool selection ────────────────────────────────────────────────────
/** Flip this to switch between selection UIs without touching anything else. */
const TOOL_SELECTION_MODE: "tags" | "checkboxes" = "tags"
@@ -544,7 +649,9 @@ function TourStep({ slideIndex, onSlide }: { slideIndex: number; onSlide: (i: nu
// ── Root modal ────────────────────────────────────────────────────────────────
-const STEPS = ["Welcome", "Choose tools", "Tour"]
+const STEPS = ["Welcome", "About you", "Choose tools", "Tour"]
+const TOOLS_STEP = 2
+const TOUR_STEP = 3
interface OnboardingModalProps {
onComplete: () => void
@@ -557,12 +664,29 @@ export function OnboardingModal({ onComplete }: OnboardingModalProps) {
const [celebrating, setCelebrating] = useState(false)
const setEnabledTools = useToolVisibilityStore((s) => s.setEnabledTools)
+ const setPinnedTools = usePinnedToolsStore((s) => s.setPinnedTools)
+ const activeWorkspaceId = useWorkspaceStore((s) => s.activeWorkspaceId)
+
+ const { user } = useAuth(false)
+ const [name, setName] = useState("")
+ const [role, setRole] = useState
(null)
+
+ // Pre-fill the name from the auth profile (don't ask what we already know).
+ React.useEffect(() => {
+ if (user?.displayName) setName((prev) => prev || user.displayName!)
+ }, [user?.displayName])
const [selectedUrls, setSelectedUrls] = useState>(() => {
const productivity = buildCategories().find((c) => c.title === "Productivity")
return new Set(productivity?.tools.map((t) => t.url) ?? [])
})
+ const handleRoleChange = useCallback((next: OnboardingRole) => {
+ setRole(next)
+ // Role picks a curated starting toolkit; the next step lets them fine-tune.
+ setSelectedUrls(new Set(next.tools))
+ }, [])
+
const handleToggleTool = useCallback((url: string) => {
setSelectedUrls((prev) => {
const next = new Set(prev)
@@ -590,7 +714,7 @@ export function OnboardingModal({ onComplete }: OnboardingModalProps) {
const handleNext = async () => {
// Advance tour slides before completing
- if (step === 2 && tourSlide < TOUR_SLIDES.length - 1) {
+ if (step === TOUR_STEP && tourSlide < TOUR_SLIDES.length - 1) {
setTourSlide((s) => s + 1)
return
}
@@ -606,9 +730,22 @@ export function OnboardingModal({ onComplete }: OnboardingModalProps) {
try {
const tools = Array.from(selectedUrls)
setEnabledTools(tools)
+ // Role's core tools become the pinned set for the active workspace —
+ // this is what makes the first dashboard feel personally curated.
+ const pins = (role?.pins ?? []).filter((p) => selectedUrls.has(p))
+ const prefsPatch: Parameters[0] = { enabledTools: tools }
+ if (activeWorkspaceId && pins.length) {
+ setPinnedTools(activeWorkspaceId, pins)
+ prefsPatch.pinnedToolsByWorkspace = { [activeWorkspaceId]: pins }
+ }
+ const trimmedName = name.trim()
await Promise.all([
completeOnboarding(),
- patchUserPreferences({ enabledTools: tools }),
+ patchUserPreferences(prefsPatch),
+ role ? savePersona(role.id).catch(() => {}) : Promise.resolve(),
+ trimmedName && auth.currentUser && trimmedName !== auth.currentUser.displayName
+ ? updateProfile(auth.currentUser, { displayName: trimmedName }).catch(() => {})
+ : Promise.resolve(),
])
} catch {
// non-blocking — user can still proceed
@@ -621,23 +758,26 @@ export function OnboardingModal({ onComplete }: OnboardingModalProps) {
}
const handleBack = () => {
- if (step === 2 && tourSlide > 0) {
+ if (step === TOUR_STEP && tourSlide > 0) {
setTourSlide((s) => s - 1)
return
}
if (step > 0) setStep((s) => s - 1)
}
- const progress = ((step + (step === 2 ? tourSlide / TOUR_SLIDES.length : 0)) / (STEPS.length - 1)) * 100
+ const progress = ((step + (step === TOUR_STEP ? tourSlide / TOUR_SLIDES.length : 0)) / (STEPS.length - 1)) * 100
const isLastAction =
step === STEPS.length - 1 && tourSlide === TOUR_SLIDES.length - 1
+ // Role selection is the one thing we need before curating (step 1).
+ const nextDisabled = completing || (step === 1 && !role)
+
const nextLabel = isLastAction
? completing
? "Saving…"
: "Get started"
- : step === 2
+ : step === TOUR_STEP
? "Next tip"
: "Continue"
@@ -711,6 +851,23 @@ export function OnboardingModal({ onComplete }: OnboardingModalProps) {
)}
{step === 1 && (
+
+
+ )}
+ {step === TOOLS_STEP && (
{activeOrg.name}
diff --git a/apps/web/src/components/sidebar/app-sidebar.tsx b/apps/web/src/components/sidebar/app-sidebar.tsx
index 87f75274..89e16d3c 100644
--- a/apps/web/src/components/sidebar/app-sidebar.tsx
+++ b/apps/web/src/components/sidebar/app-sidebar.tsx
@@ -15,7 +15,6 @@ import {
import { NavGroup } from './nav-group'
import { NavUser } from './nav-user'
import { FeedbackDialog } from '@/components/feedback-dialog'
-import { OrgSwitcherDropdown } from '@/components/org-switcher-dropdown'
import { Logo } from '../logo'
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar'
import { LayoutDashboard } from 'lucide-react'
@@ -144,9 +143,6 @@ export function AppSidebar({ ...props }: React.ComponentProps) {
Developer's Toolkit