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

Author: derianrddev

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

@@ -68,7 +68,10 @@ export async function PATCH(
 		}
 
 		// Validate brandKit if provided
-		if (body.brandKit !== undefined && typeof body.brandKit !== 'object') {
+		if (
+			body.brandKit !== undefined &&
+			(typeof body.brandKit !== 'object' || body.brandKit === null)
+		) {
 			return NextResponse.json(
 				{ error: 'Brand Kit must be an object' },
 				{ status: 422 },

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

@@ -19,9 +19,9 @@ export function BrandKitDialog({ open, onOpenChange }: BrandKitDialogProps) {
 
 	const subtitle = useMemo(() => {
 		if (currentView === 'wizard') {
-			return activeOrganization
-				? `${activeOrganization}' Logo & Style`
-				: 'Logo & Style'
+			if (!activeOrganization) return 'Logo & Style'
+			const endsWithS = activeOrganization.endsWith('s')
+			return `${activeOrganization}${endsWithS ? "'" : "'s"} Logo & Style`
 		}
 		return 'Brand Kit'
 	}, [currentView, activeOrganization])

apps/pro-web/components/routes/workspace/media-tab/ui/brand-kit/wizard/steps/checkpoint-step.tsx

@@ -35,6 +35,10 @@ export function CheckpointStep({ next, close }: WizardStepProps) {
 			throw new Error('Palette is required')
 		}
 
+		if (!selectedFonts || selectedFonts.length === 0) {
+			throw new Error('At least one font must be selected')
+		}
+
 		return {
 			vibes: selectedVibes,
 			fonts: {
@@ -153,7 +157,8 @@ export function CheckpointStep({ next, close }: WizardStepProps) {
 								className="bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground hover:opacity-90 px-3 py-1 text-xs font-normal whitespace-nowrap"
 							>
 								<span className="font-bold">
-									{activeOrganization || 'Organization'}'s Vibe:
+									{activeOrganization || 'Organization'}
+									{activeOrganization?.endsWith('s') ? "'" : "'s"} Vibe:
 								</span>
 								<span className="ml-1">{vibeLabel}</span>
 							</Badge>

apps/pro-web/components/routes/workspace/media-tab/ui/brand-kit/wizard/steps/fonts-step.tsx

@@ -284,7 +284,7 @@ export function FontsStep({ next, prev }: WizardStepProps) {
 					{/* Header */}
 					<div className="space-y-2 mb-6">
 						<h2 className="text-lg sm:text-xl font-semibold leading-snug">
-							Which font family you look for?
+							Which font family are you looking for?
 						</h2>
 						<p className="text-sm text-muted-foreground max-w-2xl leading-snug">
 							Headlines show personality; body text should be effortless to

apps/pro-web/components/routes/workspace/media-tab/ui/brand-kit/wizard/steps/vibe-step.tsx

@@ -35,7 +35,7 @@ const vibes: Vibe[] = [
 	},
 	{
 		name: 'Bold',
-		description: 'Loud & campaing-ready',
+		description: 'Loud & campaign-ready',
 		colors: ['#E32A27', '#020202', '#FEFEFE', '#1845F5'],
 	},
 	{

apps/pro-web/lib/hooks/use-workspace-media.tsx

@@ -381,7 +381,7 @@ export function WorkspaceMediaProvider({ children }: { children: ReactNode }) {
 			// Invalidate and refetch - merge will prioritize IDB data (most recent updatedAt)
 			const userId = session?.user?.id || 'anonymous'
 			queryClient.invalidateQueries({
-				queryKey: ['workspace', userId, 'structure'],
+				queryKey: workspaceKeys.structure(userId),
 			})
 		},
 		onError: (error) => {

apps/pro-web/lib/queries/use-workspace-structure.ts

@@ -239,17 +239,19 @@ export function useWorkspaceStructure(
 
 				// Merge organizations and their data (IDB/Cache might be ahead of server)
 				if (sourceToMerge.organizationList && sourceToMerge.organizationData) {
-					const existingOrgNames = new Set(finalStructure.organizationList)
+					const existingOrgIds = new Set(
+						finalStructure.organizationData.map((org) => org.id),
+					)
 					const orgDataMap = new Map(
 						finalStructure.organizationData.map((org) => [org.id, org]),
 					)
 
 					for (const orgData of sourceToMerge.organizationData) {
-						if (!existingOrgNames.has(orgData.name)) {
+						if (!existingOrgIds.has(orgData.id)) {
 							// New organization - add it
 							finalStructure.organizationList.push(orgData.name)
 							finalStructure.organizationData.push(orgData)
-							existingOrgNames.add(orgData.name)
+							existingOrgIds.add(orgData.id)
 						} else {
 							// Existing organization - update its data (especially brandKit)
 							const existingOrg = orgDataMap.get(orgData.id)