Skip to content

Ft/account switching in the switching panel#171

Open
B3RN153 wants to merge 17 commits into
mainfrom
ft/account_switching_in_the_switching_panel
Open

Ft/account switching in the switching panel#171
B3RN153 wants to merge 17 commits into
mainfrom
ft/account_switching_in_the_switching_panel

Conversation

@B3RN153

@B3RN153 B3RN153 commented Jul 8, 2026

Copy link
Copy Markdown
Contributor
  • The users is able to switch user form user switcher panel.
  • When current user is clicked nothing happens.
  • Other features are working properly.

@B3RN153 B3RN153 self-assigned this Jul 8, 2026
@coderabbitai

coderabbitai Bot commented Jul 8, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@B3RN153, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 52 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 107927b6-2b23-430e-b688-c228578a97d8

📥 Commits

Reviewing files that changed from the base of the PR and between 555055f and d8dcbe5.

📒 Files selected for processing (1)
  • src/utils/accountDisplay.test.ts
📝 Walkthrough

Walkthrough

Adds multi-account support across drafting and settings flows: new account summary/device-account hooks, account-switch UI, account-limit enforcement, DB lookup helpers, and sign-in network error wrapping.

Changes

Multi-account switching feature

Layer / File(s) Summary
Storage, DB, and utility foundations
src/services/storage.ts, src/types/db/types.ts, src/db/queries.ts, src/utils/accountDisplay.ts, src/hooks/useAsyncRequestGuard.ts
Adds MAX_DEVICE_ACCOUNTS, UserRow, getUserById row validation, account display helpers, and a stale-request guard hook.
Network error wrapper
src/services/networkError.ts, src/services/api.ts
Introduces NetworkError/isNetworkError, and wraps sign-in fetch failures to rethrow as NetworkError.
Account summary and device accounts hooks
src/hooks/useActiveAccountSummary.ts, src/hooks/useDeviceAccounts.ts
New hooks compute the active account summary and the list of known device accounts, using DB lookups and stale-request guarding.
Account UI components and tests
src/components/ui/AccountInitialsButton.tsx, src/components/ui/AccountSwitcherPanel.tsx, src/components/ui/Accountswitcherpanel.test.tsx
Adds an initials button and a modal account switcher supporting credential lookup, active-user switching, add-account navigation, error banners, and account-limit messaging, with tests.
Drafting header and screen wiring
src/components/layout/DraftingHeader.tsx, src/app/screens/DraftingScreen.tsx
Header gains an optional account indicator button; DraftingScreen renders the shared header and account switcher panel across states and removes the inline audio player bar.
Settings and user menu account-limit enforcement
src/app/screens/SettingsScreen.tsx, src/components/ui/UserSettingsMenu.tsx, src/components/ui/SettingsListRow.tsx, src/app/appStyles.ts, src/components/ui/UserSettingsMenu.test.tsx, src/services/storage.test.ts, src/utils/acccountDisplay.test.ts
Adds account-limit checks and disabled row states, reworks logout/switch-user flows with credential fallback and concurrency guards, and adds matching tests and disabled styling.

Estimated code review effort: 4 (Complex) | ~60 minutes

Possibly related PRs

Suggested reviewers: LijuJacob08, mattrace-gloo

Poem

