✨ Replace dummy project/branch data with actual fetched data and unify AppBar components

[junkisai]

Issue

• N/A

Why is this change needed?

Replaced the dummy data for the project list and branch list with actual fetched data.

Additionally, since the data fetching was moved from the client side, the previously separated components (AppBar / ClientAppBar) have been merged.

Not included in this change

• Screen transition upon switching projects or branches.

What would you like reviewers to focus on?

Testing Verification

Since the AppBar’s displayed items (such as the visibility of ProjectDropdown and BranchDropdown) change depending on the page path, I verified that the behavior is as intended.

/organizations/[orgId]/projects	/projects/[projectId]/branches	/projects/[projectId]/ref/[branchOrCommit]

What was done

🤖 Generated by PR Agent at 06eb687

• Replace dummy project and branch data with real fetched data
  • Projects and branches now fetched from backend services
  • Dummy dropdowns replaced with server-side rendered dropdown menus
• Unify and refactor AppBar components and styles
  • Remove legacy AppBar, ClientAppBar, and related dropdowns
  • Introduce new server-side AppBar using modular dropdown menus
  • Update layout to use new AppBar and project/branch extraction logic
• Add new dropdown menu components for project and branch selection
  • Implement ProjectsDropdownMenu and BranchDropdownMenu with backend integration
  • Add supporting services for fetching projects and branches
• Refactor organization cookie handling and related services
  • Move cookie logic to dedicated files and update imports

Detailed Changes

	Relevant files
Enhancement	20 files AppBar.tsx New server-side AppBar component with dropdowns                    +47/-0    ProjectsDropdownMenu.tsx ProjectsDropdownMenu with backend data integration              +49/-0    Content.tsx Projects dropdown content with selection and add                  +55/-0    getProject.ts Service to fetch single project by ID                                        +14/-0    getProjects.ts Service to fetch all projects for organization                      +21/-0    index.ts Export ProjectsDropdownMenu component                                        +1/-0      ProjectsDropdownMenu.module.css Styles for ProjectsDropdownMenu component                                +45/-0    BranchDropdownMenu.tsx BranchDropdownMenu with backend data integration                  +89/-0    getBranches.ts Service to fetch branches for a project                                    +36/-0    index.ts Export BranchDropdownMenu component                                            +1/-0      BranchDropdownMenu.module.css Styles for BranchDropdownMenu component                                    +57/-0    getAuthUser.ts Service to fetch authenticated user                                            +7/-0      AppBar.module.css New styles for unified AppBar                                                        +37/-0    index.ts Export AppBar component                                                                    +1/-0      CommonLayout.tsx Use new AppBar and extract project/branch from path            +12/-5    extractProjectPathParts.ts Service to extract project/branch from URL path                    +34/-0    getOrganizationId.ts Refactor to use cookie and fallback to DB                                [link]    getOrganizationIdFromCookie.ts Service to get organization ID from cookie                              [link]    setOrganizationIdCookie.ts Service to set organization ID cookie                                        [link]    constants.ts Add organization ID cookie key constant                                    [link]
Additional files	12 files AppBar.module.css +0/-127  AppBar.tsx +0/-337  BranchDropdown.module.css +0/-137  BranchDropdown.tsx +0/-88    ClientAppBar.tsx +0/-156  OrganizationDropdownContent.tsx +1/-1      OrgCookie.tsx +1/-1      ProjectIcon.tsx +0/-35    index.ts +0/-1      ProjectsDropdown.module.css +0/-159  ProjectsDropdown.tsx +0/-85    index.ts +0/-1

Additional Notes

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
liam-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 25, 2025 8:17am
liam-erd-sample	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 25, 2025 8:17am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
liam-docs	⬜️ Ignored (Inspect)	Visit Preview		Apr 25, 2025 8:17am

[changeset-bot]

⚠️ No Changeset found

Latest commit: 06eb687

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[supabase]

Updates to Preview Branch (feat/switch-project) ↗︎

Deployments	Status	Updated
Database	✅	Fri, 25 Apr 2025 08:12:44 UTC
Services	✅	Fri, 25 Apr 2025 08:12:44 UTC
APIs	✅	Fri, 25 Apr 2025 08:12:44 UTC

Tasks are run on every commit but only new migration files are pushed.
Close and reopen this PR if you want to apply changes from existing seed or migration files.

Tasks	Status	Updated
Configurations	✅	Fri, 25 Apr 2025 08:12:47 UTC
Migrations	✅	Fri, 25 Apr 2025 08:12:48 UTC
Seeding	✅	Fri, 25 Apr 2025 08:12:48 UTC
Edge Functions	✅	Fri, 25 Apr 2025 08:12:48 UTC

---

View logs for this Workflow Run ↗︎.
Learn more about Supabase for Git ↗︎.

[junkisai]

We check whether the page path displayed here contains projectId or branchOrCommit to control the visibility of the ProjectsDropdown and BranchesDropdown.

However, this logic doesn’t run during page transitions using the Link component, so we plan to move this logic into each respective layout.tsx file.

2025-04-25.17.19.41.mov

[qodo-merge-pro-for-open-source]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Error Handling The function returns an empty array when there's an error fetching the repository mapping, but doesn't handle potential errors from the getRepositoryBranches call, which could lead to unhandled exceptions. if (error) { return [] } const repository = mapping.github_repositories const branches = await getRepositoryBranches( Number(repository.github_installation_identifier), repository.owner, repository.name, ) Typo There's a typo in the variable name 'cookirStore' which should be 'cookieStore' for consistency with other cookie handling code. const cookirStore = await cookies() const cookie = cookirStore.get(ORGANIZATION_ID_KEY) Missing Navigation The dropdown menu items are created but there's no implementation for navigation when a user selects a different branch, unlike the ProjectsDropdownMenu which has a handleClick callback. .map(({ name }) => ( <DropdownMenuRadioItem key={name} value={name} label={name} className={styles.radioItem} /> ))} </DropdownMenuRadioGroup>

[qodo-merge-pro-for-open-source]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Fix Error constructor usage The Error constructor only accepts a single message parameter. To include the error object, use string concatenation or template literals. frontend/apps/app/features/organizations/services/getOrganizationId.ts [15] -throw new Error('Authentication failed: ', authUser.error) +throw new Error(`Authentication failed: ${authUser.error.message}`) Apply this suggestion Suggestion importance[1-10]: 8 __ Why: The Error constructor only accepts a single message parameter, but the code is incorrectly trying to pass the error object as a second parameter. This would result in the error object being ignored, making debugging more difficult.	Medium
General	Fix variable name typo Fix the typo in the variable name 'cookirStore' to 'cookieStore' for better code readability and consistency. frontend/apps/app/features/organizations/services/getOrganizationIdFromCookie.ts [5] -const cookirStore = await cookies() +const cookieStore = await cookies() Apply this suggestion Suggestion importance[1-10]: 5 __ Why: The variable name 'cookirStore' contains a typo and should be 'cookieStore' for better code readability and consistency. This improves code maintainability and reduces confusion for developers.	Low
More

[MH4GF]

LGTM 👍🏻 Nice work!!!

[MH4GF]

👀