Skip to content

feat: session page revamp#1486

Merged
rohanchkrabrty merged 9 commits intomainfrom
feat-sessions-revamp
Apr 6, 2026
Merged

feat: session page revamp#1486
rohanchkrabrty merged 9 commits intomainfrom
feat-sessions-revamp

Conversation

@rohanchkrabrty
Copy link
Copy Markdown
Contributor

Summary

  • Upgrade SDK to use Apsara v1 design system components
  • Revamp General, Profile, Preferences, and Sessions settings views with new component architecture
  • Add reusable components: ImageUpload, ViewContainer, ViewHeader, delete organization dialog, and session revoke dialogs
  • Add session management hooks with revoke functionality
  • Fix logout redirect behavior

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 30, 2026

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

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

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 30, 2026

Warning

Rate limit exceeded

@rohanchkrabrty has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 13 minutes and 35 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 13 minutes and 35 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a879a7f6-854d-4499-9046-7c480a3bcbf4

📥 Commits

Reviewing files that changed from the base of the PR and between f00670c and c8dc7f3.

📒 Files selected for processing (1)
  • web/sdk/react/index.ts
📝 Walkthrough

Walkthrough

This PR adds a comprehensive React 19-compatible settings UI infrastructure to the client-demo app and SDK. It introduces nested routing for organization settings, creates new view components (General, Preferences, Profile, Sessions) wrapping Frontier backend views, adds reusable UI building blocks (ImageUpload, ViewContainer, ViewHeader), and updates dependencies to align with React 19.

Changes

