Feat/emote bar

package.json

@@ -2,7 +2,7 @@
 	"name": "enhancer",
 	"module": "src/content/index.ts",
 	"type": "module",
-	"version": "5.1.15",
+	"version": "5.1.16",
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
 		"@preact/preset-vite": "^2.10.2",
@@ -13,7 +13,7 @@
 		"concurrently": "^9.1.2",
 		"husky": "^9.1.7",
 		"jszip": "^3.10.1",
-		"vite": "^7.0.5",
+		"vite": "^7.1.11",
 		"vite-plugin-generate-file": "^0.3.1",
 		"vite-tsconfig-paths": "^5.1.4"
 	},

src/platforms/kick/modules/settings/settings.module.tsx

@@ -50,40 +50,45 @@ export default class SettingsModule extends KickModule {
 				title: "Channel",
 				iconUrl: await this.commonUtils().getAssetFile(this.workerService(), "settings/channel.svg"),
 			},
+			{
+				title: "Experimental",
+				iconUrl: await this.commonUtils().getAssetFile(this.workerService(), "settings/experimental.svg"),
+			},
 			{
 				title: "About",
 				iconUrl: await this.commonUtils().getAssetFile(this.workerService(), "settings/about.svg"),
 			},
-		];
+		] as const;
+		const tabIndexes = Object.fromEntries(this.SETTINGS_TABS.map((tab, index) => [tab.title, index]));
 		const brandIcons = {
 			website: await this.commonUtils().getAssetFile(this.workerService(), "brands/website.svg"),
 			github: await this.commonUtils().getAssetFile(this.workerService(), "brands/github.svg"),
 			twitter: await this.commonUtils().getAssetFile(this.workerService(), "brands/twitter.svg"),
 			discord: await this.commonUtils().getAssetFile(this.workerService(), "brands/discord.svg"),
-		};
+		} as const;
 		this.SETTING_DEFINITIONS = [
 			{
 				id: "streamLatencyEnabled",
 				title: "Enable Stream Latency",
 				description: "Shows the current stream delay on top of the chat.",
 				type: "toggle",
-				tabIndex: 0,
+				tabIndex: tabIndexes.General,
 				requiresRefreshToDisable: true,
 			},
 			{
 				id: "realVideoTimeEnabled",
 				title: "Enable Real Video Time",
 				description: "Displays the real-world time of the VOD.",
 				type: "toggle",
-				tabIndex: 0,
+				tabIndex: tabIndexes.General,
 				requiresRefreshToDisable: true,
 			},
 			{
 				id: "realVideoTimeFormat12h",
 				title: "Use 12-Hour Time Format",
 				description: "Display real video time in 12-hour format (AM/PM) instead of 24-hour format.",
 				type: "toggle",
-				tabIndex: 0,
+				tabIndex: tabIndexes.General,
 			},
 			{
 				id: "chatImagesEnabled",
@@ -93,21 +98,21 @@ export default class SettingsModule extends KickModule {
 				confirmOnEnable: true,
 				confirmationMessage:
 					"Enhancer is not responsible for the content of images sent in the chat by users. By enabling this option, you can see images in the chat that may not look good. We do not moderate them in any way, we simply display them. Are you sure you want to enable this option?",
-				tabIndex: 1,
+				tabIndex: tabIndexes.Chat,
 			},
 			{
 				id: "chatImagesOnHover",
 				title: "Show Images on Hover",
 				description: "Images are hidden until you hover your mouse to reveal them.",
 				type: "toggle",
-				tabIndex: 1,
+				tabIndex: tabIndexes.Chat,
 			},
 			{
 				id: "chatImagesSize",
 				title: "Chat Image Size",
 				description: "Maximum size of images allowed in chat messages (in megabytes).",
 				type: "number",
-				tabIndex: 1,
+				tabIndex: tabIndexes.Chat,
 				min: 1,
 				step: 1,
 			},
@@ -116,14 +121,14 @@ export default class SettingsModule extends KickModule {
 				title: "Enable Chat Badges",
 				description: "Show custom chat badges from Enhancer extension.",
 				type: "toggle",
-				tabIndex: 1,
+				tabIndex: tabIndexes.Chat,
 			},
 			{
 				id: "chatNicknameCustomizationEnabled",
 				title: "Enable Nickname Customization",
 				description: "Show custom chat nickname customizations from Enhancer extension in chat.",
 				type: "toggle",
-				tabIndex: 1,
+				tabIndex: tabIndexes.Chat,
 			},
 			// {
 			// 	id: "chatMessageMenuEnabled",
@@ -137,7 +142,7 @@ export default class SettingsModule extends KickModule {
 				title: "Quick Access Links",
 				description: "Manage your quick access links with custom names and URLs",
 				type: "array",
-				tabIndex: 2,
+				tabIndex: tabIndexes.Channel,
 				arrayItemFields: [
 					{ name: "title", placeholder: "Enter link name..." },
 					{ name: "url", placeholder: "Enter URL..." },
@@ -148,7 +153,7 @@ export default class SettingsModule extends KickModule {
 				title: "Watchtime List",
 				description: "Watchtime List",
 				type: "text",
-				tabIndex: 2,
+				tabIndex: tabIndexes.Channel,
 				content: () => {
 					return <WatchtimeListComponent platform="kick" workerService={workerService} />;
 				},
@@ -159,7 +164,7 @@ export default class SettingsModule extends KickModule {
 				title: "About This Extension",
 				description: "Information about the extension",
 				type: "text",
-				tabIndex: 3,
+				tabIndex: tabIndexes.About,
 				content: () => {
 					return <EnhancerAboutComponent icons={brandIcons} />;
 				},