From a8d493d83dd16a84af91af718745e754e875ebb1 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Fri, 26 Jan 2024 01:39:24 +0100
Subject: [PATCH 01/18] =?UTF-8?q?=F0=9F=94=A7Add=20"Copy=20raid=20command?=
 =?UTF-8?q?=20button"=20#19?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 popup.html           | 15 ++++++++
 src/css/main.css     | 35 ++++++++++++++++++
 src/css/settings.css | 12 +++++--
 src/css/tooltips.css | 61 ++++++++++++++++++++++++++++++++
 src/js/background.js |  2 +-
 src/js/main.js       | 84 +++++++++++++++++++++++++++++++++++++-------
 src/js/settings.js   | 11 +++++-
 7 files changed, 203 insertions(+), 17 deletions(-)

diff --git a/popup.html b/popup.html
index b8423dc..6d57958 100644
--- a/popup.html
+++ b/popup.html
@@ -106,6 +106,21 @@ <h2 class="settings-header-text">Settings</h2>
                         </label>
                     </div>
                 </div>
+                <div class="option-container">
+                    <div class="text-container">
+                        <label for="showRaidButtonToggle">Copy raid command button 
+                            <span info-label-2="Adds a copy button next to channel name.">
+                                <i class="fa-solid fa-circle-info"></i>
+                            </span>
+                        </label>
+                    </div>
+                    <div class="slider-container">
+                        <label class="switch">
+                            <input type="checkbox" id="showRaidButtonToggle">
+                            <span class="slider"></span>
+                        </label>
+                    </div>
+                </div>
                 <div class="option-container">
                     <div class="text-container">
                         <span>Background update interval</span>
diff --git a/src/css/main.css b/src/css/main.css
index e91bbb8..c4c535e 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -249,6 +249,11 @@ body {
     justify-content: center;
 }
 
