refactor(samples): Improve User Profile UI #21
Merged
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 a notification feed to the sample app and implements the ability to mark notifications as read or seen.
Key changes:
- **Notification Feed UI:**
- Added `NotificationFeed` widget to display a list of aggregated notifications.
- Added `NotificationItem` widget to render individual notification items with icons, text, and an unread indicator.
- Integrated the notification feed into the `UserFeedScreen` accessible via a new notification icon in the app bar, which displays a badge for unseen notifications.
- Notifications can be marked as read by tapping on them or by using a "Mark all read" button.
- Notifications are automatically marked as seen when the notification feed is opened.
- **Mark Activity Logic:**
- Implemented `onActivityMarked` in `FeedNotifier` to update the `FeedState` when activities are marked as read or seen.
- Added helper methods (`_markAllRead`, `_markAllSeen`, `_markRead`, `_markSeen`) in `FeedNotifier` to handle different marking scenarios and update `NotificationStatusResponse`.
- Introduced `MarkActivityDataHandler` extension on `MarkActivityData` to simplify handling different mark operations.
- **Styling and Refinements:**
- Refactored `ActionButton` to always display the count and use `TextButton.icon`. Removed the `showCountWhenZero` property.
- Updated `AppTextTheme` for `bodyBold` to use `FontWeight.w500`.
- Used `switch` expressions for icon selection in `ActivityContent` and `NotificationItem`.
- **Exports:** Added `AggregatedActivityData`, `FeedMemberData`, and `FollowData` to `models.dart`.
- **Feed Repository:** Ensured `aggregatedActivities` in `GetOrCreateFeedData` are sorted.
This commit refactors the User Profile view with the following enhancements:
- **New UI Structure:**
- `ProfileHeader`: Displays user avatar, name, ID, and key stats (members, following, followers) in a visually appealing header.
- `ProfileSection`: A reusable widget to display lists of items (e.g., members, following, suggestions) with a title, count, and empty state message.
- `ProfileListItem`: Provides specialized list items for members, follow requests, following, and suggestions, each with appropriate actions (e.g., accept/reject request, unfollow, follow).
- **Improved Layout:**
- The profile view now uses a `SingleChildScrollView` and is displayed within a `DraggableScrollableSheet` for better usability, especially on smaller screens.
- Sections are clearly separated and styled for better readability.
- **Enhanced Functionality:**
- Follow suggestions are now sorted alphabetically by creator name.
- Unfollowing a user from the "Following" list now adds them back to the "Suggestions" list.
- Following a user from the "Suggestions" list now removes them from that list.
- **Styling and Theming:**
- Leverages `ThemeExtensions` for consistent styling across the app.
- Uses `Chip` widgets for member roles and `OutlinedButton` for actions, improving visual clarity.
- **Code Organization:**
- The old `UserProfileView` has been removed and replaced with the new structure, promoting better separation of concerns and maintainability.
- Helper widgets like `_StatColumn` and `_SectionHeader` are used to encapsulate specific UI elements.
- **Create Activity Bottom Sheet:**
- Added padding to respect `MediaQuery.of(context).viewInsets` to prevent the keyboard from overlapping content.
- Ensured consistent background color and rounded corners when displayed as a modal bottom sheet.
These changes result in a more polished, user-friendly, and maintainable User Profile screen.
This commit introduces a significant refactoring of the user feed screen and its associated components. The main goal is to improve code organization, maintainability, and responsiveness.
**Key Changes:**
- **Componentization:**
- The `UserFeedScreen` has been broken down into smaller, more focused components:
- `UserFeed`: Displays the list of activities in the user's feed.
- `UserFeedItem`: Renders a single activity in the feed.
- `UserComments`: Handles the display and interaction with comments on an activity.
- `UserCommentItem`: Renders a single comment.
- `UserProfile`: Displays the user's profile information, follow requests, and suggestions.
- Several previously standalone widgets (`ActivityCommentsView`, `ActivityContent`, `UserFeedAppbar`) have been removed and their functionality integrated into the new component structure.
- **Responsiveness:**
- Introduced a `Breakpoint` enum and utility to handle different screen sizes (compact, medium, expanded).
- The `UserFeedScreen` now adapts its layout based on the current breakpoint:
- **Compact:** Profile is shown in a bottom sheet, feed takes full width.
- **Medium/Expanded:** Profile is shown in a side panel, feed and profile are displayed side-by-side.
- **Improved UI/UX:**
- Enhanced the visual appearance of comments and feed items.
- Updated icons for better clarity.
- Added an empty state for the feed and comments sections.
- **Code Structure:**
- Grouped related components into dedicated folders (e.g., `feed`, `comment`, `profile`).
- Improved code readability and organization within components.
- **Other:**
- Renamed `UserProfileView` to `UserProfile` for consistency.
- Updated DI references and imports as needed.
These changes result in a more modular, maintainable, and user-friendly feed experience.
renefloor
approved these changes
Sep 9, 2025
# Conflicts: # sample_app/lib/screens/user_feed/notification/notification_item.dart # sample_app/lib/screens/user_feed/user_feed_screen.dart
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This commit refactors the User Profile view with the following enhancements:
-
ProfileHeader: Displays user avatar, name, ID, and key stats (members, following, followers) in a visually appealing header.-
ProfileSection: A reusable widget to display lists of items (e.g., members, following, suggestions) with a title, count, and empty state message.-
ProfileListItem: Provides specialized list items for members, follow requests, following, and suggestions, each with appropriate actions (e.g., accept/reject request, unfollow, follow).- The profile view now uses a
SingleChildScrollViewand is displayed within aDraggableScrollableSheetfor better usability, especially on smaller screens.- Sections are clearly separated and styled for better readability.
- Follow suggestions are now sorted alphabetically by creator name.
- Unfollowing a user from the "Following" list now adds them back to the "Suggestions" list.
- Following a user from the "Suggestions" list now removes them from that list.
- Leverages
ThemeExtensionsfor consistent styling across the app.- Uses
Chipwidgets for member roles andOutlinedButtonfor actions, improving visual clarity.- The old
UserProfileViewhas been removed and replaced with the new structure, promoting better separation of concerns and maintainability.- Helper widgets like
_StatColumnand_SectionHeaderare used to encapsulate specific UI elements.- Added padding to respect
MediaQuery.of(context).viewInsetsto prevent the keyboard from overlapping content.- Ensured consistent background color and rounded corners when displayed as a modal bottom sheet.
These changes result in a more polished, user-friendly, and maintainable User Profile screen.