fix(mobile): No project shows its dashed chat icon instead of NP

[GA16-24]

Problem

Fixes #16346.

On mobile, the "No project" folder shows the initials "NP" in a gray tile. Desktop and web show a gray dashed chat bubble. The server assigns this folder the Lucide icon message-square-dashed. Mobile does not bundle Lucide, so resolveProjectIconGlyph draws the project's initials for every Lucide icon.

Change

• apps/mobile/src/lib/projectIcon.ts carries the stroke paths for message-square-dashed, copied from lucide-react. A Lucide icon with paths resolves to a lucide glyph. Lucide icons without paths still fall back to initials, as before.
• ProjectFavicon.tsx draws those paths with react-native-svg, using Lucide's 24×24 viewBox and stroke settings, so the shape matches desktop on iOS and Android. The stroke takes the icon's color through a new accent-* class per icon color, so a user who recolors "No project" sees that color on mobile too.

Neither SF Symbols nor Tabler has a dashed chat bubble. An earlier commit used square.dashed, which lost the bubble's tail, so this draws the real shape instead.

Scope and approval

This is a small fix for an obvious bug, reported in #16346. It changes one fallback in mobile's icon resolver and touches no other client or contract. Icons that users pick keep their current behavior.

Verification

• apps/mobile/src/lib/projectIcon.test.ts covers the "No project" icon and the initials fallback for other Lucide icons. The first commit adds the test alone, and it fails on main with expected { kind: 'monogram', text: 'NP', …(1) }.
• tsc --noEmit in apps/mobile is clean. vp fmt and vp lint on the changed files are clean, apart from an existing set-state-in-effect warning in ProjectFavicon.tsx.
• Ran the dev client on an iPhone 17 simulator (iOS 26.5) against a dev server seeded with real data that includes "No project". On main the row shows "NP". With this branch it shows the dashed chat bubble with its tail, matching desktop, in light and dark mode.

Before/after simulator screenshots will be attached in a comment. The CLI cannot upload images to this repository.

Not checked: Android. It renders through the same react-native-svg path, but I did not run an emulator.

Investigated and written by Claude Opus 5.5 in Claude Code, running inside T3 Code.

🤖 Generated with Claude Code

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[macroscopeapp]

Approvability

Verdict: Approved at 63b8eb1

Macroscope's review found this PR approvable — This is a narrow mobile rendering fix for the server-assigned No project icon, with native iOS/Android mappings and tests covering both the new case and existing fallbacks. It does not alter contracts, product configuration, or unrelated runtime paths.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: d76575ce-c71b-440e-be00-55d75f498e9e

📥 Commits

Reviewing files that changed from the base of the PR and between 63b8eb1 and 85532d3.

📒 Files selected for processing (3)

• apps/mobile/src/components/ProjectFavicon.tsx
• apps/mobile/src/lib/projectIcon.test.ts
• apps/mobile/src/lib/projectIcon.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The mobile project icon resolver now returns local paths for the supported message-square-dashed Lucide icon. The favicon component renders those paths as a tinted SVG. Unsupported Lucide names continue to use the project monogram.

Changes

Mobile project icons

Layer / File(s)	Summary
Resolve supported Lucide icons apps/mobile/src/lib/projectIcon.ts, apps/mobile/src/lib/projectIcon.test.ts	The resolver returns local paths and the configured color for message-square-dashed. Unsupported Lucide names resolve to the project monogram. Color entries include tint classes, and tests cover both outcomes.
Render Lucide paths as tinted SVGs apps/mobile/src/components/ProjectFavicon.tsx	The favicon component draws resolved Lucide paths in a 24-by-24 SVG with no fill, a current-color stroke, and rounded caps and joins.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to 85532

The resolver tests cover the supported icon and initials fallback, and the SVG tint contract is supported on both platforms. Android has not been simulator-tested, but no concrete issue currently prevents merging.

Security Architecture Review

Security architecture risk: 🔵 Low · up to 85532

The change keeps SVG geometry local and does not introduce new privileges or arbitrary SVG content. However, someone able to modify project metadata can select a valid icon name that repeatedly breaks mobile icon rendering. Existing screen error boundaries limit some propagation, but complete containment was not established.

Retained concerns

• Medium · security · inferred: The new icon-name lookup does not distinguish bundled entries from inherited object properties. The schema-valid Lucide name constructor resolves to an inherited function, is returned as a lucide glyph, and causes glyph.paths.map to throw. Persisting this metadata can repeatedly fail mobile views displaying the project; the base resolver instead displayed a monogram. This requires project-metadata control. Existing screen boundaries provide some containment, but caller-wide containment and the exact mutation authority remain unverified.

Security review details

Security Blast Radius

• inferred — The supported exposure is mobile rendering of a project whose metadata an authenticated writer can modify. A stored triggering value can reach multiple mobile consumers of that project. Unaithenticated reachability, cross-environment exposure, and cross-tenant authority were not established; whole-application failure is not claimed.

Security Findings and Attack Paths

• inferred — A metadata writer supplies a Lucide override named constructor. Contract decoding preserves the valid name, the new lookup treats an inherited function as local paths, and the renderer throws when mapping it. The PR introduces this exception path; the base monogram behavior did not perform the lookup.

Trust Boundaries and Controls

• observed — The intended Lucide rendering path uses bundled geometry and a fixed tint table. ProjectIconOverride carries a name and color, not SVG markup or arbitrary path strings. These controls constrain content entering the native renderer, but the prototype-sensitive lookup does not reliably enforce selection of a bundled entry.

Resilience and Maintainability Implications

• inferred — Rendering retry alone does not repair a stored triggering name, so the same input can reproduce the failure. Clearing or replacing the icon through the existing mutation contract offers a metadata recovery path. Screen boundaries mitigate propagation, but containment across all icon callers remains unresolved.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Issue #16346 requires the mobile “No project” entry to show the dashed chat-bubble icon rather than “NP.” projectIcon.ts maps message-square-dashed to Lucide paths and preserves the icon color. `P…
Out of Scope Changes check	✅ Passed	All changed files support issue #16346. The SVG rendering, tint classes, resolver mapping, and fallback tests implement or protect the requested mobile icon behavior. The remaining Lucide icons still …
Title check	✅ Passed	The title clearly identifies the mobile bug fix: the “No project” folder displays its dashed chat icon instead of “NP.”
Description check	✅ Passed	The description covers the problem, change, scope and approval rationale, and focused verification. It also states that Android was not tested. Before/after screenshots are promised in a comment but a…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

_{Comment @coderabbitai help to get the list of available commands.}