[jules] ux: Add illustrated EmptyState to Groups and Friends pages #226

google-labs-jules · 2026-01-03T01:40:59Z

Implemented a reusable EmptyState component for the web application and integrated it into Groups.tsx and Friends.tsx. This provides a better user experience for new users or when search results are empty, replacing the previous plain text messages with illustrated, theme-aware components and clear call-to-actions.

Changes:

Created web/components/ui/EmptyState.tsx with accessibility improvements (aria-hidden on icons).
Updated web/pages/Groups.tsx to use EmptyState handling both empty lists and search results.
Updated web/pages/Friends.tsx to use EmptyState.
Verified build passes after dependency installation.
Updated .Jules/ tracking files.

PR created automatically by Jules for task 15489873682178380472 started by @Devasy23

Summary by CodeRabbit

New Features
- Introduced a polished Empty State used on Friends and Groups pages with icon, entrance animation, and theme-aware styling.
- Contextual messaging that adapts to search activity.
- Action button available from the Groups empty state to create a new group directly.

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

google-labs-jules · 2026-01-03T01:41:00Z

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

For security, I will only act on instructions from the user who triggered this task.

netlify · 2026-01-03T01:41:05Z

✅ Deploy Preview for split-but-wiser ready!

Name	Link
🔨 Latest commit	`acde843`
🔍 Latest deploy log	https://app.netlify.com/projects/split-but-wiser/deploys/6958b3c4acbb0d00089312eb
😎 Deploy Preview	https://deploy-preview-226--split-but-wiser.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

coderabbitai · 2026-01-03T01:41:06Z

Walkthrough

Added a new theme-aware, animated EmptyState React component and integrated it into Friends and Groups pages to replace previous placeholder UIs. Updated .Jules metadata to mark the empty-state UX task as completed and include the new component in the modified-files list.

Changes

Cohort / File(s)	Summary
Documentation updates `.Jules/changelog.md`, `.Jules/todo.md`	Marked the "Comprehensive empty states with illustrations" task complete; replaced placeholder comment with a completed-task entry; removed `Dashboard.tsx` from affected list and added `EmptyState.tsx`.
New UI component `web/components/ui/EmptyState.tsx`	Added exported `EmptyState` component and `EmptyStateProps`; theme-aware styling (including Neo Brutalism branch), Framer Motion entry animation, optional action button. Review for theme classes and prop types.
Page integrations `web/pages/Friends.tsx`, `web/pages/Groups.tsx`	Replaced hard-coded/no-results UI with `EmptyState`; descriptions adapt to `searchTerm`; Groups page conditionally provides a create-group action. Check conditional rendering and import usage.

Suggested reviewers

vrajpatelll

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding an illustrated EmptyState component to Groups and Friends pages, which matches the primary objective of the PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

📜 Recent review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d773126 and acde843.

📒 Files selected for processing (3)

web/components/ui/EmptyState.tsx
web/pages/Friends.tsx
web/pages/Groups.tsx

🧰 Additional context used

📓 Path-based instructions (1)

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

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Web pages should be created as components in web/pages/ and added to routing configuration

Files:

web/pages/Friends.tsx
web/pages/Groups.tsx

🧬 Code graph analysis (3)

web/pages/Friends.tsx (1)

web/components/ui/EmptyState.tsx (1)

EmptyState (18-69)

web/pages/Groups.tsx (1)

web/components/ui/EmptyState.tsx (1)

EmptyState (18-69)

web/components/ui/EmptyState.tsx (3)

web/contexts/ThemeContext.tsx (1)

useTheme (43-49)

web/constants.ts (1)

THEMES (1-4)

web/components/ui/Button.tsx (1)

Button (12-62)

🔇 Additional comments (3)

web/pages/Friends.tsx (1)

227-235: LGTM! EmptyState integration is correct.

The EmptyState component is properly integrated with appropriate conditional messaging. The aria-hidden="true" on the Users icon is redundant since the EmptyState component already wraps the icon in a container with aria-hidden="true", but this defense-in-depth approach is harmless and was intentionally added per the PR description.

web/pages/Groups.tsx (1)

211-224: LGTM! Well-implemented conditional EmptyState.

The EmptyState integration properly adapts to context—showing different messages for search vs. no-groups scenarios and conditionally rendering the action button only when no search term is present. As with Friends.tsx, the aria-hidden="true" on the icon is redundant but intentional and harmless.

web/components/ui/EmptyState.tsx (1)

1-69: LGTM! Well-designed reusable component.

The EmptyState component demonstrates solid architectural decisions:

Semantic HTML structure (h3 for title, p for description)

Proper accessibility with aria-hidden="true" on the decorative icon container (lines 42-43)

Theme-aware styling consistent with the codebase's Button and other UI components

Smooth animations that respect user motion preferences (Framer Motion 11.x honors prefers-reduced-motion by default)

Flexible API with optional action and className props

