Finished up with toke command list in admin panel.

www/css/adminPanel.css

@@ -20,7 +20,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 }
 
 .admin-panel-container-div{
-    margin: 0 auto;
+    margin: 0 auto 5em;
     max-width: 100%;
 }
 
@@ -100,4 +100,33 @@ img.admin-list-entry-item{
 
 #admin-ban-list-entry-expiration-date-title{
     width: 11em;
+}
+
+#toke-command-list-div{
+    /*Maybe I suck at CSS but I can't get relative percentage-based heights to play nice here.
+    Either way sizing this by total viewheight isn't too big a deal. At least here...*/
+    min-height: 9em;
+    max-height: 20vh;
+}
+
+div.toke-command-list{
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
+    text-align: center;
+    padding: 1em;
+    overflow-y: auto;
+}
+
+span.toke-command-list{
+    display: flex;
+}
+
+p.toke-command-list{
+    white-space: nowrap;
+    flex: 1;
+    margin: auto 0;
+}
+
+i.toke-command-list{
+    margin: 0.2em;
 }

www/css/channel.css

@@ -13,6 +13,9 @@ 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/>.*/
+body{
+    height: 100%;
+}
 
 div#channel-flexbox{
     flex: 1;

www/css/global.css

@@ -20,11 +20,10 @@ html{
 }
 
 body{
-    height: 100%;
+    min-height: 100%;
     margin: 0;
     display: flex;
     flex-direction: column;
-    
 }
 
 form{

www/js/adminPanel.js

@@ -390,7 +390,89 @@ class adminUserBanList{
     }
 }
 
+class adminTokeCommandList{
+    constructor(){
+        this.tokeCommandList = document.querySelector('div.toke-command-list');
+        this.newTokeCommandPrompt = document.querySelector('#new-toke-command-input');
+        this.newTokeCommandButton = document.querySelector('#new-toke-command-button');
+
+        //Setup input
+        this.setupInput();
+
+        //Pull the toke list on load
+        this.getTokeList();
+    }
+
+    setupInput(){
+        this.newTokeCommandButton.addEventListener('click', this.addToke.bind(this));
+    }
+
+    async addToke(event){
+        //Send out the new toke command and get the new list
+        const tokeList = await adminUtil.addTokeCommand(this.newTokeCommandPrompt.value);
+        //clear the prompt
+        this.newTokeCommandPrompt.value = "";
+        //render the returned list
+        this.renderTokeList(tokeList);
+    }
+
+    async getTokeList(){
+        const tokeList = await adminUtil.getTokeCommands();
+        this.renderTokeList(tokeList);
+    }
+
+    clearTokeList(){
+        this.tokeCommandList.innerHTML = "";
+    }
+
+    async deleteToke(event){
+        const name = event.target.id.replace("toke-command-delete-","");
+
+        const tokeList = await adminUtil.deleteTokeCommand(name);
+
+        this.renderTokeList(tokeList);
+    }
+
+    renderTokeList(tokeList){
+        if(tokeList != null){
+            //Clear our the toke list
+            this.clearTokeList();
+
+            //For each toke in the received list
+            tokeList.forEach((toke)=>{
+                //generate a toke command span, and append it to the toke list div
+                this.tokeCommandList.appendChild(this.generateTokeSpan(toke));
+            });
+        }
+    }
+
+    generateTokeSpan(toke){
+        //Create toke command span
+        const tokeSpan = document.createElement('span');
+        tokeSpan.classList.add('toke-command-list');
+
+        //Create toke command label
+        const tokeLabel = document.createElement('p');
+        tokeLabel.innerHTML = `!${toke}`;
+        tokeLabel.classList.add('toke-command-list');
+
+        //Create toke command delete icon
+        const tokeDelete = document.createElement('i');
+        tokeDelete.classList.add('toke-command-list', 'bi-trash-fill', 'toke-command-delete');
+        tokeDelete.id = `toke-command-delete-${toke}`;
+        tokeDelete.addEventListener('click', this.deleteToke.bind(this));
+
+        //append span contents to tokeSpan
+        tokeSpan.appendChild(tokeLabel);
+        tokeSpan.appendChild(tokeDelete);
+
+        //return the toke span
+        return tokeSpan
+    }
+}
+
 const adminUtil = new canopyAdminUtils();
 const userList = new adminUserList();
 const permissionList = new adminPermissionList();
-const userBanList = new adminUserBanList();
+const userBanList = new adminUserBanList();
+const tokeCommandList = new adminTokeCommandList();