Adjust ui for brief onboarding

[elie222]

User description

Rework the Briefs onboarding UI in apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx to use a Card layout with a top illustration for brief onboarding

Update the onboarding component to render within Card with TypographyH3/SectionDescription, add a header Image (unoptimized, dark-mode aware), and replace item media with direct icons in blue.

📍Where to Start

Start with the BriefsOnboarding component in Onboarding.tsx.

---

Macroscope summarized 11da0ed.

---

Generated description

Below is a concise technical summary of the changes proposed in this PR:

graph LR
BriefsOnboarding_("BriefsOnboarding"):::modified
CARD_("CARD"):::modified
NEXT_IMAGE_("NEXT_IMAGE"):::added
TYPOGRAPHY_H3_("TYPOGRAPHY_H3"):::added
SECTION_DESCRIPTION_("SECTION_DESCRIPTION"):::added
BriefsOnboarding_ -- "Replaced layout with Card wrapper including illustration and footer" --> CARD_
BriefsOnboarding_ -- "Adds unoptimized illustration image displaying Meeting Briefs SVG" --> NEXT_IMAGE_
BriefsOnboarding_ -- "Adds TypographyH3 heading 'Meeting Briefs' for visual emphasis" --> TYPOGRAPHY_H3_
BriefsOnboarding_ -- "Replaces CardDescription with SectionDescription for supporting copy" --> SECTION_DESCRIPTION_
classDef added stroke:#15AA7A
classDef removed stroke:#CD5270
classDef modified stroke:#EDAC4C
linkStyle default stroke:#CBD5E1,font-size:13px

Loading

Refactor the BriefsOnboarding component to enhance its user interface, replacing standard card elements with a more visually appealing layout that includes custom typography and an illustrative image.

Latest Contributors(2)

User	Commit	Date
elie222	unused-imports	December 31, 2025
eduardoleliss@gmail.com	Copilot-deployment-ins...	November 25, 2025

This pull request is reviewed by Baz. Review like a pro on (Baz).

Summary by CodeRabbit

• Documentation

  • Added new external resource link to documentation.

• Style

  • Redesigned onboarding experience with new visual header and simplified content layout using icon-based organization.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
inbox-zero	Ready	Preview	Dec 31, 2025 11:18am

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR updates documentation with a new resource link and refactors the BriefsOnboarding component's UI structure, replacing the previous Card/Header-based layout with an Image-based header and simplified ItemGroup architecture.

Changes

Cohort / File(s)	Summary
Documentation Update README.md	Added external resource link to "Popsy Illustrations" in the Built with section.
Component UI Refactor apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx	Restructured layout: replaced CardHeader/CardTitle/CardDescription with single Card wrapper containing Image header and centered typography; replaced Item-based grid with simplified ItemGroup containing three Items with icons (UserIcon, MailIcon, LightbulbIcon); updated icon color from blue-600 to blue-500; adjusted spacing with mt-6 on ItemGroup and CardFooter.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Fix flicker #1143: Both PRs modify apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx with overlapping Card and item/icon-related component changes.
• Add meeting brief onboarding #1142: Related as the base PR that introduced the BriefsOnboarding component, now being refactored with structural layout and component composition updates.

Suggested reviewers

• baz-reviewer

Poem

🐰 A briefing board blooms anew,
With Popsy's art in vibrant hue,
Cards transform to images grand,
Icons dancing, hand in hand—
Simplicity hops through the code! 🌟

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Adjust ui for brief onboarding' directly relates to the main changes in the PR, which focus on UI modifications to the BriefsOnboarding component.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 71635d1 and 11da0ed.

📒 Files selected for processing (2)

• README.md
• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

🧰 Additional context used

📓 Path-based instructions (16)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/data-fetching.mdc)

**/*.{ts,tsx}: For API GET requests to server, use the swr package
Use result?.serverError with toastError from @/components/Toast for error handling in async operations

**/*.{ts,tsx}: Use wrapper functions for Gmail message operations (get, list, batch, etc.) from @/utils/gmail/message.ts instead of direct API calls
Use wrapper functions for Gmail thread operations from @/utils/gmail/thread.ts instead of direct API calls
Use wrapper functions for Gmail label operations from @/utils/gmail/label.ts instead of direct API calls

