Skip to content

Refactor: Team settings page#292

Open
sarimrmalik wants to merge 35 commits intomainfrom
refactor/team-settings
Open

Refactor: Team settings page#292
sarimrmalik wants to merge 35 commits intomainfrom
refactor/team-settings

Conversation

@sarimrmalik
Copy link
Copy Markdown
Collaborator

@sarimrmalik sarimrmalik commented Apr 10, 2026

Ticket

  • Refactors the team settings page into simpler, focused sections for avatar, name, and team info, including inline team-name editing with auto-fit text and clearer validation feedback.
  • Reworks the team members experience around a richer client-side table with search, cleaner card/layout structure, and improved add/remove member flows.
  • Moves more team-management logic into the tRPC layer and shared schemas, removing older action-based paths and tightening repository-backed validation and error handling.

Restructure the members page around a richer client table and dialog-based invite flow, while preserving the corrected removal and inviter behaviors with focused coverage.

Made-with: Cursor
- Introduced `isPendingTeamMember` utility to determine pending invites based on provider recognition.
- Updated member table row logic to utilize the new utility for better clarity on member status.
- Refined the Add Member dialog and form for improved user experience, including UI adjustments and label updates.
- Enhanced members page content to display pending member counts alongside total members.

These changes aim to streamline the member management process and improve the overall dashboard experience.
- Simplified the Add Member dialog by consolidating class names for better styling.
- Removed unnecessary Card components from MemberCard for a cleaner layout.
- Introduced a new RemoveMemberDialog component to enhance member removal interactions.
- Adjusted member table row and cell components for improved responsiveness and clarity.

These changes aim to streamline the user experience in managing team members on the dashboard.
- Updated the ProvidersCell component to improve responsiveness by displaying a single provider badge on smaller screens and all providers on larger screens.
- Adjusted column widths in the MemberTable for better alignment and consistency across different screen sizes.

These changes enhance the user experience by ensuring that member information is displayed clearly and effectively across various devices.
- Removed unnecessary `not-italic` class from various buttons and input fields in the Add Member dialog and form for a cleaner look.
- Adjusted the `NameCell` and `ProvidersCell` components to enhance readability and responsiveness.
- Updated the search input in the MembersPageContent to streamline styling.

These changes aim to improve the overall user experience and maintain a consistent design across member management components.
- Introduced a new `Page` component to standardize layout across dashboard pages.
- Updated `MembersPage` to wrap content in the `Page` component for improved structure and styling consistency.

These changes enhance the overall user experience by providing a unified layout approach for member management components.
- Renamed `AddMemberEmailForm` to `AddMemberForm` for better alignment with its functionality.
- Updated type definitions to reflect the new naming convention.
- Adjusted the Add Member dialog to utilize the renamed form component.

These changes enhance code readability and maintain a consistent naming structure across member management components.
- Added `formatDate` utility to format dates with specified structures, improving date handling across the application.
- Updated `MemberTableRow` to utilize the new `formatDate` function for displaying member creation dates.
- Introduced `TableEmptyState` component to replace the previous empty state implementation in the member table for better clarity and consistency.

These changes enhance the user experience by providing clearer date formatting and improving the overall structure of the member table.
- Moved the `RemoveMemberDialog` component to its own file for better organization and maintainability.
- Simplified the `member-table-row` by removing the inline dialog implementation, enhancing readability.
- Updated the dialog's structure and styling for a more consistent user experience.

These changes aim to streamline the member removal process and improve code organization within the dashboard components.
- Renamed `isSystemAddedMember` to `wasAddedBySystem` and `isPendingTeamMember` to `isPendingInvite` for improved clarity in their functionality.
- Updated all relevant tests and components to reflect the new function names, ensuring consistent usage across the application.

These changes enhance code readability and maintain a clear understanding of member status within the dashboard components.
- Introduced a new `pluralize` function to handle singular and plural word forms based on count, enhancing text display consistency.
- Updated `MembersPageContent` to utilize the `pluralize` function for member count display.
- Removed the `isPendingInvite` function from member table utilities and adjusted related components to streamline member status handling.

These changes improve code clarity and enhance the user experience by providing accurate member count representations.
…consistency and clarity.

- Replaced the previous implementation of the InvoicesEmpty component with the new TableEmptyState component, enhancing the visual structure of empty states.
- Updated the member table to streamline the rendering of empty states, ensuring a more uniform approach across the application.

These changes improve code maintainability and user experience by providing a consistent empty state presentation.
- Refactored the GeneralPage component to utilize a new layout structure, improving the organization of team-related information.
- Added new user messages for team logo removal scenarios to enhance user feedback.
- Updated the TeamsRepository interface to allow for null profile picture URLs, improving flexibility in team profile management.
- Added .cursor/ to .gitignore to prevent tracking of cursor-related files.

These changes improve the user experience and code maintainability across the application.
Made-with: Cursor