Cohort / File(s) Summary
React Version Upgrade
web/apps/client-demo/package.json
Bumped react, react-dom, @types/react, @types/react-dom from v18 to v19 versions.
Client Demo Setup
web/apps/client-demo/src/App.tsx, web/apps/client-demo/src/styles.css
Added global stylesheet imports for component and base styles; reset body padding/margin.
Settings Routing
web/apps/client-demo/src/Router.tsx, web/apps/client-demo/src/pages/Home.tsx
Added nested settings route structure under /:orgId/settings with sub-routes; added settings link on home page organization cards.
Settings Main Page
web/apps/client-demo/src/pages/Settings.tsx
Created main settings page with org resolution logic, sidebar navigation, and outlet for sub-routes.
Settings Sub-pages
web/apps/client-demo/src/pages/settings/*
Added four sub-pages (General, Preferences, Profile, Sessions) wrapping respective views from Frontier SDK.
Image Upload Component
web/sdk/react/components/image-upload/image-upload.tsx, web/sdk/react/components/image-upload/image-upload.module.css, web/sdk/react/components/image-upload/index.ts
Implemented image upload with crop dialog using react-image-crop, canvas rendering, and base64 conversion.
View Container & Header Components
web/sdk/react/components/view-container/view-container.tsx, web/sdk/react/components/view-container/view-container.module.css, web/sdk/react/components/view-header/view-header.tsx, web/sdk/react/components/view-header/index.ts, web/sdk/react/components/view-container/index.ts
Added reusable layout components: ViewContainer (full-viewport wrapper with sidebar support) and ViewHeader (title/description + action area).
General Settings View
web/sdk/react/views-new/general/general-view.tsx, web/sdk/react/views-new/general/general-view.module.css, web/sdk/react/views-new/general/components/delete-organization-dialog.*, web/sdk/react/views-new/general/index.ts
Created organization General settings with logo upload, editable title, URL display, and delete capability with confirmation dialog.
Preferences View
web/sdk/react/views-new/preferences/preferences-view.tsx, web/sdk/react/views-new/preferences/components/preference-row.tsx, web/sdk/react/views-new/preferences/preferences-view.module.css, web/sdk/react/views-new/preferences/components/preferences-row.module.css, web/sdk/react/views-new/preferences/index.ts
Added preferences management with theme toggle and newsletter subscription controls via PreferenceRow layout component.
Profile View
web/sdk/react/views-new/profile/profile-view.tsx, web/sdk/react/views-new/profile/profile-view.module.css, web/sdk/react/views-new/profile/index.ts
Created user profile editor with avatar upload, title input, read-only email, and update mutation handling.
Sessions View
web/sdk/react/views-new/sessions/sessions-view.tsx, web/sdk/react/views-new/sessions/sessions-view.module.css, web/sdk/react/views-new/sessions/components/revoke-session-dialog.tsx, web/sdk/react/views-new/sessions/components/revoke-session-dialog.module.css, web/sdk/react/views-new/sessions/components/revoke-session-confirm-dialog.tsx, web/sdk/react/views-new/sessions/index.ts
Implemented session management with revocation dialogs, logout capability, and device/location display formatting.
SDK Infrastructure
web/sdk/package.json, web/sdk/react/index.ts, web/sdk/tsup.config.ts
Updated dependencies to add @raystack/apsara-v1 and @base-ui/react; upgraded React peer dependency to v19; expanded public exports for new components; marked react-dom as external in bundler config.
SDK Refactoring
web/sdk/react/hooks/useSessions.ts, web/sdk/admin/components/SheetFooter.tsx
Refactored useSessions hook to accept optional options parameter; removed css prop from SheetFooter and updated border styling to use CSS variables.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • PR #1414: Modifies DeleteOrganization dialog and general settings view components that overlap with this PR's GeneralView implementation.
  • PR #1425: Introduces the "views-new" React view components (GeneralView, PreferencesView, ProfileView, SessionsView) and SDK export expansion that directly correspond to this PR's deliverables.
  • PR #1422: Refactors and relocates SDK React views and updates the SDK's React view/component export surface, sharing overlapping changes with this PR's view architecture.

Suggested reviewers

  • rsbh
  • rohilsurana
  • paanSinghCoder

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.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 17

🧹 Nitpick comments (2)
web/sdk/admin/components/SheetFooter.tsx (1)

9-10: Remove @ts-ignore; type the style object instead.

Line 9 suppresses type checking on a core render path and can mask real type regressions. Prefer explicit typing over suppression.

Proposed diff
-import React from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { Flex } from "@raystack/apsara";
 
 type SheetFooterProps = {
-  children?: React.ReactNode;
+  children?: ReactNode;
 };
 
 export function SheetFooter({ children }: SheetFooterProps) {
-  // `@ts-ignore`
   return <Flex style={styles.footer}>{children}</Flex>;
 }
 
-const styles = {
+const styles: { footer: CSSProperties } = {
   footer: {
     bottom: 0,
     left: 0,
web/sdk/react/components/image-upload/image-upload.module.css (1)

26-33: Add keyboard-focus parity for the hover-only avatar reveal.

Current behavior is mouse-only. Mirror the same styling for :focus-visible so keyboard users get equivalent feedback.

Suggested CSS tweak
 .iconButton:hover .avatar {
   opacity: 0;
   visibility: hidden;
 }
 
 .iconButton:hover {
   border-color: var(--rs-color-border-accent-primary);
 }
+
+.iconButton:focus-visible .avatar {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.iconButton:focus-visible {
+  border-color: var(--rs-color-border-accent-primary);
+}

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: bc543b83-5f81-4242-ac91-f122765584ac

📥 Commits

Reviewing files that changed from the base of the PR and between b00da9e and f00670c.

⛔ Files ignored due to path filters (1)
  • web/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (42)
  • 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/pages/settings/Profile.tsx
  • web/apps/client-demo/src/pages/settings/Sessions.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/hooks/useSessions.ts
  • 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/react/views-new/profile/index.ts
  • web/sdk/react/views-new/profile/profile-view.module.css
  • web/sdk/react/views-new/profile/profile-view.tsx
  • web/sdk/react/views-new/sessions/components/revoke-session-confirm-dialog.tsx
  • web/sdk/react/views-new/sessions/components/revoke-session-dialog.module.css
  • web/sdk/react/views-new/sessions/components/revoke-session-dialog.tsx
  • web/sdk/react/views-new/sessions/index.ts
  • web/sdk/react/views-new/sessions/sessions-view.module.css
  • web/sdk/react/views-new/sessions/sessions-view.tsx
  • web/sdk/tsup.config.ts

@rohanchkrabrty rohanchkrabrty changed the base branch from main to feat-profile-revamp March 30, 2026 05:31
@rohanchkrabrty rohanchkrabrty changed the title feat: revamp settings pages with Apsara v1 SDK components feat: session page revamp Mar 30, 2026
@rohanchkrabrty rohanchkrabrty added the Do not merge Label to indicate that the PR is not ready to be merged even though might be (or not) approvals. label Mar 30, 2026
@rohanchkrabrty rohanchkrabrty removed the Do not merge Label to indicate that the PR is not ready to be merged even though might be (or not) approvals. label Apr 6, 2026
Base automatically changed from feat-profile-revamp to main April 6, 2026 04:57
@rohanchkrabrty rohanchkrabrty enabled auto-merge (squash) April 6, 2026 05:03
@coveralls
Copy link
Copy Markdown

Pull Request Test Coverage Report for Build 24019484653

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 Coverage Status
Change from base Build 24019315180: 0.0%
Covered Lines: 14931
Relevant Lines: 36207

💛 - Coveralls

@rohanchkrabrty rohanchkrabrty merged commit 0392bd1 into main Apr 6, 2026
8 checks passed
@rohanchkrabrty rohanchkrabrty deleted the feat-sessions-revamp branch April 6, 2026 05:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants