From b83ad404909600feb6c9f7a111f2a19bc69cb652 Mon Sep 17 00:00:00 2001
From: rainbow napkin <ourforest@tuta.io>
Date: Wed, 28 Oct 2026 22:26:58 -0400
Subject: [PATCH] Started work on porting improvements from admin panel to
 channel settings

---
 src/views/channelSettings.ejs                 | 26 +++--
 src/views/partial/channelSettings/banList.ejs |  2 +-
 .../partial/channelSettings/emoteList.ejs     |  2 +-
 src/views/partial/channelSettings/info.ejs    |  2 +-
 .../partial/channelSettings/permList.ejs      |  2 +-
 .../partial/channelSettings/settings.ejs      |  2 +-
 .../channelSettings/tokeCommandList.ejs       |  2 +-
 .../partial/channelSettings/userList.ejs      |  2 +-
 www/css/theme/movie-night.css                 |  2 +-
 www/css/theme/the-network-classic.css         |  2 +-
 www/js/channelSettings.js                     | 94 +++++++++++++++----
 www/popup/nukeChannel.html                    |  2 +-
 12 files changed, 104 insertions(+), 36 deletions(-)

diff --git a/src/views/channelSettings.ejs b/src/views/channelSettings.ejs
index 811a501..e5b5dc3 100644
--- a/src/views/channelSettings.ejs
+++ b/src/views/channelSettings.ejs
@@ -24,17 +24,23 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
     </head>
     <body>
         <%- include('partial/navbar', {user}); %>
-        <h1 class="panel-title"><%= unescape(channel.name) %> - Channel Settings</h1>
-        <div class="admin-panel-container-div">
-            <%- include('partial/channelSettings/info.ejs', {unescape, channel}); %>
-            <%- include('partial/channelSettings/userList.ejs'); %>
-            <%- include('partial/channelSettings/banList.ejs'); %>
-            <%- include('partial/channelSettings/settings.ejs', {unescape, channel}); %>
-            <%- include('partial/channelSettings/permList.ejs', {channel}); %>
-            <%- include('partial/channelSettings/tokeCommandList.ejs'); %>
-            <%- include('partial/channelSettings/emoteList.ejs'); %>
+        <div id="admin-panel-list-container">
+            <div id="admin-nav-list">
+            </div>
+
+            <div class="admin-panel-container-div">
+                <h1 class="panel-title"><%= unescape(channel.name) %> - Channel Settings</h1>
+                <div class="admin-panel-container-div">
+                    <%- include('partial/channelSettings/info.ejs', {unescape, channel}); %>
+                    <%- include('partial/channelSettings/userList.ejs'); %>
+                    <%- include('partial/channelSettings/banList.ejs'); %>
+                    <%- include('partial/channelSettings/settings.ejs', {unescape, channel}); %>
+                    <%- include('partial/channelSettings/permList.ejs', {channel}); %>
+                    <%- include('partial/channelSettings/tokeCommandList.ejs'); %>
+                    <%- include('partial/channelSettings/emoteList.ejs'); %>
+                </div>
+            </div>
         </div>
-        <button href="javascript:" class="danger-button" id="chan-delete">Delete Channel</button>
         <footer>
             <%- include('partial/scripts', {user}); %>
             <script src="/js/popup/banPopup.js"></script>
diff --git a/src/views/partial/channelSettings/banList.ejs b/src/views/partial/channelSettings/banList.ejs
index 1ae523b..ceeffa8 100644
--- a/src/views/partial/channelSettings/banList.ejs
+++ b/src/views/partial/channelSettings/banList.ejs
@@ -13,7 +13,7 @@ GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
-<div class="admin-list-div">
+<div class="admin-list-div" id="chan-ban-list">
     <h3 id="channel-ban-title">Channel Bans:</h3>
     <div class="control-prompt">
         <input placeholder="Add Username..." id="new-ban-input" class="control-prompt">
diff --git a/src/views/partial/channelSettings/emoteList.ejs b/src/views/partial/channelSettings/emoteList.ejs
index ba94793..670df79 100644
--- a/src/views/partial/channelSettings/emoteList.ejs
+++ b/src/views/partial/channelSettings/emoteList.ejs
@@ -13,7 +13,7 @@ GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
-<div id="emote-list-div" class="admin-list-div">
+<div id="chan-emote-list" class="admin-list-div">
     <h3>Emote List:</h3>
     <div class="control-prompt">
         <%# Probably not the cleanest way to do this but fuggit %>
