From 0b3a35c4b619f973f2161a07577bdb9747e4262e Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Mon, 6 Feb 2023 13:48:18 +0530
Subject: [PATCH] Make the tabs container a class, to make it reusable for
 other tab groups

---
 ui/index.html                         | 2 +-
 ui/media/css/main.css                 | 2 +-
 ui/media/js/main.js                   | 3 +++
 ui/plugins/ui/release-notes.plugin.js | 2 +-
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 79fd38a6..a5329771 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -32,7 +32,7 @@
             <div id="server-status-color">●</div>
             <span id="server-status-msg">Stable Diffusion is starting..</span>
         </div>
-        <div id="tab-container">
+        <div class="tab-container">
             <span id="tab-main" class="tab active">
                 <span><i class="fa fa-image icon"></i> Generate</span>
             </span>
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 68f067b8..c9f0a84a 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -1029,7 +1029,7 @@ input::file-selector-button {
 }
 
 /* TABS */
-#tab-container {
+.tab-container {
     display: flex;
     align-items: flex-end;
 }
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 6741af38..dd4211fb 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -1466,6 +1466,9 @@ function linkTabContents(tab) {
 
     tab.addEventListener("click", event => selectTab(tab.id))
 }
+function isTabActive(tab) {
+    return tab.classList.contains("active")
+}
 
 let pauseClient = false
 
diff --git a/ui/plugins/ui/release-notes.plugin.js b/ui/plugins/ui/release-notes.plugin.js
index 5212c085..da7b79de 100644
--- a/ui/plugins/ui/release-notes.plugin.js
+++ b/ui/plugins/ui/release-notes.plugin.js
@@ -9,7 +9,7 @@
         }
     }
 
-    document.querySelector('#tab-container')?.insertAdjacentHTML('beforeend', `
+    document.querySelector('.tab-container')?.insertAdjacentHTML('beforeend', `
         <span id="tab-news" class="tab">
             <span><i class="fa fa-bolt icon"></i> What's new?</span>
         </span>