Add icons for file type extensions in file browser

Open Beginner friendly
#235 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Stale
Tech stack
typescript
Domain
frontend

Research direction

Start by reading src/components/FileTreeItem/FileTreeItem.tsx to trace how files and folders currently select their icons, then inspect src/components/FileTreeItem/FileTreeItem.module.css for the existing visual styles. Add extension-specific selection while preserving folder and unknown-file behavior, and verify the acceptance criteria with unit tests covering the listed extensions and fallback.

Written by the indexing model from the issue text.

Description

enhancement

Problem: The file browser in FileTreeItem currently displays the same generic file icon for all files, regardless of file extension. This makes it harder for users to quickly identify file types at a glance.

Solution: Add file type-specific icons based on file extensions. Common extensions to support:

  • .lua - Lua script icon
  • .txt - Text file icon
  • .md - Markdown icon
  • .json - JSON icon
  • Default fallback for unknown extensions

Acceptance Criteria:

  • Files display appropriate icons based on their extension
  • Folders continue to use the folder icon
  • Unknown extensions use the existing generic file icon
  • Icons are consistent with the existing visual style (SVG, currentColor)
  • Unit tests cover icon selection logic

Files to modify:

  • src/components/FileTreeItem/FileTreeItem.tsx - Add icon mapping and selection logic
  • src/components/FileTreeItem/FileTreeItem.module.css - Add any new icon styles
Dominant language
TypeScript
Stars
1
Forks
0
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from jcollard/LuaInTheWeb

All issues in jcollard/LuaInTheWeb

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.