A rabbit hops through menus bright,
With tiny accounts in morning light.
Three is the limit, tabs align,
Switch, reload, and all feels fine.
🐰✨

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Description check ❓ Inconclusive No pull request description was provided, so there is not enough content to assess beyond the code changes. Add a brief description summarizing the user-facing goal or main implementation changes.
✅ Passed checks (3 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Title check ✅ Passed The title matches the main change: adding account switching support in the switching panel.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch ft/account_switching_in_the_switching_panel

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.

@B3RN153 B3RN153 linked an issue Jul 8, 2026 that may be closed by this pull request

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 3

🧹 Nitpick comments (3)
src/services/networkError.ts (1)

1-12: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Use Error.cause directly

@react-native/typescript-config@0.85.3 already exposes Error.cause, so the explicit cause property and manual assignment are redundant. Pass { cause } to super(...) and drop the field.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/services/networkError.ts` around lines 1 - 12, The NetworkError class is
duplicating the built-in Error.cause support by declaring its own cause field
and assigning it manually. Update the NetworkError constructor to pass the
optional cause through to super(...) using the native Error.cause mechanism, and
remove the explicit cause property and its assignment so the class relies on the
standard Error behavior.
src/app/screens/DraftingScreen.tsx (1)

24-24: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Remove commented-out dead code.

Two commented-out remnants should be cleaned up:

  • Line 24: // useDraftingContext, — commented-out import.
  • Line 193: {/* <DraftingPlayerBar verses={verses} /> */} — commented-out component JSX.

If DraftingPlayerBar removal is intentional, remove the comment entirely. If it's temporarily disabled, consider a feature flag or document the rationale inline. The useDraftingContext import should simply be deleted if no longer needed.

♻️ Proposed cleanup
 import {
   DraftingProvider,
-  // useDraftingContext,
 } from '../../drafting/DraftingContext';
-          {/* <DraftingPlayerBar verses={verses} /> */}
-
           <DraftingTabBar activeTab={activeTab} onTabChange={setActiveTab} />

Also applies to: 193-193

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/screens/DraftingScreen.tsx` at line 24, Remove the commented-out dead
code in DraftingScreen by deleting the unused useDraftingContext import fragment
and removing the commented DraftingPlayerBar JSX instead of leaving it in place.
If DraftingPlayerBar is intentionally disabled, replace the comment with an
explicit, documented mechanism; otherwise keep DraftingScreen clean by fully
deleting the unused import and the unused JSX.
src/components/ui/AccountSwitcherPanel.tsx (1)

1-1: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Move the dynamic sheet padding out of JSX.

This inline style violates the React Native style rule for app code. Use a memoized style object instead. As per coding guidelines, “Avoid inline styles in React Native (react-native/no-inline-styles is a warning).”

Proposed fix
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';

   const { accounts, hasAccountLimit, loading } = useDeviceAccounts(visible);
   const [switchingUserId, setSwitchingUserId] = useState<string | null>(null);
   const [switchError, setSwitchError] = useState<string | null>(null);
+  const sheetInsetsStyle = useMemo(
+    () => ({ paddingBottom: insets.bottom + theme.spacing.lg }),
+    [insets.bottom],
+  );

           <Pressable
             onPress={event => event.stopPropagation()}
-          style={[
-            styles.sheet,
-            { paddingBottom: insets.bottom + theme.spacing.lg },
-          ]}
+          style={[styles.sheet, sheetInsetsStyle]}
           >

Also applies to: 89-92

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/ui/AccountSwitcherPanel.tsx` at line 1, The dynamic sheet
padding is currently being defined inline in JSX, which violates the React
Native no-inline-styles guideline. Move the padding logic out of the rendered
props in AccountSwitcherPanel and into a memoized style object created with
useMemo (or an equivalent cached style helper), then apply that style through
the component’s style prop so the JSX stays static.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/ui/Accountswitcherpanel.test.tsx`:
- Around line 1-228: The AccountSwitcherPanel test file has formatting that
fails Prettier, so reformat the file to match the project style. Run the
formatter on the test and keep the existing test logic intact, especially the
AccountSwitcherPanel, setDeviceAccountsResult, and mocked navigation/service
setup.

In `@src/components/ui/AccountSwitcherPanel.tsx`:
- Line 131: There is trailing whitespace in the onPress handler for
AccountSwitcherPanel that is causing Prettier to fail. Remove the extra spaces
after the opening brace in the onPress callback and make sure the surrounding
JSX in AccountSwitcherPanel stays formatted consistently so the lint job passes.

In `@src/hooks/useDeviceAccounts.ts`:
- Around line 93-98: The limit check in useDeviceAccounts is based on
accounts.length, which is still empty during initial load and can briefly allow
adding another account. Update the hasAccountLimit logic to derive from the
stored known IDs source (for example KNOWN_USER_IDS or the persisted IDs used by
useDeviceAccounts) instead of the asynchronously loaded accounts array, and keep
the return shape in useDeviceAccounts consistent.

---

Nitpick comments:
In `@src/app/screens/DraftingScreen.tsx`:
- Line 24: Remove the commented-out dead code in DraftingScreen by deleting the
unused useDraftingContext import fragment and removing the commented
DraftingPlayerBar JSX instead of leaving it in place. If DraftingPlayerBar is
intentionally disabled, replace the comment with an explicit, documented
mechanism; otherwise keep DraftingScreen clean by fully deleting the unused
import and the unused JSX.

In `@src/components/ui/AccountSwitcherPanel.tsx`:
- Line 1: The dynamic sheet padding is currently being defined inline in JSX,
which violates the React Native no-inline-styles guideline. Move the padding
logic out of the rendered props in AccountSwitcherPanel and into a memoized
style object created with useMemo (or an equivalent cached style helper), then
apply that style through the component’s style prop so the JSX stays static.

In `@src/services/networkError.ts`:
- Around line 1-12: The NetworkError class is duplicating the built-in
Error.cause support by declaring its own cause field and assigning it manually.
Update the NetworkError constructor to pass the optional cause through to
super(...) using the native Error.cause mechanism, and remove the explicit cause
property and its assignment so the class relies on the standard Error behavior.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 85cf1beb-0c60-4316-9a7d-125dd7cd785c

📥 Commits

Reviewing files that changed from the base of the PR and between 6e17f4f and 7fc75bf.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (18)
  • src/app/appStyles.ts
  • src/app/screens/DraftingScreen.tsx
  • src/app/screens/SettingsScreen.tsx
  • src/components/layout/DraftingHeader.tsx
  • src/components/ui/AccountInitialsButton.tsx
  • src/components/ui/AccountSwitcherPanel.tsx
  • src/components/ui/Accountswitcherpanel.test.tsx
  • src/components/ui/SettingsListRow.tsx
  • src/components/ui/UserSettingsMenu.tsx
  • src/db/queries.ts
  • src/hooks/useActiveAccountSummary.ts
  • src/hooks/useAsyncRequestGuard.ts
  • src/hooks/useDeviceAccounts.ts
  • src/services/api.ts
  • src/services/networkError.ts
  • src/services/storage.ts
  • src/types/db/types.ts
  • src/utils/accountDisplay.ts

Comment thread src/components/ui/Accountswitcherpanel.test.tsx Outdated
Comment thread src/components/ui/AccountSwitcherPanel.tsx Outdated
Comment thread src/hooks/useDeviceAccounts.ts

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/utils/acccountDisplay.test.ts`:
- Around line 1-107: The test file name has a typo and does not match the module
naming, which makes the `getAccountDisplayName` and `getAccountInitials` tests
harder to locate. Rename the test file from the misspelled
`acccountDisplay.test.ts` to `accountDisplay.test.ts` so it aligns with the
`./accountDisplay` import and the source module naming.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 32a499ea-4828-4f6f-93d1-586420988d47

📥 Commits

Reviewing files that changed from the base of the PR and between 7fc75bf and 555055f.

📒 Files selected for processing (6)
  • src/components/ui/AccountSwitcherPanel.tsx
  • src/components/ui/Accountswitcherpanel.test.tsx
  • src/components/ui/UserSettingsMenu.test.tsx
  • src/hooks/useDeviceAccounts.ts
  • src/services/storage.test.ts
  • src/utils/acccountDisplay.test.ts
🚧 Files skipped from review as they are similar to previous changes (3)
  • src/components/ui/Accountswitcherpanel.test.tsx
  • src/components/ui/AccountSwitcherPanel.tsx
  • src/hooks/useDeviceAccounts.ts

Comment thread src/utils/accountDisplay.test.ts
mattrace-gloo
mattrace-gloo previously approved these changes Jul 9, 2026
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.

Implement Account Switching with Offline and Error Handling

2 participants