**/*.{ts,tsx}: For early access feature flags, create hooks using the naming convention use[FeatureName]Enabled that return a boolean from useFeatureFlagEnabled("flag-key")
For A/B test variant flags, create hooks using the naming convention use[FeatureName]Variant that define variant types, use useFeatureFlagVariantKey() with type casting, and provide a default "control" fallback
Use kebab-case for PostHog feature flag keys (e.g., inbox-cleaner, pricing-options-2)
Always define types for A/B test variant flags (e.g., type PricingVariant = "control" | "variant-a" | "variant-b") and provide type safety through type casting

**/*.{ts,tsx}: Don't use primitive type aliases or misleading types
Don't use empty type parameters in type aliases and interfaces
Don't use this and super in static contexts
Don't use any or unknown as type constraints
Don't use the TypeScript directive @ts-ignore
Don't use TypeScript enums
Don't export imported variables
Don't add type annotations to variables, parameters, and class properties that are initialized with literal expressions
Don't use TypeScript namespaces
Don't use non-null assertions with the ! postfix operator
Don't use parameter properties in class constructors
Don't use user-defined types
Use as const instead of literal types and type annotations
Use either T[] or Array<T> consistently
Initialize each enum member value explicitly
Use export type for types
Use `impo...

Files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

apps/web/app/(app)/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/page-structure.mdc)

apps/web/app/(app)/**/*.{ts,tsx}: Components for the page are either put in page.tsx, or in the apps/web/app/(app)/PAGE_NAME folder
If we're in a deeply nested component we will use swr to fetch via API
If you need to use onClick in a component, that component is a client component and file must start with use client

Files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/prisma-enum-imports.mdc)

Always import Prisma enums from @/generated/prisma/enums instead of @/generated/prisma/client to avoid Next.js bundling errors in client components

Import Prisma using the project's centralized utility: import prisma from '@/utils/prisma'

Files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

apps/web/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)

Import specific lodash functions rather than entire lodash library to minimize bundle size (e.g., import groupBy from 'lodash/groupBy')

apps/web/**/*.{ts,tsx}: Use TypeScript with strict null checks
Do not export types/interfaces that are only used within the same file. Export later if needed

Files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

**/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)

**/*.{tsx,ts}: Use Shadcn UI and Tailwind for components and styling
Use next/image package for images
For API GET requests to server, use the swr package with hooks like useSWR to fetch data
For text inputs, use the Input component with registerProps for form integration and error handling

Files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

**/*.{tsx,ts,css}

📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)

Implement responsive design with Tailwind CSS using a mobile-first approach

Files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)

**/*.tsx: Use the LoadingContent component to handle loading states instead of manual loading state management
For text areas, use the Input component with type='text', autosizeTextarea prop set to true, and registerProps for form integration

Files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)

**/*.{js,jsx,ts,tsx}: Don't use accessKey attribute on any HTML element
Don't set aria-hidden="true" on focusable elements
Don't add ARIA roles, states, and properties to elements that don't support them
Don't use distracting elements like <marquee> or <blink>
Only use the scope prop on <th> elements
Don't assign non-interactive ARIA roles to interactive HTML elements
Make sure label elements have text content and are associated with an input
Don't assign interactive ARIA roles to non-interactive HTML elements
Don't assign tabIndex to non-interactive HTML elements
Don't use positive integers for tabIndex property
Don't include "image", "picture", or "photo" in img alt prop
Don't use explicit role property that's the same as the implicit/default role
Make static elements with click handlers use a valid role attribute
Always include a title element for SVG elements
Give all elements requiring alt text meaningful information for screen readers
Make sure anchors have content that's accessible to screen readers
Assign tabIndex to non-interactive HTML elements with aria-activedescendant
Include all required ARIA attributes for elements with ARIA roles
Make sure ARIA properties are valid for the element's supported roles
Always include a type attribute for button elements
Make elements with interactive roles and handlers focusable
Give heading elements content that's accessible to screen readers (not hidden with aria-hidden)
Always include a lang attribute on the html element
Always include a title attribute for iframe elements
Accompany onClick with at least one of: onKeyUp, onKeyDown, or onKeyPress
Accompany onMouseOver/onMouseOut with onFocus/onBlur
Include caption tracks for audio and video elements
Use semantic elements instead of role attributes in JSX
Make sure all anchors are valid and navigable
Ensure all ARIA properties (aria-*) are valid
Use valid, non-abstract ARIA roles for elements with ARIA roles
Use valid AR...

Files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

**/*.{jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)

**/*.{jsx,tsx}: Don't use unnecessary fragments
Don't pass children as props
Don't use the return value of React.render
Make sure all dependencies are correctly specified in React hooks
Make sure all React hooks are called from the top level of component functions
Don't forget key props in iterators and collection literals
Don't define React components inside other components
Don't use event handlers on non-interactive elements
Don't assign to React component props
Don't use both children and dangerouslySetInnerHTML props on the same element
Don't use dangerous JSX props
Don't use Array index in keys
Don't insert comments as text nodes
Don't assign JSX properties multiple times
Don't add extra closing tags for components without children
Use <>...</> instead of <Fragment>...</Fragment>
Watch out for possible "wrong" semicolons inside JSX elements
Make sure void (self-closing) elements don't have children
Don't use target="_blank" without rel="noopener"
Don't use <img> elements in Next.js projects
Don't use <head> elements in Next.js projects

Files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

!(pages/_document).{jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)

Don't use the next/head module in pages/_document.js on Next.js projects

Files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx
• README.md

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/utilities.mdc)

**/*.{js,ts,jsx,tsx}: Use lodash utilities for common operations (arrays, objects, strings)
Import specific lodash functions to minimize bundle size (e.g., import groupBy from 'lodash/groupBy')

Files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

apps/web/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (apps/web/CLAUDE.md)

apps/web/**/*.{ts,tsx,js,jsx}: Use @/ path aliases for imports from project root
Prefer self-documenting code over comments; use descriptive variable and function names instead of explaining intent with comments
Add helper functions to the bottom of files, not the top
All imports go at the top of files, no mid-file dynamic imports

Files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

apps/web/app/**/*.{ts,tsx}

📄 CodeRabbit inference engine (apps/web/CLAUDE.md)

Follow NextJS app router structure with (app) directory

Files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

apps/web/**/*.{tsx,jsx}

📄 CodeRabbit inference engine (apps/web/CLAUDE.md)

apps/web/**/*.{tsx,jsx}: Follow tailwindcss patterns with prettier-plugin-tailwindcss for class sorting
Prefer functional components with hooks in React
Use shadcn/ui components when available
Ensure responsive design with mobile-first approach in components
Follow consistent naming conventions using PascalCase for components
Use LoadingContent component for async data with loading and error states
Use React Hook Form with Zod validation for form handling
Use result?.serverError with toastError and toastSuccess for error handling in forms

Files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

apps/web/**/*.{ts,tsx,js,jsx,json,css}

📄 CodeRabbit inference engine (apps/web/CLAUDE.md)

Format code with Prettier

Files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

*.md

📄 CodeRabbit inference engine (.cursor/rules/task-list.mdc)

*.md: Create task lists in markdown files named TASKS.md or with a descriptive feature-specific name (e.g., ASSISTANT_CHAT.md) in the project root to track project progress
Structure task list markdown files with sections: Feature Name Implementation (title), description, Completed Tasks, In Progress Tasks, Future Tasks, Implementation Plan, and Relevant Files subsections
Update task list markdown files by marking tasks as completed with [x], adding new identified tasks, and moving tasks between Completed/In Progress/Future sections as appropriate
Keep the 'Relevant Files' section in task list markdown files updated with file paths that have been created or modified, brief descriptions of each file's purpose, and status indicators (e.g., ✅) for completed components

Files:

• README.md

🧠 Learnings (8)

📚 Learning: 2025-07-08T13:14:07.449Z

Learnt from: elie222
Repo: elie222/inbox-zero PR: 537
File: apps/web/app/(app)/[emailAccountId]/clean/onboarding/page.tsx:30-34
Timestamp: 2025-07-08T13:14:07.449Z
Learning: The clean onboarding page in apps/web/app/(app)/[emailAccountId]/clean/onboarding/page.tsx is intentionally Gmail-specific and should show an error for non-Google email accounts rather than attempting to support multiple providers.

Applied to files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

📚 Learning: 2025-12-21T12:21:37.794Z

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: apps/web/CLAUDE.md:0-0
Timestamp: 2025-12-21T12:21:37.794Z
Learning: Applies to apps/web/**/*.{tsx,jsx} : Use shadcn/ui components when available

Applied to files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

📚 Learning: 2025-11-25T14:38:56.992Z

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-11-25T14:38:56.992Z
Learning: Components with `onClick` handlers must be client components marked with the `use client` directive

Applied to files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

📚 Learning: 2025-11-25T14:38:56.992Z

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-11-25T14:38:56.992Z
Learning: Applies to apps/web/components/ui/**/*.tsx : Shadcn UI components are located in `components/ui` directory

Applied to files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

📚 Learning: 2025-11-25T14:38:18.874Z

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/page-structure.mdc:0-0
Timestamp: 2025-11-25T14:38:18.874Z
Learning: Applies to apps/web/app/(app)/**/*.tsx : If you need to use `onClick` in a component, that component must be a client component and file must start with `use client` directive

Applied to files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

📚 Learning: 2025-11-25T14:38:23.265Z

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/page-structure.mdc:0-0
Timestamp: 2025-11-25T14:38:23.265Z
Learning: Applies to apps/web/app/(app)/**/*.{ts,tsx} : If you need to use `onClick` in a component, that component is a client component and file must start with `use client`

Applied to files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

📚 Learning: 2025-11-25T14:40:13.649Z

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/ui-components.mdc:0-0
Timestamp: 2025-11-25T14:40:13.649Z
Learning: Applies to **/*.{tsx,ts,jsx,js} : Use Shadcn UI and Tailwind for components and styling

Applied to files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

📚 Learning: 2025-11-25T14:40:15.063Z

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/ui-components.mdc:0-0
Timestamp: 2025-11-25T14:40:15.063Z
Learning: Applies to **/*.{tsx,ts} : Use Shadcn UI and Tailwind for components and styling

Applied to files:

• apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

🧬 Code graph analysis (1)

apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx (3)

apps/web/components/new-landing/common/Card.tsx (1)

• Card (67-105)

apps/web/components/Typography.tsx (2)

• TypographyH3 (125-125)
• SectionDescription (127-127)

apps/web/components/ui/item.tsx (5)

• ItemGroup (187-187)
• Item (183-183)
• ItemContent (185-185)
• ItemTitle (189-189)
• ItemDescription (190-190)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Baz Reviewer
• GitHub Check: test
• GitHub Check: Analyze (javascript-typescript)

🔇 Additional comments (5)

README.md (1)

69-69: LGTM!

Good practice to credit the illustration library in the documentation. This aligns with the new illustration added in the BriefsOnboarding component.

apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx (4)

1-19: LGTM!

Imports are well-organized, use proper path aliases, and correctly leverage shadcn/ui components and next/image as per coding guidelines. The "use client" directive is appropriate since the component uses onClick handlers.

---

50-78: LGTM!

The ItemGroup structure is clean and follows the component patterns from @/components/ui/item. Icons are consistently styled and the content hierarchy is clear.

---

80-99: LGTM!

The conditional rendering logic for calendar connection state is well-preserved. The Button correctly uses the loading prop for the enabling state, and the CardFooter placement within the Card wrapper is appropriate.

---

34-41: The illustration file exists at the specified path and the implementation is compliant with the coding guidelines. The alt text "Meeting Briefs" is appropriately descriptive and provides meaningful context to screen readers. The unoptimized prop is correctly used for SVG files.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cubic-dev-ai]

No issues found across 2 files

[baz-reviewer]

ItemGroup now renders three Items without the previous gap-2/outline styling, so there is no spacing or border between the cards (lines 50‑78). As written, the shadcn Item default variant and the new grid container leave the rows flush together, which loses the visual separation that the UI guidelines require (.cursor/rules/ui-components.mdc calls for responsive spacing using Tailwind utilities). The items need a gap-y and/or a visible variant to keep the rows distinct.

Suggested change

	<ItemGroup className="grid mt-6">
	<Item>
	<UserIcon className="text-blue-500" />
	<ItemContent>
	<ItemTitle>Attendee research</ItemTitle>
	<ItemDescription>
	<ItemGroup className="grid mt-6 gap-y-2">
	<Item variant="outline">
	<UserIcon className="text-blue-500" />
	<ItemContent>
	<ItemTitle>Attendee research</ItemTitle>
	<ItemDescription>

---

Finding type: AI Coding Guidelines