Problem

When navigating from ProjectBranchesListPage to a branch detail page, a 404 error occurs if the branch name contains slashes.

Current Behavior

In ProjectBranchesListPage.tsx, branch links are currently generated with:

<Link
  href={`/app/projects/${project.id}/ref/${branch.name}`}
  className={styles.branchName}
>
  {branch.name}
</Link>

When branch names contain slashes (common in Git workflows), the resulting URL path segments are misinterpreted by the router, causing 404 errors.

Proposed Solution

Use the urlgen utility to properly handle special characters in branch names:

1. Add a route definition for branch detail pages in the routeDefinitions file
2. Modify the Link component to use urlgen for generating the URL path
3. This will ensure proper encoding of branch names with special characters

Technical Considerations

• Branch names with slashes are common in Git (feature/branch, bugfix/issue-123)
• URL paths should properly encode these special characters
• The current direct string interpolation doesn't handle this edge case

Implementation Details

1. Add a route definition for the branch detail page in routeDefinitions.ts
2. Update the Link component in ProjectBranchesListPage.tsx to use urlgen
3. Test with branch names containing slashes and other special characters

Related Files

• frontend/apps/app/features/projects/pages/ProjectBranchesListPage/ProjectBranchesListPage.tsx
• frontend/apps/app/utils/routes/urlgen.ts
• frontend/apps/app/utils/routes/routeDefinitions.ts