Feat/sidebar-svelte-favicon-support

[stickerdaniel]

Feat: Svelte favicon support

1. Adds support for Svelte favicons, with svelte folder fallback
2. Fixes layout jump: Keep a fixed-size icon slot in the project list until the favicon request finishes so project names no longer jump when the server-backed icon loads.

Solves #516

Implementation Prompt

Implement Svelte/SvelteKit sidebar project favicon support in t3code by extending /api/project-favicon server--side. Resolve icons in this order: real favicon files, parsed icon links (including src/app.html and %sveltekit.assets%/..• → static/... ), then Svelte fallback, then generic fallback. Detect Svelte only from strong root markers in projectIconFallback.ts: svelte.config.*, •svelte-kit/, or package. json deps containing svelte / @sveltejs/kit .

Serve fallback icons from checked-in asset files:

• apps/server/src/assets/project-favicon-default.svg
• apps/server/src/assets/project-favicon-svelte.svg

Add a helper to load those SVGs and update the server build script so they are copied into dist/assets

Update tests in apps/server/src/projectFaviconRoute.test.ts to cover real favicon resolution, SvelteKit %sveltekit. assets% resolution, Svelte fallback detection, precedence rules, and generic fallback, asserting against
asset-backed SVG constants.

Also fix sidebar layout shift in apps/web/src/components/Sidebar.tsx: reserve a fixed icon slot, show nothing while
loading, pop the favicon in immediately on success, and keep showing the folder icon only on error. Validate with bun lint and bun typecheck

Before	After

Note

[!NOTE]

Add Svelte-specific favicon fallback and SvelteKit asset resolution to project favicon route

• Adds projectIconFallback.ts to detect Svelte projects by checking for svelte.config.*, .svelte-kit/, src/app.html, or package.json dependencies; when no favicon is found, the route now serves a Svelte-branded SVG for Svelte projects.
• Extends projectFaviconRoute.ts to scan src/app.html for icon declarations and resolve %sveltekit.assets%/-prefixed hrefs by searching under static/ and the project root.
• Adds default and Svelte favicon SVG assets under src/assets/ and reads them at module load time in projectFaviconAssets.ts; build and publish commands in cli.ts now copy these assets to dist/assets/ and assert their presence before publishing.
• Fixes Sidebar.ProjectFavicon to reset loading state when cwd changes and show a folder icon on image load error.

^{Macroscope summarized 90e3bc6.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 0ac9b60c-21cb-4ebd-a133-ae106891d921

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[Copilot]

Pull request overview

Adds Svelte/SvelteKit-aware project favicon handling end-to-end (server detection + assets) and updates the web sidebar favicon rendering to avoid layout shift while favicons load.

Changes:

• Sidebar favicon slot now stays fixed-size and only shows the image once loaded (with an error fallback icon).
• Server favicon route can resolve SvelteKit %sveltekit.assets%/… links and returns a Svelte-specific SVG fallback when no favicon is found.
• Introduces server-side SVG asset loading/copying into dist/assets and expands CLI publish/build checks accordingly.

Reviewed changes

Copilot reviewed 6 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
apps/web/src/components/Sidebar.tsx	Keeps a fixed-size favicon slot and overlays fallback/icon states.
apps/server/src/projectIconFallback.ts	Detects whether a project is Svelte/SvelteKit to choose an icon fallback.
apps/server/src/projectFaviconRoute.ts	Adds SvelteKit asset placeholder resolution and serves detected fallback SVGs.
apps/server/src/projectFaviconRoute.test.ts	Adds coverage for SvelteKit placeholder resolution and Svelte fallback selection.
apps/server/src/projectFaviconAssets.ts	Loads default + Svelte fallback SVG assets from assets/ at runtime.
apps/server/src/assets/project-favicons.af	Adds a large design/binary asset file to the repo.
apps/server/src/assets/project-favicon-svelte.svg	Adds the Svelte fallback SVG asset.
apps/server/src/assets/project-favicon-default.svg	Adds the default fallback SVG asset.
apps/server/scripts/cli.ts	Copies favicon SVG assets into dist/assets and verifies them during publish.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

readFileSync(...) at module import time will throw and crash the server process if the asset files are missing in the runtime filesystem (e.g., a build/publish pipeline forgets to copy dist/assets). Consider wrapping reads in a try/catch to throw a clearer error (including the expected path) or falling back to an inlined SVG string so the server can still boot.

[stickerdaniel]

Fair, but we have a fallback on error

[stickerdaniel]

#516

[maria-rcks]

a bit out of scope, sorry