feat: add 'use star favorite icon' preference

[shuuji3]

resolves #2058

This will add an additional option to change the favorite icon.

This will change the color of the icon from rose to yellow but this causes the same color usage as the bookmark icon.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	f4d030d
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/6455b6823e32be0007d8bc66

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	f4d030d
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/6455b6823130110008491311
😎 Deploy Preview	https://deploy-preview-2067--elk-zone.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Shinigami92]

This might bite with favorising tags:

[shuuji3]

That's true. I think we can distinguish the behavior with the help of tooltips and the user will be intentional to enable this feature. Similarly, we already have the same heart icons between the favorite and right-bottom donations but there is no confusion for them.

[patak-dev]

Nice! Two details, we could use red for bookmark so it isnt yellow like the star. So swap the colors if the new option is enabled.

And we should add a new env variable to let people hosting the app which should be the default. At least there is one server that would like star by default. We could do this in another PR thought

[shuuji3]

Nice! Two details, we could use red for bookmark so it isnt yellow like the star. So swap the colors if the new option is enabled.

That's a good idea! 🙂 I'll update the PR soon.

As for the environment variable, maybe I can work on that. But I'm not familiar with those settings yet, so I'll leave that to another PR.

[shuuji3]

Updated the bookmark icon color.

[Shinigami92]

If getPreferences(userSettings, 'useStarFavoriteIcon') is used multiple times in a component, should it be extracted into a computed to safe performance?

[patak-dev]

I don't think it will affect performance, but I agree it is better to extract it 👍🏼

[shuuji3]

Thanks, I tried the usePreferences() to get computed for useStarFavoriteIcon. This also could simplify some templates.

[Shinigami92]

You should try to always have the classes as fully written out and not dynamically calculated and concatinated because this results in issues

try something like

useStarFavoriteIcon
  ? status.favourited ? 'i-ri:star-fill'    : 'i-ri:star-line'
  : status.favourited ? 'i-ri:heart-3-fill' : 'i-ri:heart-3-line'

this also applies to lines below

[shuuji3]

OK, this was fixed by a new commit. 👍🏻

[Shinigami92]

Another one should also approve 🙂

[patak-dev]

Awesome 🌟