suchnsuch / Tangent

The publicly-available modules of the Tangent project.
141 stars 8 forks source link

Support custom note icons. #48

Open taylorhadden opened 7 months ago

taylorhadden commented 7 months ago

Let users customize the icon shown next to the note in the title, sidebar, map, and search. This is a popular feature in systems like Notion.

Originally requested in Discord.

I see two obvious options for implementation.

First-Character Emoji Icons

The idea here is that if a note is called "🍎 My Favorite Apples", that initial emoji character is promoted to the icon for the note. This is already done for creation rules: there is precedent, and there is already code to support it.

The chief upside I see is that it is very likely that some users are already doing this in note titles.

There are a few downsides:

  1. Note titles now have emoji in them. That means that they live in all links and in the filesystem. I'm not a huge fan of this.
  2. Users are limited to emoji characters and to how those characters look on a system (which can vary).

Icons Defined in Front Matter

In this implementation, a user could define a front-matter property to set the icon.

e.g. Emoji icons:

icon: 🍎

or a relative filepath:

icon: ./my_custom_icon.svg

or a wiki-linked file:

icon: [[My Cool Icon.png]]

The key advantage here is flexibility. A user can set whatever icon they like. They are not limited to Emoji characters, but they can use them. They could even use web links!

A potential disadvantage is one of accessibility. A front-matter property is somewhat more complex than just sticking an emoji at the front of the filename.

Another disadvantage is one of aesthetics. A user who wants to customize the icon of their notes may be turned off by needing to work with the relatively ugly front matter syntax.


Between the two of these, I lean towards the latter, though they aren't mutually exclusive. I would love other folks' thoughts.