Add account button with profile picture to home page for authenticated users

[Copilot]

When authenticated, display an account button in the top-right corner of the home page that opens the existing profile overlay.

Changes

• Home route wrapper (src/routes/home.lazy.tsx)

  • Wrapped component with ProfileOverlayProvider and added ProfileOverlay component

• Account button (src/views/HomePageStatic.tsx)

  • Query profile data when authenticated === true
  • Render button in top-right corner with user's profile picture
  • Fallback to gradient icon when no picture or on image load error
  • Click opens profile overlay (same component used in authenticated app)

Implementation

{data === true && (
  <div className="absolute top-4 right-4 z-10">
    <Button onClick={openProfile}>
      {avatarUrl && !imageError ? (
        <img src={avatarUrl} onError={() => setImageError(true)} />
      ) : (
        <div className="rounded-full bg-gradient-to-br from-accent-blue to-purple-600">
          <User />
        </div>
      )}
    </Button>
  </div>
)}

Screenshot

Not authenticated:

When authenticated, account button appears in top-right with profile picture.

Original prompt

In the home page, when the user is logged in, add a account button in the top right that uses their profile picture, and opens the account popup in the main app. don't redo it. just make it use that same popup component

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

---

TL;DR

Adds an account button with the user's profile picture to the home page for authenticated users, which opens the existing profile overlay.

What changed?

• src/routes/home.lazy.tsx: The home page route now integrates profile overlay functionality by wrapping the static home page content with a ProfileOverlayProvider and rendering a ProfileOverlay component, thereby introducing state management for the profile overlay.
• src/views/HomePageStatic.tsx: The HomePageStatic component has been updated to integrate user profile display, specifically by fetching and rendering the user's avatar in an "Account button" in the top-right corner. This button, visible when authenticated, opens a profile overlay and includes fallback logic for avatar display if the image is unavailable.

^{Description generated by Mesa. Update settings}

[vercel]

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

Project	Deployment	Review	Updated (UTC)
draw	Ready	Preview, Comment	Jan 15, 2026 10:27pm

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

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