4.20.89

* Added: Setting to display timestamps on additional types of chat messages. (Closes #983)
* Changed: Do not set a Chat Width by default.
* Changed: Have WebMunch dump a list of possible webpack bundle names when failing to find webpack.
* Fixed: Appearance issues caused by Twitch's continual migration to procedural CSS class names, requiring duplicate CSS to achieve a native look.
* Fixed: Ambiguous input field names in some FFZ Control Center widgets. (Closes #1017)
* Fixed: Stop using Algolia for tag search.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.20.87",
+  "version": "4.20.89",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "private": true,
   "license": "Apache-2.0",

src/modules/main_menu/components/addon.vue

@@ -1,7 +1,7 @@
 <template lang="html">
 	<div class="ffz--addon-info tw-elevation-1 tw-c-background-base tw-border tw-border-radius-large tw-pd-1 tw-mg-b-1 tw-flex tw-flex-nowrap">
 		<div class="tw-flex tw-flex-column tw-align-center tw-flex-shrink-0 tw-mg-r-1">
-			<div class="tw-card-img--size-6 tw-overflow-hidden tw-mg-b-1">
+			<div class="ffz-card-img--size-6 tw-overflow-hidden tw-mg-b-1">
 				<img :src="icon" class="tw-image">
 			</div>
 

src/modules/main_menu/components/badge-term-editor.vue

@@ -191,16 +191,18 @@ export default {
 	},
 
 	data() {
+		const this_id = `badge-term$${id++}`;
+
 		if ( this.adding )
 			return {
-				id: id++,
+				id: this_id,
 				deleting: false,
 				editing: true,
 				edit_data: deep_copy(this.term)
 			};
 
 		return {
-			id: id++,
+			id: this_id,
 			deleting: false,
 			editing: false,
 			edit_data: null

src/modules/main_menu/components/changelog.vue

@@ -53,7 +53,7 @@
 									:href="commit.author.html_url"
 									target="_blank"
 									rel="noopener noreferrer"
-									class="tw-inline-flex tw-align-items-center tw-link tw-link--inherit tw-mg-x-05 ffz-tooltip"
+									class="tw-inline-flex tw-align-items-center ffz-link ffz-link--inherit tw-mg-x-05 ffz-tooltip"
 									data-tooltip-type="link"
 								>
 									<figure
@@ -77,7 +77,7 @@
 						v-if="commit.hash"
 						class="tw-font-size-8 tw-c-text-alt-2"
 					>
-						@<a :href="commit.link" target="_blank" rel="noopener noreferrer" class="tw-link tw-link--inherit ffz-tooltip" data-tooltip-type="link">{{ commit.hash }}</a>
+						@<a :href="commit.link" target="_blank" rel="noopener noreferrer" class="ffz-link ffz-link--inherit ffz-tooltip" data-tooltip-type="link">{{ commit.hash }}</a>
 					</div>
 					<time
 						v-if="commit.date"

src/modules/main_menu/components/game-list-editor.vue

@@ -14,7 +14,7 @@
 					<div class="tw-pd-x-1 tw-pd-y-05">
 						<div class="tw-card tw-relative">
 							<div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row">
-								<div class="tw-card-img tw-card-img--size-3 tw-flex-shrink-0 tw-overflow-hidden">
+								<div class="ffz-card-img ffz-card-img--size-3 tw-flex-shrink-0 tw-overflow-hidden">
 									<aspect :ratio="1/1.33">
 										<img
 											:alt="slot.item.displayName"
@@ -55,7 +55,7 @@
 					<a
 						v-if="can_link"
 						:href="`/directory/game/${i}`"
-						class="tw-link"
+						class="ffz-link"
 						@click.prevent="handleLink(i)"
 					>
 						{{ i }}

src/modules/main_menu/components/home-page.vue

@@ -70,14 +70,14 @@
 					:key="addon.key"
 					class="tw-mg-b-05 tw-flex tw-align-items-center"
 				>
-					<div class="tw-card-img--size-4 tw-overflow-hidden tw-mg-r-1">
+					<div class="ffz-card-img--size-4 tw-overflow-hidden tw-mg-r-1">
 						<img :src="addon.icon" class="tw-image">
 					</div>
 					<div>
 						<a
 							v-if="addon.enabled && addon.settings"
 							href="#"
-							class="tw-strong tw-link--inherit"
+							class="tw-strong ffz-link--inherit"
 							@click.prevent="item.requestPage(addon.settings)"
 						>
 							{{ addon.name_i18n ? t(addon.name_i18n, addon.name) : addon.name }}
@@ -114,14 +114,14 @@
 					:key="addon.key"
 					class="tw-mg-b-05 tw-flex tw-align-items-center"
 				>
-					<div class="tw-card-img--size-4 tw-overflow-hidden tw-mg-r-1">
+					<div class="ffz-card-img--size-4 tw-overflow-hidden tw-mg-r-1">
 						<img :src="addon.icon" class="tw-image">
 					</div>
 					<div>
 						<a
 							v-if="addon.enabled && addon.settings"
 							href="#"
-							class="tw-strong tw-link--inherit"
+							class="tw-strong ffz-link--inherit"
 							@click.prevent="item.requestPage(addon.settings)"
 						>
 							{{ addon.name_i18n ? t(addon.name_i18n, addon.name) : addon.name }}

src/modules/main_menu/components/main-menu.vue

@@ -91,7 +91,7 @@
 						<a
 							v-if="version.commit"
 							:href="`https://www.github.com/FrankerFaceZ/FrankerFaceZ/commit/${version.commit}`"
-							class="tw-link tw-link--inherit"
+							class="ffz-link ffz-link--inherit"
 							target="_blank"
 							rel="noopener noreferrer"
 						>

src/modules/main_menu/components/term-editor.vue

@@ -262,16 +262,18 @@ export default {
 	},
 
 	data() {
+		const this_id = `term$${id++}`;
+
 		if ( this.adding )
 			return {
-				id: id++,
+				id: this_id,
 				deleting: false,
 				editing: true,
 				edit_data: deep_copy(this.term)
 			};
 
 		return {
-			id: id++,
+			id: this_id,
 			deleting: false,
 			editing: false,
 			edit_data: null

src/modules/main_menu/setting-mixin.js

@@ -189,7 +189,7 @@ export default {
 				} else
 					this.source_value = undefined;
 
-				this.has_value = this.profile.has(this.item.setting);
+				this.has_value = this.profile && this.profile.has(this.item.setting);
 				if ( ! this.has_value )
 					this.value = this.isInherited ? this.source_value : this.default_value;
 			}, 0);

src/modules/viewer_cards/card.vue

@@ -29,7 +29,7 @@
 									:href="`/${login}`"
 									target="_blank"
 									rel="noopener noreferrer"
-									class="tw-interactive tw-link tw-link--hover-color-inherit tw-link--inherit"
+									class="tw-interactive ffz-link ffz-link--hover-color-inherit ffz-link--inherit"
 								>
 									{{ displayName }}
 								</a>

src/settings/components/category.vue

@@ -5,7 +5,7 @@
 				{{ t(type.i18n, type.title) }}
 			</label>
 
-			<div class="ffz--search-avatar tw-mg-x-05 tw-card-img--size-2">
+			<div class="ffz--search-avatar tw-mg-x-05 ffz-card-img--size-2">
 				<aspect :ratio="1/1.33">
 					<img
 						v-if="current"
@@ -29,7 +29,7 @@
 				<div class="tw-pd-x-1 tw-pd-y-05">
 					<div class="tw-card tw-relative">
 						<div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row">
-							<div class="tw-card-img tw-card-img--size-3 tw-flex-shrink-0 tw-overflow-hidden">
+							<div class="ffz-card-img ffz-card-img--size-3 tw-flex-shrink-0 tw-overflow-hidden">
 								<aspect :ratio="1/1.33">
 									<img
 										:alt="slot.item.displayName"

src/settings/components/channel.vue

@@ -31,7 +31,7 @@
 				<div class="tw-pd-x-1 tw-pd-y-05">
 					<div class="tw-card tw-relative">
 						<div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row">
-							<div class="tw-card-img tw-card-img--size-3 tw-flex-shrink-0 tw-overflow-hidden">
+							<div class="ffz-card-img ffz-card-img--size-3 tw-flex-shrink-0 tw-overflow-hidden">
 								<aspect :ratio="1">
 									<img
 										:alt="slot.item.displayName"

src/sites/clips/line.jsx

@@ -89,7 +89,7 @@ export default class Line extends Module {
 								t.chat.badges.render(msg, createElement)
 							}</span>
 							<a
-								class="clip-chat__message-author tw-font-size-5 tw-link notranslate"
+								class="clip-chat__message-author tw-font-size-5 ffz-link notranslate"
 								href={`https://www.twitch.tv/${user.login}/clips`}
 								style={{color}}
 							>

src/sites/twitch-twilight/modules/channel.jsx

@@ -199,7 +199,7 @@ export default class Channel extends Module {
 		if ( ! inst._ffz_tips ) {
 			const tt = this.resolve('tooltips');
 			if ( tt ) {
-				inst._ffz_tips = tt._createInstance(el, 'tw-link', 'link', tt.getRoot());
+				inst._ffz_tips = tt._createInstance(el, 'ffz-link', 'link', tt.getRoot());
 				inst._ffz_tip_el = el;
 			}
 		}

src/sites/twitch-twilight/modules/chat/index.js

@@ -440,7 +440,7 @@ export default class ChatHook extends Module {
 		});
 
 		this.settings.add('chat.width', {
-			default: 340,
+			default: null,
 			ui: {
 				path: 'Chat > Appearance >> General @{"sort": -1}',
 				title: 'Width',
@@ -449,20 +449,28 @@ export default class ChatHook extends Module {
 				process(val) {
 					val = parseInt(val, 10);
 					if ( isNaN(val) || ! isFinite(val) || val <= 0 )
-						return 340;
+						return null;
 
 					return val;
 				}
 			}
 		});
 
+		this.settings.add('chat.effective-width', {
+			requires: ['chat.width', 'context.ui.rightColumnWidth'],
+			process(ctx) {
+				const val = ctx.get('chat.width');
+				return val == null ? (ctx.get('context.ui.rightColumnWidth') || 340) : val;
+			}
+		});
+
 		this.settings.add('chat.use-width', {
 			requires: ['chat.width', 'context.ui.rightColumnExpanded', 'context.isWatchParty'],
 			process(ctx) {
 				if ( ! ctx.get('context.ui.rightColumnExpanded') || ctx.get('context.isWatchParty') )
 					return false;
 
-				return ctx.get('chat.width') != 340;
+				return ctx.get('chat.width') != null;
 			}
 		});
 
@@ -511,6 +519,16 @@ export default class ChatHook extends Module {
 			}
 		});
 
+		this.settings.add('chat.extra-timestamps', {
+			default: true,
+			ui: {
+				path: 'Chat > Appearance >> Chat Lines',
+				title: 'Display timestamps on notices.',
+				description: 'When enabled, timestamps will be displayed on point redemptions, subscriptions, etc.',
+				component: 'setting-check-box'
+			}
+		});
+
 		this.settings.add('chat.subs.show', {
 			default: 3,
 			ui: {
@@ -670,7 +688,7 @@ export default class ChatHook extends Module {
 		cancelAnimationFrame(this._update_css_waiter);
 		this._update_css_waiter = null;
 
-		const width = this.chat.context.get('chat.width'),
+		const width = this.chat.context.get('chat.effective-width'),
 			action_size = this.chat.context.get('chat.actions.size'),
 			ts_size = this.chat.context.get('chat.timestamp-size'),
 			size = this.chat.context.get('chat.font-size'),
@@ -808,7 +826,7 @@ export default class ChatHook extends Module {
 		this.chat.context.on('changed:chat.banners.prediction', this.cleanHighlights, this);
 
 		this.chat.context.on('changed:chat.subs.gift-banner', () => this.GiftBanner.forceUpdate(), this);
-		this.chat.context.on('changed:chat.width', this.updateChatCSS, this);
+		this.chat.context.on('changed:chat.effective-width', this.updateChatCSS, this);
 		this.settings.main_context.on('changed:chat.use-width', this.updateChatCSS, this);
 		this.chat.context.on('changed:chat.actions.size', this.updateChatCSS, this);
 		this.chat.context.on('changed:chat.font-size', this.updateChatCSS, this);

src/sites/twitch-twilight/modules/chat/line.js

@@ -527,7 +527,8 @@ other {# messages were deleted by a moderator.}
 					] : user_block)
 				];
 
-				let cls = `chat-line__message${show_class ? ' ffz--deleted-message' : ''}${twitch_clickable ? ' tw-relative' : ''}`,
+				let extra_ts,
+					cls = `chat-line__message${show_class ? ' ffz--deleted-message' : ''}${twitch_clickable ? ' tw-relative' : ''}`,
 					out = (tokens.length || ! msg.ffz_type) ? [
 						(this.props.showTimestamps || this.props.isHistorical) && e('span', {
 							className: 'chat-line__timestamp'
@@ -570,6 +571,9 @@ other {# messages were deleted by a moderator.}
 						}, JSON.stringify([tokens, msg.emotes], null, 2))*/
 					] : null;
 
+				if ( out == null )
+					extra_ts = t.chat.context.get('chat.extra-timestamps');
+
 				if ( msg.ffz_type === 'sub_mystery' ) {
 					const mystery = msg.mystery;
 					if ( mystery )
@@ -640,6 +644,9 @@ other {# messages were deleted by a moderator.}
 									className: `ffz-i-star${msg.sub_anon ? '-empty' : ''} tw-mg-r-05`
 								}),
 							e('div', null, [
+								out ? null : extra_ts && (this.props.showTimestamps || this.props.isHistorical) && e('span', {
+									className: 'chat-line__timestamp'
+								}, t.chat.formatTime(msg.timestamp)),
 								(out || msg.sub_anon) ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e),
 								sub_msg
 							]),
@@ -710,6 +717,9 @@ other {# messages were deleted by a moderator.}
 									className: 'ffz-i-star tw-mg-r-05'
 								}),
 							e('div', null, [
+								out ? null : extra_ts && (this.props.showTimestamps || this.props.isHistorical) && e('span', {
+									className: 'chat-line__timestamp'
+								}, t.chat.formatTime(msg.timestamp)),
 								(out || msg.sub_anon) ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e),
 								sub_msg
 							])
@@ -772,6 +782,9 @@ other {# messages were deleted by a moderator.}
 										className: `ffz-i-${plan.prime ? 'crown' : 'star'} tw-mg-r-05`
 									}),
 								e('div', null, [
+									out ? null : extra_ts && (this.props.showTimestamps || this.props.isHistorical) && e('span', {
+										className: 'chat-line__timestamp'
+									}, t.chat.formatTime(msg.timestamp)),
 									out ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e),
 									sub_msg
 								])
@@ -804,6 +817,9 @@ other {# messages were deleted by a moderator.}
 					if ( system_msg ) {
 						cls = `ffz-notice-line user-notice-line tw-pd-y-05 tw-pd-r-2 ffz--ritual-line${show_class ? ' ffz--deleted-message' : ''}${twitch_clickable ? ' tw-relative' : ''}`;
 						out = [
+							out ? null : extra_ts && (this.props.showTimestamps || this.props.isHistorical) && e('span', {
+								className: 'chat-line__timestamp'
+							}, t.chat.formatTime(msg.timestamp)),
 							system_msg,
 							out && e('div', {
 								className: 'chat-line--inline chat-line__message',
@@ -825,6 +841,9 @@ other {# messages were deleted by a moderator.}
 					cls = `ffz-notice-line ffz--points-line tw-pd-l-1 tw-pd-y-05 tw-pd-r-2${ffz_highlight ? ' ffz-custom-color ffz--points-highlight' : ''}${show_class ? ' ffz--deleted-message' : ''}${twitch_clickable ? ' tw-relative' : ''}`;
 					out = [
 						e('div', {className: 'tw-c-text-alt-2'}, [
+							out ? null : extra_ts && (this.props.showTimestamps || this.props.isHistorical) && e('span', {
+								className: 'chat-line__timestamp'
+							}, t.chat.formatTime(msg.timestamp)),
 							out ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e),
 							out ?
 								t.i18n.tList('chat.points.redeemed', 'Redeemed {reward} {cost}', {reward, cost}) :

src/sites/twitch-twilight/modules/chat/settings_menu.jsx

@@ -298,7 +298,7 @@ export default class SettingsMenu extends Module {
 					title: <span class="tw-strong">{this.i18n.t('chat.ffz-badge.title', 'FrankerFaceZ Badge')}</span>
 				})}{' '}
 				{this.i18n.tList('chat.ffz-badge.site', 'Please visit the {website} to change this badge.', {
-					website: (<a href="https://www.frankerfacez.com/donate" class="tw-link" rel="noopener noreferrer" target="_blank">
+					website: (<a href="https://www.frankerfacez.com/donate" class="ffz-link" rel="noopener noreferrer" target="_blank">
 						{this.i18n.t('chat.ffz-badge.site-link', 'FrankerFaceZ website')}
 					</a>)
 				})}

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-width.scss

@@ -6,6 +6,10 @@
 	width: calc(var(--ffz-chat-width) - 2rem) !important;
 }
 
+.channel-root {
+	width: unset !important;
+}
+
 body .whispers--theatre-mode.whispers--right-column-expanded-beside {
 	right: var(--ffz-chat-width);
 }

src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss

@@ -4,6 +4,14 @@
 .right-column {
 	order: 1;
 	z-index: 2;
+
+	#root &:not(.right-column--collapsed) {
+		width: var(--ffz-chat-width);
+	}
+}
+
+.channel-root {
+	width: unset !important;
 }
 
 #sideNav .collapse-toggle {

src/sites/twitch-twilight/modules/directory/index.jsx

@@ -267,11 +267,11 @@ export default class Directory extends SiteModule {
 					channel_url = `/${channel.login}`,
 					game_url = game && `/directory/game/${stream.game.name}`,
 
-					user_link = <a href={channel_url} data-href={channel_url} title={channel.displayName} class="tw-link tw-link--inherit" onClick={t.routeClick}>{channel.displayName}</a>,
+					user_link = <a href={channel_url} data-href={channel_url} title={channel.displayName} class="ffz-link ffz-link--inherit" onClick={t.routeClick}>{channel.displayName}</a>,
-					game_link = game && <a href={game_url} data-href={game_url} title={game.name} class="tw-link tw-link--inherit" onClick={t.routeClick}>{game.name}</a>;
+					game_link = game && <a href={game_url} data-href={game_url} title={game.name} class="ffz-link ffz-link--inherit" onClick={t.routeClick}>{game.name}</a>;
 
 				return (<div>
-					<a href={channel_url} data-href={channel_url} class="tw-link tw-link--inherit" data-test-selector="preview-card-titles__primary-link" onClick={t.routeClick}>
+					<a href={channel_url} data-href={channel_url} class="ffz-link ffz-link--inherit" data-test-selector="preview-card-titles__primary-link" onClick={t.routeClick}>
 						<h3 class="tw-ellipsis tw-font-size-5 tw-strong" title={stream.title}>{stream.title}</h3>
 					</a>
 					<div class="preview-card-titles__subtitle-wrapper">
@@ -295,7 +295,7 @@ export default class Directory extends SiteModule {
 								nodes.length > 1 ?
 									t.i18n.t('directory.hosted.by-many', 'Hosted by {count,number} channel{count,en_plural}', nodes.length) :
 									t.i18n.tList('directory.hosted.by-one', 'Hosted by {user}', {
-										user: <a href={`/${nodes[0].login}`} data-href={`/${nodes[0].login}`} title={nodes[0].displayName} class="tw-link tw-link--inherit" onClick={t.routeClick}>{nodes[0].displayName}</a>
+										user: <a href={`/${nodes[0].login}`} data-href={`/${nodes[0].login}`} title={nodes[0].displayName} class="ffz-link ffz-link--inherit" onClick={t.routeClick}>{nodes[0].displayName}</a>
 									})
 							}</p>
 						</div>

src/utilities/compat/webmunch.js

@@ -93,6 +93,20 @@ export default class WebMunch extends Module {
 		if ( ! name ) {
 			if ( attempts > 240 ) {
 				this.log.error("Unable to find webpack's loader after one minute.");
+
+				try {
+					const possibilities = [];
+					for(const key of Object.keys(window))
+						if ( has(window, key) && typeof key === 'string' && /webpack/i.test(key) && ! /ffz/i.test(key) )
+							possibilities.push(key);
+
+					if ( possibilities.length )
+						this.log.info('Possible Matches: ', possibilities.join(', '));
+					else
+						this.log.info('No possible matches found.');
+
+				} catch(err) { /* no-op */ }
+
 				this._resolveLoadWait(true);
 				return;
 			}

src/utilities/data/search-tags.gql

@@ -0,0 +1,11 @@
+query FFZ_SearchLiveTags($query: String!, $categoryID: ID, $limit: Int) {
+	searchLiveTags(userQuery: $query, categoryID: $categoryID, limit: $limit) {
+		id
+		isAutomated
+		isLanguageTag
+		localizedDescription
+		localizedName
+		scope
+		tagName
+	}
+}

src/utilities/data/tags-fetch.gql

@@ -1,9 +1,11 @@
 query FFZ_FetchTags($ids: [ID!]) {
 	contentTags(ids: $ids) {
 		id
+		isAutomated
 		isLanguageTag
-		tagName
-		localizedName
 		localizedDescription
+		localizedName
+		scope
+		tagName
 	}
 }

src/utilities/data/tags-top.gql

@@ -1,9 +1,11 @@
 query FFZ_TopTags($limit: Int) {
 	topTags(limit: $limit) {
 		id
+		isAutomated
 		isLanguageTag
-		tagName
-		localizedName
 		localizedDescription
+		localizedName
+		scope
+		tagName
 	}
 }

src/utilities/rich_tokens.js

@@ -825,7 +825,7 @@ TOKEN_TYPES.link = function(token, createElement, ctx) {
 		klass.push(`tw-block tw-border tw-border-radius-large tw-mg-y-05 tw-pd-05`);
 
 	if ( token.no_color )
-		klass.push(`tw-link--inherit`);
+		klass.push(`ffz-link--inherit`);
 
 	if ( ctx.vue )
 		return createElement('a', {

src/utilities/twitch-data.js

@@ -6,65 +6,10 @@
 // ============================================================================
 
 import Module from 'utilities/module';
-import {get, debounce, generateUUID} from 'utilities/object';
+import {get, debounce} from 'utilities/object';
 
 const LANGUAGE_MATCHER = /^auto___lang_(\w+)$/;
 
-const ALGOLIA_LANGUAGES = {
-	bg: 'bg-bg',
-	cs: 'cs-cz',
-	da: 'da-dk',
-	de: 'de-de',
-	el: 'el-gr',
-	en: 'en-us',
-	es: 'es-es',
-	'es-mx': 'es-mx',
-	fi: 'fi-fi',
-	fr: 'fr-fr',
-	hu: 'hu-hu',
-	it: 'it-it',
-	ja: 'ja-jp',
-	ko: 'ko-kr',
-	nl: 'nl-nl',
-	no: 'no-no',
-	pl: 'pl-pl',
-	'pt-br': 'pt-br',
-	pt: 'pt-pt',
-	ro: 'ro-ro',
-	ru: 'ru-ru',
-	sk: 'sk-sk',
-	sv: 'sv-se',
-	th: 'th-th',
-	tr: 'tr-tr',
-	vi: 'vi-vn',
-	'zh-cn': 'zh-cn',
-	'zh-tw': 'zh-tw'
-};
-
-/**
- * Returns the Algolia Language code for a given locale
- * @function getAlgoliaLanguage
- *
- * @param {string} locale - a string representation of a locale
- * @returns {string} the Algolia Language code for the given locale
- *
- * @example
- *
- *		console.log(getAlgoliaLanguage('en'));
- */
-function getAlgoliaLanguage(locale) {
-	if ( ! locale )
-		return ALGOLIA_LANGUAGES.en;
-
-	locale = locale.toLowerCase();
-	if ( ALGOLIA_LANGUAGES[locale] )
-		return ALGOLIA_LANGUAGES[locale];
-
-	locale = locale.split('-')[0];
-	return ALGOLIA_LANGUAGES[locale] || ALGOLIA_LANGUAGES.en;
-}
-
-
 /**
  * TwitchData is a container for getting different types of Twitch data
  * @class TwitchData
@@ -132,34 +77,6 @@ export default class TwitchData extends Module {
 		return session && session.locale || 'en-US'
 	}
 
-	async searchClient() {
-		if ( this._search )
-			return this._search;
-
-		const apollo = this.apollo.client,
-			core = this.site.getCore(),
-			web_munch = this.resolve('web_munch');
-
-		if ( ! web_munch )
-			return null;
-
-		await web_munch.enable();
-
-		const SearchClient = await this.web_munch.findModule('algolia-search');
-		if ( ! SearchClient || ! apollo || ! core )
-			return null;
-
-		this._search = new SearchClient({
-			appId: core.config.algoliaApplicationID,
-			apiKey: core.config.algoliaAPIKey,
-			apolloClient: apollo,
-			logger: core.logger,
-			config: core.config,
-			stats: core.stats
-		});
-
-		return this._search;
-	}
 
 	// ========================================================================
 	// Badges
@@ -350,6 +267,7 @@ export default class TwitchData extends Module {
 		return get('data.user.lastBroadcast', data);
 	}
 
+
 	// ========================================================================
 	// Broadcast ID
 	// ========================================================================
@@ -665,27 +583,28 @@ export default class TwitchData extends Module {
 		if ( ! node || ! node.id || ! node.tagName || ! node.localizedName )
 			return;
 
-		let old = null;
+		let tag = this.tag_cache.get(node.id);
-		if ( this.tag_cache.has(node.id) )
+		if ( ! tag ) {
-			old = this.tag_cache.get(old);
+			const match = node.isLanguageTag && LANGUAGE_MATCHER.exec(node.tagName),
+				lang = match && match[1] || null;
 
-		const match = node.isLanguageTag && LANGUAGE_MATCHER.exec(node.tagName),
+			tag = {
-			lang = match && match[1] || null;
+				id: node.id,
+				value: node.id,
+				is_auto: node.isAutomated,
+				is_language: node.isLanguageTag,
+				language: lang,
+				name: node.tagName,
+				scope: node.scope
+			};
 
-		const new_tag = {
+			this.tag_cache.set(node.id, tag);
-			id: node.id,
+		}
-			value: node.id,
-			is_language: node.isLanguageTag,
-			language: lang,
-			name: node.tagName,
-			label: node.localizedName
-		};
 
+		if ( node.localizedName )
+			tag.label = node.localizedName;
 		if ( node.localizedDescription )
-			new_tag.description = node.localizedDescription;
+			tag.description = node.localizedDescription;
-
-		const tag = old ? Object.assign(old, new_tag) : new_tag;
-		this.tag_cache.set(tag.id, tag);
 
 		if ( dispatch && tag.description && this._waiting_tags.has(tag.id) ) {
 			const promises = this._waiting_tags.get(tag.id);
@@ -907,100 +826,36 @@ export default class TwitchData extends Module {
 	 * @async
 	 *
 	 * @param {string} query - the search string
-	 * @param {string} [locale] - the locale to return tags from
+	 * @param {string} [locale] - UNUSED. the locale to return tags from
 	 * @param {string} [category=null] - the category to return tags from
 	 * @returns {string[]} an array containing tags that match the query string
 	 *
 	 * @example
 	 *
-	 *  console.log(this.twitch_data.getMatchingTags("Rainbo"));
+	 *  console.log(await this.twitch_data.getMatchingTags("Rainbo"));
 	 */
 	async getMatchingTags(query, locale, category = null) {
-		if ( ! locale )
+		/*if ( ! locale )
-			locale = this.locale;
+			locale = this.locale;*/
 
-		const client = await this.searchClient();
+		const data = await this.queryApollo({
+			query: await import(/* webpackChunkName: 'queries' */ './data/search-tags.gql'),
+			variables: {
+				query,
+				categoryID: category || null,
+				limit: 100
+			}
+		});
 
-		locale = getAlgoliaLanguage(locale);
+		const nodes = data?.data?.searchLiveTags;
-
+		if ( ! Array.isArray(nodes) || ! nodes.length )
-		let nodes;
-
-		if ( category ) {
-			const data = await client.queryForType(
-				'stream_tag', query, generateUUID(), {
-					hitsPerPage: 100,
-					faceFilters: [
-						`category_id:${category}`
-					],
-					restrictSearchableAttributes: [
-						`localizations.${locale}`,
-						'tag_name'
-					]
-				}
-			);
-
-			nodes = get('streamTags.hits', data);
-
-		} else {
-			const data = await client.queryForType(
-				'tag', query, generateUUID(), {
-					hitsPerPage: 100,
-					facetFilters: [
-						['tag_scope:SCOPE_ALL', 'tag_scope:SCOPE_CATEGORY']
-					],
-					restrictSearchableAttributes: [
-						`localizations.${locale}`,
-						'tag_name'
-					]
-				}
-			);
-
-			nodes = get('tags.hits', data);
-		}
-
-		if ( ! Array.isArray(nodes) )
 			return [];
 
-		const out = [], seen = new Set;
+		const out = [];
 		for(const node of nodes) {
-			const tag_id = node.tag_id || node.objectID;
+			const tag = this.memorizeTag(node);
-			if ( ! node || seen.has(tag_id) )
+			if ( tag )
-				continue;
-
-			seen.add(tag_id);
-			if ( ! this.tag_cache.has(tag_id) ) {
-				const match = node.tag_name && LANGUAGE_MATCHER.exec(node.tag_name),
-					lang = match && match[1] || null;
-
-				const tag = {
-					id: tag_id,
-					value: tag_id,
-					is_language: lang != null,
-					language: lang,
-					label: node.localizations && (node.localizations[locale] || node.localizations['en-us']) || node.tag_name
-				};
-
-				if ( node.description_localizations ) {
-					const desc = node.description_localizations[locale] || node.description_localizations['en-us'];
-					if ( desc )
-						tag.description = desc;
-				}
-
-				this.tag_cache.set(tag.id, tag);
 				out.push(tag);
-
-			} else {
-				const tag = this.tag_cache.get(tag_id);
-				if ( ! tag.description && node.description_localizations ) {
-					const desc = node.description_localizations[locale] || node.description_localizations['en-us'];
-					if ( desc ) {
-						tag.description = desc;
-						this.tag_cache.set(tag.id, tag);
-					}
-				}
-
-				out.push(tag);
-			}
 		}
 
 		return out;

styles/main.scss

@@ -3,7 +3,7 @@
 @import 'widgets';
 @import 'dialog';
 
-@import 'input/index';
+@import 'native/index';
 @import 'structure/index';
 
 @import 'chat';

styles/native/card.scss

@@ -0,0 +1,15 @@
+.ffz-card-img {
+	background-color: var(--color-background-placeholder);;
+	flex-shrink: 0;
+	width: 100%;
+
+	&--size-2 { width: 2rem }
+	&--size-3 { width: 3rem }
+	&--size-4 { width: 4rem }
+	&--size-6 { width: 6rem }
+	&--size-8 { width: 8rem }
+	&--size-12 { width: 12rem }
+	&--size-16 { width: 16rem }
+	&--size-24 { width: 24rem }
+	&--size-32 { width: 32rem }
+}

styles/native/index.scss

@@ -1,4 +1,7 @@
 @import "button";
 @import "checkbox";
 @import "interactable";
-@import "text";
+@import "text";
+@import "link";
+@import "card";
+@import "tag";

styles/native/link.scss

@@ -0,0 +1,67 @@
+.ffz-link {
+	color: var(--color-text-link);
+	text-decoration: none;
+
+	.tw-root--hover &:hover {
+		color: var(--color-text-link-hover);
+		text-decoration: underline;
+	}
+
+	&:active { color: var(--color-text-link-active); }
+	&[data-focus-visible-added], &:focus { color: var(--color-text-link-focus); }
+	&:visited { color: var(--color-text-link-visited); }
+
+	&--overlay {
+		color: var(--color-text-overlay-link);
+		text-decoration: underline;
+
+		&:hover {
+			text-decoration: none;
+		}
+
+		.tw-root--hover &:hover {
+			color: var(--color-text-overlay-link-hover);
+		}
+
+		&:active { color: var(--color-text-overlay-link-active) }
+		&:focus, &[data-focus-visible-added] { color: var(--color-text-overlay-link-focus) }
+		&:visited { color: var(--color-text-overlay-link-visited) }
+	}
+
+	&--underline { text-decoration: underline; }
+
+	&--inherit {
+		&, &:visited, &:focus, &[data-focus-visible-added], &:active {
+			color: inherit;
+		}
+
+		.tw-root--hover &:hover {
+			color: var(--color-text-link-hover);
+		}
+	}
+
+	.tw-root--hover &--hover-color-inherit:hover {
+		color: inherit;
+	}
+
+	.tw-root--hover &--hover-underline-none {
+		&, &:hover {
+			text-decoration: none;
+		}
+	}
+
+	&--button {
+		&:active {
+			outline: none
+		}
+	}
+
+	&--disabled {
+		opacity: .5;
+
+		.tw-root--hover &:hover {
+			cursor: not-allowed;
+			text-decoration: none;
+		}
+	}
+}

styles/native/tag.scss

@@ -0,0 +1,62 @@
+.ffz-tag {
+	background-color: var(--color-background-tag-default);
+	border: var(--border-width-tag) solid transparent;
+	color: var(--color-text-tag);
+	height: 2rem;
+
+	&:not(:disabled) {
+		&:focus, &[data-focus-visible-added] {
+			background: var(--color-background-tag-hover);
+			border: var(--border-width-tag) solid var(--color-border-input-focus);
+		}
+
+		.tw-root--hover &:hover {
+			background: var(--color-background-tag-hover);
+			color: var(--color-text-tag);
+			text-decoration: none;
+		}
+
+		&:active {
+			background: var(--color-background-tag-active);
+		}
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	&__content {
+		padding: 0 .8rem;
+
+		&--icon {
+			padding-right: .4rem
+		}
+	}
+
+	&__icon {
+		height: 1.6rem;
+		width: 1.6rem;
+	}
+
+	&--overlay {
+		background: rgba(0,0,0,0.3);
+		border: var(--border-width-tag) solid var(--color-border-input-overlay);
+		color: var(--color-text-overlay);
+
+		&:not(:disabled) {
+			&:focus, &[data-focus-visible-added] {
+				border: var(--border-width-tag) solid var(--color-border-input-overlay-focus);
+			}
+
+			.tw-root--hover &:hover {
+				background: var(--color-background-interactable-overlay-hover);
+				color: var(--color-text-overlay);
+			}
+
+			&:active {
+				background: var(--color-background-interactable-overlay-active);
+			}
+		}
+	}
+}