diff --git a/src/views/partial/channelSettings/info.ejs b/src/views/partial/channelSettings/info.ejs
index 3dc62a3..b3bdc29 100644
--- a/src/views/partial/channelSettings/info.ejs
+++ b/src/views/partial/channelSettings/info.ejs
@@ -13,7 +13,7 @@ GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
-<div class="admin-list-div">
+<div class="admin-list-div" id="chan-info-list">
     <h3 id="channel-info-title">Channel Info:</h3>
     <div class="dynamic-container" id="channel-info-div">
         <span class="channel-info-span" id="channel-info-thumbnail-span">
diff --git a/src/views/partial/channelSettings/permList.ejs b/src/views/partial/channelSettings/permList.ejs
index b2b583f..bd4006d 100644
--- a/src/views/partial/channelSettings/permList.ejs
+++ b/src/views/partial/channelSettings/permList.ejs
@@ -13,7 +13,7 @@ GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
-<div class="admin-list-div">
+<div class="admin-list-div" id="chan-perm-list">
     <h3> Permissions:</h3>
     <div class="dynamic-container">
         <form action="javascript:" class="admin-list-field">
diff --git a/src/views/partial/channelSettings/settings.ejs b/src/views/partial/channelSettings/settings.ejs
index 52f48e7..1ffcbbd 100644
--- a/src/views/partial/channelSettings/settings.ejs
+++ b/src/views/partial/channelSettings/settings.ejs
@@ -13,7 +13,7 @@ GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
-<div class="admin-list-div">
+<div class="admin-list-div" id="chan-settings-list">
     <h3>Channel Preferences:</h3>
     <div class="dynamic-container">
         <form action="javascript:" class="admin-list-field">
diff --git a/src/views/partial/channelSettings/tokeCommandList.ejs b/src/views/partial/channelSettings/tokeCommandList.ejs
index 5bc5afb..6a28645 100644
--- a/src/views/partial/channelSettings/tokeCommandList.ejs
+++ b/src/views/partial/channelSettings/tokeCommandList.ejs
@@ -13,7 +13,7 @@ GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
-<div id="toke-command-list-div" class="admin-list-div">
+<div id="chan-toke-list" class="admin-list-div">
     <h3>Toke Command List:</h3>
     <div class="control-prompt">
         !<input placeholder="Add Command..." id="new-toke-command-input" class="control-prompt">
diff --git a/src/views/partial/channelSettings/userList.ejs b/src/views/partial/channelSettings/userList.ejs
index 6ac5ee1..4d85802 100644
--- a/src/views/partial/channelSettings/userList.ejs
+++ b/src/views/partial/channelSettings/userList.ejs
@@ -13,7 +13,7 @@ GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
-<div class="admin-list-div">
+<div class="admin-list-div" id="chan-user-list">
     <h3 id="channel-rank-title">Channel Ranks:</h3>
     <sup id="channel-rank-sup">Users set to default channel rank 'user' will NOT be listed below.</sup>
     <div class="control-prompt">
diff --git a/www/css/theme/movie-night.css b/www/css/theme/movie-night.css
index 1ba4769..053356f 100644
--- a/www/css/theme/movie-night.css
+++ b/www/css/theme/movie-night.css
@@ -284,7 +284,7 @@ a.admin-list-entry-item{
     border-bottom: 1px var(--accent1) solid;
 }
 
-#admin-nav-list button:not(.positive-button, :hover){
+#admin-nav-list button:not(.positive-button, :hover, .danger-button){
     background-color: var(--bg1);
     color: var(--accent1);
 }
diff --git a/www/css/theme/the-network-classic.css b/www/css/theme/the-network-classic.css
index 48273b3..b0edd61 100644
--- a/www/css/theme/the-network-classic.css
+++ b/www/css/theme/the-network-classic.css
@@ -304,7 +304,7 @@ a.admin-list-entry-item{
     border-bottom: 1px var(--accent1) solid;
 }
 
-#admin-nav-list button:not(.positive-button, :hover){
+#admin-nav-list button:not(.positive-button, :hover, .danger-button){
     background-image: var(--bg1-gradient);
 }
 
