Fix: Sep/22nd Release Merge Regressions and Issues #571
Conversation
…to fix-new-popup-issues
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Reviewer's guide (collapsed on small PRs)Reviewer's GuideThis PR addresses regressions from the Sep/22nd release by standardizing the empty thread state messaging, enhancing the profile hero styling with padding and a background image, and cleaning up URL builder code formatting. File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
WalkthroughAdds a hero background image in both web apps, increases vertical padding in several Hero-related components, replaces a profile EmptyState with the static title "No public threads", removes Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/app/globals.css (1)
863-868: Asset exists; add WebP fallback and optimize image
apps/web/public/hero-bg.jpgis present.- Generate a
hero-bg.webpvariant with CSS fallback for modern browsers.- Compress/resize the image for optimal web delivery.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
apps/pro-web/app/globals.css(1 hunks)apps/pro-web/components/layout/profile/hero.tsx(1 hunks)apps/pro-web/components/routes/thread/user-thread-panel.tsx(1 hunks)apps/web/app/globals.css(1 hunks)apps/web/components/layout/profile/hero.tsx(1 hunks)apps/web/components/routes/thread/user-thread-panel.tsx(1 hunks)apps/web/lib/url.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Use meaningful variable names; prefix booleans with is/has/does/should
Use interface for objects/classes; type for unions/tuples/aliases; enum for fixed sets; const for literals
Avoid any; prefer specific types
Leverage type inference where clear; annotate function params and return types
Prefer type assertions with 'as' over angle-bracket syntax
Use type guards to narrow types in conditionals
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Use modern JavaScript features with TypeScript across the codebase
Use meaningful names; prefix booleans with is/has/does/should (e.g., isDisabled)
Receive an object and return an object (RORO) for functions interfacing with external services
Type definitions: use interface for objects/classes; type for unions/tuples/aliases; const for literals; enum for fixed sets
Avoid any; prefer specific types
Leverage type inference; omit explicit annotations when obvious
Add explicit type annotations for function parameters and return values
Prefer type assertions with as over angle-bracket syntax
Use type guards to narrow types within conditionals
Favor composition over inheritance in code structure
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Prefer RORO (Receive an object, return an object) for function signatures, especially for external service interactions
Use interface for object shapes/classes; type for unions/tuples/aliases; const for literals; enum for fixed enumerations
Avoid using any; prefer precise types
Leverage type inference when clear; omit redundant annotations
Explicitly annotate function parameters and return types
Prefer type assertions with as over angle-bracket syntax
Use type guards to narrow types safely
Use meaningful variable names; prefix booleans with is/has/does/should
Favor composition over inheritance
Use lowercase dash-separated names for files and folders; use extensions like .config.ts, .test.ts, .context.tsx, .typ...
Files:
apps/web/lib/url.tsapps/web/components/layout/profile/hero.tsxapps/pro-web/components/layout/profile/hero.tsxapps/web/components/routes/thread/user-thread-panel.tsxapps/pro-web/components/routes/thread/user-thread-panel.tsx
apps/{web,pro-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/{web,pro-web}/**/*.{ts,tsx}: Use lowercase kebab-case for directories and filenames (components can omit extension)
Verify DOM operations and consider timing (RAF/delays) when manipulating the DOM in React
Use Tailwind CSS utility classes for styling React components
apps/{web,pro-web}/**/*.{ts,tsx}: Use TypeScript to define React props types (interfaces for props)
Use custom hooks (useMBChat, useThread, useSidebar, useModel) for domain-specific state and keep providers focused and composed hierarchically
Separate presentation from business logic and compose small components
Use hasura.service.ts for all GraphQL operations from UI layers
apps/{web,pro-web}/**/*.{ts,tsx}: Prefer Server Components; use the use client directive only when client-side features are required
Implement Nested Layouts using the App Router
Use Streaming and Suspense in Next.js 14/15 where appropriate
Follow Next.js file conventions as per documentation
Use IndexedDB for local caching to enable immediate UI updates
Files:
apps/web/lib/url.tsapps/web/components/layout/profile/hero.tsxapps/pro-web/components/layout/profile/hero.tsxapps/web/components/routes/thread/user-thread-panel.tsxapps/pro-web/components/routes/thread/user-thread-panel.tsx
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
**/*: Use lowercase with dash-separated directory and file names; use specific extensions: .config.ts, .test.ts, .context.tsx, .type.ts, .hook.ts; components may omit extension
Use Bun for package management and scripts instead of npm/yarn
Use Biome for formatting and linting via bun format-and-lint:fix; avoid Prettier/ESLint configs
Files:
apps/web/lib/url.tsapps/web/components/layout/profile/hero.tsxapps/pro-web/components/layout/profile/hero.tsxapps/web/components/routes/thread/user-thread-panel.tsxapps/pro-web/app/globals.cssapps/web/app/globals.cssapps/pro-web/components/routes/thread/user-thread-panel.tsx
apps/{web,pro-web}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/{web,pro-web}/**/*.tsx: Declare React components with the function keyword
Name React components using PascalCase
Order component files: imports → constants → component → styled components → types/interfaces
Use functional components and hooks; type props with a TypeScript interface
Use regular function references (not inline arrows) for React event handlers to avoid extra re-renders
apps/{web,pro-web}/**/*.tsx: Use regular function references for event handlers instead of inline arrow functions in JSX
Declare React components with the function keyword (function ComponentName() {})
Use PascalCase for React component names
Order React component files: imports, constants, component, styled components, types/interfaces
Style components with Tailwind CSS utility classes
Files:
apps/web/components/layout/profile/hero.tsxapps/pro-web/components/layout/profile/hero.tsxapps/web/components/routes/thread/user-thread-panel.tsxapps/pro-web/components/routes/thread/user-thread-panel.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Avoid inline arrow functions in JSX props; use stable function references for event handlers
Declare React components with the function keyword (functional components)
Use PascalCase for React component names
Use functional components and hooks instead of class components
Type component props with TypeScript interfaces
Files:
apps/web/components/layout/profile/hero.tsxapps/pro-web/components/layout/profile/hero.tsxapps/web/components/routes/thread/user-thread-panel.tsxapps/pro-web/components/routes/thread/user-thread-panel.tsx
apps/{web,pro-web}/components/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Order component files: imports → constants → component → styled components → types/interfaces
Files:
apps/web/components/layout/profile/hero.tsxapps/pro-web/components/layout/profile/hero.tsxapps/web/components/routes/thread/user-thread-panel.tsxapps/pro-web/components/routes/thread/user-thread-panel.tsx
apps/{web,pro-web}/components/routes/**
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Place page-specific components under components/routes/[feature]/
Organize page-specific components under components/routes/
Files:
apps/web/components/routes/thread/user-thread-panel.tsxapps/pro-web/components/routes/thread/user-thread-panel.tsx
apps/{web,pro-web}/app/**
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/{web,pro-web}/app/**: Prefer Next.js Server Components; use 'use client' only when necessary
Leverage Streaming and Suspense for responsiveness in Next.js 15
Follow Next.js file conventions in the App Router
apps/{web,pro-web}/app/**: Leverage Server Components by default; use the use client directive only when client-side features are needed
Implement Nested Layouts using the App Router
Use Streaming and Suspense features in Next.js 14/15 where appropriate
Follow Next.js file conventions for routing and layout in the App Router
Optimize data fetching: fetch on the server, fetch where needed, and use preload patterns to avoid waterfalls
Files:
apps/pro-web/app/globals.cssapps/web/app/globals.css
🧠 Learnings (2)
📚 Learning: 2025-08-29T20:34:24.433Z
Learnt from: AndlerRL
PR: bitcashorg/masterbots#542
File: apps/web/components/layout/profile/layout.tsx:67-68
Timestamp: 2025-08-29T20:34:24.433Z
Learning: The UserCard component in apps/web/components/routes/profile/user-card.tsx accepts a loading prop to show skeleton/loading states. This should be used when user data is not yet available rather than passing null or using type assertions.
Applied to files:
apps/web/components/layout/profile/hero.tsxapps/pro-web/components/layout/profile/hero.tsx
📚 Learning: 2024-10-23T19:11:47.520Z
Learnt from: AndlerRL
PR: bitcashorg/masterbots#287
File: apps/masterbots.ai/components/routes/thread/user-thread-panel.tsx:39-45
Timestamp: 2024-10-23T19:11:47.520Z
Learning: In the `UserThreadPanel` component (`apps/masterbots.ai/components/routes/thread/user-thread-panel.tsx`), the `count` state variable is used in the `loadMore` function and depends on `finalThreads.length`, so updating `count` in the `useEffect` is necessary.
Applied to files:
apps/pro-web/components/routes/thread/user-thread-panel.tsx
🔇 Additional comments (6)
apps/pro-web/components/routes/thread/user-thread-panel.tsx (1)
486-486: LGTM! Simplified empty state messaging.The change to a static "No public threads" message with an empty description simplifies the UI and clarifies that only public threads are shown on profile pages. The removal of the username-based description makes the message more concise.
apps/web/lib/url.ts (1)
320-320: LGTM! Improved readability.The added whitespace improves code readability by separating the initialization from the subsequent operations.
apps/web/components/routes/thread/user-thread-panel.tsx (1)
487-487: LGTM! Consistent with pro-web changes.The static "No public threads" message with an empty description aligns with the parallel change in the pro-web app, ensuring consistent UX across both applications.
apps/web/components/layout/profile/hero.tsx (1)
9-9: LGTM! Improved vertical spacing.The addition of
py-5provides better vertical spacing around the UserCard, enhancing the visual hierarchy of the profile hero section. This works well with the new background image.apps/pro-web/components/layout/profile/hero.tsx (1)
9-9: LGTM! Consistent spacing across apps.The
py-5addition matches the web app implementation, ensuring consistent vertical spacing in the profile hero section across both applications.apps/pro-web/app/globals.css (1)
863-868: hero-bg.jpg asset exists Verified at apps/pro-web/public/hero-bg.jpg.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/components/layout/header/user-menu.tsx (1)
100-102: Extract inline arrow function per coding guidelines.The inline arrow function in the
onClickhandler should be extracted to a stable function reference to prevent unnecessary re-renders.Apply this diff to extract the handler:
+ const handleDropdownClick = () => { + setOpen(false) + } + return ( <div className="items-center justify-between hidden md:block"> <DropdownMenu open={open} onOpenChange={setOpen}> {/* ... */} <DropdownMenuContent sideOffset={8} align="start" className="w-[200px]" - onClick={(e) => { - setOpen(false) - }} + onClick={handleDropdownClick} >As per coding guidelines.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/hasura/metadata/databases/masterbots/tables/public_thread.yaml(0 hunks)apps/web/components/layout/header/user-menu.tsx(1 hunks)apps/web/components/routes/browse/browse-chatbot-desktop-details.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- apps/hasura/metadata/databases/masterbots/tables/public_thread.yaml
✅ Files skipped from review due to trivial changes (1)
- apps/web/components/routes/browse/browse-chatbot-desktop-details.tsx
🧰 Additional context used
📓 Path-based instructions (6)
apps/{web,pro-web}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/{web,pro-web}/**/*.tsx: Declare React components with the function keyword
Name React components using PascalCase
Order component files: imports → constants → component → styled components → types/interfaces
Use functional components and hooks; type props with a TypeScript interface
Use regular function references (not inline arrows) for React event handlers to avoid extra re-renders
apps/{web,pro-web}/**/*.tsx: Use regular function references for event handlers instead of inline arrow functions in JSX
Declare React components with the function keyword (function ComponentName() {})
Use PascalCase for React component names
Order React component files: imports, constants, component, styled components, types/interfaces
Style components with Tailwind CSS utility classes
Files:
apps/web/components/layout/header/user-menu.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Use meaningful variable names; prefix booleans with is/has/does/should
Use interface for objects/classes; type for unions/tuples/aliases; enum for fixed sets; const for literals
Avoid any; prefer specific types
Leverage type inference where clear; annotate function params and return types
Prefer type assertions with 'as' over angle-bracket syntax
Use type guards to narrow types in conditionals
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Use modern JavaScript features with TypeScript across the codebase
Use meaningful names; prefix booleans with is/has/does/should (e.g., isDisabled)
Receive an object and return an object (RORO) for functions interfacing with external services
Type definitions: use interface for objects/classes; type for unions/tuples/aliases; const for literals; enum for fixed sets
Avoid any; prefer specific types
Leverage type inference; omit explicit annotations when obvious
Add explicit type annotations for function parameters and return values
Prefer type assertions with as over angle-bracket syntax
Use type guards to narrow types within conditionals
Favor composition over inheritance in code structure
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Prefer RORO (Receive an object, return an object) for function signatures, especially for external service interactions
Use interface for object shapes/classes; type for unions/tuples/aliases; const for literals; enum for fixed enumerations
Avoid using any; prefer precise types
Leverage type inference when clear; omit redundant annotations
Explicitly annotate function parameters and return types
Prefer type assertions with as over angle-bracket syntax
Use type guards to narrow types safely
Use meaningful variable names; prefix booleans with is/has/does/should
Favor composition over inheritance
Use lowercase dash-separated names for files and folders; use extensions like .config.ts, .test.ts, .context.tsx, .typ...
Files:
apps/web/components/layout/header/user-menu.tsx
apps/{web,pro-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/{web,pro-web}/**/*.{ts,tsx}: Use lowercase kebab-case for directories and filenames (components can omit extension)
Verify DOM operations and consider timing (RAF/delays) when manipulating the DOM in React
Use Tailwind CSS utility classes for styling React components
apps/{web,pro-web}/**/*.{ts,tsx}: Use TypeScript to define React props types (interfaces for props)
Use custom hooks (useMBChat, useThread, useSidebar, useModel) for domain-specific state and keep providers focused and composed hierarchically
Separate presentation from business logic and compose small components
Use hasura.service.ts for all GraphQL operations from UI layers
apps/{web,pro-web}/**/*.{ts,tsx}: Prefer Server Components; use the use client directive only when client-side features are required
Implement Nested Layouts using the App Router
Use Streaming and Suspense in Next.js 14/15 where appropriate
Follow Next.js file conventions as per documentation
Use IndexedDB for local caching to enable immediate UI updates
Files:
apps/web/components/layout/header/user-menu.tsx
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
**/*: Use lowercase with dash-separated directory and file names; use specific extensions: .config.ts, .test.ts, .context.tsx, .type.ts, .hook.ts; components may omit extension
Use Bun for package management and scripts instead of npm/yarn
Use Biome for formatting and linting via bun format-and-lint:fix; avoid Prettier/ESLint configs
Files:
apps/web/components/layout/header/user-menu.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Avoid inline arrow functions in JSX props; use stable function references for event handlers
Declare React components with the function keyword (functional components)
Use PascalCase for React component names
Use functional components and hooks instead of class components
Type component props with TypeScript interfaces
Files:
apps/web/components/layout/header/user-menu.tsx
apps/{web,pro-web}/components/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Order component files: imports → constants → component → styled components → types/interfaces
Files:
apps/web/components/layout/header/user-menu.tsx
🔇 Additional comments (1)
apps/web/components/layout/header/user-menu.tsx (1)
128-128: LGTM! Styling standardization looks good.The className update aligns the ThemeToggle styling with other menu items by adding
text-smandh-11, ensuring visual consistency across the dropdown menu.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/pro-web/components/shared/category-dashboard.tsx(2 hunks)apps/pro-web/components/shared/onboarding-section.tsx(1 hunks)apps/web/components/shared/category-dashboard.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
apps/{web,pro-web}/components/shared/**
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Place reusable UI under components/shared/
Place reusable UI elements under components/shared/
Files:
apps/pro-web/components/shared/category-dashboard.tsxapps/web/components/shared/category-dashboard.tsxapps/pro-web/components/shared/onboarding-section.tsx
apps/{web,pro-web}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/{web,pro-web}/**/*.tsx: Declare React components with the function keyword
Name React components using PascalCase
Order component files: imports → constants → component → styled components → types/interfaces
Use functional components and hooks; type props with a TypeScript interface
Use regular function references (not inline arrows) for React event handlers to avoid extra re-renders
apps/{web,pro-web}/**/*.tsx: Use regular function references for event handlers instead of inline arrow functions in JSX
Declare React components with the function keyword (function ComponentName() {})
Use PascalCase for React component names
Order React component files: imports, constants, component, styled components, types/interfaces
Style components with Tailwind CSS utility classes
Files:
apps/pro-web/components/shared/category-dashboard.tsxapps/web/components/shared/category-dashboard.tsxapps/pro-web/components/shared/onboarding-section.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Use meaningful variable names; prefix booleans with is/has/does/should
Use interface for objects/classes; type for unions/tuples/aliases; enum for fixed sets; const for literals
Avoid any; prefer specific types
Leverage type inference where clear; annotate function params and return types
Prefer type assertions with 'as' over angle-bracket syntax
Use type guards to narrow types in conditionals
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Use modern JavaScript features with TypeScript across the codebase
Use meaningful names; prefix booleans with is/has/does/should (e.g., isDisabled)
Receive an object and return an object (RORO) for functions interfacing with external services
Type definitions: use interface for objects/classes; type for unions/tuples/aliases; const for literals; enum for fixed sets
Avoid any; prefer specific types
Leverage type inference; omit explicit annotations when obvious
Add explicit type annotations for function parameters and return values
Prefer type assertions with as over angle-bracket syntax
Use type guards to narrow types within conditionals
Favor composition over inheritance in code structure
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Prefer RORO (Receive an object, return an object) for function signatures, especially for external service interactions
Use interface for object shapes/classes; type for unions/tuples/aliases; const for literals; enum for fixed enumerations
Avoid using any; prefer precise types
Leverage type inference when clear; omit redundant annotations
Explicitly annotate function parameters and return types
Prefer type assertions with as over angle-bracket syntax
Use type guards to narrow types safely
Use meaningful variable names; prefix booleans with is/has/does/should
Favor composition over inheritance
Use lowercase dash-separated names for files and folders; use extensions like .config.ts, .test.ts, .context.tsx, .typ...
Files:
apps/pro-web/components/shared/category-dashboard.tsxapps/web/components/shared/category-dashboard.tsxapps/pro-web/components/shared/onboarding-section.tsx
apps/{web,pro-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/{web,pro-web}/**/*.{ts,tsx}: Use lowercase kebab-case for directories and filenames (components can omit extension)
Verify DOM operations and consider timing (RAF/delays) when manipulating the DOM in React
Use Tailwind CSS utility classes for styling React components
apps/{web,pro-web}/**/*.{ts,tsx}: Use TypeScript to define React props types (interfaces for props)
Use custom hooks (useMBChat, useThread, useSidebar, useModel) for domain-specific state and keep providers focused and composed hierarchically
Separate presentation from business logic and compose small components
Use hasura.service.ts for all GraphQL operations from UI layers
apps/{web,pro-web}/**/*.{ts,tsx}: Prefer Server Components; use the use client directive only when client-side features are required
Implement Nested Layouts using the App Router
Use Streaming and Suspense in Next.js 14/15 where appropriate
Follow Next.js file conventions as per documentation
Use IndexedDB for local caching to enable immediate UI updates
Files:
apps/pro-web/components/shared/category-dashboard.tsxapps/web/components/shared/category-dashboard.tsxapps/pro-web/components/shared/onboarding-section.tsx
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
**/*: Use lowercase with dash-separated directory and file names; use specific extensions: .config.ts, .test.ts, .context.tsx, .type.ts, .hook.ts; components may omit extension
Use Bun for package management and scripts instead of npm/yarn
Use Biome for formatting and linting via bun format-and-lint:fix; avoid Prettier/ESLint configs
Files:
apps/pro-web/components/shared/category-dashboard.tsxapps/web/components/shared/category-dashboard.tsxapps/pro-web/components/shared/onboarding-section.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Avoid inline arrow functions in JSX props; use stable function references for event handlers
Declare React components with the function keyword (functional components)
Use PascalCase for React component names
Use functional components and hooks instead of class components
Type component props with TypeScript interfaces
Files:
apps/pro-web/components/shared/category-dashboard.tsxapps/web/components/shared/category-dashboard.tsxapps/pro-web/components/shared/onboarding-section.tsx
apps/{web,pro-web}/components/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Order component files: imports → constants → component → styled components → types/interfaces
Files:
apps/pro-web/components/shared/category-dashboard.tsxapps/web/components/shared/category-dashboard.tsxapps/pro-web/components/shared/onboarding-section.tsx
apps/{web,pro-web}/components/shared/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Store reusable UI elements in components/shared/
Files:
apps/pro-web/components/shared/category-dashboard.tsxapps/web/components/shared/category-dashboard.tsxapps/pro-web/components/shared/onboarding-section.tsx
🧬 Code graph analysis (1)
apps/web/components/shared/category-dashboard.tsx (1)
packages/mb-drizzle/src/drizzle/schema.ts (1)
category(220-228)
🔇 Additional comments (3)
apps/web/components/shared/category-dashboard.tsx (2)
61-64: LGTM! Clean implementation of bulk selection.The
handleSelectAllfunction correctly extracts all category IDs and updates the local selection state. The implementation is symmetric withhandleClearAlland follows the existing pattern.
142-148: LGTM! Select All button enhances UX.The button is well-positioned between Clear All and Apply Selection, with consistent styling and proper event handler reference.
apps/pro-web/components/shared/category-dashboard.tsx (1)
61-64: LGTM! Consistent implementation across apps.The
handleSelectAllfunction and Select All button match the web version exactly, ensuring a consistent user experience across both applications.Also applies to: 142-148
| <button | ||
| type="button" | ||
| onClick={handleClearAll} | ||
| 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> |
There was a problem hiding this comment.
Critical bug: Select All button clears selections instead of selecting all.
The Select All button on Line 104 calls handleClearAll, which will clear all selections rather than selecting all categories. This is the opposite of the intended behavior.
Apply this diff to fix the issue:
First, add the missing handleSelectAll function after handleClearAll:
const handleClearAll = () => {
setLocalSelectedCategories([])
}
+
+ const handleSelectAll = () => {
+ const allCategoryIds = allCategories.map((category) => category.categoryId)
+ setLocalSelectedCategories(allCategoryIds)
+ }Then, update the Select All button to call the correct handler:
<button
type="button"
- onClick={handleClearAll}
+ 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>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <button | |
| type="button" | |
| onClick={handleClearAll} | |
| 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> | |
| // … earlier in the component… | |
| const handleClearAll = () => { | |
| setLocalSelectedCategories([]) | |
| } | |
| const handleSelectAll = () => { | |
| const allCategoryIds = allCategories.map((category) => category.categoryId) | |
| setLocalSelectedCategories(allCategoryIds) | |
| } | |
| // … later, in the JSX … | |
| <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> |
🤖 Prompt for AI Agents
In apps/pro-web/components/shared/onboarding-section.tsx around lines 102 to
108, the "Select All" button is wired to handleClearAll which wrongly clears
selections; add a new handleSelectAll function immediately after handleClearAll
that sets the selected state to include all available categories (e.g.,
setSelectedCategories(allCategories) or setSelectedCategories(categories.map(c
=> c.id)) depending on how selections are stored), then change the button's
onClick to call handleSelectAll instead of handleClearAll.
|
@sheriffjimoh — I see some updates in the PR 🚀 let me know if it is good to go for a review |
2 participants
Summary by Sourcery
Fix regressions and UI inconsistencies from the Sep/22 release by updating empty state text, enhancing profile hero styling, and tidying up URL builder formatting
Enhancements:
Chores:
Summary by CodeRabbit
Style
New Features
Chores