+.channel-container {
+    display: flex;
+    flex-direction: row;
+}
+
 .stream-channel-name {
     font-size: 1rem;
     font-weight: bold;
@@ -257,6 +262,36 @@ body {
     color: #fff;
 }
 
+.channel-raid-button {
+    background-color: transparent;
+    color: #787878;
+    display: flex;
+    justify-content: center;
+    height: 17px;
+    width: 17px;
+    border: 0;
+    border-radius: 3px;
+    margin-left: 8px;
+    cursor: pointer;
+    visibility: hidden;
+}
+
+.channel-raid-button:hover {
+    color: #fff;
+}
+
+.channel-raid-button:active {
+    color: #9146ff;
+}
+
+.stream-container:hover .channel-raid-button {
+    visibility: visible;
+}
+
+.channel-raid-button.hidden {
+    display: none;
+}
+
 .stream-game-and-viewers,
 .stream-title {
     width: 100%;
diff --git a/src/css/settings.css b/src/css/settings.css
index 30c38fe..53c9bd8 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -18,7 +18,7 @@
     position: relative;
     background-color: #18181b;
     margin: 20px;
-    height: 350px;
+    height: 360px;
     border: 1px solid #242429;
     border-radius: 5px;
     display: flex;
@@ -92,11 +92,17 @@
     cursor: pointer;
 }
 
-.text-container a {
+.text-container label span {
+    cursor: help;
+}
+
+.text-container a,
+.text-container label span {
     color: #999999;
 }
 
-.text-container a:hover {
+.text-container a:hover,
+.text-container label span:hover {
     color: #fff;
 }
 
diff --git a/src/css/tooltips.css b/src/css/tooltips.css
index 7e06926..2b3250a 100644
--- a/src/css/tooltips.css
+++ b/src/css/tooltips.css
@@ -311,6 +311,67 @@
     transition-delay: 0s;
 }
 
+/*  "Copy raid command button" SETTINGS OPTION INFO LINK TOOLTIP  */
+[info-label-2] {
+    position: relative;
+}
+
+[info-label-2]:after,
+[info-label-2]:before {
+    content: "";
+    position: absolute;
+    z-index: 500;
+    pointer-events: none;
+}
+
+[info-label-2]:after {
+    content: attr(info-label-2);
+    display: block;
+    position: absolute;
+    top: 174%;
+    left: -800%;
+    z-index: 500;
+    pointer-events: none;
+    padding: 5px;
+    line-height: 15px;
+    white-space: nowrap;
+    text-decoration: none;
+    text-indent: 0;
+    overflow: visible;
+    font-size: .8em;
+    font-weight: bold;
+    color: var(--tooltip-text);
+    background-color: var(--tooltip-background);
+    border-radius: 5px;
+    opacity: 0;
+}
+
+[info-label-2]:before {
+    content: "";
+    border-style: solid;
+    border-width: 0 8px 10px 8px;
+    border-color: transparent transparent var(--tooltip-background) transparent;
+    top: 23px;
+    right: 50%;
+    transform: translateX(50%);
+    opacity: 0;
+}
+
+[info-label-2]:hover:after {
+    opacity: 1;
+    transition-delay: 0.3s;
+}
+
+[info-label-2]:hover:before {
+    opacity: 1;
+    transition-delay: 0.3s;
+}
+
+[info-label-2]:not(:hover):after,
+[info-label-2]:not(:hover):before {
+    transition-delay: 0s;
+}
+
 
 /*  HIDDEN LABELS  */
 [settings-label].hidden-label:after,
diff --git a/src/js/background.js b/src/js/background.js
index e16a5d0..bc7f9a6 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -117,7 +117,7 @@ const updateBadge = async () => {
 };
 
 // Twitch app token
-const TWITCH_APP_TOKEN = "veho7ytn25l8a9dpgfkk79sqgey43j";
+const TWITCH_APP_TOKEN = "rcailimmjedyclwyf2u3xjw5xnt7j6";
 const redirectURL = chrome.identity.getRedirectURL();
 
 // Function to handle Twitch unauthorized state
diff --git a/src/js/main.js b/src/js/main.js
index 5b582a7..6a25436 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -46,13 +46,15 @@ const formatViewerCount = (count) => {
 };
 
 // Open stream in new window and player settings
-const openStream = (stream) => {
+const openStream = (stream, event) => {
     const openInPlayerToggle = document.getElementById("openInPlayerToggle");
     const openInNewWindowToggle = document.getElementById("openInNewWindowToggle");
+    const showRaidButtonToggle = document.getElementById("showRaidButtonToggle");
 
-    if (openInPlayerToggle && openInNewWindowToggle) {
+    if (openInPlayerToggle && openInNewWindowToggle && showRaidButtonToggle) {
         const openInPlayer = openInPlayerToggle.checked;
         const openInNewWindow = openInNewWindowToggle.checked;
+        const showRaidButton = showRaidButtonToggle.checked;
 
         const baseStreamUrl = `https://www.twitch.tv/${stream.channelName}`;
         let url;
@@ -63,22 +65,28 @@ const openStream = (stream) => {
             url = baseStreamUrl;
         }
 
-        // Open in a new window
-        if (openInNewWindow) {
-            if (openInPlayer) {
-                chrome.windows.create({ url, type: 'popup' });
+        // Check if the click target has the "channel-raid-button" class and the setting is enabled
+        if (!event.target.classList.contains("channel-raid-button") && showRaidButton) {
+            // Open in a new window
+            if (openInNewWindow) {
+                if (openInPlayer) {
+                    chrome.windows.create({ url, type: 'popup' });
+                } else {
+                    chrome.windows.create({ url });
+                }
             } else {
-                chrome.windows.create({ url });
+                // Open in a new tab
+                chrome.tabs.create({ url });
             }
         } else {
-            // Open in a new tab
-            chrome.tabs.create({ url });
+            // Stop event propagation to prevent opening the stream
+            event.stopPropagation();
         }
     }
 };
 
 const loadTwitchContent = async () => {
-    const storageItems = ["twitchIsValidated", "twitchAccessToken", "twitchStreams"];
+    const storageItems = ["twitchIsValidated", "twitchAccessToken", "twitchStreams", "showRaidButtonToggle"];
     const res = await chrome.storage.local.get(storageItems);
 
     // Always refresh Twitch streams when the popup is opened
@@ -149,7 +157,7 @@ const loadTwitchContent = async () => {
             const streamList = filteredStreams.map((stream) => {
                 const streamContainer = document.createElement("div");
                 streamContainer.setAttribute("class", "stream-container");
-                streamContainer.onclick = () => openStream(stream);
+                streamContainer.onclick = (event) => openStream(stream, event);
 
                 const streamThumbnail = document.createElement("div");
                 streamThumbnail.setAttribute("class", "stream-thumbnail");
@@ -171,10 +179,51 @@ const loadTwitchContent = async () => {
                 streamDetails.setAttribute("class", "stream-details");
                 streamContainer.appendChild(streamDetails);
 
+                const channelContainer = document.createElement("div");
+                channelContainer.setAttribute("class", "channel-container")
+                streamDetails.appendChild(channelContainer);
+
                 const channel = document.createElement("span");
                 channel.setAttribute("class", "stream-channel-name");
                 channel.innerHTML = stream.channelName;
-                streamDetails.appendChild(channel);
+                channelContainer.appendChild(channel);
+
+                // Add a separate click event listener for the raid button
+                const raidButton = document.createElement("button");
+                raidButton.setAttribute("class", "channel-raid-button");
+                raidButton.setAttribute("title", "Click to copy raid command");
+
+                // Add the "hidden" class if the showRaidButtonToggle is disabled
+                if (!res.showRaidButtonToggle) {
+                    raidButton.classList.add("hidden");
+                }
+
+                raidButton.addEventListener("click", (event) => {
+                    event.stopPropagation();
+                    // Handle raid button click - copy channel name with raid command
+                    const raidCommand = `/raid ${stream.channelName}`;
+
+
+                    // Create a temporary textarea to copy text to clipboard
+                    const textArea = document.createElement("textarea");
+                    textArea.value = raidCommand;
+                    document.body.appendChild(textArea);
+                    textArea.select();
+
+                    // Copy text to clipboard
+                    document.execCommand("copy");
+
+                    // Remove the temporary textarea
+                    document.body.removeChild(textArea);
+
+                    console.log(`Raid command copied to clipboard: ${raidCommand}`);
+                });
+
+                channelContainer.appendChild(raidButton);
+
+                const raidButtonIcon = document.createElement("i");
+                raidButtonIcon.setAttribute("class", "fa-regular fa-copy");
+                raidButton.appendChild(raidButtonIcon);
 
                 const categoryAndViewCount = document.createElement("span");
                 categoryAndViewCount.setAttribute("class", "stream-game-and-viewers");
@@ -190,6 +239,9 @@ const loadTwitchContent = async () => {
                 title.setAttribute("title", stream.title);
                 streamDetails.appendChild(title);
 
+                // Add the click event for the entire stream container
+                streamContainer.addEventListener("click", () => openStream(stream));
+
                 return streamContainer;
             });
 
@@ -216,6 +268,14 @@ const handleRefreshButtonClick = () => {
     loadTwitchContent();
 };
 
+// Raid command button toggle
+document.getElementById("showRaidButtonToggle").addEventListener("change", async function() {
+    await chrome.storage.local.set({ showRaidButtonToggle: this.checked });
+
+    // Refresh Twitch streams immediately upon toggling the raid button visibility
+    await loadTwitchContent();
+});
+
 // Function to get the selected filter option
 const getSelectedFilterOption = () => {
     const broadcasterButton = document.getElementById("broadcasterButton");
diff --git a/src/js/settings.js b/src/js/settings.js
index 7d4fcfa..88a2ada 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -17,7 +17,7 @@ const getExtensionVersion = () => {
 
 // Retrieve the stored settings on popup load
 chrome.storage.local.get(
-    ["openInPlayerToggle", "openInNewWindowToggle", "customBadgeColor", "extensionVersion", "backgroundUpdateRateMin"],
+    ["openInPlayerToggle", "openInNewWindowToggle", "showRaidButtonToggle", "customBadgeColor", "extensionVersion", "backgroundUpdateRateMin"],
     (result) => {
         setToggleSwitchStatus(
             "openInPlayerToggle",
@@ -27,6 +27,10 @@ chrome.storage.local.get(
             "openInNewWindowToggle",
             result.openInNewWindowToggle !== undefined ? result.openInNewWindowToggle : false
         );
+        setToggleSwitchStatus(
+            "showRaidButtonToggle",
+            result.showRaidButtonToggle !== undefined ? result.showRaidButtonToggle : false
+        );
         document.getElementById("colorInput").value = result.customBadgeColor || "";
 
         backgroundRefreshSelect.value = result.backgroundUpdateRateMin || 5;
@@ -49,6 +53,11 @@ document.getElementById("openInNewWindowToggle").addEventListener("change", func
     setToggleSwitchStatus("openInNewWindowToggle", this.checked);
 });
 
+// Listen for changes in the showRaidButtonToggle and store the setting
+document.getElementById("showRaidButtonToggle").addEventListener("change", function() {
+    setToggleSwitchStatus("showRaidButtonToggle", this.checked);
+});
+
 // Listen for changes in storage and update the toggle switches accordingly
 chrome.storage.onChanged.addListener((changes) => {
     if (changes.openInPlayerToggle !== undefined) {

From be7091df08dd3f9f10562f4139b7660a0e8e6879 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Fri, 26 Jan 2024 01:57:54 +0100
Subject: [PATCH 02/18] =?UTF-8?q?=F0=9F=94=A7Update=20and=20cleanup=20"Cop?=
 =?UTF-8?q?y=20raid=20command=20button"=20#19?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/main.js     | 2 --
 src/js/settings.js | 7 ++++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/js/main.js b/src/js/main.js
index 6a25436..2434742 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -188,7 +188,6 @@ const loadTwitchContent = async () => {
                 channel.innerHTML = stream.channelName;
                 channelContainer.appendChild(channel);
 
-                // Add a separate click event listener for the raid button
                 const raidButton = document.createElement("button");
                 raidButton.setAttribute("class", "channel-raid-button");
                 raidButton.setAttribute("title", "Click to copy raid command");
@@ -203,7 +202,6 @@ const loadTwitchContent = async () => {
                     // Handle raid button click - copy channel name with raid command
                     const raidCommand = `/raid ${stream.channelName}`;
 
-
                     // Create a temporary textarea to copy text to clipboard
                     const textArea = document.createElement("textarea");
                     textArea.value = raidCommand;
diff --git a/src/js/settings.js b/src/js/settings.js
index 88a2ada..830c12f 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -53,7 +53,6 @@ document.getElementById("openInNewWindowToggle").addEventListener("change", func
     setToggleSwitchStatus("openInNewWindowToggle", this.checked);
 });
 
-// Listen for changes in the showRaidButtonToggle and store the setting
 document.getElementById("showRaidButtonToggle").addEventListener("change", function() {
     setToggleSwitchStatus("showRaidButtonToggle", this.checked);
 });
@@ -66,6 +65,9 @@ chrome.storage.onChanged.addListener((changes) => {
     if (changes.openInNewWindowToggle !== undefined) {
         setToggleSwitchStatus("openInNewWindowToggle", changes.openInNewWindowToggle.newValue);
     }
+    if (changes.showRaidButtonToggle !== undefined) {
+        setToggleSwitchStatus("showRaidButtonToggle", changes.showRaidButtonToggle.newValue);
+    }
     if (changes.backgroundUpdateRateMin !== undefined) {
         backgroundRefreshSelect.value = changes.backgroundUpdateRateMin.newValue;
     }
@@ -119,9 +121,8 @@ const handleLogoutButtonClick = () => {
         twitchStreams: null,
     });
 
-    // Remove the extension badge
+    // Remove the extension badge, and close the popup
     chrome.action.setBadgeText({ text: "" });
-    // Close the popup
     window.close();
 };
 

From b3c7da9aa0dfedb911185ee62c91b6987192a5c9 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Fri, 26 Jan 2024 02:39:17 +0100
Subject: [PATCH 03/18] =?UTF-8?q?=F0=9F=94=A7fix:=20Updated=20app=20token?=
 =?UTF-8?q?=20back=20to=20normal=20one?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/background.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/background.js b/src/js/background.js
index bc7f9a6..e16a5d0 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -117,7 +117,7 @@ const updateBadge = async () => {
 };
 
 // Twitch app token
-const TWITCH_APP_TOKEN = "rcailimmjedyclwyf2u3xjw5xnt7j6";
+const TWITCH_APP_TOKEN = "veho7ytn25l8a9dpgfkk79sqgey43j";
 const redirectURL = chrome.identity.getRedirectURL();
 
 // Function to handle Twitch unauthorized state

From 19d261ac338e14a99ceb22e924827da2c1334821 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Fri, 26 Jan 2024 06:55:09 +0100
Subject: [PATCH 04/18] =?UTF-8?q?=F0=9F=94=A7Update=20main.js=20#19?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/js/main.js b/src/js/main.js
index 2434742..0efeab5 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -46,15 +46,13 @@ const formatViewerCount = (count) => {
 };
 
 // Open stream in new window and player settings
-const openStream = (stream, event) => {
+const openStream = (stream) => {
     const openInPlayerToggle = document.getElementById("openInPlayerToggle");
     const openInNewWindowToggle = document.getElementById("openInNewWindowToggle");
-    const showRaidButtonToggle = document.getElementById("showRaidButtonToggle");
 
-    if (openInPlayerToggle && openInNewWindowToggle && showRaidButtonToggle) {
+    if (openInPlayerToggle && openInNewWindowToggle) {
         const openInPlayer = openInPlayerToggle.checked;
         const openInNewWindow = openInNewWindowToggle.checked;
-        const showRaidButton = showRaidButtonToggle.checked;
 
         const baseStreamUrl = `https://www.twitch.tv/${stream.channelName}`;
         let url;
@@ -65,22 +63,16 @@ const openStream = (stream, event) => {
             url = baseStreamUrl;
         }
 
-        // Check if the click target has the "channel-raid-button" class and the setting is enabled
-        if (!event.target.classList.contains("channel-raid-button") && showRaidButton) {
-            // Open in a new window
-            if (openInNewWindow) {
-                if (openInPlayer) {
-                    chrome.windows.create({ url, type: 'popup' });
-                } else {
-                    chrome.windows.create({ url });
-                }
+        // Open in a new window
+        if (openInNewWindow) {
+            if (openInPlayer) {
+                chrome.windows.create({ url, type: 'popup' });
             } else {
-                // Open in a new tab
-                chrome.tabs.create({ url });
+                chrome.windows.create({ url });
             }
         } else {
-            // Stop event propagation to prevent opening the stream
-            event.stopPropagation();
+            // Open in a new tab
+            chrome.tabs.create({ url });
         }
     }
 };
@@ -157,7 +149,6 @@ const loadTwitchContent = async () => {
             const streamList = filteredStreams.map((stream) => {
                 const streamContainer = document.createElement("div");
                 streamContainer.setAttribute("class", "stream-container");
-                streamContainer.onclick = (event) => openStream(stream, event);
 
                 const streamThumbnail = document.createElement("div");
                 streamThumbnail.setAttribute("class", "stream-thumbnail");

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

---
 LICENSE | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/LICENSE b/LICENSE
index 042d6e4..2000cc7 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Sam @yungsamd17
+Copyright (c) 2024 Sam @yungsamd17
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

From dcc28da0a29907aec6286a94822cf5669d33320b Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Sun, 28 Jan 2024 13:54:03 +0100
Subject: [PATCH 06/18] =?UTF-8?q?=F0=9F=94=A7Improve=20search=20results=20?=
 =?UTF-8?q?#21?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/main.css | 30 +++++++++++++++++++++++++++++-
 src/js/main.js   | 19 ++++++++++++++++++-
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/css/main.css b/src/css/main.css
index c4c535e..9bc3427 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -387,5 +387,33 @@ body {
     text-align: center;
     font-weight: bold;
     font-size: 1.1rem;
-    padding: 20px 0 0 0;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.no-search-results p {
+    margin-bottom: 10px;
+}
+
+.search-on-twitch-link {
+    color: #9146ff;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+}
+
+.search-on-twitch-link:hover {
+    text-decoration: underline;
+    text-decoration-thickness: 2.25px;
+}
+
+.search-on-twitch-link-icon {
+    color: #999999;
+    font-size: 0.8rem;
+}
+
+p {
+    margin: 0;
 }
\ No newline at end of file
diff --git a/src/js/main.js b/src/js/main.js
index 0efeab5..71043bf 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -236,10 +236,27 @@ const loadTwitchContent = async () => {
 
             contentSection.replaceChildren(...streamList);
         } else {
+            const searchTerm = filterInput.value.trim();
+
             // Display a message when no matching results are found
             const noResultsMessage = document.createElement("div");
             noResultsMessage.setAttribute("class", "no-search-results");
-            noResultsMessage.innerHTML = "No matching Search results found.";
+
+            const noResultsMessageText = document.createElement("p")
+            noResultsMessageText.innerHTML = "No matching Search results found.";
+            noResultsMessage.appendChild(noResultsMessageText)
+
+            const searchOnTwitch = document.createElement("a")
+            searchOnTwitch.setAttribute("class", "search-on-twitch-link")
+            searchOnTwitch.setAttribute("href", `https://www.twitch.tv/search?term=${searchTerm}`)
+            searchOnTwitch.setAttribute("target", "_blank")
+            noResultsMessage.appendChild(searchOnTwitch)
+
+            const searchOnTwitchIcon = document.createElement("i");
+            searchOnTwitchIcon.setAttribute("class", "fa-solid fa-arrow-up-right-from-square search-on-twitch-link-icon");
+            searchOnTwitch.innerHTML += "Search on Twitch&nbsp;";
+            searchOnTwitch.appendChild(searchOnTwitchIcon);
+
             contentSection.replaceChildren(noResultsMessage);
         }
     } else if (!res.twitchIsValidated || !res.twitchAccessToken) {

From 12a99fa7c6cbc9e1265ebfab19a6a89d79cb4aa2 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Sun, 28 Jan 2024 13:57:22 +0100
Subject: [PATCH 07/18] =?UTF-8?q?=F0=9F=94=A7=20Small=20styling=20tweaks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/main.css     | 4 ++--
 src/css/tooltips.css | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/css/main.css b/src/css/main.css
index 9bc3427..4388b97 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -38,12 +38,12 @@ body {
 }
 
 .search-container input[type="text"] {
-    width: 145px;
+    width: 148px;
     background-color: #242429;
     color: #fff;
     border: 2px solid #242429;
     border-radius: 5px 0 0 5px;
-    padding: 0 8px;
+    padding: 0 5px 0 8px;
     margin: 10px 0 10px 10px;
     font-size: 1rem;
     font-weight: bold;
diff --git a/src/css/tooltips.css b/src/css/tooltips.css
index 2b3250a..6acc109 100644
--- a/src/css/tooltips.css
+++ b/src/css/tooltips.css
@@ -24,7 +24,7 @@
     display: block;
     position: absolute;
     top: 133%;
-    left: -125%;
+    left: -134%;
     z-index: 500;
     pointer-events: none;
     padding: 5px;

From fdacd67307f2701339fcb2c7a445915a776a2cc1 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Sun, 28 Jan 2024 14:00:30 +0100
Subject: [PATCH 08/18] =?UTF-8?q?=F0=9F=94=A7Navbar=20now=20is=20always=20?=
 =?UTF-8?q?shown=20even=20when=20not=20logged=20in?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Also updated authScreen and logout button will hide when user is not logged in
---
 popup.html           |  4 ++--
 src/css/settings.css | 11 ++++++++++-
 src/js/main.js       | 21 ++++++---------------
 src/js/settings.js   | 11 ++++++++++-
 4 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/popup.html b/popup.html
index 6d57958..3bdf148 100644
--- a/popup.html
+++ b/popup.html
@@ -148,9 +148,9 @@ <h2 class="settings-header-text">Settings</h2>
                 <!-- Settings footer link -->
                 <div class="settings-footer">
                     <div class="footer-container">
-                        <a class="settings-link" href="https://github.com/yungsamd17/Twitch-Live" target="_blank">
+                        <a class="settings-link github" href="https://github.com/yungsamd17/Twitch-Live" target="_blank">
                             <i class="fab fa-github"></i> GitHub</a>
-                        <a class="settings-link" href="https://ko-fi.com/yungsamd17" target="_blank">
+                        <a class="settings-link donate" href="https://ko-fi.com/yungsamd17" target="_blank">
                             <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>
diff --git a/src/css/settings.css b/src/css/settings.css
index 53c9bd8..e3239c8 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -227,7 +227,7 @@ input:checked+.slider:before {
     width: 100%;
     font-size: 1rem;
     padding: 0 18px 18px 18px;
-    justify-content: space-between;
+    justify-content: center;
 }
 
 /*  SETTINGS LINK  */
@@ -252,6 +252,14 @@ input:checked+.slider:before {
     background-color: #9146ff;
 }
 
+.github {
+    margin-right: 9px;
+}
+
+.donate {
+    margin-left: 9px;
+}
+
 /*  LOGOUT BUTTON  */
 .logout-button {
     width: 30%;
@@ -263,6 +271,7 @@ input:checked+.slider:before {
     font-size: 14px;
     font-weight: bold;
     user-select: none;
+    margin-left: 18px;
 }
 
 .logout-button:hover {
diff --git a/src/js/main.js b/src/js/main.js
index 71043bf..fb6f83f 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -6,18 +6,7 @@ const authScreenPresent = () => {
     return contentSection.querySelector(".auth-header");
 };
 
-const setNavbar = (isVisible) => {
-    const navbar = document.querySelector(".navbar");
-    if (navbar) {
-        if (isVisible) navbar.style.display = "block";
-        else navbar.style.display = "none";
-    }
-};
-
 const authScreen = () => {
-    // Hide the navbar when creating the authentication screen
-    setNavbar(false);
-
     const authHeader = document.createElement("span");
     authHeader.setAttribute("class", "auth-header");
     authHeader.innerHTML = "Sam's Twitch ";
@@ -35,7 +24,12 @@ const authScreen = () => {
     const authButton = document.createElement("button");
     authButton.setAttribute("id", "auth-button");
     authButton.setAttribute("class", "auth-button");
-    authButton.innerHTML = "Login with Twitch";
+
+    const authButtonIcon = document.createElement("i");
+    authButtonIcon.setAttribute("class", "fa-brands fa-twitch");
+    authButton.appendChild(authButtonIcon);
+    authButton.innerHTML += "&nbsp;&nbsp;Login with Twitch";
+
     authButton.onclick = () => chrome.runtime.sendMessage({ message: "fetch-twitch-auth-token", popup: true });
     contentSection.appendChild(authButton);
 };
@@ -358,9 +352,6 @@ chrome.runtime.onMessage.addListener(async (request) => {
         const authElements = document.querySelectorAll("[class^=auth]");
         authElements.forEach((element) => element.remove());
 
-        // Show the navbar
-        setNavbar(true);
-
         await loadTwitchContent();
         setupAutoRefresh();
     }
diff --git a/src/js/settings.js b/src/js/settings.js
index 830c12f..bf59981 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -17,7 +17,7 @@ const getExtensionVersion = () => {
 
 // Retrieve the stored settings on popup load
 chrome.storage.local.get(
-    ["openInPlayerToggle", "openInNewWindowToggle", "showRaidButtonToggle", "customBadgeColor", "extensionVersion", "backgroundUpdateRateMin"],
+    ["openInPlayerToggle", "openInNewWindowToggle", "showRaidButtonToggle", "customBadgeColor", "extensionVersion", "backgroundUpdateRateMin", "twitchAccessToken"],
     (result) => {
         setToggleSwitchStatus(
             "openInPlayerToggle",
@@ -41,6 +41,15 @@ chrome.storage.local.get(
             versionElement.textContent = `v${getExtensionVersion()}`;
         }
         // console.log(`%cSam's Twitch Live v${getExtensionVersion()}`, "color: #a855f7");
+
+        // Check if the user is logged in
+        if (result.twitchAccessToken) {
+            // User is logged in, show the button
+            document.getElementById("logoutBtn").style.display = "block";
+        } else {
+            // User is not logged in, hide the button
+            document.getElementById("logoutBtn").style.display = "none";
+        }
     }
 );
 

From 98640f39bdd09ebce5c9a8062be8b32a23fee21e Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Sun, 28 Jan 2024 17:44:59 +0100
Subject: [PATCH 09/18] =?UTF-8?q?=F0=9F=94=A7=20Add=20timed=20alert=20to?=
 =?UTF-8?q?=20the=20"Copy=20raid=20command=20btn"=20#19?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/main.css | 15 +++++++++++++++
 src/js/main.js   | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/css/main.css b/src/css/main.css
index 4388b97..64a4eec 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -416,4 +416,19 @@ body {
 
 p {
     margin: 0;
+}
+
+.timed-alert {
+    position: fixed;
+    bottom: 15px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #9146ff;
+    color: #fff;
+    padding: 8px;
+    border-radius: 5px;
+    font-weight: bold;
+    white-space:nowrap;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+    z-index: 9999;
 }
\ No newline at end of file
diff --git a/src/js/main.js b/src/js/main.js
index fb6f83f..2b74e49 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -182,7 +182,34 @@ const loadTwitchContent = async () => {
                     raidButton.classList.add("hidden");
                 }
 
-                raidButton.addEventListener("click", (event) => {
+                // Function to show and hide timedAlert
+                const showTimedAlert = (message) => {
+                    const timedAlert = document.querySelector('.timed-alert');
+
+                    // Check if the timedAlert is currently visible
+                    if (timedAlert) {
+                        // Remove the timedAlert from the DOM
+                        document.body.removeChild(timedAlert);
+                    }
+
+                    // Create a new timedAlert
+                    const newTimedAlert = document.createElement("div");
+                    newTimedAlert.classList.add("timed-alert");
+                    newTimedAlert.innerHTML = message;
+
+                    document.body.appendChild(newTimedAlert);
+
+                    // Set a timeout to remove the alert after 2 seconds
+                    setTimeout(() => {
+                        // Check if the newTimedAlert is still a child of document.body before attempting to remove it
+                        if (document.body.contains(newTimedAlert)) {
+                            document.body.removeChild(newTimedAlert);
+                        }
+                    }, 2500);
+                };
+
+                // Inside the raidButton.addEventListener callback
+                raidButton.addEventListener("click", async (event) => {
                     event.stopPropagation();
                     // Handle raid button click - copy channel name with raid command
                     const raidCommand = `/raid ${stream.channelName}`;
@@ -200,6 +227,9 @@ const loadTwitchContent = async () => {
                     document.body.removeChild(textArea);
 
                     console.log(`Raid command copied to clipboard: ${raidCommand}`);
+
+                    // Call the helper function to show and hide the timedAlert
+                    showTimedAlert(`Copied "${raidCommand}"`);
                 });
 
                 channelContainer.appendChild(raidButton);

From 864fa03682ec078aa52442fe9f2fe27c930bfc8a Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Sun, 28 Jan 2024 17:54:05 +0100
Subject: [PATCH 10/18] =?UTF-8?q?=F0=9F=94=A7=20Janky=20way=20of=20updatin?=
 =?UTF-8?q?g=20logoutBtn=20if=20user=20is=20logged=20in=20or=20not?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/main.js     | 4 ++++
 src/js/settings.js | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/js/main.js b/src/js/main.js
index 2b74e49..360d1e2 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -283,6 +283,10 @@ const loadTwitchContent = async () => {
 
             contentSection.replaceChildren(noResultsMessage);
         }
+
+        // Show logout button after login/when logged in
+        document.getElementById("logoutBtn").style.display = "block";
+
     } else if (!res.twitchIsValidated || !res.twitchAccessToken) {
         authScreen();
     }
diff --git a/src/js/settings.js b/src/js/settings.js
index bf59981..d9f9a27 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -44,8 +44,8 @@ chrome.storage.local.get(
 
         // Check if the user is logged in
         if (result.twitchAccessToken) {
-            // User is logged in, show the button
-            document.getElementById("logoutBtn").style.display = "block";
+            // User is logged in
+            return
         } else {
             // User is not logged in, hide the button
             document.getElementById("logoutBtn").style.display = "none";

From e219b7e256b2df807cca657b73aa102f9c4a5ee6 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Tue, 30 Jan 2024 05:32:56 +0100
Subject: [PATCH 11/18] =?UTF-8?q?=F0=9F=94=A7Add=20link=20to=20release=20n?=
 =?UTF-8?q?otes=20for=20extension=20version=20in=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 popup.html           | 2 +-
 src/css/settings.css | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/popup.html b/popup.html
index 3bdf148..219f2dc 100644
--- a/popup.html
+++ b/popup.html
@@ -156,7 +156,7 @@ <h2 class="settings-header-text">Settings</h2>
                     </div>
                 </div>
                 <div class="version-container">
-                    <span id="extensionVersion">Loading extension version...</span>
+                    <a id="extensionVersion" href="https://github.com/yungsamd17/Twitch-Live/releases/latest" target="_blank" title="Click to view release notes">Loading extension version...</a>
                 </div>
             </div>
         </div>
diff --git a/src/css/settings.css b/src/css/settings.css
index e3239c8..161fe9f 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -335,4 +335,10 @@ input:checked+.slider:before {
 #extensionVersion {
     color: rgba(153, 153, 153, 0.5);
     font-weight: bold;
+    text-decoration: none;
+}
+
+#extensionVersion:hover {
+    color: #fff;
+    text-decoration: underline;
 }
\ No newline at end of file

From 2d53fbcc85fe0edb7ac28bffaab14b0dc4f98b88 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Tue, 30 Jan 2024 09:46:10 +0100
Subject: [PATCH 12/18] =?UTF-8?q?=F0=9F=94=A7Add=20"Simple=20view"=20strea?=
 =?UTF-8?q?ms=20layout=20option=20#22?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 popup.html           | 15 +++++++++++
 src/css/main.css     | 21 ++++++++++++---
 src/css/settings.css |  2 +-
 src/css/tooltips.css | 61 ++++++++++++++++++++++++++++++++++++++++++++
 src/js/main.js       | 10 +++++---
 src/js/settings.js   | 23 ++++++++++++++++-
 6 files changed, 124 insertions(+), 8 deletions(-)

diff --git a/popup.html b/popup.html
index 219f2dc..646693e 100644
--- a/popup.html
+++ b/popup.html
@@ -84,6 +84,21 @@ <h2 class="settings-header-text">Settings</h2>
                     </div>
                 </div>
                 <!-- Settings options -->
+                <div class="option-container">
+                    <div class="text-container">
+                        <label for="simpleViewToggle">Simple view
+                            <span info-label-3="Hides thumbnails and uptimes">
+                                <i class="fa-solid fa-circle-info"></i>
+                            </span>
+                        </label>
+                    </div>
+                    <div class="slider-container">
+                        <label class="switch">
+                            <input type="checkbox" id="simpleViewToggle">
+                            <span class="slider"></span>
+                        </label>
+                    </div>
+                </div>
                 <div class="option-container">
                     <div class="text-container">
                         <label for="openInNewWindowToggle">Open in a new window</label>
diff --git a/src/css/main.css b/src/css/main.css
index 64a4eec..9d6439c 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -188,17 +188,19 @@ body {
 
 .content {
     flex-direction: column;
-    width: 430px;
+    width: 420px;
     display: flex;
 }
 
 /*  STREAM "CARD" CLASSES */
 .stream-container {
     width: 100%;
+    height: 65px;
     cursor: pointer;
     border-top: 1px solid #242429;
     border-bottom: 1px solid #000;
     display: flex;
+    padding-left: 10px;
 }
 
 .stream-container:hover {
@@ -214,7 +216,7 @@ body {
     position: relative;
     width: 80px;
     height: 45px;
-    margin: 10px;
+    margin: 10px 10px 10px 0;
 }
 
 .stream-thumbnail img {
@@ -243,7 +245,7 @@ body {
 }
 
 .stream-details {
-    width: calc(100% - 7rem);
+    width: calc(100% - 6.25rem);
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -431,4 +433,17 @@ p {
     white-space:nowrap;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
     z-index: 9999;
+}
+
+/*  SIMPLE VIEW OPTION STYLES  */
+.simpleview-stream-container {
+    height: 59.2px;
+}
+
+.simpleview-stream-thumbnail {
+    display: none;
+}
+
+.simpleview-stream-details {
+    width: calc(100% - 0.65rem);
 }
\ No newline at end of file
diff --git a/src/css/settings.css b/src/css/settings.css
index 161fe9f..3400ead 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -18,7 +18,7 @@
     position: relative;
     background-color: #18181b;
     margin: 20px;
-    height: 360px;
+    height: 390px;
     border: 1px solid #242429;
     border-radius: 5px;
     display: flex;
diff --git a/src/css/tooltips.css b/src/css/tooltips.css
index 6acc109..fef2b64 100644
--- a/src/css/tooltips.css
+++ b/src/css/tooltips.css
@@ -372,6 +372,67 @@
     transition-delay: 0s;
 }
 
+/*  "Simple view" SETTINGS OPTION INFO TOOLTIP  */
+[info-label-3] {
+    position: relative;
+}
+
+[info-label-3]:after,
+[info-label-3]:before {
+    content: "";
+    position: absolute;
+    z-index: 500;
+    pointer-events: none;
+}
+
+[info-label-3]:after {
+    content: attr(info-label-3);
+    display: block;
+    position: absolute;
+    top: 174%;
+    left: -560%;
+    z-index: 500;
+    pointer-events: none;
+    padding: 5px;
+    line-height: 15px;
+    white-space: nowrap;
+    text-decoration: none;
+    text-indent: 0;
+    overflow: visible;
+    font-size: .8em;
+    font-weight: bold;
+    color: var(--tooltip-text);
+    background-color: var(--tooltip-background);
+    border-radius: 5px;
+    opacity: 0;
+}
+
+[info-label-3]:before {
+    content: "";
+    border-style: solid;
+    border-width: 0 8px 10px 8px;
+    border-color: transparent transparent var(--tooltip-background) transparent;
+    top: 23px;
+    right: 50%;
+    transform: translateX(50%);
+    opacity: 0;
+}
+
+[info-label-3]:hover:after {
+    opacity: 1;
+    transition-delay: 0.3s;
+}
+
+[info-label-3]:hover:before {
+    opacity: 1;
+    transition-delay: 0.3s;
+}
+
+[info-label-3]:not(:hover):after,
+[info-label-3]:not(:hover):before {
+    transition-delay: 0s;
+}
+
 
 /*  HIDDEN LABELS  */
 [settings-label].hidden-label:after,
diff --git a/src/js/main.js b/src/js/main.js
index 360d1e2..47c61b5 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -75,6 +75,10 @@ const loadTwitchContent = async () => {
     const storageItems = ["twitchIsValidated", "twitchAccessToken", "twitchStreams", "showRaidButtonToggle"];
     const res = await chrome.storage.local.get(storageItems);
 
+    // Check if Simple view is enabled
+    const simpleViewToggle = document.getElementById("simpleViewToggle");
+    const simpleViewEnabled = simpleViewToggle ? simpleViewToggle.checked : false;
+
     // Always refresh Twitch streams when the popup is opened
     await refreshTwitchStreams();
 
@@ -142,10 +146,10 @@ const loadTwitchContent = async () => {
         if (filteredStreams.length > 0) {
             const streamList = filteredStreams.map((stream) => {
                 const streamContainer = document.createElement("div");
-                streamContainer.setAttribute("class", "stream-container");
+                streamContainer.setAttribute("class", `stream-container ${simpleViewEnabled ? 'simpleview-stream-container' : ''}`);
 
                 const streamThumbnail = document.createElement("div");
-                streamThumbnail.setAttribute("class", "stream-thumbnail");
+                streamThumbnail.setAttribute("class", `stream-thumbnail ${simpleViewEnabled ? 'simpleview-stream-thumbnail' : ''}`);
                 streamContainer.appendChild(streamThumbnail);
 
                 const uptime = document.createElement("div");
@@ -161,7 +165,7 @@ const loadTwitchContent = async () => {
                 streamThumbnail.appendChild(thumbnail);
 
                 const streamDetails = document.createElement("div");
-                streamDetails.setAttribute("class", "stream-details");
+                streamDetails.setAttribute("class", `stream-details ${simpleViewEnabled ? 'simpleview-stream-details' : ''}`);
                 streamContainer.appendChild(streamDetails);
 
                 const channelContainer = document.createElement("div");
diff --git a/src/js/settings.js b/src/js/settings.js
index d9f9a27..a5007b9 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -17,8 +17,21 @@ const getExtensionVersion = () => {
 
 // Retrieve the stored settings on popup load
 chrome.storage.local.get(
-    ["openInPlayerToggle", "openInNewWindowToggle", "showRaidButtonToggle", "customBadgeColor", "extensionVersion", "backgroundUpdateRateMin", "twitchAccessToken"],
+    [
+        "simpleViewToggle",
+        "openInPlayerToggle",
+        "openInNewWindowToggle",
+        "showRaidButtonToggle",
+        "customBadgeColor",
+        "extensionVersion",
+        "backgroundUpdateRateMin",
+        "twitchAccessToken"
+    ],
     (result) => {
+        setToggleSwitchStatus(
+            "simpleViewToggle",
+            result.simpleViewToggle !== undefined ? result.simpleViewToggle : false
+        );
         setToggleSwitchStatus(
             "openInPlayerToggle",
             result.openInPlayerToggle !== undefined ? result.openInPlayerToggle : false
@@ -54,6 +67,11 @@ chrome.storage.local.get(
 );
 
 // Listen for changes in the toggle switches and store the settings
+document.getElementById("simpleViewToggle").addEventListener("change", function() {
+    setToggleSwitchStatus("simpleViewToggle", this.checked);
+    loadTwitchContent(); // Reload content based on the Simple view toggle
+});
+
 document.getElementById("openInPlayerToggle").addEventListener("change", function() {
     setToggleSwitchStatus("openInPlayerToggle", this.checked);
 });
@@ -77,6 +95,9 @@ chrome.storage.onChanged.addListener((changes) => {
     if (changes.showRaidButtonToggle !== undefined) {
         setToggleSwitchStatus("showRaidButtonToggle", changes.showRaidButtonToggle.newValue);
     }
+    if (changes.simpleViewToggle !== undefined) {
+        setToggleSwitchStatus("simpleViewToggle", changes.simpleViewToggle.newValue);
+    }
     if (changes.backgroundUpdateRateMin !== undefined) {
         backgroundRefreshSelect.value = changes.backgroundUpdateRateMin.newValue;
     }

From 20f491230f91d5d54e2f226ff4058f9d2807b81c Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Tue, 30 Jan 2024 09:46:36 +0100
Subject: [PATCH 13/18] =?UTF-8?q?=F0=9F=94=A7Update=20`info-label-2`=20too?=
 =?UTF-8?q?ltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 popup.html           | 2 +-
 src/css/tooltips.css | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/popup.html b/popup.html
index 646693e..ddd1c0e 100644
--- a/popup.html
+++ b/popup.html
@@ -124,7 +124,7 @@ <h2 class="settings-header-text">Settings</h2>
                 <div class="option-container">
                     <div class="text-container">
                         <label for="showRaidButtonToggle">Copy raid command button 
-                            <span info-label-2="Adds a copy button next to channel name.">
+                            <span info-label-2="Adds a copy button next to channel name">
                                 <i class="fa-solid fa-circle-info"></i>
                             </span>
                         </label>
diff --git a/src/css/tooltips.css b/src/css/tooltips.css
index fef2b64..7c6cd2b 100644
--- a/src/css/tooltips.css
+++ b/src/css/tooltips.css
@@ -311,7 +311,7 @@
     transition-delay: 0s;
 }
 
-/*  "Copy raid command button" SETTINGS OPTION INFO LINK TOOLTIP  */
+/*  "Copy raid command button" SETTINGS OPTION INFO TOOLTIP  */
 [info-label-2] {
     position: relative;
 }
@@ -329,7 +329,7 @@
     display: block;
     position: absolute;
     top: 174%;
-    left: -800%;
+    left: -790%;
     z-index: 500;
     pointer-events: none;
     padding: 5px;

From 43b30529d4c6e6ab136dadfc868060226b6a5ed9 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Tue, 30 Jan 2024 12:20:44 +0100
Subject: [PATCH 14/18] =?UTF-8?q?=F0=9F=94=A7Update=20uptime=20tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/main.js | 2 +-
 src/js/util.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/main.js b/src/js/main.js
index 47c61b5..cc4bb48 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -155,7 +155,7 @@ const loadTwitchContent = async () => {
                 const uptime = document.createElement("div");
                 uptime.setAttribute("class", "stream-uptime");
                 uptime.innerHTML = `${stream.liveTime}`;
-                uptime.setAttribute("title", `${stream.startedAt}`);
+                uptime.setAttribute("title", `Live since ${stream.startedAt}`);
                 streamThumbnail.appendChild(uptime);
 
                 const thumbnail = document.createElement("img");
diff --git a/src/js/util.js b/src/js/util.js
index da87a9b..f90f3ff 100644
--- a/src/js/util.js
+++ b/src/js/util.js
@@ -11,7 +11,7 @@ const getStartedAtTime = (startTime) => {
 
   const formattedTime = new Intl.DateTimeFormat('en-US', options)
     .format(new Date(startTime))
-    .replace(',', '');
+    // .replace(',', '');
 
   return formattedTime;
 };

From 81332322e9d2240e4114e3a9a9f0dcfda7a0b6a8 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Wed, 31 Jan 2024 13:34:52 +0100
Subject: [PATCH 15/18] =?UTF-8?q?=F0=9F=94=A7Pressing=20`f`=20in=20setting?=
 =?UTF-8?q?s=20will=20now=20only=20close=20modal=20when=20not=20in=20an=20?=
 =?UTF-8?q?input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/settings.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/js/settings.js b/src/js/settings.js
index a5007b9..38713f6 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -248,9 +248,13 @@ function closeModal() {
 
 // Close modal when the close button is clicked
 settingsCloseBtn.onclick = closeModal;
-// Close modal when the 'f' key is pressed
+// Close modal when the 'f' key is pressed, but not in an input field
 document.addEventListener('keydown', function(event) {
+    // Check if the 'f' key is pressed
     if (event.key.toLowerCase() === 'f') {
-        closeModal();
+        // Check if the event target is an input element, and if not close the modal
+        if (document.activeElement.tagName.toLowerCase() !== 'input') {s
+            closeModal();
+        }
     }
 });
\ No newline at end of file

From b2db8afb1ba7ede4ee77f71c05a6f9dd2379d2ba Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Wed, 31 Jan 2024 15:11:54 +0100
Subject: [PATCH 16/18] =?UTF-8?q?=F0=9F=94=A7Fix=20typo=20with=20pressing?=
 =?UTF-8?q?=20`f`=20to=20close=20settings=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/settings.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/js/settings.js b/src/js/settings.js
index 38713f6..a5e43df 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -250,10 +250,9 @@ function closeModal() {
 settingsCloseBtn.onclick = closeModal;
 // Close modal when the 'f' key is pressed, but not in an input field
 document.addEventListener('keydown', function(event) {
-    // Check if the 'f' key is pressed
     if (event.key.toLowerCase() === 'f') {
         // Check if the event target is an input element, and if not close the modal
-        if (document.activeElement.tagName.toLowerCase() !== 'input') {s
+        if (document.activeElement.tagName.toLowerCase() !== 'input') {
             closeModal();
         }
     }

From 713a0fd68c4f672a331fbd382522042980645daf Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Wed, 31 Jan 2024 16:36:06 +0100
Subject: [PATCH 17/18] =?UTF-8?q?=F0=9F=94=A7Update=20manifest=20and=20aut?=
 =?UTF-8?q?h.css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manifest.json    | 5 +++--
 src/css/auth.css | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/manifest.json b/manifest.json
index f1459b7..fba5c1b 100644
--- a/manifest.json
+++ b/manifest.json
@@ -16,7 +16,8 @@
         "storage",
         "identity"
     ],
-    "background": {
+    "background":
+    {
         "service_worker": "src/js/background.js"
     },
     "action":
@@ -24,4 +25,4 @@
         "default_title": "Sam's Twitch Live",
         "default_popup": "popup.html"
     }
-}
+}
\ No newline at end of file
diff --git a/src/css/auth.css b/src/css/auth.css
index 2a54109..2f7499d 100644
--- a/src/css/auth.css
+++ b/src/css/auth.css
@@ -16,7 +16,7 @@
     color: #a3a3a3;
     font-size: 0.9rem;
     margin-bottom: 15px;
-    padding: 0 40px;
+    padding: 0 34px;
 }
 
 .auth-text-after {

From 853cf847ed39be246e06a50f56be7d3dda446f61 Mon Sep 17 00:00:00 2001
From: yungsamd17 <yungsamd@proton.me>
Date: Wed, 31 Jan 2024 16:40:00 +0100
Subject: [PATCH 18/18] =?UTF-8?q?=E2=AC=86=EF=B8=8FVersion=20bump:=20v1.3.?=
 =?UTF-8?q?1?=
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 fba5c1b..351396b 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.3.0",
+    "version": "1.3.1",
     "author": "Sam @yungsamd17",
     "homepage_url": "https://github.com/yungsamd17/Twitch-Live",
     "icons":