feat: Implement settings page functionality(#566) #595
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit introduces the initial implementation of the user settings page, providing core account management features and improving the UI. Key features include: - Users can now update their display name and select a profile avatar from the account section. - The folder list is now restricted to an initial view of 6 items, with a 'View More' button for more.
Contributor
|
Caution Review failedThe pull request is closed. WalkthroughAdds a tabbed Settings UI (General vs Account), a new AccountSettingsCard to edit and persist user name/avatar, and incremental folder loading in FolderManagementCard with a "View More" button and per-folder rendering adjustments. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SettingsPage
participant AccountCard
participant FolderCard
participant Redux as OnboardingSlice
participant Storage as localStorage
User->>SettingsPage: open Settings
SettingsPage->>SettingsPage: render tab header
alt selects "Account" tab
SettingsPage->>AccountCard: mount AccountSettingsCard
User->>AccountCard: edit name / choose avatar
AccountCard->>AccountCard: validate input
User->>AccountCard: click Save
AccountCard->>Redux: dispatch setName/setAvatar
AccountCard->>Storage: persist name/avatar
Note right of AccountCard: Save disabled if no avatar selected
else selects "General" tab
SettingsPage->>FolderCard: mount FolderManagementCard
FolderCard->>FolderCard: render folders[0..N-1] (N=6)
User->>FolderCard: click "View More"
FolderCard->>FolderCard: increase N by 5 and re-render
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related issues
Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (1)
frontend/src/pages/SettingsPage/Settings.tsx (1)
39-51: Remove unnecessary fragments.The empty fragments wrapping the tab content (lines 40-44 and 48-50) serve no purpose and can be removed for cleaner code.
Apply this diff:
<div className="mt-6 space-y-8"> {activeTab === 'general' && ( - <> + <div className="space-y-8"> <FolderManagementCard /> <UserPreferencesCard /> <ApplicationControlsCard /> - </> + </div> )} {activeTab === 'account' && ( - <> + <div className="space-y-8"> <AccountSettingsCard /> - </> + </div> )} </div>Or simply remove the fragments entirely since the parent
divalready has the spacing classes.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/src/pages/SettingsPage/Settings.tsx(1 hunks)frontend/src/pages/SettingsPage/components/AccountSettingsCard.tsx(1 hunks)frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx(4 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
frontend/src/pages/SettingsPage/components/AccountSettingsCard.tsx (2)
frontend/src/features/onboardingSlice.ts (2)
setName(28-30)setAvatar(25-27)frontend/src/constants/avatars.ts (1)
avatars(1-10)
frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx (2)
frontend/src/components/ui/switch.tsx (1)
Switch(29-29)frontend/src/components/ui/progress.tsx (1)
Progress(37-37)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Tauri Build Check (windows-latest)
- GitHub Check: Tauri Build Check (ubuntu-22.04)
- GitHub Check: Tauri Build Check (macos-latest, --target aarch64-apple-darwin)
- GitHub Check: Backend Tests
🔇 Additional comments (3)
frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx (2)
1-1: LGTM: Pagination state setup is clean.The pagination implementation with
visibleFoldersCountstarting at 6 and incrementing by 5 provides a good progressive disclosure pattern.Also applies to: 32-36
139-147: LGTM: View More button implementation is correct.The conditional rendering and click handler correctly implement progressive disclosure of folder items.
frontend/src/pages/SettingsPage/components/AccountSettingsCard.tsx (1)
33-38: LGTM: Name validation UX is user-friendly.Clearing the error state on input change provides immediate feedback and good user experience.
frontend/src/pages/SettingsPage/components/AccountSettingsCard.tsx
Outdated
Show resolved
Hide resolved
frontend/src/pages/SettingsPage/components/AccountSettingsCard.tsx
Outdated
Show resolved
Hide resolved
7 tasks
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
frontend/src/pages/SettingsPage/components/AccountSettingsCard.tsx(1 hunks)frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/pages/SettingsPage/components/FolderManagementCard.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
frontend/src/pages/SettingsPage/components/AccountSettingsCard.tsx (2)
frontend/src/features/onboardingSlice.ts (2)
setName(28-30)setAvatar(25-27)frontend/src/constants/avatars.ts (1)
avatars(1-10)
🪛 GitHub Actions: PR Check
frontend/src/pages/SettingsPage/components/AccountSettingsCard.tsx
[warning] 1-1: Code style issues found in the above file. Run 'prettier --write' to fix.
[error] 1-1: Prettier formatting check failed. Run 'prettier --write' to fix code style issues in this file.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Tauri Build Check (windows-latest)
ShivaGupta-14
force-pushed
the
feat/settings-page
branch
from
4280082 to
9a61e23
Compare
Contributor
Author
|
I think something happen in my setup, I will open a new PR again. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Solves Issue #566
This PR implements the user settings page, introducing account management features and folder list pagination as outlined in the issue.
Path
frontend/src/pages/SettingsPage.tsxfrontend/src/components/settings/AccountSettingsCard.tsxfrontend/src/features/onboardingSlice.tsApproach
Problem
Solution
localStorageto maintain state across sessions.Testing Done
localStorage.Summary
New Features
UX Improvements
Summary by CodeRabbit
New Features
Bug Fixes / UX Improvements