feat(desktop): improve file tree icons with VS Code style icons

[Kitenite]

Summary

• Replace basic Lucide line icons with VS Code icons (react-icons/vsc) for a more polished look
• Use branded Simple Icons for language-specific files (TypeScript, JavaScript, React, Python, etc.)
• Add more folder icon mappings for common directories (app, apps, packages, config, scripts, etc.)
• Add support for additional config files (biome.json, turbo.json, .prettierrc, .eslintrc variants)

Test plan

• Open the file tree sidebar in a workspace
• Verify folder icons look better (filled VS Code style instead of thin lines)
• Verify file icons are recognizable for common file types (.ts, .tsx, .js, .json, .md, etc.)
• Check that special folders (src, components, node_modules, .git) have distinct colors

Summary by CodeRabbit

• Style
  • Switched the file view to a new icon set and refreshed appearances for files, folders and folder states (open/closed/default).
  • Updated icons and colors across many languages, frameworks, config and build files, documentation, media types, archives and tooling.
  • Added and standardized language- and filename-specific icons (including language aliases) for clearer visual differentiation.

[coderabbitai]

📝 Walkthrough

Walkthrough

Replaced Lucide icon imports with VS Code (react-icons/vsc) icons in the file-icons utility, updating extension, filename, and folder icon mappings and associated colors; preserved exported names and function signatures.

Changes

Cohort / File(s)	Summary
Icon Library Migration apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/FilesView/utils/file-icons.ts	Swapped react-icons/lu references for react-icons/vsc; added many VSC icon entries (files, folders, languages, media, archives, config/tool filenames); adjusted color mappings; changed default folder/file icons to VscFolder/VscFolderOpened and VscFile; no public API/signature changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• refactor(desktop): replace lucide-react with react-icons/lu #314 — Similar icon-library migration replacing lucide-react with react-icons variants (related by pattern and intent).

Poem

🐰 I hopped through maps of names and hues,

Swapped Lucide for VSC cues,
Folders opened, files aligned,
Colors tweaked, icons redesigned,
A tiny hop, a brighter view.

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The pull request description includes a Summary and Test plan, but is missing required sections from the template: Related Issues, Type of Change, Testing, Screenshots, and Additional Notes.	Add the missing template sections: specify Related Issues (if any), select Type of Change (appears to be 'New feature'), provide formal Testing section, add Screenshots if applicable, and include any Additional Notes.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(desktop): improve file tree icons with VS Code style icons' accurately summarizes the main change: replacing Lucide icons with VS Code style icons in the file tree UI.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch kitenite/filetree-icons-ugly

---

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.}