From b092441829c602e0bb4e1835a31c3b332c0d374b Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 26 Jun 2023 13:49:52 +0200
Subject: [PATCH 1/3] emote-menu(tweak): qol & shortcuts

---
 src/app/emote-menu/EmoteMenu.vue              | 58 ++++++++++---------
 src/app/emote-menu/EmoteMenuSet.vue           |  8 ++-
 src/app/emote-menu/EmoteMenuTab.vue           | 29 +---------
 .../modules/emote-menu/EmoteMenu.vue          | 10 ----
 4 files changed, 42 insertions(+), 63 deletions(-)

diff --git a/src/app/emote-menu/EmoteMenu.vue b/src/app/emote-menu/EmoteMenu.vue
index 5aa4554a5..ac3343e3e 100644
--- a/src/app/emote-menu/EmoteMenu.vue
+++ b/src/app/emote-menu/EmoteMenu.vue
@@ -10,7 +10,7 @@
 				<div class="seventv-emote-menu-providers">
 					<template v-for="(b, key) in visibleProviders">
 						<div
-							v-if="b"
+							v-if="b || key === activeProvider"
 							:key="key"
 							class="seventv-emote-menu-provider-icon"
 							:selected="key === activeProvider"
@@ -26,7 +26,12 @@
 					</template>
 				</div>
 				<div v-if="!isSearchInputEnabled" class="seventv-emote-menu-search">
-					<input ref="searchInputRef" v-model="ctx.filter" class="seventv-emote-menu-search-input" />
+					<input
+						ref="searchInputRef"
+						v-model="ctx.filter"
+						class="seventv-emote-menu-search-input"
+						autofocus
+					/>
 					<div class="search-icon">
 						<SearchIcon />
 					</div>
@@ -54,11 +59,10 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, watchEffect } from "vue";
-import { onClickOutside, onKeyStroke, useKeyModifier } from "@vueuse/core";
+import { reactive, ref, watchEffect } from "vue";
+import { onClickOutside, onKeyStroke, useEventListener, useKeyModifier } from "@vueuse/core";
 import { useStore } from "@/store/main";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
-import { getModuleRef } from "@/composable/useModule";
 import { useConfig } from "@/composable/useSettings";
 import SearchIcon from "@/assets/svg/icons/SearchIcon.vue";
 import StarIcon from "@/assets/svg/icons/StarIcon.vue";
@@ -105,28 +109,15 @@ const visibleProviders = reactive<Record<EmoteMenuTabName, boolean>>({
 	PLATFORM: true,
 	EMOJI: true,
 });
-
-const inputModule = getModuleRef<"TWITCH", "chat-input-controller">("chat-input-controller");
-
-onMounted(() => {
-	if (!inputModule.value?.instance) return;
-
-	/*
-	inputModule.value.instance.addButton(
-		"emote-menu",
-		EmoteMenuButton,
-		{
-			onClick: () => (ctx.open = !ctx.open),
-		},
-		1,
-	);*/
-});
-
 watchEffect(() => {
 	if (!containerRef.value) return;
 
 	containerRef.value.style.setProperty("--width", props.width ?? "unset");
 	containerRef.value.style.setProperty("--seventv-emote-menu-scale", props.scale ?? "3rem");
+
+	if (searchInputRef.value) {
+		searchInputRef.value.focus();
+	}
 });
 
 // Shortcut (ctrl+e)
@@ -134,10 +125,23 @@ const isCtrl = useKeyModifier("Control", { initial: false });
 onKeyStroke("e", (ev) => {
 	if (!isCtrl.value) return;
 
-	toggle();
+	ctx.open = !ctx.open;
 	ev.preventDefault();
 });
 
