live name updates

src/webpage/channel.ts

@@ -1010,6 +1010,7 @@ class Channel extends SnowFlake {
 			div.classList.add("voiceuser", "flexltr");
 			const span = document.createElement("span");
 			span.textContent = member.name;
+			member.subName(span);
 
 			const tray = document.createElement("div");
 			tray.classList.add("flexltr", "voiceTray");
@@ -1480,7 +1481,11 @@ class Channel extends SnowFlake {
 		const span = document.createElement("span");
 		span.textContent = user.name;
 		memb.then((_) => {
-			if (!_) return;
+			if (!_) {
+				user.subName(span);
+				return;
+			}
+			_.subName(span);
 			span.textContent = _.name;
 		});
 		span.classList.add("voiceUsername");

src/webpage/direct.ts

@@ -162,6 +162,7 @@ class Direct extends Guild {
 			userinfos.classList.add("flexttb");
 			const username = document.createElement("span");
 			username.textContent = user.name;
+			user.subName(username);
 			userinfos.append(username, user.getStatus());
 			div.append(userinfos);
 			User.contextmenu.bindContextmenu(div, user, undefined);

src/webpage/localuser.ts

@@ -1378,6 +1378,7 @@ class Localuser {
 				const username = document.createElement("span");
 				username.classList.add("ellipsis");
 				username.textContent = member.name;
+				member.subName(username);
 				if (user.bot) {
 					const bot = document.createElement("span");
 					bot.classList.add("bot");

src/webpage/member.ts

@@ -30,6 +30,20 @@ class Member extends SnowFlake {
 		}
 		this.update(memberjson);
 	}
+	elms = new Set<WeakRef<HTMLElement>>();
+	subName(elm: HTMLElement) {
+		this.elms.add(new WeakRef(elm));
+	}
+	nameChange() {
+		for (const ref of this.elms) {
+			const elm = ref.deref();
+			if (!elm || !document.contains(elm)) {
+				this.elms.delete(ref);
+				continue;
+			}
+			elm.textContent = this.name;
+		}
+	}
 	commuicationDisabledLeft() {
 		return this.communication_disabled_until
 			? Math.max(+this.communication_disabled_until - Date.now(), 0)
@@ -300,6 +314,7 @@ class Member extends SnowFlake {
 		}
 	}
 	update(memberjson: memberjson) {
+		const changeNick = this.nick !== memberjson.nick;
 		for (const key of Object.keys(memberjson)) {
 			if (key === "guild" || key === "owner" || key === "user") {
 				continue;
@@ -348,6 +363,9 @@ class Member extends SnowFlake {
 		this.roles.sort((a, b) => {
 			return this.guild.roles.indexOf(a) - this.guild.roles.indexOf(b);
 		});
+		if (changeNick) {
+			this.nameChange();
+		}
 	}
 	get guild() {
 		return this.owner;
@@ -551,7 +569,7 @@ class Member extends SnowFlake {
 		//to be implemented
 	}
 	get name() {
-		return this.nick || this.user.username;
+		return this.nick || this.user.name;
 	}
 	kick() {
 		const menu = new Dialog("");

src/webpage/message.ts

@@ -633,6 +633,9 @@ class Message extends SnowFlake {
 				if (member) {
 					minipfp.src = member.getpfpsrc();
 					username.textContent = member.name;
+					member.subName(username);
+				} else {
+					user.subName(username);
 				}
 			});
 			user.bind(minipfp, this.guild);
@@ -752,6 +755,9 @@ class Message extends SnowFlake {
 					if (member) {
 						username.textContent = member.name;
 						minipfp.src = member.getpfpsrc();
+						member.subName(username);
+					} else {
+						author.subName(username);
 					}
 				});
 			});
@@ -795,8 +801,11 @@ class Message extends SnowFlake {
 				membProm.then((member) => {
 					if (member) {
 						username.textContent = member.name;
+						member.subName(username);
 						const icon = member.getRoleIcon();
 						if (icon) username.after(icon);
+					} else {
+						this.author.subName(username);
 					}
 				});
 				div.classList.add("topMessage");

src/webpage/user.ts

@@ -565,6 +565,33 @@ class User extends SnowFlake {
 		);
 		console.warn("this ran");
 	}
+	getMembersSync() {
+		return this.localuser.guilds
+			.map((guild) => {
+				const m = this.members.get(guild);
+				return m instanceof Member ? m : undefined;
+			})
+			.filter((m) => m !== undefined);
+	}
+
+	elms = new Set<WeakRef<HTMLElement>>();
+	subName(elm: HTMLElement) {
+		this.elms.add(new WeakRef(elm));
+	}
+	nameChange() {
+		this.getMembersSync().forEach((memb) => {
+			memb.nameChange();
+		});
+
+		for (const ref of this.elms) {
+			const elm = ref.deref();
+			if (!elm || !document.contains(elm)) {
+				this.elms.delete(ref);
+				continue;
+			}
+			elm.textContent = this.name;
+		}
+	}
 
 	static checkuser(user: User | userjson, owner: Localuser): User {
 		const tempUser = owner.userMap.get(user.uid || user.id);
@@ -653,6 +680,7 @@ class User extends SnowFlake {
 		//TODO make sure this is something I can actually do here
 		const name = document.createElement("b");
 		name.textContent = this.name;
+
 		const nameBox = document.createElement("div");
 		nameBox.classList.add("flexttb");
 		nameBox.append(name);
@@ -660,9 +688,11 @@ class User extends SnowFlake {
 		div.append(pfp, nameBox);
 		Member.resolveMember(this, guild).then((_) => {
 			if (_) {
+				_.subName(name);
 				name.textContent = _.name;
 				pfp.src = _.getpfpsrc();
 			} else if (guild.id !== "@me") {
+				this.subName(name);
 				const notFound = document.createElement("span");
 				notFound.textContent = I18n.webhooks.notFound();
 				nameBox.append(notFound);
@@ -749,6 +779,7 @@ class User extends SnowFlake {
 	}
 
 	userupdate(json: userjson): void {
+		const up = json.username !== this.username;
 		if (json.avatar !== this.avatar) {
 			Array.from(document.getElementsByClassName("userid:" + this.id)).forEach((element) => {
 				const img = element as safeImg;
@@ -777,6 +808,9 @@ class User extends SnowFlake {
 				this.localuser.updateRights(this.rights);
 			}
 		}
+		if (up) {
+			this.nameChange();
+		}
 	}
 
 	bind(
@@ -1040,6 +1074,7 @@ class User extends SnowFlake {
 
 		const usernamehtml = document.createElement("h2");
 		usernamehtml.textContent = this.name;
+
 		userbody.appendChild(usernamehtml);
 
 		if (this.bot) {
@@ -1096,7 +1131,10 @@ class User extends SnowFlake {
 
 			if (guild) {
 				membres.then((member) => {
-					if (!member) return;
+					if (!member) {
+						this.subName(usernamehtml);
+						return;
+					}
 					const p = document.createElement("p");
 					p.textContent = I18n.profile.joinedMember(
 						member.guild.properties.name,
@@ -1105,6 +1143,7 @@ class User extends SnowFlake {
 					joined.append(p);
 
 					usernamehtml.textContent = member.name;
+					member.subName(usernamehtml);
 					if (this.bot) {
 						const username = document.createElement("span");
 						username.classList.add("bot");