From 043225d0cdda38d3efb746cb7412f59bc2f79547 Mon Sep 17 00:00:00 2001
From: XangelMusic <xangel.music@gmail.com>
Date: Fri, 23 Jan 2026 15:35:30 +0800
Subject: [PATCH 1/4] fix: Settings Button moved to YouTube Chat menu

---
 src/assets/outline.svg                | 18 ++++++++
 src/components/HyperchatButton.svelte | 21 +--------
 src/components/SettingsButton.svelte  | 62 +++++++++++++++++++++++++++
 src/scripts/chat-injector.ts          | 23 ++++++++--
 src/vite-env.d.ts                     |  6 +++
 5 files changed, 107 insertions(+), 23 deletions(-)
 create mode 100644 src/assets/outline.svg
 create mode 100644 src/components/SettingsButton.svelte
 create mode 100644 src/vite-env.d.ts

diff --git a/src/assets/outline.svg b/src/assets/outline.svg
new file mode 100644
index 00000000..2ccc0a80
--- /dev/null
+++ b/src/assets/outline.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.025,0,0,0.025,0,0)">
+        <g transform="matrix(1.018047,-0,-0.541466,1.161177,196.744661,36.27303)">
+            <path d="M761.555,145.402C786.564,146.436 814.357,158.497 831.678,172.26C848.686,185.774 863.552,206.341 865.479,227.979C871.112,291.242 879.538,486.691 865.479,551.84C857.903,586.947 816.856,615.262 781.122,618.869C670.443,630.041 309.711,623.345 201.404,618.869C176.395,617.835 148.602,605.774 131.281,592.011C114.273,578.497 99.407,557.93 97.48,536.292C91.847,473.029 83.421,277.58 97.48,212.431C105.057,177.324 146.104,149.009 181.837,145.402C292.516,134.23 653.248,140.926 761.555,145.402ZM403.558,531.894L439.421,477.331L663.012,477.331C677.01,477.331 683.067,467.382 676.539,455.109L583.479,280.14C576.951,267.867 560.311,257.918 546.313,257.918L283.186,257.918C269.187,257.918 263.131,267.867 269.658,280.14L403.558,531.894Z"/>
+        </g>
+        <g transform="matrix(1.348032,0,0,1.348032,-284.33466,-167.054838)">
+            <path d="M488,419.613C488,415.961 490.961,413 494.613,413L637.387,413C641.039,413 644,415.961 644,419.613L644,432.387C644,436.039 641.039,439 637.387,439L494.613,439C490.961,439 488,436.039 488,432.387L488,419.613Z"/>
+        </g>
+        <g transform="matrix(1.348032,0,0,1.348032,-284.33466,-167.054838)">
+            <path d="M488,461.867C488,458.075 491.075,455 494.867,455L637.133,455C640.925,455 644,458.075 644,461.867L644,475.133C644,478.925 640.925,482 637.133,482L494.867,482C491.075,482 488,478.925 488,475.133L488,461.867Z"/>
+        </g>
+        <g transform="matrix(1.348032,0,0,1.348032,-284.33466,-167.054838)">
+            <path d="M488,504.867C488,501.075 491.075,498 494.867,498L569.133,498C572.925,498 576,501.075 576,504.867L576,518.133C576,521.925 572.925,525 569.133,525L494.867,525C491.075,525 488,521.925 488,518.133L488,504.867Z"/>
+        </g>
+    </g>
+</svg>
diff --git a/src/components/HyperchatButton.svelte b/src/components/HyperchatButton.svelte
index 881e185d..c2e0e675 100644
--- a/src/components/HyperchatButton.svelte
+++ b/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>
diff --git a/src/components/SettingsButton.svelte b/src/components/SettingsButton.svelte
new file mode 100644
index 00000000..ac7647ea
--- /dev/null
+++ b/src/components/SettingsButton.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { createPopup } from "../ts/chat-utils";
+  import { isLiveTL } from "../ts/chat-constants";
+  import outline from "../assets/outline.svg?raw";
+
+  const isDark = document.documentElement.getAttribute('dark') === '';
+  const openSettings = () => {
+    createPopup(chrome.runtime.getURL(`${isLiveTL ? 'hyperchat/' : ''}options.html${isDark ? '?dark' : ''}`));
+  };
+</script>
+
+<div id="hc-settings" on:click={openSettings} class="button">
+  <div class="buttonIconContainer">
+    <div class="buttonIcon">
+      {@html outline}
+    </div>
+  </div>
+  <div class="buttonLabel">HyperChat Settings</div>
+</div>
+
+<style>
+  .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);
+    }
+  }
+
+  /* youtube studio dropdown popups use different color for hover */
+  ytls-menu-popup-renderer .button:hover {
+    background-color: var(--yt-spec-white-1-alpha-20);
+  }
+
+  .buttonLabel {
+    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);
+  }
+
+  .buttonIconContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16px;
+    width: 24px;
+    height: 24px;
+  }
+  
+  .buttonIcon {
+    flex: none;
+    fill: var(--yt-spec-text-primary);
+  }
+</style>
\ No newline at end of file
diff --git a/src/scripts/chat-injector.ts b/src/scripts/chat-injector.ts
index 3186a2c0..522275f8 100644
--- a/src/scripts/chat-injector.ts
+++ b/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;
 
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000..79ebb242
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module '*.svg?raw' {
+  const content: string;
+  export default content;
+}

