fix: Settings button moved to YouTube Chat menu

src/components/HyperchatButton.svelte

@@ -1,8 +1,7 @@
 <script lang='ts'>
   import { isLiveTL } from '../ts/chat-constants';
   import { hcEnabled, lastOpenedVersion } from '../ts/storage';
-  import { createPopup } from '../ts/chat-utils';
-  import { mdiChevronRight, mdiClose, mdiCogOutline } from '@mdi/js';
+  import { mdiChevronRight, mdiClose } from '@mdi/js';
   import { version } from '../manifest.json';
 
   $: disabled = !$hcEnabled;
@@ -12,15 +11,7 @@
     location.reload();
   };
 
-  const isDark = () => document.documentElement.getAttribute('dark') === '';
-
-  const openSettings = () => {
-    createPopup(chrome.runtime.getURL(`${isLiveTL ? 'hyperchat/' : ''}options.html${isDark() ? '?dark' : ''}`));
-  };
-
   const logo = chrome.runtime.getURL((isLiveTL ? 'hyperchat' : 'assets') + '/logo-48.png');
-  const simplified = chrome.runtime.getURL((isLiveTL ? 'hyperchat' : 'assets') + '/simplified.png');
-
   let updated = false;
 
   lastOpenedVersion.ready().then(() => {
@@ -51,16 +42,6 @@
       <span>HC</span>
     </div>
   </div>
-  {#if $hcEnabled}
-    <div class="tooltip-bottom" data-tooltip="HyperChat Settings">
-      <div class="toggleButton" class:disabled on:click={openSettings} >
-        <img src={simplified} class="floating-icon" alt="hc-settings-float" />
-        <svg viewBox="0 0 24 24" style="height: 20px">
-          <path d={mdiCogOutline} style="fill: var(--yt-live-chat-header-button-color)" />
-        </svg>
-      </div>
-    </div>
-  {/if}
 </div>
 
 <style>

src/components/SettingsButton.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { createPopup } from '../ts/chat-utils';
+  import { isLiveTL } from '../ts/chat-constants';
+  import outline from '../assets/outline.svg?raw';
+  import { onDestroy, onMount } from "svelte";
+
+  const openSettings = () => {
+    createPopup(chrome.runtime.getURL(`${isLiveTL ? 'hyperchat/' : ''}options.html${document.documentElement.getAttribute('dark') === '' ? '?dark' : ''}`));
+  };
+
+  onMount(() => {
+    console.debug('[HyperChat] Settings button created');
+  });
+
+  onDestroy(() => {
+    console.debug('[HyperChat] Settings button destroyed');
+  });
+</script>
+
+<div id="hc-settings" on:click={openSettings} class="button">
+  <div class="button-icon-container">
+    <div class="button-icon">
+      {@html outline}
+    </div>
+  </div>
+  <div class="button-label">HyperChat Settings</div>
+</div>
+
+<style>
+  /* CSS Style as copied from BetterTTV albeit slightly modified: https://github.com/night/betterttv/blob/38daf2a12133286c6910db5bb39ccdfaf7a4ffd4/src/modules/settings/youtube/Settings.module.css */
+  .button {
+    display: flex;
+    align-items: center;
+    padding: 0px 36px 0px 16px;
+    cursor: pointer;
+    min-height: 36px;
+  }
+
+  .button:hover {
+    background-color: var(--yt-spec-additive-background);
+    border-radius: 8px;
+  }
+
+  .button-label {
+    color: var(--yt-spec-text-primary);
+    white-space: nowrap;
+    font-family: "Roboto", "Arial", sans-serif;
+    font-size: 1.4rem;
+    line-height: 2rem;
+    font-weight: 400;
+    -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing);
+  }
+
+  .button-icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16px;
+    width: 24px;
+    height: 24px;
+  }
+
+  .button-icon {
+    display: flex;
+    justify-content: center;
+    fill: var(--yt-spec-text-primary);
+  }
+</style>

src/scripts/chat-injector.ts

@@ -1,9 +1,11 @@
 import HcButton from '../components/HyperchatButton.svelte';
+import HcSettings from '../components/SettingsButton.svelte';
 import { getFrameInfoAsync, isValidFrameInfo, frameIsReplay, checkInjected } from '../ts/chat-utils';
 import { isLiveTL } from '../ts/chat-constants';
 import { hcEnabled, autoLiveChat } from '../ts/storage';
 
 // const isFirefox = navigator.userAgent.includes('Firefox');
+let hcSettings: HcSettings | null = null;
 
 const hcWarning = 'An existing HyperChat button has been detected. This ' +
   'usually means both LiveTL and standalone HyperChat are enabled. ' +
@@ -23,11 +25,44 @@ const chatLoaded = async (): Promise<void> => {
     console.error('Failed to find #primary-content');
     return;
   }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const hcButton = new HcButton({
+  new HcButton({
     target: ytcPrimaryContent
   });
 
+  // Inject HC settings
+  const injectSettings = (): void => {
+    const destroyButton = (): void => {
+      if (hcSettings !== null) {
+        try {
+          hcSettings.$destroy();
+        } catch (_) {}
+      }
+    }
+
+    const ytcItemMenu = document.querySelector('tp-yt-paper-listbox#items');
+    if (ytcItemMenu) {
+      // Prevent duplicates
+      if (document.getElementById('hc-settings')) return;
+
+      destroyButton();
+      hcSettings = new HcSettings({
+        target: ytcItemMenu
+      });
+
+      return;
+    }
+
+    destroyButton();
+  };
+
+  const chatApp = document.querySelector('yt-live-chat-app');
+  if (chatApp) {
+    new MutationObserver(injectSettings).observe(chatApp, {
+      childList: true,
+      subtree: true
+    });
+  }
+
   // Everything past this point will only run if HC is enabled
   if (!hyperChatEnabled) return;
 

src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module '*.svg?raw' {
+  const content: string;
+  export default content;
+}