Fix: Dashboard category popup issues(web-pro) & Profile Page Bugs - October Release

Taskfile.yml

@@ -35,6 +35,9 @@ tasks:
     cmds:
       - hasura seeds apply --project apps/hasura --admin-secret ${HASURA_GRAPHQL_ADMIN_SECRET}
 
+      # - hasura seeds apply --project apps/hasura --database-name masterbots --admin-secret ${HASURA_GRAPHQL_ADMIN_SECRET}
+      # use this for debugging seeds and run "task seed > seed.log 2>&1" instead of just "task seed" to capture logs
+
   # Turns on the hasura backend (docker desktop must be started first)
   up:
     cmds:

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

@@ -40,11 +40,9 @@ insert_permissions:
         - created_at
         - is_approved
         - is_blocked
-        - is_pro
         - is_public
         - model
         - parent_thread_id
-        - short_link
         - slug
         - thread_id
         - updated_at
@@ -60,11 +58,9 @@ insert_permissions:
         - created_at
         - is_approved
         - is_blocked
-        - is_pro
         - is_public
         - model
         - parent_thread_id
-        - short_link
         - slug
         - thread_id
         - updated_at
@@ -78,7 +74,6 @@ select_permissions:
         - created_at
         - is_approved
         - is_blocked
-        - is_pro
         - is_public
         - metadata
         - model
@@ -98,7 +93,6 @@ select_permissions:
         - created_at
         - is_approved
         - is_blocked
-        - is_pro
         - is_public
         - metadata
         - model
@@ -118,7 +112,6 @@ select_permissions:
         - created_at
         - is_approved
         - is_blocked
-        - is_pro
         - is_public
         - metadata
         - model

apps/pro-web/app/globals.css