From 72fc5a90a5ba52265647b313811dc4dfbf4213f8 Mon Sep 17 00:00:00 2001
From: XangelMusic <xangel.music@gmail.com>
Date: Sat, 24 Jan 2026 17:51:39 +0800
Subject: [PATCH 2/4] fix: ESLint fix

---
 src/components/SettingsButton.svelte | 122 +++++++++++++--------------
 1 file changed, 61 insertions(+), 61 deletions(-)

diff --git a/src/components/SettingsButton.svelte b/src/components/SettingsButton.svelte
index ac7647ea..df017824 100644
--- a/src/components/SettingsButton.svelte
+++ b/src/components/SettingsButton.svelte
@@ -1,62 +1,62 @@
-<script lang="ts">
-  import { createPopup } from "../ts/chat-utils";
-  import { isLiveTL } from "../ts/chat-constants";
-  import outline from "../assets/outline.svg?raw";
-
-  const isDark = document.documentElement.getAttribute('dark') === '';
-  const openSettings = () => {
-    createPopup(chrome.runtime.getURL(`${isLiveTL ? 'hyperchat/' : ''}options.html${isDark ? '?dark' : ''}`));
-  };
-</script>
-
-<div id="hc-settings" on:click={openSettings} class="button">
-  <div class="buttonIconContainer">
-    <div class="buttonIcon">
-      {@html outline}
-    </div>
-  </div>
-  <div class="buttonLabel">HyperChat Settings</div>
-</div>
-
-<style>
-  .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);
-    }
-  }
-
-  /* youtube studio dropdown popups use different color for hover */
-  ytls-menu-popup-renderer .button:hover {
-    background-color: var(--yt-spec-white-1-alpha-20);
-  }
-
-  .buttonLabel {
-    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);
-  }
-
-  .buttonIconContainer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 16px;
-    width: 24px;
-    height: 24px;
-  }
-  
-  .buttonIcon {
-    flex: none;
-    fill: var(--yt-spec-text-primary);
-  }
+<script lang="ts">
+  import { createPopup } from '../ts/chat-utils';
+  import { isLiveTL } from '../ts/chat-constants';
+  import outline from '../assets/outline.svg?raw';
+
+  const isDark = document.documentElement.getAttribute('dark') === '';
+  const openSettings = () => {
+    createPopup(chrome.runtime.getURL(`${isLiveTL ? 'hyperchat/' : ''}options.html${isDark ? '?dark' : ''}`));
+  };
+</script>
+
+<div id="hc-settings" on:click={openSettings} class="button">
+  <div class="buttonIconContainer">
+    <div class="buttonIcon">
+      {@html outline}
+    </div>
+  </div>
+  <div class="buttonLabel">HyperChat Settings</div>
+</div>
+
+<style>
+  .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);
+    }
+  }
+
+  /* youtube studio dropdown popups use different color for hover */
+  ytls-menu-popup-renderer .button:hover {
+    background-color: var(--yt-spec-white-1-alpha-20);
+  }
+
+  .buttonLabel {
+    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);
+  }
+
+  .buttonIconContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16px;
+    width: 24px;
+    height: 24px;
+  }
+  
+  .buttonIcon {
+    flex: none;
+    fill: var(--yt-spec-text-primary);
+  }
 </style>
