From 582a9847a15ec4331522cf33ba9e951547a04fe7 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Sun, 7 May 2023 00:52:33 +0900
Subject: [PATCH] feat: add 'use star favorite icon' preference (#2067)

---
 components/account/AccountMoreButton.vue |  3 ++-
 components/nav/NavSide.vue               |  3 ++-
 components/status/StatusActions.vue      | 13 +++++++++----
 components/status/StatusActionsMore.vue  | 15 ++++++++++++---
 composables/settings/definition.ts       |  2 ++
 locales/en.json                          |  1 +
 locales/ja-JP.json                       |  1 +
 pages/favourites.vue                     |  3 ++-
 pages/settings/preferences/index.vue     |  6 ++++++
 9 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
index 47ddeabc..3dd5252b 100644
--- a/components/account/AccountMoreButton.vue
+++ b/components/account/AccountMoreButton.vue
@@ -16,6 +16,7 @@ const isSelf = $(useSelfAccount(() => account))
 
 const { t } = useI18n()
 const { client } = $(useMasto())
+const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 
 async function toggleMute() {
   if (!relationship!.muting && await openConfirmDialog({
@@ -198,7 +199,7 @@ async function removeUserNote() {
             <CommonDropdownItem :text="$t('account.pinned')" icon="i-ri:pushpin-line" :command="command" />
           </NuxtLink>
           <NuxtLink to="/favourites">
-            <CommonDropdownItem :text="$t('account.favourites')" icon="i-ri:heart-3-line" :command="command" />
+            <CommonDropdownItem :text="$t('account.favourites')" :icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'" :command="command" />
           </NuxtLink>
           <NuxtLink to="/mutes">
             <CommonDropdownItem :text="$t('account.muted_users')" icon="i-ri:volume-mute-line" :command="command" />
diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index 81acd580..91ac359d 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -3,6 +3,7 @@ const { command } = defineProps<{
   command?: boolean
 }>()
 const { notifications } = useNotifications()
+const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 </script>
 
 <template>
@@ -22,7 +23,7 @@ const { notifications } = useNotifications()
       </template>
     </NavSideItem>
     <NavSideItem :text="$t('nav.conversations')" to="/conversations" icon="i-ri:at-line" user-only :command="command" />
-    <NavSideItem :text="$t('nav.favourites')" to="/favourites" icon="i-ri:heart-3-line" user-only :command="command" />
+    <NavSideItem :text="$t('nav.favourites')" to="/favourites" :icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'" user-only :command="command" />
     <NavSideItem :text="$t('nav.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line" user-only :command="command" />
     <NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />
 
diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
index 15f6ee71..eb75e707 100644
--- a/components/status/StatusActions.vue
+++ b/components/status/StatusActions.vue
@@ -12,6 +12,7 @@ const focusEditor = inject<typeof noop>('focus-editor', noop)
 const { details, command } = $(props)
 
 const userSettings = useUserSettings()
+const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 
 const {
   status,
@@ -77,9 +78,11 @@ function reply() {
       <StatusActionButton
         :content="$t('action.favourite')"
         :text="!getPreferences(userSettings, 'hideFavoriteCount') && status.favouritesCount ? status.favouritesCount : ''"
-        color="text-rose" hover="text-rose" elk-group-hover="bg-rose/10"
-        icon="i-ri:heart-3-line"
-        active-icon="i-ri:heart-3-fill"
+        :color="useStarFavoriteIcon ? 'text-yellow' : 'text-rose'"
+        :hover="useStarFavoriteIcon ? 'text-yellow' : 'text-rose'"
+        :elk-group-hover="useStarFavoriteIcon ? 'bg-yellow/10' : 'bg-rose/10'"
+        :icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'"
+        :active-icon="useStarFavoriteIcon ? 'i-ri:star-fill' : 'i-ri:heart-3-fill'"
         :active="!!status.favourited"
         :disabled="isLoading.favourited"
         :command="command"
@@ -97,7 +100,9 @@ function reply() {
     <div flex-none>
       <StatusActionButton
         :content="$t('action.bookmark')"
-        color="text-yellow" hover="text-yellow" elk-group-hover="bg-yellow/10"
+        :color="useStarFavoriteIcon ? 'text-rose' : 'text-yellow'"
+        :hover="useStarFavoriteIcon ? 'text-rose' : 'text-yellow'"
+        :elk-group-hover="useStarFavoriteIcon ? 'bg-rose/10' : 'bg-yellow/10' "
         icon="i-ri:bookmark-line"
         active-icon="i-ri:bookmark-fill"
         :active="!!status.bookmarked"
diff --git a/components/status/StatusActionsMore.vue b/components/status/StatusActionsMore.vue
index aafc77c3..ef7ebb2f 100644
--- a/components/status/StatusActionsMore.vue
+++ b/components/status/StatusActionsMore.vue
@@ -28,6 +28,7 @@ const router = useRouter()
 const route = useRoute()
 const { t } = useI18n()
 const userSettings = useUserSettings()
+const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 
 const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id)
 
@@ -149,8 +150,13 @@ function showFavoritedAndBoostedBy() {
 
           <CommonDropdownItem
             :text="status.favourited ? $t('action.favourited') : $t('action.favourite')"
-            :icon="status.favourited ? 'i-ri:heart-3-fill' : 'i-ri:heart-3-line'"
-            :class="status.favourited ? 'text-rose' : ''"
+            :icon="useStarFavoriteIcon
+              ? status.favourited ? 'i-ri:star-fill' : 'i-ri:star-line'
+              : status.favourited ? 'i-ri:heart-3-fill' : 'i-ri:heart-3-line'"
+            :class="status.favourited
+              ? useStarFavoriteIcon ? 'text-yellow' : 'text-rose'
+              : ''
+            "
             :command="command"
             :disabled="isLoading.favourited"
             @click="toggleFavourite()"
@@ -159,7 +165,10 @@ function showFavoritedAndBoostedBy() {
           <CommonDropdownItem
             :text="status.bookmarked ? $t('action.bookmarked') : $t('action.bookmark')"
             :icon="status.bookmarked ? 'i-ri:bookmark-fill' : 'i-ri:bookmark-line'"
-            :class="status.bookmarked ? 'text-yellow' : ''"
+            :class="status.bookmarked
+              ? useStarFavoriteIcon ? 'text-rose' : 'text-yellow'
+              : ''
+            "
             :command="command"
             :disabled="isLoading.bookmarked"
             @click="toggleBookmark()"
diff --git a/composables/settings/definition.ts b/composables/settings/definition.ts
index fa1485ba..9f47e14d 100644
--- a/composables/settings/definition.ts
+++ b/composables/settings/definition.ts
@@ -21,6 +21,7 @@ export interface PreferencesSettings {
   enableAutoplay: boolean
   enableDataSaving: boolean
   enablePinchToZoom: boolean
+  useStarFavoriteIcon: boolean
   zenMode: boolean
   experimentalVirtualScroller: boolean
   experimentalGitHubCards: boolean
@@ -72,6 +73,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   enableAutoplay: true,
   enableDataSaving: false,
   enablePinchToZoom: false,
+  useStarFavoriteIcon: false,
   zenMode: false,
   experimentalVirtualScroller: true,
   experimentalGitHubCards: true,
diff --git a/locales/en.json b/locales/en.json
index 6cd9bfdf..a2133583 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -454,6 +454,7 @@
       "hide_username_emojis_description": "Hides emojis from usernames in timelines. Emojis will still be visible in their profiles.",
       "label": "Preferences",
       "title": "Experimental Features",
+      "use_star_favorite_icon": "Use star favorite icon",
       "user_picker": "User Picker",
       "virtual_scroll": "Virtual Scrolling",
       "wellbeing": "Wellbeing",
diff --git a/locales/ja-JP.json b/locales/ja-JP.json
index c86f76a6..a424259a 100644
--- a/locales/ja-JP.json
+++ b/locales/ja-JP.json
@@ -454,6 +454,7 @@
       "hide_username_emojis_description": "タイムライン上でユーザー名に含まれる絵文字を隠します。プロフィールでは絵文字は引き続き表示されます。",
       "label": "環境設定",
       "title": "実験的機能",
+      "use_star_favorite_icon": "星のお気に入りアイコンを使用する",
       "user_picker": "ユーザーピッカー",
       "virtual_scroll": "仮想スクロール",
       "wellbeing": "ウェルビーイング",
diff --git a/pages/favourites.vue b/pages/favourites.vue
index e4458fbd..9882be35 100644
--- a/pages/favourites.vue
+++ b/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>
diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
index 0951b755..c79335b0 100644
--- a/pages/settings/preferences/index.vue
+++ b/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') }}