@@ -861,6 +861,7 @@
 }
 
 .profile-hero-bg {
+	background-image: url("/hero-bg.jpg");
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;

apps/pro-web/components/layout/profile/hero.tsx

@@ -6,7 +6,7 @@ export function Hero({ user }: { user: User }) {
 	if (!user) return null
 	return (
 		<div className="profile-hero-bg" id="hero-section">
-			<div className="relative z-[2] md:px-0 px-5">
+			<div className="relative z-[2] md:px-0 px-5 py-5">
 				<UserCard user={user} loading={false} />
 			</div>
 		</div>

apps/pro-web/components/routes/chat/chat-layout-section.tsx

@@ -24,7 +24,7 @@ export function ChatLayoutSection({ children }: { children: React.ReactNode }) {
 	return (
 		<>
 			{isDashboardOpen && (
-				<div className="flex fixed inset-0 z-50 justify-center items-center backdrop-blur-sm bg-black/50">
+				<div className="flex fixed inset-0  z-[9999] justify-center items-center backdrop-blur-sm bg-black/50">
 					<CategoryDashboard
 						isOpen={isDashboardOpen}
 						onClose={() => setIsDashboardOpen(false)}

apps/pro-web/components/routes/thread/user-thread-panel.tsx

@@ -483,10 +483,7 @@ export default function UserThreadPanel({
 			>
 				{showChatbotDetails ? (
 					page === 'profile' ? (
-						<EmptyState
-							title="No Threads Available"
-							description={`There are no threads available for ${userProps?.username} yet.`}
-						/>
+						<EmptyState title="No public threads" description={''} />
 					) : (
 						isProRoute && <ChatChatbotDetails />
 					)

apps/pro-web/components/shared/category-dashboard.tsx

@@ -89,6 +89,11 @@ export function CategoryDashboard({
 		setLocalSelectedCategories([])
 	}
 
+	const handleSelectAll = () => {
+		const allCategoryIds = categories.map((category) => category.categoryId)
+		setLocalSelectedCategories(allCategoryIds)
+	}
+
 	if (!isOpen) return null
 
 	// Show loading state while category storage is loading
@@ -165,6 +170,13 @@ export function CategoryDashboard({
 								>
 									Clear All
 								</button>
+								<button
+									type="button"
+									onClick={handleSelectAll}
+									className="px-4 py-2 text-sm font-medium text-white bg-gray-700 rounded-lg shadow-sm transition-colors hover:bg-gray-600"
+								>
+									Select All
+								</button>
 								<button
 									type="button"
 									onClick={handleApplySelection}

apps/pro-web/components/shared/onboarding-section.tsx

@@ -54,6 +54,11 @@ export function OnboardingSection({ isOpen, onClose }: OnboardingSectionProps) {
 		setLocalSelectedCategories([])
 	}
 
+	const handleSelectAll = () => {
+		const allCategoryIds = allCategories.map((category) => category.categoryId)
+		setLocalSelectedCategories(allCategoryIds)
+	}
+
 	if (!isOpen) return null
 
 	return (
@@ -99,6 +104,13 @@ export function OnboardingSection({ isOpen, onClose }: OnboardingSectionProps) {
 								>
 									Clear All
 								</button>
+								<button
+									type="button"
+									onClick={handleSelectAll}
+									className="flex-1 px-3 py-2 text-sm font-medium text-white bg-gray-700 rounded-lg shadow-sm transition-colors sm:flex-none sm:px-4 hover:bg-gray-600"
+								>
+									Select All
+								</button>
 								<button
 									type="button"
 									onClick={handleApplySelection}

apps/web/app/globals.css

@@ -861,6 +861,7 @@
 }
 
 .profile-hero-bg {
+	background-image: url("/hero-bg.jpg");
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;

apps/web/auth.ts

@@ -68,10 +68,10 @@ export const authOptions: NextAuthOptions = {
 						credentials.password,
 						user[0].password,
 					)
-					// if (!isValid) {
-					// 	console.error('NextUser authentication failed: Invalid password')
-					// 	throw new Error('Invalid credentials')
-					// }
+					if (!isValid) {
+						console.error('NextUser authentication failed: Invalid password')
+						throw new Error('Invalid credentials')
+					}
 					console.log('NextUser authenticated successfully')
 					//* Return user details to be attached to the token
 					return {
@@ -98,7 +98,28 @@ export const authOptions: NextAuthOptions = {
 		strategy: 'jwt', //* NextAuth V > 4 needs to specify the session strategy
 	},
 	callbacks: {
-		async jwt({ token, user, account }) {
+		async jwt({ token, user, account, trigger, session }) {
+			console.log(
+				'JWT callback → trigger:',
+				trigger,
+				'session:',
+				session ? 'present' : 'none',
+				'user:',
+				user ? 'present' : 'none',
+			)
+
+			if (trigger === 'update' && session) {
+				console.log(
+					'JWT callback → handling update trigger, session payload:',
+					session,
+				)
+				token.name = session.name ?? token.name
+				token.slug = session.slug ?? token.slug
+				token.email = session.email ?? token.email
+				// If you want to refresh hasuraJwt on update, do it here (carefully, with try/catch).
+				return token
+			}
+
 			if (user) {
 				//* Add user role to the token when signing in with Google
 				if (account?.provider === 'google') {

apps/web/components/auth/user-login.tsx

@@ -4,6 +4,7 @@ import { UserMenu } from '@/components/layout/header/user-menu'
 import { ProfileSidebar } from '@/components/layout/sidebar/profile-sidebar'
 import { Button } from '@/components/ui/button'
 import { Skeleton } from '@/components/ui/skeleton'
+import { useProfile } from '@/lib/hooks/use-profile'
 import { isTokenExpired } from 'mb-lib'
 import { useSession } from 'next-auth/react'
 import Link from 'next/link'
@@ -12,8 +13,9 @@ import { ProfileSidebarSkeleton } from '../shared/skeletons/profile-sidebar-skel
 
 export function UserLogin() {
 	const { data: session, status } = useSession()
+	const { sessionUser } = useProfile()
 
-	if (status === 'loading') {
+	if (status === 'loading' && sessionUser === null) {
 		return <Skeleton className="h-6 w-24" />
 	}
 
@@ -32,9 +34,9 @@ export function UserLogin() {
 		return (
 			<>
 				<Suspense fallback={<ProfileSidebarSkeleton />}>
-					<ProfileSidebar user={session.user} />
+					{sessionUser && <ProfileSidebar user={sessionUser} />}
 				</Suspense>
-				<UserMenu user={session.user} />
+				{sessionUser && <UserMenu user={sessionUser} />}
 			</>
 		)
 	}

apps/web/components/layout/header/user-menu.tsx

@@ -125,7 +125,7 @@ export function UserMenu({ user }: UserMenuProps) {
 					<DropdownMenuSeparator />
 					<DropdownMenuGroup>
 						<DropdownMenuItem className="flex items-center justify-between w-full py-0 px-0">
-							<ThemeToggle className="py-3 px-2" />
+							<ThemeToggle className="px-2 text-sm py-3 h-11" />
 						</DropdownMenuItem>
 						<DropdownMenuItem className="flex items-center justify-between w-full py-0 px-0">
 							<Link

apps/web/components/layout/profile/hero.tsx

@@ -6,7 +6,7 @@ export function Hero({ user }: { user: User }) {
 	if (!user) return null
 	return (
 		<div className="profile-hero-bg" id="hero-section">
-			<div className="relative z-[2] md:px-0 px-5">
+			<div className="relative z-[2] md:px-0 px-5 py-5">
 				<UserCard user={user} loading={false} />
 			</div>
 		</div>

apps/web/components/routes/browse/browse-chatbot-desktop-details.tsx

@@ -31,7 +31,7 @@ export function BrowseChatbotDesktopDetails({
 
 	return (
 		<div className="profile-hero-bg" id="hero-section">
-			<div className="relative z-10 max-w-screen-lg mx-auto px-4">
+			<div className="relative z-10 max-w-screen-lg mx-auto px-4 py-5">
 				<Link
 					href="/"
 					className="w-max mr-auto my-2 flex items-center leading-none gap-2 text-[#09090Baf] hover:text-[#09090B]"

apps/web/components/routes/preferences/preference-section.tsx

@@ -43,6 +43,7 @@ import type { PreferenceSetInput } from 'mb-genql'
 import { toSlug } from 'mb-lib'
 import { signOut, useSession } from 'next-auth/react'
 import { useTheme } from 'next-themes'
+import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { useAsyncFn } from 'react-use'
 import GoogleTranslate from './google-translation'
@@ -54,13 +55,15 @@ export function PreferenceSection({ title, items }: PreferenceSectionProps) {
 	const [buttonType, setButtonType] = useState('')
 	const { data: session, update } = useSession()
 	const { customSonner } = useSonner()
-	const { currentUser, getUserInfo, updateUserDetails } = useProfile()
+	const { currentUser, getUserInfo, updateUserDetails, updateSessionUser } =
+		useProfile()
 	const [errorMessage, setErrorMessage] = useState('')
 	const [isLoading, setIsLoading] = useState(false)
 	const [sendindVEmail, setSendingVEmail] = useState(false)
 	const [inputValue, setInputValue] = useState({ username: '', email: '' })
 	const { setTheme, theme } = useTheme()
 	const { fontSize, setFontSize } = useAccessibility()
+	const router = useRouter()
 
 	useEffect(() => {
 		if (currentUser) {
@@ -270,21 +273,18 @@ export function PreferenceSection({ title, items }: PreferenceSectionProps) {
 
 		try {
 			const { username } = inputValue
-			const slug = currentUser?.slug || session.user?.slug
+			const slug = toSlug(username)
 			const email = currentUser?.email
 
 			await updateUserDetails(email ?? null, username ?? null, slug ?? null)
 
-			await update({
-				...session,
-				user: {
-					...session.user,
-					email: email || session.user.email,
-					name: username || session.user.name,
-					slug: slug || session.user.slug,
-				},
+			await updateSessionUser({
+				...session.user,
+				slug,
+				name: username,
 			})
 
+			router.push(`/u/${slug}/s/pref`)
 			customSonner({
 				type: 'success',
 				text: 'Profile updated successfully.',

apps/web/components/routes/thread/user-thread-panel.tsx

@@ -484,10 +484,7 @@ export default function UserThreadPanel({
 			>
 				{showChatbotDetails ? (
 					page === 'profile' ? (
-						<EmptyState
-							title="No Threads Available"
-							description={`There are no threads available for ${userProps?.username} yet.`}
-						/>
+						<EmptyState title="No public threads" description={''} />
 					) : (
 						isChatRoute && <ChatChatbotDetails />
 					)

apps/web/components/shared/category-dashboard.tsx

@@ -89,6 +89,11 @@ export function CategoryDashboard({
 		setLocalSelectedCategories([])
 	}
 
+	const handleSelectAll = () => {
+		const allCategoryIds = categories.map((category) => category.categoryId)
+		setLocalSelectedCategories(allCategoryIds)
+	}
+
 	if (!isOpen) return null
 
 	// Show loading state while category storage is loading
@@ -165,6 +170,13 @@ export function CategoryDashboard({
 								>
 									Clear All
 								</button>
+								<button
+									type="button"
+									onClick={handleSelectAll}
+									className="px-4 py-2 text-sm font-medium text-white bg-gray-700 rounded-lg shadow-sm transition-colors hover:bg-gray-600"
+								>
+									Select All
+								</button>
 								<button
 									type="button"
 									onClick={handleApplySelection}