From 1d7da171bf62b6e8622354c5e4858d8be9f7deec Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Fri, 12 Jan 2024 00:10:12 +0100
Subject: [PATCH 01/30] Create .gitignore

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..21dfca3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+
+dev-token.txt

From dee01cc48663a496d66db6427eeda3ccc06f44e4 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Fri, 12 Jan 2024 00:11:58 +0100
Subject: [PATCH 02/30] =?UTF-8?q?=F0=9F=94=A7Style=20cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 popup.html           | 4 ++--
 src/css/main.css     | 9 +++++++--
 src/css/settings.css | 1 +
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/popup.html b/popup.html
index 9272d60..e3b071f 100644
--- a/popup.html
+++ b/popup.html
@@ -18,7 +18,7 @@
             <input type="text" id="searchStreams" placeholder="Search..." maxlength="17" autocomplete="off" spellcheck="false" autofocus />
             <button id="refreshButton" class="navbar-link refresh-button" refresh-label="Refresh Streams">
                 <i class="fa-solid fa-rotate-left"></i></button>
-            <button id="filterButton" class="navbar-link" filter-label="Sort Streams" style="padding: 6px;">
+            <button id="filterButton" class="navbar-link sort-button" filter-label="Sort Streams">
                 <i class="fa-solid fa-arrow-down-wide-short"></i></button>
             <!-- Filter Dropdown -->
             <div id="filterDropdown" class="dropdown">
@@ -100,7 +100,7 @@ <h2 class="settings-header-text">Settings</h2>
                         </label>
                     </div>
                 </div>
-                <div class="option-container" style="padding-right: 16px;">
+                <div class="option-container">
                     <div class="text-container">
                         <span>Custom badge color</span>
                     </div>
