Finished re-working navbar

src/controllers/navRender.js

@@ -19,6 +19,7 @@ const config = require('../../config.json');
 
 //Local Imports
 const csrfUtils = require('../utils/csrfUtils');
+const presenceUtils = require('../utils/presenceUtils');
 
 /* You could make the argument this should be middleware that passes a properties object to user
    But then I'd writing out all the other controllers properties as I am below, or worse. Not a great option.*/ 
@@ -30,6 +31,7 @@ module.exports.render = async function(req, res, template, properties = {}){
     properties.links = config.links;
     properties.user = req.session.user
     properties.csrfToken = csrfUtils.generateToken(req)
+    properties.userCount = (await presenceUtils.getOnlineUsers()).length;
 
     //Render out template, passing given properties with navbar required properties added
     return res.render(template, properties);

src/utils/presenceUtils.js

@@ -28,6 +28,26 @@ const tolerance = 2 * (60 * 1000);
 //Defaults to five minutes
 const offlineTimeout = 5 * (60 * 1000);
 
+module.exports.getOnlineUsers = async function(){
+    //Define array to hold list of online users
+    const users = [];
+
+    //Iterate through all users in the RAM-Backed activity map (only ones that would be online)
+    for(const key of Array.from(activityMap.keys())){
+        //Grab current user, should grab from ram since we're polling activityMap
+        const user = await module.exports.getPresence(key);
+
+        //If the user is online
+        if(user.status == "Streaming" || user.status == "Recently Active"){
+            //Addem' to da list
+            users.push(user);
+        }
+    }
+
+    //Return all found users
+    return users;
+}
+
 module.exports.getPresence = async function(user, userDB){
     //If we don't have a user
     if(user == null || user == '' || user == 'Tokebot'){
@@ -44,7 +64,7 @@ module.exports.getPresence = async function(user, userDB){
 
     //If we couldn't find anything in RAM
     if(activity == null){
-        //If we wheren't handed a free user doc
+        //If we wheren't handed a free user doc, and we're allowed to pull from DB
         if(userDB == null){
             //Pull one from the username
             userDB = await userModel.findOne({user: user});

src/views/partial/navbar.ejs

@@ -14,28 +14,33 @@ 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="navbar">
-    <span class="navbar-item">
+    <span class="navbar-item" id="left-navbar-cluster">
         <%#<a class="navbar-item" href="/" id="instance-title">%><%#= instance %><%#</a><p class="navbar-item"> - <a class="navbar-item" href="/about">about</a></p>%>
         <a class="navbar-item" href="/" id="instance-title"><%= instance %></a>
-        <p class="navbar-item" id="right-controls">
+        <p class="navbar-item" id="left-controls">
-                <span class="navbar-item-seperator first"> - </span><a class="navbar-item first" href="javascript:">Channel Guide</a>
+            <span class="navbar-item-seperator first"> - </span>
+            <a class="navbar-item first" href="javascript:">Channel Guide</a>
             <% for(link of Object.keys(links)){ %>
-                <span class="navbar-item-seperator"> - </span><a target="_blank" class="navbar-item" href="<%- links[link] %>"><%= link %></a>
+                 - 
+                <a target="_blank" class="navbar-item" href="<%- links[link] %>"><%= link %></a>
             <% } %>
         </p>
     </span>
-    <span class="navbar-item" id="right-controls">
+    <span class="navbar-item" id="right-navbar-cluster">
         <% if(user){ %>
-            <p class="navbar-item">Welcome, <a class="navbar-item" id="username" href="/profile"><%= user.user %></a> - 
+            <p class="navbar-item" id="right-controls">
+                Welcome, <a class="navbar-item" id="username" href="/profile"><%= user.user %></a> - 
+                <span class="navbar-item" title="<%- userCount %> User<% if(userCount > 1){ %>s<% } %> Online site-wide">
+                    <%- userCount %> User<% if(userCount > 1){ %>s<% } %> Online
+                </span>
+                 -
                 <% if(user.rank == "mod" || user.rank == "admin"){ %>
                     <a target="_blank" href="/adminPanel" title="Admin Panel" class="bi bi-server navbar-item"></a> - 
                 <% } %> 
-
                 <span id="channel-settings-button-span" class="navbar-item" style="display: none;">
                     <a target="_blank" href="" title="Channel Settings" class="bi bi-projector-fill navbar-item"></a>
                      - 
                     </span>
-
                 <a class="navbar-item" href="javascript:" id="logout-button">Logout</a>
             </p>
         <% }else{ %>
@@ -43,7 +48,12 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
             <input class="navbar-item login-prompt" id="remember-me" type="checkbox">
             <input class="navbar-item login-prompt" id="username-prompt" placeholder="username">
             <input class="navbar-item login-prompt" id="password-prompt" placeholder="password" type="password">
-            <p class="navbar-item"><a class="navbar-item" href="javascript:" id="login-button">Login</a> - <a class="navbar-item" href="/passwordReset">Forgot Password</a> - <a class="navbar-item" href="/register">Register</a>
+            <p class="navbar-item">
+                <a class="navbar-item" href="javascript:" id="login-button">Login</a>
+                 - 
+                <a class="navbar-item" href="/passwordReset">Forgot Password</a>
+                 - 
+                <a class="navbar-item" href="/register">Register</a>
             </p>
         <% } %>
     </span>

www/css/global.css

@@ -92,6 +92,8 @@ button i{
     display: flex;
     padding: 0 0.5em;
     justify-content: space-between;
+    height: 2.45em;
+    align-items: center;
 }
 
 .navbar-item{
@@ -102,6 +104,12 @@ button i{
 
 #instance-title{
     font-size: 1.2em;
+    padding-right: 0.25em;
+}
+
+#right-navbar-cluster, #left-navbar-cluster{
+    display: flex;
+    align-items: center;
 }
 
 p.navbar-item, input.navbar-item{
@@ -110,6 +118,7 @@ p.navbar-item, input.navbar-item{
 
 .navbar-item input{
     padding: 0.2em;
+    margin-right: 0.5em;
 }
 
 /* Popup Container */

www/css/theme/the-network-classic.css

@@ -320,6 +320,7 @@ input.control-prompt, input.control-prompt:focus{
 /* navbar */
 #navbar{
     background-image: var(--bg1-gradient);
+    overflow: hidden;
 }
 
 .navbar-item{
@@ -337,7 +338,7 @@ input.control-prompt, input.control-prompt:focus{
 }
 
 .navbar-item.first{
-    margin-left: 0.25em;
+    margin-left: 0.5em;
 }
 
 .navbar-item-seperator.first{