various improvements and fixes

fixes a DM bug, and improves mention handling

src/webpage/channel.ts

@@ -38,7 +38,7 @@ class Channel extends SnowFlake{
 	position: number = 0;
 	lastreadmessageid: string | undefined;
 	lastmessageid: string | undefined;
-	mentions!: number;
+	mentions=0;
 	lastpin!: string;
 	move_id?: string;
 	typing!: number;
@@ -518,9 +518,7 @@ class Channel extends SnowFlake{
 			};
 		}else{
 			div.classList.add("channel");
-			if(this.hasunreads){
-				div.classList.add("cunread");
-			}
+			this.unreads();
 			Channel.contextmenu.bindContextmenu(div, this,undefined);
 			if(admin){
 				this.coatDropDiv(div);
@@ -624,7 +622,9 @@ class Channel extends SnowFlake{
 		}
 	}
 	readbottom(){
+		this.mentions=0;
 		if(!this.hasunreads){
+			this.guild.unreads();
 			return;
 		}
 		fetch(
@@ -637,10 +637,9 @@ class Channel extends SnowFlake{
 		);
 		this.lastreadmessageid = this.lastmessageid;
 		this.guild.unreads();
-		if(this.myhtml){
-			this.myhtml.classList.remove("cunread");
-		}
+		this.unreads();
 	}
+
 	coatDropDiv(div: HTMLDivElement, container: HTMLElement | boolean = false){
 		div.addEventListener("dragenter", event=>{
 			console.log("enter");
@@ -1351,6 +1350,20 @@ class Channel extends SnowFlake{
 			});
 		}
 	}
+	unreads(){
+		if(!this.hasunreads){
+			if(this.myhtml){
+				this.myhtml.classList.remove("cunread","mentioned");
+			}
+		}else{
+			if(this.myhtml){
+				this.myhtml.classList.add("cunread");
+			}
+			if(this.mentions!==0){
+				this.myhtml?.classList.add("mentioned")
+			}
+		}
+	}
 	messageCreate(messagep: messageCreateJson): void{
 		if(!this.hasPermission("VIEW_CHANNEL")){
 			return;
@@ -1361,19 +1374,15 @@ class Channel extends SnowFlake{
 			this.idToNext.set(this.lastmessageid, messagez.id);
 			this.idToPrev.set(messagez.id, this.lastmessageid);
 		}
-
+		if(messagez.mentionsuser(this.localuser.user)&&messagez.author!==this.localuser.user){
+			this.mentions++;
+		}
 		this.lastmessageid = messagez.id;
 
 		if(messagez.author === this.localuser.user){
 			this.lastreadmessageid = messagez.id;
-			if(this.myhtml){
-				this.myhtml.classList.remove("cunread");
-			}
-		}else{
-			if(this.myhtml){
-				this.myhtml.classList.add("cunread");
-			}
 		}
+		this.unreads();
 		this.guild.unreads();
 		if(this === this.localuser.channelfocus){
 			if(!this.infinitefocus){

src/webpage/direct.ts

@@ -41,6 +41,7 @@ class Direct extends Guild{
 		const thischannel = new Group(json, this);
 		this.channelids[thischannel.id] = thischannel;
 		this.channels.push(thischannel);
+		this.localuser.channelids.set(thischannel.id, thischannel);
 		this.sortchannels();
 		this.printServers();
 		return thischannel;
@@ -282,8 +283,17 @@ class Direct extends Guild{
 			channelTopic.append(add);
 		}
 	}
+	get mentions(){
+		let mentions=0;
+		for(const thing of this.localuser.inrelation){
+			if(thing.relationshipType===3){
+				mentions+=1;
+			}
+		}
+		return mentions;
+	}
 	giveMember(_member: memberjson){
-		console.error("not a real guild, can't give member object");
+		throw new Error("not a real guild, can't give member object");
 	}
 	getRole(/* ID: string */){
 		return null;
@@ -429,6 +439,7 @@ class Group extends Channel{
 
 	}
 	messageCreate(messagep: { d: messagejson }){
+		this.mentions++;
 		const messagez = new Message(messagep.d, this);
 		if(this.lastmessageid){
 			this.idToNext.set(this.lastmessageid, messagez.id);
@@ -461,20 +472,15 @@ class Group extends Channel{
 		}
 		this.unreads();
 		if(messagez.author === this.localuser.user){
+			this.mentions=0;
 			return;
 		}
-		if(
-			this.localuser.lookingguild?.prevchannel === this &&
-	document.hasFocus()
-		){
+		if(this.localuser.lookingguild?.prevchannel === this && document.hasFocus()){
 			return;
 		}
 		if(this.notification === "all"){
 			this.notify(messagez);
-		}else if(
-			this.notification === "mentions" &&
-	messagez.mentionsuser(this.localuser.user)
-		){
+		}else if(this.notification === "mentions" && messagez.mentionsuser(this.localuser.user)){
 			this.notify(messagez);
 		}
 	}

src/webpage/guild.ts

@@ -588,27 +588,42 @@ class Guild extends SnowFlake{
 			headers: this.headers,
 		});
 	}
+	get mentions(){
+		let mentions=0;
+		for(const thing of this.channels){
+			mentions+=thing.mentions;
+		}
+		return mentions;
+	}
 	unreads(html?: HTMLElement | undefined){
 		if(html){
 			this.html = html;
 		}else{
 			html = this.html;
 		}
+		if(!html){
+			return;
+		}
 		let read = true;
+		let mentions=this.mentions;
 		for(const thing of this.channels){
 			if(thing.hasunreads){
-				console.log(thing);
 				read = false;
 				break;
 			}
 		}
-		if(!html){
-			return;
+		const noti=html.children[0];
+		if(mentions!==0){
+			noti.classList.add("pinged");
+			noti.textContent=""+mentions;
+		}else{
+			noti.textContent="";
+			noti.classList.remove("pinged");
 		}
 		if(read){
-			html.children[0].classList.remove("notiunread");
+			noti.classList.remove("notiunread");
 		}else{
-			html.children[0].classList.add("notiunread");
+			noti.classList.add("notiunread");
 		}
 	}
 	getHTML(){

src/webpage/localuser.ts

@@ -551,6 +551,9 @@ class Localuser{
 					user.relationshipType = temp.d.type;
 					this.inrelation.add(user);
 					this.relationshipsUpdate();
+					const me=this.guildids.get("@me");
+					if(!me)break;
+					me.unreads();
 					break;
 				}
 				case "RELATIONSHIP_REMOVE":{

src/webpage/message.ts

@@ -243,7 +243,11 @@ class Message extends SnowFlake{
 		if(userd instanceof User){
 			return this.mentions.includes(userd);
 		}else if(userd instanceof Member){
-			return this.mentions.includes(userd.user);
+			if(this.mentions.includes(userd.user)){
+				return true
+			}else{
+				return !new Set(this.mentions).isDisjointFrom(new Set(userd.roles));//if the message mentions a role the user has
+			}
 		}else{
 			return false;
 		}

src/webpage/style.css

@@ -611,6 +611,10 @@ span.instanceStatus {
 	border-radius: 4px;
 	transition: transform .2s, height .2s;
 }
+.servernoti:hover .unread.pinged {
+ 	transform: translate(34px, 14px);
+	height: 20px;
+}
 .servernoti:hover .unread {
  	transform: translate(-12px, 12px);
 	height: 24px;
@@ -618,6 +622,11 @@ span.instanceStatus {
 .serveropen .unread {
 	transform: translate(-12px, 8px) !important;
 	height: 32px !important;
+	width: 8px !important;
+
+}
+.serveropen .unread.pinged{
+	color: transparent;
 }
 .notiunread {
 	transform: translate(-12px, 20px);
@@ -625,18 +634,19 @@ span.instanceStatus {
 #sentdms {
 	position: relative;
 }
-.unread.pinged, .servernoti:hover .unread.pinged {
+.unread.pinged{
 	height: 16px;
 	width: 16px;
-	transform: translate(28px, 28px);
+	transform: translate(34px, 34px);
 	background: var(--red);
 	font-size: .75rem;
 	font-weight: bold;
 	line-height: 15px;
 	text-align: center;
-	border: 4px solid var(--servers-bg);
-	border-radius: 50%;
+	/* border: 4px solid var(--servers-bg); */
+	/* border-radius: 50%; */
 	pointer-events: none;
+	z-index: 10;
 }
 
 /* Channel Panel */
@@ -711,6 +721,9 @@ span.instanceStatus {
 	background: var(--primary-text);
 	border-radius: 50%;
 }
+.cunread.mentioned:after{
+	background: var(--red);
+}
 .space {
 	flex: none;
 	height: 1em;