feat: add 'use star favorite icon' preference (#2067)

pages/favourites.vue

@@ -4,6 +4,7 @@ definePageMeta({
 })
 
 const { t } = useI18n()
+const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 
 useHydratedHead({
   title: () => t('nav.favourites'),
@@ -14,7 +15,7 @@ useHydratedHead({
   <MainContent>
     <template #title>
       <NuxtLink to="/favourites" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
-        <div i-ri:heart-3-line />
+        <div :class="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'" />
         <span>{{ t('nav.favourites') }}</span>
       </NuxtLink>
     </template>

pages/settings/preferences/index.vue

@@ -49,6 +49,12 @@ const userSettings = useUserSettings()
     >
       {{ $t('settings.preferences.enable_pinch_to_zoom') }}
     </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'useStarFavoriteIcon')"
+      @click="togglePreferences('useStarFavoriteIcon')"
+    >
+      {{ $t('settings.preferences.use_star_favorite_icon') }}
+    </SettingsToggleItem>
     <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
       <div i-ri-hearts-line />
       {{ $t('settings.preferences.wellbeing') }}