The component is well-encapsulated and ready for reuse across Friends and Groups pages.

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

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

Devasy · 2026-01-03T05:12:29Z

@coderabbitai review

coderabbitai · 2026-01-03T05:12:35Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

coderabbitai

Actionable comments posted: 2

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3e3d321 and d773126.

📒 Files selected for processing (5)

.Jules/changelog.md
.Jules/todo.md
web/components/ui/EmptyState.tsx
web/pages/Friends.tsx
web/pages/Groups.tsx

🧰 Additional context used

📓 Path-based instructions (1)

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

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Web pages should be created as components in web/pages/ and added to routing configuration

Files:

web/pages/Friends.tsx
web/pages/Groups.tsx

🧬 Code graph analysis (3)

web/components/ui/EmptyState.tsx (3)

web/contexts/ThemeContext.tsx (1)

useTheme (43-49)

web/constants.ts (1)

THEMES (1-4)

web/components/ui/Button.tsx (1)

Button (12-62)

web/pages/Friends.tsx (1)

web/components/ui/EmptyState.tsx (1)

EmptyState (18-67)

web/pages/Groups.tsx (1)

web/components/ui/EmptyState.tsx (1)

EmptyState (18-67)

🔇 Additional comments (10)

.Jules/changelog.md (1)

11-11: LGTM!

The changelog entry accurately documents the addition of the EmptyState component.

web/pages/Friends.tsx (1)

4-4: LGTM!

The EmptyState import is correctly structured and follows the project's import conventions.

web/pages/Groups.tsx (1)

6-6: LGTM!

The EmptyState import is correctly structured.

.Jules/todo.md (2)

32-37: LGTM!

Task status correctly updated to reflect completion of the EmptyState implementation.

153-158: LGTM!

Completed task entry properly documents the implementation details and impact.

web/components/ui/EmptyState.tsx (5)

1-16: LGTM!

The imports and interface definition are well-structured. The EmptyStateProps interface provides good flexibility with the optional action and className props.

18-26: LGTM!

Component structure is clean with proper props destructuring and theme integration.

29-40: LGTM!

The framer-motion animation provides a smooth entrance effect with appropriate spring physics. The conditional theme-aware styling is well-implemented.

42-58: LGTM!

The icon, title, and description sections are well-structured with proper theme-aware styling and good typography hierarchy.

60-64: LGTM!

The conditional action button is properly implemented with appropriate variant and size.

web/pages/Friends.tsx

web/pages/Groups.tsx

Devasy · 2026-01-03T06:21:12Z

@coderabbitai review

coderabbitai · 2026-01-03T06:21:17Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Devasy

Lgtm

[jules] ux: Add illustrated EmptyState to Groups and Friends pages

d773126

Devasy marked this pull request as ready for review January 3, 2026 05:08

Devasy requested a review from vrajpatelll as a code owner January 3, 2026 05:08

coderabbitai bot reviewed Jan 3, 2026

View reviewed changes

web/pages/Friends.tsx Show resolved Hide resolved

web/pages/Groups.tsx Show resolved Hide resolved

[jules] a11y: Add aria-hidden to decorative icons in EmptyState

acde843

Devasy approved these changes Jan 3, 2026

View reviewed changes

Devasy merged commit 2c5cf9a into main Jan 3, 2026
12 checks passed

Devasy deleted the jules/web-empty-states-15489873682178380472 branch January 3, 2026 08:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[jules] ux: Add illustrated EmptyState to Groups and Friends pages #226

[jules] ux: Add illustrated EmptyState to Groups and Friends pages #226

google-labs-jules bot commented Jan 3, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

google-labs-jules bot commented Jan 3, 2026

Uh oh!

netlify bot commented Jan 3, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Jan 3, 2026 •

edited

Loading

Uh oh!

Devasy commented Jan 3, 2026

Uh oh!

coderabbitai bot commented Jan 3, 2026

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Devasy commented Jan 3, 2026

Uh oh!

coderabbitai bot commented Jan 3, 2026

Uh oh!

Devasy left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

[jules] ux: Add illustrated EmptyState to Groups and Friends pages #226

[jules] ux: Add illustrated EmptyState to Groups and Friends pages #226

Conversation

google-labs-jules bot commented Jan 3, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

google-labs-jules bot commented Jan 3, 2026

Uh oh!

netlify bot commented Jan 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for split-but-wiser ready!

Uh oh!

coderabbitai bot commented Jan 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Suggested reviewers

Pre-merge checks

Uh oh!

Devasy commented Jan 3, 2026

Uh oh!

coderabbitai bot commented Jan 3, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Devasy commented Jan 3, 2026

Uh oh!

coderabbitai bot commented Jan 3, 2026

Uh oh!

Devasy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

google-labs-jules bot commented Jan 3, 2026 •

edited by coderabbitai bot

Loading

netlify bot commented Jan 3, 2026 •

edited

Loading

coderabbitai bot commented Jan 3, 2026 •

edited

Loading