\ No newline at end of file

From 766c92f1b03a90573cfbcfde48e22a31ff91a222 Mon Sep 17 00:00:00 2001
From: XangelMusic <xangel.music@gmail.com>
Date: Sun, 25 Jan 2026 03:28:01 +0800
Subject: [PATCH 3/4] fix: ESLint fix

---
 src/components/HyperchatButton.svelte |  9 +--------
 src/components/SettingsButton.svelte  | 18 +++++++-----------
 2 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/src/components/HyperchatButton.svelte b/src/components/HyperchatButton.svelte
index c2e0e675..6805697c 100644
--- a/src/components/HyperchatButton.svelte
+++ b/src/components/HyperchatButton.svelte
@@ -73,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);
   }
diff --git a/src/components/SettingsButton.svelte b/src/components/SettingsButton.svelte
index df017824..3869f9c1 100644
--- a/src/components/SettingsButton.svelte
+++ b/src/components/SettingsButton.svelte
@@ -10,15 +10,16 @@
 </script>
 
 <div id="hc-settings" on:click={openSettings} class="button">
-  <div class="buttonIconContainer">
-    <div class="buttonIcon">
+  <div class="button-icon-container">
+    <div class="button-icon">
       {@html outline}
     </div>
   </div>
-  <div class="buttonLabel">HyperChat Settings</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;
@@ -31,12 +32,7 @@
     }
   }
 
-  /* youtube studio dropdown popups use different color for hover */
-  ytls-menu-popup-renderer .button:hover {
-    background-color: var(--yt-spec-white-1-alpha-20);
-  }
-
-  .buttonLabel {
+  .button-label {
     color: var(--yt-spec-text-primary);
     white-space: nowrap;
     font-family: sans-serif;
@@ -46,7 +42,7 @@
     -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing);
   }
 
-  .buttonIconContainer {
+  .button-icon-container {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -55,7 +51,7 @@
     height: 24px;
   }
   
-  .buttonIcon {
+  .button-icon {
     flex: none;
     fill: var(--yt-spec-text-primary);
   }

From 6c6a21751942ca7ad11aff8db49407c497a51937 Mon Sep 17 00:00:00 2001
From: XangelMusic <xangel.music@gmail.com>
Date: Sun, 25 Jan 2026 03:48:39 +0800
Subject: [PATCH 4/4] refactor: removed isDark variable

---
 src/components/SettingsButton.svelte | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/SettingsButton.svelte b/src/components/SettingsButton.svelte
index 3869f9c1..2bbc808c 100644
--- a/src/components/SettingsButton.svelte
+++ b/src/components/SettingsButton.svelte
@@ -2,10 +2,9 @@
   import { createPopup } from '../ts/chat-utils';
   import { isLiveTL } from '../ts/chat-constants';
   import outline from '../assets/outline.svg?raw';
-
-  const isDark = document.documentElement.getAttribute('dark') === '';
+  
   const openSettings = () => {
-    createPopup(chrome.runtime.getURL(`${isLiveTL ? 'hyperchat/' : ''}options.html${isDark ? '?dark' : ''}`));
+    createPopup(chrome.runtime.getURL(`${isLiveTL ? 'hyperchat/' : ''}options.html${document.documentElement.getAttribute('dark') === '' ? '?dark' : ''}`));
   };
 </script>