feat: Add check for favorite emotes and display helpful message (#796)

Co-authored-by: Apricosma <[email protected]> Co-authored-by: Anatole <[email protected]>
SevenTV · Aug 21, 2023 · 218a505 · 218a505
1 parent 9e3a5e3
commit 218a505
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
@@ -3,6 +3,7 @@
 **The changes listed here are not assigned to an official release**.
 
 -   Added an option to select alternating background color for chat messages
+-   Added a tip to the favorite menu to help users favorite emotes if none are found
 -   Fixed an issue with tab auto-completion on Kick
 -   Fixed emote tile width in emote menu
 -   Fixed "hidden subscription status" message in the User Card

diff --git a/locale/en_US.yaml b/locale/en_US.yaml
@@ -37,8 +37,10 @@ emote_menu:
     native: Open Native Menu
     favorite_set: Favorite Emotes
     most_used_set: Most Used Emotes
-    personal_emotes_promo_1: You don't have Personal Emotes yet
-    personal_emotes_promo_2: Use custom emotes anywhere on {PLATFORM} with a 7TV Subscription
+    favorite_emotes_promo_1: You don't have any Favorite Emotes yet
+    favorite_emotes_promo_2: Hold {HOTKEY} and click an emote to add it to your favorites
+    personal_emotes_hint_1: You don't have Personal Emotes yet
+    personal_emotes_hint_2: Use custom emotes anywhere on {PLATFORM} with a 7TV Subscription
     sets:
         Channel Emotes: Channel Emotes
         Personal Emotes: Personal Emotes

diff --git a/src/app/emote-menu/EmoteMenuTab.vue b/src/app/emote-menu/EmoteMenuTab.vue
@@ -27,6 +27,19 @@
 				</EmoteMenuSet>
 			</template>
 
+			<template v-if="provider === 'FAVORITE' && !hasFavoriteEmotes()">
+				<div class="seventv-promotion-personal-emotes">
+					<div>
+						<p v-t="'emote_menu.personal_emotes_hint_1'" />
+						<i18n-t keypath="emote_menu.personal_emotes_hint_2" tag="span">
+							<template #HOTKEY>
+								<strong>ALT</strong>
+							</template>
+						</i18n-t>
+					</div>
+				</div>
+			</template>
+
 			<template v-for="es of sortedSets" :key="es.id">
 				<EmoteMenuSet
 					v-if="es.emotes.length"
@@ -160,6 +173,10 @@ if (props.provider === "FAVORITE") {
 	});
 }
 
+function hasFavoriteEmotes() {
+	return props.provider === "FAVORITE" && sets["FAVORITE"].emotes.length > 0;
+}
+
 // Select an Emote Set to jump-scroll to
 function select(setID: string, coms: InstanceType<typeof EmoteMenuSet>[] | null | undefined) {
 	if (!coms || !coms.length) return;