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';
 
   $: disabled = !$hcEnabled;
 
@@ -11,15 +10,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(() => {
@@ -50,16 +41,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>
@@ -92,14 +73,7 @@
     cursor: pointer;
     transition: box-shadow 0.2s;
   }
-  .toggleButton .floating-icon {
-    position: absolute;
-    bottom: 5px;
-    right: 3px;
-    width: 15px;
-    height: 15px;
-  }
-
+
   .toggleButton.disabled {
     color: var(--yt-live-chat-secondary-text-color);
   }

src/components/SettingsButton.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { createPopup } from '../ts/chat-utils';
+  import { isLiveTL } from '../ts/chat-constants';
+  import outline from '../assets/outline.svg?raw';
+
+  const openSettings = () => {
+    createPopup(chrome.runtime.getURL(`${isLiveTL ? 'hyperchat/' : ''}options.html${document.documentElement.getAttribute('dark') === '' ? '?dark' : ''}`));
+  };
+</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;
+
+    &:hover {
+      background-color: var(--yt-spec-10-percent-layer);
+    }
+  }
+
+  .button-label {
+    color: var(--yt-spec-text-primary);
+    white-space: nowrap;
+    font-family: sans-serif;
+    font-size: 1.4rem;
+    line-height: 2rem;
+    font-weight: 100;
+    -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 {
+    flex: none;
+    fill: var(--yt-spec-text-primary);
+  }
+</style>

src/scripts/chat-injector.ts

@@ -1,4 +1,5 @@
 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';
@@ -75,7 +76,7 @@ const chatLoaded = async (): Promise<void> => {
     setTheme(isDark);
     wasDark = isDark;
   };
-  new MutationObserver(sendTheme).observe(html, {
+  new MutationObserver(sendTheme).observe(document.body, {
     attributes: true
   });
   sendTheme();
@@ -89,11 +90,27 @@ 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 => {
+    // Prevent duplicates
+    if (document.getElementById('hc-settings')) return;
+    const ytcItemMenu = document.querySelector('tp-yt-paper-listbox#items');
+    if (!ytcItemMenu) return;
+
+    new HcSettings({
+      target: ytcItemMenu
+    });
+  }
+
+  new MutationObserver(injectSettings).observe(document.body, {
+    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;
+}