Fix Projects page crash for project names with colons/slashes (#1414)

[JoeJoeflyn]

Summary of the problem

Project names containing colons followed by a letter (e.g. myproject:R) crash the Projects page — the card list fails to render and cards appear/disappear at random. Mentioned in #1414.

Root cause: js-from-routes' interpolateUrl does raw string replacement of :paramName in route templates. After substituting myproject:R into /my/projects/:project_name, the leftover :R matches its REQUIRED_PARAMETER = /:[^\W\d]+/g regex, so it throws TypeError: Missing URL Parameter :R. Because the cards render inside a WindowVirtualizer, one card's throw breaks the entire list.

Same family as #1442 (slash / in project name → 400 on archive).

Describe your changes

URL-encode the project name with encodeURIComponent() before passing it to js_from_routes' path helpers. The colon becomes %3A, which interpolateUrl no longer misreads as a route parameter. Rails decodes %3A back to : when matching the route, so the controller receives the original name and everything works — the card stays clickable, the detail page loads, archive works.

Three files changed (all frontend, one-line pattern each):

• ProjectCard.svelte — encode before show.path() and update.path(), wrapped in try/catch as defense-in-depth so any future edge case degrades to "no link" on one card instead of nuking the whole virtualizer
• Index.svelte — encode for archive/unarchive path
• ShareModal.svelte — encode for toggle_share path

No Ruby changes — Rails already decodes path params, so the controller receives the original name.

Screenshots / Media

Before: project named myproject:R → Projects page cards fail to render (crash in interpolateUrl).
After: same project → card renders normally, clickable, navigates to detail page at /my/projects/myproject%3AR, archive works.

Test plan

• Capybara system tests pass (test/system/projects_with_unsafe_names_test.rb — 4 tests, 43 assertions)
  • All unsafe name variants render as clickable cards (colon, slash, ?, #, %, unicode, normal)
  • No "broken name" badge for URL-unsafe chars
  • Each card's link href contains the URL-encoded name
  • Clicking colon-named project → detail page works (Projects list breaks with colon in project name #1414)
  • Clicking slash-named project → detail page works (Archiving a project with the name / returns a 400 error #1442)
  • Archiving slash-named project works (Archiving a project with the name / returns a 400 error #1442)
• bundle exec rubocop clean on changed files
• svelte-check — 0 errors in changed files
• No regressions in existing test suite

Related: #1414, #1442

screenrecording-2026-07-21_00-25-16.mp4

[greptile-apps]

Greptile Summary

This PR fixes project routes for names with URL-unsafe characters. The main changes are:

• Encodes project names before passing them to js_from_routes path helpers.
• Applies the route encoding to project cards, archive/unarchive actions, and share toggles.
• Adds system tests for colon, slash, delimiter, percent, unicode, and normal project names.

Confidence Score: 5/5

Safe to merge with minimal risk.

The change is narrow, keeps Rails/Inertia route-helper usage, and includes targeted tests for the affected unsafe-name flows.

No files require special attention.

T-Rex Logs

What T-Rex did

• Inspected the Rails blocker log to confirm the exact command, working directory, Ruby version, Bundler parse failure, and exit code 1.
• Reviewed the Playwright log to verify the before/after link encoding, non-zero click-target bounding boxes, absence of page errors, and exit code 0.
• Compared browser artifacts, including before/after PNGs and WebM videos, to validate that the unsafe project cards render as described and reflect the log findings.
• Recorded the differing exit codes from the logs to document the Rails block (exit 1) and the Playwright success (exit 0).
• Compiled the artifact set to enable reviewers to inspect runtime behavior, UI rendering, and link encoding without needing to parse raw logs.

_{Ran code and verified through T-Rex}

Important Files Changed

Filename	Overview
app/javascript/pages/Projects/Index.svelte	Encodes project keys before building archive/unarchive routes so unsafe path characters survive client route interpolation and Rails routing.
app/javascript/pages/Projects/components/ProjectCard.svelte	Encodes project keys for show/update route helpers and isolates route-helper failures to avoid crashing the virtualized project list.
app/javascript/pages/Projects/components/ShareModal.svelte	Encodes project names before building the share-toggle route, matching the updated route-helper usage elsewhere.
test/system/projects_with_unsafe_names_test.rb	Adds system coverage for unsafe project names rendering, navigation, encoded hrefs, and archiving slash-named projects.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
participant User
participant ProjectsUI as Projects Svelte UI
participant Routes as js_from_routes helper
participant Rails as Rails Projects routes

User->>ProjectsUI: Open card/archive/share action
ProjectsUI->>ProjectsUI: encodeURIComponent(projectName)
ProjectsUI->>Routes: Build path with encoded projectName
Routes-->>ProjectsUI: "Return /my/projects/<encoded-name>"
ProjectsUI->>Rails: Navigate or PATCH encoded path
Rails->>Rails: Decode path param
Rails-->>ProjectsUI: Render/update original project name

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
participant User
participant ProjectsUI as Projects Svelte UI
participant Routes as js_from_routes helper
participant Rails as Rails Projects routes

User->>ProjectsUI: Open card/archive/share action
ProjectsUI->>ProjectsUI: encodeURIComponent(projectName)
ProjectsUI->>Routes: Build path with encoded projectName
Routes-->>ProjectsUI: "Return /my/projects/<encoded-name>"
ProjectsUI->>Rails: Navigate or PATCH encoded path
Rails->>Rails: Decode path param
Rails-->>ProjectsUI: Render/update original project name

Loading

_{Reviews (1): Last reviewed commit: "Fix Projects page crash for project name..." | Re-trigger Greptile}