diff --git a/www/js/channelSettings.js b/www/js/channelSettings.js
index a048b76..bf23907 100644
--- a/www/js/channelSettings.js
+++ b/www/js/channelSettings.js
@@ -27,7 +27,83 @@ class channelSettingsPage{
         this.livestreamPreferences = new livestreamPreferences(this.channel);
         this.tokeCommandList = new tokeCommandList(this.channel);
         this.emoteList = new emoteList(this.channel);
-        this.deleteBtn = new deleteBtn(this.channel);
+
+        //Setup nav buttons
+        this.navButtons = new chanAdminNavButtons(this.channel);
+    }
+}
+
+class chanAdminNavButtons{
+    constructor(channel){
+        //Take down channel
+        this.channel = channel;
+        //Grab nav list
+        this.navList = document.querySelector("#admin-nav-list");
+        //Create empty map to do a holdem buttons
+        this.buttons = new Map();
+
+        //Build out options map
+        this.options = new Map([
+            ["Channel Info", document.querySelector("#chan-info-list")],
+            ["Ranked Users", document.querySelector("#chan-user-list")],
+            ["Bans", document.querySelector("#chan-ban-list")],
+            ["Preferences", document.querySelector("#chan-settings-list")],
+            ["Permissions", document.querySelector("#chan-perm-list")],
+            ["Toke Commands", document.querySelector("#chan-toke-list")],
+            ["Emotes", document.querySelector("#chan-emote-list")],
+            ["Delete Channel", null]
+        ]);
+ 
+        //Render out buttons
+        this.renderButtons();
+        //Select the first option in the options map
+        this.displayOption(Array.from(this.options.keys())[0]);
+    }
+
+    renderButtons(){
+        //For erry list in the admin panel
+        for(const option of this.options.keys()){
+            //Create a button for it 
+            const button = document.createElement('button');
+            button.innerText = option;
+
+            //If this aint the Delete Channel button
+            if(option != "Delete Channel"){
+                //Attatch an event listener to handle users clickin' der button
+                button.addEventListener('click',()=>{this.displayOption(option)});
+            }else{
+                //Attatch an event listener to blaire the fuckin' defcon five nukem alarm
+                button.addEventListener('click', () => {new deleteChannelPopup(this.channel)});
+
+                button.classList.add('danger-button');
+            }
+
+            //Drop button in the buttons map
+            this.buttons.set(option, button);
+
+            //Add that shit
+            this.navList.appendChild(button);
+        }
+    }
+
+    displayOption(selectedOption){
+        //For every option
+        for(const option of this.options.keys()){
+            //If this is the Delete Channel button
+            if(option == "Delete Channel"){
+                //ignorem
+                break;
+            }
+
+            //If we're on the selected option
+            if(option == selectedOption){
+                this.options.get(option).style.display = 'flex';
+                this.buttons.get(option).classList.add('positive-button');
+            }else{
+                this.options.get(option).style.display = 'none';
+                this.buttons.get(option).classList.remove('positive-button');
+            }
+        }
     }
 }
 
@@ -659,21 +735,7 @@ class emoteList{
     }
 }
 
-class deleteBtn{
-    constructor(channel){
-        this.channel = channel;
-        this.delete = document.querySelector("#chan-delete");
-    
-        this.setupInput();
-    }
-
-    setupInput(){
-        this.delete.addEventListener('click', () => {new deleteAccountPopup(this.channel)});
-    }
-
-}
-
-class deleteAccountPopup{
+class deleteChannelPopup{
     constructor(channel){
         this.channel = channel;
         this.popup = new canopyUXUtils.popup("nukeChannel", true, this.asyncConstructor.bind(this));
diff --git a/www/popup/nukeChannel.html b/www/popup/nukeChannel.html
index 861cd78..78d0545 100644
--- a/www/popup/nukeChannel.html
+++ b/www/popup/nukeChannel.html
@@ -16,7 +16,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
 <link rel="stylesheet" type="text/css" href="/css/popup/delete.css">
 <h3 id="delete-channel-popup-title" class="popup-title">Delete Channel</h3>
 <div>
-    <p id="delete-channel-popup-content">WARNING: You are about to nuke channel '[CHANNEL]' off of the face of the fucking planet.<br>
+    <p id="delete-channel-popup-content">WARNING: You are about to nuke the channel '[CHANNEL]' off of the face of the fucking planet.<br>
     Enter '[CHANNEL]' below to confirm:</p>
     <span id="delete-channel-popup-prompt-span">
         <input type="text" id="delete-channel-popup-prompt">