[pro-web] feat: implement brand kit wizard with multi-step creation flow (#597)

* refactor(media-tab): extract WorkspaceDialog reusable component

- Create WorkspaceDialog component for standardized dialog structure
- Refactor version-history-dialog to use new component
- Improve code reusability across media tab wizards

* feat(media-tab): add BrandKitEntry component for brand creation and import

* feat(media-tab): implement BrandKitWizard with steps for brand creation

* feat(media-tab): add BrandKitDialog and integrate with MediaWizards and MediaSidebar

* feat(media-tab): implement brand kit wizard with vibe selection step

- Add dynamic subtitle showing org name + "Logo & Style" in wizard mode
- Implement sticky wizard stepper and navigation buttons layout
- Create VibeStep with 12 brand vibes, 2-selection limit, and color preview
- Add proper scroll container for wizard content with fixed header/footer
- Style BadgeCheck icon and color dots with proper borders for dark mode
- Update wizard container to use viewport-based height for proper layout

* feat(media-tab): implement fonts step with vibe-based recommendations

- Add FontsStep with primary/secondary font selection
- Create Google Fonts integration with 70+ font families
- Implement vibe-based font recommendations system
- Add role badges (primary/secondary) for selected fonts
- Include font preview with multiple samples
- Update Brand Kit state management in useWorkspaceMedia hook
- Adjust wizard and dialog padding for better spacing
- Fix VibeStep to use shared state from context

* refactor(media-tab): improve fonts step with sticky selection bar and scroll optimization

- Add sticky bar showing selected fonts with removal capability
- Implement vertical scroll snap carousel for font grid
- Update font state management with role-based structure
- Optimize scroll behavior in VibeStep and wizard stepper
- Remove border from stepper for cleaner visual separation

* feat(media-tab): implement colors step with palette selection and live preview

- Add ColorsStep with 8 curated color palettes across multiple categories
- Implement live preview card with selected fonts and organization name
- Add AA contrast ratio validation with gentle auto-adjustment
- Create shuffle functionality for random palette selection
- Build carousel navigation for palette browsing
- Display color strips with primary, accent, bg, and text tokens
- Add palette state management to useWorkspaceMedia hook
- Integrate selected fonts from previous step into color preview

* feat(media-tab): enhance ColorsStep layout with improved scrolling and responsive design

* feat(media-tab): refactor ColorsStep for theme-based color adjustments and improve contrast handling

* feat(media-tab): add checkpoint step to brand kit wizard

- Create CheckpointStep component to review selected brand elements
- Display color scheme with palette circles and category information
- Show font family preview with primary and secondary fonts
- Add font switching functionality between primary and secondary roles
- Integrate organization name and vibe label in checkpoint UI
- Replace placeholder LogoStep with functional CheckpointStep
- Add flag icon to final step in wizard stepper for visual clarity

* fix(media-tab): adapt checkpoint step for single source and validate sources by vibes

* feat(media-tab): add persistence with IDB sync and checkpoint handlers

* fix(media-tab): restore wizard step when changing organizations

* feat(hasura): add brand_kit jsonb column to organization

* fix(media-tab): improve validation and error handling for brand kit flow

Author: derianrddev

apps/hasura/metadata/databases/masterbots/tables/public_organization.yaml

@@ -27,6 +27,7 @@ insert_permissions:
     permission:
       check: {}
       columns:
+        - brand_kit
         - name
         - user_id
     comment: ""
@@ -36,23 +37,26 @@ insert_permissions:
         user_id:
           _eq: X-Hasura-User-Id
       columns:
+        - brand_kit
         - name
         - user_id
     comment: ""
 select_permissions:
   - role: moderator
     permission:
       columns:
-        - organization_id
+        - brand_kit
         - name
+        - organization_id
         - user_id
       filter: {}
     comment: ""
   - role: user
     permission:
       columns:
-        - organization_id
+        - brand_kit
         - name
+        - organization_id
         - user_id
       filter:
         user_id:
@@ -62,13 +66,15 @@ update_permissions:
   - role: moderator
     permission:
       columns:
+        - brand_kit
         - name
       filter: {}
       check: null
     comment: ""
   - role: user
     permission:
       columns:
+        - brand_kit
         - name
       filter:
         user_id:

apps/hasura/migrations/masterbots/1766505347896_alter_table_public_organization_add_column_brand_kit/down.sql

@@ -0,0 +1,2 @@
+alter table "public"."organization"
+  drop column "brand_kit";

apps/hasura/migrations/masterbots/1766505347896_alter_table_public_organization_add_column_brand_kit/up.sql

@@ -0,0 +1,2 @@
+alter table "public"."organization" add column "brand_kit" jsonb
+ not null default '{}'::jsonb;

apps/pro-web/app/actions/thread.actions.ts

@@ -554,6 +554,7 @@ export async function getUserOrganizations(
 				organizationId: true,
 				name: true,
 				userId: true,
+				brandKit: true,
 				organization_chatbots: {
 					chatbotId: true,
 					isActive: true,
@@ -575,6 +576,7 @@ export async function getUserOrganizations(
 				(org): OrganizationData => ({
 					id: org.organizationId?.toString() || '',
 					name: org.name || '',
+					brandKit: org.brandKit || null,
 					chatbots: org.organization_chatbots?.map((oc) => ({
 						chatbotId: oc.chatbotId || 0,
 						isActive: oc.isActive || false,

apps/pro-web/app/api/organizations/[id]/route.ts

@@ -1,5 +1,6 @@
 import { auth } from '@/auth'
 import { logErrorToSentry } from '@/lib/sentry'
+import type { BrandKitData } from '@/types/media.types'
 import type { OrganizationChatbot } from '@/types/thread.types'
 import { getHasuraClient } from 'mb-lib'
 import type { NextRequest } from 'next/server'
@@ -8,6 +9,7 @@ import { NextResponse } from 'next/server'
 interface UpdateOrganizationBody {
 	name?: string
 	chatbots?: OrganizationChatbot[]
+	brandKit?: BrandKitData
 }
 
 /**
@@ -65,6 +67,17 @@ export async function PATCH(
 			)
 		}
 
+		// Validate brandKit if provided
+		if (
+			body.brandKit !== undefined &&
+			(typeof body.brandKit !== 'object' || body.brandKit === null)
+		) {
+			return NextResponse.json(
+				{ error: 'Brand Kit must be an object' },
+				{ status: 422 },
+			)
+		}
+
 		// Initialize Hasura client
 		const client = getHasuraClient()
 
@@ -163,6 +176,20 @@ export async function PATCH(
 			}
 		}
 
+		// Update brandKit if provided
+		if (body.brandKit !== undefined) {
+			await client.mutation({
+				updateOrganizationByPk: {
+					__args: {
+						pkColumns: { organizationId: id },
+						_set: { brandKit: body.brandKit },
+					},
+					organizationId: true,
+					brandKit: true,
+				},
+			})
+		}
+
 		// Fetch and return the updated organization
 		const { organizationByPk } = await client.query({
 			organizationByPk: {
@@ -172,6 +199,7 @@ export async function PATCH(
 				organizationId: true,
 				name: true,
 				userId: true,
+				brandKit: true,
 				organization_chatbots: {
 					chatbotId: true,
 					isActive: true,
@@ -188,6 +216,7 @@ export async function PATCH(
 			id: organizationByPk?.organizationId,
 			name: organizationByPk?.name,
 			userId: organizationByPk?.userId,
+			brandKit: organizationByPk?.brandKit,
 			chatbots: organizationByPk?.organization_chatbots?.map((oc) => ({
 				chatbotId: oc.chatbotId,
 				isActive: oc.isActive,

apps/pro-web/app/api/organizations/route.ts

@@ -40,6 +40,7 @@ export async function GET() {
 				organizationId: true,
 				name: true,
 				userId: true,
+				brandKit: true,
 				organization_chatbots: {
 					chatbotId: true,
 					isActive: true,
@@ -59,6 +60,7 @@ export async function GET() {
 			id: org.organizationId,
 			name: org.name,
 			userId: org.userId,
+			brandKit: org.brandKit,
 			chatbots: org.organization_chatbots?.map((oc) => ({
 				chatbotId: oc.chatbotId,
 				isActive: oc.isActive,

apps/pro-web/components/routes/workspace/media-tab/ui/brand-kit/brand-kit-dialog.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { WorkspaceDialog } from '@/components/ui/workspace-dialog'
+import { useWorkspace } from '@/lib/hooks/use-workspace'
+import { useMemo, useState } from 'react'
+import { BrandKitEntry } from './brand-kit-entry'
+import { BrandKitWizard } from './wizard/brand-kit-wizard'
+
+interface BrandKitDialogProps {
+	open: boolean
+	onOpenChange: (open: boolean) => void
+}
+
+type BrandKitView = 'entry' | 'wizard' | 'summary'
+
+export function BrandKitDialog({ open, onOpenChange }: BrandKitDialogProps) {
+	const [currentView, setCurrentView] = useState<BrandKitView>('entry')
+	const { activeOrganization } = useWorkspace()
+
+	const subtitle = useMemo(() => {
+		if (currentView === 'wizard') {
+			if (!activeOrganization) return 'Logo & Style'
+			const endsWithS = activeOrganization.endsWith('s')
+			return `${activeOrganization}${endsWithS ? "'" : "'s"} Logo & Style`
+		}
+		return 'Brand Kit'
+	}, [currentView, activeOrganization])
+
+	const handleNewBrand = () => {
+		setCurrentView('wizard')
+	}
+
+	const handleImportBrand = () => {
+		// TODO: Open brand import flow
+		// This could trigger a file picker or navigate to import wizard
+		console.log('Importing brand...')
+	}
+
+	const handleWizardFinish = () => {
+		// TODO: Navigate to summary view
+		console.log('Wizard finished, navigating to summary...')
+		setCurrentView('summary')
+	}
+
+	const handleWizardCancel = () => {
+		setCurrentView('entry')
+	}
+
+	return (
+		<WorkspaceDialog
+			open={open}
+			onOpenChange={onOpenChange}
+			title="Media Mode"
+			subtitle={subtitle}
+		>
+			{currentView === 'entry' && (
+				<BrandKitEntry
+					onNewBrand={handleNewBrand}
+					onImportBrand={handleImportBrand}
+				/>
+			)}
+
+			{currentView === 'wizard' && (
+				<BrandKitWizard
+					onFinish={handleWizardFinish}
+					onCancel={handleWizardCancel}
+				/>
+			)}
+
+			{/* TODO: Add summary view */}
+			{/* {currentView === 'summary' && <BrandKitSummary ... />} */}
+		</WorkspaceDialog>
+	)
+}

apps/pro-web/components/routes/workspace/media-tab/ui/brand-kit/brand-kit-entry.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { ImageDown, ImagePlus } from 'lucide-react'
+
+interface BrandKitEntryProps {
+	onNewBrand: () => void
+	onImportBrand: () => void
+}
+
+export function BrandKitEntry({
+	onNewBrand,
+	onImportBrand,
+}: BrandKitEntryProps) {
+	return (
+		<div className="flex items-center justify-center min-h-[380px] py-10">
+			<div className="w-full max-w-xs sm:max-w-sm rounded-3xl border border-border/60 bg-zinc-100/50 dark:bg-zinc-900/50 px-8 py-7 sm:px-10 sm:py-8 shadow-sm">
+				<p className="text-center text-sm text-black dark:text-white mb-3">
+					Start from scratch and create
+				</p>
+
+				{/* New Brand Button */}
+				<Button
+					onClick={onNewBrand}
+					className="w-full h-16 sm:h-20 rounded-2xl px-6 text-lg font-normal flex items-center justify-center gap-3"
+				>
+					<ImagePlus className="w-5 h-5" />
+					<span>New Brand</span>
+				</Button>
+
+				{/* Separator with "or" */}
+				<div className="flex items-center my-6 text-xs text-black dark:text-white">
+					<div className="flex-1 h-px bg-zinc-200 dark:bg-zinc-700" />
+					<span className="text-xs sm:text-sm px-3">or</span>
+					<div className="flex-1 h-px bg-zinc-200 dark:bg-zinc-700" />
+				</div>
+
+				{/* Import Brand Button */}
+				<Button
+					onClick={onImportBrand}
+					className="w-full h-16 sm:h-20 rounded-2xl bg-accent text-accent-foreground hover:bg-accent/90 px-6 text-lg font-normal flex items-center justify-center gap-3"
+				>
+					<ImageDown className="w-5 h-5" />
+					<span>Import Brand</span>
+				</Button>
+
+				<p className="text-center text-xs sm:text-sm text-black dark:text-white mt-3">
+					from your existing brand assets
+				</p>
+			</div>
+		</div>
+	)
+}