From ecc283ae46c9dcd65999ba1953ab8a93e52c7d85 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Sun, 28 May 2023 17:37:10 +0200
Subject: [PATCH 01/26] site/kick.com: authentication

---
 .env.dev                                      |   1 +
 .env.production                               |   3 +-
 locale/en_US.yaml                             |   6 +
 package.json                                  |  30 +-
 src/composable/useCookies.ts                  |  26 ++
 src/composable/useTooltip.ts                  |  10 +-
 src/directive/TooltipDirective.ts             |   5 +-
 src/site/kick.com/KickSite.vue                |  12 +-
 src/site/kick.com/composable/useApp.ts        |  15 +
 src/site/kick.com/composable/usePinia.ts      |  10 +
 src/site/kick.com/composable/useRouter.ts     |  29 ++
 src/site/kick.com/modules/auth/AuthButton.vue | 271 +++++++++++++
 src/site/kick.com/modules/auth/AuthModule.vue |  35 ++
 .../kick.com/modules/chat/ChatController.vue  |  46 +--
 src/site/kick.com/modules/chat/ChatModule.vue |  39 +-
 .../kick.com/modules/chat/ChatObserver.vue    |  22 +-
 src/types/app.d.ts                            |   2 +
 src/types/kick.module.d.ts                    |   2 +
 yarn.lock                                     | 363 +++++++++++++-----
 19 files changed, 758 insertions(+), 169 deletions(-)
 create mode 100644 src/composable/useCookies.ts
 create mode 100644 src/site/kick.com/composable/useApp.ts
 create mode 100644 src/site/kick.com/composable/usePinia.ts
 create mode 100644 src/site/kick.com/composable/useRouter.ts
 create mode 100644 src/site/kick.com/modules/auth/AuthButton.vue
 create mode 100644 src/site/kick.com/modules/auth/AuthModule.vue

diff --git a/.env.dev b/.env.dev
index 6980f8260..638aa2acb 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,4 +1,5 @@
 NODE_ENV=development
+VITE_APP_SITE="http://localhost:4200"
 VITE_APP_API="http://localhost:3100/v3"
 VITE_APP_API_GQL="http://localhost:3000/v3/gql"
 VITE_APP_API_REST_OLD="http://localhost:3100/v2"
diff --git a/.env.production b/.env.production
index 2091048ee..a26a5175d 100644
--- a/.env.production
+++ b/.env.production
@@ -1,7 +1,8 @@
 NODE_ENV=production
+VITE_APP_SITE="https://7tv.app"
 VITE_APP_API="https://7tv.io/v3"
 VITE_APP_API_GQL="https://7tv.io/v3/gql"
 VITE_APP_API_REST_OLD="https://7tv.io/v2"
 VITE_APP_API_EVENTS="wss://events.7tv.io/v3"
 VITE_APP_API_EGVAULT="https://egvault.7tv.io/v1"
-VITE_APP_HOST="https://extension.7tv.gg"
+VITE_APP_HOST="http://localhost:8080"
diff --git a/locale/en_US.yaml b/locale/en_US.yaml
index ddab1817f..0db0762f1 100644
--- a/locale/en_US.yaml
+++ b/locale/en_US.yaml
@@ -141,3 +141,9 @@ onboarding:
     button_done: Done
     button_join: Join
     button_review: Review
+
+site:
+    kick:
+        connect_button_channel: Connect {CHANNEL}
+        connect_button_site: Connect 7TV...
+        connect_popup_confidence: Are you sure you'd like to link your current kick.com account ({ACTOR}) with 7TV?
diff --git a/package.json b/package.json
index 9d52b84e7..63347fcfb 100644
--- a/package.json
+++ b/package.json
@@ -29,26 +29,26 @@
 		"script:compile-emoji": "tsc -p script/script.tsconfig.json --outDir dist/ && node dist/compile-emojis.js"
 	},
 	"dependencies": {
-		"vue": "^3.3.2"
+		"vue": "^3.3.4"
 	},
 	"devDependencies": {
 		"@apollo/client": "^3.7.14",
 		"@floating-ui/dom": "^1.2.8",
-		"@intlify/unplugin-vue-i18n": "^0.10.0",
+		"@intlify/unplugin-vue-i18n": "^0.11.0",
 		"@trivago/prettier-plugin-sort-imports": "^4.1.1",
-		"@types/chrome": "^0.0.236",
+		"@types/chrome": "^0.0.237",
 		"@types/dompurify": "^3.0.2",
 		"@types/fs-extra": "^11.0.1",
 		"@types/marked": "^5.0.0",
-		"@types/node": "^20.2.1",
+		"@types/node": "^20.2.5",
 		"@types/sharedworker": "^0.0.96",
 		"@types/ua-parser-js": "^0.7.36",
 		"@types/uuid": "^9.0.1",
-		"@typescript-eslint/eslint-plugin": "^5.59.5",
-		"@typescript-eslint/parser": "^5.59.5",
+		"@typescript-eslint/eslint-plugin": "^5.59.7",
+		"@typescript-eslint/parser": "^5.59.7",
 		"@vitejs/plugin-vue": "^4.2.3",
-		"@vue/apollo-composable": "^4.0.0-beta.4",
-		"@vue/compiler-sfc": "^3.3.2",
+		"@vue/apollo-composable": "^4.0.0-beta.5",
+		"@vue/compiler-sfc": "^3.3.4",
 		"@vue/eslint-config-prettier": "^7.1.0",
 		"@vue/eslint-config-typescript": "^11.0.3",
 		"@vueuse/core": "^10.1.2",
@@ -58,11 +58,11 @@
 		"date-fns": "^2.30.0",
 		"dexie": "^3.2.3",
 		"dompurify": "^3.0.3",
-		"eslint": "^8.40.0",
+		"eslint": "^8.41.0",
 		"eslint-plugin-prettier": "^4.2.1",
-		"eslint-plugin-vue": "^9.13.0",
+		"eslint-plugin-vue": "^9.14.1",
 		"graphql": "^16.6.0",
-		"marked": "^5.0.2",
+		"marked": "^5.0.3",
 		"nanoid": "^4.0.2",
 		"npm-run-all": "^4.1.5",
 		"pinia": "^2.1.3",
@@ -70,21 +70,21 @@
 		"postcss-scss": "^4.0.6",
 		"prettier": "^2.8.8",
 		"sass": "^1.62.1",
-		"stylelint": "^15.6.1",
+		"stylelint": "^15.6.2",
 		"stylelint-config-html": "^1.1.0",
 		"stylelint-config-standard": "^33.0.0",
 		"stylelint-config-standard-scss": "^9.0.0",
 		"stylelint-config-standard-vue": "^1.0.0",
 		"stylelint-scss": "^5.0.0",
-		"terser": "^5.17.3",
+		"terser": "^5.17.6",
 		"tldts": "^6.0.5",
 		"typescript": "^5.0.4",
 		"ua-parser-js": "^1.0.35",
 		"uuid": "^9.0.0",
-		"vite": "^4.3.6",
+		"vite": "^4.3.9",
 		"vite-plugin-chrome-extension": "^0.0.7",
 		"vue-i18n": "9.2.2",
-		"vue-router": "4.2.0",
+		"vue-router": "4.2.1",
 		"vue-tsc": "^1.6.5",
 		"webextension-polyfill-ts": "^0.26.0"
 	}
diff --git a/src/composable/useCookies.ts b/src/composable/useCookies.ts
new file mode 100644
index 000000000..23ac0b433
--- /dev/null
+++ b/src/composable/useCookies.ts
@@ -0,0 +1,26 @@
+class CookieMap extends Map<string, string> {
+	refresh(): void {
+		super.clear();
+
+		const cookies = document.cookie.split(";").map((cookie) => cookie.trim());
+
+		for (const cookie of cookies) {
+			const [key, value] = cookie.split("=");
+			super.set(key, decodeURIComponent(value));
+		}
+	}
+
+	get(key: string): string | undefined {
+		this.refresh();
+
+		return super.get(key);
+	}
+}
+
+const cookieMap = new CookieMap();
+
+export function useCookies() {
+	cookieMap.refresh();
+
+	return cookieMap;
+}
diff --git a/src/composable/useTooltip.ts b/src/composable/useTooltip.ts
index 9e581cb44..47abc5f30 100644
--- a/src/composable/useTooltip.ts
+++ b/src/composable/useTooltip.ts
@@ -1,5 +1,5 @@
 import { Component, markRaw, nextTick, reactive } from "vue";
