UI/UX - Home bento grid dashboard; continuation of adaptivity

[dlab-anton]

Enhance Home Page Adaptability with Bento Grid Layout

This PR explores using a bento grid structure. While the current approach works well on narrow screens, I noticed some inconsistencies (mixed widths, layout shifts) on desktops, which are our primary users. Also going forward it is easier to show/hide elements with a standard grid.

Why

Creates a highly extensible and adaptable "dashboard-like" foundation. Its modular nature means new content cards (tips, walkthroughs, links) can be added with minimal layout effort, while also simplifying the future implementation of dynamic layouts, conditional content (based on user activity, preferences, etc.), and potential user customization. Also helps marketing take quick action e.g. "we need to drive traffic to producthunt for the next 48 hours" -> "Please help us card". Certain cards can improve retention and give higher quality of life like last 7 days usage stats.

A bento grid helps us:

• Deliver a great UX consistently across mobile, tablet, desktop, widescreen +
• Visually stable inside resizable panel
• Modularity - cards standardize the presentation of different content modules
• At the end of the day it helps us deliver exactly what a new user needs to onboard easily (walkthroughs, etc.) and enhance advanced users experience (customization, quick links, etc) while giving max. benefit to all screen-sizes.

Concept / Feedback

This is first iteration and just to display the core function of a bento grid / so please don't mind the details. This is just to explore the idea and get feedback.

The current home screen w/o bento on my desktop

Bento grid

---

Important

Enhances UI/UX with a bento grid layout for the home page, tabbed settings view, and improved webview visibility handling.

• UI/UX Enhancements:
  • Introduces BentoGrid component in BentoGrid.tsx for a modular, adaptive home page layout.
  • Updates ChatView.tsx to integrate BentoGrid for displaying tasks and features.
  • Adds RooHero component in RooHero.tsx for consistent branding.
• Settings View:
  • Implements tabbed navigation in SettingsView.tsx with Tab, TabList, and TabTrigger components.
  • Supports compact mode for tabs, adjusting layout based on container width.
  • Handles unsaved changes with a confirmation dialog.
• Webview Visibility:
  • Adds visibility change handling in registerCommands.ts and openClineInNewTab to notify webviews when they become visible.
• Testing:
  • Updates SettingsView.test.tsx to test new tabbed navigation and unsaved changes dialog.

^{This description was created by for b3c9717. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

This pull request includes a variety of changes across different components and functionalities, such as UI updates, styling changes, and test improvements. To improve reviewability and focus, consider splitting the pull request into smaller ones. For example, you could separate the styling updates from the functional changes, or group changes by component (e.g., settings view, welcome view, chat view). This will help reviewers focus on specific aspects of the changes and ensure a more thorough review process.

[ellipsis-dev]

Task prop is typed as any[]. Consider defining a specific type for tasks for better type safety.

Suggested change

	tasks: any[]
	tasks: TaskItem[]

^{This comment was generated because it violated a code review rule: mrule_QkEwsCio7v34DaCF.}

[sachasayan]

This looks great, honestly. I think we can polish it up together but it's a very good direction and one I'm happy to support/champion. I was even thinking of things like stats appearing as elements on that main page.

You've said this is just a first iteration to explore the idea — what are your thoughts so far as you've been exploring it?

[dlab-anton]

This looks great, honestly. I think we can polish it up together but it's a very good direction and one I'm happy to support/champion. I was even thinking of things like stats appearing as elements on that main page.

You've said this is just a first iteration to explore the idea — what are your thoughts so far as you've been exploring it?

Thanks for the feedback.

For design hesitation, for me it's really about a content-first approach. For example new user onboarding may have more dynamic card with a built-in checklist or even a video. Whereas adaptive power users probably hate anything that slows down instant extension loading. So we ought to really understand our users and then figure out the content. I would like to codify some user-centric rules perhaps to guide the content development. But once we have the content the cards, layout will flow together well with bento grid in my opinion.

[sachasayan]

Fully agree.

Here's my suggestion: We build out some of that content first, we'll put it below the fold, and then as things get hectic, we start talking about breaking out bento boxes?

My first inclination would be a tokens / loc stat counter. Just a fun little box for users to see how much they've been using Roo. Any other ideas?

[daniel-lxs]

Hey @dlab-anton,
Thank you for your contribution, We noticed this PR is stale and will be closed. If you plan to revisit this, please create an issue first as required by our issue-first approach before opening a new PR.