+// Up/Down Arrow iterates providers
+useEventListener("keydown", (ev) => {
+	if (!["ArrowUp", "ArrowDown"].includes(ev.key)) return;
+
+	const cur = Object.keys(visibleProviders).indexOf(activeProvider.value ?? "7TV");
+	const next = ev.key === "ArrowUp" ? cur + 1 : cur - 1;
+	const nextProvider = Object.keys(visibleProviders)[next];
+
+	if (nextProvider) {
+		activeProvider.value = nextProvider as EmoteMenuTabName;
+	}
+});
+
 // Toggle the menu's visibility
 function toggle() {
 	ctx.open = !ctx.open;
@@ -148,7 +152,9 @@ function toggle() {
 function onProviderVisibilityChange(provider: EmoteMenuTabName, visible: boolean) {
 	visibleProviders[provider] = visible;
 	if (!visible && provider === activeProvider.value) {
-		activeProvider.value = (Object.entries(visibleProviders).find(([, v]) => v)?.[0] ?? "7TV") as SevenTV.Provider;
+		activeProvider.value = (Object.entries(visibleProviders)
+			.slice(1)
+			.find(([, v]) => v)?.[0] ?? "7TV") as SevenTV.Provider;
 	}
 }
 
@@ -254,10 +260,10 @@ onClickOutside(containerRef, (ev) => {
 			padding-left: 3em;
 			color: currentcolor;
 			outline: none;
-			transition: outline 140ms;
+			transition: background-color 140ms;
 
 			&:focus {
-				outline: 1px solid var(--seventv-primary);
+				background-color: var(--seventv-background-shade-2);
 			}
 		}
 	}
diff --git a/src/app/emote-menu/EmoteMenuSet.vue b/src/app/emote-menu/EmoteMenuSet.vue
index 02667ce0f..7f8e6ef8d 100644
--- a/src/app/emote-menu/EmoteMenuSet.vue
+++ b/src/app/emote-menu/EmoteMenuSet.vue
@@ -1,5 +1,11 @@
 <template>
-	<div ref="containerEl" class="seventv-emote-set-container" :collapsed="collapsed" :ephemeral="ephemeral">
+	<div
+		v-if="ephemeral || emotes.length"
+		ref="containerEl"
+		class="seventv-emote-set-container"
+		:collapsed="collapsed"
+		:ephemeral="ephemeral"
+	>
 		<div class="seventv-set-header">
 			<div class="seventv-set-header-icon">
 				<img v-if="es.owner && es.owner.avatar_url" :src="es.owner.avatar_url" />
diff --git a/src/app/emote-menu/EmoteMenuTab.vue b/src/app/emote-menu/EmoteMenuTab.vue
index 0742c2c64..85176f4f4 100644
--- a/src/app/emote-menu/EmoteMenuTab.vue
+++ b/src/app/emote-menu/EmoteMenuTab.vue
@@ -113,7 +113,7 @@ const sets = emotes.byProvider(props.provider as SevenTV.Provider) ?? reactive({
 const store = useStore();
 const cosmetics = useCosmetics(store.identity?.id ?? "");
 const actor = useActor();
-const visibleSets = reactive<Set<SevenTV.EmoteSet>>(new Set());
+const visibleSets = reactive<Set<string>>(new Set());
 const sortedSets = ref([] as SevenTV.EmoteSet[]);
 const favorites = useConfig<Set<string>>("ui.emote_menu.favorites");
 // const usage = useConfig<Map<string, number>>("ui.emote_menu.usage");
@@ -139,9 +139,6 @@ const promotionPersonalSet: SevenTV.EmoteSet = {
 	emotes: [],
 };
 
-// "Most Used" is commented out pending refactor
-// Note the logic for favorites is also bad, though doesn't affect as many users
-
 function updateFavorites() {
 	if (!favorites.value) return [];
 
@@ -150,16 +147,6 @@ function updateFavorites() {
 		.filter((ae) => !!ae) as SevenTV.ActiveEmote[];
 }
 
-// function updateUsage() {
-// 	if (!shouldShowUsage.value) return [];
-//
-// 	return Array.from(usage.value.entries())
-// 		.sort((a, b) => b[1] - a[1])
-// 		.map((e) => emotes.find((ae) => ae.id === e[0]))
-// 		.filter((ae) => !!ae)
-// 		.slice(0, 50) as SevenTV.ActiveEmote[];
-// }
-
 if (props.provider === "FAVORITE") {
 	// create favorite set
 	const favSet = (sets["FAVORITE"] = reactive({
@@ -168,19 +155,9 @@ if (props.provider === "FAVORITE") {
 		emotes: updateFavorites(),
 	} as SevenTV.EmoteSet));
 
-	// const usageSet = (sets["USAGE"] = reactive({
-	// 	id: "USAGE",
-	// 	name: t("emote_menu.most_used_set"),
-	// 	emotes: updateUsage(),
-	// } as SevenTV.EmoteSet));
-
 	watch(favorites, () => {
 		favSet.emotes = updateFavorites();
 	});
-
-	// watch([usage, shouldShowUsage], () => {
-	// 	usageSet.emotes = updateUsage();
-	// });
 }
 
 // Select an Emote Set to jump-scroll to
@@ -218,9 +195,9 @@ function sortFn(a: SevenTV.EmoteSet, b: SevenTV.EmoteSet) {
 
 function updateVisibility(es: SevenTV.EmoteSet, state: boolean): void {
 	if (state) {
-		visibleSets.add(es);
+		visibleSets.add(es.id);
 	} else {
-		visibleSets.delete(es);
+		visibleSets.delete(es.id);
 	}
 
 	emit("provider-visible", !!visibleSets.size);
diff --git a/src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue b/src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue
index e903eb5c7..2d61b226d 100644
--- a/src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue
+++ b/src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue
@@ -23,7 +23,6 @@
 
 <script setup lang="ts">
 import { nextTick, onMounted, onUnmounted, ref, watch, watchEffect } from "vue";
-import { onKeyStroke, useKeyModifier } from "@vueuse/core";
 import { log } from "@/common/Logger";
 import { HookedInstance } from "@/common/ReactHooks";
 import { defineFunctionHook, definePropertyHook, unsetPropertyHook } from "@/common/Reflection";
@@ -76,15 +75,6 @@ onMounted(() => {
 	);
 });
 
-// Shortcut (ctrl+e)
-const isCtrl = useKeyModifier("Control", { initial: false });
-onKeyStroke("e", (ev) => {
-	if (!isCtrl.value) return;
-
-	toggle();
-	ev.preventDefault();
-});
-
 // Toggle the menu's visibility
 function toggle(native?: boolean) {
 	const t = props.instance.component;

From ac8ee69bb56fefe5171a0ccedc78b2ae5dd12a85 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 26 Jun 2023 13:53:53 +0200
Subject: [PATCH 2/3] changelog

---
 CHANGELOG-nightly.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
index 811e32de4..16e61ae83 100644
--- a/CHANGELOG-nightly.md
+++ b/CHANGELOG-nightly.md
@@ -2,6 +2,10 @@
 
 **The changes listed here are not assigned to an official release**.
 
+- Added a shortcut (Ctrl+E) to open the Emote Menu
+- Added shortcuts (Up/Down Arrows) to switch between providers in the Emote Menu
+- The input box in the Emote Menu is now focused automatically upon opening
+- Search in the Emote Menu will now automatically open the nearest tab where matches are found
 - Fixed a user card crash
 - Fixed an issue with the EventAPI connection closing on the first initialization
 - Fixed an issue that prevented new chatters from appearing in autocompletion

From 4fa760e8e5cc28ca049306b406c082406812d61d Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 26 Jun 2023 14:07:33 +0200
Subject: [PATCH 3/3] semantics

---
 src/app/emote-menu/EmoteMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/emote-menu/EmoteMenu.vue b/src/app/emote-menu/EmoteMenu.vue
index ac3343e3e..5865d8148 100644
--- a/src/app/emote-menu/EmoteMenu.vue
+++ b/src/app/emote-menu/EmoteMenu.vue
@@ -125,7 +125,7 @@ const isCtrl = useKeyModifier("Control", { initial: false });
 onKeyStroke("e", (ev) => {
 	if (!isCtrl.value) return;
 
-	ctx.open = !ctx.open;
+	toggle();
 	ev.preventDefault();
 });