# Conflicts:
#	src/features/dashboard/members/add-member-form.tsx
#	src/features/dashboard/members/member-table.tsx
#	src/features/dashboard/members/members-page-content.tsx
- Added DangerZone component to the GeneralPage for team deletion functionality.
- Introduced TeamAvatar component for improved avatar handling in sidebar menus.
- Implemented TeamInfo component to display team creation date and primary email.
- Created RemovePhotoDialog for confirming profile picture removal.
- Updated models to include createdAt field for teams.
- Refactored user-teams-repository to fetch team creation dates from the database.

These changes improve user experience and maintainability of the team settings interface.
- Removed the createdAt field from the TeamModel type to simplify the model structure.
- Updated the UserTeamsRepository to directly return team data without fetching creation dates from the database.
- Adjusted the TeamInfo component to reflect the removal of the createdAt prop, displaying a placeholder instead.

These changes enhance code clarity and maintainability by reducing unnecessary complexity in team data management.
- Introduced a utility function `getStorageFilePath` to streamline file path construction for team-related storage.
- Updated the `removeTeamProfilePictureAction` and `uploadTeamProfilePictureAction` to utilize the new utility function, enhancing code readability and maintainability.

These changes simplify file path management in team actions, contributing to cleaner code.
- Introduced file upload functionality for team profile pictures, including validation for file type and size.
- Updated the TeamAvatar component to handle image uploads and removals using TRPC mutations.
- Refactored TeamName component to utilize TRPC for updating team names, enhancing state management and user feedback.
- Created a new file schema for consistent file handling across components.

These changes improve the user experience and maintainability of the team settings interface.
- Consolidated team member schemas, including AddTeamMemberSchema and RemoveTeamMemberSchema, for better organization and clarity.
- Updated team actions to utilize TRPC for adding and removing team members, enhancing state management and user feedback.
- Refactored the AddMemberForm and MemberTableRow components to integrate the new TRPC mutations, improving the user experience when managing team members.

These changes streamline team member management and enhance the maintainability of the codebase.
- Introduced TRPC queries for fetching team members in the MembersPage and MemberCard components, enhancing data handling and user experience.
- Replaced the previous loading and error handling mechanisms with a more streamlined approach using the new TableLoadingState and ErrorIndicator components.
- Updated the AddMemberForm and MemberTableRow components to utilize query invalidation for better state management after mutations.
- Removed the deprecated getTeamMembers function to clean up the codebase.

These changes improve the maintainability and responsiveness of the team members interface.
…r handling

- Introduced dynamic font sizing for the team name input, adjusting based on available width to ensure optimal display.
- Added validation error handling using TRPC, displaying user-friendly messages for form errors and field-specific issues.
- Refactored the component to utilize a text measurement span for accurate font size adjustments during editing.

These changes improve the user experience and maintainability of the TeamName component in the dashboard settings.
- Updated the GeneralPage component to streamline the layout by integrating styles directly into the Page component.
- Removed the DangerZone component from the GeneralPage, simplifying the interface and focusing on essential team information.
- Added 'use client' directive to the loader component for improved client-side rendering.

These changes enhance the clarity and maintainability of the dashboard settings interface.
- Removed the className prop from the MemberCard component, streamlining its interface.
- Updated the Card component to eliminate unnecessary className usage, improving layout consistency.
- Adjusted CardContent to include padding directly, enhancing visual presentation.

These changes improve the maintainability and clarity of the MemberCard component in the dashboard.
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 10, 2026

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

Project Deployment Actions Updated (UTC)
web Ready Ready Preview, Comment Apr 13, 2026 9:21pm
web-juliett Ready Ready Preview, Comment Apr 13, 2026 9:21pm

Request Review

@sarimrmalik sarimrmalik changed the title Refactor/team settings Refactor: Team settings page Apr 10, 2026
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 91edd639c7

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

- Added a check to prevent form submission if the updateNameMutation is pending, improving user experience by avoiding duplicate requests.
- Ensured that the form only submits when the name is valid and different from the current team name.

These changes enhance the reliability and responsiveness of the TeamName component in the dashboard settings.
- Added try-catch block around the fileToBase64 function to handle potential errors when reading files.
- Implemented user feedback via toast notifications for failed file reads, enhancing the user experience.
- Cleared the file input on error to prevent invalid submissions.

These changes enhance the robustness and user-friendliness of the TeamAvatar component in the dashboard settings.
- Updated the form structure to enhance layout consistency and user experience.
- Improved error handling by consolidating validation messages into a single toast notification.
- Ensured the input field and buttons are properly organized for better accessibility and usability.

These changes enhance the maintainability and user-friendliness of the TeamName component in the dashboard settings.
- Added createdAt field to the UserTeam schema in the OpenAPI specification and TypeScript types for better tracking of team creation dates.
- Updated the TeamInfo component to display the formatted creation date, enhancing the user interface with relevant team information.

These changes improve data representation and user experience in the dashboard settings.
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.

1 participant