Added alt-detection. Just need to set up pre-delete for userModel function to remove refrences to itself on alt accounts

www/css/global.css

@@ -74,6 +74,13 @@ div.dynamic-container{
     user-select: none;
 }
 
+.seperator{
+    display: block;
+    width: 100%;
+    height: 1px;
+    margin: 0.5em 0;
+}
+
 /* Navbar */
 #navbar{
     display: flex;
@@ -141,4 +148,17 @@ p.navbar-item, input.navbar-item{
 
 .popup-title{
     margin-top: 0;
+}
+
+/* tooltip */
+div.tooltip{
+    position: fixed;
+    pointer-events: all;
+    min-width: 1em;
+    min-height: 1em;
+    padding: 0.5em;
+}
+
+p.tooltip, h3.tooltip{
+    margin: 0 auto;
 }

www/css/panel/emote.css

@@ -1,3 +1,18 @@
+/*Canopy - The next generation of stoner streaming software
+Copyright (C) 2024  Rainbownapkin and the TTN Community
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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/>.*/
 .title-span{
     display: flex;
     flex-direction: row;

www/css/theme/movie-night.css

@@ -188,6 +188,11 @@ input.control-prompt, input.control-prompt:focus{
     outline: none;
 }
 
+
+.seperator{
+    background-color: var(--accent0);
+}
+
 /* navbar */
 #navbar{
     background-color: var(--bg1);
@@ -344,6 +349,15 @@ select.panel-head-element{
     color: var(--danger0);
 }
 
+/* tooltip */
+div.tooltip{
+    background-color: var(--bg1);
+    color: var(--accent1);
+    border: 1px solid var(--accent1);
+    box-shadow: 4px 4px 1px var(--bg1-alt0) inset;
+    border-radius: 1em;
+}
+
 /* panel */
 .title-filler-span{
     background-color: var(--accent0);

www/js/adminPanel.js

@@ -265,6 +265,7 @@ class canopyAdminUtils{
 
 class adminUserList{
     constructor(){
+        this.userNames = document.querySelectorAll(".admin-user-list-name");
         this.rankSelectors = document.querySelectorAll(".admin-user-list-rank-select");
         this.banIcons = document.querySelectorAll(".admin-user-list-ban-icon");
 
@@ -272,13 +273,33 @@ class adminUserList{
     }
 
     setupInput(){
-        this.rankSelectors.forEach((rankSelector)=>{
-            rankSelector.addEventListener("change", this.setRank.bind(this))
-        });
+        for(let userName of this.userNames){
+            //Splice username out of class name
+            const name = userName.id.replace('admin-user-list-name-','');
 
-        this.banIcons.forEach((banIcon) => {
+            //When the mouse starts to hover
+            userName.addEventListener('mouseenter',(event)=>{
+                //Create the tooltip
+                const tooltip = new canopyUXUtils.tooltip(`altList?user=${name}`, true);
+
+                //Do intial mouse move
+                tooltip.moveToMouse(event);
+                
+                //Move the tooltip with the mouse
+                userName.addEventListener('mousemove', tooltip.moveToMouse.bind(tooltip));
+
+                //remove the tooltip on mouseleave
+                userName.addEventListener('mouseleave', tooltip.remove.bind(tooltip));
+            });
+        }
+
+        for(let rankSelector of this.rankSelectors){
+            rankSelector.addEventListener("change", this.setRank.bind(this))
+        }
+
+        for(let banIcon of this.banIcons){
             banIcon.addEventListener("click", this.banPopup.bind(this));
-        })
+        }
     }
 
     async setRank(event){

www/js/profile.js

@@ -160,7 +160,6 @@ class tokeList{
         this.tokeList = document.querySelector('#profile-tokes');
         this.tokeListLabel = document.querySelector('.profile-toke-count');
         this.tokeListToggleIcon = document.querySelector('#toggle-toke-list');
-        console.log(this.tokeList)
 
         this.setupInput();
     }

www/js/utils.js

@@ -98,6 +98,80 @@ class canopyUXUtils{
         return entryRow;
     }
 
+    static tooltip = class{
+        constructor(content, ajaxTooltip = false, cb){
+            //Define non-tooltip node values
+            this.content = content;
+            this.ajaxPopup = ajaxTooltip;
+            this.cb = cb;
+            this.id = Math.random();
+
+            //create and append tooltip
+            this.tooltip = document.createElement('div');
+            this.tooltip.classList.add('tooltip');
+
+            //Display tooltip even if it's not loaded to prevent removal of unloaded tooltips
+            this.displayTooltip();
+
+            //Fill the tooltip
+            this.fillTooltipContent();
+        }
+
+        async fillTooltipContent(){
+            if(this.ajaxPopup){
+                this.tooltip.textContent = "Loading tooltip..."
+                this.tooltip.innerHTML = await utils.ajax.getTooltip(this.content);
+            }else{
+                this.tooltip.innerHTML = this.content;
+            }
+
+            if(this.cb){
+                //Callbacks are kinda out of vogue, but there really isn't a good way to handle asynchronously constructed objects/classes
+                this.cb();
+            }
+        }
+
+        displayTooltip(){
+            document.body.appendChild(this.tooltip);
+        }
+
+        moveToPos(x,y){
+            //If the distance between the left edge of the window - the window width is more than the width of our tooltip
+            if((window.innerWidth - (window.innerWidth - x)) > this.tooltip.getBoundingClientRect().width){
+                //Push it to the right edge of the cursor, where the hard edge typically is
+                this.tooltip.style.right = `${window.innerWidth - x}px`;
+                this.tooltip.style.left = '';
+            //otherwise, if we're close to the edge
+            }else{
+                //push it away from the edge of the screen
+                this.tooltip.style.right = ''
+                this.tooltip.style.left = `${x}px`
+            }
+
+
+            //If the distance between the top edge of the window - the window height is more than the heigt of our tooltip
+            if((window.innerHeight - (window.innerHeight - y)) > this.tooltip.getBoundingClientRect().height){
+                //Push it above the mouse
+                this.tooltip.style.bottom = `${window.innerHeight - y}px`;
+                this.tooltip.style.top = '';
+            //otherwise if we're close to the edge
+            }else{
+                //Push it below the mouse to avoid the top edge of the screen
+                //-50px to account for a normal sized cursor
+                this.tooltip.style.bottom = '';
+                this.tooltip.style.top = `${y+15}px`;
+            }
+
+        }
+
+        moveToMouse(event){
+            this.moveToPos(event.clientX, event.clientY)
+        }
+
+        remove(){
+            this.tooltip.remove();
+        }
+    }
 
     static popup = class{
         constructor(content, ajaxPopup = false, cb){
@@ -468,6 +542,18 @@ class canopyAjaxUtils{
         }
     }
 
+    async getTooltip(tooltip){
+        var response = await fetch(`/tooltip/${tooltip}`,{
+            method: "GET"
+        });
+
+        if(response.status == 200){
+            return (await response.text())
+        }else{
+            utils.ux.displayResponseError(await response.json());
+        }
+    }
+
     async getChanBans(chanName){
         var response = await fetch(`/api/channel/ban?chanName=${chanName}`,{
             method: "GET",