diff --git a/src/css/main.css b/src/css/main.css
index cc788f0..9c8a22e 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -42,7 +42,7 @@ body {
 }
 
 .search-container input[type="text"] {
-    width: 150px;
+    width: 145px;
     background-color: #242429;
     color: #fff;
     border: 2px solid #242429;
@@ -116,7 +116,12 @@ body {
 
 
 
-/*  FILTER DROPDOWN  */
+/*  SORT BUTTON  */
+.sort-button {
+    padding: 6px;
+}
+
+/*  FILTER/SORT DROPDOWN  */
 .dropdown {
     display: none;
     align-items: center;
diff --git a/src/css/settings.css b/src/css/settings.css
index 276cb5b..bff24f2 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -105,6 +105,7 @@
     display: inline-flex;
     align-items: center;
     height: 100%;
+    margin-right: 1.5px
 }
 
 .switch {

From 3113999c0d491a98d862eedc1f61eb1cb971f1c4 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Fri, 12 Jan 2024 00:37:51 +0100
Subject: [PATCH 03/30] =?UTF-8?q?=F0=9F=94=A7Update=20no-search-results=20?=
 =?UTF-8?q?style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/main.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/main.css b/src/css/main.css
index 9c8a22e..cb70539 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -298,5 +298,5 @@ body {
     text-align: center;
     font-weight: bold;
     font-size: 1.1rem;
-    padding: 42px 0 0 0;
+    padding: 20px 0 0 0;
 }

From de9e6d9aecf0f40d52da8f854cd2c8d1d4f45825 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Sat, 13 Jan 2024 17:45:16 +0100
Subject: [PATCH 04/30] =?UTF-8?q?=F0=9F=94=A7Update=20buttons,=20and=20som?=
 =?UTF-8?q?e=20other=20small=20changes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 popup.html           | 20 +++++++++++++-------
 src/css/main.css     | 15 +++++----------
 src/css/settings.css |  3 ++-
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/popup.html b/popup.html
index e3b071f..9a889d6 100644
--- a/popup.html
+++ b/popup.html
@@ -18,7 +18,7 @@
             <input type="text" id="searchStreams" placeholder="Search..." maxlength="17" autocomplete="off" spellcheck="false" autofocus />
             <button id="refreshButton" class="navbar-link refresh-button" refresh-label="Refresh Streams">
                 <i class="fa-solid fa-rotate-left"></i></button>
-            <button id="filterButton" class="navbar-link sort-button" filter-label="Sort Streams">
+            <button id="filterButton" class="navbar-link" filter-label="Sort Streams">
                 <i class="fa-solid fa-arrow-down-wide-short"></i></button>
             <!-- Filter Dropdown -->
             <div id="filterDropdown" class="dropdown">
@@ -26,27 +26,33 @@
                     <div class="dropdown-body">
                         <div class="filter-option">
                             <button class="filter-button" id="broadcasterButton">
-                                <div class="filter-icon"><i class="fa-solid fa-user"></i></div>Broadcaster</button>
+                                <div class="filter-icon"><i class="fa-solid fa-user"></i></div>Broadcaster
+                            </button>
                         </div>
                         <div class="filter-option">
                             <button class="filter-button" id="categoryButton">
-                                <div class="filter-icon"><i class="fa-solid fa-gamepad"></i></div>Category</button>
+                                <div class="filter-icon"><i class="fa-solid fa-gamepad"></i></div>Category
+                            </button>
                         </div>
                         <div class="filter-option">
                             <button class="filter-button active" id="viewersHighToLowButton">
-                                <div class="filter-icon"><i class="fa-solid fa-arrow-down-wide-short"></i></div>Viewers (High to Low)</button>
+                                <div class="filter-icon"><i class="fa-solid fa-arrow-down-wide-short"></i></div>Viewers (High to Low)
+                            </button>
                         </div>
                         <div class="filter-option">
                             <button class="filter-button" id="viewersLowToHighButton">
-                                <div class="filter-icon"><i class="fa-solid fa-arrow-down-short-wide"></i></div>Viewers (Low to High)</button>
+                                <div class="filter-icon"><i class="fa-solid fa-arrow-down-short-wide"></i></div>Viewers (Low to High)
+                            </button>
                         </div>
                         <div class="filter-option">
                             <button class="filter-button" id="startedButton">
-                                <div class="filter-icon"><i class="fa-regular fa-clock"></i></div>Recently started</button>
+                                <div class="filter-icon"><i class="fa-regular fa-clock"></i></div>Recently started
+                            </button>
                         </div>
                         <div class="filter-option">
                             <button class="filter-button" id="runningButton">
-                                <div class="filter-icon"><i class="fa-solid fa-clock"></i></div>Longest Running</button>
+                                <div class="filter-icon"><i class="fa-solid fa-clock"></i></div>Longest Running
+                            </button>
                         </div>
                     </div>
                 </div>
diff --git a/src/css/main.css b/src/css/main.css
index cb70539..a4a0afe 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -85,18 +85,18 @@ body {
 
 .navbar-link {
     color: #fff;
-    font-weight: bold;
     background-color: #38383f;
-    padding: 6.5px 7px;
     border: 0;
     border-radius: 5px;
     text-decoration: none;
     margin: 10px 10px 10px 0;
-    display: inline;
-    align-content: center;
     font-size: 1rem;
     cursor: pointer;
     user-select: none;
+    width: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .navbar-link:hover {
@@ -116,11 +116,6 @@ body {
 
 
 
-/*  SORT BUTTON  */
-.sort-button {
-    padding: 6px;
-}
-
 /*  FILTER/SORT DROPDOWN  */
 .dropdown {
     display: none;
@@ -244,7 +239,7 @@ body {
 .stream-uptime {
     position: absolute;
     right: 10.1%;
-    bottom: 15.5%;
+    bottom: 15.3%;
     background: rgba(0, 0, 0, 0.6);
     color: rgba(255, 255, 255, 0.8);
     font-size: 0.78rem;
diff --git a/src/css/settings.css b/src/css/settings.css
index bff24f2..1d359eb 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -11,7 +11,7 @@
     overflow: auto;
     background-color: rgba(0, 0, 0, 0.75);
     backdrop-filter: blur(6px);
-    animation: fadeIn 0.15s ease-in-out;
+    animation: fadeIn 0.1s ease-in-out;
     align-items: center;
 }
 
@@ -247,6 +247,7 @@ input:checked+.slider:before {
     cursor: pointer;
     font-size: 14px;
     font-weight: bold;
+    user-select: none;
 }
 
 .logout-button:hover {

From 1005a50c6819e711eef2380ff637359f3fbe5e4b Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Sat, 13 Jan 2024 19:27:52 +0100
Subject: [PATCH 05/30] =?UTF-8?q?=F0=9F=94=A7Add=20right=20click=20context?=
 =?UTF-8?q?=20menu=20for=20streams=20(#13)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 popup.html       | 11 +++++++
 src/css/main.css | 36 +++++++++++++++++++++
 src/js/main.js   | 84 +++++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 130 insertions(+), 1 deletion(-)

diff --git a/popup.html b/popup.html
index 9a889d6..d76217b 100644
--- a/popup.html
+++ b/popup.html
@@ -127,6 +127,17 @@ <h2 class="settings-header-text">Settings</h2>
             </div>
         </div>
     </div>
+    <div id="context-menu">
+        <div class="context-item context-item-open-channel">Open Channel</div>
+        <div class="context-item context-item-open-player">Open Player</div>
+        <div class="context-item context-item-open-chat">Open Chat</div>
+        <div class="cm-divider"></div>
+        <div class="context-item context-item-about">About</div>
+        <div class="context-item context-item-videos">Videos</div>
+        <div class="context-item context-item-clips">Clips</div>
+        <div class="cm-divider"></div>
+        <div class="context-item context-item-go-to-category">Go to category</div>
+    </div>
     <script src="src/js/main.js"></script>
     <script src="src/js/settings.js"></script>
 </body>
diff --git a/src/css/main.css b/src/css/main.css
index a4a0afe..bab2202 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -282,6 +282,42 @@ body {
 
 
 
+/*  CONTEXT MENU  */
+
+#context-menu {
+    position: fixed;
+    z-index: 1000;
+    background-color: #ffffff;
+    background-color: #0e0e10;
+    border: 1px solid #242429;
+    border-radius: 5px;
+    padding: 5px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+    font-size: 12px;
+    visibility: hidden;
+    user-select: none;
+}
+
+.context-item {
+    padding: 4px 12px;
+    border-radius: 2px;
+    cursor: pointer;
+}
+
+.context-item:hover {
+    background-color: #38383f;
+}
+
+.context-item:active {
+    background-color: #9146ff;
+}
+
+.cm-divider {
+    height: 1px;
+    background-color: #242429;
+    margin: 5px 0;
+}
+
 /*  OTHER  */
 
 .accent-color {
diff --git a/src/js/main.js b/src/js/main.js
index 83e6c74..463cfcb 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -291,4 +291,86 @@ chrome.runtime.onMessage.addListener(async (request) => {
         await loadTwitchContent();
         setupAutoRefresh();
     }
-});
\ No newline at end of file
+});
+
+// Right click context menu
+let contextMenu = document.getElementById("context-menu");
+let currentChannelName = null;
+let currentCategoryName;
+
+document.addEventListener('contextmenu', (event) => {
+    const streamContainer = event.target.closest('.stream-container');
+    if (streamContainer) {
+        event.preventDefault();
+        currentChannelName = streamContainer.querySelector('.stream-channel-name').innerHTML.trim();
+        currentCategoryName = streamContainer.querySelector('.stream-game-and-viewers').innerText.split(' - ')[0].trim();
+        const mouseX = event.clientX;
+        const mouseY = event.clientY;
+        showContextMenu(mouseX, mouseY);
+    }
+});
+
+const showContextMenu = (x, y) => {
+    const menuWidth = contextMenu.getBoundingClientRect().width;
+    const menuHeight = contextMenu.getBoundingClientRect().height;
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+
+    let menuX = x + 5;
+    let menuY = y;
+
+    if (menuX + menuWidth > windowWidth) {
+        menuX = windowWidth - menuWidth;
+    }
+    if (menuY + menuHeight > windowHeight) {
+        menuY = windowHeight - menuHeight;
+    }
+
+    contextMenu.style.left = `${menuX}px`;
+    contextMenu.style.top = `${menuY}px`;
+    contextMenu.style.visibility = 'visible';
+
+    const openChannelItem = contextMenu.querySelector('.context-item-open-channel');
+    const openPlayerItem = contextMenu.querySelector('.context-item-open-player');
+    const chatItem = contextMenu.querySelector('.context-item-open-chat');
+    const aboutItem = contextMenu.querySelector('.context-item-about');
+    const videosItem = contextMenu.querySelector('.context-item-videos');
+    const clipsItem = contextMenu.querySelector('.context-item-clips');
+    const goToCategoryItem = contextMenu.querySelector('.context-item-go-to-category');
+
+    openChannelItem.addEventListener('click', handleOpenChannel);
+    openPlayerItem.addEventListener('click', handleOpenPlayer);
+    chatItem.addEventListener('click', handleOpenChat);
+    aboutItem.addEventListener('click', handleOpenAbout);
+    videosItem.addEventListener('click', handleOpenVideos);
+    clipsItem.addEventListener('click', handleOpenClips);
+    goToCategoryItem.addEventListener('click', handleGoToCategory);
+};
+
+const openLink = (url, openInNewWindow) => {
+    if (openInNewWindowToggle.checked) {
+        chrome.windows.create({ url, type: 'popup' });
+    } else {
+        chrome.tabs.create({ url });
+    }
+    contextMenu.style.visibility = 'hidden';
+};
+
+// Click outside the menu to close it
+document.addEventListener('mousedown', (event) => {
+    if (!contextMenu.contains(event.target)) {
+        contextMenu.style.visibility = 'hidden';
+    }
+});
+
+// Defined separate functions to handle each context menu item click
+const handleOpenChannel = () => openLink(`https://www.twitch.tv/${currentChannelName}`);
+const handleOpenPlayer = () => openLink(`https://player.twitch.tv/?channel=${currentChannelName}&parent=twitch-live`);
+const handleOpenChat = () => openLink(`https://www.twitch.tv/popout/${currentChannelName}/chat`);
+const handleOpenAbout = () => openLink(`https://www.twitch.tv/${currentChannelName}/about`);
+const handleOpenVideos = () => openLink(`https://www.twitch.tv/${currentChannelName}/videos`);
+const handleOpenClips = () => openLink(`https://www.twitch.tv/${currentChannelName}/clips?filter=clips&range=7d`);
+const handleGoToCategory = () => {
+    const formattedCategory = encodeURIComponent(currentCategoryName.toLowerCase().replace(/\s/g, '-'));
+    openLink(`https://www.twitch.tv/directory/category/${formattedCategory}`);
+};

From b9c8f0052d4106e1a25f28e97e98f05889447b94 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Sat, 13 Jan 2024 19:30:55 +0100
Subject: [PATCH 06/30] =?UTF-8?q?=F0=9F=94=A7Prettified=20`main.js`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/main.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/js/main.js b/src/js/main.js
index 463cfcb..15fea71 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -12,7 +12,7 @@ const setNavbar = (isVisible) => {
         if (isVisible) navbar.style.display = "block";
         else navbar.style.display = "none";
     }
-}
+};
 
 const authScreen = () => {
     // Hide the navbar when creating the authentication screen
@@ -135,9 +135,9 @@ const loadTwitchContent = async () => {
         const query = filterInput.value.toLowerCase();
         filteredStreams = filteredStreams.filter(
             (stream) =>
-                stream.channelName.toLowerCase().includes(query) ||
-                stream.title.toLowerCase().includes(query) ||
-                stream.gameName.toLowerCase().includes(query)
+            stream.channelName.toLowerCase().includes(query) ||
+            stream.title.toLowerCase().includes(query) ||
+            stream.gameName.toLowerCase().includes(query)
         );
 
         if (filteredStreams.length > 0) {
@@ -263,7 +263,7 @@ filterInput.addEventListener("input", loadTwitchContent);
 refreshButton.addEventListener("click", handleRefreshButtonClick);
 
 // Initial load
-addEventListener("DOMContentLoaded", async () => { 
+addEventListener("DOMContentLoaded", async () => {
     await loadTwitchContent();
     if (authScreenPresent()) return;
     setupAutoRefresh();
@@ -373,4 +373,4 @@ const handleOpenClips = () => openLink(`https://www.twitch.tv/${currentChannelNa
 const handleGoToCategory = () => {
     const formattedCategory = encodeURIComponent(currentCategoryName.toLowerCase().replace(/\s/g, '-'));
     openLink(`https://www.twitch.tv/directory/category/${formattedCategory}`);
-};
+};
\ No newline at end of file

From e5c50f4d63264fe2a17728433233ccf939ecd9b6 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Sat, 13 Jan 2024 23:29:35 +0100
Subject: [PATCH 07/30] =?UTF-8?q?=F0=9F=94=A7Update=20tooltips.css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/tooltips.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/css/tooltips.css b/src/css/tooltips.css
index 78c418a..fbeca7d 100644
--- a/src/css/tooltips.css
+++ b/src/css/tooltips.css
@@ -27,6 +27,7 @@
     text-indent: 0;
     overflow: visible;
     font-size: .8em;
+    font-weight: bold;
     color: #000;
     background-color: #fff;
     border-radius: 5px;
@@ -89,6 +90,7 @@
     text-indent: 0;
     overflow: visible;
     font-size: .8em;
+    font-weight: bold;
     color: #000;
     background-color: #fff;
     border-radius: 5px;
@@ -151,6 +153,7 @@
     text-indent: 0;
     overflow: visible;
     font-size: .8em;
+    font-weight: bold;
     color: #000;
     background-color: #fff;
     border-radius: 5px;
@@ -213,6 +216,7 @@
     text-indent: 0;
     overflow: visible;
     font-size: .8em;
+    font-weight: bold;
     color: #000;
     background-color: #fff;
     border-radius: 5px;
@@ -275,6 +279,7 @@
     text-indent: 0;
     overflow: visible;
     font-size: .8em;
+    font-weight: bold;
     color: #000;
     background-color: #fff;
     border-radius: 5px;

From abb5b36691c29084b73c2fa795f1e510ae10f930 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Sun, 14 Jan 2024 10:00:16 +0100
Subject: [PATCH 08/30] =?UTF-8?q?=F0=9F=94=A7Open=20in=20new=20window=20po?=
 =?UTF-8?q?pup=20only=20for=20player?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/main.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/js/main.js b/src/js/main.js
index 15fea71..f8b6640 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -63,8 +63,13 @@ const openStream = (stream) => {
             url = baseStreamUrl;
         }
 
+        // Open in a new window
         if (openInNewWindow) {
-            chrome.windows.create({ url, type: 'popup' });
+            if (openInPlayer) {
+                chrome.windows.create({ url, type: 'popup' });
+            } else {
+                chrome.windows.create({ url });
+            }
         } else {
             // Open in a new tab
             chrome.tabs.create({ url });
@@ -348,6 +353,15 @@ const showContextMenu = (x, y) => {
 };
 
 const openLink = (url, openInNewWindow) => {
+    if (openInNewWindowToggle.checked) {
+        chrome.windows.create({ url });
+    } else {
+        chrome.tabs.create({ url });
+    }
+    contextMenu.style.visibility = 'hidden';
+};
+
+const openLinkInPopup = (url, openInNewWindow) => {
     if (openInNewWindowToggle.checked) {
         chrome.windows.create({ url, type: 'popup' });
     } else {
@@ -365,7 +379,7 @@ document.addEventListener('mousedown', (event) => {
 
 // Defined separate functions to handle each context menu item click
 const handleOpenChannel = () => openLink(`https://www.twitch.tv/${currentChannelName}`);
-const handleOpenPlayer = () => openLink(`https://player.twitch.tv/?channel=${currentChannelName}&parent=twitch-live`);
+const handleOpenPlayer = () => openLinkInPopup(`https://player.twitch.tv/?channel=${currentChannelName}&parent=twitch-live`);
 const handleOpenChat = () => openLink(`https://www.twitch.tv/popout/${currentChannelName}/chat`);
 const handleOpenAbout = () => openLink(`https://www.twitch.tv/${currentChannelName}/about`);
 const handleOpenVideos = () => openLink(`https://www.twitch.tv/${currentChannelName}/videos`);

From 01a3ec4a88c17b646b29576c4bf7674531c1d18a Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Sun, 14 Jan 2024 15:19:03 +0100
Subject: [PATCH 09/30] =?UTF-8?q?=F0=9F=94=A7Focus=20stream-container=20wh?=
 =?UTF-8?q?en=20context=20menu=20is=20shown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/main.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/js/main.js b/src/js/main.js
index f8b6640..02f6004 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -302,13 +302,19 @@ chrome.runtime.onMessage.addListener(async (request) => {
 let contextMenu = document.getElementById("context-menu");
 let currentChannelName = null;
 let currentCategoryName;
+let currentStreamContainer = null;
 
 document.addEventListener('contextmenu', (event) => {
     const streamContainer = event.target.closest('.stream-container');
     if (streamContainer) {
         event.preventDefault();
+        if (currentStreamContainer) {
+            currentStreamContainer.classList.remove('context-active');
+        }
         currentChannelName = streamContainer.querySelector('.stream-channel-name').innerHTML.trim();
         currentCategoryName = streamContainer.querySelector('.stream-game-and-viewers').innerText.split(' - ')[0].trim();
+        currentStreamContainer = streamContainer;
+        currentStreamContainer.classList.add('context-active');
         const mouseX = event.clientX;
         const mouseY = event.clientY;
         showContextMenu(mouseX, mouseY);
@@ -370,10 +376,20 @@ const openLinkInPopup = (url, openInNewWindow) => {
     contextMenu.style.visibility = 'hidden';
 };
 
+// Function to hide the context menu and remove the class from the stream container
+const hideContextMenu = () => {
+    contextMenu.style.visibility = 'hidden';
+    // Remove the class from the stream container
+    if (currentStreamContainer) {
+        currentStreamContainer.classList.remove('context-active');
+        currentStreamContainer = null;
+    }
+};
+
 // Click outside the menu to close it
 document.addEventListener('mousedown', (event) => {
     if (!contextMenu.contains(event.target)) {
-        contextMenu.style.visibility = 'hidden';
+        hideContextMenu();
     }
 });
 

From 69c5aa8fd71f2a239247b77e2f01a2a890f7d304 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Sun, 14 Jan 2024 15:20:24 +0100
Subject: [PATCH 10/30] =?UTF-8?q?=F0=9F=94=A7Prevent=20creation=20of=20sep?=
 =?UTF-8?q?arate=20elements=20for=20titles=20with=20HTML-like=20tags?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/main.css |  6 ++++++
 src/js/main.js   | 22 +++++++++++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/css/main.css b/src/css/main.css
index bab2202..f15ddfe 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -318,6 +318,12 @@ body {
     margin: 5px 0;
 }
 
+.context-active {
+    background-color: #242429;
+}
+
+
+
 /*  OTHER  */
 
 .accent-color {
diff --git a/src/js/main.js b/src/js/main.js
index 02f6004..fa28c05 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -184,7 +184,9 @@ const loadTwitchContent = async () => {
 
                 const title = document.createElement("span");
                 title.setAttribute("class", "stream-title");
-                title.innerHTML = stream.title;
+
+                title.innerHTML = escapeHTML(stream.title);
+
                 title.setAttribute("title", stream.title);
                 streamDetails.appendChild(title);
 
@@ -403,4 +405,22 @@ const handleOpenClips = () => openLink(`https://www.twitch.tv/${currentChannelNa
 const handleGoToCategory = () => {
     const formattedCategory = encodeURIComponent(currentCategoryName.toLowerCase().replace(/\s/g, '-'));
     openLink(`https://www.twitch.tv/directory/category/${formattedCategory}`);
+};
+
+// Function to escape HTML tags
+const escapeHTML = (unsafe) => {
+    return unsafe.replace(/[&<"']/g, (match) => {
+        switch (match) {
+            case "&":
+                return "&amp;";
+            case "<":
+                return "&lt;";
+            case '"':
+                return "&quot;";
+            case "'":
+                return "&#039;";
+            default:
+                return match;
+        }
+    });
 };
\ No newline at end of file

From 96bbddf6d3f2ff19f213390b35e2deef8bc42bbf Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Sun, 14 Jan 2024 15:34:09 +0100
Subject: [PATCH 11/30] =?UTF-8?q?=F0=9F=94=A7Display=20extension=20version?=
 =?UTF-8?q?=20in=20settings=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 popup.html           |  3 +++
 src/css/settings.css | 17 ++++++++++++++-
 src/js/settings.js   | 49 +++++++++++++++++++++++++++++++++++++-------
 3 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/popup.html b/popup.html
index d76217b..1e92be5 100644
--- a/popup.html
+++ b/popup.html
@@ -123,6 +123,9 @@ <h2 class="settings-header-text">Settings</h2>
                             <i class="fa-solid fa-heart"></i> Donate</a>
                         <button id="logoutBtn" class="logout-button"><i class="fa-solid fa-power-off"></i> Logout</button>
                     </div>
+                    <div class="version-container">
+                        <span id="extensionVersion">Loading extension version...</span>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/css/settings.css b/src/css/settings.css
index 1d359eb..037f214 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -256,4 +256,19 @@ input:checked+.slider:before {
 
 .logout-button:active {
     background-color: #e3301c;
-}
\ No newline at end of file
+}
+
+/*  OTHER  */
+
+.version-container {
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    bottom: -470%;
+    right: 45%;
+}
+
+#extensionVersion {
+    color: rgba(153, 153, 153, 0.5);
+    font-weight: bold;
+}
diff --git a/src/js/settings.js b/src/js/settings.js
index 565d2c4..e4ef91e 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -7,12 +7,47 @@ const setToggleSwitchStatus = (toggleId, status) => {
     }
 };
 
+// Function to fetch the extension version from manifest.json
+const getExtensionVersion = () => {
+    const manifestData = chrome.runtime.getManifest();
+    return manifestData.version;
+};
+
+// Function to check if the version has changed
+const checkAndUpdateVersion = async () => {
+    const storedVersion = await chrome.storage.local.get("extensionVersion");
+    const currentVersion = getExtensionVersion();
+
+    if (storedVersion.extensionVersion !== currentVersion) {
+        // Update the stored version
+        chrome.storage.local.set({ extensionVersion: currentVersion });
+    }
+};
+
 // Retrieve the stored settings on popup load
-chrome.storage.local.get(["openInPlayerToggle", "openInNewWindowToggle", "customBadgeColor"], (result) => {
-    setToggleSwitchStatus("openInPlayerToggle", result.openInPlayerToggle !== undefined ? result.openInPlayerToggle : false);
-    setToggleSwitchStatus("openInNewWindowToggle", result.openInNewWindowToggle !== undefined ? result.openInNewWindowToggle : false);
-    document.getElementById("colorInput").value = result.customBadgeColor || "";
-});
+chrome.storage.local.get(
+    ["openInPlayerToggle", "openInNewWindowToggle", "customBadgeColor", "extensionVersion"],
+    (result) => {
+        setToggleSwitchStatus(
+            "openInPlayerToggle",
+            result.openInPlayerToggle !== undefined ? result.openInPlayerToggle : false
+        );
+        setToggleSwitchStatus(
+            "openInNewWindowToggle",
+            result.openInNewWindowToggle !== undefined ? result.openInNewWindowToggle : false
+        );
+        document.getElementById("colorInput").value = result.customBadgeColor || "";
+        // Check and update extension version
+        checkAndUpdateVersion();
+
+        // Display the extension version in the settings modal
+        const versionElement = document.getElementById("extensionVersion");
+        if (versionElement) {
+            versionElement.textContent = `v${getExtensionVersion()}`;
+        }
+        // console.log(`%cSam's Twitch Live v${getExtensionVersion()}`, "color: #a855f7");
+    }
+);
 
 // Listen for changes in the toggle switches and store the settings
 document.getElementById("openInPlayerToggle").addEventListener("change", function () {
@@ -37,8 +72,8 @@ chrome.storage.onChanged.addListener((changes) => {
 const openInPlayerToggle = document.getElementById("openInPlayerToggle");
 const openInNewWindowToggle = document.getElementById("openInNewWindowToggle");
 const colorInput = document.getElementById("colorInput");
-/*console.log("Toggle Switch Status - Open in Player:", openInPlayerToggle.checked);
-console.log("Toggle Switch Status - Open in New Window:", openInNewWindowToggle.checked);*/
+// console.log("Toggle Switch Status - Open in Player:", openInPlayerToggle.checked);
+// console.log("Toggle Switch Status - Open in New Window:", openInNewWindowToggle.checked);
 
 // Custom color badge input
 colorInput.addEventListener("focus", function () {

From 323ec7ff33bafc47d83ab6f02d3fe8e1634154b2 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Sun, 14 Jan 2024 16:10:51 +0100
Subject: [PATCH 12/30] =?UTF-8?q?=F0=9F=94=A7Cleanup=20`Display=20extensio?=
 =?UTF-8?q?n=20version=20in=20settings=20modal`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/settings.js | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/js/settings.js b/src/js/settings.js
index e4ef91e..d8b22e2 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -13,17 +13,6 @@ const getExtensionVersion = () => {
     return manifestData.version;
 };
 
-// Function to check if the version has changed
-const checkAndUpdateVersion = async () => {
-    const storedVersion = await chrome.storage.local.get("extensionVersion");
-    const currentVersion = getExtensionVersion();
-
-    if (storedVersion.extensionVersion !== currentVersion) {
-        // Update the stored version
-        chrome.storage.local.set({ extensionVersion: currentVersion });
-    }
-};
-
 // Retrieve the stored settings on popup load
 chrome.storage.local.get(
     ["openInPlayerToggle", "openInNewWindowToggle", "customBadgeColor", "extensionVersion"],
@@ -37,8 +26,6 @@ chrome.storage.local.get(
             result.openInNewWindowToggle !== undefined ? result.openInNewWindowToggle : false
         );
         document.getElementById("colorInput").value = result.customBadgeColor || "";
-        // Check and update extension version
-        checkAndUpdateVersion();
 
         // Display the extension version in the settings modal
         const versionElement = document.getElementById("extensionVersion");

From 4e43cb5b990b125c4fa7e7639cfacf89598ee551 Mon Sep 17 00:00:00 2001
From: xezrunner <8061077+xezrunner@users.noreply.github.com>
Date: Mon, 15 Jan 2024 19:34:22 +0100
Subject: [PATCH 13/30] =?UTF-8?q?=F0=9F=94=A7Add/tweak=20animations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 popup.html           |  8 ++---
 src/css/main.css     | 66 ++++++++++++++++++++++++++++--------
 src/css/settings.css | 81 +++++++++++++++++++++++++++++++++-----------
 src/js/main.js       | 43 +++++++++++++++++------
 src/js/settings.js   | 40 +++++++++++++++++++---
 src/js/util.js       |  2 +-
 6 files changed, 185 insertions(+), 55 deletions(-)

diff --git a/popup.html b/popup.html
index 1e92be5..9679ccf 100644
--- a/popup.html
+++ b/popup.html
@@ -72,7 +72,7 @@
     </div>
     <!-- Settings Modal -->
     <div id="settingsModal" class="settings-modal">
-        <div class="settings-modal-content">
+        <div id="settingsModalContent" class="settings-modal-content">
             <div class="settings-modal-body">
                 <!-- Settings header -->
                 <div class="settings-header">
@@ -123,9 +123,9 @@ <h2 class="settings-header-text">Settings</h2>
                             <i class="fa-solid fa-heart"></i> Donate</a>
                         <button id="logoutBtn" class="logout-button"><i class="fa-solid fa-power-off"></i> Logout</button>
                     </div>
-                    <div class="version-container">
-                        <span id="extensionVersion">Loading extension version...</span>
-                    </div>
+                </div>
+                <div class="version-container">
+                    <span id="extensionVersion">Loading extension version...</span>
                 </div>
             </div>
         </div>
diff --git a/src/css/main.css b/src/css/main.css
index f15ddfe..e7b10e7 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -2,8 +2,6 @@
 @import "tooltips.css";
 @import "auth.css";
 
-
-
 :root {
     color-scheme: dark;
 }
@@ -21,8 +19,6 @@ body {
     color: #fff;
 }
 
-
-
 /*  NAVBAR  */
 
 .navbar {
@@ -79,8 +75,6 @@ body {
     float: right;
 }
 
-
-
 /*  NAVBAR LINKS/BUTTONS  */
 
 .navbar-link {
@@ -114,18 +108,17 @@ body {
     background-color: #242429;
 }
 
-
-
 /*  FILTER/SORT DROPDOWN  */
 .dropdown {
-    display: none;
     align-items: center;
+    visibility: hidden;
+
+    transform-origin: top center;
+    z-index: 1000;
 }
 
 .dropdown-content {
     position: absolute;
-    top: 100%;
-    right: 26%;
     background-color: #242429;
     padding: 0;
     width: 176px;
@@ -134,6 +127,8 @@ body {
     border-radius: 5px;
     display: flex;
     box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 0 10px 6px rgba(0, 0, 0, 0.3);
+
+    transform: translate(-115px, 50px);
 }
 
 .dropdown-body {
@@ -201,8 +196,6 @@ body {
     display: flex;
 }
 
-
-
 /*  STREAM "CARD" CLASSES */
 
 .stream-container {
@@ -211,6 +204,8 @@ body {
     border-top: 1px solid #242429;
     border-bottom: 1px solid #000;
     display: flex;
+    animation: fade-anim-in 0.6s cubic-bezier(0.35, 0.55, 0, 1);
+    transition: transform 333ms cubic-bezier(0.35, 0.55, 0, 1);
 }
 
 .stream-container:hover {
@@ -218,6 +213,10 @@ body {
     text-shadow: 0 0 4px #000;
 }
 
+.stream-container:active {
+    transform: scale(0.99);
+}
+
 .stream-thumbnail {
     position: relative;
     width: 80px;
@@ -280,7 +279,42 @@ body {
     color: #fff;
 }
 
+/* ANIMATIONS */
+
+@keyframes popup-anim-in {
+    from {
+        transform: scale(0.9);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1.0);
+        opacity: 1;
+    }
+}
+
+@keyframes popup-anim-out {
+    to {
+        transform: scale(0.95);
+        opacity: 0;
+        visibility: hidden;
+    }
+}
+
+@keyframes fade-anim-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        overflow: 1;
+    }
+}
 
+.popup-anim-in {
+    animation: popup-anim-in 333ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
+}
+.popup-anim-out {
+    animation: popup-anim-out 222ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
+}
 
 /*  CONTEXT MENU  */
 
@@ -296,10 +330,14 @@ body {
     font-size: 12px;
     visibility: hidden;
     user-select: none;
+    animation-fill-mode: forwards;
+    transform-origin: top left;
 }
 
+/* ANIMATIONS */
+
 .context-item {
-    padding: 4px 12px;
+    padding: 6px 12px;
     border-radius: 2px;
     cursor: pointer;
 }
diff --git a/src/css/settings.css b/src/css/settings.css
index 037f214..10954ef 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -1,41 +1,42 @@
 /*  SETTINGS (MODAL)  */
 
 .settings-modal {
-    display: none;
+    display: grid;
+    visibility: hidden;
+    background-color: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(6px);
+
     position: fixed;
     z-index: 1000;
-    left: 0;
-    top: 0;
     width: 430px;
     height: 600px;
     overflow: auto;
-    background-color: rgba(0, 0, 0, 0.75);
-    backdrop-filter: blur(6px);
-    animation: fadeIn 0.1s ease-in-out;
     align-items: center;
 }
 
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
 .settings-modal-content {
     position: relative;
     background-color: #18181b;
-    margin: 15px;
-    padding: 0;
-    width: 100%;
+    margin: 20px;
     height: 350px;
     border: 1px solid #242429;
     border-radius: 5px;
     display: flex;
 }
 
+.settings-background-anim-in {
+    animation: settings-background-anim-in 0.25s linear forwards;
+}
+.settings-background-anim-out {
+    animation: settings-background-anim-out 0.25s linear forwards;
+}
+.popup-anim-in {
+    animation: popup-anim-in 555ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
+}
+.popup-anim-out {
+    animation: popup-anim-out 222ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
+}
+
 .settings-modal-body {
     color: #fff;
     width: 100%;
@@ -258,14 +259,54 @@ input:checked+.slider:before {
     background-color: #e3301c;
 }
 
+/* ANIMATIONS */
+
+@keyframes settings-background-anim-in {
+    from {
+        background-color: transparent;
+        backdrop-filter: blur(0px);
+    }
+    to {
+        background-color: rgba(0, 0, 0, 0.75);
+        backdrop-filter: blur(6px);
+    }
+}
+
+@keyframes settings-background-anim-out {
+    to {
+        background-color: rgba(0, 0, 0, 0);
+        backdrop-filter: blur(0px);
+        visibility: hidden;
+    }
+}
+
+@keyframes popup-anim-in {
+    from {
+        transform: scale(0.9);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1.0);
+        opacity: 1;
+    }
+}
+
+@keyframes popup-anim-out {
+    to {
+        transform: scale(0.95);
+        opacity: 0;
+        visibility: hidden;
+    }
+}
+
 /*  OTHER  */
 
 .version-container {
     display: flex;
     justify-content: center;
     position: absolute;
-    bottom: -470%;
-    right: 45%;
+    bottom: -25px;
+    width: 100%;
 }
 
 #extensionVersion {
diff --git a/src/js/main.js b/src/js/main.js
index fa28c05..0d8f619 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -319,10 +319,23 @@ document.addEventListener('contextmenu', (event) => {
         currentStreamContainer.classList.add('context-active');
         const mouseX = event.clientX;
         const mouseY = event.clientY;
+        hideContextMenu();
         showContextMenu(mouseX, mouseY);
     }
 });
 
+function animatePopup(element, targetState) {
+    if (targetState === true) {
+        element.style.visibility = 'visible';
+        element.classList.remove('popup-anim-out');
+        element.classList.add('popup-anim-in');
+    } 
+    else {
+        element.classList.remove('popup-anim-in');
+        element.classList.add('popup-anim-out');
+    }
+}
+
 const showContextMenu = (x, y) => {
     const menuWidth = contextMenu.getBoundingClientRect().width;
     const menuHeight = contextMenu.getBoundingClientRect().height;
@@ -341,7 +354,8 @@ const showContextMenu = (x, y) => {
 
     contextMenu.style.left = `${menuX}px`;
     contextMenu.style.top = `${menuY}px`;
-    contextMenu.style.visibility = 'visible';
+
+    animatePopup(contextMenu, true);
 
     const openChannelItem = contextMenu.querySelector('.context-item-open-channel');
     const openPlayerItem = contextMenu.querySelector('.context-item-open-player');
@@ -360,6 +374,17 @@ const showContextMenu = (x, y) => {
     goToCategoryItem.addEventListener('click', handleGoToCategory);
 };
 
+// Function to hide the context menu and remove the class from the stream container
+const hideContextMenu = () => {
+    animatePopup(contextMenu, false);
+
+    // Remove the class from the stream container
+    if (currentStreamContainer) {
+        currentStreamContainer.classList.remove('context-active');
+        currentStreamContainer = null;
+    }
+};
+
 const openLink = (url, openInNewWindow) => {
     if (openInNewWindowToggle.checked) {
         chrome.windows.create({ url });
@@ -378,18 +403,14 @@ const openLinkInPopup = (url, openInNewWindow) => {
     contextMenu.style.visibility = 'hidden';
 };
 
-// Function to hide the context menu and remove the class from the stream container
-const hideContextMenu = () => {
-    contextMenu.style.visibility = 'hidden';
-    // Remove the class from the stream container
-    if (currentStreamContainer) {
-        currentStreamContainer.classList.remove('context-active');
-        currentStreamContainer = null;
-    }
-};
-
 // Click outside the menu to close it
 document.addEventListener('mousedown', (event) => {
+    // Only allow closing with primary click
+    // This prevents the hide function being called when right-clicking streams as well
+    if (event.button !== 0) {
+        return;
+    }
+
     if (!contextMenu.contains(event.target)) {
         hideContextMenu();
     }
diff --git a/src/js/settings.js b/src/js/settings.js
index d8b22e2..192b81b 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -116,26 +116,56 @@ if (logoutButton) {
 }
 
 // Filter dropdown
+
+function animatePopup(element, targetState) {
+    if (targetState === true) {
+        element.style.visibility = 'visible';
+        element.classList.remove('popup-anim-out');
+        element.classList.add('popup-anim-in');
+    } 
+    else {
+        element.classList.remove('popup-anim-in');
+        element.classList.add('popup-anim-out');
+    }
+}
+
 var dropdown = document.getElementById("filterDropdown");
 var filterBtn = document.getElementById("filterButton");
 filterBtn.onclick = function(event) {
-    dropdown.style.display = dropdown.style.display === "flex" ? "none" : "flex";
+    let dropdownVisibility = window.getComputedStyle(dropdown).visibility === "visible";
+    animatePopup(dropdown, !dropdownVisibility);
+
     event.stopPropagation();
 };
 
 window.onclick = function(event) {
-    if (!event.target.matches('.dropdown-content') && dropdown.style.display === "flex") {
-        dropdown.style.display = "none";
+    if (!event.target.matches('.dropdown-content') && dropdown.style.visibility === "visible") {
+        animatePopup(dropdown, false);
+    }
+}
+
+function animateSettingsBackground(element, targetState) {
+    if (targetState === true) {
+        element.style.visibility = 'visible';
+        element.classList.remove('settings-background-anim-out');
+        element.classList.add('settings-background-anim-in');
+    } 
+    else {
+        element.classList.remove('settings-background-anim-in');
+        element.classList.add('settings-background-anim-out');
     }
 }
 
 // Settings Modal
 var modal = document.getElementById("settingsModal");
+var modalContent = document.getElementById("settingsModalContent");
 var btn = document.getElementById("settingsBtn");
 var span = document.getElementsByClassName("settings-close-btn")[0];
 btn.onclick = function() {
-    modal.style.display = "flex";
+    animateSettingsBackground(modal, true);
+    animatePopup(modalContent, true);
 }
 span.onclick = function() {
-    modal.style.display = "none";
+    animateSettingsBackground(modal, false);
+    animatePopup(modalContent, false);
 }
diff --git a/src/js/util.js b/src/js/util.js
index 1442d44..da87a9b 100644
--- a/src/js/util.js
+++ b/src/js/util.js
@@ -29,4 +29,4 @@ const getTimePassed = (startTime) => {
   const formattedSeconds = `${format(seconds)}`;
 
   return `${formattedHours}${formattedMinutes}:${formattedSeconds}`;
-};
+};
\ No newline at end of file

From 476f3c99ba8029fac9f78fbe6f868bf2d3b912f8 Mon Sep 17 00:00:00 2001
From: xezrunner <8061077+xezrunner@users.noreply.github.com>
Date: Mon, 15 Jan 2024 22:19:15 +0100
Subject: [PATCH 14/30] =?UTF-8?q?=F0=9F=94=A7Load=20background=20refresh?=
 =?UTF-8?q?=20interval=20from=20storage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/background.js | 48 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/js/background.js b/src/js/background.js
index a66732c..76777d1 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -31,13 +31,57 @@ chrome.alarms.onAlarm.addListener((alarm) => {
 });
 chrome.alarms.create("validateTwitchTokenAlarm", { periodInMinutes: 60 });
 
-// Update streams update every 5 minutes
+let lastUpdate = new Date();
+
+// Update streams (badge) in background, periodically
 chrome.alarms.onAlarm.addListener((alarm) => {
     if (alarm.name === "updateStreamsAlarm") {
+        const updateTime = new Date();
+        const diff = Math.abs(updateTime - lastUpdate);
+        const diffSeconds = diff / 1000;
+
+        console.log(`Stream update alarm at ${updateTime.toTimeString().slice(0,8)} :: difference to previous: ${lastUpdate.toTimeString().slice(0,8)} (${diffSeconds} seconds)`);
+
+        lastUpdate = updateTime;
+
         updateStreamsPeriodically();
     }
 });
-chrome.alarms.create("updateStreamsAlarm", { periodInMinutes: 5 });
+
+const createUpdateStreamsAlarm = (updateRateMin) => {
+    chrome.alarms.get("updateStreamsAlarm", (alarm) => {
+        console.log(`[debug] creating background refresh alarm:`)
+        console.log("  - before clear: updateStreamsAlarm get: ", alarm);
+    });
+
+    chrome.alarms.clear("updateStreamsAlarm", (wasCleared) => {
+        console.log("    | updateStreamsAlarm wasCleared: ", wasCleared);
+    });
+
+    chrome.alarms.get("updateStreamsAlarm", (alarm) => {
+        console.log("  - after clear: updateStreamsAlarm get: ", alarm);
+    });
+
+    chrome.alarms.create("updateStreamsAlarm", { periodInMinutes: updateRateMin });
+
+    chrome.alarms.get("updateStreamsAlarm", (alarm) => {
+        console.log("[debug] new alarm: updateStreamsAlarm get: ", alarm);
+    });
+};
+
+chrome.storage.local.get({backgroundUpdateRateMin: 5}, (data) => {
+    value = data.backgroundUpdateRateMin;
+    console.log(`[startup] Background update rate: ${value} minutes`);
+    createUpdateStreamsAlarm(value);
+});
+
+chrome.storage.onChanged.addListener((changes) => {
+    if (changes.backgroundUpdateRateMin !== undefined) {
+        const newValue = changes.backgroundUpdateRateMin.newValue;
+        console.log(`[config] Background update rate changed: ${newValue} minutes`)
+        createUpdateStreamsAlarm(newValue);
+    }
+});
 
 // Set up message listeners and refresh data on browser startup and extension reload (dev/unpacked)
 const launch = async () => {

From 5df0b7b084b75c7c1aab740c5da1384b0b907c71 Mon Sep 17 00:00:00 2001
From: xezrunner <8061077+xezrunner@users.noreply.github.com>
Date: Mon, 15 Jan 2024 22:19:45 +0100
Subject: [PATCH 15/30] =?UTF-8?q?=F0=9F=94=A7Add=20settings=20UI=20for=20B?=
 =?UTF-8?q?ackground=20update=20refresh?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 popup.html           | 21 ++++++++++++++++++++-
 src/css/settings.css |  5 +++--
 src/js/settings.js   | 13 ++++++++++++-
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/popup.html b/popup.html
index 1e92be5..e793406 100644
--- a/popup.html
+++ b/popup.html
@@ -106,14 +106,33 @@ <h2 class="settings-header-text">Settings</h2>
                         </label>
                     </div>
                 </div>
+
+                <div class="option-container">
+                    <div class="text-container">
+                        <span>Background update interval</span>
+                    </div>
+                    <div class="settings-input">
+                        <select id="backgroundRefreshSelect">
+                            <option value="1">1 minute</option>
+                            <option value="2">2 minutes</option>
+                            <option value="5">5 minutes</option>
+                            <option value="10">10 minutes</option>
+                            <option value="15">15 minutes</option>
+                            <option value="30">30 minutes</option>
+                            <option value="60">60 minutes</option>
+                        </select>
+                    </div>
+                </div>
+
                 <div class="option-container">
                     <div class="text-container">
                         <span>Custom badge color</span>
                     </div>
-                    <div class="color-input">
+                    <div class="settings-input">
                         <input type="text" id="colorInput" placeholder="#RRGGBB" minlength="7" maxlength="7" autocomplete="off" spellcheck="false" />
                     </div>
                 </div>
+                
                 <!-- Settings footer link -->
                 <div class="settings-footer">
                     <div class="footer-container">
diff --git a/src/css/settings.css b/src/css/settings.css
index 037f214..fab248e 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -167,14 +167,15 @@ input:checked+.slider:before {
     background-color: #9146ff;
 }
 
-/*  COLOR INPUT  */
-.color-input {
+.settings-input {
     float: right;
     display: inline-flex;
     align-items: center;
     height: 100%;
 }
 
+/*  COLOR INPUT  */
+
 .color-input input[type="text"] {
     width: 64px;
     background-color: #0e0e10;
diff --git a/src/js/settings.js b/src/js/settings.js
index d8b22e2..990dacf 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -15,7 +15,7 @@ const getExtensionVersion = () => {
 
 // Retrieve the stored settings on popup load
 chrome.storage.local.get(
-    ["openInPlayerToggle", "openInNewWindowToggle", "customBadgeColor", "extensionVersion"],
+    ["openInPlayerToggle", "openInNewWindowToggle", "customBadgeColor", "extensionVersion", "backgroundUpdateRateMin"],
     (result) => {
         setToggleSwitchStatus(
             "openInPlayerToggle",
@@ -27,6 +27,8 @@ chrome.storage.local.get(
         );
         document.getElementById("colorInput").value = result.customBadgeColor || "";
 
+        backgroundRefreshSelect.value = result.backgroundUpdateRateMin || 5;
+
         // Display the extension version in the settings modal
         const versionElement = document.getElementById("extensionVersion");
         if (versionElement) {
@@ -53,6 +55,9 @@ chrome.storage.onChanged.addListener((changes) => {
     if (changes.openInNewWindowToggle !== undefined) {
         setToggleSwitchStatus("openInNewWindowToggle", changes.openInNewWindowToggle.newValue);
     }
+    if (changes.backgroundUpdateRateMin !== undefined) {
+        backgroundRefreshSelect.value = changes.backgroundUpdateRateMin.newValue;
+    }
 });
 
 // Log the toggle switch statuses
@@ -129,6 +134,12 @@ window.onclick = function(event) {
     }
 }
 
+// Background update refresh dropdown
+var backgroundRefreshSelect = document.getElementById("backgroundRefreshSelect");
+backgroundRefreshSelect.addEventListener("change", function(value) {
+    chrome.storage.local.set({ backgroundUpdateRateMin: parseInt(value.target.value) });
+});
+
 // Settings Modal
 var modal = document.getElementById("settingsModal");
 var btn = document.getElementById("settingsBtn");

From 8c435cb9dea29eec47893d81814bbd566b7195d6 Mon Sep 17 00:00:00 2001
From: xezrunner <8061077+xezrunner@users.noreply.github.com>
Date: Mon, 15 Jan 2024 22:41:35 +0100
Subject: [PATCH 16/30] =?UTF-8?q?=F0=9F=94=A7Settings=20dropdown/input=20f?=
 =?UTF-8?q?ield=20design=20tweaks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/settings.css | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/css/settings.css b/src/css/settings.css
index fab248e..d096013 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -176,12 +176,12 @@ input:checked+.slider:before {
 
 /*  COLOR INPUT  */
 
-.color-input input[type="text"] {
+.color-input, input[type="text"] {
     width: 64px;
     background-color: #0e0e10;
     color: #999999;
-    border: 2px solid #999999;
-    border-radius: 10px;
+    border: 1px solid #999999;
+    border-radius: 5px;
     padding: 8px;
     text-align: center;
     font-weight: bold;
@@ -198,6 +198,23 @@ input:checked+.slider:before {
     outline: 0;
 }
 
+/* SELECT DROPDOWNS */
+
+select {
+    width: 100%;
+    background-color: #38383f;
+    border: none;
+    padding: 6px 0px 6px 4px;
+    border-radius: 5px;
+    border-right: 8px solid transparent;
+}
+select:hover {
+    background-color: #54545f;
+}
+select:focus, input:focus {
+    outline: none;
+}
+
 /*  SETTINGS FOOTER  */
 .settings-footer {
     display: flex;
@@ -238,7 +255,7 @@ input:checked+.slider:before {
     background-color: #9146ff;
 }
 
-/*  LOGOUNT BUTTON  */
+/*  LOGOUT BUTTON  */
 .logout-button {
     width: 30%;
     background-color: #e74c3c;

From 2f8d47ca123bb9f71a45df792d413a82817f7d84 Mon Sep 17 00:00:00 2001
From: Sam <64147848+yungsamd17@users.noreply.github.com>
Date: Mon, 15 Jan 2024 23:08:57 +0100
Subject: [PATCH 17/30] =?UTF-8?q?=F0=9F=94=A7Update=20color-input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/settings.css | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/css/settings.css b/src/css/settings.css
index d096013..2848585 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -175,13 +175,19 @@ input:checked+.slider:before {
 }
 
 /*  COLOR INPUT  */
+.color-input {
+    float: right;
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+}
 
-.color-input, input[type="text"] {
+.color-input input[type="text"] {
     width: 64px;
     background-color: #0e0e10;
     color: #999999;
-    border: 1px solid #999999;
-    border-radius: 5px;
+    border: 2px solid #999999;
+    border-radius: 10px;
     padding: 8px;
     text-align: center;
     font-weight: bold;

From c71528940b996830cb36853bb45d201b9b625dee Mon Sep 17 00:00:00 2001
From: Sam <64147848+yungsamd17@users.noreply.github.com>
Date: Mon, 15 Jan 2024 23:10:16 +0100
Subject: [PATCH 18/30] =?UTF-8?q?=F0=9F=94=A7Update=20color-input=20(popup?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 popup.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/popup.html b/popup.html
index e793406..6c0b6b2 100644
--- a/popup.html
+++ b/popup.html
@@ -128,7 +128,7 @@ <h2 class="settings-header-text">Settings</h2>
                     <div class="text-container">
                         <span>Custom badge color</span>
                     </div>
-                    <div class="settings-input">
+                    <div class="color-input">
                         <input type="text" id="colorInput" placeholder="#RRGGBB" minlength="7" maxlength="7" autocomplete="off" spellcheck="false" />
                     </div>
                 </div>
@@ -164,4 +164,4 @@ <h2 class="settings-header-text">Settings</h2>
     <script src="src/js/settings.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>

From d7491656746686d1fbe3c7bd1d083911214e8162 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Mon, 15 Jan 2024 23:57:52 +0100
Subject: [PATCH 19/30] =?UTF-8?q?=F0=9F=94=A7Update=20select=20dropdown=20?=
 =?UTF-8?q?style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 popup.html           | 14 +++++++-------
 src/css/settings.css | 28 ++++++++++++++++------------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/popup.html b/popup.html
index 6c0b6b2..6319752 100644
--- a/popup.html
+++ b/popup.html
@@ -113,13 +113,13 @@ <h2 class="settings-header-text">Settings</h2>
                     </div>
                     <div class="settings-input">
                         <select id="backgroundRefreshSelect">
-                            <option value="1">1 minute</option>
-                            <option value="2">2 minutes</option>
-                            <option value="5">5 minutes</option>
-                            <option value="10">10 minutes</option>
-                            <option value="15">15 minutes</option>
-                            <option value="30">30 minutes</option>
-                            <option value="60">60 minutes</option>
+                            <option value="1">1 min</option>
+                            <option value="2">2 min</option>
+                            <option value="5">5 min</option>
+                            <option value="10">10 min</option>
+                            <option value="15">15 min</option>
+                            <option value="30">30 min</option>
+                            <option value="60">60 min</option>
                         </select>
                     </div>
                 </div>
diff --git a/src/css/settings.css b/src/css/settings.css
index 2848585..741c6f2 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -204,21 +204,25 @@ input:checked+.slider:before {
     outline: 0;
 }
 
-/* SELECT DROPDOWNS */
-
-select {
+/*  SELECT DROPDOWNS  */
+.settings-input select {
     width: 100%;
-    background-color: #38383f;
-    border: none;
-    padding: 6px 0px 6px 4px;
-    border-radius: 5px;
-    border-right: 8px solid transparent;
+    background-color: #0e0e10;
+    color: #999999;
+    border: 2px solid #999999;
+    border-radius: 10px;
+    padding: 8px 2px;
 }
-select:hover {
-    background-color: #54545f;
+
+.settings-input select:hover {
+    color: #fff;
+    border: 2px solid #fff;
 }
-select:focus, input:focus {
-    outline: none;
+
+.settings-input select:focus {
+    color: #fff;
+    border: 2px solid #9146ff;
+    outline: 0;
 }
 
 /*  SETTINGS FOOTER  */

From 98706a31bee6e2f3c9fc77a20a4b84e4e7170050 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Tue, 16 Jan 2024 14:35:47 +0100
Subject: [PATCH 20/30] =?UTF-8?q?=F0=9F=94=A7Update=20settings=20inputs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 popup.html           |  8 ++++----
 src/css/settings.css | 43 ++++++++++---------------------------------
 2 files changed, 14 insertions(+), 37 deletions(-)

diff --git a/popup.html b/popup.html
index 6319752..ec2d100 100644
--- a/popup.html
+++ b/popup.html
@@ -111,8 +111,8 @@ <h2 class="settings-header-text">Settings</h2>
                     <div class="text-container">
                         <span>Background update interval</span>
                     </div>
-                    <div class="settings-input">
-                        <select id="backgroundRefreshSelect">
+                    <div class="settings-input-container">
+                        <select id="backgroundRefreshSelect" class="settings-input">
                             <option value="1">1 min</option>
                             <option value="2">2 min</option>
                             <option value="5">5 min</option>
@@ -128,8 +128,8 @@ <h2 class="settings-header-text">Settings</h2>
                     <div class="text-container">
                         <span>Custom badge color</span>
                     </div>
-                    <div class="color-input">
-                        <input type="text" id="colorInput" placeholder="#RRGGBB" minlength="7" maxlength="7" autocomplete="off" spellcheck="false" />
+                    <div class="settings-input-container">
+                        <input type="text" id="colorInput" class="settings-input" placeholder="#RRGGBB" minlength="7" maxlength="7" autocomplete="off" spellcheck="false" />
                     </div>
                 </div>
                 
diff --git a/src/css/settings.css b/src/css/settings.css
index 741c6f2..658d49f 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -167,62 +167,39 @@ input:checked+.slider:before {
     background-color: #9146ff;
 }
 
-.settings-input {
+/*  SETTINGS INPUTS  */
+.settings-input-container {
     float: right;
     display: inline-flex;
     align-items: center;
     height: 100%;
 }
 
-/*  COLOR INPUT  */
-.color-input {
-    float: right;
-    display: inline-flex;
-    align-items: center;
-    height: 100%;
-}
-
-.color-input input[type="text"] {
-    width: 64px;
+.settings-input {
+    width: 72px;
+    height: 28px;
     background-color: #0e0e10;
     color: #999999;
     border: 2px solid #999999;
     border-radius: 10px;
-    padding: 8px;
     text-align: center;
     font-weight: bold;
 }
 
-.color-input input[type="text"]:hover {
+.settings-input:hover {
     color: #fff;
     border: 2px solid #fff;
 }
 
-.color-input input[type="text"]:focus {
+.settings-input:focus {
     color: #fff;
     border: 2px solid #9146ff;
     outline: 0;
 }
 
-/*  SELECT DROPDOWNS  */
-.settings-input select {
-    width: 100%;
-    background-color: #0e0e10;
-    color: #999999;
-    border: 2px solid #999999;
-    border-radius: 10px;
-    padding: 8px 2px;
-}
-
-.settings-input select:hover {
-    color: #fff;
-    border: 2px solid #fff;
-}
-
-.settings-input select:focus {
-    color: #fff;
-    border: 2px solid #9146ff;
-    outline: 0;
+#backgroundRefreshSelect {
+    width: 80px;
+    height: 34px;
 }
 
 /*  SETTINGS FOOTER  */

From 7829c49ab585b1dbf1c5004f9fe80bba24643fe0 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Tue, 16 Jan 2024 21:04:52 +0100
Subject: [PATCH 21/30] =?UTF-8?q?=F0=9F=94=A7Tweaks/Cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/main.css     | 21 +++++++++------------
 src/css/tooltips.css | 15 ++++++++++++++-
 src/js/main.js       | 21 ++++-----------------
 src/js/settings.js   | 31 +++++++++++++++++++------------
 4 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/src/css/main.css b/src/css/main.css
index e7b10e7..71afef4 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -121,26 +121,25 @@ body {
     position: absolute;
     background-color: #242429;
     padding: 0;
-    width: 176px;
+    width: 182px;
     height: auto;
     border: 1px solid #38383f;
     border-radius: 5px;
     display: flex;
     box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 0 10px 6px rgba(0, 0, 0, 0.3);
 
-    transform: translate(-115px, 50px);
+    transform: translate(-117px, 45px);
 }
 
 .dropdown-body {
     color: #fff;
     width: 100%;
-    padding: 5px 0;
+    padding: 5px;
 }
 
 .filter-option {
     height: 30px;
     font-size: 1rem;
-    padding: 0 5px;
 }
 
 .filter-button {
@@ -148,8 +147,8 @@ body {
     align-items: center;
     height: 100%;
     width: 100%;
-    padding: 0 6px;
     background-color: #242429;
+    padding: 0;
     border: 0;
     border-radius: 3px;
     cursor: pointer;
@@ -176,7 +175,7 @@ body {
 }
 
 .filter-icon {
-    margin-right: 8px;
+    margin: 0 8px;
 }
 
 /*  MAIN ELEMENT CLASSES  */
@@ -204,8 +203,8 @@ body {
     border-top: 1px solid #242429;
     border-bottom: 1px solid #000;
     display: flex;
-    animation: fade-anim-in 0.6s cubic-bezier(0.35, 0.55, 0, 1);
-    transition: transform 333ms cubic-bezier(0.35, 0.55, 0, 1);
+    /*animation: fade-anim-in 0.6s cubic-bezier(0.35, 0.55, 0, 1);
+    transition: transform 333ms cubic-bezier(0.35, 0.55, 0, 1);*/
 }
 
 .stream-container:hover {
@@ -214,7 +213,7 @@ body {
 }
 
 .stream-container:active {
-    transform: scale(0.99);
+    background-color: #29292e;
 }
 
 .stream-thumbnail {
@@ -331,11 +330,9 @@ body {
     visibility: hidden;
     user-select: none;
     animation-fill-mode: forwards;
-    transform-origin: top left;
+    transform-origin: top center;
 }
 
-/* ANIMATIONS */
-
 .context-item {
     padding: 6px 12px;
     border-radius: 2px;
diff --git a/src/css/tooltips.css b/src/css/tooltips.css
index fbeca7d..3a411df 100644
--- a/src/css/tooltips.css
+++ b/src/css/tooltips.css
@@ -310,4 +310,17 @@
 [filter-label]:not(:hover):after,
 [filter-label]:not(:hover):before {
     transition-delay: 0s;
-}
\ No newline at end of file
+}
+
+
+/*  HIDDEN LABELS  */
+
+[settings-label].hidden-label:after,
+[settings-label].hidden-label:before {
+    opacity: 0;
+}
+
+[settings-label].hidden-label:hover:after,
+[settings-label].hidden-label:hover:before {
+    opacity: 0;
+}
diff --git a/src/js/main.js b/src/js/main.js
index 0d8f619..5b582a7 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -89,7 +89,7 @@ const loadTwitchContent = async () => {
     }
 
     if (res.twitchStreams) {
-        let filteredStreams = [...res.twitchStreams]; // Copy the array to avoid modifying the original
+        let filteredStreams = [...res.twitchStreams];
 
         // Filter/Sort options
         const selectedFilter = getSelectedFilterOption();
@@ -304,19 +304,13 @@ chrome.runtime.onMessage.addListener(async (request) => {
 let contextMenu = document.getElementById("context-menu");
 let currentChannelName = null;
 let currentCategoryName;
-let currentStreamContainer = null;
 
 document.addEventListener('contextmenu', (event) => {
     const streamContainer = event.target.closest('.stream-container');
     if (streamContainer) {
         event.preventDefault();
-        if (currentStreamContainer) {
-            currentStreamContainer.classList.remove('context-active');
-        }
         currentChannelName = streamContainer.querySelector('.stream-channel-name').innerHTML.trim();
         currentCategoryName = streamContainer.querySelector('.stream-game-and-viewers').innerText.split(' - ')[0].trim();
-        currentStreamContainer = streamContainer;
-        currentStreamContainer.classList.add('context-active');
         const mouseX = event.clientX;
         const mouseY = event.clientY;
         hideContextMenu();
@@ -329,8 +323,7 @@ function animatePopup(element, targetState) {
         element.style.visibility = 'visible';
         element.classList.remove('popup-anim-out');
         element.classList.add('popup-anim-in');
-    } 
-    else {
+    } else {
         element.classList.remove('popup-anim-in');
         element.classList.add('popup-anim-out');
     }
@@ -342,8 +335,8 @@ const showContextMenu = (x, y) => {
     const windowWidth = window.innerWidth;
     const windowHeight = window.innerHeight;
 
-    let menuX = x + 5;
-    let menuY = y;
+    let menuX = x - 57;
+    let menuY = y + 5;
 
     if (menuX + menuWidth > windowWidth) {
         menuX = windowWidth - menuWidth;
@@ -377,12 +370,6 @@ const showContextMenu = (x, y) => {
 // Function to hide the context menu and remove the class from the stream container
 const hideContextMenu = () => {
     animatePopup(contextMenu, false);
-
-    // Remove the class from the stream container
-    if (currentStreamContainer) {
-        currentStreamContainer.classList.remove('context-active');
-        currentStreamContainer = null;
-    }
 };
 
 const openLink = (url, openInNewWindow) => {
diff --git a/src/js/settings.js b/src/js/settings.js
index 192b81b..503a71e 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -37,11 +37,11 @@ chrome.storage.local.get(
 );
 
 // Listen for changes in the toggle switches and store the settings
-document.getElementById("openInPlayerToggle").addEventListener("change", function () {
+document.getElementById("openInPlayerToggle").addEventListener("change", function() {
     setToggleSwitchStatus("openInPlayerToggle", this.checked);
 });
 
-document.getElementById("openInNewWindowToggle").addEventListener("change", function () {
+document.getElementById("openInNewWindowToggle").addEventListener("change", function() {
     setToggleSwitchStatus("openInNewWindowToggle", this.checked);
 });
 
@@ -63,11 +63,11 @@ const colorInput = document.getElementById("colorInput");
 // console.log("Toggle Switch Status - Open in New Window:", openInNewWindowToggle.checked);
 
 // Custom color badge input
-colorInput.addEventListener("focus", function () {
+colorInput.addEventListener("focus", function() {
     this.addEventListener("input", handleColorInput);
 });
 
-colorInput.addEventListener("blur", function () {
+colorInput.addEventListener("blur", function() {
     this.removeEventListener("input", handleColorInput);
 });
 
@@ -116,14 +116,12 @@ if (logoutButton) {
 }
 
 // Filter dropdown
-
 function animatePopup(element, targetState) {
     if (targetState === true) {
         element.style.visibility = 'visible';
         element.classList.remove('popup-anim-out');
         element.classList.add('popup-anim-in');
-    } 
-    else {
+    } else {
         element.classList.remove('popup-anim-in');
         element.classList.add('popup-anim-out');
     }
@@ -138,7 +136,7 @@ filterBtn.onclick = function(event) {
     event.stopPropagation();
 };
 
-window.onclick = function(event) {
+window.onmousedown = function(event) {
     if (!event.target.matches('.dropdown-content') && dropdown.style.visibility === "visible") {
         animatePopup(dropdown, false);
     }
@@ -149,8 +147,7 @@ function animateSettingsBackground(element, targetState) {
         element.style.visibility = 'visible';
         element.classList.remove('settings-background-anim-out');
         element.classList.add('settings-background-anim-in');
-    } 
-    else {
+    } else {
         element.classList.remove('settings-background-anim-in');
         element.classList.add('settings-background-anim-out');
     }
@@ -161,11 +158,21 @@ var modal = document.getElementById("settingsModal");
 var modalContent = document.getElementById("settingsModalContent");
 var btn = document.getElementById("settingsBtn");
 var span = document.getElementsByClassName("settings-close-btn")[0];
+var settingsLabel = document.querySelector("[settings-label]");
+
+btn.addEventListener("mousedown", function() {
+    // Hide the settings-label on mousedown
+    settingsLabel.classList.add("hidden-label");
+});
+
 btn.onclick = function() {
     animateSettingsBackground(modal, true);
     animatePopup(modalContent, true);
-}
+};
+
 span.onclick = function() {
+    // Restore the settings-label when the modal is closed
+    settingsLabel.classList.remove("hidden-label");
     animateSettingsBackground(modal, false);
     animatePopup(modalContent, false);
-}
+};
\ No newline at end of file

From ecb1b46b9aa71ca3fd0f1e5878e8c4e664e8cf5e Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Tue, 16 Jan 2024 21:41:01 +0100
Subject: [PATCH 22/30] =?UTF-8?q?=F0=9F=94=A7Fix=20pixel=20gap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/main.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/css/main.css b/src/css/main.css
index 71afef4..55dd6a1 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -121,14 +121,14 @@ body {
     position: absolute;
     background-color: #242429;
     padding: 0;
-    width: 182px;
+    width: 184px;
     height: auto;
     border: 1px solid #38383f;
     border-radius: 5px;
     display: flex;
     box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 0 10px 6px rgba(0, 0, 0, 0.3);
 
-    transform: translate(-117px, 45px);
+    transform: translate(-118px, 45px);
 }
 
 .dropdown-body {

From 6b41b44fa6ea657add78c809d94be25fba234130 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Wed, 17 Jan 2024 02:40:56 +0100
Subject: [PATCH 23/30] =?UTF-8?q?=F0=9F=94=A7Cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 popup.html           |  6 ++----
 src/css/main.css     | 21 +++++----------------
 src/css/settings.css |  7 ++++---
 src/css/tooltips.css |  2 +-
 src/js/background.js |  4 ++--
 src/js/settings.js   |  4 +++-
 6 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/popup.html b/popup.html
index 4b847c1..5a8a1f0 100644
--- a/popup.html
+++ b/popup.html
@@ -106,7 +106,6 @@ <h2 class="settings-header-text">Settings</h2>
                         </label>
                     </div>
                 </div>
-
                 <div class="option-container">
                     <div class="text-container">
                         <span>Background update interval</span>
@@ -123,7 +122,6 @@ <h2 class="settings-header-text">Settings</h2>
                         </select>
                     </div>
                 </div>
-
                 <div class="option-container">
                     <div class="text-container">
                         <span>Custom badge color</span>
@@ -132,7 +130,6 @@ <h2 class="settings-header-text">Settings</h2>
                         <input type="text" id="colorInput" class="settings-input" placeholder="#RRGGBB" minlength="7" maxlength="7" autocomplete="off" spellcheck="false" />
                     </div>
                 </div>
-                
                 <!-- Settings footer link -->
                 <div class="settings-footer">
                     <div class="footer-container">
@@ -149,6 +146,7 @@ <h2 class="settings-header-text">Settings</h2>
             </div>
         </div>
     </div>
+    <!-- Context Menu -->
     <div id="context-menu">
         <div class="context-item context-item-open-channel">Open Channel</div>
         <div class="context-item context-item-open-player">Open Player</div>
@@ -164,4 +162,4 @@ <h2 class="settings-header-text">Settings</h2>
     <script src="src/js/settings.js"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/src/css/main.css b/src/css/main.css
index 55dd6a1..6931373 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -43,7 +43,7 @@ body {
     color: #fff;
     border: 2px solid #242429;
     border-radius: 5px 0 0 5px;
-    padding: 8px;
+    padding: 0 8px;
     margin: 10px 0 10px 10px;
     font-size: 1rem;
     font-weight: bold;
@@ -203,8 +203,6 @@ body {
     border-top: 1px solid #242429;
     border-bottom: 1px solid #000;
     display: flex;
-    /*animation: fade-anim-in 0.6s cubic-bezier(0.35, 0.55, 0, 1);
-    transition: transform 333ms cubic-bezier(0.35, 0.55, 0, 1);*/
 }
 
 .stream-container:hover {
@@ -220,7 +218,7 @@ body {
     position: relative;
     width: 80px;
     height: 45px;
-    padding: 10px;
+    margin: 10px;
 }
 
 .stream-thumbnail img {
@@ -236,8 +234,8 @@ body {
 
 .stream-uptime {
     position: absolute;
-    right: 10.1%;
-    bottom: 15.3%;
+    right: 0;
+    bottom: 0;
     background: rgba(0, 0, 0, 0.6);
     color: rgba(255, 255, 255, 0.8);
     font-size: 0.78rem;
@@ -299,15 +297,6 @@ body {
     }
 }
 
-@keyframes fade-anim-in {
-    from {
-        opacity: 0;
-    }
-    to {
-        overflow: 1;
-    }
-}
-
 .popup-anim-in {
     animation: popup-anim-in 333ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
 }
@@ -371,4 +360,4 @@ body {
     font-weight: bold;
     font-size: 1.1rem;
     padding: 20px 0 0 0;
-}
+}
\ No newline at end of file
diff --git a/src/css/settings.css b/src/css/settings.css
index 0113df5..cb107bd 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -209,7 +209,6 @@ input:checked+.slider:before {
     position: absolute;
     bottom: 0;
     width: 100%;
-    margin-bottom: 18px;
 }
 
 .footer-container {
@@ -217,7 +216,7 @@ input:checked+.slider:before {
     height: 30px;
     width: 100%;
     font-size: 1rem;
-    padding: 0 18px 0 18px;
+    padding: 0 18px 18px 18px;
     justify-content: space-between;
 }
 
@@ -271,6 +270,7 @@ input:checked+.slider:before {
         background-color: transparent;
         backdrop-filter: blur(0px);
     }
+
     to {
         background-color: rgba(0, 0, 0, 0.75);
         backdrop-filter: blur(6px);
@@ -290,6 +290,7 @@ input:checked+.slider:before {
         transform: scale(0.9);
         opacity: 0;
     }
+
     to {
         transform: scale(1.0);
         opacity: 1;
@@ -317,4 +318,4 @@ input:checked+.slider:before {
 #extensionVersion {
     color: rgba(153, 153, 153, 0.5);
     font-weight: bold;
-}
+}
\ No newline at end of file
diff --git a/src/css/tooltips.css b/src/css/tooltips.css
index 3a411df..080033a 100644
--- a/src/css/tooltips.css
+++ b/src/css/tooltips.css
@@ -323,4 +323,4 @@
 [settings-label].hidden-label:hover:after,
 [settings-label].hidden-label:hover:before {
     opacity: 0;
-}
+}
\ No newline at end of file
diff --git a/src/js/background.js b/src/js/background.js
index 76777d1..8fadf3f 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -69,7 +69,7 @@ const createUpdateStreamsAlarm = (updateRateMin) => {
     });
 };
 
-chrome.storage.local.get({backgroundUpdateRateMin: 5}, (data) => {
+chrome.storage.local.get({ backgroundUpdateRateMin: 5 }, (data) => {
     value = data.backgroundUpdateRateMin;
     console.log(`[startup] Background update rate: ${value} minutes`);
     createUpdateStreamsAlarm(value);
@@ -163,7 +163,7 @@ const getTwitchAuth = async () => {
     } catch (error) {
         console.error(error);
     }
-    
+
     return false;
 };
 
diff --git a/src/js/settings.js b/src/js/settings.js
index efe15e2..0268079 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -3,7 +3,9 @@ const setToggleSwitchStatus = (toggleId, status) => {
     const toggleSwitch = document.getElementById(toggleId);
     if (toggleSwitch) {
         toggleSwitch.checked = status;
-        chrome.storage.local.set({ [toggleId]: status });
+        chrome.storage.local.set({
+            [toggleId]: status
+        });
     }
 };
 

From a670d7f28d06af322e9e7e5db968478d7c1e8fb2 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Thu, 18 Jan 2024 16:56:25 +0100
Subject: [PATCH 24/30] =?UTF-8?q?=F0=9F=94=A7Update=20sort=20dropdown=20an?=
 =?UTF-8?q?d=20it's=20tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

tooltip now hides on click, until you hover over it again, while the dropdown is open
---
 src/css/main.css     |  3 +--
 src/css/tooltips.css | 16 +++++++++++++++-
 src/js/settings.js   | 15 +++++++++++++++
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/css/main.css b/src/css/main.css
index 6931373..e06e754 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -114,7 +114,6 @@ body {
     visibility: hidden;
 
     transform-origin: top center;
-    z-index: 1000;
 }
 
 .dropdown-content {
@@ -128,7 +127,7 @@ body {
     display: flex;
     box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 0 10px 6px rgba(0, 0, 0, 0.3);
 
-    transform: translate(-118px, 45px);
+    transform: translate(-118px, 50px);
 }
 
 .dropdown-body {
diff --git a/src/css/tooltips.css b/src/css/tooltips.css
index 080033a..41df2ca 100644
--- a/src/css/tooltips.css
+++ b/src/css/tooltips.css
@@ -318,9 +318,23 @@
 [settings-label].hidden-label:after,
 [settings-label].hidden-label:before {
     opacity: 0;
+    transition-delay: 0s;
 }
 
 [settings-label].hidden-label:hover:after,
 [settings-label].hidden-label:hover:before {
     opacity: 0;
-}
\ No newline at end of file
+    transition-delay: 0s;
+}
+
+[filter-label].filter-label-hidden:after,
+[filter-label].filter-label-hidden:before {
+    opacity: 0;
+    transition-delay: 0s;
+}
+
+[filter-label].filter-label-hidden:hover:after,
+[filter-label].filter-label-hidden:hover:before {
+    opacity: 0;
+    transition-delay: 0s;
+}
diff --git a/src/js/settings.js b/src/js/settings.js
index 0268079..4945038 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -136,13 +136,28 @@ function animatePopup(element, targetState) {
 
 var dropdown = document.getElementById("filterDropdown");
 var filterBtn = document.getElementById("filterButton");
+var filterLabel = document.querySelector('[filter-label]');
+
 filterBtn.onclick = function(event) {
+    let isFilterLabelHidden = filterLabel.classList.contains('filter-label-hidden');
+
+    if (isFilterLabelHidden) {
+        filterLabel.classList.remove('filter-label-hidden');
+    } else {
+        filterLabel.classList.add('filter-label-hidden');
+    }
+
     let dropdownVisibility = window.getComputedStyle(dropdown).visibility === "visible";
     animatePopup(dropdown, !dropdownVisibility);
 
     event.stopPropagation();
 };
 
+// Event listener to reset the filter label visibility on hover
+filterBtn.addEventListener('mouseenter', function() {
+    filterLabel.classList.remove('filter-label-hidden');
+});
+
 window.onmousedown = function(event) {
     if (!event.target.matches('.dropdown-content') && dropdown.style.visibility === "visible") {
         animatePopup(dropdown, false);

From 611d67e4ae11c364489e1a873e13d6ea5739aed8 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Thu, 18 Jan 2024 17:03:29 +0100
Subject: [PATCH 25/30] =?UTF-8?q?=F0=9F=94=A7Update=20tooltips=20colors=20?=
 =?UTF-8?q?(now=20with=20variables)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/tooltips.css | 38 ++++++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/css/tooltips.css b/src/css/tooltips.css
index 41df2ca..b75b46d 100644
--- a/src/css/tooltips.css
+++ b/src/css/tooltips.css
@@ -1,4 +1,10 @@
-/*  SETTINGS TOOLTIP  */
+/*  SETTINGS TOOLTIPS  */
+
+:root {
+    --tooltip-background: #fff;
+    --tooltip-text: #000;
+}
+
 
 [settings-label] {
     position: relative;
@@ -28,8 +34,8 @@
     overflow: visible;
     font-size: .8em;
     font-weight: bold;
-    color: #000;
-    background-color: #fff;
+    color: var(--tooltip-text);
+    background-color: var(--tooltip-background);
     border-radius: 5px;
     opacity: 0;
 }
@@ -38,7 +44,7 @@
     content: "";
     border-style: solid;
     border-width: 0 8px 10px 8px;
-    border-color: transparent transparent #fff transparent;
+    border-color: transparent transparent var(--tooltip-background) transparent;
     top: 35px;
     right: 50%;
     transform: translateX(50%);
@@ -91,8 +97,8 @@
     overflow: visible;
     font-size: .8em;
     font-weight: bold;
-    color: #000;
-    background-color: #fff;
+    color: var(--tooltip-text);
+    background-color: var(--tooltip-background);
     border-radius: 5px;
     opacity: 0;
 }
@@ -101,7 +107,7 @@
     content: "";
     border-style: solid;
     border-width: 0 8px 10px 8px;
-    border-color: transparent transparent #fff transparent;
+    border-color: transparent transparent var(--tooltip-background) transparent;
     top: 35px;
     right: 50%;
     transform: translateX(50%);
@@ -154,8 +160,8 @@
     overflow: visible;
     font-size: .8em;
     font-weight: bold;
-    color: #000;
-    background-color: #fff;
+    color: var(--tooltip-text);
+    background-color: var(--tooltip-background);
     border-radius: 5px;
     opacity: 0;
 }
@@ -164,7 +170,7 @@
     content: "";
     border-style: solid;
     border-width: 0 8px 10px 8px;
-    border-color: transparent transparent #fff transparent;
+    border-color: transparent transparent var(--tooltip-background) transparent;
     top: 35px;
     right: 50%;
     transform: translateX(50%);
@@ -217,8 +223,8 @@
     overflow: visible;
     font-size: .8em;
     font-weight: bold;
-    color: #000;
-    background-color: #fff;
+    color: var(--tooltip-text);
+    background-color: var(--tooltip-background);
     border-radius: 5px;
     opacity: 0;
 }
@@ -227,7 +233,7 @@
     content: "";
     border-style: solid;
     border-width: 0 8px 10px 8px;
-    border-color: transparent transparent #fff transparent;
+    border-color: transparent transparent var(--tooltip-background) transparent;
     top: 23px;
     right: 50%;
     transform: translateX(50%);
@@ -280,8 +286,8 @@
     overflow: visible;
     font-size: .8em;
     font-weight: bold;
-    color: #000;
-    background-color: #fff;
+    color: var(--tooltip-text);
+    background-color: var(--tooltip-background);
     border-radius: 5px;
     opacity: 0;
 }
@@ -290,7 +296,7 @@
     content: "";
     border-style: solid;
     border-width: 0 8px 10px 8px;
-    border-color: transparent transparent #fff transparent;
+    border-color: transparent transparent var(--tooltip-background) transparent;
     top: 35px;
     right: 50%;
     transform: translateX(50%);

From a92bdcdf4701f86723d66dadc3e81b2817dc764f Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Thu, 18 Jan 2024 17:03:46 +0100
Subject: [PATCH 26/30] =?UTF-8?q?=F0=9F=94=A7Update=20animations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/settings.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/css/settings.css b/src/css/settings.css
index cb107bd..7d7450b 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -25,16 +25,16 @@
 }
 
 .settings-background-anim-in {
-    animation: settings-background-anim-in 0.25s linear forwards;
+    animation: settings-background-anim-in 0.2s linear forwards;
 }
 .settings-background-anim-out {
-    animation: settings-background-anim-out 0.25s linear forwards;
+    animation: settings-background-anim-out 0.2s linear forwards;
 }
 .popup-anim-in {
-    animation: popup-anim-in 555ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
+    animation: popup-anim-in 333ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
 }
 .popup-anim-out {
-    animation: popup-anim-out 222ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
+    animation: popup-anim-out 111ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
 }
 
 .settings-modal-body {

From 1f18461a3540614c3335c58da7e27be8e9379a8c Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Thu, 18 Jan 2024 17:04:56 +0100
Subject: [PATCH 27/30] =?UTF-8?q?=F0=9F=94=A7Update=20background.js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

comment out debug console logs
---
 src/js/background.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/js/background.js b/src/js/background.js
index 8fadf3f..e16a5d0 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -50,22 +50,22 @@ chrome.alarms.onAlarm.addListener((alarm) => {
 
 const createUpdateStreamsAlarm = (updateRateMin) => {
     chrome.alarms.get("updateStreamsAlarm", (alarm) => {
-        console.log(`[debug] creating background refresh alarm:`)
-        console.log("  - before clear: updateStreamsAlarm get: ", alarm);
+        // console.log(`[debug] creating background refresh alarm:`)
+        // console.log("  - before clear: updateStreamsAlarm get: ", alarm);
     });
 
     chrome.alarms.clear("updateStreamsAlarm", (wasCleared) => {
-        console.log("    | updateStreamsAlarm wasCleared: ", wasCleared);
+        // console.log("    | updateStreamsAlarm wasCleared: ", wasCleared);
     });
 
     chrome.alarms.get("updateStreamsAlarm", (alarm) => {
-        console.log("  - after clear: updateStreamsAlarm get: ", alarm);
+        // console.log("  - after clear: updateStreamsAlarm get: ", alarm);
     });
 
     chrome.alarms.create("updateStreamsAlarm", { periodInMinutes: updateRateMin });
 
     chrome.alarms.get("updateStreamsAlarm", (alarm) => {
-        console.log("[debug] new alarm: updateStreamsAlarm get: ", alarm);
+        // console.log("[debug] new alarm: updateStreamsAlarm get: ", alarm);
     });
 };
 

From 8b6cc348f9c9959eb20033c4f28131acb4db9369 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Thu, 18 Jan 2024 21:25:50 +0100
Subject: [PATCH 28/30] =?UTF-8?q?=F0=9F=94=A7Update=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/main.css     |  10 +---
 src/css/settings.css |   2 -
 src/css/tooltips.css | 136 ++++++++++++++++++++-----------------------
 3 files changed, 66 insertions(+), 82 deletions(-)

diff --git a/src/css/main.css b/src/css/main.css
index e06e754..e91bbb8 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -19,8 +19,8 @@ body {
     color: #fff;
 }
 
-/*  NAVBAR  */
 
+/*  NAVBAR  */
 .navbar {
     color: #fff;
     background-color: #0e0e10;
@@ -76,7 +76,6 @@ body {
 }
 
 /*  NAVBAR LINKS/BUTTONS  */
-
 .navbar-link {
     color: #fff;
     background-color: #38383f;
@@ -178,7 +177,6 @@ body {
 }
 
 /*  MAIN ELEMENT CLASSES  */
-
 .streams {
     bottom: 0;
     width: 430px;
@@ -195,7 +193,6 @@ body {
 }
 
 /*  STREAM "CARD" CLASSES */
-
 .stream-container {
     width: 100%;
     cursor: pointer;
@@ -276,7 +273,6 @@ body {
 }
 
 /* ANIMATIONS */
-
 @keyframes popup-anim-in {
     from {
         transform: scale(0.9);
@@ -304,11 +300,10 @@ body {
 }
 
 /*  CONTEXT MENU  */
-
 #context-menu {
     position: fixed;
     z-index: 1000;
-    background-color: #ffffff;
+    color: #fff;
     background-color: #0e0e10;
     border: 1px solid #242429;
     border-radius: 5px;
@@ -348,7 +343,6 @@ body {
 
 
 /*  OTHER  */
-
 .accent-color {
     color: #9146ff;
 }
diff --git a/src/css/settings.css b/src/css/settings.css
index 7d7450b..7602306 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -264,7 +264,6 @@ input:checked+.slider:before {
 }
 
 /* ANIMATIONS */
-
 @keyframes settings-background-anim-in {
     from {
         background-color: transparent;
@@ -306,7 +305,6 @@ input:checked+.slider:before {
 }
 
 /*  OTHER  */
-
 .version-container {
     display: flex;
     justify-content: center;
diff --git a/src/css/tooltips.css b/src/css/tooltips.css
index b75b46d..7e06926 100644
--- a/src/css/tooltips.css
+++ b/src/css/tooltips.css
@@ -6,24 +6,25 @@
 }
 
 
-[settings-label] {
+/*  REFRESH BUTTON TOOLTIP  */
+[refresh-label] {
     position: relative;
 }
 
-[settings-label]:after,
-[settings-label]:before {
+[refresh-label]:after,
+[refresh-label]:before {
     content: "";
     position: absolute;
     z-index: 500;
     pointer-events: none;
 }
 
-[settings-label]:after {
-    content: attr(settings-label);
+[refresh-label]:after {
+    content: attr(refresh-label);
     display: block;
     position: absolute;
     top: 133%;
-    right: 0%;
+    left: -125%;
     z-index: 500;
     pointer-events: none;
     padding: 5px;
@@ -40,7 +41,7 @@
     opacity: 0;
 }
 
-[settings-label]:before {
+[refresh-label]:before {
     content: "";
     border-style: solid;
     border-width: 0 8px 10px 8px;
@@ -51,42 +52,40 @@
     opacity: 0;
 }
 
-[settings-label]:hover:after {
+[refresh-label]:hover:after {
     opacity: 1;
     transition-delay: 0.3s;
 }
 
-[settings-label]:hover:before {
+[refresh-label]:hover:before {
     opacity: 1;
     transition-delay: 0.3s;
 }
 
-[settings-label]:not(:hover):after,
-[settings-label]:not(:hover):before {
+[refresh-label]:not(:hover):after,
+[refresh-label]:not(:hover):before {
     transition-delay: 0s;
 }
 
-
-/*  TWITCH LIVE FOLLOWING TOOLTIP  */
-
-[twitch-label] {
+/*  FILTER BUTTON TOOLTIP  */
+[filter-label] {
     position: relative;
 }
 
-[twitch-label]:after,
-[twitch-label]:before {
+[filter-label]:after,
+[filter-label]:before {
     content: "";
     position: absolute;
     z-index: 500;
     pointer-events: none;
 }
 
-[twitch-label]:after {
-    content: attr(twitch-label);
+[filter-label]:after {
+    content: attr(filter-label);
     display: block;
     position: absolute;
     top: 133%;
-    right: -132%;
+    left: -99.5%;
     z-index: 500;
     pointer-events: none;
     padding: 5px;
@@ -103,7 +102,7 @@
     opacity: 0;
 }
 
-[twitch-label]:before {
+[filter-label]:before {
     content: "";
     border-style: solid;
     border-width: 0 8px 10px 8px;
@@ -114,42 +113,40 @@
     opacity: 0;
 }
 
-[twitch-label]:hover:after {
+[filter-label]:hover:after {
     opacity: 1;
     transition-delay: 0.3s;
 }
 
-[twitch-label]:hover:before {
+[filter-label]:hover:before {
     opacity: 1;
     transition-delay: 0.3s;
 }
 
-[twitch-label]:not(:hover):after,
-[twitch-label]:not(:hover):before {
+[filter-label]:not(:hover):after,
+[filter-label]:not(:hover):before {
     transition-delay: 0s;
 }
 
-
-/*  REFRESH BUTTON TOOLTIP  */
-
-[refresh-label] {
+/*  TWITCH LIVE FOLLOWING TOOLTIP  */
+[twitch-label] {
     position: relative;
 }
 
-[refresh-label]:after,
-[refresh-label]:before {
+[twitch-label]:after,
+[twitch-label]:before {
     content: "";
     position: absolute;
     z-index: 500;
     pointer-events: none;
 }
 
-[refresh-label]:after {
-    content: attr(refresh-label);
+[twitch-label]:after {
+    content: attr(twitch-label);
     display: block;
     position: absolute;
     top: 133%;
-    left: -125%;
+    right: -132%;
     z-index: 500;
     pointer-events: none;
     padding: 5px;
@@ -166,7 +163,7 @@
     opacity: 0;
 }
 
-[refresh-label]:before {
+[twitch-label]:before {
     content: "";
     border-style: solid;
     border-width: 0 8px 10px 8px;
@@ -177,42 +174,40 @@
     opacity: 0;
 }
 
-[refresh-label]:hover:after {
+[twitch-label]:hover:after {
     opacity: 1;
     transition-delay: 0.3s;
 }
 
-[refresh-label]:hover:before {
+[twitch-label]:hover:before {
     opacity: 1;
     transition-delay: 0.3s;
 }
 
-[refresh-label]:not(:hover):after,
-[refresh-label]:not(:hover):before {
+[twitch-label]:not(:hover):after,
+[twitch-label]:not(:hover):before {
     transition-delay: 0s;
 }
 
-
-/*  "Open streams in Player" SETTINGS OPTION INFO LINK TOOLTIP  */
-
-[info-label] {
+/*  SETTINGS TOOLTIP*/
+[settings-label] {
     position: relative;
 }
 
-[info-label]:after,
-[info-label]:before {
+[settings-label]:after,
+[settings-label]:before {
     content: "";
     position: absolute;
     z-index: 500;
     pointer-events: none;
 }
 
-[info-label]:after {
-    content: attr(info-label);
+[settings-label]:after {
+    content: attr(settings-label);
     display: block;
     position: absolute;
-    top: 174%;
-    left: -450%;
+    top: 133%;
+    right: 0%;
     z-index: 500;
     pointer-events: none;
     padding: 5px;
@@ -229,53 +224,51 @@
     opacity: 0;
 }
 
-[info-label]:before {
+[settings-label]:before {
     content: "";
     border-style: solid;
     border-width: 0 8px 10px 8px;
     border-color: transparent transparent var(--tooltip-background) transparent;
-    top: 23px;
+    top: 35px;
     right: 50%;
     transform: translateX(50%);
     opacity: 0;
 }
 
-[info-label]:hover:after {
+[settings-label]:hover:after {
     opacity: 1;
     transition-delay: 0.3s;
 }
 
-[info-label]:hover:before {
+[settings-label]:hover:before {
     opacity: 1;
     transition-delay: 0.3s;
 }
 
-[info-label]:not(:hover):after,
-[info-label]:not(:hover):before {
+[settings-label]:not(:hover):after,
+[settings-label]:not(:hover):before {
     transition-delay: 0s;
 }
 
-
-/*  FILTER BUTTON TOOLTIP  */
-
-[filter-label] {
+/*  "Open streams in Player" SETTINGS OPTION INFO LINK TOOLTIP  */
+[info-label] {
     position: relative;
 }
 
-[filter-label]:after,
-[filter-label]:before {
+[info-label]:after,
+[info-label]:before {
     content: "";
     position: absolute;
     z-index: 500;
     pointer-events: none;
 }
 
-[filter-label]:after {
-    content: attr(filter-label);
+[info-label]:after {
+    content: attr(info-label);
     display: block;
     position: absolute;
-    top: 133%;
-    left: -99.5%;
+    top: 174%;
+    left: -450%;
     z-index: 500;
     pointer-events: none;
     padding: 5px;
@@ -292,35 +285,34 @@
     opacity: 0;
 }
 
-[filter-label]:before {
+[info-label]:before {
     content: "";
     border-style: solid;
     border-width: 0 8px 10px 8px;
     border-color: transparent transparent var(--tooltip-background) transparent;
-    top: 35px;
+    top: 23px;
     right: 50%;
     transform: translateX(50%);
     opacity: 0;
 }
 
-[filter-label]:hover:after {
+[info-label]:hover:after {
     opacity: 1;
     transition-delay: 0.3s;
 }
 
-[filter-label]:hover:before {
+[info-label]:hover:before {
     opacity: 1;
     transition-delay: 0.3s;
 }
 
-[filter-label]:not(:hover):after,
-[filter-label]:not(:hover):before {
+[info-label]:not(:hover):after,
+[info-label]:not(:hover):before {
     transition-delay: 0s;
 }
 
 
 /*  HIDDEN LABELS  */
-
 [settings-label].hidden-label:after,
 [settings-label].hidden-label:before {
     opacity: 0;

From 8e6e2dd9a4a9e8b74e1f0f353672ac21581acff9 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Thu, 18 Jan 2024 21:27:26 +0100
Subject: [PATCH 29/30] =?UTF-8?q?=F0=9F=94=A7Update=20settings.js...?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updated settings modal variables and added function for closing modal with [F] key.
---
 src/js/settings.js | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/js/settings.js b/src/js/settings.js
index 4945038..7d4fcfa 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -184,23 +184,33 @@ backgroundRefreshSelect.addEventListener("change", function(value) {
 // Settings Modal
 var modal = document.getElementById("settingsModal");
 var modalContent = document.getElementById("settingsModalContent");
-var btn = document.getElementById("settingsBtn");
-var span = document.getElementsByClassName("settings-close-btn")[0];
+var settingsBtn = document.getElementById("settingsBtn");
+var settingsCloseBtn = document.getElementsByClassName("settings-close-btn")[0];
 var settingsLabel = document.querySelector("[settings-label]");
 
-btn.addEventListener("mousedown", function() {
+settingsBtn.addEventListener("mousedown", function() {
     // Hide the settings-label on mousedown
     settingsLabel.classList.add("hidden-label");
 });
 
-btn.onclick = function() {
+settingsBtn.onclick = function() {
     animateSettingsBackground(modal, true);
     animatePopup(modalContent, true);
 };
 
-span.onclick = function() {
+// Function to close the modal
+function closeModal() {
     // Restore the settings-label when the modal is closed
     settingsLabel.classList.remove("hidden-label");
     animateSettingsBackground(modal, false);
     animatePopup(modalContent, false);
-};
\ No newline at end of file
+}
+
+// Close modal when the close button is clicked
+settingsCloseBtn.onclick = closeModal;
+// Close modal when the 'f' key is pressed
+document.addEventListener('keydown', function(event) {
+    if (event.key.toLowerCase() === 'f') {
+        closeModal();
+    }
+});
\ No newline at end of file

From da226b9e266905cbfc173068fb950e53c96c7a33 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Thu, 18 Jan 2024 21:32:24 +0100
Subject: [PATCH 30/30] =?UTF-8?q?=E2=AC=86=EF=B8=8FVersion=20bump:=20v1.3.?=
 =?UTF-8?q?0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/manifest.json b/manifest.json
index 933a695..92db12c 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "Sam's Twitch Live",
     "description": "Sam's Twitch Live: Your Following Channels, Constantly in View.",
-    "version": "1.2.1",
+    "version": "1.3.0",
     "author": "yungsamd17",
     "homepage_url": "https://github.com/yungsamd17/Twitch-Live",
     "icons":