-import { computePosition, shift } from "@floating-ui/dom";
+import { Placement, computePosition, shift } from "@floating-ui/dom";
 
 export const tooltip = reactive({
 	x: 0,
@@ -16,7 +16,7 @@ export const tooltip = reactive({
  * @param props if content is a component, these are the props to pass to it
  * @returns
  */
-export function useTooltip(content?: string | Component, props?: Record<string, unknown>) {
+export function useTooltip(content?: string | Component, props?: Record<string, unknown>, opt?: TooltipOptions) {
 	// this shows the tooltip
 	function show(el: HTMLElement | undefined): void {
 		if (!el) return;
@@ -30,7 +30,7 @@ export function useTooltip(content?: string | Component, props?: Record<string,
 		// on the next tick we will update the position of the tooltip container
 		nextTick(() => {
 			computePosition(el, tooltip.container as HTMLElement, {
-				placement: "top",
+				placement: opt?.placement ?? "top",
 				middleware: [shift({ padding: 8, crossAxis: true, mainAxis: true })],
 			}).then(({ x: xVal, y: yVal }) => {
 				tooltip.x = xVal;
@@ -47,3 +47,7 @@ export function useTooltip(content?: string | Component, props?: Record<string,
 
 	return { show, hide };
 }
+
+interface TooltipOptions {
+	placement?: Placement;
+}
diff --git a/src/directive/TooltipDirective.ts b/src/directive/TooltipDirective.ts
index 47b4a9bef..f252df0ad 100644
--- a/src/directive/TooltipDirective.ts
+++ b/src/directive/TooltipDirective.ts
@@ -1,5 +1,6 @@
 import type { Directive, DirectiveBinding } from "vue";
 import { useTooltip } from "@/composable/useTooltip";
+import type { Placement } from "@floating-ui/dom";
 
 export const TooltipDirective = {
 	mounted(el: HTMLElement, binding: DirectiveBinding) {
@@ -21,7 +22,9 @@ function handleTooltip(el: HTMLElement, binding: DirectiveBinding) {
 			el.setAttribute("data-tooltip-position", binding.value);
 			break;
 		default: {
-			const { show, hide } = useTooltip(tooltipText);
+			const { show, hide } = useTooltip(tooltipText, undefined, {
+				placement: (el.getAttribute("data-tooltip-position") as Placement) || undefined,
+			});
 
 			el.addEventListener("mouseenter", () => show(el));
 			el.addEventListener("mouseleave", hide);
diff --git a/src/site/kick.com/KickSite.vue b/src/site/kick.com/KickSite.vue
index 2065bc11a..9113372b8 100644
--- a/src/site/kick.com/KickSite.vue
+++ b/src/site/kick.com/KickSite.vue
@@ -5,11 +5,13 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, provide } from "vue";
+import { defineAsyncComponent, provide, toRaw } from "vue";
 import { useStore } from "@/store/main";
 import { SITE_CURRENT_PLATFORM } from "@/common/Constant";
 import { getModule } from "@/composable/useModule";
 import { useUserAgent } from "@/composable/useUserAgent";
+import { useApp } from "./composable/useApp";
+import { usePinia } from "./composable/usePinia";
 import { KickModuleID } from "@/types/kick.module";
 
 const ModuleWrapper = defineAsyncComponent(() => import("@/site/global/ModuleWrapper.vue"));
@@ -23,6 +25,14 @@ store.setPlatform("KICK", []);
 
 document.body.setAttribute("seventv-kick", "true");
 
+const app = useApp();
+const user = usePinia<{
+	user: KickIdentity;
+}>(app, "user");
+if (user) {
+	store.setIdentity("KICK", toRaw(user.$state.user));
+}
+
 provide(SITE_CURRENT_PLATFORM, "KICK");
 const modules: Record<string, { default: ComponentFactory; config: SevenTV.SettingNode[] }> = import.meta.glob(
 	"./modules/**/*Module.vue",
diff --git a/src/site/kick.com/composable/useApp.ts b/src/site/kick.com/composable/useApp.ts
new file mode 100644
index 000000000..803f80c0f
--- /dev/null
+++ b/src/site/kick.com/composable/useApp.ts
@@ -0,0 +1,15 @@
+import { App, InjectionKey, inject } from "vue";
+
+const KICK_APP_KEY: InjectionKey<App<Element>> = Symbol("KICK_APP_KEY");
+
+export function useApp() {
+	let app = inject(KICK_APP_KEY, null);
+	if (!app) {
+		app = (document.querySelector("#app") as unknown as Record<string, never>)?.__vue_app__ as App<Element>;
+		if (!app) throw new Error("Could not acquire vue app");
+
+		inject(KICK_APP_KEY, app);
+	}
+
+	return app;
+}
diff --git a/src/site/kick.com/composable/usePinia.ts b/src/site/kick.com/composable/usePinia.ts
new file mode 100644
index 000000000..a1189fd56
--- /dev/null
+++ b/src/site/kick.com/composable/usePinia.ts
@@ -0,0 +1,10 @@
+import { App } from "vue";
+import { Pinia, StateTree, _StoreWithState } from "pinia";
+
+export function usePinia<T extends StateTree>(app: App<Element>, key: string) {
+	const pinia = app.config.globalProperties.$pinia;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const stores = (pinia as Pinia & { _s: Map<string, _StoreWithState<"ANY-KICK-STORE", T, unknown, unknown>> })["_s"];
+
+	return stores.get(key) as _StoreWithState<"ANY-KICK-STORE", T, unknown, unknown> | undefined;
+}
diff --git a/src/site/kick.com/composable/useRouter.ts b/src/site/kick.com/composable/useRouter.ts
new file mode 100644
index 000000000..a14b59d02
--- /dev/null
+++ b/src/site/kick.com/composable/useRouter.ts
@@ -0,0 +1,29 @@
+import { App, Ref, reactive } from "vue";
+import type { RouteLocationNormalizedLoaded } from "vue-router";
+import { definePropertyHook } from "@/common/Reflection";
+
+interface KickRouter {
+	currentRoute: RouteLocationNormalizedLoaded | null;
+}
+
+const m = new WeakMap<App<Element>, KickRouter>();
+
+export function useRouter(app: App<Element>) {
+	let router = m.get(app) as KickRouter;
+	if (!router) {
+		const inst = app.config.globalProperties.$router;
+		if (!inst) throw new Error("Could not acquire vue router");
+
+		router = reactive<KickRouter>({
+			currentRoute: null,
+		});
+
+		definePropertyHook(inst.currentRoute as Ref<RouteLocationNormalizedLoaded> & Record<string, never>, "_value", {
+			value(v) {
+				router.currentRoute = v;
+			},
+		});
+	}
+
+	return router;
+}
diff --git a/src/site/kick.com/modules/auth/AuthButton.vue b/src/site/kick.com/modules/auth/AuthButton.vue
new file mode 100644
index 000000000..63601a231
--- /dev/null
+++ b/src/site/kick.com/modules/auth/AuthButton.vue
@@ -0,0 +1,271 @@
+<template>
+	<!-- Display button on the current user's channel page -->
+	<Teleport :to="channelContainer">
+		<div
+			v-tooltip="'Connect ' + slug + ' on kick with 7TV!'"
+			class="seventv-kick-connect"
+			@click="popupAnchor = channelContainer"
+		>
+			<Logo7TV class="seventv-kick-connect-bouncy" />
+			<p>{{ t("site.kick.connect_button_channel", { CHANNEL: "kick.com/" + slug }) }}</p>
+		</div>
+	</Teleport>
+
+	<!-- Display button at navbar, top right -->
+	<Teleport :to="navContainer">
+		<div
+			v-tooltip="t('site.kick.connect_button_site')"
+			v-tooltip:position="'bottom'"
+			class="seventv-kick-connect-nav"
+			@click="popupAnchor = navContainer"
+		>
+			<Logo7TV class="seventv-kick-connect-bouncy" />
+		</div>
+	</Teleport>
+
+	<!-- Connect Info Popup -->
+	<template v-if="popupAnchor">
+		<UiFloating :anchor="popupAnchor" :middleware="[shift({ padding: 8 })]">
+			<div ref="popupRef" class="seventv-connect-popup">
+				<h3 v-t="'site.kick.connect_button_site'" />
+				<p v-if="identity">{{ t("site.kick.connect_popup_confidence", { ACTOR: identity.username }) }}</p>
+
+				<div class="seventv-connect-popup-buttons">
+					<UiButton @click="connect">Continue</UiButton>
+					<UiButton @click="popupAnchor = null">Cancel</UiButton>
+				</div>
+			</div>
+		</UiFloating>
+	</template>
+</template>
+
+<script setup lang="ts">
+import { onUnmounted, ref, watchEffect } from "vue";
+import { useI18n } from "vue-i18n";
+import { onClickOutside } from "@vueuse/core";
+import { useStore } from "@/store/main";
+import { log } from "@/common/Logger";
+import { useCookies } from "@/composable/useCookies";
+import Logo7TV from "@/assets/svg/logos/Logo7TV.vue";
+import UiButton from "@/ui/UiButton.vue";
+import UiFloating from "@/ui/UiFloating.vue";
+import { shift } from "@floating-ui/dom";
+
+const props = defineProps<{
+	slug: string;
+}>();
+
+defineEmits<{
+	(e: "connect"): void;
+}>();
+
+const { t } = useI18n();
+const store = useStore();
+const identity = store.identity as KickIdentity | null;
+const cookies = useCookies();
+
+const channelContainer = document.createElement("seventv-container");
+channelContainer.id = "seventv-kick-connect";
+
+const navContainer = document.createElement("seventv-container");
+navContainer.id = "seventv-kick-connect-nav";
+
+const popupAnchor = ref<HTMLElement | null>(null);
+const popupRef = ref<HTMLElement | null>(null);
+const connectError = ref<Error | null>(null);
+
+async function connect() {
+	if (!identity) return;
+
+	const w = window.open("about:blank", "_blank", "width=1,height=1");
+	if (!w) throw new Error("Failed to open window");
+
+	w.blur();
+
+	const query = new URLSearchParams({
+		platform: "KICK",
+		id: identity.username,
+	});
+
+	await (async () => {
+		// Get verification code
+		let resp = await fetch(import.meta.env.VITE_APP_API + `/auth/manual?${query.toString()}`).catch((err) => {
+			connectError.value = err;
+		});
+		if (!resp || !resp.ok) return Promise.reject("failed to get verification code");
+
+		// Update user's kick bio with the code
+		const code = await resp.text();
+		const ok = await setBioCode(code)
+			.catch((err) => {
+				Promise.reject(err);
+			})
+			.then(() => true);
+		if (!ok) return;
+
+		// Request the API to verify the code in bio
+		query.set("verify", "1");
+		resp = await fetch(import.meta.env.VITE_APP_API + `/auth/manual?${query.toString()}`).catch((err) => {
+			Promise.reject(err);
+		});
+		if (!resp || !resp.ok) return;
+
+		const tok = resp.headers.get("X-Access-Token");
+		if (w) w.location.href = import.meta.env.VITE_APP_SITE + "/auth/callback?token=" + tok;
+
+		setBioCode("").catch((err) => {
+			log.error("failed to clear bio", err);
+		});
+	})().catch((err) => {
+		connectError.value = err;
+	});
+
+	w.close();
+}
+
+const tokenWrapRegexp = /\[7TV:[0-9a-fA-F]+\]/g;
+async function setBioCode(code: string) {
+	if (!identity) return;
+
+	const tokenWrap = `[7TV:${code}]`;
+
+	const auth = cookies.get("XSRF-TOKEN");
+	if (!auth) return;
+
+	const headers = new Headers();
+	headers.set("x-xsrf-token", auth ?? "");
+	headers.set("Content-Type", "application/json");
+
+	const cleanBio = identity.bio?.replace(tokenWrapRegexp, "").trim() ?? "";
+	const newBio = code ? (identity.bio ? `${cleanBio} ${tokenWrap}` : tokenWrap) : cleanBio;
+
+	fetch("https://kick.com/update_profile", {
+		headers: {
+			"content-type": "application/json",
+			"x-xsrf-token": auth,
+		},
+		referrer: "https://kick.com/dashboard/settings/profile",
+		referrerPolicy: "strict-origin-when-cross-origin",
+		body: JSON.stringify({
+			id: identity.id,
+			email: identity.email,
+			bio: newBio,
+		}),
+		method: "POST",
+		mode: "cors",
+		credentials: "include",
+	}).then((resp) => {
+		if (!resp.ok) return;
+
+		identity.bio = newBio;
+	});
+}
+
+watchEffect(() => {
+	const navBlock = document.querySelector(".main-navbar");
+	if (navBlock) {
+		navBlock.lastElementChild?.insertAdjacentElement("beforebegin", navContainer);
+	}
+
+	if (props.slug) {
+		const channelInfoBlock = document.querySelector(".channel-info, .stream-info");
+		if (channelInfoBlock) {
+			channelInfoBlock.insertAdjacentElement("afterend", channelContainer);
+		}
+	}
+});
+
+onClickOutside(popupRef, () => {
+	popupAnchor.value = null;
+});
+
+onUnmounted(() => {
+	channelContainer.remove();
+	navContainer.remove();
+});
+</script>
+
+<style scoped lang="scss">
+.seventv-kick-connect {
+	cursor: pointer;
+	display: grid;
+	grid-template-columns: auto 1fr;
+	column-gap: 1rem;
+	align-items: center;
+	margin: 1rem 1.75rem;
+	padding: 0.5rem;
+	border-radius: 0.25rem;
+	background: var(--seventv-background-shade-1);
+	box-shadow: 0 0 0.35rem var(--seventv-primary);
+	transition: background 140ms ease-in-out;
+
+	svg {
+		font-size: 3rem;
+		animation: seventv-kick-connect 1.5s infinite ease-in-out;
+	}
+
+	p {
+		font-size: 2rem;
+		font-weight: 700;
+	}
+
+	&:hover {
+		background: var(--seventv-highlight-neutral-1);
+	}
+}
+
+svg.seventv-kick-connect-bouncy {
+	animation: seventv-kick-connect 1.5s infinite ease-in-out;
+}
+
+.seventv-kick-connect-nav {
+	width: 3rem;
+	display: grid;
+	justify-content: center;
+	align-content: center;
+	font-size: 1.75rem;
+
+	svg {
+		cursor: pointer;
+	}
+}
+
+.seventv-connect-popup {
+	padding: 1rem;
+	max-width: 21rem;
+	border-radius: 0.25rem;
+	box-shadow: 0.1rem 0.1rem 0.25rem black;
+	background-color: var(--seventv-background-shade-1);
+
+	h3 {
+		font-size: 1.5rem;
+		font-weight: 700;
+	}
+
+	.seventv-connect-popup-buttons {
+		display: grid;
+		grid-auto-flow: column;
+		justify-content: end;
+		margin-top: 1rem;
+
+		& > *:not(:last-child) {
+			margin-right: 0.5rem;
+		}
+	}
+}
+
+@keyframes seventv-kick-connect {
+	0% {
+		transform: scale(1);
+	}
+
+	50% {
+		transform: scale(1.05);
+		color: var(--seventv-primary);
+	}
+
+	100% {
+		transform: scale(1);
+	}
+}
+</style>
diff --git a/src/site/kick.com/modules/auth/AuthModule.vue b/src/site/kick.com/modules/auth/AuthModule.vue
new file mode 100644
index 000000000..1bc176940
--- /dev/null
+++ b/src/site/kick.com/modules/auth/AuthModule.vue
@@ -0,0 +1,35 @@
+<template>
+	<AuthButton :slug="currentSlugDbc" />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { debouncedRef } from "@vueuse/core";
+import { declareModule } from "@/composable/useModule";
+import { useApp } from "@/site/kick.com/composable/useApp";
+import { useRouter } from "@/site/kick.com/composable/useRouter";
+import AuthButton from "./AuthButton.vue";
+
+const { markAsReady } = declareModule<"KICK">("auth", {
+	name: "Auth",
+	depends_on: [],
+});
+
+const app = useApp();
+const router = useRouter(app);
+
+const currentSlug = ref("");
+const currentSlugDbc = debouncedRef(currentSlug, 1e3);
+
+watch(
+	() => router.currentRoute,
+	(v) => {
+		if (!v || v.name !== "channel") return;
+
+		currentSlug.value = typeof v.params.channel === "string" ? v.params.channel ?? "" : "";
+	},
+	{ immediate: true },
+);
+
+markAsReady();
+</script>
diff --git a/src/site/kick.com/modules/chat/ChatController.vue b/src/site/kick.com/modules/chat/ChatController.vue
index 7a5c1cfa1..5733794d6 100644
--- a/src/site/kick.com/modules/chat/ChatController.vue
+++ b/src/site/kick.com/modules/chat/ChatController.vue
@@ -7,10 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, watchEffect } from "vue";
-import { ref } from "vue";
-import { watch } from "vue";
-import { toRefs } from "vue";
+import { inject, ref, toRefs, watchEffect } from "vue";
 import { ObserverPromise } from "@/common/Async";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import ChatData from "@/site/youtube.com/modules/chat/ChatData.vue";
@@ -28,6 +25,8 @@ const ctx = useChannelContext(channelID.value, true);
 const chatList = ref<HTMLDivElement | null>(null);
 const shallowList = ref<HTMLDivElement | null>(null);
 
+let observer: ObserverPromise<HTMLDivElement> | null = null;
+
 watchEffect(async () => {
 	// Update channel context
 	const ok = ctx.setCurrentChannel({
@@ -46,30 +45,31 @@ watchEffect(async () => {
 	const chatroomTop = document.getElementById("chatroom-top");
 	if (!chatroomTop || !chatroomTop.nextElementSibling) return;
 
-	// The adjacent element is expected to be the chat's message list
 	chatList.value = chatroomTop.nextElementSibling as HTMLDivElement;
-});
-
-// Watch for message list updates
-watch(
-	chatList,
-	async (el) => {
-		if (!el) return;
 
-		// Obtain the shallow message list
-		// This will be used to set up an efficient-ish mutation observer
-		shallowList.value = await new ObserverPromise<HTMLDivElement>(
+	// Create observer
+	if (observer) observer.disconnect();
+	if (!chatroomTop.nextElementSibling.firstElementChild) {
+		observer = new ObserverPromise<HTMLDivElement>(
 			(records, emit) => {
 				for (const rec of records) {
-					rec.addedNodes.forEach((n) => (n instanceof HTMLDivElement ? emit(n) : null));
+					if (!rec.target || !(rec.target instanceof HTMLDivElement)) continue;
+					if (!rec.target.firstElementChild) continue;
+
+					emit(rec.target.firstElementChild as HTMLDivElement);
 				}
 			},
-			el,
-			{ childList: true },
+			chatroomTop.nextElementSibling,
+			{
+				childList: true,
+				subtree: true,
+			},
 		);
-	},
-	{
-		immediate: true,
-	},
-);
+
+		const el = await observer;
+		shallowList.value = el;
+	} else {
+		shallowList.value = chatroomTop.nextElementSibling.firstElementChild as HTMLDivElement;
+	}
+});
 </script>
diff --git a/src/site/kick.com/modules/chat/ChatModule.vue b/src/site/kick.com/modules/chat/ChatModule.vue
index 39a64fbd6..6e704375a 100644
--- a/src/site/kick.com/modules/chat/ChatModule.vue
+++ b/src/site/kick.com/modules/chat/ChatModule.vue
@@ -5,13 +5,13 @@
 </template>
 
 <script setup lang="ts">
-import { App } from "vue";
 import { provide } from "vue";
 import { reactive } from "vue";
 import { watch } from "vue";
-import type { Pinia, _StoreWithState } from "pinia";
 import { declareModule } from "@/composable/useModule";
 import { ChatRoom, KICK_CHANNEL_KEY, KickChannelInfo } from "@/site/kick.com";
+import { useApp } from "@/site/kick.com/composable/useApp";
+import { usePinia } from "@/site/kick.com/composable/usePinia";
 import ChatController from "./ChatController.vue";
 
 const { markAsReady } = declareModule<"KICK">("chat", {
@@ -20,14 +20,8 @@ const { markAsReady } = declareModule<"KICK">("chat", {
 });
 
 // Acquire vue app
-const app = (document.querySelector("#app") as unknown as Record<string, never>)?.__vue_app__ as App<Element>;
-if (!app) throw new Error("Could not acquire vue app");
-
-// Acquire pinia instance
-const pinia = app.config.globalProperties.$pinia;
-const stores = (pinia as Pinia & { _s: Map<string, _StoreWithState<"ANY-KICK-STORE", ChatRoom, unknown, unknown>> })[
-	"_s"
-];
+const app = useApp();
+const chatroomStore = usePinia<ChatRoom>(app, "chatroomv2");
 
 const chan = reactive<KickChannelInfo>({
 	id: "",
@@ -37,28 +31,23 @@ const chan = reactive<KickChannelInfo>({
 
 provide(KICK_CHANNEL_KEY, chan);
 
-for (const [key, store] of stores.entries()) {
-	if (key !== "chatroomv2") continue;
-
-	store.$subscribe((_, s) => {
+if (chatroomStore) {
+	chatroomStore.$subscribe((_, s: ChatRoom) => {
 		if (!s.chatroom || typeof s.chatroom.id !== "number") return;
 
 		chan.id = s.chatroom.id.toString();
 		chan.username = s.currentChannelSlug;
 		chan.currentMessage = s.currentMessage;
 	});
+	watch(
+		() => chan.currentMessage,
+		(v) => {
+			chatroomStore?.$patch({
+				currentMessage: v,
+			});
+		},
+	);
 }
 
-watch(
-	() => chan.currentMessage,
-	(v) => {
-		const store = stores.get("chatroomv2");
-
-		store?.$patch({
-			currentMessage: v,
-		});
-	},
-);
-
 markAsReady();
 </script>
diff --git a/src/site/kick.com/modules/chat/ChatObserver.vue b/src/site/kick.com/modules/chat/ChatObserver.vue
index e67053e10..032781de1 100644
--- a/src/site/kick.com/modules/chat/ChatObserver.vue
+++ b/src/site/kick.com/modules/chat/ChatObserver.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive } from "vue";
+import { reactive, watchEffect } from "vue";
 import { useMutationObserver } from "@vueuse/core";
 import ChatMessageVue, { ChatMessageBinding } from "./ChatMessage.vue";
 
@@ -15,7 +15,7 @@ const props = defineProps<{
 
 const messageMap = reactive(new Map<string, ChatMessageBinding>());
 
-function validateMessageElement(el: HTMLDivElement): void {
+function patchMessageElement(el: HTMLDivElement): void {
 	if (!el.hasAttribute("data-chat-entry")) return; // not a message
 
 	const entryID = el.getAttribute("data-chat-entry")!;
@@ -43,11 +43,20 @@ function validateMessageElement(el: HTMLDivElement): void {
 	messageMap.set(entryID, bind);
 }
 
+function patchCurrentElements(): void {
+	const entries = props.listElement.querySelectorAll("[data-chat-entry]");
+	for (const el of Array.from(entries)) {
+		patchMessageElement(el as HTMLDivElement);
+	}
+}
+
+watchEffect(patchCurrentElements);
+
 useMutationObserver(
 	props.listElement,
 	(records) => {
 		for (const rec of records) {
-			rec.addedNodes.forEach((n) => (n instanceof HTMLDivElement ? validateMessageElement(n) : null));
+			rec.addedNodes.forEach((n) => (n instanceof HTMLDivElement ? patchMessageElement(n) : null));
 			rec.removedNodes.forEach((n) =>
 				n instanceof HTMLDivElement ? messageMap.delete(n.getAttribute("data-chat-entry")!) : null,
 			);
@@ -55,11 +64,4 @@ useMutationObserver(
 	},
 	{ childList: true },
 );
-
-onMounted(() => {
-	const entries = props.listElement.querySelectorAll("[data-chat-entry]");
-	for (const el of Array.from(entries)) {
-		validateMessageElement(el as HTMLDivElement);
-	}
-});
 </script>
diff --git a/src/types/app.d.ts b/src/types/app.d.ts
index b7bd693c9..b1cc23a14 100644
--- a/src/types/app.d.ts
+++ b/src/types/app.d.ts
@@ -389,6 +389,8 @@ declare interface YouTubeIdentity {
 declare interface KickIdentity {
 	id: string;
 	username: string;
+	email: string;
+	bio: string;
 }
 
 declare type Platform = "TWITCH" | "YOUTUBE" | "KICK" | "UNKNOWN";
diff --git a/src/types/kick.module.d.ts b/src/types/kick.module.d.ts
index 588a41392..f80cc0888 100644
--- a/src/types/kick.module.d.ts
+++ b/src/types/kick.module.d.ts
@@ -1,7 +1,9 @@
+import AuthModuleVue from "@/site/kick.com/modules/auth/AuthModule.vue";
 import ChatModuleVue from "@/site/kick.com/modules/chat/ChatModule.vue";
 
 declare type KickModuleID = keyof KickModuleComponentMap;
 
 declare type KickModuleComponentMap = {
+	auth: typeof AuthModuleVue;
 	chat: typeof ChatModuleVue;
 };
diff --git a/yarn.lock b/yarn.lock
index 68aeaad16..0a8900c11 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -313,10 +313,10 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@8.40.0":
-  version "8.40.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.40.0.tgz#3ba73359e11f5a7bd3e407f70b3528abfae69cec"
-  integrity sha512-ElyB54bJIhXQYVKjDSvCkPO1iU1tSAeVQJbllWJq1XQSmmA4dgFk8CbiBGpiOPxleE48vDogxCtmMYku4HSVLA==
+"@eslint/js@8.41.0":
+  version "8.41.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.41.0.tgz#080321c3b68253522f7646b55b577dd99d2950b3"
+  integrity sha512-LxcyMGxwmTh2lY9FwHPGWOHmYFCZvbrFCBZL4FzSSsxsRPuhrYUg/49/0KDfW8tnIEaEHtfmn6+NPN+1DqaNmA==
 
 "@floating-ui/core@^1.2.6":
   version "1.2.6"
@@ -354,10 +354,10 @@
   resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@intlify/bundle-utils@^5.4.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@intlify/bundle-utils/-/bundle-utils-5.5.0.tgz#ae69f2cc319aa19dd22a5e758753ee72208de06d"
-  integrity sha512-k5xe8oAoPXiH6unXvyyyCRbq+LtLn1tSi/6r5f6mF+MsX7mcOMtgYbyAQINsjFrf7EDu5Pg4BY00VWSt8bI9XQ==
+"@intlify/bundle-utils@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@intlify/bundle-utils/-/bundle-utils-6.0.1.tgz#889ef90a07f54d3285082f1fff99be06db49c65f"
+  integrity sha512-BkeZNKZiC0B7K3OYMwiPLoAqsZmKH3SxTL75vYAkuQ//XWR8WO0NpfjXhTxgLTVFHxMcNb2agAopC0DP6fqDrg==
   dependencies:
     "@intlify/message-compiler" "9.3.0-beta.17"
     "@intlify/shared" "9.3.0-beta.17"
@@ -366,6 +366,7 @@
     estree-walker "^2.0.2"
     jsonc-eslint-parser "^1.0.1"
     magic-string "^0.30.0"
+    mlly "^1.2.0"
     source-map "0.6.1"
     yaml-eslint-parser "^0.3.2"
 
@@ -412,12 +413,12 @@
   resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.3.0-beta.17.tgz#1180dcb0b30741555fad0b62e4621802e8272ee5"
   integrity sha512-mscf7RQsUTOil35jTij4KGW1RC9SWQjYScwLxP53Ns6g24iEd5HN7ksbt9O6FvTmlQuX77u+MXpBdfJsGqizLQ==
 
-"@intlify/unplugin-vue-i18n@^0.10.0":
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/@intlify/unplugin-vue-i18n/-/unplugin-vue-i18n-0.10.0.tgz#28a05a7b9e0a7cc35e91e6762e5e6e57f954a45c"
-  integrity sha512-Sf8fe26/d8rBNcg+zBSb7RA1uyhrG9zhIM+CRX6lqcznMDjLRr/1tuVaJ9E6xqJkzjfPgRzNcCqwMt6rpNkL7Q==
+"@intlify/unplugin-vue-i18n@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@intlify/unplugin-vue-i18n/-/unplugin-vue-i18n-0.11.0.tgz#43d2730d86ceb214e7e147b0cc8f78f7d7df0707"
+  integrity sha512-ivcLZo08fvepHWV8o5lcKfhcKFSWqhwrqIAU6pUIbvq2ICo9fnXnIPYIZj7FeuHDLW1G3ADm44ZhQC3nYmvDlg==
   dependencies:
-    "@intlify/bundle-utils" "^5.4.0"
+    "@intlify/bundle-utils" "^6.0.1"
     "@intlify/shared" "9.3.0-beta.17"
     "@rollup/pluginutils" "^5.0.2"
     "@vue/compiler-sfc" "^3.2.47"
@@ -525,10 +526,10 @@
     javascript-natural-sort "0.7.1"
     lodash "^4.17.21"
 
-"@types/chrome@^0.0.236":
-  version "0.0.236"
-  resolved "https://registry.yarnpkg.com/@types/chrome/-/chrome-0.0.236.tgz#f967769015c458718d4328a54682fa24f0c62c92"
-  integrity sha512-ArQoxO9WtDY6GWcT2cpo+D+hyASPeFt7PHQEUDXwQhRS00Rbop07rnEOA046yws0HkM83Tcew/hW6Dgvnj4iMQ==
+"@types/chrome@^0.0.237":
+  version "0.0.237"
+  resolved "https://registry.yarnpkg.com/@types/chrome/-/chrome-0.0.237.tgz#20a38e1d1134e2725fc7eb43c881e55e1b24ddd7"
+  integrity sha512-krsRmyfMlck5r+H1EapsrrucDRq6iRm0NAi5fapr93CgnpVMDdK+h2+z4x79GegdW7BNH9Vb//gkptORwwwVIQ==
   dependencies:
     "@types/filesystem" "*"
     "@types/har-format" "*"
@@ -592,11 +593,16 @@
   resolved "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
-"@types/node@*", "@types/node@^20.2.1":
+"@types/node@*":
   version "20.2.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.2.1.tgz#de559d4b33be9a808fd43372ccee822c70f39704"
   integrity sha512-DqJociPbZP1lbZ5SQPk4oag6W7AyaGMO6gSfRwq3PWl4PXTwJpRQJhDq4W0kzrg3w6tJ1SwlvGZ5uKFHY13LIg==
 
+"@types/node@^20.2.5":
+  version "20.2.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.2.5.tgz#26d295f3570323b2837d322180dfbf1ba156fefb"
+  integrity sha512-JJulVEQXmiY9Px5axXHeYGLSjhkZEnD+MDPDGbCbIAbMslkKwmygtZFy1X6s/075Yo94sf8GuSlFfPzysQrWZQ==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz"
@@ -637,7 +643,7 @@
   resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz#5c9f3c617f64a9735d7b72a7cc671e166d900c40"
   integrity sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==
 
-"@typescript-eslint/eslint-plugin@^5.59.1", "@typescript-eslint/eslint-plugin@^5.59.5":
+"@typescript-eslint/eslint-plugin@^5.59.1":
   version "5.59.5"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.5.tgz#f156827610a3f8cefc56baeaa93cd4a5f32966b4"
   integrity sha512-feA9xbVRWJZor+AnLNAr7A8JRWeZqHUf4T9tlP+TN04b05pFVhO5eN7/O93Y/1OUlLMHKbnJisgDURs/qvtqdg==
@@ -653,7 +659,23 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/parser@^5.59.1", "@typescript-eslint/parser@^5.59.5":
+"@typescript-eslint/eslint-plugin@^5.59.7":
+  version "5.59.7"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.7.tgz#e470af414f05ecfdc05a23e9ce6ec8f91db56fe2"
+  integrity sha512-BL+jYxUFIbuYwy+4fF86k5vdT9lT0CNJ6HtwrIvGh0PhH8s0yy5rjaKH2fDCrz5ITHy07WCzVGNvAmjJh4IJFA==
+  dependencies:
+    "@eslint-community/regexpp" "^4.4.0"
+    "@typescript-eslint/scope-manager" "5.59.7"
+    "@typescript-eslint/type-utils" "5.59.7"
+    "@typescript-eslint/utils" "5.59.7"
+    debug "^4.3.4"
+    grapheme-splitter "^1.0.4"
+    ignore "^5.2.0"
+    natural-compare-lite "^1.4.0"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/parser@^5.59.1":
   version "5.59.5"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.59.5.tgz#63064f5eafbdbfb5f9dfbf5c4503cdf949852981"
   integrity sha512-NJXQC4MRnF9N9yWqQE2/KLRSOLvrrlZb48NGVfBa+RuPMN6B7ZcK5jZOvhuygv4D64fRKnZI4L4p8+M+rfeQuw==
@@ -663,6 +685,16 @@
     "@typescript-eslint/typescript-estree" "5.59.5"
     debug "^4.3.4"
 
+"@typescript-eslint/parser@^5.59.7":
+  version "5.59.7"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.59.7.tgz#02682554d7c1028b89aa44a48bf598db33048caa"
+  integrity sha512-VhpsIEuq/8i5SF+mPg9jSdIwgMBBp0z9XqjiEay+81PYLJuroN+ET1hM5IhkiYMJd9MkTz8iJLt7aaGAgzWUbQ==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.59.7"
+    "@typescript-eslint/types" "5.59.7"
+    "@typescript-eslint/typescript-estree" "5.59.7"
+    debug "^4.3.4"
+
 "@typescript-eslint/scope-manager@5.59.5":
   version "5.59.5"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.59.5.tgz#33ffc7e8663f42cfaac873de65ebf65d2bce674d"
@@ -671,6 +703,14 @@
     "@typescript-eslint/types" "5.59.5"
     "@typescript-eslint/visitor-keys" "5.59.5"
 
+"@typescript-eslint/scope-manager@5.59.7":
+  version "5.59.7"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.59.7.tgz#0243f41f9066f3339d2f06d7f72d6c16a16769e2"
+  integrity sha512-FL6hkYWK9zBGdxT2wWEd2W8ocXMu3K94i3gvMrjXpx+koFYdYV7KprKfirpgY34vTGzEPPuKoERpP8kD5h7vZQ==
+  dependencies:
+    "@typescript-eslint/types" "5.59.7"
+    "@typescript-eslint/visitor-keys" "5.59.7"
+
 "@typescript-eslint/type-utils@5.59.5":
   version "5.59.5"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.59.5.tgz#485b0e2c5b923460bc2ea6b338c595343f06fc9b"
@@ -681,11 +721,26 @@
     debug "^4.3.4"
     tsutils "^3.21.0"
 
+"@typescript-eslint/type-utils@5.59.7":
+  version "5.59.7"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.59.7.tgz#89c97291371b59eb18a68039857c829776f1426d"
+  integrity sha512-ozuz/GILuYG7osdY5O5yg0QxXUAEoI4Go3Do5xeu+ERH9PorHBPSdvD3Tjp2NN2bNLh1NJQSsQu2TPu/Ly+HaQ==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "5.59.7"
+    "@typescript-eslint/utils" "5.59.7"
+    debug "^4.3.4"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/types@5.59.5":
   version "5.59.5"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.59.5.tgz#e63c5952532306d97c6ea432cee0981f6d2258c7"
   integrity sha512-xkfRPHbqSH4Ggx4eHRIO/eGL8XL4Ysb4woL8c87YuAo8Md7AUjyWKa9YMwTL519SyDPrfEgKdewjkxNCVeJW7w==
 
+"@typescript-eslint/types@5.59.7":
+  version "5.59.7"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.59.7.tgz#6f4857203fceee91d0034ccc30512d2939000742"
+  integrity sha512-UnVS2MRRg6p7xOSATscWkKjlf/NDKuqo5TdbWck6rIRZbmKpVNTLALzNvcjIfHBE7736kZOFc/4Z3VcZwuOM/A==
+
 "@typescript-eslint/typescript-estree@5.59.5":
   version "5.59.5"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.5.tgz#9b252ce55dd765e972a7a2f99233c439c5101e42"
@@ -699,6 +754,19 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
+"@typescript-eslint/typescript-estree@5.59.7":
+  version "5.59.7"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.7.tgz#b887acbd4b58e654829c94860dbff4ac55c5cff8"
+  integrity sha512-4A1NtZ1I3wMN2UGDkU9HMBL+TIQfbrh4uS0WDMMpf3xMRursDbqEf1ahh6vAAe3mObt8k3ZATnezwG4pdtWuUQ==
+  dependencies:
+    "@typescript-eslint/types" "5.59.7"
+    "@typescript-eslint/visitor-keys" "5.59.7"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/utils@5.59.5":
   version "5.59.5"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.59.5.tgz#15b3eb619bb223302e60413adb0accd29c32bcae"
@@ -713,6 +781,20 @@
     eslint-scope "^5.1.1"
     semver "^7.3.7"
 
+"@typescript-eslint/utils@5.59.7":
+  version "5.59.7"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.59.7.tgz#7adf068b136deae54abd9a66ba5a8780d2d0f898"
+  integrity sha512-yCX9WpdQKaLufz5luG4aJbOpdXf/fjwGMcLFXZVPUz3QqLirG5QcwwnIHNf8cjLjxK4qtzTO8udUtMQSAToQnQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@types/json-schema" "^7.0.9"
+    "@types/semver" "^7.3.12"
+    "@typescript-eslint/scope-manager" "5.59.7"
+    "@typescript-eslint/types" "5.59.7"
+    "@typescript-eslint/typescript-estree" "5.59.7"
+    eslint-scope "^5.1.1"
+    semver "^7.3.7"
+
 "@typescript-eslint/visitor-keys@5.59.5":
   version "5.59.5"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.5.tgz#ba5b8d6791a13cf9fea6716af1e7626434b29b9b"
@@ -721,6 +803,14 @@
     "@typescript-eslint/types" "5.59.5"
     eslint-visitor-keys "^3.3.0"
 
+"@typescript-eslint/visitor-keys@5.59.7":
+  version "5.59.7"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.7.tgz#09c36eaf268086b4fbb5eb9dc5199391b6485fc5"
+  integrity sha512-tyN+X2jvMslUszIiYbF0ZleP+RqQsFVpGrKI6e0Eet1w8WmhsAtmzaqm8oM8WJQ1ysLwhnsK/4hYHJjOgJVfQQ==
+  dependencies:
+    "@typescript-eslint/types" "5.59.7"
+    eslint-visitor-keys "^3.3.0"
+
 "@unhead/dom@1.1.26", "@unhead/dom@^1.1.26":
   version "1.1.26"
   resolved "https://registry.yarnpkg.com/@unhead/dom/-/dom-1.1.26.tgz#1edfdb5bf686436b0521fd34690a8e195c06f117"
@@ -811,10 +901,10 @@
     "@volar/typescript" "1.4.1-patch.2"
     "@volar/vue-language-core" "1.6.5"
 
-"@vue/apollo-composable@^4.0.0-beta.4":
-  version "4.0.0-beta.4"
-  resolved "https://registry.yarnpkg.com/@vue/apollo-composable/-/apollo-composable-4.0.0-beta.4.tgz#a93cbccfdcf9558ada0161294b42f77bee5e6a0b"
-  integrity sha512-lErWL+9LGfWfdfrSYY3DQB/A8Asqs46MiKwmgKeKSj7fe01tx0UpH43aiwMGj+VgEzBZ9AfqEa/Bxf0Nff/NNw==
+"@vue/apollo-composable@^4.0.0-beta.5":
+  version "4.0.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@vue/apollo-composable/-/apollo-composable-4.0.0-beta.5.tgz#f01644061f96c51cbd8e3a4ab0a98cdd2a6a2a3e"
+  integrity sha512-PDi/LpCJrY0m1YSRIv38n1q5WGUu8T0BzbFFNjUJ3nHdElyqvDJCnazRtasyvXB16i0+4rMQhpmf/xgkRgFePA==
   dependencies:
     throttle-debounce "^3.0.1"
     ts-essentials "^9.1.2"
@@ -830,6 +920,16 @@
     estree-walker "^2.0.2"
     source-map-js "^1.0.2"
 
+"@vue/compiler-core@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.3.4.tgz#7fbf591c1c19e1acd28ffd284526e98b4f581128"
+  integrity sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==
+  dependencies:
+    "@babel/parser" "^7.21.3"
+    "@vue/shared" "3.3.4"
+    estree-walker "^2.0.2"
+    source-map-js "^1.0.2"
+
 "@vue/compiler-dom@3.3.2", "@vue/compiler-dom@^3.3.0":
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.2.tgz#2012ef4879375a4ca4ee68012a9256398b848af2"
@@ -838,7 +938,31 @@
     "@vue/compiler-core" "3.3.2"
     "@vue/shared" "3.3.2"
 
-"@vue/compiler-sfc@3.3.2", "@vue/compiler-sfc@^3.2.47", "@vue/compiler-sfc@^3.3.0", "@vue/compiler-sfc@^3.3.2":
+"@vue/compiler-dom@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz#f56e09b5f4d7dc350f981784de9713d823341151"
+  integrity sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==
+  dependencies:
+    "@vue/compiler-core" "3.3.4"
+    "@vue/shared" "3.3.4"
+
+"@vue/compiler-sfc@3.3.4", "@vue/compiler-sfc@^3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz#b19d942c71938893535b46226d602720593001df"
+  integrity sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==
+  dependencies:
+    "@babel/parser" "^7.20.15"
+    "@vue/compiler-core" "3.3.4"
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/compiler-ssr" "3.3.4"
+    "@vue/reactivity-transform" "3.3.4"
+    "@vue/shared" "3.3.4"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.0"
+    postcss "^8.1.10"
+    source-map-js "^1.0.2"
+
+"@vue/compiler-sfc@^3.2.47", "@vue/compiler-sfc@^3.3.0":
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.2.tgz#d6467acba8446655bcee7e751441232e5ddebcbf"
   integrity sha512-jG4jQy28H4BqzEKsQqqW65BZgmo3vzdLHTBjF+35RwtDdlFE+Fk1VWJYUnDMMqkFBo6Ye1ltSKVOMPgkzYj7SQ==
@@ -862,6 +986,14 @@
     "@vue/compiler-dom" "3.3.2"
     "@vue/shared" "3.3.2"
 
+"@vue/compiler-ssr@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz#9d1379abffa4f2b0cd844174ceec4a9721138777"
+  integrity sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==
+  dependencies:
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/shared" "3.3.4"
+
 "@vue/devtools-api@^6.2.1", "@vue/devtools-api@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
@@ -895,43 +1027,66 @@
     estree-walker "^2.0.2"
     magic-string "^0.30.0"
 
-"@vue/reactivity@3.3.2", "@vue/reactivity@^3.3.0":
+"@vue/reactivity-transform@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz#52908476e34d6a65c6c21cd2722d41ed8ae51929"
+  integrity sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==
+  dependencies:
+    "@babel/parser" "^7.20.15"
+    "@vue/compiler-core" "3.3.4"
+    "@vue/shared" "3.3.4"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.0"
+
+"@vue/reactivity@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.3.4.tgz#a27a29c6cd17faba5a0e99fbb86ee951653e2253"
+  integrity sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==
+  dependencies:
+    "@vue/shared" "3.3.4"
+
+"@vue/reactivity@^3.3.0":
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.3.2.tgz#c4ddc5087039070c0c11810f6bc1aa59c99f0cb5"
   integrity sha512-yX8C4uTgg2Tdj+512EEMnMKbLveoITl7YdQX35AYgx8vBvQGszKiiCN46g4RY6/deeo/5DLbeUUGxCq1qWMf5g==
   dependencies:
     "@vue/shared" "3.3.2"
 
-"@vue/runtime-core@3.3.2":
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.3.2.tgz#7c89b30c44ad42a3256806a1e37c3cd18500d6d5"
-  integrity sha512-qSl95qj0BvKfcsO+hICqFEoLhJn6++HtsPxmTkkadFbuhe3uQfJ8HmQwvEr7xbxBd2rcJB6XOJg7nWAn/ymC5A==
+"@vue/runtime-core@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.3.4.tgz#4bb33872bbb583721b340f3088888394195967d1"
+  integrity sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==
   dependencies:
-    "@vue/reactivity" "3.3.2"
-    "@vue/shared" "3.3.2"
+    "@vue/reactivity" "3.3.4"
+    "@vue/shared" "3.3.4"
 
-"@vue/runtime-dom@3.3.2":
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.3.2.tgz#b0bf7ce3fa9c181049ce783a0e13480a4f350c4b"
-  integrity sha512-+drStsJT+0mtgHdarT7cXZReCcTFfm6ptxMrz0kAW5hms6UNBd8Q1pi4JKlncAhu+Ld/TevsSp7pqAZxBBoGng==
+"@vue/runtime-dom@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz#992f2579d0ed6ce961f47bbe9bfe4b6791251566"
+  integrity sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==
   dependencies:
-    "@vue/runtime-core" "3.3.2"
-    "@vue/shared" "3.3.2"
+    "@vue/runtime-core" "3.3.4"
+    "@vue/shared" "3.3.4"
     csstype "^3.1.1"
 
-"@vue/server-renderer@3.3.2":
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.3.2.tgz#31dce9f76380762fc42df77f6f974c4098f179e6"
-  integrity sha512-QCwh6OGwJg6GDLE0fbQhRTR6tnU+XDJ1iCsTYHXBiezCXAhqMygFRij7BiLF4ytvvHcg5kX9joX5R5vP85++wg==
+"@vue/server-renderer@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.3.4.tgz#ea46594b795d1536f29bc592dd0f6655f7ea4c4c"
+  integrity sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==
   dependencies:
-    "@vue/compiler-ssr" "3.3.2"
-    "@vue/shared" "3.3.2"
+    "@vue/compiler-ssr" "3.3.4"
+    "@vue/shared" "3.3.4"
 
 "@vue/shared@3.3.2", "@vue/shared@^3.3.0":
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.2.tgz#774cd9b4635ce801b70a3fc3713779a5ef5d77c3"
   integrity sha512-0rFu3h8JbclbnvvKrs7Fe5FNGV9/5X2rPD7KmOzhLSUAiQH5//Hq437Gv0fR5Mev3u/nbtvmLl8XgwCU20/ZfQ==
 
+"@vue/shared@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.4.tgz#06e83c5027f464eef861c329be81454bc8b70780"
+  integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
+
 "@vueuse/core@^10.1.2":
   version "10.1.2"
   resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.1.2.tgz#2499eadec36c5d7109338e3a2b73725040ae8011"
@@ -1711,10 +1866,10 @@ eslint-plugin-prettier@^4.0.0, eslint-plugin-prettier@^4.2.1:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-eslint-plugin-vue@^9.13.0:
-  version "9.13.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.13.0.tgz#adb21448e65a7c1502af66103ff5f215632c5319"
-  integrity sha512-aBz9A8WB4wmpnVv0pYUt86cmH9EkcwWzgEwecBxMoRNhQjTL5i4sqadnwShv/hOdr8Hbl8XANGV7dtX9UQIAyA==
+eslint-plugin-vue@^9.14.1:
+  version "9.14.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.14.1.tgz#3b0c9857642dac547c7564031cfb09d283eafdd4"
+  integrity sha512-LQazDB1qkNEKejLe/b5a9VfEbtbczcOaui5lQ4Qw0tbRBbQYREyxxOV5BQgNDTqGPs9pxqiEpbMi9ywuIaF7vw==
   dependencies:
     "@eslint-community/eslint-utils" "^4.3.0"
     natural-compare "^1.4.0"
@@ -1770,15 +1925,15 @@ eslint-visitor-keys@^3.4.1:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz#c22c48f48942d08ca824cc526211ae400478a994"
   integrity sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==
 
-eslint@^8.40.0:
-  version "8.40.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.40.0.tgz#a564cd0099f38542c4e9a2f630fa45bf33bc42a4"
-  integrity sha512-bvR+TsP9EHL3TqNtj9sCNJVAFK3fBN8Q7g5waghxyRsPLIMwL73XSKnZFK0hk/O2ANC+iAoq6PWMQ+IfBAJIiQ==
+eslint@^8.41.0:
+  version "8.41.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.41.0.tgz#3062ca73363b4714b16dbc1e60f035e6134b6f1c"
+  integrity sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@eslint-community/regexpp" "^4.4.0"
     "@eslint/eslintrc" "^2.0.3"
-    "@eslint/js" "8.40.0"
+    "@eslint/js" "8.41.0"
     "@humanwhocodes/config-array" "^0.11.8"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
@@ -1798,13 +1953,12 @@ eslint@^8.40.0:
     find-up "^5.0.0"
     glob-parent "^6.0.2"
     globals "^13.19.0"
-    grapheme-splitter "^1.0.4"
+    graphemer "^1.4.0"
     ignore "^5.2.0"
     import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
     is-path-inside "^3.0.3"
-    js-sdsl "^4.1.4"
     js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
@@ -2144,6 +2298,11 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
+
 graphql-tag@^2.12.6:
   version "2.12.6"
   resolved "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.6.tgz"
@@ -2477,11 +2636,6 @@ javascript-natural-sort@0.7.1:
   resolved "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz"
   integrity sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==
 
-js-sdsl@^4.1.4:
-  version "4.2.0"
-  resolved "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz"
-  integrity sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==
-
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
@@ -2545,6 +2699,11 @@ jsonc-eslint-parser@^1.0.1:
     espree "^6.0.0"
     semver "^6.3.0"
 
+jsonc-parser@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
+  integrity sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz"
@@ -2680,10 +2839,10 @@ map-obj@^4.0.0:
   resolved "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
-marked@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-5.0.2.tgz#ac79e78ea7ed9ad31de70b85e274595d9029e534"
-  integrity sha512-TXksm9GwqXCRNbFUZmMtqNLvy3K2cQHuWmyBDLOrY1e6i9UvZpOTJXoz7fBjYkJkaUFzV9hBFxMuZSyQt8R6KQ==
+marked@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-5.0.3.tgz#a8d0d457d7bce3606db3e32bb0797490cec2fa19"
+  integrity sha512-KUONa43Uk74uUNWMxh6lfaNYmSAsRMiDAaX8QBCCRVXzEufR0zX6T33vrGbvTnQLL02ungDM3KSzZtO+chJaHg==
 
 mathml-tag-names@^2.1.3:
   version "2.1.3"
@@ -2772,6 +2931,16 @@ minimist-options@4.1.0:
     is-plain-obj "^1.1.0"
     kind-of "^6.0.3"
 
+mlly@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.3.0.tgz#3184cb80c6437bda861a9f452ae74e3434ed9cd1"
+  integrity sha512-HT5mcgIQKkOrZecOjOX3DJorTikWXwsBfpcr/MGBkhfWcjiqvnaL/9ppxvIUXfjT6xt4DVIAsN9fMUz1ev4bIw==
+  dependencies:
+    acorn "^8.8.2"
+    pathe "^1.1.0"
+    pkg-types "^1.0.3"
+    ufo "^1.1.2"
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
@@ -3033,7 +3202,7 @@ path-type@^4.0.0:
   resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-pathe@^1.0.0:
+pathe@^1.0.0, pathe@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.0.tgz#e2e13f6c62b31a3289af4ba19886c230f295ec03"
   integrity sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==
@@ -3066,6 +3235,15 @@ pinia@^2.1.3:
     "@vue/devtools-api" "^6.5.0"
     vue-demi ">=0.14.5"
 
+pkg-types@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-1.0.3.tgz#988b42ab19254c01614d13f4f65a2cfc7880f868"
+  integrity sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==
+  dependencies:
+    jsonc-parser "^3.2.0"
+    mlly "^1.2.0"
+    pathe "^1.1.0"
+
 postcss-html@^1.5.0:
   version "1.5.0"
   resolved "https://registry.npmjs.org/postcss-html/-/postcss-html-1.5.0.tgz"
@@ -3588,10 +3766,10 @@ stylelint-scss@^5.0.0:
     postcss-selector-parser "^6.0.11"
     postcss-value-parser "^4.2.0"
 
-stylelint@^15.6.1:
-  version "15.6.1"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-15.6.1.tgz#e4cd33a3af88587b99a5d1328aedd8c298b6dc81"
-  integrity sha512-d8icFBlVl93Elf3Z5ABQNOCe4nx69is3D/NZhDLAie1eyYnpxfeKe7pCfqzT5W4F8vxHCLSDfV8nKNJzogvV2Q==
+stylelint@^15.6.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-15.6.2.tgz#06d9005b62a83b72887eed623520e9b472af8c15"
+  integrity sha512-fjQWwcdUye4DU+0oIxNGwawIPC5DvG5kdObY5Sg4rc87untze3gC/5g/ikePqVjrAsBUZjwMN+pZsAYbDO6ArQ==
   dependencies:
     "@csstools/css-parser-algorithms" "^2.1.1"
     "@csstools/css-tokenizer" "^2.1.1"
@@ -3684,10 +3862,10 @@ table@^6.8.1:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-terser@^5.17.3:
-  version "5.17.3"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.17.3.tgz#7f908f16b3cdf3f6c0f8338e6c1c674837f90d25"
-  integrity sha512-AudpAZKmZHkG9jueayypz4duuCFJMMNGRMwaPvQKWfxKedh8Z2x3OCoDqIIi1xx5+iwx1u6Au8XQcc9Lke65Yg==
+terser@^5.17.6:
+  version "5.17.6"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.17.6.tgz#d810e75e1bb3350c799cd90ebefe19c9412c12de"
+  integrity sha512-V8QHcs8YuyLkLHsJO5ucyff1ykrLVsR4dNnS//L5Y3NiSXpbK1J+WMVUs67eI0KTxs9JtHhgEQpXQVHlHI92DQ==
   dependencies:
     "@jridgewell/source-map" "^0.3.2"
     acorn "^8.5.0"
@@ -3815,6 +3993,11 @@ ua-parser-js@^1.0.35:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.35.tgz#c4ef44343bc3db0a3cbefdf21822f1b1fc1ab011"
   integrity sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA==
 
+ufo@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.1.2.tgz#d0d9e0fa09dece0c31ffd57bd363f030a35cfe76"
+  integrity sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
@@ -3916,10 +4099,10 @@ vite@^2.2.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-vite@^4.3.6:
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.6.tgz#d129487dd9edf10ec79314e2e7891c60a2f86051"
-  integrity sha512-cqIyLSbA6gornMS659AXTVKF7cvSHMdKmJJwQ9DXq3lwsT1uZSdktuBRlpHQ8VnOWx0QHtjDwxPpGtyo9Fh/Qg==
+vite@^4.3.9:
+  version "4.3.9"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.9.tgz#db896200c0b1aa13b37cdc35c9e99ee2fdd5f96d"
+  integrity sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==
   dependencies:
     esbuild "^0.17.5"
     postcss "^8.4.23"
@@ -3960,10 +4143,10 @@ vue-i18n@9.2.2:
     "@intlify/vue-devtools" "9.2.2"
     "@vue/devtools-api" "^6.2.1"
 
-vue-router@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.0.tgz#558f31978a21ce3accf5122ffdf2cec34a5d2517"
-  integrity sha512-c+usESa6ZoWsm4PPdzRSyenp5A4dsUtnDJnrI03fY1IpIihA9TK3x5ffgkFDpjhLJZewsXoKURapNLFdZjuqTg==
+vue-router@4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.1.tgz#f8ab85c89e74682cad71519480fdf2b855e8c9e0"
+  integrity sha512-nW28EeifEp8Abc5AfmAShy5ZKGsGzjcnZ3L1yc2DYUo+MqbBClrRP9yda3dIekM4I50/KnEwo1wkBLf7kHH5Cw==
   dependencies:
     "@vue/devtools-api" "^6.5.0"
 
@@ -3984,16 +4167,16 @@ vue-tsc@^1.6.5:
     "@volar/vue-typescript" "1.6.5"
     semver "^7.3.8"
 
-vue@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.2.tgz#407f0057a7a154d836b66f94ce81779d0c2cafbc"
-  integrity sha512-98hJcAhyDwZoOo2flAQBSPVYG/o0HA9ivIy2ktHshjE+6/q8IMQ+kvDKQzOZTFPxvnNMcGM+zS2A00xeZMA7tA==
+vue@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"
+  integrity sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==
   dependencies:
-    "@vue/compiler-dom" "3.3.2"
-    "@vue/compiler-sfc" "3.3.2"
-    "@vue/runtime-dom" "3.3.2"
-    "@vue/server-renderer" "3.3.2"
-    "@vue/shared" "3.3.2"
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/compiler-sfc" "3.3.4"
+    "@vue/runtime-dom" "3.3.4"
+    "@vue/server-renderer" "3.3.4"
+    "@vue/shared" "3.3.4"
 
 webextension-polyfill-ts@^0.26.0:
   version "0.26.0"

From 4fe670c910012dc55ff0c9ff2ddb353c6cc63cfd Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Sun, 28 May 2023 17:39:15 +0200
Subject: [PATCH 02/26] changelog

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

diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
index d48e8ed9b..6ec19a16f 100644
--- a/CHANGELOG-nightly.md
+++ b/CHANGELOG-nightly.md
@@ -3,6 +3,7 @@
 **The changes listed here are not assigned to an official release**.
 
 -   Added new feature: Paint Tool ([subscribers only](https://7tv.app/store))
+-   Added a button to link a kick.com channel with 7TV
 -   Fixed an issue which caused mod icons to be invisible
 -   Fixed an issue which sometimes caused channel emote sets to disappear
 -   Fixed an issue which caused stylesheets to be duplicated when running in hosted mode

From 57f4183fde3a6462b3aff6636719c790ea24d6d2 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Sun, 28 May 2023 17:40:46 +0200
Subject: [PATCH 03/26] turn off new lint rule

---
 .eslintrc.cjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index fe9646b37..e3f0f9e8d 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -29,6 +29,7 @@ module.exports = {
 		"vue/valid-template-root": "off",
 		"vue/multi-word-component-names": "off",
 		"vue/require-default-prop": "off",
+		"vue/no-dupe-keys": "off",
 		"@typescript-eslint/no-non-null-assertion": "off",
 	},
 	globals: {

From 5e33dfb51492eb7151ac036e04e38f66ad5717ae Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Sun, 28 May 2023 20:56:35 +0200
Subject: [PATCH 04/26] handle completion & fix chat id

---
 locale/en_US.yaml                             |  1 +
 src/site/kick.com/KickSite.vue                | 20 ++++++-
 src/site/kick.com/modules/auth/AuthButton.vue | 56 +++++++++++++++----
 .../kick.com/modules/chat/ChatController.vue  |  2 +-
 src/site/kick.com/modules/chat/ChatModule.vue | 20 ++++++-
 5 files changed, 81 insertions(+), 18 deletions(-)

diff --git a/locale/en_US.yaml b/locale/en_US.yaml
index 0db0762f1..8da566a4e 100644
--- a/locale/en_US.yaml
+++ b/locale/en_US.yaml
@@ -147,3 +147,4 @@ site:
         connect_button_channel: Connect {CHANNEL}
         connect_button_site: Connect 7TV...
         connect_popup_confidence: Are you sure you'd like to link your current kick.com account ({ACTOR}) with 7TV?
+        connect_popup_done: Your channel has been successfully connected to 7TV! Use the 7tv.app website to start adding emotes
diff --git a/src/site/kick.com/KickSite.vue b/src/site/kick.com/KickSite.vue
index 9113372b8..510ea576c 100644
--- a/src/site/kick.com/KickSite.vue
+++ b/src/site/kick.com/KickSite.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, provide, toRaw } from "vue";
+import { defineAsyncComponent, provide } from "vue";
 import { useStore } from "@/store/main";
 import { SITE_CURRENT_PLATFORM } from "@/common/Constant";
 import { getModule } from "@/composable/useModule";
@@ -27,10 +27,24 @@ document.body.setAttribute("seventv-kick", "true");
 
 const app = useApp();
 const user = usePinia<{
-	user: KickIdentity;
+	user: {
+		id: number;
+		username: string;
+		bio: string;
+		email: string;
+		streamer_channel: {
+			slug: string;
+		};
+	};
 }>(app, "user");
+
 if (user) {
-	store.setIdentity("KICK", toRaw(user.$state.user));
+	store.setIdentity("KICK", {
+		id: user.$state.user.id.toString(),
+		username: user.$state.user.username,
+		bio: user.$state.user.bio,
+		email: user.$state.user.email,
+	});
 }
 
 provide(SITE_CURRENT_PLATFORM, "KICK");
diff --git a/src/site/kick.com/modules/auth/AuthButton.vue b/src/site/kick.com/modules/auth/AuthButton.vue
index 63601a231..93cb56ea0 100644
--- a/src/site/kick.com/modules/auth/AuthButton.vue
+++ b/src/site/kick.com/modules/auth/AuthButton.vue
@@ -28,11 +28,22 @@
 		<UiFloating :anchor="popupAnchor" :middleware="[shift({ padding: 8 })]">
 			<div ref="popupRef" class="seventv-connect-popup">
 				<h3 v-t="'site.kick.connect_button_site'" />
-				<p v-if="identity">{{ t("site.kick.connect_popup_confidence", { ACTOR: identity.username }) }}</p>
+				<p v-if="identity">
+					{{
+						t("site.kick." + (connectDone ? "connect_popup_done" : "connect_popup_confidence"), {
+							ACTOR: identity.username,
+						})
+					}}
+				</p>
 
 				<div class="seventv-connect-popup-buttons">
-					<UiButton @click="connect">Continue</UiButton>
-					<UiButton @click="popupAnchor = null">Cancel</UiButton>
+					<template v-if="!connectDone">
+						<UiButton @click="connect">Continue</UiButton>
+						<UiButton @click="closePopup">Cancel</UiButton>
+					</template>
+					<template v-else>
+						<UiButton @click="openApp">Explore</UiButton>
+					</template>
 				</div>
 			</div>
 		</UiFloating>
@@ -42,7 +53,7 @@
 <script setup lang="ts">
 import { onUnmounted, ref, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
-import { onClickOutside } from "@vueuse/core";
+import { onClickOutside, until, useTimeout } from "@vueuse/core";
 import { useStore } from "@/store/main";
 import { log } from "@/common/Logger";
 import { useCookies } from "@/composable/useCookies";
@@ -73,14 +84,19 @@ navContainer.id = "seventv-kick-connect-nav";
 const popupAnchor = ref<HTMLElement | null>(null);
 const popupRef = ref<HTMLElement | null>(null);
 const connectError = ref<Error | null>(null);
+const connectDone = ref(false);
 
 async function connect() {
 	if (!identity) return;
 
+	connectError.value = null;
+	connectDone.value = false;
+
 	const w = window.open("about:blank", "_blank", "width=1,height=1");
 	if (!w) throw new Error("Failed to open window");
 
 	w.blur();
+	w.document.body.innerText = "Standby...";
 
 	const query = new URLSearchParams({
 		platform: "KICK",
@@ -103,9 +119,14 @@ async function connect() {
 			.then(() => true);
 		if (!ok) return;
 
+		// wait a few seconds for the bio to update
+		await until(useTimeout(2500)).toBeTruthy();
+
 		// Request the API to verify the code in bio
 		query.set("verify", "1");
-		resp = await fetch(import.meta.env.VITE_APP_API + `/auth/manual?${query.toString()}`).catch((err) => {
+		resp = await fetch(import.meta.env.VITE_APP_API + `/auth/manual?${query.toString()}`, {
+			credentials: "include",
+		}).catch((err) => {
 			Promise.reject(err);
 		});
 		if (!resp || !resp.ok) return;
@@ -116,9 +137,15 @@ async function connect() {
 		setBioCode("").catch((err) => {
 			log.error("failed to clear bio", err);
 		});
-	})().catch((err) => {
-		connectError.value = err;
-	});
+
+		Promise.resolve();
+	})()
+		.catch((err) => {
+			connectError.value = err;
+		})
+		.then(() => {
+			connectDone.value = true;
+		});
 
 	w.close();
 }
@@ -161,6 +188,15 @@ async function setBioCode(code: string) {
 	});
 }
 
+function openApp(): void {
+	window.open(import.meta.env.VITE_APP_SITE + "/emotes", "_blank");
+}
+
+function closePopup(): void {
+	popupAnchor.value = null;
+	if (connectDone.value) openApp();
+}
+
 watchEffect(() => {
 	const navBlock = document.querySelector(".main-navbar");
 	if (navBlock) {
@@ -175,9 +211,7 @@ watchEffect(() => {
 	}
 });
 
-onClickOutside(popupRef, () => {
-	popupAnchor.value = null;
-});
+onClickOutside(popupRef, closePopup);
 
 onUnmounted(() => {
 	channelContainer.remove();
diff --git a/src/site/kick.com/modules/chat/ChatController.vue b/src/site/kick.com/modules/chat/ChatController.vue
index 5733794d6..bd5b52d85 100644
--- a/src/site/kick.com/modules/chat/ChatController.vue
+++ b/src/site/kick.com/modules/chat/ChatController.vue
@@ -10,7 +10,7 @@
 import { inject, ref, toRefs, watchEffect } from "vue";
 import { ObserverPromise } from "@/common/Async";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
-import ChatData from "@/site/youtube.com/modules/chat/ChatData.vue";
+import ChatData from "@/site/twitch.tv/modules/chat/ChatData.vue";
 import ChatAutocomplete from "./ChatAutocomplete.vue";
 import ChatObserver from "./ChatObserver.vue";
 import { KICK_CHANNEL_KEY } from "../..";
diff --git a/src/site/kick.com/modules/chat/ChatModule.vue b/src/site/kick.com/modules/chat/ChatModule.vue
index 6e704375a..7a0756645 100644
--- a/src/site/kick.com/modules/chat/ChatModule.vue
+++ b/src/site/kick.com/modules/chat/ChatModule.vue
@@ -5,9 +5,10 @@
 </template>
 
 <script setup lang="ts">
-import { provide } from "vue";
+import { provide, ref } from "vue";
 import { reactive } from "vue";
 import { watch } from "vue";
+import { log } from "@/common/Logger";
 import { declareModule } from "@/composable/useModule";
 import { ChatRoom, KICK_CHANNEL_KEY, KickChannelInfo } from "@/site/kick.com";
 import { useApp } from "@/site/kick.com/composable/useApp";
@@ -23,6 +24,7 @@ const { markAsReady } = declareModule<"KICK">("chat", {
 const app = useApp();
 const chatroomStore = usePinia<ChatRoom>(app, "chatroomv2");
 
+const chatroomID = ref("");
 const chan = reactive<KickChannelInfo>({
 	id: "",
 	username: "",
@@ -32,10 +34,22 @@ const chan = reactive<KickChannelInfo>({
 provide(KICK_CHANNEL_KEY, chan);
 
 if (chatroomStore) {
-	chatroomStore.$subscribe((_, s: ChatRoom) => {
+	chatroomStore.$subscribe(async (_, s: ChatRoom) => {
 		if (!s.chatroom || typeof s.chatroom.id !== "number") return;
+		if (chatroomID.value && chatroomID.value === s.chatroom.id.toString()) return;
 
-		chan.id = s.chatroom.id.toString();
+		chatroomID.value = s.chatroom.id.toString();
+
+		// need to fetch the channel because we can only get the chatroom ID from this which isn't equal to the user ID
+		const resp = await fetch(`https://kick.com/api/v2/channels/${s.currentChannelSlug}`).catch((err) => {
+			log.error("failed to fetch channel data", err);
+		});
+		if (!resp) return;
+
+		const { user_id: id } = await resp.json();
+		if (!id) return;
+
+		chan.id = id.toString();
 		chan.username = s.currentChannelSlug;
 		chan.currentMessage = s.currentMessage;
 	});

From a79500083f3c3c40905afcf70412d5f9430815e4 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Sun, 28 May 2023 22:59:35 +0200
Subject: [PATCH 05/26] refactors

---
 src/app/chat/Badge.vue                        |  2 -
 src/app/chat/EmoteTooltip.vue                 | 10 ++--
 src/composable/useWorker.ts                   |  8 +++
 src/directive/TextPaintDirective.ts           |  2 +-
 src/site/kick.com/index.ts                    |  4 +-
 src/site/kick.com/modules/auth/AuthButton.vue | 10 ++--
 src/site/kick.com/modules/auth/AuthModule.vue |  8 ++-
 .../modules/chat/ChatAutocomplete.vue         |  8 ++-
 .../kick.com/modules/chat/ChatController.vue  | 39 ++++++++++----
 .../kick.com/modules/chat/ChatMessage.vue     | 38 +++++++++++++-
 src/site/kick.com/modules/chat/ChatModule.vue | 52 +++++++++++--------
 .../kick.com/modules/chat/ChatObserver.vue    |  4 +-
 src/store/main.ts                             | 19 ++++++-
 src/worker/index.ts                           |  4 ++
 src/worker/worker.http.ts                     |  8 ++-
 15 files changed, 164 insertions(+), 52 deletions(-)

diff --git a/src/app/chat/Badge.vue b/src/app/chat/Badge.vue
index 066fb5c17..21923ade2 100644
--- a/src/app/chat/Badge.vue
+++ b/src/app/chat/Badge.vue
@@ -49,8 +49,6 @@ if (isApp(props.badge)) {
 <style scoped lang="scss">
 .seventv-chat-badge {
 	display: inline-block;
-	height: 1.8rem;
-	width: 1.8rem;
 	vertical-align: baseline;
 }
 </style>
diff --git a/src/app/chat/EmoteTooltip.vue b/src/app/chat/EmoteTooltip.vue
index 5dbfea9ab..255ac402f 100644
--- a/src/app/chat/EmoteTooltip.vue
+++ b/src/app/chat/EmoteTooltip.vue
@@ -139,25 +139,25 @@ if (props.emote.data?.owner?.style?.color) {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	max-width: 21em;
-	padding: 0.5em 1.15em;
+	max-width: 21rem;
+	padding: 0.5rem 1.15rem;
 }
 
 .seventv-tooltip-compact {
 	background-color: rgba(0, 0, 0, 0.65%);
 
 	@at-root .seventv-transparent & {
-		backdrop-filter: blur(0.25em);
+		backdrop-filter: blur(0.25rem);
 	}
 
-	border-radius: 0.33em;
+	border-radius: 0.33rem;
 	padding: 0.25em;
 }
 
 .emote-name {
 	font-size: 1.5rem;
 	font-weight: 300;
-	max-width: 21em;
+	max-width: 21rem;
 	word-break: break-all;
 	float: left;
 }
diff --git a/src/composable/useWorker.ts b/src/composable/useWorker.ts
index fc9b586bd..5f04a3d5c 100644
--- a/src/composable/useWorker.ts
+++ b/src/composable/useWorker.ts
@@ -134,6 +134,12 @@ function useHandlers(mp: MessagePort) {
 
 				break;
 			}
+			case "IDENTITY_FETCHED": {
+				const { user } = data as TypedWorkerMessage<"IDENTITY_FETCHED">;
+
+				events.emit("identity_fetched", { user });
+				break;
+			}
 			case "CHANNEL_FETCHED": {
 				const { channel } = data as TypedWorkerMessage<"CHANNEL_FETCHED">;
 
@@ -214,6 +220,7 @@ class WorkletTarget extends EventTarget {
 type WorkletEventName =
 	| "ready"
 	| "config"
+	| "identity_fetched"
 	| "channel_fetched"
 	| "cosmetic_created"
 	| "entitlement_created"
@@ -226,6 +233,7 @@ type WorkletEventName =
 type WorkletTypedEvent<EVN extends WorkletEventName> = {
 	ready: object;
 	config: TypedWorkerMessage<"CONFIG">;
+	identity_fetched: TypedWorkerMessage<"IDENTITY_FETCHED">;
 	channel_fetched: CurrentChannel;
 	cosmetic_created: Pick<SevenTV.Cosmetic, "id" | "data" | "kind">;
 	entitlement_created: Pick<SevenTV.Entitlement, "id" | "kind" | "ref_id" | "user_id">;
diff --git a/src/directive/TextPaintDirective.ts b/src/directive/TextPaintDirective.ts
index 25ddeb3ef..c08d9524f 100644
--- a/src/directive/TextPaintDirective.ts
+++ b/src/directive/TextPaintDirective.ts
@@ -16,7 +16,7 @@ export const TextPaintDirective = {
 	},
 } as Directive<HTMLElement, string | null>;
 
-function updateElementStyles(el: HTMLElement, paintID: string | null): void {
+export function updateElementStyles(el: HTMLElement, paintID: string | null): void {
 	if (!paintID || (el.hasAttribute(ATTR_SEVENTV_PAINT_ID) && el.getAttribute(ATTR_SEVENTV_PAINT_ID) !== paintID)) {
 		el.style.backgroundImage = "";
 		el.style.filter = "";
diff --git a/src/site/kick.com/index.ts b/src/site/kick.com/index.ts
index 8a3410ab1..444c60020 100644
--- a/src/site/kick.com/index.ts
+++ b/src/site/kick.com/index.ts
@@ -11,8 +11,8 @@ export interface ChatRoomData {
 }
 
 export interface KickChannelInfo {
-	id: string;
-	username: string;
+	active: boolean;
+	slug: string;
 	currentMessage: string;
 }
 
diff --git a/src/site/kick.com/modules/auth/AuthButton.vue b/src/site/kick.com/modules/auth/AuthButton.vue
index 93cb56ea0..62c212fa6 100644
--- a/src/site/kick.com/modules/auth/AuthButton.vue
+++ b/src/site/kick.com/modules/auth/AuthButton.vue
@@ -1,6 +1,6 @@
 <template>
 	<!-- Display button on the current user's channel page -->
-	<Teleport :to="channelContainer">
+	<Teleport v-if="!connectDone && identity && slug === identity.username" :to="channelContainer">
 		<div
 			v-tooltip="'Connect ' + slug + ' on kick with 7TV!'"
 			class="seventv-kick-connect"
@@ -12,14 +12,14 @@
 	</Teleport>
 
 	<!-- Display button at navbar, top right -->
-	<Teleport :to="navContainer">
+	<Teleport v-if="!connectDone" :to="navContainer">
 		<div
 			v-tooltip="t('site.kick.connect_button_site')"
 			v-tooltip:position="'bottom'"
 			class="seventv-kick-connect-nav"
 			@click="popupAnchor = navContainer"
 		>
-			<Logo7TV class="seventv-kick-connect-bouncy" />
+			<Logo7TV />
 		</div>
 	</Teleport>
 
@@ -194,7 +194,9 @@ function openApp(): void {
 
 function closePopup(): void {
 	popupAnchor.value = null;
-	if (connectDone.value) openApp();
+	if (connectDone.value) {
+		openApp();
+	}
 }
 
 watchEffect(() => {
diff --git a/src/site/kick.com/modules/auth/AuthModule.vue b/src/site/kick.com/modules/auth/AuthModule.vue
index 1bc176940..527d8a13a 100644
--- a/src/site/kick.com/modules/auth/AuthModule.vue
+++ b/src/site/kick.com/modules/auth/AuthModule.vue
@@ -1,10 +1,15 @@
 <template>
-	<AuthButton :slug="currentSlugDbc" />
+	<AuthButton
+		v-if="identityFetched && (!appUser || !appUser.connections?.some((c) => c.platform === 'KICK'))"
+		:slug="currentSlugDbc"
+	/>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { debouncedRef } from "@vueuse/core";
+import { storeToRefs } from "pinia";
+import { useStore } from "@/store/main";
 import { declareModule } from "@/composable/useModule";
 import { useApp } from "@/site/kick.com/composable/useApp";
 import { useRouter } from "@/site/kick.com/composable/useRouter";
@@ -17,6 +22,7 @@ const { markAsReady } = declareModule<"KICK">("auth", {
 
 const app = useApp();
 const router = useRouter(app);
+const { appUser, identityFetched } = storeToRefs(useStore());
 
 const currentSlug = ref("");
 const currentSlugDbc = debouncedRef(currentSlug, 1e3);
diff --git a/src/site/kick.com/modules/chat/ChatAutocomplete.vue b/src/site/kick.com/modules/chat/ChatAutocomplete.vue
index 15bde6de5..680959ab8 100644
--- a/src/site/kick.com/modules/chat/ChatAutocomplete.vue
+++ b/src/site/kick.com/modules/chat/ChatAutocomplete.vue
@@ -5,8 +5,10 @@
 <script setup lang="ts">
 import { inject, ref, toRef, watch, watchEffect } from "vue";
 import { useEventListener } from "@vueuse/core";
+import { useStore } from "@/store/main";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatEmotes } from "@/composable/chat/useChatEmotes";
+import { useCosmetics } from "@/composable/useCosmetics";
 import { KICK_CHANNEL_KEY } from "@/site/kick.com";
 
 export interface TabToken {
@@ -18,8 +20,10 @@ export interface TabToken {
 const info = inject(KICK_CHANNEL_KEY);
 if (!info) throw new Error("Could not retrieve channel info");
 
+const { identity } = useStore();
 const ctx = useChannelContext();
 const emotes = useChatEmotes(ctx);
+const cosmetics = useCosmetics(identity?.id ?? "");
 
 const currentMessage = toRef(info, "currentMessage");
 
@@ -44,7 +48,9 @@ function handleTab(n: Text, sel: Selection): void {
 	const searchWord = text.substring(tokenStart + 1, start);
 	if (!searchWord) return;
 
-	const emote = emotes.find((ae) => ae.name.toLowerCase().startsWith(searchWord.toLowerCase()));
+	const emote = [...Object.values(emotes.active), ...Object.values(cosmetics.emotes)].find((ae) =>
+		ae.name.toLowerCase().startsWith(searchWord.toLowerCase()),
+	);
 	if (!emote) return;
 
 	const textNode = document.createTextNode(`${emote.name} `);
diff --git a/src/site/kick.com/modules/chat/ChatController.vue b/src/site/kick.com/modules/chat/ChatController.vue
index bd5b52d85..1d33f4da5 100644
--- a/src/site/kick.com/modules/chat/ChatController.vue
+++ b/src/site/kick.com/modules/chat/ChatController.vue
@@ -7,19 +7,40 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref, toRefs, watchEffect } from "vue";
+import { ref, toRaw, watchEffect } from "vue";
 import { ObserverPromise } from "@/common/Async";
+import { log } from "@/common/Logger";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
+import { useWorker } from "@/composable/useWorker";
 import ChatData from "@/site/twitch.tv/modules/chat/ChatData.vue";
 import ChatAutocomplete from "./ChatAutocomplete.vue";
 import ChatObserver from "./ChatObserver.vue";
-import { KICK_CHANNEL_KEY } from "../..";
 
-const { id: channelID, username: channelUsername } = toRefs(
-	inject(KICK_CHANNEL_KEY, { id: "", username: "", currentMessage: "" }),
-);
+const props = defineProps<{
+	slug: string;
+}>();
 
-const ctx = useChannelContext(channelID.value, true);
+defineExpose({
+	onMessageSend,
+});
+
+function onMessageSend() {
+	sendWorkerMessage("CHANNEL_ACTIVE_CHATTER", {
+		channel: toRaw(ctx),
+	});
+}
+
+// need to fetch the channel because we can only get the chatroom ID from this which isn't equal to the user ID
+const resp = await fetch(`https://kick.com/api/v2/channels/${props.slug}`).catch((err) => {
+	log.error("failed to fetch channel data", err);
+});
+if (!resp) throw new Error("failed to fetch channel data");
+
+const { user_id: id } = await resp.json();
+if (!id) throw new Error("failed to get channel ID");
+
+const ctx = useChannelContext(id.toString(), true);
+const { sendMessage: sendWorkerMessage } = useWorker();
 
 // The list
 const chatList = ref<HTMLDivElement | null>(null);
@@ -30,9 +51,9 @@ let observer: ObserverPromise<HTMLDivElement> | null = null;
 watchEffect(async () => {
 	// Update channel context
 	const ok = ctx.setCurrentChannel({
-		id: channelID.value,
-		username: channelUsername.value,
-		displayName: channelUsername.value,
+		id: id.toString(),
+		username: props.slug,
+		displayName: props.slug,
 		active: true,
 	});
 	if (ok) {
diff --git a/src/site/kick.com/modules/chat/ChatMessage.vue b/src/site/kick.com/modules/chat/ChatMessage.vue
index a84dc6ba5..a27b57789 100644
--- a/src/site/kick.com/modules/chat/ChatMessage.vue
+++ b/src/site/kick.com/modules/chat/ChatMessage.vue
@@ -9,10 +9,22 @@
 			</template>
 		</Teleport>
 	</template>
+
+	<Teleport :to="badgeContainer">
+		<span class="seventv-badge-list">
+			<Badge
+				v-for="[id, badge] of cosmetics.badges"
+				:key="id"
+				:badge="badge"
+				type="app"
+				:alt="badge.data.tooltip"
+			/>
+		</span>
+	</Teleport>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { onMounted, watch } from "vue";
 import { ref } from "vue";
 import { onUnmounted } from "vue";
 import { tokenize } from "@/common/Tokenize";
@@ -20,7 +32,10 @@ import { AnyToken } from "@/common/chat/ChatMessage";
 import { IsEmoteToken } from "@/common/type-predicates/MessageTokens";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatEmotes } from "@/composable/chat/useChatEmotes";
+import { useCosmetics } from "@/composable/useCosmetics";
+import Badge from "@/app/chat/Badge.vue";
 import Emote from "@/app/chat/Emote.vue";
+import { updateElementStyles } from "@/directive/TextPaintDirective";
 
 type MessageTokenOrText = AnyToken | string;
 
@@ -29,6 +44,8 @@ export interface ChatMessageBinding {
 	authorID: string;
 	authorName: string;
 	texts: HTMLSpanElement[];
+	usernameEl: HTMLSpanElement;
+	el: HTMLDivElement;
 }
 
 const props = defineProps<{
@@ -37,12 +54,22 @@ const props = defineProps<{
 
 const ctx = useChannelContext();
 const emotes = useChatEmotes(ctx);
+const cosmetics = useCosmetics(props.bind.authorID);
+
+const badgeContainer = document.createElement("seventv-container");
 
 const containers = ref<HTMLElement[]>([]);
 const tokens = ref<MessageTokenOrText[]>([]);
 
 // Process kick's text entries into a containerized token
 function process(): void {
+	props.bind.usernameEl.insertAdjacentElement("beforebegin", badgeContainer);
+
+	if (cosmetics.paints.size) {
+		updateElementStyles(props.bind.usernameEl, Array.from(cosmetics.paints.values())[0].id);
+	}
+
+	containers.value.length = 0;
 	for (const el of props.bind.texts) {
 		const text = el.textContent ?? "";
 
@@ -50,6 +77,7 @@ function process(): void {
 			body: text,
 			chatterMap: {},
 			emoteMap: emotes.active,
+			localEmoteMap: { ...cosmetics.emotes },
 		});
 
 		const result = [] as MessageTokenOrText[];
@@ -86,6 +114,8 @@ function process(): void {
 	}
 }
 
+watch(cosmetics, process);
+
 onMounted(process);
 
 onUnmounted(() => {
@@ -107,4 +137,10 @@ onUnmounted(() => {
 	margin-left: 0 !important;
 	margin-right: 0 !important;
 }
+
+.seventv-badge-list {
+	display: inline-grid;
+	vertical-align: middle;
+	margin-right: 0.25rem;
+}
 </style>
diff --git a/src/site/kick.com/modules/chat/ChatModule.vue b/src/site/kick.com/modules/chat/ChatModule.vue
index 7a0756645..206743514 100644
--- a/src/site/kick.com/modules/chat/ChatModule.vue
+++ b/src/site/kick.com/modules/chat/ChatModule.vue
@@ -1,14 +1,14 @@
 <template>
-	<template v-if="chan.id && chan.username">
-		<ChatController />
+	<template v-if="chan.active">
+		<Suspense>
+			<ChatController ref="controller" :slug="chan.slug" />
+		</Suspense>
 	</template>
 </template>
 
 <script setup lang="ts">
-import { provide, ref } from "vue";
-import { reactive } from "vue";
-import { watch } from "vue";
-import { log } from "@/common/Logger";
+import { provide, reactive, ref, watch } from "vue";
+import { defineFunctionHook } from "@/common/Reflection";
 import { declareModule } from "@/composable/useModule";
 import { ChatRoom, KICK_CHANNEL_KEY, KickChannelInfo } from "@/site/kick.com";
 import { useApp } from "@/site/kick.com/composable/useApp";
@@ -23,11 +23,15 @@ const { markAsReady } = declareModule<"KICK">("chat", {
 // Acquire vue app
 const app = useApp();
 const chatroomStore = usePinia<ChatRoom>(app, "chatroomv2");
+type chatroomWithActions = typeof chatroomStore & {
+	sendCurrentMessage: () => void;
+};
+
+const controller = ref<InstanceType<typeof ChatController> | null>(null);
 
-const chatroomID = ref("");
 const chan = reactive<KickChannelInfo>({
-	id: "",
-	username: "",
+	active: false,
+	slug: "",
 	currentMessage: "",
 });
 
@@ -36,23 +40,17 @@ provide(KICK_CHANNEL_KEY, chan);
 if (chatroomStore) {
 	chatroomStore.$subscribe(async (_, s: ChatRoom) => {
 		if (!s.chatroom || typeof s.chatroom.id !== "number") return;
-		if (chatroomID.value && chatroomID.value === s.chatroom.id.toString()) return;
-
-		chatroomID.value = s.chatroom.id.toString();
 
-		// need to fetch the channel because we can only get the chatroom ID from this which isn't equal to the user ID
-		const resp = await fetch(`https://kick.com/api/v2/channels/${s.currentChannelSlug}`).catch((err) => {
-			log.error("failed to fetch channel data", err);
-		});
-		if (!resp) return;
+		if (chan.slug !== s.currentChannelSlug) {
+			chan.active = false;
+			await new Promise((r) => setTimeout(r, 250));
+			chan.active = true;
+		}
 
-		const { user_id: id } = await resp.json();
-		if (!id) return;
-
-		chan.id = id.toString();
-		chan.username = s.currentChannelSlug;
+		chan.slug = s.currentChannelSlug;
 		chan.currentMessage = s.currentMessage;
 	});
+
 	watch(
 		() => chan.currentMessage,
 		(v) => {
@@ -61,6 +59,16 @@ if (chatroomStore) {
 			});
 		},
 	);
+
+	defineFunctionHook(chatroomStore as chatroomWithActions, "sendCurrentMessage", function (this, ...args) {
+		const f = args[0];
+
+		if (controller.value) {
+			controller.value.onMessageSend();
+		}
+
+		return f?.apply(this, []);
+	});
 }
 
 markAsReady();
diff --git a/src/site/kick.com/modules/chat/ChatObserver.vue b/src/site/kick.com/modules/chat/ChatObserver.vue
index 032781de1..388f82576 100644
--- a/src/site/kick.com/modules/chat/ChatObserver.vue
+++ b/src/site/kick.com/modules/chat/ChatObserver.vue
@@ -23,7 +23,7 @@ function patchMessageElement(el: HTMLDivElement): void {
 	const identity = el.querySelector<HTMLSpanElement>(".chat-message-identity");
 	if (!identity) return; // missing identity
 
-	const entryUser = identity.querySelector(".chat-entry-username");
+	const entryUser = identity.querySelector<HTMLSpanElement>(".chat-entry-username");
 	if (!entryUser) return; // missing username
 
 	const userID = entryUser.getAttribute("data-chat-entry-user-id");
@@ -38,6 +38,8 @@ function patchMessageElement(el: HTMLDivElement): void {
 		authorID: userID,
 		authorName: username,
 		texts: Array.from(texts),
+		usernameEl: entryUser,
+		el,
 	};
 
 	messageMap.set(entryID, bind);
diff --git a/src/store/main.ts b/src/store/main.ts
index cea81fff5..d2cb6d4e9 100644
--- a/src/store/main.ts
+++ b/src/store/main.ts
@@ -5,7 +5,9 @@ import { IBrowser, UAParser, UAParserInstance } from "ua-parser-js";
 export interface State {
 	platform: Platform;
 	theme: Theme;
-	identity: (TwitchIdentity | YouTubeIdentity) | null;
+	identity: (TwitchIdentity | YouTubeIdentity | KickIdentity) | null;
+	identityFetched: boolean;
+	appUser: SevenTV.User | null;
 	location: Twitch.Location | null;
 	workers: {
 		net: Worker | null;
@@ -21,6 +23,8 @@ export const useStore = defineStore("main", {
 			platform: "UNKNOWN",
 			theme: "DARK",
 			identity: null,
+			identityFetched: false,
+			appUser: null,
 			location: null,
 			agent: new UAParser(),
 		} as State),
@@ -32,7 +36,18 @@ export const useStore = defineStore("main", {
 			this.platform = platform;
 			this.identity = identity;
 
-			const { sendMessage } = useWorker();
+			const { sendMessage, target } = useWorker();
+
+			target.addEventListener(
+				"identity_fetched",
+				(ev) => {
+					this.identityFetched = true;
+					if (!ev.detail.user) return;
+
+					this.appUser = ev.detail.user;
+				},
+				{ once: true },
+			);
 
 			sendMessage("STATE", {
 				identity: identity,
diff --git a/src/worker/index.ts b/src/worker/index.ts
index 79a29c6b4..c3b10cba9 100644
--- a/src/worker/index.ts
+++ b/src/worker/index.ts
@@ -10,6 +10,7 @@ export interface WorkerMessage<T extends WorkerMessageType> {
 
 export enum workerMessageType {
 	CHANNEL_ACTIVE_CHATTER,
+	IDENTITY_FETCHED,
 	CHANNEL_FETCHED,
 	CONFIG,
 	CLOSE,
@@ -32,6 +33,9 @@ export type TypedWorkerMessage<T extends WorkerMessageType> = {
 	CHANNEL_ACTIVE_CHATTER: {
 		channel: CurrentChannel;
 	};
+	IDENTITY_FETCHED: {
+		user: SevenTV.User | null;
+	};
 	CHANNEL_FETCHED: {
 		channel: CurrentChannel;
 	};
diff --git a/src/worker/worker.http.ts b/src/worker/worker.http.ts
index c82adac78..0558dbb26 100644
--- a/src/worker/worker.http.ts
+++ b/src/worker/worker.http.ts
@@ -46,10 +46,16 @@ export class WorkerHttp {
 			this.driver.eventAPI.unsubscribeChannel(ev.detail.id, ev.port);
 		});
 		driver.addEventListener("identity_updated", async (ev) => {
-			const user = await this.API().seventv.loadUserData(ev.port?.platform ?? "TWITCH", ev.detail.id);
+			const user = await this.API()
+				.seventv.loadUserData(ev.port?.platform ?? "TWITCH", ev.detail.id)
+				.catch(() => void 0);
 			if (user && ev.port) {
 				ev.port.user = user;
 			}
+
+			ev.port?.postMessage("IDENTITY_FETCHED", {
+				user: user ?? null,
+			});
 		});
 		driver.addEventListener("set_channel_presence", (ev) => {
 			if (!ev.port || !ev.port.platform || !ev.port.user || !ev.detail) return;

From 327fe6c34c25bd74d7d79b04094a57a250f1fd63 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Sun, 28 May 2023 23:40:13 +0200
Subject: [PATCH 06/26] auth logic fixes

---
 CHANGELOG-nightly.md                          |  2 +-
 locale/en_US.yaml                             |  3 +-
 src/site/kick.com/modules/auth/AuthButton.vue | 76 ++++++++++++-------
 src/site/kick.com/modules/auth/AuthModule.vue |  8 +-
 .../kick.com/modules/chat/ChatMessage.vue     |  2 +-
 5 files changed, 53 insertions(+), 38 deletions(-)

diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
index 6ec19a16f..0a3e3242a 100644
--- a/CHANGELOG-nightly.md
+++ b/CHANGELOG-nightly.md
@@ -3,7 +3,7 @@
 **The changes listed here are not assigned to an official release**.
 
 -   Added new feature: Paint Tool ([subscribers only](https://7tv.app/store))
--   Added a button to link a kick.com channel with 7TV
+-   Added a button to link a [kick.com](https://kick.com/) channel with 7TV
 -   Fixed an issue which caused mod icons to be invisible
 -   Fixed an issue which sometimes caused channel emote sets to disappear
 -   Fixed an issue which caused stylesheets to be duplicated when running in hosted mode
diff --git a/locale/en_US.yaml b/locale/en_US.yaml
index 8da566a4e..20f8f1abd 100644
--- a/locale/en_US.yaml
+++ b/locale/en_US.yaml
@@ -146,5 +146,6 @@ site:
     kick:
         connect_button_channel: Connect {CHANNEL}
         connect_button_site: Connect 7TV...
-        connect_popup_confidence: Are you sure you'd like to link your current kick.com account ({ACTOR}) with 7TV?
+        connect_popup_idle: Are you sure you'd like to link your current kick.com account ({ACTOR}) with 7TV?
+        connect_popup_connecting: Please wait for up to 10 seconds...
         connect_popup_done: Your channel has been successfully connected to 7TV! Use the 7tv.app website to start adding emotes
diff --git a/src/site/kick.com/modules/auth/AuthButton.vue b/src/site/kick.com/modules/auth/AuthButton.vue
index 62c212fa6..07902ea26 100644
--- a/src/site/kick.com/modules/auth/AuthButton.vue
+++ b/src/site/kick.com/modules/auth/AuthButton.vue
@@ -1,6 +1,15 @@
 <template>
 	<!-- Display button on the current user's channel page -->
-	<Teleport v-if="!connectDone && identity && slug === identity.username" :to="channelContainer">
+	<Teleport
+		v-if="
+			connectState !== 'done' &&
+			identity &&
+			slug === identity.username &&
+			identityFetched &&
+			(!appUser || !appUser.connections?.some((c) => c.platform === 'KICK'))
+		"
+		:to="channelContainer"
+	>
 		<div
 			v-tooltip="'Connect ' + slug + ' on kick with 7TV!'"
 			class="seventv-kick-connect"
@@ -12,7 +21,7 @@
 	</Teleport>
 
 	<!-- Display button at navbar, top right -->
-	<Teleport v-if="!connectDone" :to="navContainer">
+	<Teleport v-if="connectState !== 'done'" :to="navContainer">
 		<div
 			v-tooltip="t('site.kick.connect_button_site')"
 			v-tooltip:position="'bottom'"
@@ -27,24 +36,34 @@
 	<template v-if="popupAnchor">
 		<UiFloating :anchor="popupAnchor" :middleware="[shift({ padding: 8 })]">
 			<div ref="popupRef" class="seventv-connect-popup">
-				<h3 v-t="'site.kick.connect_button_site'" />
-				<p v-if="identity">
-					{{
-						t("site.kick." + (connectDone ? "connect_popup_done" : "connect_popup_confidence"), {
-							ACTOR: identity.username,
-						})
-					}}
-				</p>
-
-				<div class="seventv-connect-popup-buttons">
-					<template v-if="!connectDone">
-						<UiButton @click="connect">Continue</UiButton>
-						<UiButton @click="closePopup">Cancel</UiButton>
-					</template>
-					<template v-else>
-						<UiButton @click="openApp">Explore</UiButton>
-					</template>
-				</div>
+				<template v-if="!appUser">
+					<h3 v-t="'site.kick.connect_button_site'" />
+					<p v-if="identity">
+						{{
+							t("site.kick.connect_popup_" + connectState, {
+								ACTOR: identity.username,
+							})
+						}}
+					</p>
+
+					<div v-if="connectState !== 'connecting'" class="seventv-connect-popup-buttons">
+						<template v-if="connectState !== 'done'">
+							<UiButton @click="connect">Continue</UiButton>
+							<UiButton @click="closePopup">Cancel</UiButton>
+						</template>
+						<template v-else>
+							<UiButton @click="openApp">Explore</UiButton>
+						</template>
+					</div>
+				</template>
+				<template v-else>
+					<h3>7TV - Sign In</h3>
+					<p v-if="connectState === 'connecting'">{{ t("site.kick.connect_popup_connecting") }}</p>
+					<p v-else>Use this button to get signed into 7tv.app with your Kick account</p>
+					<div v-if="connectState !== 'connecting'" class="seventv-connect-popup-buttons">
+						<UiButton @click="connect">Sign In</UiButton>
+					</div>
+				</template>
 			</div>
 		</UiFloating>
 	</template>
@@ -54,6 +73,7 @@
 import { onUnmounted, ref, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
 import { onClickOutside, until, useTimeout } from "@vueuse/core";
+import { storeToRefs } from "pinia";
 import { useStore } from "@/store/main";
 import { log } from "@/common/Logger";
 import { useCookies } from "@/composable/useCookies";
@@ -73,6 +93,7 @@ defineEmits<{
 const { t } = useI18n();
 const store = useStore();
 const identity = store.identity as KickIdentity | null;
+const { appUser, identityFetched } = storeToRefs(store);
 const cookies = useCookies();
 
 const channelContainer = document.createElement("seventv-container");
@@ -83,20 +104,20 @@ navContainer.id = "seventv-kick-connect-nav";
 
 const popupAnchor = ref<HTMLElement | null>(null);
 const popupRef = ref<HTMLElement | null>(null);
+const connectState = ref<"idle" | "connecting" | "done">("idle");
 const connectError = ref<Error | null>(null);
-const connectDone = ref(false);
 
 async function connect() {
 	if (!identity) return;
 
 	connectError.value = null;
-	connectDone.value = false;
+	connectState.value = "connecting";
 
 	const w = window.open("about:blank", "_blank", "width=1,height=1");
 	if (!w) throw new Error("Failed to open window");
 
 	w.blur();
-	w.document.body.innerText = "Standby...";
+	w.document.body.innerText = "Please wait for up to 10 seconds...";
 
 	const query = new URLSearchParams({
 		platform: "KICK",
@@ -120,7 +141,7 @@ async function connect() {
 		if (!ok) return;
 
 		// wait a few seconds for the bio to update
-		await until(useTimeout(2500)).toBeTruthy();
+		await until(useTimeout(1e4 + 500)).toBeTruthy();
 
 		// Request the API to verify the code in bio
 		query.set("verify", "1");
@@ -142,12 +163,11 @@ async function connect() {
 	})()
 		.catch((err) => {
 			connectError.value = err;
+			w.close();
 		})
 		.then(() => {
-			connectDone.value = true;
+			connectState.value = "done";
 		});
-
-	w.close();
 }
 
 const tokenWrapRegexp = /\[7TV:[0-9a-fA-F]+\]/g;
@@ -194,7 +214,7 @@ function openApp(): void {
 
 function closePopup(): void {
 	popupAnchor.value = null;
-	if (connectDone.value) {
+	if (connectState.value === "done") {
 		openApp();
 	}
 }
diff --git a/src/site/kick.com/modules/auth/AuthModule.vue b/src/site/kick.com/modules/auth/AuthModule.vue
index 527d8a13a..1bc176940 100644
--- a/src/site/kick.com/modules/auth/AuthModule.vue
+++ b/src/site/kick.com/modules/auth/AuthModule.vue
@@ -1,15 +1,10 @@
 <template>
-	<AuthButton
-		v-if="identityFetched && (!appUser || !appUser.connections?.some((c) => c.platform === 'KICK'))"
-		:slug="currentSlugDbc"
-	/>
+	<AuthButton :slug="currentSlugDbc" />
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { debouncedRef } from "@vueuse/core";
-import { storeToRefs } from "pinia";
-import { useStore } from "@/store/main";
 import { declareModule } from "@/composable/useModule";
 import { useApp } from "@/site/kick.com/composable/useApp";
 import { useRouter } from "@/site/kick.com/composable/useRouter";
@@ -22,7 +17,6 @@ const { markAsReady } = declareModule<"KICK">("auth", {
 
 const app = useApp();
 const router = useRouter(app);
-const { appUser, identityFetched } = storeToRefs(useStore());
 
 const currentSlug = ref("");
 const currentSlugDbc = debouncedRef(currentSlug, 1e3);
diff --git a/src/site/kick.com/modules/chat/ChatMessage.vue b/src/site/kick.com/modules/chat/ChatMessage.vue
index a27b57789..aefe66356 100644
--- a/src/site/kick.com/modules/chat/ChatMessage.vue
+++ b/src/site/kick.com/modules/chat/ChatMessage.vue
@@ -11,7 +11,7 @@
 	</template>
 
 	<Teleport :to="badgeContainer">
-		<span class="seventv-badge-list">
+		<span v-if="cosmetics.badges.size" class="seventv-badge-list">
 			<Badge
 				v-for="[id, badge] of cosmetics.badges"
 				:key="id"

From 756c17d37bc65468cfecf562ed7fbe16ad2f0097 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Sun, 28 May 2023 23:52:36 +0200
Subject: [PATCH 07/26] bump dver

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 63347fcfb..49f5fda4d 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
 	"description": "Improve your viewing experience on Twitch & YouTube with new features, emotes, vanity and performance.",
 	"private": true,
 	"version": "3.0.8",
-	"dev_version": "3.1",
+	"dev_version": "3.2",
 	"scripts": {
 		"start": "NODE_ENV=dev yarn build:dev && NODE_ENV=dev vite --mode dev",
 		"build:section:app": "vite build --config vite.config.ts",

From e4d35dc4c81689a4f8cddd299868678376c30bad Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Sun, 28 May 2023 23:57:14 +0200
Subject: [PATCH 08/26] env oops

---
 .env.production | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.env.production b/.env.production
index a26a5175d..b3a33fd2c 100644
--- a/.env.production
+++ b/.env.production
@@ -5,4 +5,5 @@ VITE_APP_API_GQL="https://7tv.io/v3/gql"
 VITE_APP_API_REST_OLD="https://7tv.io/v2"
 VITE_APP_API_EVENTS="wss://events.7tv.io/v3"
 VITE_APP_API_EGVAULT="https://egvault.7tv.io/v1"
-VITE_APP_HOST="http://localhost:8080"
+VITE_APP_HOST="https://extension.7tv.gg"
+

From 9919a9e4ac8e276d32c7d7a3dac9d0d7808bc820 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 29 May 2023 00:16:53 +0200
Subject: [PATCH 09/26] force inline

---
 src/site/kick.com/modules/chat/ChatMessage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/site/kick.com/modules/chat/ChatMessage.vue b/src/site/kick.com/modules/chat/ChatMessage.vue
index aefe66356..67f7769f8 100644
--- a/src/site/kick.com/modules/chat/ChatMessage.vue
+++ b/src/site/kick.com/modules/chat/ChatMessage.vue
@@ -131,7 +131,7 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .seventv-emote-token {
-	display: inline-grid;
+	display: inline-grid !important;
 	vertical-align: middle;
 	margin: var(--seventv-emote-margin);
 	margin-left: 0 !important;

From 98209a9a8b46a80f9c9421643ca4d5b709c84854 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 29 May 2023 00:45:02 +0200
Subject: [PATCH 10/26] use slug as username in identity

---
 src/site/kick.com/KickSite.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/site/kick.com/KickSite.vue b/src/site/kick.com/KickSite.vue
index 510ea576c..af3b65736 100644
--- a/src/site/kick.com/KickSite.vue
+++ b/src/site/kick.com/KickSite.vue
@@ -41,7 +41,7 @@ const user = usePinia<{
 if (user) {
 	store.setIdentity("KICK", {
 		id: user.$state.user.id.toString(),
-		username: user.$state.user.username,
+		username: user.$state.user.streamer_channel.slug,
 		bio: user.$state.user.bio,
 		email: user.$state.user.email,
 	});

From a8fd4147ce1c5749ddc4cb2bb164f1c80019684d Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 29 May 2023 01:12:19 +0200
Subject: [PATCH 11/26] numeric id

---
 src/site/kick.com/KickSite.vue                | 1 +
 src/site/kick.com/modules/auth/AuthButton.vue | 2 +-
 src/types/app.d.ts                            | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/site/kick.com/KickSite.vue b/src/site/kick.com/KickSite.vue
index af3b65736..2a35b9a25 100644
--- a/src/site/kick.com/KickSite.vue
+++ b/src/site/kick.com/KickSite.vue
@@ -41,6 +41,7 @@ const user = usePinia<{
 if (user) {
 	store.setIdentity("KICK", {
 		id: user.$state.user.id.toString(),
+		numID: user.$state.user.id,
 		username: user.$state.user.streamer_channel.slug,
 		bio: user.$state.user.bio,
 		email: user.$state.user.email,
diff --git a/src/site/kick.com/modules/auth/AuthButton.vue b/src/site/kick.com/modules/auth/AuthButton.vue
index 07902ea26..b203b6a3a 100644
--- a/src/site/kick.com/modules/auth/AuthButton.vue
+++ b/src/site/kick.com/modules/auth/AuthButton.vue
@@ -194,7 +194,7 @@ async function setBioCode(code: string) {
 		referrer: "https://kick.com/dashboard/settings/profile",
 		referrerPolicy: "strict-origin-when-cross-origin",
 		body: JSON.stringify({
-			id: identity.id,
+			id: identity.numID,
 			email: identity.email,
 			bio: newBio,
 		}),
diff --git a/src/types/app.d.ts b/src/types/app.d.ts
index b1cc23a14..78da95b7c 100644
--- a/src/types/app.d.ts
+++ b/src/types/app.d.ts
@@ -388,6 +388,7 @@ declare interface YouTubeIdentity {
 
 declare interface KickIdentity {
 	id: string;
+	numID: number;
 	username: string;
 	email: string;
 	bio: string;

From 9edf89b07925397af6058240811808c2113894df Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 29 May 2023 11:07:14 +0200
Subject: [PATCH 12/26] fix: crash when logged out

---
 src/site/kick.com/KickSite.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/site/kick.com/KickSite.vue b/src/site/kick.com/KickSite.vue
index 2a35b9a25..5f58f4e70 100644
--- a/src/site/kick.com/KickSite.vue
+++ b/src/site/kick.com/KickSite.vue
@@ -38,7 +38,7 @@ const user = usePinia<{
 	};
 }>(app, "user");
 
-if (user) {
+if (user && user.$state.user) {
 	store.setIdentity("KICK", {
 		id: user.$state.user.id.toString(),
 		numID: user.$state.user.id,

From f1ad3491ce64c1fcd8e31d5f8632eb64bb15e0ad Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 29 May 2023 11:07:32 +0200
Subject: [PATCH 13/26] remove badge container on unmount

---
 src/site/kick.com/modules/chat/ChatMessage.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/site/kick.com/modules/chat/ChatMessage.vue b/src/site/kick.com/modules/chat/ChatMessage.vue
index 67f7769f8..532f65817 100644
--- a/src/site/kick.com/modules/chat/ChatMessage.vue
+++ b/src/site/kick.com/modules/chat/ChatMessage.vue
@@ -126,6 +126,8 @@ onUnmounted(() => {
 	for (const el of props.bind.texts) {
 		el.style.display = "initial"; // restore the original tokens
 	}
+
+	badgeContainer.remove();
 });
 </script>
 

From 50bf6139bb5f6d346e47e178bebb5224b2d49f07 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 29 May 2023 11:07:49 +0200
Subject: [PATCH 14/26] fix: eventapi personal events platform condition

---
 src/worker/worker.http.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/worker/worker.http.ts b/src/worker/worker.http.ts
index 0558dbb26..5216489f1 100644
--- a/src/worker/worker.http.ts
+++ b/src/worker/worker.http.ts
@@ -167,7 +167,7 @@ export class WorkerHttp {
 		// begin subscriptions to personal events in the channel
 		const cond = {
 			ctx: "channel",
-			platform: "TWITCH",
+			platform: port.platform ?? "TWITCH",
 			id: channel.id,
 		};
 

From 6146c7d15ac895f0da9b6d105ed03b22da8edcfe Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 29 May 2023 11:25:16 +0200
Subject: [PATCH 15/26] bump version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 49f5fda4d..715d4edc9 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
 	"description": "Improve your viewing experience on Twitch & YouTube with new features, emotes, vanity and performance.",
 	"private": true,
 	"version": "3.0.8",
-	"dev_version": "3.2",
+	"dev_version": "3.3",
 	"scripts": {
 		"start": "NODE_ENV=dev yarn build:dev && NODE_ENV=dev vite --mode dev",
 		"build:section:app": "vite build --config vite.config.ts",

From cf846a475018ed293bcb501b7b03c35d3ee80665 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 29 May 2023 12:28:05 +0200
Subject: [PATCH 16/26] user card patch

---
 .../kick.com/modules/chat/ChatMessage.vue     | 12 +++++
 .../kick.com/modules/chat/ChatObserver.vue    | 47 +++++++++++++++-
 .../kick.com/modules/chat/ChatUserCard.vue    | 53 +++++++++++++++++++
 3 files changed, 110 insertions(+), 2 deletions(-)
 create mode 100644 src/site/kick.com/modules/chat/ChatUserCard.vue

diff --git a/src/site/kick.com/modules/chat/ChatMessage.vue b/src/site/kick.com/modules/chat/ChatMessage.vue
index 532f65817..2eb9605ed 100644
--- a/src/site/kick.com/modules/chat/ChatMessage.vue
+++ b/src/site/kick.com/modules/chat/ChatMessage.vue
@@ -27,6 +27,7 @@
 import { onMounted, watch } from "vue";
 import { ref } from "vue";
 import { onUnmounted } from "vue";
+import { useEventListener } from "@vueuse/core";
 import { tokenize } from "@/common/Tokenize";
 import { AnyToken } from "@/common/chat/ChatMessage";
 import { IsEmoteToken } from "@/common/type-predicates/MessageTokens";
@@ -52,6 +53,10 @@ const props = defineProps<{
 	bind: ChatMessageBinding;
 }>();
 
+const emit = defineEmits<{
+	(e: "open-card", bind: ChatMessageBinding): void;
+}>();
+
 const ctx = useChannelContext();
 const emotes = useChatEmotes(ctx);
 const cosmetics = useCosmetics(props.bind.authorID);
@@ -61,6 +66,13 @@ const badgeContainer = document.createElement("seventv-container");
 const containers = ref<HTMLElement[]>([]);
 const tokens = ref<MessageTokenOrText[]>([]);
 
+// Listen for click events
+useEventListener(props.bind.usernameEl, "click", () => {
+	setTimeout(() => {
+		emit("open-card", props.bind);
+	}, 50);
+});
+
 // Process kick's text entries into a containerized token
 function process(): void {
 	props.bind.usernameEl.insertAdjacentElement("beforebegin", badgeContainer);
diff --git a/src/site/kick.com/modules/chat/ChatObserver.vue b/src/site/kick.com/modules/chat/ChatObserver.vue
index 388f82576..746eee850 100644
--- a/src/site/kick.com/modules/chat/ChatObserver.vue
+++ b/src/site/kick.com/modules/chat/ChatObserver.vue
@@ -1,19 +1,33 @@
 <template>
+	<!-- Patch messages -->
 	<template v-for="[key, bind] of messageMap" :key="key">
-		<ChatMessageVue :bind="bind" />
+		<ChatMessageVue :bind="bind" @open-card="onOpenUserCard" />
+	</template>
+
+	<!-- Modify user card -->
+	<template v-for="x of userCard" :key="x.el">
+		<ChatUserCard :el="x.el" :bind="x.bind" />
 	</template>
 </template>
 
 <script setup lang="ts">
-import { reactive, watchEffect } from "vue";
+import { nextTick, reactive, ref, watchEffect } from "vue";
 import { useMutationObserver } from "@vueuse/core";
+import { ObserverPromise } from "@/common/Async";
 import ChatMessageVue, { ChatMessageBinding } from "./ChatMessage.vue";
+import ChatUserCard from "./ChatUserCard.vue";
+
+interface ActiveUserCard {
+	bind: ChatMessageBinding;
+	el: HTMLDivElement;
+}
 
 const props = defineProps<{
 	listElement: HTMLDivElement;
 }>();
 
 const messageMap = reactive(new Map<string, ChatMessageBinding>());
+const userCard = ref<ActiveUserCard[]>([]);
 
 function patchMessageElement(el: HTMLDivElement): void {
 	if (!el.hasAttribute("data-chat-entry")) return; // not a message
@@ -45,6 +59,35 @@ function patchMessageElement(el: HTMLDivElement): void {
 	messageMap.set(entryID, bind);
 }
 
+async function onOpenUserCard(bind: ChatMessageBinding) {
+	const parent = document.getElementById("chatroom");
+	if (!parent) return;
+
+	let el = parent.querySelector<HTMLDivElement>(".user-profile");
+	if (!el) {
+		el = await new ObserverPromise<HTMLDivElement>(
+			(records, emit) => {
+				for (const rec of records) {
+					rec.addedNodes.forEach((n) => {
+						if (!(n instanceof HTMLDivElement)) return;
+						if (!n.classList.contains("user-profile")) return;
+
+						emit(n);
+					});
+				}
+			},
+			parent,
+			{ childList: true },
+		);
+	}
+
+	userCard.value.length = 0;
+	nextTick(() => {
+		if (!el) return;
+		userCard.value.push({ el, bind });
+	});
+}
+
 function patchCurrentElements(): void {
 	const entries = props.listElement.querySelectorAll("[data-chat-entry]");
 	for (const el of Array.from(entries)) {
diff --git a/src/site/kick.com/modules/chat/ChatUserCard.vue b/src/site/kick.com/modules/chat/ChatUserCard.vue
new file mode 100644
index 000000000..b4871b367
--- /dev/null
+++ b/src/site/kick.com/modules/chat/ChatUserCard.vue
@@ -0,0 +1,53 @@
+<template>
+	<Teleport :to="badgeContainer">
+		<span v-if="cosmetics.badges.size" class="seventv-badge-list">
+			<Badge
+				v-for="[id, badge] of cosmetics.badges"
+				:key="id"
+				:badge="badge"
+				type="app"
+				:alt="badge.data.tooltip"
+			/>
+		</span>
+	</Teleport>
+</template>
+
+<script setup lang="ts">
+import { onUnmounted, watchEffect } from "vue";
+import { useCosmetics } from "@/composable/useCosmetics";
+import type { ChatMessageBinding } from "./ChatMessage.vue";
+import Badge from "@/app/chat/Badge.vue";
+import { updateElementStyles } from "@/directive/TextPaintDirective";
+
+const props = defineProps<{
+	el: HTMLDivElement;
+	bind: ChatMessageBinding;
+}>();
+
+const cosmetics = useCosmetics(props.bind.authorID);
+
+const badgeContainer = document.createElement("seventv-container");
+badgeContainer.id = "seventv-badge-container";
+badgeContainer.style.width = "100%";
+
+watchEffect(() => {
+	const infoBlock = props.el.querySelector<HTMLDivElement>(".information");
+	const badgeBlock = props.el.querySelector<HTMLDivElement>(".badges-container");
+	const username = props.el.querySelector<HTMLAnchorElement>("a.username");
+
+	if (badgeBlock) {
+		badgeBlock.appendChild(badgeContainer);
+	} else if (infoBlock) {
+		infoBlock.insertAdjacentElement("afterend", badgeContainer);
+	}
+
+	if (username && cosmetics.paints.size) {
+		username.style.width = "fit-content";
+		updateElementStyles(username, Array.from(cosmetics.paints.values())[0].id);
+	}
+});
+
+onUnmounted(() => {
+	badgeContainer.remove();
+});
+</script>

From 26752951b4bf4a6ce6ae0fb97ba8bfe55885e17b Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 29 May 2023 12:44:28 +0200
Subject: [PATCH 17/26] aggressive load check

---
 src/site/kick.com/modules/chat/ChatModule.vue | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/site/kick.com/modules/chat/ChatModule.vue b/src/site/kick.com/modules/chat/ChatModule.vue
index 206743514..fea9d471b 100644
--- a/src/site/kick.com/modules/chat/ChatModule.vue
+++ b/src/site/kick.com/modules/chat/ChatModule.vue
@@ -7,12 +7,14 @@
 </template>
 
 <script setup lang="ts">
-import { provide, reactive, ref, watch } from "vue";
+import { onMounted, provide, reactive, ref, watch } from "vue";
+import { useEventListener } from "@vueuse/core";
 import { defineFunctionHook } from "@/common/Reflection";
 import { declareModule } from "@/composable/useModule";
 import { ChatRoom, KICK_CHANNEL_KEY, KickChannelInfo } from "@/site/kick.com";
 import { useApp } from "@/site/kick.com/composable/useApp";
 import { usePinia } from "@/site/kick.com/composable/usePinia";
+import { useRouter } from "@/site/kick.com/composable/useRouter";
 import ChatController from "./ChatController.vue";
 
 const { markAsReady } = declareModule<"KICK">("chat", {
@@ -22,10 +24,7 @@ const { markAsReady } = declareModule<"KICK">("chat", {
 
 // Acquire vue app
 const app = useApp();
-const chatroomStore = usePinia<ChatRoom>(app, "chatroomv2");
-type chatroomWithActions = typeof chatroomStore & {
-	sendCurrentMessage: () => void;
-};
+const router = useRouter(app);
 
 const controller = ref<InstanceType<typeof ChatController> | null>(null);
 
@@ -37,7 +36,17 @@ const chan = reactive<KickChannelInfo>({
 
 provide(KICK_CHANNEL_KEY, chan);
 
-if (chatroomStore) {
+let ok = false;
+function handle(): void {
+	if (ok) return;
+
+	const chatroomStore = usePinia<ChatRoom>(app, "chatroomv2");
+	type chatroomWithActions = typeof chatroomStore & {
+		sendCurrentMessage: () => void;
+	};
+	if (!chatroomStore) return;
+
+	ok = true;
 	chatroomStore.$subscribe(async (_, s: ChatRoom) => {
 		if (!s.chatroom || typeof s.chatroom.id !== "number") return;
 
@@ -71,5 +80,12 @@ if (chatroomStore) {
 	});
 }
 
+onMounted(() => {
+	handle();
+});
+
+watch(() => router.currentRoute, handle, { immediate: true });
+useEventListener(document, "click", handle);
+
 markAsReady();
 </script>

From 7be837c632ff162bdd23d8549cf811fc0dffb2b6 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 29 May 2023 14:17:46 +0200
Subject: [PATCH 18/26] nit: user card badge size

---
 src/site/kick.com/modules/chat/ChatUserCard.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/site/kick.com/modules/chat/ChatUserCard.vue b/src/site/kick.com/modules/chat/ChatUserCard.vue
index b4871b367..15f05f29c 100644
--- a/src/site/kick.com/modules/chat/ChatUserCard.vue
+++ b/src/site/kick.com/modules/chat/ChatUserCard.vue
@@ -51,3 +51,9 @@ onUnmounted(() => {
 	badgeContainer.remove();
 });
 </script>
+
+<style scoped lang="scss">
+:deep(.seventv-chat-badge > img) {
+	height: 1.25rem;
+}
+</style>

From 8a9caeba67276dd7396937ec0d5e13f10c348409 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 29 May 2023 19:03:36 +0200
Subject: [PATCH 19/26] emote menu

---
 .../modules => app}/chat/ChatData.vue         |   9 +-
 src/app/emote-menu/EmoteMenu.vue              | 277 ++++++++++++++++++
 .../emote-menu/EmoteMenuContext.ts            |   0
 .../emote-menu/EmoteMenuSet.vue               |  11 +-
 .../emote-menu/EmoteMenuTab.vue               |   8 +-
 src/assets/svg/logos/Logo.vue                 |  12 +-
 src/assets/svg/logos/LogoKick.vue             |   9 +
 src/common/Image.ts                           |   2 +-
 src/common/Transform.ts                       |  12 +-
 src/composable/chat/useChatEmotes.ts          |   2 +-
 src/site/global/components/EmoteCard.vue      |   2 +-
 src/site/kick.com/KickSite.vue                |   2 +-
 .../modules/chat/ChatAutocomplete.vue         |  15 +-
 .../kick.com/modules/chat/ChatController.vue  |  56 +++-
 .../kick.com/modules/chat/ChatMessage.vue     |   6 +-
 .../kick.com/modules/chat/ChatObserver.vue    |  26 +-
 src/site/twitch.tv/TwitchSite.vue             |   2 +-
 .../twitch.tv/modules/chat-vod/ChatVod.vue    |   4 +-
 .../twitch.tv/modules/chat/ChatController.vue |   2 +-
 src/site/twitch.tv/modules/chat/ChatList.vue  |   2 +-
 .../modules/emote-menu/EmoteMenu.vue          |  67 +----
 .../modules/emote-menu/EmoteMenuButton.vue    |   2 +-
 src/site/youtube.com/YouTubeSite.vue          |   2 +-
 src/store/main.ts                             |  11 +-
 src/types/app.d.ts                            |   2 +-
 src/worker/index.ts                           |   1 +
 src/worker/worker.http.ts                     |  12 +-
 src/worker/worker.port.ts                     |   8 +-
 28 files changed, 440 insertions(+), 124 deletions(-)
 rename src/{site/twitch.tv/modules => app}/chat/ChatData.vue (95%)
 create mode 100644 src/app/emote-menu/EmoteMenu.vue
 rename src/{site/twitch.tv/modules => app}/emote-menu/EmoteMenuContext.ts (100%)
 rename src/{site/twitch.tv/modules => app}/emote-menu/EmoteMenuSet.vue (96%)
 rename src/{site/twitch.tv/modules => app}/emote-menu/EmoteMenuTab.vue (97%)
 create mode 100644 src/assets/svg/logos/LogoKick.vue

diff --git a/src/site/twitch.tv/modules/chat/ChatData.vue b/src/app/chat/ChatData.vue
similarity index 95%
rename from src/site/twitch.tv/modules/chat/ChatData.vue
rename to src/app/chat/ChatData.vue
index 6755642a2..2baed1b58 100644
--- a/src/site/twitch.tv/modules/chat/ChatData.vue
+++ b/src/app/chat/ChatData.vue
@@ -1,6 +1,7 @@
 <template />
 <script setup lang="ts">
 import { onUnmounted, ref, toRef } from "vue";
+import { useStore } from "@/store/main";
 import { ChatMessage } from "@/common/chat/ChatMessage";
 import { db } from "@/db/idb";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
@@ -16,6 +17,7 @@ const ctx = useChannelContext();
 const channelID = toRef(ctx, "id");
 const messages = useChatMessages(ctx);
 const emotes = useChatEmotes(ctx);
+const { providers } = useStore();
 
 // query the channel's emote set bindings
 const channelSets = useLiveQuery(
@@ -49,6 +51,7 @@ useLiveQuery(
 		if (!sets) return;
 
 		for (const set of sets) {
+			if (!set.provider || !providers.has(set.provider)) continue;
 			const provider = (set.provider ?? "UNKNOWN") as SevenTV.Provider;
 
 			if (!emotes.providers[provider]) emotes.providers[provider] = {};
@@ -183,11 +186,11 @@ function onActiveSetUpdated(
 }
 
 function onTwitchEmoteSetData(ev: WorkletEvent<"twitch_emote_set_data">) {
-	if (!emotes.providers.TWITCH) {
-		emotes.providers.TWITCH = {};
+	if (!emotes.providers.PLATFORM) {
+		emotes.providers.PLATFORM = {};
 	}
 
-	emotes.providers.TWITCH[ev.detail.id] = ev.detail;
+	emotes.providers.PLATFORM[ev.detail.id] = ev.detail;
 }
 
 target.addEventListener("emote_set_updated", onEmoteSetUpdated);
diff --git a/src/app/emote-menu/EmoteMenu.vue b/src/app/emote-menu/EmoteMenu.vue
new file mode 100644
index 000000000..d9887f6f5
--- /dev/null
+++ b/src/app/emote-menu/EmoteMenu.vue
@@ -0,0 +1,277 @@
+<template>
+	<UiFloating :anchor="anchorEl" placement="top-end" :middleware="[shift({ mainAxis: true, crossAxis: true })]">
+		<div v-if="ctx.open && ctx.channelID" ref="containerRef" class="seventv-emote-menu-container">
+			<div class="seventv-emote-menu">
+				<!-- Emote Menu Header -->
+				<div class="seventv-emote-menu-header">
+					<div class="seventv-emote-menu-header-providers">
+						<template v-for="(b, key) in visibleProviders">
+							<div
+								v-if="b"
+								:key="key"
+								class="seventv-emote-menu-provider-icon"
+								:selected="key === activeProvider"
+								@click="activeProvider = key"
+							>
+								<Logo v-if="key !== 'FAVORITE'" :provider="key" />
+								<StarIcon v-else />
+								<span v-show="key === activeProvider && key !== 'FAVORITE'">{{ key }}</span>
+							</div>
+						</template>
+					</div>
+					<div v-if="!isSearchInputEnabled" class="emote-search">
+						<input ref="searchInputRef" v-model="ctx.filter" class="emote-search-input" />
+						<div class="search-icon">
+							<SearchIcon />
+						</div>
+					</div>
+				</div>
+
+				<!-- Emote menu body -->
+				<div
+					v-for="(_, key) in visibleProviders"
+					v-show="key === activeProvider"
+					:key="key"
+					class="seventv-emote-menu-body"
+				>
+					<EmoteMenuTab
+						:provider="key"
+						:selected="key === activeProvider"
+						@emote-clicked="emit('emote-click', $event)"
+						@provider-visible="onProviderVisibilityChange(key, $event)"
+						@toggle-settings="settingsContext.toggle()"
+						@toggle-native-menu="toggle()"
+					/>
+				</div>
+			</div>
+		</div>
+	</UiFloating>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import { onKeyStroke, 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";
+import Logo from "@/assets/svg/logos/Logo.vue";
+import { useEmoteMenuContext } from "./EmoteMenuContext";
+import EmoteMenuTab from "./EmoteMenuTab.vue";
+import { useSettingsMenu } from "@/app/settings/Settings";
+import UiFloating from "@/ui/UiFloating.vue";
+import { shift } from "@floating-ui/dom";
+
+export type EmoteMenuTabName = SevenTV.Provider | "FAVORITE";
+
+defineProps<{
+	anchorEl: HTMLElement;
+}>();
+
+const emit = defineEmits<{
+	(e: "emote-click", emote: SevenTV.ActiveEmote): void;
+}>();
+
+const containerRef = ref<HTMLElement | undefined>();
+
+const channelCtx = useChannelContext();
+const ctx = useEmoteMenuContext();
+ctx.channelID = channelCtx.id;
+
+const settingsContext = useSettingsMenu();
+const { providers } = useStore();
+
+const searchInputRef = ref<HTMLInputElement | undefined>();
+
+const isSearchInputEnabled = useConfig<boolean>("ui.emote_menu_search");
+
+const activeProvider = ref<EmoteMenuTabName | null>("7TV");
+const visibleProviders = reactive<Record<EmoteMenuTabName, boolean>>({
+	FAVORITE: true,
+	"7TV": providers.has("7TV"),
+	FFZ: providers.has("FFZ"),
+	BTTV: providers.has("BTTV"),
+	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,
+	);*/
+});
+
+// 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() {
+	ctx.open = !ctx.open;
+}
+
+// Handle change in the visibility of a provider while using search
+// and if the current active provider has no content, switch to the next available
+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;
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.seventv-emote-menu-button {
+	display: grid;
+	place-items: center;
+	width: 100%;
+	height: 100%;
+	font-size: 2rem;
+	transition: color 150ms ease-in-out;
+
+	&.menu-open {
+		color: var(--seventv-primary);
+	}
+}
+
+.seventv-emote-menu-container {
+	max-width: 100%;
+	z-index: 10;
+
+	.seventv-emote-menu {
+		position: relative;
+		max-height: calc(100vh - 15rem);
+		display: flex;
+		flex-direction: column;
+		width: 32rem;
+		overflow: clip;
+		border-radius: 0.25rem;
+		background-color: var(--seventv-background-transparent-1);
+
+		@at-root .seventv-transparent & {
+			backdrop-filter: blur(1rem);
+		}
+
+		outline: 0.1rem solid var(--seventv-border-transparent-1);
+
+		.seventv-emote-menu-header {
+			border-bottom: 0.1rem solid var(--seventv-border-transparent-1);
+			border-radius: 0.6rem 0.6rem 0 0;
+			background: hsla(0deg, 0%, 50%, 6%);
+
+			.seventv-emote-menu-header-providers {
+				display: flex;
+				height: 4.5rem;
+				justify-content: space-evenly;
+				column-gap: 0.5rem;
+				padding: 0.75rem;
+
+				.seventv-emote-menu-provider-icon {
+					padding: 0.5rem;
+					cursor: pointer;
+					display: flex;
+					user-select: none;
+					justify-content: center;
+					column-gap: 0.5em;
+					background: hsla(0deg, 0%, 50%, 6%);
+					color: var(--seventv-text-color-secondary);
+					border-radius: 0.2rem;
+					flex-grow: 1;
+					width: 2rem;
+
+					&:hover {
+						background: #80808029;
+					}
+
+					transition: width 90ms ease-in-out, background 150ms ease-in-out;
+
+					&[selected="true"] {
+						background: var(--seventv-highlight-neutral-1);
+						color: var(--seventv-text-color-normal);
+						width: 6em;
+					}
+
+					> svg {
+						width: 2rem;
+						height: 2rem;
+					}
+
+					> span {
+						font-family: Roboto, monospace;
+						font-weight: 600;
+					}
+				}
+			}
+
+			.emote-search {
+				padding: 0 0.75rem 0.75rem;
+				width: 100%;
+				position: relative;
+
+				.search-icon {
+					position: absolute;
+					display: flex;
+					align-items: center;
+					top: 0;
+					left: 1rem;
+					height: 3rem;
+					width: 3rem;
+					user-select: none;
+					pointer-events: none;
+					padding: 0.85rem;
+					color: var(--seventv-border-transparent-1);
+
+					> svg {
+						height: 100%;
+						width: 100%;
+					}
+				}
+
+				.emote-search-input {
+					background-color: var(--seventv-background-shade-1);
+					border-radius: 0.4rem;
+					height: 3rem;
+					width: 100%;
+					border: 1px solid var(--seventv-border-transparent-1);
+					padding-left: 3rem;
+					color: currentcolor;
+					outline: none;
+					transition: outline 140ms;
+
+					&:focus {
+						outline: 1px solid var(--seventv-primary);
+					}
+				}
+			}
+		}
+
+		.seventv-emote-menu-body {
+			display: flex;
+			height: 40rem;
+			overflow: hidden;
+			flex-shrink: 1;
+
+			&[selected="false"] {
+				display: none;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/site/twitch.tv/modules/emote-menu/EmoteMenuContext.ts b/src/app/emote-menu/EmoteMenuContext.ts
similarity index 100%
rename from src/site/twitch.tv/modules/emote-menu/EmoteMenuContext.ts
rename to src/app/emote-menu/EmoteMenuContext.ts
diff --git a/src/site/twitch.tv/modules/emote-menu/EmoteMenuSet.vue b/src/app/emote-menu/EmoteMenuSet.vue
similarity index 96%
rename from src/site/twitch.tv/modules/emote-menu/EmoteMenuSet.vue
rename to src/app/emote-menu/EmoteMenuSet.vue
index 624c96b8e..0b42fedbf 100644
--- a/src/site/twitch.tv/modules/emote-menu/EmoteMenuSet.vue
+++ b/src/app/emote-menu/EmoteMenuSet.vue
@@ -23,7 +23,7 @@
 				:set-id="es.id"
 				:emote-id="ae.id"
 				:zero-width="(ae.flags || 0 & 256) !== 0"
-				:favorite="favorites.has(ae.id) && es.id !== 'FAVORITE'"
+				:favorite="favorites?.has(ae.id) && es.id !== 'FAVORITE'"
 				tabindex="0"
 				@click="onInsertEmote(ae)"
 				@keydown.enter.prevent="onInsertEmote(ae)"
@@ -168,13 +168,13 @@ function setupObserver() {
 		entries.forEach(async (entry) => {
 			const eid = entry.target.getAttribute("emote-id") as string;
 
-			// if the element is intersecting, wait 350ms before loading it
+			// if the element is intersecting, wait a bit before loading it
 			if (entry.isIntersecting && !loaded[eid]) {
 				const previouslyLoaded = loaded[eid] === -1;
 				loaded[eid] = 0;
 
 				if (shouldDebounceLoading && !previouslyLoaded && debounceCards.value) {
-					await until(useTimeout(350)).toBeTruthy();
+					await until(useTimeout(100)).toBeTruthy();
 				}
 			}
 
@@ -184,7 +184,7 @@ function setupObserver() {
 				return;
 			}
 
-			// if the element has been intersecting for 350ms, load it
+			// if the element has been intersecting for enough time, load it
 			if (entry.isIntersecting && loaded[eid] === 0) {
 				loaded[eid] = 1;
 				return;
@@ -221,10 +221,13 @@ function onObserve(lifecycle: ElementLifecycle, el: HTMLElement) {
 }
 
 function isCollapsed(): boolean {
+	if (!collapsedSets.value) return false;
+
 	return collapsedSets.value.has(props.es.id);
 }
 
 function toggleCollapsed(): void {
+	if (!collapsedSets.value) return;
 	if (isCollapsed()) {
 		collapsedSets.value.delete(props.es.id);
 		collapsed.value = false;
diff --git a/src/site/twitch.tv/modules/emote-menu/EmoteMenuTab.vue b/src/app/emote-menu/EmoteMenuTab.vue
similarity index 97%
rename from src/site/twitch.tv/modules/emote-menu/EmoteMenuTab.vue
rename to src/app/emote-menu/EmoteMenuTab.vue
index a1709ff27..04616117b 100644
--- a/src/site/twitch.tv/modules/emote-menu/EmoteMenuTab.vue
+++ b/src/app/emote-menu/EmoteMenuTab.vue
@@ -2,8 +2,8 @@
 	<div class="emote-area-container">
 		<UiScrollable class="scroll-area">
 			<!-- Native Menu Toggle -->
-			<div v-if="provider === 'TWITCH'" class="native-menu-toggle" @click="emit('toggle-native-menu')">
-				<Logo provider="TWITCH" />
+			<div v-if="provider === 'PLATFORM'" class="native-menu-toggle" @click="emit('toggle-native-menu')">
+				<Logo provider="PLATFORM" />
 				<span v-t="'emote_menu.native'" />
 			</div>
 
@@ -115,6 +115,8 @@ const emojiCategories = [
 // Note the logic for favorites is also bad, though doesn't affect as many users
 
 function updateFavorites() {
+	if (!favorites.value) return [];
+
 	return Array.from(favorites.value.values())
 		.map((eid) => emotes.find((ae) => ae.id === eid))
 		.filter((ae) => !!ae) as SevenTV.ActiveEmote[];
@@ -202,7 +204,7 @@ const filterSets = debounceFn(() => {
 		ary.push(...Array.from(cosmetics.emoteSets.values()).filter((e) => e.provider === props.provider));
 	}
 
-	if (props.provider === "TWITCH") {
+	if (props.provider === "PLATFORM") {
 		const res = ary.reduce((accu, cur) => {
 			const p = accu[cur.name];
 			if (p) {
diff --git a/src/assets/svg/logos/Logo.vue b/src/assets/svg/logos/Logo.vue
index a96196522..82f4f754d 100644
--- a/src/assets/svg/logos/Logo.vue
+++ b/src/assets/svg/logos/Logo.vue
@@ -3,10 +3,12 @@
 </template>
 
 <script setup lang="ts">
+import { useStore } from "@/store/main";
 import Logo7TV from "@/assets/svg/logos/Logo7TV.vue";
 import LogoBTTV from "@/assets/svg/logos/LogoBTTV.vue";
 import LogoFFZ from "@/assets/svg/logos/LogoFFZ.vue";
 import LogoTwitch from "@/assets/svg/logos/LogoTwitch.vue";
+import LogoKick from "./LogoKick.vue";
 import EmojiIcon from "../icons/EmojiIcon.vue";
 
 const props = withDefaults(
@@ -16,11 +18,19 @@ const props = withDefaults(
 	{ provider: "7TV" },
 );
 
+const { platform } = useStore();
+
 const c = {
 	"7TV": Logo7TV,
 	FFZ: LogoFFZ,
 	BTTV: LogoBTTV,
-	TWITCH: LogoTwitch,
+	PLATFORM: (
+		{
+			TWITCH: LogoTwitch,
+			YOUTUBE: LogoTwitch,
+			KICK: LogoKick,
+		} as Record<Platform, AnyInstanceType>
+	)[platform],
 	EMOJI: EmojiIcon,
 }[props.provider];
 </script>
diff --git a/src/assets/svg/logos/LogoKick.vue b/src/assets/svg/logos/LogoKick.vue
new file mode 100644
index 000000000..4979387e7
--- /dev/null
+++ b/src/assets/svg/logos/LogoKick.vue
@@ -0,0 +1,9 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1539.02 1539.02" width="1em" height="1em" fill="none">
+		<polygon
+			fill="currentColor"
+			fill-rule="evenodd"
+			points="278.26 216.86 646.7 216.86 646.7 462.48 769.51 462.48 769.51 339.67 892.32 339.67 892.32 216.86 1260.75 216.86 1260.75 585.29 1137.94 585.29 1137.94 708.1 1015.13 708.1 1015.13 830.91 1137.94 830.91 1137.94 953.72 1260.75 953.72 1260.75 1322.16 892.32 1322.16 892.32 1199.35 769.51 1199.35 769.51 1076.54 646.7 1076.54 646.7 1322.16 278.26 1322.16 278.26 216.86"
+		/>
+	</svg>
+</template>
diff --git a/src/common/Image.ts b/src/common/Image.ts
index bf093c6da..7f6861046 100644
--- a/src/common/Image.ts
+++ b/src/common/Image.ts
@@ -1,7 +1,7 @@
 import { useUserAgent } from "@/composable/useUserAgent";
 
 const layout = {
-	TWITCH: [1, 2, 3],
+	PLATFORM: [1, 2, 3],
 	"7TV": [1, 2, 3, 4],
 	FFZ: [1, 2, 4],
 	BTTV: [1, 2, 4],
diff --git a/src/common/Transform.ts b/src/common/Transform.ts
index 00b71ad05..c83f7513c 100644
--- a/src/common/Transform.ts
+++ b/src/common/Transform.ts
@@ -4,17 +4,17 @@ import { ChatMessage, ChatUser } from "./chat/ChatMessage";
 
 const BTTV_ZeroWidth = ["SoSnowy", "IceCold", "SantaHat", "TopHat", "ReinDeer", "CandyCane", "cvMask", "cvHazmat"];
 
-export function convertTwitchEmoteSet(data: Twitch.TwitchEmoteSet): SevenTV.EmoteSet {
+export function convertPlatformEmoteSet(data: Twitch.TwitchEmoteSet): SevenTV.EmoteSet {
 	const isGlobalSet = !data.owner;
 
 	return {
-		id: "TWITCH#" + data.id,
+		id: "PLATFORM#" + data.id,
 		name: data.owner?.displayName ?? "Global Emotes",
 		immutable: true,
 		privileged: true,
 		tags: [],
 		flags: 0,
-		provider: "TWITCH",
+		provider: "PLATFORM",
 		scope: isGlobalSet ? "GLOBAL" : "CHANNEL",
 		owner: data.owner?.displayName
 			? {
@@ -30,7 +30,7 @@ export function convertTwitchEmoteSet(data: Twitch.TwitchEmoteSet): SevenTV.Emot
 				id: e.id,
 				name: e.token,
 				flags: 0,
-				provider: "TWITCH",
+				provider: "PLATFORM",
 				data: d,
 			};
 		}),
@@ -80,7 +80,7 @@ export function convertTwitchEmote(
 		},
 	};
 
-	emote.host.srcset = imageHostToSrcset(emote.host, "TWITCH");
+	emote.host.srcset = imageHostToSrcset(emote.host, "PLATFORM");
 	return emote;
 }
 
@@ -325,7 +325,7 @@ export function convertTwitchBadge(data: TwTypeBadge): SevenTV.Cosmetic<"BADGE">
 	return {
 		id: data.setID + ":" + data.version,
 		kind: "BADGE",
-		provider: "TWITCH",
+		provider: "PLATFORM",
 		data: {
 			name: data.title,
 			host: {
diff --git a/src/composable/chat/useChatEmotes.ts b/src/composable/chat/useChatEmotes.ts
index 1f19560c2..40c5838d2 100644
--- a/src/composable/chat/useChatEmotes.ts
+++ b/src/composable/chat/useChatEmotes.ts
@@ -24,7 +24,7 @@ export function useChatEmotes(ctx: ChannelContext) {
 				"7TV": reactive({}),
 				FFZ: reactive({}),
 				BTTV: reactive({}),
-				TWITCH: reactive({}),
+				PLATFORM: reactive({}),
 				EMOJI: reactive(emojiSets),
 			},
 		});
diff --git a/src/site/global/components/EmoteCard.vue b/src/site/global/components/EmoteCard.vue
index 5f520b454..e619b8597 100644
--- a/src/site/global/components/EmoteCard.vue
+++ b/src/site/global/components/EmoteCard.vue
@@ -74,7 +74,7 @@ function emptyUser() {
 
 watchEffect(async () => {
 	// for twitch emotes we
-	if (props.emote.provider === "TWITCH") {
+	if (props.emote.provider === "PLATFORM") {
 		const apollo = useApollo();
 		if (!apollo) return;
 
diff --git a/src/site/kick.com/KickSite.vue b/src/site/kick.com/KickSite.vue
index 5f58f4e70..49ed7efc3 100644
--- a/src/site/kick.com/KickSite.vue
+++ b/src/site/kick.com/KickSite.vue
@@ -21,7 +21,7 @@ const ua = useUserAgent();
 
 ua.preferredFormat = store.avifSupported ? "AVIF" : "WEBP";
 store.setPreferredImageFormat(ua.preferredFormat);
-store.setPlatform("KICK", []);
+store.setPlatform("KICK", ["7TV"], []);
 
 document.body.setAttribute("seventv-kick", "true");
 
diff --git a/src/site/kick.com/modules/chat/ChatAutocomplete.vue b/src/site/kick.com/modules/chat/ChatAutocomplete.vue
index 680959ab8..db83fb191 100644
--- a/src/site/kick.com/modules/chat/ChatAutocomplete.vue
+++ b/src/site/kick.com/modules/chat/ChatAutocomplete.vue
@@ -1,6 +1,4 @@
-<template>
-	<Teleport :to="container"> </Teleport>
-</template>
+<template />
 
 <script setup lang="ts">
 import { inject, ref, toRef, watch, watchEffect } from "vue";
@@ -26,8 +24,6 @@ const emotes = useChatEmotes(ctx);
 const cosmetics = useCosmetics(identity?.id ?? "");
 
 const currentMessage = toRef(info, "currentMessage");
-
-const container = ref<HTMLElement | null>(null);
 const inputEl = ref<HTMLDivElement | null>(null);
 
 function renderInputTokens(): void {
@@ -82,15 +78,6 @@ useEventListener(inputEl, "keydown", (ev: KeyboardEvent) => {
 });
 
 watchEffect(() => {
-	const footer = document.getElementById("chatroom-footer");
-	if (!footer) return;
-
-	const el = document.createElement("seventv-container");
-	el.id = "seventv-autocomplete-container";
-
-	footer.insertAdjacentElement("afterbegin", el);
-
-	container.value = el;
 	inputEl.value = (document.getElementById("message-input") as HTMLDivElement) ?? null;
 });
 </script>
diff --git a/src/site/kick.com/modules/chat/ChatController.vue b/src/site/kick.com/modules/chat/ChatController.vue
index 1d33f4da5..cc0a26424 100644
--- a/src/site/kick.com/modules/chat/ChatController.vue
+++ b/src/site/kick.com/modules/chat/ChatController.vue
@@ -4,17 +4,30 @@
 		<ChatAutocomplete />
 	</template>
 	<ChatData />
+
+	<Teleport :to="emoteMenuButtonContainer">
+		<button ref="emoteMenuButton" class="seventv-emote-menu-button" @click="emoteMenu.open = !emoteMenu.open">
+			<Logo7TV provider="7TV" class="icon" />
+		</button>
+	</Teleport>
+
+	<template v-if="emoteMenu.open && emoteMenuAnchor">
+		<EmoteMenu :anchor-el="emoteMenuAnchor" />
+	</template>
 </template>
 
 <script setup lang="ts">
-import { ref, toRaw, watchEffect } from "vue";
+import { onUnmounted, ref, toRaw, watchEffect } from "vue";
 import { ObserverPromise } from "@/common/Async";
 import { log } from "@/common/Logger";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useWorker } from "@/composable/useWorker";
-import ChatData from "@/site/twitch.tv/modules/chat/ChatData.vue";
+import Logo7TV from "@/assets/svg/logos/Logo7TV.vue";
 import ChatAutocomplete from "./ChatAutocomplete.vue";
 import ChatObserver from "./ChatObserver.vue";
+import ChatData from "@/app/chat/ChatData.vue";
+import EmoteMenu from "@/app/emote-menu/EmoteMenu.vue";
+import { useEmoteMenuContext } from "@/app/emote-menu/EmoteMenuContext";
 
 const props = defineProps<{
 	slug: string;
@@ -46,9 +59,22 @@ const { sendMessage: sendWorkerMessage } = useWorker();
 const chatList = ref<HTMLDivElement | null>(null);
 const shallowList = ref<HTMLDivElement | null>(null);
 
+const emoteMenu = useEmoteMenuContext();
+const emoteMenuAnchor = document.getElementById("chatroom-footer");
+
+const emoteMenuButtonContainer = document.createElement("seventv-container");
+
 let observer: ObserverPromise<HTMLDivElement> | null = null;
 
 watchEffect(async () => {
+	const parent = document.getElementById("chatroom");
+	if (!parent) return;
+
+	const inputRow = parent.querySelector(".chat-message-row");
+	if (!inputRow) return;
+
+	inputRow.lastElementChild?.insertAdjacentElement("beforebegin", emoteMenuButtonContainer);
+
 	// Update channel context
 	const ok = ctx.setCurrentChannel({
 		id: id.toString(),
@@ -93,4 +119,30 @@ watchEffect(async () => {
 		shallowList.value = chatroomTop.nextElementSibling.firstElementChild as HTMLDivElement;
 	}
 });
+
+onUnmounted(() => {
+	emoteMenuButtonContainer.remove();
+});
 </script>
+
+<style scoped lang="scss">
+.seventv-emote-menu-button {
+	display: grid;
+	align-items: center;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	transition: background 0.2s ease-in-out;
+	height: 2.25rem;
+	border-radius: 0.25rem;
+	padding: 0 0.5rem;
+
+	&:hover {
+		background: rgba(255, 255, 255, 10%);
+	}
+
+	.icon {
+		font-size: 1.25rem;
+	}
+}
+</style>
diff --git a/src/site/kick.com/modules/chat/ChatMessage.vue b/src/site/kick.com/modules/chat/ChatMessage.vue
index 2eb9605ed..19f6b9ea5 100644
--- a/src/site/kick.com/modules/chat/ChatMessage.vue
+++ b/src/site/kick.com/modules/chat/ChatMessage.vue
@@ -67,10 +67,8 @@ const containers = ref<HTMLElement[]>([]);
 const tokens = ref<MessageTokenOrText[]>([]);
 
 // Listen for click events
-useEventListener(props.bind.usernameEl, "click", () => {
-	setTimeout(() => {
-		emit("open-card", props.bind);
-	}, 50);
+useEventListener(props.bind.usernameEl.parentElement, "click", () => {
+	emit("open-card", props.bind);
 });
 
 // Process kick's text entries into a containerized token
diff --git a/src/site/kick.com/modules/chat/ChatObserver.vue b/src/site/kick.com/modules/chat/ChatObserver.vue
index 746eee850..4ddae20b1 100644
--- a/src/site/kick.com/modules/chat/ChatObserver.vue
+++ b/src/site/kick.com/modules/chat/ChatObserver.vue
@@ -88,14 +88,14 @@ async function onOpenUserCard(bind: ChatMessageBinding) {
 	});
 }
 
-function patchCurrentElements(): void {
+function patch(): void {
 	const entries = props.listElement.querySelectorAll("[data-chat-entry]");
 	for (const el of Array.from(entries)) {
 		patchMessageElement(el as HTMLDivElement);
 	}
 }
 
-watchEffect(patchCurrentElements);
+watchEffect(patch);
 
 useMutationObserver(
 	props.listElement,
@@ -110,3 +110,25 @@ useMutationObserver(
 	{ childList: true },
 );
 </script>
+
+<style scoped lang="scss">
+.seventv-emote-menu-button {
+	display: grid;
+	align-items: center;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	transition: background 0.2s ease-in-out;
+	height: 2.25rem;
+	border-radius: 0.25rem;
+	padding: 0 0.5rem;
+
+	&:hover {
+		background: rgba(255, 255, 255, 10%);
+	}
+
+	.icon {
+		font-size: 1.25rem;
+	}
+}
+</style>
diff --git a/src/site/twitch.tv/TwitchSite.vue b/src/site/twitch.tv/TwitchSite.vue
index 3ab87085d..08b52c7f0 100644
--- a/src/site/twitch.tv/TwitchSite.vue
+++ b/src/site/twitch.tv/TwitchSite.vue
@@ -27,7 +27,7 @@ const ffz = useFrankerFaceZ();
 const useTransparency = useConfig("ui.transparent_backgrounds");
 ua.preferredFormat = store.avifSupported ? "AVIF" : "WEBP";
 store.setPreferredImageFormat(ua.preferredFormat);
-store.setPlatform("TWITCH", ffz.active ? ["FFZ"] : []);
+store.setPlatform("TWITCH", ["7TV", "FFZ", "BTTV"], ffz.active ? ["FFZ"] : []);
 
 const currentPath = ref("");
 
diff --git a/src/site/twitch.tv/modules/chat-vod/ChatVod.vue b/src/site/twitch.tv/modules/chat-vod/ChatVod.vue
index 92384b1ae..58378c84f 100644
--- a/src/site/twitch.tv/modules/chat-vod/ChatVod.vue
+++ b/src/site/twitch.tv/modules/chat-vod/ChatVod.vue
@@ -23,8 +23,8 @@ import { ChatMessage } from "@/common/chat/ChatMessage";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatEmotes } from "@/composable/chat/useChatEmotes";
 import { useChatProperties } from "@/composable/chat/useChatProperties";
-import ChatData from "@/site/twitch.tv/modules/chat/ChatData.vue";
 import type { TwTypeUser } from "@/assets/gql/tw.gql";
+import ChatData from "@/app/chat/ChatData.vue";
 import UserMessage from "@/app/chat/UserMessage.vue";
 import { MessagePartType } from "../..";
 import intervalToDuration from "date-fns/fp/intervalToDuration";
@@ -221,7 +221,7 @@ function createMessageComponentRef(data: CommentData) {
 					id: e.emoteID ?? "",
 					name: e.alt,
 					flags: 0,
-					provider: "TWITCH",
+					provider: "PLATFORM",
 					isTwitchCheer: {
 						amount: e.cheerAmount!,
 						color: e.cheerColor!,
diff --git a/src/site/twitch.tv/modules/chat/ChatController.vue b/src/site/twitch.tv/modules/chat/ChatController.vue
index 881fa5987..961cb3917 100644
--- a/src/site/twitch.tv/modules/chat/ChatController.vue
+++ b/src/site/twitch.tv/modules/chat/ChatController.vue
@@ -50,11 +50,11 @@ import { getModule } from "@/composable/useModule";
 import { useConfig } from "@/composable/useSettings";
 import { useWorker } from "@/composable/useWorker";
 import { MessageType } from "@/site/twitch.tv";
-import ChatData from "@/site/twitch.tv/modules/chat/ChatData.vue";
 import ChatList from "@/site/twitch.tv/modules/chat/ChatList.vue";
 import PauseIcon from "@/assets/svg/icons/PauseIcon.vue";
 import ChatPubSub from "./ChatPubSub.vue";
 import ChatTray from "./components/tray/ChatTray.vue";
+import ChatData from "@/app/chat/ChatData.vue";
 import BasicSystemMessage from "@/app/chat/msg/BasicSystemMessage.vue";
 import UiScrollable from "@/ui/UiScrollable.vue";
 
diff --git a/src/site/twitch.tv/modules/chat/ChatList.vue b/src/site/twitch.tv/modules/chat/ChatList.vue
index d2c2ae928..902ba2c4a 100644
--- a/src/site/twitch.tv/modules/chat/ChatList.vue
+++ b/src/site/twitch.tv/modules/chat/ChatList.vue
@@ -242,7 +242,7 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 						id: e.emoteID ?? "",
 						name: e.alt,
 						flags: 0,
-						provider: "TWITCH",
+						provider: "PLATFORM",
 						isTwitchCheer: {
 							amount: e.cheerAmount!,
 							color: e.cheerColor!,
diff --git a/src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue b/src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue
index 3d5a9cb26..d26bcd08d 100644
--- a/src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue
+++ b/src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue
@@ -1,51 +1,5 @@
 <template>
-	<UiFloating :anchor="anchorEl" placement="top-end" :middleware="[shift({ mainAxis: true, crossAxis: true })]">
-		<div v-if="ctx.open && ctx.channelID" ref="containerRef" class="seventv-emote-menu-container">
-			<div class="seventv-emote-menu">
-				<!-- Emote Menu Header -->
-				<div class="seventv-emote-menu-header">
-					<div class="seventv-emote-menu-header-providers">
-						<template v-for="(b, key) in visibleProviders">
-							<div
-								v-if="b"
-								:key="key"
-								class="seventv-emote-menu-provider-icon"
-								:selected="key === activeProvider"
-								@click="activeProvider = key"
-							>
-								<Logo v-if="key !== 'FAVORITE'" :provider="key" />
-								<StarIcon v-else />
-								<span v-show="key === activeProvider && key !== 'FAVORITE'">{{ key }}</span>
-							</div>
-						</template>
-					</div>
-					<div v-if="!isSearchInputEnabled" class="emote-search">
-						<input ref="searchInputRef" v-model="ctx.filter" class="emote-search-input" />
-						<div class="search-icon">
-							<SearchIcon />
-						</div>
-					</div>
-				</div>
-
-				<!-- Emote menu body -->
-				<div
-					v-for="(_, key) in visibleProviders"
-					v-show="key === activeProvider"
-					:key="key"
-					class="seventv-emote-menu-body"
-				>
-					<EmoteMenuTab
-						:provider="key"
-						:selected="key === activeProvider"
-						@emote-clicked="onEmoteClick"
-						@provider-visible="onProviderVisibilityChange(key, $event)"
-						@toggle-settings="settingsContext.toggle()"
-						@toggle-native-menu="toggle(true)"
-					/>
-				</div>
-			</div>
-		</div>
-	</UiFloating>
+	<EmoteMenu v-if="anchorEl" :anchor-el="anchorEl" :instance="props.instance" @emote-click="onEmoteClick($event)" />
 
 	<!-- Replace the emote menu button -->
 	<Teleport v-if="buttonEl && placement === 'regular'" :to="buttonEl">
@@ -66,15 +20,11 @@ import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatEmotes } from "@/composable/chat/useChatEmotes";
 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";
 import Logo from "@/assets/svg/logos/Logo.vue";
 import EmoteMenuButton from "./EmoteMenuButton.vue";
-import { useEmoteMenuContext } from "./EmoteMenuContext";
-import EmoteMenuTab from "./EmoteMenuTab.vue";
+import EmoteMenu from "@/app/emote-menu/EmoteMenu.vue";
+import { useEmoteMenuContext } from "@/app/emote-menu/EmoteMenuContext";
 import { useSettingsMenu } from "@/app/settings/Settings";
-import UiFloating from "@/ui/UiFloating.vue";
-import { shift } from "@floating-ui/dom";
 
 export type EmoteMenuTabName = SevenTV.Provider | "FAVORITE";
 
@@ -105,7 +55,7 @@ const visibleProviders = reactive<Record<EmoteMenuTabName, boolean>>({
 	"7TV": true,
 	FFZ: true,
 	BTTV: true,
-	TWITCH: true,
+	PLATFORM: true,
 	EMOJI: true,
 });
 
@@ -185,15 +135,6 @@ watch(
 	{ immediate: true },
 );
 
-// Handle change in the visibility of a provider while using search
-// and if the current active provider has no content, switch to the next available
-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;
-	}
-}
-
 function onEmoteClick(emote: SevenTV.ActiveEmote) {
 	const inputRef = props.instance.component.autocompleteInputRef;
 	if (!inputRef) return log.warn("ref to input not found, cannot insert emote");
diff --git a/src/site/twitch.tv/modules/emote-menu/EmoteMenuButton.vue b/src/site/twitch.tv/modules/emote-menu/EmoteMenuButton.vue
index 050cf9f7f..ac0b9f473 100644
--- a/src/site/twitch.tv/modules/emote-menu/EmoteMenuButton.vue
+++ b/src/site/twitch.tv/modules/emote-menu/EmoteMenuButton.vue
@@ -13,7 +13,7 @@ import { ref, watch } from "vue";
 import { useConfig } from "@/composable/useSettings";
 import useUpdater from "@/composable/useUpdater";
 import Logo from "@/assets/svg/logos/Logo.vue";
-import { useEmoteMenuContext } from "./EmoteMenuContext";
+import { useEmoteMenuContext } from "@/app/emote-menu/EmoteMenuContext";
 
 defineProps<{
 	onClick?: () => void;
diff --git a/src/site/youtube.com/YouTubeSite.vue b/src/site/youtube.com/YouTubeSite.vue
index 10755b46e..8818e7f0e 100644
--- a/src/site/youtube.com/YouTubeSite.vue
+++ b/src/site/youtube.com/YouTubeSite.vue
@@ -18,7 +18,7 @@ const ua = useUserAgent();
 
 ua.preferredFormat = store.avifSupported ? "AVIF" : "WEBP";
 store.setPreferredImageFormat(ua.preferredFormat);
-store.setPlatform("YOUTUBE", []);
+store.setPlatform("YOUTUBE", ["7TV", "FFZ", "BTTV"], []);
 
 // Import modules
 const modules = import.meta.glob("./modules/**/*Module.vue", { eager: true, import: "default" });
diff --git a/src/store/main.ts b/src/store/main.ts
index d2cb6d4e9..c19c85471 100644
--- a/src/store/main.ts
+++ b/src/store/main.ts
@@ -4,15 +4,16 @@ import { IBrowser, UAParser, UAParserInstance } from "ua-parser-js";
 
 export interface State {
 	platform: Platform;
+	providers: Set<SevenTV.Provider>;
 	theme: Theme;
 	identity: (TwitchIdentity | YouTubeIdentity | KickIdentity) | null;
 	identityFetched: boolean;
 	appUser: SevenTV.User | null;
 	location: Twitch.Location | null;
+	agent: UAParserInstance;
 	workers: {
 		net: Worker | null;
 	};
-	agent: UAParserInstance;
 }
 
 type Theme = "LIGHT" | "DARK";
@@ -21,12 +22,16 @@ export const useStore = defineStore("main", {
 	state: () =>
 		({
 			platform: "UNKNOWN",
+			providers: new Set(),
 			theme: "DARK",
 			identity: null,
 			identityFetched: false,
 			appUser: null,
 			location: null,
 			agent: new UAParser(),
+			workers: {
+				net: null,
+			},
 		} as State),
 
 	actions: {
@@ -62,13 +67,15 @@ export const useStore = defineStore("main", {
 			});
 		},
 
-		setPlatform(platform: Platform, extensions: SevenTV.Provider[]) {
+		setPlatform(platform: Platform, providers: SevenTV.Provider[], extensions: SevenTV.Provider[]) {
 			this.platform = platform;
+			this.providers = new Set(providers);
 
 			const { sendMessage } = useWorker();
 
 			sendMessage("STATE", {
 				platform: platform,
+				providers,
 				provider_extensions: extensions,
 			});
 		},
diff --git a/src/types/app.d.ts b/src/types/app.d.ts
index 78da95b7c..168cc6b35 100644
--- a/src/types/app.d.ts
+++ b/src/types/app.d.ts
@@ -319,7 +319,7 @@ declare namespace SevenTV {
 
 	type ObjectID = string;
 
-	type Provider = "7TV" | "TWITCH" | "BTTV" | "FFZ" | "EMOJI";
+	type Provider = "7TV" | "PLATFORM" | "BTTV" | "FFZ" | "EMOJI";
 
 	enum ObjectKind {
 		USER = 1,
diff --git a/src/worker/index.ts b/src/worker/index.ts
index c3b10cba9..94c5456a5 100644
--- a/src/worker/index.ts
+++ b/src/worker/index.ts
@@ -69,6 +69,7 @@ export type TypedWorkerMessage<T extends WorkerMessageType> = {
 	};
 	STATE: Partial<{
 		platform: Platform;
+		providers: SevenTV.Provider[];
 		provider_extensions: SevenTV.Provider[];
 		identity: TwitchIdentity | YouTubeIdentity | null;
 		user: SevenTV.User | null;
diff --git a/src/worker/worker.http.ts b/src/worker/worker.http.ts
index 5216489f1..61c17a3c9 100644
--- a/src/worker/worker.http.ts
+++ b/src/worker/worker.http.ts
@@ -105,11 +105,13 @@ export class WorkerHttp {
 		// setup fetching promises
 		const user = seventv.loadUserConnection(port.platform ?? "TWITCH", channel.id).catch(() => void 0);
 
-		const promises = [
-			["7TV", user.then((es) => (es ? es.emote_set : null)).catch(() => void 0)],
-			["FFZ", frankerfacez.loadUserEmoteSet(channel.id).catch(() => void 0)],
-			["BTTV", betterttv.loadUserEmoteSet(channel.id).catch(() => void 0)],
-		] as [string, Promise<SevenTV.EmoteSet>][];
+		const promises = (
+			[
+				["7TV", user.then((es) => (es ? es.emote_set : null)).catch(() => void 0)],
+				["FFZ", frankerfacez.loadUserEmoteSet(channel.id).catch(() => void 0)],
+				["BTTV", betterttv.loadUserEmoteSet(channel.id).catch(() => void 0)],
+			] as [SevenTV.Provider, Promise<SevenTV.EmoteSet>][]
+		).filter(([p]) => port.providers.has(p));
 
 		const onResult = async (set: SevenTV.EmoteSet) => {
 			if (!set) return;
diff --git a/src/worker/worker.port.ts b/src/worker/worker.port.ts
index 374c35863..d92858048 100644
--- a/src/worker/worker.port.ts
+++ b/src/worker/worker.port.ts
@@ -1,5 +1,5 @@
 import { log } from "@/common/Logger";
-import { convertTwitchEmoteSet } from "@/common/Transform";
+import { convertPlatformEmoteSet } from "@/common/Transform";
 import { WorkerDriver } from "./worker.driver";
 import { TypedWorkerMessage, WorkerMessage, WorkerMessageType } from ".";
 
@@ -8,6 +8,7 @@ export class WorkerPort {
 	seq = 0;
 
 	platform: Platform | null = null;
+	providers = new Set<SevenTV.Provider>();
 	providerExtensions = new Set<SevenTV.Provider>();
 	channels = new Map<string, CurrentChannel>();
 	identity: TwitchIdentity | YouTubeIdentity | null = null;
@@ -34,10 +35,11 @@ export class WorkerPort {
 
 		switch (type) {
 			case "STATE": {
-				const { platform, provider_extensions, identity, channel, user, imageFormat } =
+				const { platform, providers, provider_extensions, identity, channel, user, imageFormat } =
 					data as TypedWorkerMessage<"STATE">;
 
 				if (platform) this.platform = platform;
+				if (providers) this.providers = new Set(providers);
 				if (provider_extensions) this.providerExtensions = new Set(provider_extensions);
 				if (identity) {
 					this.identity = identity;
@@ -79,7 +81,7 @@ export class WorkerPort {
 				const { input } = data as TypedWorkerMessage<"SYNC_TWITCH_SET">;
 				if (!input) break;
 
-				const set = convertTwitchEmoteSet(input);
+				const set = convertPlatformEmoteSet(input);
 				this.postMessage("SYNC_TWITCH_SET", { out: set });
 				break;
 			}

From 8ab15f43a034579cf7e4961c24c8636b04248013 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 29 May 2023 19:06:14 +0200
Subject: [PATCH 20/26] fix: lint

---
 src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue b/src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue
index d26bcd08d..a388b2669 100644
--- a/src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue
+++ b/src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, onUnmounted, reactive, ref, watch, watchEffect } from "vue";
+import { nextTick, onMounted, onUnmounted, ref, watch, watchEffect } from "vue";
 import { onClickOutside, onKeyStroke, useKeyModifier } from "@vueuse/core";
 import { log } from "@/common/Logger";
 import { HookedInstance } from "@/common/ReactHooks";
@@ -49,16 +49,6 @@ const searchInputRef = ref<HTMLInputElement | undefined>();
 const isSearchInputEnabled = useConfig<boolean>("ui.emote_menu_search");
 const usage = useConfig<Map<string, number>>("ui.emote_menu.usage");
 
-const activeProvider = ref<EmoteMenuTabName | null>("7TV");
-const visibleProviders = reactive<Record<EmoteMenuTabName, boolean>>({
-	FAVORITE: true,
-	"7TV": true,
-	FFZ: true,
-	BTTV: true,
-	PLATFORM: true,
-	EMOJI: true,
-});
-
 const chatModule = getModuleRef("chat");
 const placement = useConfig<"regular" | "below" | "hidden">("ui.emote_menu.button_placement");
 const inputModule = getModuleRef<"TWITCH", "chat-input-controller">("chat-input-controller");

From 914f49fe91bfa80ec30ab812d2c3c7ac317279e7 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 29 May 2023 19:14:29 +0200
Subject: [PATCH 21/26] update changelog

---
 CHANGELOG-nightly.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
index 0a3e3242a..0a8386c59 100644
--- a/CHANGELOG-nightly.md
+++ b/CHANGELOG-nightly.md
@@ -3,7 +3,11 @@
 **The changes listed here are not assigned to an official release**.
 
 -   Added new feature: Paint Tool ([subscribers only](https://7tv.app/store))
--   Added a button to link a [kick.com](https://kick.com/) channel with 7TV
+-   Added support for more features on [kick.com](https://kick.com/)
+    -   Authentication / Channel Linking
+    -   Channel Emotes
+    -   Emote Menu
+    -   7TV Paints & Badges
 -   Fixed an issue which caused mod icons to be invisible
 -   Fixed an issue which sometimes caused channel emote sets to disappear
 -   Fixed an issue which caused stylesheets to be duplicated when running in hosted mode

From 19001ff9808bb3200df91e97d88b56bcaaad296e Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 29 May 2023 19:37:47 +0200
Subject: [PATCH 22/26] emote menu insert

---
 src/site/kick.com/modules/chat/ChatAutocomplete.vue | 11 +++++++++++
 src/site/kick.com/modules/chat/ChatController.vue   | 12 ++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/site/kick.com/modules/chat/ChatAutocomplete.vue b/src/site/kick.com/modules/chat/ChatAutocomplete.vue
index db83fb191..4da91b56b 100644
--- a/src/site/kick.com/modules/chat/ChatAutocomplete.vue
+++ b/src/site/kick.com/modules/chat/ChatAutocomplete.vue
@@ -32,6 +32,13 @@ function renderInputTokens(): void {
 	inputEl;
 }
 
+function insertAtEnd(value: string): void {
+	if (!inputEl.value || typeof inputEl.value.textContent !== "string") return;
+
+	inputEl.value.textContent += inputEl.value.textContent.charAt(value.length - 1) === " " ? value : ` ${value}`;
+	if (info) info.currentMessage = inputEl.value.textContent;
+}
+
 function handleTab(n: Text, sel: Selection): void {
 	const { anchorOffset, focusOffset } = sel;
 
@@ -80,4 +87,8 @@ useEventListener(inputEl, "keydown", (ev: KeyboardEvent) => {
 watchEffect(() => {
 	inputEl.value = (document.getElementById("message-input") as HTMLDivElement) ?? null;
 });
+
+defineExpose({
+	insertAtEnd,
+});
 </script>
diff --git a/src/site/kick.com/modules/chat/ChatController.vue b/src/site/kick.com/modules/chat/ChatController.vue
index cc0a26424..226d51d78 100644
--- a/src/site/kick.com/modules/chat/ChatController.vue
+++ b/src/site/kick.com/modules/chat/ChatController.vue
@@ -1,7 +1,7 @@
 <template>
 	<template v-if="shallowList">
 		<ChatObserver :list-element="shallowList" />
-		<ChatAutocomplete />
+		<ChatAutocomplete ref="autocomplete" />
 	</template>
 	<ChatData />
 
@@ -12,7 +12,7 @@
 	</Teleport>
 
 	<template v-if="emoteMenu.open && emoteMenuAnchor">
-		<EmoteMenu :anchor-el="emoteMenuAnchor" />
+		<EmoteMenu :anchor-el="emoteMenuAnchor" @emote-click="insertToInput($event.name)" />
 	</template>
 </template>
 
@@ -59,11 +59,19 @@ const { sendMessage: sendWorkerMessage } = useWorker();
 const chatList = ref<HTMLDivElement | null>(null);
 const shallowList = ref<HTMLDivElement | null>(null);
 
+const autocomplete = ref<InstanceType<typeof ChatAutocomplete> | null>(null);
+
 const emoteMenu = useEmoteMenuContext();
 const emoteMenuAnchor = document.getElementById("chatroom-footer");
 
 const emoteMenuButtonContainer = document.createElement("seventv-container");
 
+function insertToInput(value: string): void {
+	if (!autocomplete.value) return;
+
+	autocomplete.value.insertAtEnd(value);
+}
+
 let observer: ObserverPromise<HTMLDivElement> | null = null;
 
 watchEffect(async () => {

From d27bb79558a4fa5608b3a903fb8189c8cdf0e0d4 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Mon, 29 May 2023 19:38:35 +0200
Subject: [PATCH 23/26] bump version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 715d4edc9..6bc65fc3b 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
 	"description": "Improve your viewing experience on Twitch & YouTube with new features, emotes, vanity and performance.",
 	"private": true,
 	"version": "3.0.8",
-	"dev_version": "3.3",
+	"dev_version": "3.31",
 	"scripts": {
 		"start": "NODE_ENV=dev yarn build:dev && NODE_ENV=dev vite --mode dev",
 		"build:section:app": "vite build --config vite.config.ts",

From 7ebb8a79ef59fb68d583ea6d0ac0e79272174dd3 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Tue, 30 May 2023 17:15:55 +0200
Subject: [PATCH 24/26] worker: fix user channel event subscribe

---
 src/worker/worker.http.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/worker/worker.http.ts b/src/worker/worker.http.ts
index 61c17a3c9..906e97713 100644
--- a/src/worker/worker.http.ts
+++ b/src/worker/worker.http.ts
@@ -103,11 +103,11 @@ export class WorkerHttp {
 		);
 
 		// setup fetching promises
-		const user = seventv.loadUserConnection(port.platform ?? "TWITCH", channel.id).catch(() => void 0);
+		const userPromise = seventv.loadUserConnection(port.platform ?? "TWITCH", channel.id).catch(() => void 0);
 
 		const promises = (
 			[
-				["7TV", user.then((es) => (es ? es.emote_set : null)).catch(() => void 0)],
+				["7TV", userPromise.then((es) => (es ? es.emote_set : null)).catch(() => void 0)],
 				["FFZ", frankerfacez.loadUserEmoteSet(channel.id).catch(() => void 0)],
 				["BTTV", betterttv.loadUserEmoteSet(channel.id).catch(() => void 0)],
 			] as [SevenTV.Provider, Promise<SevenTV.EmoteSet>][]
@@ -143,7 +143,7 @@ export class WorkerHttp {
 			await onResult(set);
 		}
 
-		channel.user = (await user)?.user ?? undefined;
+		channel.user = (await userPromise)?.user ?? undefined;
 		if (port) {
 			// Post channel fetch notification back to port
 			port.postMessage("CHANNEL_FETCHED", {
@@ -163,7 +163,11 @@ export class WorkerHttp {
 				port,
 				channel.id,
 			);
-			if (set.owner) this.driver.eventAPI.subscribe("user.*", { object_id: set.owner.id }, port, channel.id);
+		}
+
+		const user = await userPromise;
+		if (user) {
+			this.driver.eventAPI.subscribe("user.*", { object_id: user.id }, port, channel.id);
 		}
 
 		// begin subscriptions to personal events in the channel

From 239f42ef5ffa3f066465f5125a43cb7eacbfe8a7 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Tue, 30 May 2023 18:50:32 +0200
Subject: [PATCH 25/26] improve emote menu scaling

---
 src/app/emote-menu/EmoteMenu.vue              | 423 +++++++++++-------
 src/app/emote-menu/EmoteMenuSet.vue           |  70 ++-
 src/app/emote-menu/EmoteMenuTab.vue           | 102 ++---
 src/assets/svg/icons/EmojiIcon.vue            |   2 +-
 .../kick.com/modules/chat/ChatController.vue  |  57 +--
 .../kick.com/modules/chat/ChatEmoteMenu.vue   |  80 ++++
 .../modules/emote-menu/EmoteMenu.vue          | 151 +------
 7 files changed, 454 insertions(+), 431 deletions(-)
 create mode 100644 src/site/kick.com/modules/chat/ChatEmoteMenu.vue

diff --git a/src/app/emote-menu/EmoteMenu.vue b/src/app/emote-menu/EmoteMenu.vue
index d9887f6f5..0ae07eda9 100644
--- a/src/app/emote-menu/EmoteMenu.vue
+++ b/src/app/emote-menu/EmoteMenu.vue
@@ -1,56 +1,58 @@
 <template>
-	<UiFloating :anchor="anchorEl" placement="top-end" :middleware="[shift({ mainAxis: true, crossAxis: true })]">
-		<div v-if="ctx.open && ctx.channelID" ref="containerRef" class="seventv-emote-menu-container">
-			<div class="seventv-emote-menu">
+	<UiFloating
+		:anchor="anchorEl"
+		placement="top-end"
+		:middleware="[shift({ padding: 4, mainAxis: true, crossAxis: true }), offset({ mainAxis: 4, crossAxis: -4 })]"
+	>
+		<div v-if="ctx.open && ctx.channelID" ref="containerRef" class="seventv-emote-menu">
+			<div class="seventv-emote-menu-header">
 				<!-- Emote Menu Header -->
-				<div class="seventv-emote-menu-header">
-					<div class="seventv-emote-menu-header-providers">
-						<template v-for="(b, key) in visibleProviders">
-							<div
-								v-if="b"
-								:key="key"
-								class="seventv-emote-menu-provider-icon"
-								:selected="key === activeProvider"
-								@click="activeProvider = key"
-							>
-								<Logo v-if="key !== 'FAVORITE'" :provider="key" />
-								<StarIcon v-else />
-								<span v-show="key === activeProvider && key !== 'FAVORITE'">{{ key }}</span>
-							</div>
-						</template>
-					</div>
-					<div v-if="!isSearchInputEnabled" class="emote-search">
-						<input ref="searchInputRef" v-model="ctx.filter" class="emote-search-input" />
-						<div class="search-icon">
-							<SearchIcon />
+				<div class="seventv-emote-menu-providers">
+					<template v-for="(b, key) in visibleProviders">
+						<div
+							v-if="b"
+							:key="key"
+							class="seventv-emote-menu-provider-icon"
+							:selected="key === activeProvider"
+							@click="activeProvider = key"
+						>
+							<Logo v-if="key !== 'FAVORITE'" :provider="key" />
+							<StarIcon v-else />
+							<span v-show="key === activeProvider && key !== 'FAVORITE'">{{ key }}</span>
 						</div>
+					</template>
+				</div>
+				<div v-if="!isSearchInputEnabled" class="seventv-emote-menu-search">
+					<input ref="searchInputRef" v-model="ctx.filter" class="seventv-emote-menu-search-input" />
+					<div class="search-icon">
+						<SearchIcon />
 					</div>
 				</div>
+			</div>
 
-				<!-- Emote menu body -->
-				<div
-					v-for="(_, key) in visibleProviders"
-					v-show="key === activeProvider"
-					:key="key"
-					class="seventv-emote-menu-body"
-				>
-					<EmoteMenuTab
-						:provider="key"
-						:selected="key === activeProvider"
-						@emote-clicked="emit('emote-click', $event)"
-						@provider-visible="onProviderVisibilityChange(key, $event)"
-						@toggle-settings="settingsContext.toggle()"
-						@toggle-native-menu="toggle()"
-					/>
-				</div>
+			<!-- Emote menu body -->
+			<div
+				v-for="(_, key) in visibleProviders"
+				v-show="key === activeProvider"
+				:key="key"
+				class="seventv-emote-menu-body"
+			>
+				<EmoteMenuTab
+					:provider="key"
+					:selected="key === activeProvider"
+					@emote-clicked="emit('emote-click', $event)"
+					@provider-visible="onProviderVisibilityChange(key, $event)"
+					@toggle-settings="settingsContext.toggle()"
+					@toggle-native-menu="toggle()"
+				/>
 			</div>
 		</div>
 	</UiFloating>
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
-import { onKeyStroke, useKeyModifier } from "@vueuse/core";
+import { onMounted, reactive, ref, watchEffect } from "vue";
+import { onClickOutside, onKeyStroke, useKeyModifier } from "@vueuse/core";
 import { useStore } from "@/store/main";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { getModuleRef } from "@/composable/useModule";
@@ -62,16 +64,19 @@ import { useEmoteMenuContext } from "./EmoteMenuContext";
 import EmoteMenuTab from "./EmoteMenuTab.vue";
 import { useSettingsMenu } from "@/app/settings/Settings";
 import UiFloating from "@/ui/UiFloating.vue";
-import { shift } from "@floating-ui/dom";
+import { offset, shift } from "@floating-ui/dom";
 
 export type EmoteMenuTabName = SevenTV.Provider | "FAVORITE";
 
-defineProps<{
+const props = defineProps<{
 	anchorEl: HTMLElement;
+	width?: string;
+	scale?: string;
 }>();
 
 const emit = defineEmits<{
 	(e: "emote-click", emote: SevenTV.ActiveEmote): void;
+	(e: "close", ev: MouseEvent): void;
 }>();
 
 const containerRef = ref<HTMLElement | undefined>();
@@ -113,6 +118,13 @@ onMounted(() => {
 	);*/
 });
 
+watchEffect(() => {
+	if (!containerRef.value) return;
+
+	containerRef.value.style.setProperty("--width", props.width ?? "unset");
+	containerRef.value.style.setProperty("--seventv-emote-menu-scale", props.scale ?? "3rem");
+});
+
 // Shortcut (ctrl+e)
 const isCtrl = useKeyModifier("Control", { initial: false });
 onKeyStroke("e", (ev) => {
@@ -135,143 +147,246 @@ function onProviderVisibilityChange(provider: EmoteMenuTabName, visible: boolean
 		activeProvider.value = (Object.entries(visibleProviders).find(([, v]) => v)?.[0] ?? "7TV") as SevenTV.Provider;
 	}
 }
+
+onClickOutside(containerRef, (ev) => {
+	emit("close", ev);
+});
 </script>
 
 <style scoped lang="scss">
-.seventv-emote-menu-button {
+.seventv-emote-menu {
 	display: grid;
-	place-items: center;
-	width: 100%;
-	height: 100%;
-	font-size: 2rem;
-	transition: color 150ms ease-in-out;
+	grid-template-columns: 1fr;
+	grid-template-rows: auto 1fr;
+	grid-template-areas:
+		"header"
+		"body";
+	outline: 0.1em solid var(--seventv-border-transparent-1);
+	background-color: var(--seventv-background-transparent-1);
+	border-radius: 0.25em;
+	width: var(--width);
+	font-size: var(--seventv-emote-menu-scale);
+
+	@at-root .seventv-transparent & {
+		backdrop-filter: blur(1em);
+	}
+}
 
-	&.menu-open {
-		color: var(--seventv-primary);
+.seventv-emote-menu-header {
+	grid-area: header;
+	border-bottom: 0.1em solid var(--seventv-border-transparent-1);
+	border-radius: 0.6em 0.6em 0 0;
+	background: hsla(0deg, 0%, 50%, 6%);
+}
+
+.seventv-emote-menu-providers {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-evenly;
+	column-gap: 0.5em;
+	align-items: center;
+	margin: 1em;
+
+	.seventv-emote-menu-provider-icon {
+		cursor: pointer;
+		display: grid;
+		place-items: center;
+		grid-template-columns: 1fr;
+		width: 60%;
+		padding: 0.5em 0;
+		background: hsla(0deg, 0%, 50%, 6%);
+		color: var(--seventv-text-color-secondary);
+		border-radius: 0.25em;
+
+		&:hover {
+			background: #80808029;
+		}
+
+		> svg {
+			width: 2em;
+			height: 2em;
+		}
+
+		> span {
+			font-family: Roboto, monospace;
+			font-weight: 600;
+		}
+
+		transition: width 90ms ease-in-out, background 150ms ease-in-out;
+
+		&[selected="true"] {
+			background: var(--seventv-highlight-neutral-1);
+			color: var(--seventv-text-color-normal);
+			width: 100%;
+			grid-template-columns: 3em 1fr;
+		}
 	}
 }
 
-.seventv-emote-menu-container {
-	max-width: 100%;
-	z-index: 10;
+.seventv-emote-menu-search {
+	padding: 0 0.75em 0.75em;
+	width: 100%;
+	position: relative;
 
-	.seventv-emote-menu {
-		position: relative;
-		max-height: calc(100vh - 15rem);
+	.search-icon {
+		position: absolute;
 		display: flex;
-		flex-direction: column;
-		width: 32rem;
-		overflow: clip;
-		border-radius: 0.25rem;
-		background-color: var(--seventv-background-transparent-1);
-
-		@at-root .seventv-transparent & {
-			backdrop-filter: blur(1rem);
+		align-items: center;
+		top: 0;
+		left: 1em;
+		height: 3em;
+		width: 3em;
+		user-select: none;
+		pointer-events: none;
+		padding: 0.85em;
+		color: var(--seventv-border-transparent-1);
+	}
+
+	.seventv-emote-menu-search-input {
+		background-color: var(--seventv-background-shade-1);
+		border-radius: 0.4em;
+		height: 3em;
+		width: 100%;
+		border: 1px solid var(--seventv-border-transparent-1);
+		padding-left: 3em;
+		color: currentcolor;
+		outline: none;
+		transition: outline 140ms;
+
+		&:focus {
+			outline: 1px solid var(--seventv-primary);
 		}
+	}
+}
 
-		outline: 0.1rem solid var(--seventv-border-transparent-1);
+.seventv-emote-menu-body {
+	grid-area: body;
+	display: grid;
+	overflow: hidden;
+	height: 40vh;
 
-		.seventv-emote-menu-header {
-			border-bottom: 0.1rem solid var(--seventv-border-transparent-1);
-			border-radius: 0.6rem 0.6rem 0 0;
-			background: hsla(0deg, 0%, 50%, 6%);
+	&[selected="false"] {
+		display: none;
+	}
+}
+
+.seventv-emote-menu0 {
+	position: relative;
+	max-height: calc(100vh - 15em);
+	display: flex;
+	flex-direction: column;
+	width: 21em;
+	overflow: clip;
+	border-radius: 0.25em;
+	background-color: var(--seventv-background-transparent-1);
+	z-index: 10;
+
+	@at-root .seventv-transparent & {
+		backdrop-filter: blur(1em);
+	}
+
+	outline: 0.1em solid var(--seventv-border-transparent-1);
 
-			.seventv-emote-menu-header-providers {
+	.seventv-emote-menu-header {
+		border-bottom: 0.1em solid var(--seventv-border-transparent-1);
+		border-radius: 0.6em 0.6em 0 0;
+		background: hsla(0deg, 0%, 50%, 6%);
+
+		.seventv-emote-menu-header-providers {
+			display: flex;
+			height: 4.5em;
+			justify-content: space-evenly;
+			column-gap: 0.5em;
+			padding: 0.75em;
+
+			.seventv-emote-menu-provider-icon {
+				padding: 0.5em;
+				cursor: pointer;
 				display: flex;
-				height: 4.5rem;
-				justify-content: space-evenly;
-				column-gap: 0.5rem;
-				padding: 0.75rem;
-
-				.seventv-emote-menu-provider-icon {
-					padding: 0.5rem;
-					cursor: pointer;
-					display: flex;
-					user-select: none;
-					justify-content: center;
-					column-gap: 0.5em;
-					background: hsla(0deg, 0%, 50%, 6%);
-					color: var(--seventv-text-color-secondary);
-					border-radius: 0.2rem;
-					flex-grow: 1;
-					width: 2rem;
-
-					&:hover {
-						background: #80808029;
-					}
-
-					transition: width 90ms ease-in-out, background 150ms ease-in-out;
-
-					&[selected="true"] {
-						background: var(--seventv-highlight-neutral-1);
-						color: var(--seventv-text-color-normal);
-						width: 6em;
-					}
-
-					> svg {
-						width: 2rem;
-						height: 2rem;
-					}
-
-					> span {
-						font-family: Roboto, monospace;
-						font-weight: 600;
-					}
+				user-select: none;
+				justify-content: center;
+				column-gap: 0.5em;
+				background: hsla(0deg, 0%, 50%, 6%);
+				color: var(--seventv-text-color-secondary);
+				border-radius: 0.2em;
+				flex-grow: 1;
+				width: 2em;
+
+				&:hover {
+					background: #80808029;
 				}
-			}
 
-			.emote-search {
-				padding: 0 0.75rem 0.75rem;
-				width: 100%;
-				position: relative;
-
-				.search-icon {
-					position: absolute;
-					display: flex;
-					align-items: center;
-					top: 0;
-					left: 1rem;
-					height: 3rem;
-					width: 3rem;
-					user-select: none;
-					pointer-events: none;
-					padding: 0.85rem;
-					color: var(--seventv-border-transparent-1);
-
-					> svg {
-						height: 100%;
-						width: 100%;
-					}
+				transition: width 90ms ease-in-out, background 150ms ease-in-out;
+
+				&[selected="true"] {
+					background: var(--seventv-highlight-neutral-1);
+					color: var(--seventv-text-color-normal);
+					width: 6em;
 				}
 
-				.emote-search-input {
-					background-color: var(--seventv-background-shade-1);
-					border-radius: 0.4rem;
-					height: 3rem;
-					width: 100%;
-					border: 1px solid var(--seventv-border-transparent-1);
-					padding-left: 3rem;
-					color: currentcolor;
-					outline: none;
-					transition: outline 140ms;
-
-					&:focus {
-						outline: 1px solid var(--seventv-primary);
-					}
+				> svg {
+					width: 2em;
+					height: 2em;
+				}
+
+				> span {
+					font-family: Roboto, monospace;
+					font-weight: 600;
 				}
 			}
 		}
 
-		.seventv-emote-menu-body {
-			display: flex;
-			height: 40rem;
-			overflow: hidden;
-			flex-shrink: 1;
+		.seventv-emote-menu-search {
+			padding: 0 0.75em 0.75em;
+			width: 100%;
+			position: relative;
+
+			.search-icon {
+				position: absolute;
+				display: flex;
+				align-items: center;
+				top: 0;
+				left: 1em;
+				height: 3em;
+				width: 3em;
+				user-select: none;
+				pointer-events: none;
+				padding: 0.85em;
+				color: var(--seventv-border-transparent-1);
+
+				> svg {
+					height: 100%;
+					width: 100%;
+				}
+			}
 
-			&[selected="false"] {
-				display: none;
+			.seventv-emote-menu-search-input {
+				background-color: var(--seventv-background-shade-1);
+				border-radius: 0.4em;
+				height: 3em;
+				width: 100%;
+				border: 1px solid var(--seventv-border-transparent-1);
+				padding-left: 3em;
+				color: currentcolor;
+				outline: none;
+				transition: outline 140ms;
+
+				&:focus {
+					outline: 1px solid var(--seventv-primary);
+				}
 			}
 		}
 	}
+
+	.seventv-emote-menu-body {
+		display: flex;
+		height: 40em;
+		overflow: hidden;
+		flex-shrink: 1;
+
+		&[selected="false"] {
+			display: none;
+		}
+	}
 }
 </style>
diff --git a/src/app/emote-menu/EmoteMenuSet.vue b/src/app/emote-menu/EmoteMenuSet.vue
index 0b42fedbf..19ea28415 100644
--- a/src/app/emote-menu/EmoteMenuSet.vue
+++ b/src/app/emote-menu/EmoteMenuSet.vue
@@ -6,7 +6,7 @@
 				<Logo v-else class="logo" :provider="es.provider" />
 			</div>
 
-			<span>{{ getLocaleName() }}</span>
+			<span class="seventv-set-name">{{ getLocaleName() }}</span>
 			<div class="seventv-set-chevron" @click="toggleCollapsed">
 				<DropdownIcon />
 			</div>
@@ -254,18 +254,19 @@ defineExpose({
 
 <style scoped lang="scss">
 .seventv-emote-set {
-	display: inline-flex;
+	display: flex;
 	flex-wrap: wrap;
-	margin: 0.5rem;
+	margin: 0.5em;
 }
 
 .seventv-set-header {
 	display: grid;
 
 	// icon, name, then at the end the chevron
-	grid-template-columns: auto 1fr 1.5rem;
-	height: 3rem;
-	padding: 0.5rem 1.25rem;
+	grid-template-columns: auto 1fr 1.5em;
+	column-gap: 0.5em;
+	height: 3em;
+	padding: 0.5em 1.25em;
 	position: sticky;
 	top: -1px;
 	background: var(--seventv-background-transparent-2);
@@ -288,6 +289,26 @@ defineExpose({
 			background-color: hsla(0deg, 0%, 30%, 32%);
 		}
 	}
+
+	.seventv-set-name {
+		display: block;
+		font-size: 1.5em;
+		font-weight: 500;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.seventv-set-header-icon {
+		max-width: 2em;
+		max-height: 2em;
+		border-radius: 0.5em;
+		overflow: clip;
+
+		svg {
+			font-size: 2em;
+		}
+	}
 }
 
 .seventv-emote-set-container {
@@ -304,21 +325,12 @@ defineExpose({
 	}
 }
 
-.seventv-set-header-icon {
-	font-size: 2rem;
-	max-width: 2rem;
-	max-height: 2rem;
-	border-radius: 0.5rem;
-	margin-right: 1rem;
-	overflow: clip;
-}
-
 .seventv-emote-container {
 	display: grid;
 	background: hsla(0deg, 0%, 50%, 6%);
 	border-radius: 0.25rem;
-	height: 4rem;
-	margin: 0.25rem;
+	height: 4em;
+	margin: 0.25em;
 	cursor: pointer;
 
 	&:hover {
@@ -363,35 +375,19 @@ defineExpose({
 	}
 
 	&[ratio="1"] {
-		width: 4rem;
+		width: 4em;
 	}
 
 	&[ratio="2"] {
-		width: 6.25rem;
+		width: calc(4em * 1.5);
 	}
 
 	&[ratio="3"] {
-		width: 8.5rem;
+		width: calc(4em * 2.125);
 	}
 
 	&[ratio="4"] {
-		width: 13rem;
+		width: calc(4em * 3.25);
 	}
 }
-
-.ratio-1 {
-	width: 4rem;
-}
-
-.ratio-2 {
-	width: 6.25rem;
-}
-
-.ratio-3 {
-	width: 8.5rem;
-}
-
-.ratio-4 {
-	width: 13rem;
-}
 </style>
diff --git a/src/app/emote-menu/EmoteMenuTab.vue b/src/app/emote-menu/EmoteMenuTab.vue
index 04616117b..38404f350 100644
--- a/src/app/emote-menu/EmoteMenuTab.vue
+++ b/src/app/emote-menu/EmoteMenuTab.vue
@@ -1,36 +1,34 @@
 <template>
-	<div class="emote-area-container">
-		<UiScrollable class="scroll-area">
+	<div class="seventv-emote-menu-tab-container">
+		<UiScrollable>
 			<!-- Native Menu Toggle -->
-			<div v-if="provider === 'PLATFORM'" class="native-menu-toggle" @click="emit('toggle-native-menu')">
+			<div v-if="provider === 'PLATFORM'" class="seventv-native-menu-toggle" @click="emit('toggle-native-menu')">
 				<Logo provider="PLATFORM" />
 				<span v-t="'emote_menu.native'" />
 			</div>
 
-			<div class="emote-area">
-				<div v-for="es of sortedSets" :key="es.id">
-					<EmoteMenuSet
-						:ref="'es-' + es.id"
-						:es="es"
-						@emote-clicked="(ae) => emit('emote-clicked', ae)"
-						@emotes-updated="(emotes) => updateVisibility(es, !!emotes.length)"
-					/>
-				</div>
+			<div v-for="es of sortedSets" :key="es.id">
+				<EmoteMenuSet
+					:ref="'es-' + es.id"
+					:es="es"
+					@emote-clicked="(ae) => emit('emote-clicked', ae)"
+					@emotes-updated="(emotes) => updateVisibility(es, !!emotes.length)"
+				/>
 			</div>
 		</UiScrollable>
-		<div class="sidebar">
-			<div class="sidebar-icons">
+		<div class="seventv-emote-menu-tab-sidebar">
+			<div class="seventv-emote-menu-sidebar-icons">
 				<template v-for="es in sortedSets" :key="es.id">
 					<div
 						v-if="es.emotes.length"
-						class="set-sidebar-icon-container"
+						class="seventv-emote-menu-set-sidebar-icon-container"
 						:selected="selectedSet == es.id"
 						@click="select(es.id, $refs['es-' + es.id] as InstanceType<typeof EmoteMenuSet>[])"
 					>
-						<div class="set-sidebar-icon">
+						<div class="seventv-emote-menu-set-sidebar-icon">
 							<div
 								v-if="es.provider === 'EMOJI' && emojiCategories.indexOf(es.name) > -1"
-								class="emoji-group"
+								class="seventv-emote-menu-emoji-group"
 							>
 								<SingleEmoji :id="emojiGroupIcons[emojiCategories.indexOf(es.name)]" :alt="es.name" />
 							</div>
@@ -40,8 +38,8 @@
 					</div>
 				</template>
 			</div>
-			<div class="settings-button-container">
-				<div class="settings-button" @click="emit('toggle-settings')">
+			<div class="seventv-emote-menu-settings-button-container">
+				<div class="seventv-emote-menu-settings-button" @click="emit('toggle-settings')">
 					<GearsIcon :provider="'7TV'" />
 					<div v-if="!updater.isUpToDate" class="seventv-emote-menu-settings-button-update-flair" />
 				</div>
@@ -231,22 +229,19 @@ watch(() => [ctx.filter, sets, cosmetics.emoteSets], filterSets, {
 <style scoped lang="scss">
 @import "@/assets/style/flair";
 
-.emote-area-container {
-	flex-shrink: 1;
-	display: flex;
-}
-
-.scroll-area {
-	width: 28rem;
-	flex-shrink: 0;
+.seventv-emote-menu-tab-container {
+	display: grid;
+	grid-template-columns: 1fr auto;
+	grid-template-rows: 1fr;
+	overflow: hidden;
 }
 
-.native-menu-toggle {
+.seventv-native-menu-toggle {
 	display: inline-block;
 	text-align: center;
-	grid-template-columns: 3rem 1fr;
+	grid-template-columns: 3em 1fr;
 	width: 100%;
-	padding: 0.25rem 1rem;
+	padding: 0.25em 1em;
 	cursor: pointer;
 	transition: background 0.2s ease-in-out;
 
@@ -254,8 +249,8 @@ watch(() => [ctx.filter, sets, cosmetics.emoteSets], filterSets, {
 	span {
 		display: inline-block;
 		vertical-align: middle;
-		font-size: 1.25rem;
-		margin: 0.5rem;
+		font-size: 1.25em;
+		margin: 0.5em;
 	}
 
 	&:hover {
@@ -263,7 +258,8 @@ watch(() => [ctx.filter, sets, cosmetics.emoteSets], filterSets, {
 	}
 }
 
-.sidebar {
+.seventv-emote-menu-tab-sidebar {
+	overflow: hidden;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
@@ -271,7 +267,7 @@ watch(() => [ctx.filter, sets, cosmetics.emoteSets], filterSets, {
 	background: hsla(0deg, 0%, 50%, 6%);
 	border-left: 1px solid var(--seventv-border-transparent-1);
 
-	.sidebar-icons {
+	.seventv-emote-menu-sidebar-icons {
 		overflow-y: scroll;
 		scrollbar-width: none;
 
@@ -281,21 +277,21 @@ watch(() => [ctx.filter, sets, cosmetics.emoteSets], filterSets, {
 		}
 	}
 
-	.settings-button-container {
+	.seventv-emote-menu-settings-button-container {
 		justify-content: center;
 		width: 100%;
 		margin-top: auto;
 		float: bottom;
-		height: 4rem;
+		height: 4em;
 		flex-shrink: 0;
 		padding: auto;
 		border-top: 1px solid var(--seventv-border-transparent-1);
 
-		.settings-button {
+		.seventv-emote-menu-settings-button {
 			display: flex;
-			margin: 0.5rem;
-			padding: 0.5rem;
-			border-radius: 0.25rem;
+			margin: 0.5em;
+			padding: 0.5em;
+			border-radius: 0.25em;
 			justify-content: center;
 			cursor: pointer;
 
@@ -304,16 +300,16 @@ watch(() => [ctx.filter, sets, cosmetics.emoteSets], filterSets, {
 			}
 
 			> svg {
-				height: 2rem;
-				width: 2rem;
+				height: 2em;
+				width: 2em;
 			}
 
 			> .seventv-emote-menu-settings-button-update-flair {
 				position: absolute;
-				height: 1rem;
-				width: 1rem;
-				transform: translateY(-0.25rem);
-				right: 0.65rem;
+				height: 1em;
+				width: 1em;
+				transform: translateY(-0.25em);
+				right: 0.65em;
 
 				@include flair-pulsating(#3eed58);
 			}
@@ -321,19 +317,19 @@ watch(() => [ctx.filter, sets, cosmetics.emoteSets], filterSets, {
 	}
 }
 
-.set-sidebar-icon-container {
+.seventv-emote-menu-set-sidebar-icon-container {
 	width: 100%;
-	padding: 0.5rem 0;
+	padding: 0.5em 0;
 
 	&[selected="true"] {
 		background: hsla(0deg, 0%, 50%, 32%);
 	}
 }
 
-.set-sidebar-icon {
-	width: 2.8rem;
-	height: 2.8rem;
-	border-radius: 0.5rem;
+.seventv-emote-menu-set-sidebar-icon {
+	width: 2.8em;
+	height: 2.8em;
+	border-radius: 0.5em;
 	overflow: clip;
 	margin: auto;
 	cursor: pointer;
@@ -344,7 +340,7 @@ watch(() => [ctx.filter, sets, cosmetics.emoteSets], filterSets, {
 	height: 100%;
 }
 
-.emoji-group {
+.seventv-emote-menu-emoji-group {
 	width: 100%;
 	height: 100%;
 }
diff --git a/src/assets/svg/icons/EmojiIcon.vue b/src/assets/svg/icons/EmojiIcon.vue
index 446473b3e..d54b8a33b 100644
--- a/src/assets/svg/icons/EmojiIcon.vue
+++ b/src/assets/svg/icons/EmojiIcon.vue
@@ -1,7 +1,7 @@
 /* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license
 (Commercial License) Copyright 2022 Fonticons, Inc. */
 <template>
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" width="1em" height="1em">
 		<path
 			d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM129.7 327.2l28.6-14.3c8.7 17.5 41.3 55.2 97.7 55.2s88.9-37.7 97.7-55.2l28.6 14.3C369.7 352.3 327.6 400 256 400s-113.7-47.7-126.3-72.8zM208.4 208c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32zm128 32c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32z"
 		/>
diff --git a/src/site/kick.com/modules/chat/ChatController.vue b/src/site/kick.com/modules/chat/ChatController.vue
index 226d51d78..8e18608dc 100644
--- a/src/site/kick.com/modules/chat/ChatController.vue
+++ b/src/site/kick.com/modules/chat/ChatController.vue
@@ -3,31 +3,21 @@
 		<ChatObserver :list-element="shallowList" />
 		<ChatAutocomplete ref="autocomplete" />
 	</template>
-	<ChatData />
-
-	<Teleport :to="emoteMenuButtonContainer">
-		<button ref="emoteMenuButton" class="seventv-emote-menu-button" @click="emoteMenu.open = !emoteMenu.open">
-			<Logo7TV provider="7TV" class="icon" />
-		</button>
-	</Teleport>
 
-	<template v-if="emoteMenu.open && emoteMenuAnchor">
-		<EmoteMenu :anchor-el="emoteMenuAnchor" @emote-click="insertToInput($event.name)" />
-	</template>
+	<ChatData />
+	<ChatEmoteMenu @pick-emote="insertToInput($event.name)" />
 </template>
 
 <script setup lang="ts">
-import { onUnmounted, ref, toRaw, watchEffect } from "vue";
+import { ref, toRaw, watchEffect } from "vue";
 import { ObserverPromise } from "@/common/Async";
 import { log } from "@/common/Logger";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useWorker } from "@/composable/useWorker";
-import Logo7TV from "@/assets/svg/logos/Logo7TV.vue";
 import ChatAutocomplete from "./ChatAutocomplete.vue";
+import ChatEmoteMenu from "./ChatEmoteMenu.vue";
 import ChatObserver from "./ChatObserver.vue";
 import ChatData from "@/app/chat/ChatData.vue";
-import EmoteMenu from "@/app/emote-menu/EmoteMenu.vue";
-import { useEmoteMenuContext } from "@/app/emote-menu/EmoteMenuContext";
 
 const props = defineProps<{
 	slug: string;
@@ -61,11 +51,6 @@ const shallowList = ref<HTMLDivElement | null>(null);
 
 const autocomplete = ref<InstanceType<typeof ChatAutocomplete> | null>(null);
 
-const emoteMenu = useEmoteMenuContext();
-const emoteMenuAnchor = document.getElementById("chatroom-footer");
-
-const emoteMenuButtonContainer = document.createElement("seventv-container");
-
 function insertToInput(value: string): void {
 	if (!autocomplete.value) return;
 
@@ -75,14 +60,6 @@ function insertToInput(value: string): void {
 let observer: ObserverPromise<HTMLDivElement> | null = null;
 
 watchEffect(async () => {
-	const parent = document.getElementById("chatroom");
-	if (!parent) return;
-
-	const inputRow = parent.querySelector(".chat-message-row");
-	if (!inputRow) return;
-
-	inputRow.lastElementChild?.insertAdjacentElement("beforebegin", emoteMenuButtonContainer);
-
 	// Update channel context
 	const ok = ctx.setCurrentChannel({
 		id: id.toString(),
@@ -127,30 +104,4 @@ watchEffect(async () => {
 		shallowList.value = chatroomTop.nextElementSibling.firstElementChild as HTMLDivElement;
 	}
 });
-
-onUnmounted(() => {
-	emoteMenuButtonContainer.remove();
-});
 </script>
-
-<style scoped lang="scss">
-.seventv-emote-menu-button {
-	display: grid;
-	align-items: center;
-	border: none;
-	background: transparent;
-	cursor: pointer;
-	transition: background 0.2s ease-in-out;
-	height: 2.25rem;
-	border-radius: 0.25rem;
-	padding: 0 0.5rem;
-
-	&:hover {
-		background: rgba(255, 255, 255, 10%);
-	}
-
-	.icon {
-		font-size: 1.25rem;
-	}
-}
-</style>
diff --git a/src/site/kick.com/modules/chat/ChatEmoteMenu.vue b/src/site/kick.com/modules/chat/ChatEmoteMenu.vue
new file mode 100644
index 000000000..bf74f9e6d
--- /dev/null
+++ b/src/site/kick.com/modules/chat/ChatEmoteMenu.vue
@@ -0,0 +1,80 @@
+<template>
+	<Teleport :to="emoteMenuButtonContainer">
+		<button ref="emoteMenuButton" class="seventv-emote-menu-button" @click="emoteMenu.open = !emoteMenu.open">
+			<Logo7TV provider="7TV" class="icon" />
+		</button>
+	</Teleport>
+
+	<template v-if="emoteMenu.open && emoteMenuAnchor">
+		<EmoteMenu
+			:anchor-el="emoteMenuAnchor"
+			width="20.5rem"
+			scale="0.62rem"
+			@emote-click="emit('pick-emote', $event)"
+			@close="close"
+		/>
+	</template>
+</template>
+
+<script setup lang="ts">
+import { onUnmounted, watchEffect } from "vue";
+import Logo7TV from "@/assets/svg/logos/Logo7TV.vue";
+import EmoteMenu from "@/app/emote-menu/EmoteMenu.vue";
+import { useEmoteMenuContext } from "@/app/emote-menu/EmoteMenuContext";
+
+const emit = defineEmits<{
+	(e: "pick-emote", emote: SevenTV.ActiveEmote): void;
+}>();
+
+const emoteMenu = useEmoteMenuContext();
+const emoteMenuAnchor = document.getElementById("chatroom-footer");
+
+const emoteMenuButtonContainer = document.createElement("seventv-container");
+
+function close(ev: MouseEvent): void {
+	if (!(ev.target instanceof HTMLElement)) return;
+	if (emoteMenuAnchor?.contains(ev.target) || emoteMenuButtonContainer.contains(ev.target)) return;
+
+	emoteMenu.open = false;
+}
+
+watchEffect(() => {
+	const parent = document.getElementById("chatroom");
+	if (!parent) return;
+
+	const inputRow = parent.querySelector(".chat-message-row");
+	if (!inputRow) return;
+
+	inputRow.lastElementChild?.insertAdjacentElement("beforebegin", emoteMenuButtonContainer);
+});
+
+onUnmounted(() => {
+	emoteMenuButtonContainer.remove();
+});
+</script>
+
+<style scoped lang="scss">
+.seventv-emote-menu-wrap {
+	width: 21rem !important;
+}
+
+.seventv-emote-menu-button {
+	display: grid;
+	align-items: center;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	transition: background 0.2s ease-in-out;
+	height: 2.25rem;
+	border-radius: 0.25rem;
+	padding: 0 0.5rem;
+
+	&:hover {
+		background: rgba(255, 255, 255, 10%);
+	}
+
+	.icon {
+		font-size: 1.25rem;
+	}
+}
+</style>
diff --git a/src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue b/src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue
index a388b2669..dc44529d2 100644
--- a/src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue
+++ b/src/site/twitch.tv/modules/emote-menu/EmoteMenu.vue
@@ -1,5 +1,15 @@
 <template>
-	<EmoteMenu v-if="anchorEl" :anchor-el="anchorEl" :instance="props.instance" @emote-click="onEmoteClick($event)" />
+	<div class="seventv-emote-menu-wrap">
+		<EmoteMenu
+			v-if="anchorEl"
+			:anchor-el="anchorEl"
+			width="32.5rem"
+			scale="1rem"
+			:instance="props.instance"
+			@emote-click="onEmoteClick($event)"
+			@close="onClose"
+		/>
+	</div>
 
 	<!-- Replace the emote menu button -->
 	<Teleport v-if="buttonEl && placement === 'regular'" :to="buttonEl">
@@ -12,7 +22,7 @@
 
 <script setup lang="ts">
 import { nextTick, onMounted, onUnmounted, ref, watch, watchEffect } from "vue";
-import { onClickOutside, onKeyStroke, useKeyModifier } from "@vueuse/core";
+import { onKeyStroke, useKeyModifier } from "@vueuse/core";
 import { log } from "@/common/Logger";
 import { HookedInstance } from "@/common/ReactHooks";
 import { defineFunctionHook, definePropertyHook, unsetPropertyHook } from "@/common/Reflection";
@@ -35,7 +45,6 @@ const props = defineProps<{
 
 const anchorEl = ref<HTMLElement | undefined>();
 const inputEl = ref<HTMLElement | undefined>();
-const containerRef = ref<HTMLElement | undefined>();
 
 const ctx = useEmoteMenuContext();
 ctx.channelID = props.instance.component.props.channelID ?? "";
@@ -163,7 +172,7 @@ definePropertyHook(props.instance.component.autocompleteInputRef, "state", {
 
 // Handle click-outside
 // This closes the menu
-onClickOutside(containerRef, (e) => {
+function onClose(e: MouseEvent) {
 	if (settingsContext.open || !(e.target instanceof Node)) return;
 
 	// If the click was inside the input or on the button, ignore it
@@ -174,18 +183,18 @@ onClickOutside(containerRef, (e) => {
 	}
 
 	ctx.open = false;
-});
+}
 
 // Capture anchor / input elements
 watchEffect(() => {
 	if (!anchorEl.value && props.instance.domNodes.root) {
-		const n = props.instance.domNodes.root.querySelector(".seventv-chat-input-textarea");
+		const n = props.instance.domNodes.root.querySelector(".chat-input");
 		if (!n) return;
 
-		const anchor = n.querySelector("[data-test-selector='chat-input']") ?? n;
+		const input = n.querySelector("[data-test-selector='chat-input']") ?? n;
 
-		anchorEl.value = (anchor ?? n) as HTMLElement;
-		inputEl.value = n as HTMLElement;
+		anchorEl.value = n as HTMLElement;
+		inputEl.value = input as HTMLElement;
 	}
 });
 
@@ -208,128 +217,4 @@ onUnmounted(() => {
 		color: var(--seventv-primary);
 	}
 }
-
-.seventv-emote-menu-container {
-	max-width: 100%;
-	z-index: 10;
-
-	.seventv-emote-menu {
-		position: relative;
-		max-height: calc(100vh - 15rem);
-		display: flex;
-		flex-direction: column;
-		width: 32rem;
-		overflow: clip;
-		border-radius: 0.25rem;
-		background-color: var(--seventv-background-transparent-1);
-
-		@at-root .seventv-transparent & {
-			backdrop-filter: blur(1rem);
-		}
-
-		outline: 0.1rem solid var(--seventv-border-transparent-1);
-
-		.seventv-emote-menu-header {
-			border-bottom: 0.1rem solid var(--seventv-border-transparent-1);
-			border-radius: 0.6rem 0.6rem 0 0;
-			background: hsla(0deg, 0%, 50%, 6%);
-
-			.seventv-emote-menu-header-providers {
-				display: flex;
-				height: 4.5rem;
-				justify-content: space-evenly;
-				column-gap: 0.5rem;
-				padding: 0.75rem;
-
-				.seventv-emote-menu-provider-icon {
-					padding: 0.5rem;
-					cursor: pointer;
-					display: flex;
-					user-select: none;
-					justify-content: center;
-					column-gap: 0.5em;
-					background: hsla(0deg, 0%, 50%, 6%);
-					color: var(--seventv-text-color-secondary);
-					border-radius: 0.2rem;
-					flex-grow: 1;
-					width: 2rem;
-
-					&:hover {
-						background: #80808029;
-					}
-
-					transition: width 90ms ease-in-out, background 150ms ease-in-out;
-
-					&[selected="true"] {
-						background: var(--seventv-highlight-neutral-1);
-						color: var(--seventv-text-color-normal);
-						width: 6em;
-					}
-
-					> svg {
-						width: 2rem;
-						height: 2rem;
-					}
-
-					> span {
-						font-family: Roboto, monospace;
-						font-weight: 600;
-					}
-				}
-			}
-
-			.emote-search {
-				padding: 0 0.75rem 0.75rem;
-				width: 100%;
-				position: relative;
-
-				.search-icon {
-					position: absolute;
-					display: flex;
-					align-items: center;
-					top: 0;
-					left: 1rem;
-					height: 3rem;
-					width: 3rem;
-					user-select: none;
-					pointer-events: none;
-					padding: 0.85rem;
-					color: var(--seventv-border-transparent-1);
-
-					> svg {
-						height: 100%;
-						width: 100%;
-					}
-				}
-
-				.emote-search-input {
-					background-color: var(--seventv-background-shade-1);
-					border-radius: 0.4rem;
-					height: 3rem;
-					width: 100%;
-					border: 1px solid var(--seventv-border-transparent-1);
-					padding-left: 3rem;
-					color: currentcolor;
-					outline: none;
-					transition: outline 140ms;
-
-					&:focus {
-						outline: 1px solid var(--seventv-primary);
-					}
-				}
-			}
-		}
-
-		.seventv-emote-menu-body {
-			display: flex;
-			height: 40rem;
-			overflow: hidden;
-			flex-shrink: 1;
-
-			&[selected="false"] {
-				display: none;
-			}
-		}
-	}
-}
 </style>

From 1653d3b7733445b7bfb222e15bde70c8080c5373 Mon Sep 17 00:00:00 2001
From: Anatole <me@anatole.dev>
Date: Tue, 30 May 2023 22:19:47 +0200
Subject: [PATCH 26/26] eventapi inactivity disconnect

---
 src/worker/worker.driver.ts |  3 --
 src/worker/worker.events.ts | 82 +++++++++++++++++++++++++++++--------
 2 files changed, 64 insertions(+), 21 deletions(-)

diff --git a/src/worker/worker.driver.ts b/src/worker/worker.driver.ts
index d12ff5052..8a0f1054f 100644
--- a/src/worker/worker.driver.ts
+++ b/src/worker/worker.driver.ts
@@ -38,9 +38,6 @@ export class WorkerDriver extends EventTarget {
 		this.eventAPI = new EventAPI(this);
 
 		db.ready().then(async () => {
-			// Connect to EventAPI
-			this.eventAPI.connect("WebSocket");
-
 			// Fetch global emotes & cosmetics
 			const sets = [] as SevenTV.EmoteSet[];
 			let emoteCount = 0;
diff --git a/src/worker/worker.events.ts b/src/worker/worker.events.ts
index c012650d8..3b7191f95 100644
--- a/src/worker/worker.events.ts
+++ b/src/worker/worker.events.ts
@@ -8,7 +8,7 @@ import { WorkerPort } from "./worker.port";
 import { EventAPIMessage, EventAPIOpCode, EventContext, SubscriptionData } from ".";
 
 export class EventAPI {
-	private transport: EventAPITransport | null = null;
+	private transport: EventAPITransport = "WebSocket";
 	private heartbeatInterval: number | null = null;
 	private backoff = 100;
 
@@ -19,6 +19,9 @@ export class EventAPI {
 	private socket: WebSocket | null = null;
 	private eventSource: EventSource | null = null;
 	private shouldResume = false;
+	private shouldReconnect = true;
+	private disconnectTimer: number | null = null;
+	private disconnectReason = "";
 
 	get platform(): Platform {
 		return "TWITCH";
@@ -51,6 +54,9 @@ export class EventAPI {
 					data: d,
 				});
 			};
+			this.shouldReconnect = true;
+			this.disconnectTimer = null;
+			this.disconnectReason = "";
 		}
 
 		log.debug("<EventAPI>", "Connecting...", `url=${this.url}`);
@@ -87,6 +93,8 @@ export class EventAPI {
 	private onHello(msg: EventAPIMessage<"HELLO">): void {
 		if (this.shouldResume) {
 			this.resume(this.sessionID);
+		} else {
+			this.syncSubscriptions();
 		}
 
 		this.sessionID = msg.data.session_id;
@@ -138,16 +146,7 @@ export class EventAPI {
 					log.error("<EventAPI>", "Resume failed, manually reconfiguring...");
 
 					this.shouldResume = false;
-
-					for (const [t, rec] of Object.entries(this.subscriptions)) {
-						delete this.subscriptions[t];
-
-						for (const sub of rec) {
-							for (const port of sub.ports.values()) {
-								for (const channelID of sub.channels) this.subscribe(t, sub.condition, port, channelID);
-							}
-						}
-					}
+					this.syncSubscriptions();
 				}
 			}
 		}
@@ -195,6 +194,15 @@ export class EventAPI {
 				condition,
 			},
 		});
+
+		if (this.socket === null) {
+			this.connect(this.transport);
+		}
+
+		if (typeof this.disconnectTimer === "number" && this.disconnectReason === "inactive") {
+			clearTimeout(this.disconnectTimer);
+			this.disconnectTimer = null;
+		}
 	}
 
 	unsubscribe(type: string, condition: Record<string, string>, port: WorkerPort) {
@@ -204,6 +212,9 @@ export class EventAPI {
 		sub.ports.delete(port.id);
 		if (sub.ports.size <= 0) {
 			this.subscriptions[type] = this.subscriptions[type].filter((c) => c !== sub);
+			if (!this.subscriptions[type].length) {
+				delete this.subscriptions[type];
+			}
 
 			this.sendMessage({
 				op: "UNSUBSCRIBE",
@@ -213,6 +224,10 @@ export class EventAPI {
 				},
 			});
 		}
+
+		if (!Object.keys(this.subscriptions).length) {
+			this.disconnect(false, 5e3, "inactive");
+		}
 	}
 
 	unsubscribeChannel(id: string, port: WorkerPort): void {
@@ -249,6 +264,18 @@ export class EventAPI {
 		return result;
 	}
 
+	syncSubscriptions(): void {
+		for (const [t, rec] of Object.entries(this.subscriptions)) {
+			delete this.subscriptions[t];
+
+			for (const sub of rec) {
+				for (const port of sub.ports.values()) {
+					for (const channelID of sub.channels) this.subscribe(t, sub.condition, port, channelID);
+				}
+			}
+		}
+	}
+
 	sendMessage<O extends keyof typeof EventAPIOpCode>(msg: EventAPIMessage<O>): void {
 		// retry if we're no primary has been selected or the socket isn't ready
 		if (!(this.socket && this.socket.readyState === WebSocket.OPEN)) {
@@ -270,11 +297,18 @@ export class EventAPI {
 
 	private onClose(): void {
 		this.socket = null;
-		const n = this.reconnect();
 
-		this.shouldResume = true;
+		let n = 0;
+		if (this.shouldReconnect) {
+			n = this.reconnect();
+			this.shouldResume = true;
+		}
 
-		log.debug("<EventAPI>", "Disconnected", `url=${this.url}, reconnect=${n}`);
+		log.debug(
+			"<EventAPI>",
+			"Disconnected",
+			`url=${this.url}, reconnect=${n || "no"}, ${this.disconnectReason && `reason=${this.disconnectReason}`}`,
+		);
 	}
 
 	reconnect(): number {
@@ -288,11 +322,23 @@ export class EventAPI {
 		return jitter;
 	}
 
-	disconnect(): void {
-		if (!this.socket) return;
+	disconnect(shouldReconnect = true, timer = 0, reason = ""): void {
+		this.disconnectReason = reason;
 
-		this.socket.close(1000);
-		this.socket = null;
+		const f = () => {
+			if (!this.socket) return;
+
+			this.socket.close(1000);
+			this.socket = null;
+			this.shouldReconnect = shouldReconnect;
+			this.disconnectTimer = null;
+		};
+
+		if (timer) {
+			this.disconnectTimer = setTimeout(f, timer);
+		} else {
+			f();
+		}
 	}
 }