From f01c75d73c1a3f36db6bc61ab2edeeb7ed65d520 Mon Sep 17 00:00:00 2001
From: MathMan05 <mathmanrm@gmail.com>
Date: Mon, 27 May 2024 20:13:08 -0500
Subject: [PATCH] Unread Channels support

Added support for unread channels, along with a few bug fixes
---
 webpage/channel.js   | 53 +++++++++++++++++++++++++++++++++++++++++++-
 webpage/guild.js     | 21 ++++++++++++++++++
 webpage/index.js     | 22 +++++++++++-------
 webpage/localuser.js | 32 ++++++++++++++++++--------
 webpage/style.css    | 21 ++++++++++++++++++
 5 files changed, 131 insertions(+), 18 deletions(-)

diff --git a/webpage/channel.js b/webpage/channel.js
index 8cf51d9..357ebdd 100644
--- a/webpage/channel.js
+++ b/webpage/channel.js
@@ -26,7 +26,7 @@ class channel{
         this.lastpin=json.last_pin_timestamp;
     }
     get hasunreads(){
-        return this.lastmessageid===this.lastreadmessageid
+        return this.lastmessageid!==this.lastreadmessageid&&this.type!==4;
     }
     get canMessage(){
         for(const thing of this.permission_overwrites){
@@ -127,6 +127,9 @@ class channel{
             div.appendChild(childrendiv);
         }else{
             div.classList.add("Channel");
+            if(this.hasunreads){
+                div.classList.add("cunread");
+            }
             lacechannel(div);
             if(admin){this.coatDropDiv(div,this);}
             div.all=this;
@@ -158,6 +161,46 @@ class channel{
         }
         return div;
     }
+    get myhtml(){
+        const search=document.getElementById("channels").children[0].children
+        if(this.owner!==thisuser.lookingguild){
+            return null
+        }else if(this.parrent){
+            for(const thing of search){
+                if(thing.all===this.parrent){
+                    for(const thing2 of thing.children[1].children){
+                        if(thing2.all===this){
+                            return thing2;
+                        }
+                    }
+                }
+            }
+        }else{
+            for(const thing of search){
+                if(thing.all===this){
+                    return thing;
+                }
+            }
+        }
+        return null;
+    }
+    readbottom(){
+        console.log(this)
+        if(!this.hasunreads){
+            return;
+        }
+        fetch("https://old.server.spacebar.chat/api/v9/channels/"+this.id+"/messages/"+this.lastmessageid+"/ack",{
+            method:"POST",
+            headers:{"Content-type": "application/json; charset=UTF-8",Authorization:token},
+            body:JSON.stringify({})
+        });
+        this.lastreadmessageid=this.lastmessageid;
+        this.owner.unreads();
+        if(this.myhtml!==null){
+            console.log(this.myhtml.classList)
+            this.myhtml.classList.remove("cunread");
+        }
+    }
     coatDropDiv(div,that,container=false){
         div.addEventListener("dragenter", (event) => {
             console.log("enter")
@@ -381,7 +424,15 @@ class channel{
         this.lastmessageid=messagez.id;
         if(messagez.user===thisuser.user){
             this.lastreadmessageid=messagez.id;
+            if(this.myhtml){
+                this.myhtml.classList.remove("cunread");
+            }
+        }else{
+            if(this.myhtml){
+                this.myhtml.classList.add("cunread");
+            }
         }
+        this.owner.unreads();
         this.messages.unshift(messagez);
         const scrolly=document.getElementById("messagecontainer");
         this.messageids[messagez.id]=messagez;
diff --git a/webpage/guild.js b/webpage/guild.js
index 3714b43..1b9ada8 100644
--- a/webpage/guild.js
+++ b/webpage/guild.js
@@ -95,6 +95,27 @@ class guild{
     sortchannels(){
         this.headchannels.sort((a,b)=>{return a.position-b.position;});
     }
+    unreads(html){
+        if(html){
+            this.html=html;
+        }else{
+            html=this.html;
+        }
+        let read=true;
+        for(const thing of this.channels){
+            if(thing.hasunreads){
+                console.log(thing)
+                read=false;
+                break;
+            }
+        }
+        console.log(read);
+        if(read){
+            html.children[0].classList.remove("notiunread");
+        }else{
+            html.children[0].classList.add("notiunread");
+        }
+    }
     getHTML(){
         //this.printServers();
         this.sortchannels();
diff --git a/webpage/index.js b/webpage/index.js
index 2122320..c112763 100644
--- a/webpage/index.js
+++ b/webpage/index.js
@@ -16,13 +16,6 @@ let ws
 initwebsocket();
 let READY;
 
-/*
-fetch("https://old.server.spacebar.chat/api/v9/channels/1243314160814653069/messages/1244097259492795763/ack",{
-    method:"POST",
-    headers:{"Content-type": "application/json; charset=UTF-8",Authorization:token},
-    body:JSON.stringify({})
-})
-*/
 function createbutton(text,img,clickevent=function(){}){
     const textb=document.createElement("tr");
     const intext=document.createElement("button")
@@ -116,6 +109,15 @@ function makemenuc(divmessage,x,y){
         })
         copyidbutton.button.all=divmessage.all;
         build.appendChild(copyidbutton);
+
+        const readall=createbutton("Mark as read",null,function(){
+            console.log(channel)
+            channel.readbottom();
+        })
+        readall.button.all=divmessage.all;
+        build.appendChild(readall);
+
+
         if(thisuser.isAdmin()){
             const deleteChannel=createbutton("Delete channel",null,function(){
                 console.log(channel)
@@ -632,13 +634,17 @@ function userSettings(){
 }
 let triggered=false;
 document.getElementById("messagecontainer").addEventListener("scroll",(e)=>{
-    if(document.getElementById("messagecontainer").scrollTop<2000){
+    const messagecontainer=document.getElementById("messagecontainer")
+    if(messagecontainer.scrollTop<2000){
         if(!triggered){
             thisuser.lookingguild.prevchannel.grabmoremessages();
         }
         triggered=true;
     }else{
         triggered=false;
+        if(Math.abs(messagecontainer.scrollHeight-messagecontainer.scrollTop-messagecontainer.clientHeight) < 3){
+            thisuser.lookingguild.prevchannel.readbottom();
+        }
     }
     //
 })
diff --git a/webpage/localuser.js b/webpage/localuser.js
index fb27b3b..b7e5703 100644
--- a/webpage/localuser.js
+++ b/webpage/localuser.js
@@ -7,6 +7,7 @@ class localuser{
         this.status=this.ready.d.user_settings.status;
         this.channelfocus=null;
         this.lookingguild=null;
+        this.guildhtml={};
         for(const thing of ready.d.guilds){
             const temp=new guild(thing,this);
             this.guilds.push(temp);
@@ -23,17 +24,13 @@ class localuser{
         }
         for(const thing of ready.d.read_state.entries){
             console.log(thing)
-            thing.id=this.resolveGuildidFromChannelID(thing.channel_id);//currently needed due to broken server code, remove once id is the guild id
-            this.guildids[thing.id].channelids[thing.channel_id].readStateInfo(thing);
+            const guildid=this.resolveGuildidFromChannelID(thing.id).id;//currently needed due to broken server code, remove once id is the guild id
+            this.guildids[guildid].channelids[thing.channel_id].readStateInfo(thing);
         }
         this.typing=[];
     }
     resolveGuildidFromChannelID(ID){
-        for(const thing of this.guilds){
-            if(thing.channelids[ID]){
-                return thing.id;
-            }
-        }
+        return this.guilds.find(guild => guild.channelids[ID]);
     }
     updateChannel(JSON){
         this.guildids[JSON.guild_id].updateChannel(JSON);
@@ -102,11 +99,18 @@ class localuser{
             if(thing instanceof dirrect){
                 continue;
             }
+            const divy=document.createElement("div");
+            divy.classList.add("servernoti");
+
+            const noti=document.createElement("div");
+            noti.classList.add("unread");
+            divy.append(noti);
+            this.guildhtml[thing.id]=divy;
             if(thing.properties.icon!=null){
                 const img=document.createElement("img");
                 img.classList.add("pfp","servericon")
                 img.src="https://cdn.old.server.spacebar.chat/icons/"+thing.properties.id+"/"+thing.properties.icon+".png";
-                serverlist.appendChild(img)
+                divy.appendChild(img)
                 img.all=thing;
                 img.onclick=function(){
                     console.log(this.all.loadGuild)
@@ -121,18 +125,28 @@ class localuser{
                 }
                 div.innerText=build;
                 div.classList.add("blankserver","servericon")
-                serverlist.appendChild(div)
+                divy.appendChild(div)
                 div.all=thing;
                 div.onclick=function(){
                     this.all.loadGuild();
                     this.all.loadChannel();
                 }
             }
+            serverlist.append(divy);
         }
+        this.unreads();
     }
     messageCreate(messagep){
         messagep.d.guild_id??="@me";
         this.guildids[messagep.d.guild_id].channelids[messagep.d.channel_id].messageCreate(messagep,this.channelfocus===messagep.d.channel_id);
+        this.unreads();
+    }
+    unreads(){
+        console.log(this.guildhtml)
+        for(const thing of this.guilds){
+            if(thing.id==="@me"){continue;}
+            thing.unreads(this.guildhtml[thing.id])
+        }
     }
     typeingStart(typing){
         if(this.channelfocus===typing.d.channel_id){
diff --git a/webpage/style.css b/webpage/style.css
index 6751ac2..d5bd1af 100644
--- a/webpage/style.css
+++ b/webpage/style.css
@@ -85,6 +85,7 @@ h2{
 }
 .servericon{
     transition: border-radius .2s;
+    position:relative;
 }
 .servericon:hover{
     border-radius: 30%;
@@ -591,3 +592,23 @@ span{
 .filename{
     color:#47bbff;
 }
+
+.unread{
+    position:absolute;
+    background:white;
+    height:.075in;
+    width:.075in;
+    transition:transform .2s;
+    transform:translate(-.20in,.2in);
+    z-index:10;
+    border-radius: 50%;
+    border:solid;
+    border-width:.02in;
+    border-color:black;
+}
+.notiunread{
+    transform:translate(0in,.2in);
+}
+.cunread{
+    box-shadow: inset .024in 0 white;  
+}
\ No newline at end of file