Adding unique file type icons for different file types

[mhsh312]

Increasing Access

Adding file type icons makes it quicker to spot files of a certain type. It would makes the UI more aesthetically pleasing.

Feature request details

Right now, the p5 web editor shows a generic file icon for all types of files.

I am proposing that we add different icons for different file types supported by the editor.

Example:

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[mhsh312]

A good way to do this would be to create a React component and pass the file type as a prop to said component. That way it can work with future supported file types like typescript as well.
I would be down to work on this feature.

[lindapaiste]

I'm glad that you've opened this for discussion because this is definitely something that I would like to implement! We need to decide what type of icons we would like to use. You can check out a lot of options on the React Icons website.

Something like this BsFileType set is much more subtle than your example (from vscode?). Is that a good thing? Or do we prefer something that's very obvious?

[mhsh312]

You're right. The VS Code icon pack was just for an example. I don't think it would suit the minimal UI of p5 editor.

And yes React Icons would be good but I think the BSfiletype icons are a little too subtle to the point here they are hard to distinguish. I think the Aioutline icons would look better.
You think I should make a PR draft?

[lindapaiste]

You're right. The VS Code icon pack was just for an example. I don't think it would suit the minimal UI of p5 editor.

And yes React Icons would be good but I think the BSfiletype icons are a little too subtle to the point here they are hard to distinguish. I think the Aioutline icons would look better. You think I should make a PR draft?

If you want to start working on the code that would be fine. We're probably going to spend some time debating icons, but that will have little impact on code itself. You can look at #2232 as an example of something similar.

[lindapaiste]

Here's another source for ideas (not sure of the license on these) https://jetbrains.design/intellij/resources/icons_list/

[mhsh312]

On it.

[yashpandey06]

@mhsh312 Are you working on this issue ??

[mhsh312]

@mhsh312 Are you working on this issue ??

Already posted a PR that closes this issue. Just need further discussion with the maintainers about the icon types.

[yashpandey06]

@mhsh312 have you posted the pr for this particular issue... i can't see one

[mhsh312]

@mhsh312 have you posted the pr for this particular issue... i can't see one

Click on the blue text.

[yashpandey06]

@mhsh312 got it ..