feat: profile page revamp

[rohanchkrabrty]

Summary

• Add ProfileView component in views-new/profile/ using @raystack/apsara-v1 primitives
• Implements avatar upload via ImageUpload, form fields for full name and (read-only) email, and an Update button with dirty-state guard
• Reuses existing hooks and API calls (useFrontier, useMutation, FrontierServiceQueries) — no business logic rewritten
• Follows the same ViewContainer / ViewHeader layout pattern established by the general and preferences revamps
• Wired into client-demo with a route at /:orgId/settings/profile and a sidebar nav item

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
frontier	Ready	Preview, Comment	Apr 6, 2026 4:52am

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Summary by CodeRabbit

• New Features
  • Added a new Profile settings page enabling users to manage their profile information
  • Users can now update their full name and upload a profile avatar
  • Added Profile navigation item to the organization settings sidebar for easy access
  • Profile updates include validation and confirmation notifications

Walkthrough

Introduces a new Profile feature to the client-demo settings section. Adds routing and navigation for a profile management page, creates the ProfileView component in the SDK with form handling for user updates, adds CSS styling, and includes necessary UI dependencies.

Changes

Cohort / File(s)	Summary
Routing and Navigation web/apps/client-demo/src/Router.tsx, web/apps/client-demo/src/pages/Settings.tsx	Added nested route for profile page under /:orgId/settings and extended sidebar navigation with new "Profile" menu item.
Client-Demo Profile Page web/apps/client-demo/src/pages/settings/Profile.tsx	Created new Profile page component that wraps and renders the SDK's ProfileView component.
SDK React Exports web/sdk/react/index.ts	Added ProfileView export from the views-new/profile module to the React SDK public API.
ProfileView Implementation web/sdk/react/views-new/profile/index.ts, web/sdk/react/views-new/profile/profile-view.tsx, web/sdk/react/views-new/profile/profile-view.module.css	Implemented ProfileView component with Yup validation schema, react-hook-form integration, user data mutations, loading/error states, and avatar/name form fields; includes corresponding CSS module styling.
Dependencies web/sdk/package.json	Added @raystack/apsara-v1 and @base-ui/react@1.2.0 as runtime dependencies.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat: SDK general page design revamp #1480: Adds sibling nested settings routes (GeneralView) and extends SDK React exports with settings-related components, sharing similar routing and SDK patterns.
• feat: preferences settings revamp #1483: Modifies the same Router and Settings files to add nested settings routes, indicating parallel feature development in the settings UI surface.

Suggested reviewers

• rsbh
• rohilsurana

---

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.}

[coderabbitai]

Actionable comments posted: 10

🧹 Nitpick comments (4)

web/apps/client-demo/package.json (1)

22-22: Consider removing @types/react-router-dom.

react-router-dom v7+ includes built-in TypeScript definitions. The @types/react-router-dom package (v5.3.3) is for older versions and is unnecessary here—it may even cause type conflicts.

♻️ Suggested removal

  "devDependencies": {
    "@types/node": "^22.10.0",
    "@types/react": "^19.2.2",
    "@types/react-dom": "^19.2.2",
-   "@types/react-router-dom": "^5.3.3",
    "@types/uuid": "^10.0.0",

web/sdk/tsup.config.ts (1)

41-43: Consider externalizing react-dom for Hooks APIs for consistency, but it's not currently required.

The React APIs build (line 25) externalizes react-dom alongside react, but the Hooks APIs build (line 42) only externalizes react. However, analysis shows the hooks code currently has no react-dom imports, so there's no actual risk of bundling duplicate instances. Adding 'react-dom' to the Hooks APIs external list (line 42) would be a consistency measure rather than addressing an existing issue.

web/apps/client-demo/src/pages/Home.tsx (1)

63-68: Prefer org.id for the settings URL and test-id key.

Using org.name makes this path/selector more fragile (renames/encoding). org.id is the safer canonical identifier.

♻️ Suggested change

-              <Link
-                to={`/${org.name}/settings`}
-                data-test-id={`[organization-new-ui-link-${org.name}]`}
-              >
+              <Link
+                to={`/${org.id}/settings`}
+                data-test-id={`[organization-new-ui-link-${org.id}]`}
+              >
                 {org.title} (NEW UI)
               </Link>

web/sdk/react/views-new/general/general-view.tsx (1)

286-293: Make the delete opener an explicit non-submit button.

If Button keeps native button semantics, omitting type here turns the delete opener into a submit control because it sits inside the update form. type="button" avoids accidentally submitting the form when the dialog is opened.

Minimal fix

                   <Button
+                    type="button"
                     variant="solid"
                     color="danger"
                     onClick={() => setShowDeleteDialog(true)}
                     disabled={!canDeleteWorkspace}

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b5c09c1c-9df2-4153-ac28-26648adadc75

📥 Commits

Reviewing files that changed from the base of the PR and between 5417d82 and fd07c82.

⛔ Files ignored due to path filters (1)

• web/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (30)

• web/apps/client-demo/package.json
• web/apps/client-demo/src/App.tsx
• web/apps/client-demo/src/Router.tsx
• web/apps/client-demo/src/pages/Home.tsx
• web/apps/client-demo/src/pages/Settings.tsx
• web/apps/client-demo/src/pages/settings/General.tsx
• web/apps/client-demo/src/pages/settings/Preferences.tsx
• web/apps/client-demo/src/styles.css
• web/sdk/admin/components/SheetFooter.tsx
• web/sdk/package.json
• web/sdk/react/components/image-upload/image-upload.module.css
• web/sdk/react/components/image-upload/image-upload.tsx
• web/sdk/react/components/image-upload/index.ts
• web/sdk/react/components/view-container/index.ts
• web/sdk/react/components/view-container/view-container.module.css
• web/sdk/react/components/view-container/view-container.tsx
• web/sdk/react/components/view-header/index.ts
• web/sdk/react/components/view-header/view-header.tsx
• web/sdk/react/index.ts
• web/sdk/react/views-new/general/components/delete-organization-dialog.module.css
• web/sdk/react/views-new/general/components/delete-organization-dialog.tsx
• web/sdk/react/views-new/general/general-view.module.css
• web/sdk/react/views-new/general/general-view.tsx
• web/sdk/react/views-new/general/index.ts
• web/sdk/react/views-new/preferences/components/preference-row.tsx
• web/sdk/react/views-new/preferences/components/preferences-row.module.css
• web/sdk/react/views-new/preferences/index.ts
• web/sdk/react/views-new/preferences/preferences-view.module.css
• web/sdk/react/views-new/preferences/preferences-view.tsx
• web/sdk/tsup.config.ts

[paanSinghCoder]

Approved. Lets rename /react to /client and keep /react as backward compatible.

[coveralls]

Pull Request Test Coverage Report for Build 24019201719

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

• For more information on this, see Tracking coverage changes with pull request builds.
• To avoid this issue with future PRs, see these Recommended CI Configurations.
• For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 41.238%

---

Totals
Change from base Build 24019070600:	0.0%
Covered Lines:	14931
Relevant Lines:	36207

---

💛 - Coveralls