Fixed some old classes names and other bugs

Plugins/EditUsers/EditUsers.plugin.js

@@ -3,7 +3,7 @@
 class EditUsers {
 	getName () {return "EditUsers";}
 
-	getVersion () {return "3.2.0";} 
+	getVersion () {return "3.2.1";}
 
 	getAuthor () {return "DevilBro";}
 
@@ -20,13 +20,15 @@ class EditUsers {
 			"Popout":"componentDidMount",
 			"DirectMessage":"componentDidMount",
 			"CallAvatar":"componentDidMount",
-			"PrivateChannel":"componentDidMount",
+			"PrivateChannel":["componentDidMount","componentDidUpdate"],
 			"HeaderBar":["componentDidMount","componentDidUpdate"],
 			"Clickable":"componentDidMount",
 			"MessageContent":["componentDidMount","componentDidUpdate"],
 			"StandardSidebarView":"componentWillUnmount"
 		};
 		
+		this.avatarselector = BDFDB.dotCNC.avatarinner + BDFDB.dotCNC.avatarimage + BDFDB.dotCNC.callavatarwrapper + BDFDB.dotCNC.voiceavatarcontainer + "[class*='avatar-']";
+
 		this.css = `
 			${BDFDB.dotCN.bottag} {
 				top: -4px;
@@ -184,13 +186,13 @@ class EditUsers {
 		var settingshtml = `<div class="${this.getName()}-settings DevilBro-settings"><div class="${BDFDB.disCNS.titledefault + BDFDB.disCNS.title + BDFDB.disCNS.size18 + BDFDB.disCNS.height24 + BDFDB.disCNS.weightnormal + BDFDB.disCN.marginbottom8}">${this.getName()}</div><div class="DevilBro-settings-inner">`;
 		settingshtml += `<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.marginbottom8}" style="flex: 1 1 auto;"><h3 class="${BDFDB.disCNS.titledefault + BDFDB.disCNS.title + BDFDB.disCNS.marginreset + BDFDB.disCNS.weightmedium + BDFDB.disCNS.size16 + BDFDB.disCNS.height24 + BDFDB.disCN.flexchild}" style="flex: 0 0 auto;">Change User in:</h3></div><div class="DevilBro-settings-inner-list">`;
 		for (let key in settings) {
-			settingshtml += `<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.marginbottom8}" style="flex: 1 1 auto;"><h3 class="${BDFDB.disCNS.titledefault + BDFDB.disCNS.title + BDFDB.disCNS.marginreset + BDFDB.disCNS.weightmedium + BDFDB.disCNS.size16 + BDFDB.disCNS.height24 + BDFDB.disCN.flexchild}" style="flex: 1 1 auto;">${this.defaults.settings[key].description}</h3><div class="${BDFDB.disCNS.flexchild + BDFDB.disCNS.switchenabled + BDFDB.disCNS.switch + BDFDB.disCNS.switchvalue + BDFDB.disCNS.switchsizedefault + BDFDB.disCNS.switchsize + BDFDB.disCN.switchthemedefault}" style="flex: 0 0 auto;"><input type="checkbox" value="${key}" class="${BDFDB.disCNS.switchinnerenabled + BDFDB.disCN.switchinner}"${settings[key] ? " checked" : ""}></div></div>`;
+			settingshtml += `<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.marginbottom8}" style="flex: 1 1 auto;"><h3 class="${BDFDB.disCNS.titledefault + BDFDB.disCNS.title + BDFDB.disCNS.marginreset + BDFDB.disCNS.weightmedium + BDFDB.disCNS.size16 + BDFDB.disCNS.height24 + BDFDB.disCN.flexchild}" style="flex: 1 1 auto;">${this.defaults.settings[key].description}</h3><div class="${BDFDB.disCNS.flexchild + BDFDB.disCNS.switchenabled + BDFDB.disCNS.switch + BDFDB.disCNS.switchvalue + BDFDB.disCNS.switchsizedefault + BDFDB.disCNS.switchsize + BDFDB.disCN.switchthemedefault}" style="flex: 0 0 auto;"><input type="checkbox" value="settings ${key}" class="${BDFDB.disCNS.switchinnerenabled + BDFDB.disCN.switchinner} settings-switch"${settings[key] ? " checked" : ""}></div></div>`;
 		}
 		settingshtml += `</div>`;
 		settingshtml += `<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.marginbottom8}" style="flex: 0 0 auto;"><h3 class="${BDFDB.disCNS.titledefault + BDFDB.disCNS.title + BDFDB.disCNS.marginreset + BDFDB.disCNS.weightmedium + BDFDB.disCNS.size16 + BDFDB.disCNS.height24 + BDFDB.disCN.flexchild}" style="flex: 1 1 auto;">Reset all Users.</h3><button type="button" class="${BDFDB.disCNS.flexchild + BDFDB.disCNS.button + BDFDB.disCNS.buttonlookfilled + BDFDB.disCNS.buttoncolorred + BDFDB.disCNS.buttonsizemedium + BDFDB.disCN.buttongrow} reset-button" style="flex: 0 0 auto;"><div class="${BDFDB.disCN.buttoncontents}">Reset</div></button></div>`;
 		settingshtml += `</div></div>`;
 		
-		var settingspanel = $(settingshtml)[0];
+		let settingspanel = BDFDB.htmlToElement(settingshtml);
 
 		BDFDB.initElements(settingspanel);
 
@@ -290,16 +292,18 @@ class EditUsers {
 	
 	onUserContextMenu (instance, menu) {
 		if (instance.props && instance.props.user && !menu.querySelector(".localusersettings-item")) {
-			$(menu).append(this.userContextEntryMarkup)
+			let userContextEntry = BDFDB.htmlToElement(this.userContextEntryMarkup);
+			menu.appendChild(userContextEntry);
+			$(userContextEntry)
 				.on("mouseenter." + this.getName(), ".localusersettings-item", (e) => {
-					var userContextSubMenu = $(this.userContextSubMenuMarkup);
+					var userContextSubMenu = BDFDB.htmlToElement(this.userContextSubMenuMarkup);
-					userContextSubMenu
+					$(userContextSubMenu)
 						.on("click", ".usersettings-item", () => {
 							instance._reactInternalFiber.return.memoizedProps.closeContextMenu();
 							this.showUserSettings(instance.props.user);
 						});
 					if (BDFDB.loadData(instance.props.user.id, this, "users")) {
-						userContextSubMenu
+						$(userContextSubMenu)
 							.find(".resetsettings-item")
 							.removeClass(BDFDB.disCN.contextmenuitemdisabled)
 							.on("click", () => {
@@ -316,31 +320,42 @@ class EditUsers {
 	showUserSettings (info) {
 		var {name,tag,url,removeIcon,ignoreTagColor,color1,color2,color3,color4} = BDFDB.loadData(info.id, this, "users") || {};
 		
-		var member = this.MemberUtils.getMember(this.LastGuildStore.getGuildId(), info.id) ;
+		var member = this.MemberUtils.getMember(this.LastGuildStore.getGuildId(), info.id) || {};
 		
-		var userSettingsModal = $(this.userSettingsModalMarkup);
+		let userSettingsModal = BDFDB.htmlToElement(this.userSettingsModalMarkup);
-		userSettingsModal.find(BDFDB.dotCN.modalguildname).text(member && member.nick ? member.nick : info.username);
+		let usernameinput = userSettingsModal.querySelector("#input-username");
-		userSettingsModal.find("#input-username").val(name);
+		let usertaginput = userSettingsModal.querySelector("#input-usertag");
-		userSettingsModal.find("#input-username").attr("placeholder", member && member.nick ? member.nick : info.username);
+		let userurlinput = userSettingsModal.querySelector("#input-userurl");
-		userSettingsModal.find("#input-usertag").val(tag);
+		let removeiconinput = userSettingsModal.querySelector("#input-removeicon");
-		userSettingsModal.find("#input-userurl").val(url);
+		let ignoretagcolorinput = userSettingsModal.querySelector("#input-ignoretagcolor");
-		userSettingsModal.find("#input-userurl").attr("placeholder", BDFDB.getUserAvatar(info.id));
+		
-		userSettingsModal.find("#input-userurl").addClass(url ? "valid" : "");
+		userSettingsModal.querySelector(BDFDB.dotCN.modalguildname).innerText = member.nick || info.username;
-		userSettingsModal.find("#input-userurl").prop("disabled", removeIcon);
+		usernameinput.value = name || "";
-		userSettingsModal.find("#input-removeicon").prop("checked", removeIcon);
+		usernameinput.setAttribute("placeholder", member.nick || info.username);
-		userSettingsModal.find(".swatches[swatchnr='3'], .swatches[swatchnr='4']").toggleClass("disabled", ignoreTagColor);
+		usertaginput.value = tag || "";
-		userSettingsModal.find("#input-ignoretagcolor").prop("checked", ignoreTagColor);
+		userurlinput.value = url || "";
+		userurlinput.setAttribute("placeholder", BDFDB.getUserAvatar(info.id) || "");
+		userurlinput.classList.toggle("valid", userurlinput.value);
+		userurlinput.disabled = removeIcon;
+		removeiconinput.checked = removeIcon;
+		ignoretagcolorinput.checked = ignoreTagColor;
 		BDFDB.setColorSwatches(userSettingsModal, color1);
 		BDFDB.setColorSwatches(userSettingsModal, color2);
 		BDFDB.setColorSwatches(userSettingsModal, color3);
 		BDFDB.setColorSwatches(userSettingsModal, color4);
+		
+		let ignoredswatches = userSettingsModal.querySelectorAll(".swatches[swatchnr='3'], .swatches[swatchnr='4']");
+		
+		ignoredswatches.forEach(swatches => {swatches.classList.toggle("disabled", ignoreTagColor);});
+		
 		BDFDB.appendModal(userSettingsModal);
-		userSettingsModal
+		
+		$(userSettingsModal)
 			.on("click", "#input-removeicon", (e) => {
-				userSettingsModal.find("#input-userurl").prop("disabled", e.currentTarget.checked);
+				userurlinput.disabled = e.currentTarget.checked;
 			})
 			.on("click", "#input-ignoretagcolor", (e) => {
-				userSettingsModal.find(".swatches[swatchnr='3'], .swatches[swatchnr='4']").toggleClass("disabled", e.currentTarget.checked);
+				ignoredswatches.forEach(swatches => {swatches.classList.toggle("disabled", e.currentTarget.checked);});
 			})
 			.on("change keyup paste", "#input-userurl", (e) => {
 				this.checkUrl(e.currentTarget);
@@ -356,25 +371,18 @@ class EditUsers {
 			.on("click", ".btn-save", (e) => {
 				e.preventDefault();
 				
-				removeIcon = userSettingsModal.find("#input-removeicon").prop("checked");
+				name = usernameinput.value.trim();
-				ignoreTagColor = userSettingsModal.find("#input-ignoretagcolor").prop("checked");
+				name = name ? name : null;
 				
-				name = null;
+				tag = usertaginput.value.trim();
-				if (userSettingsModal.find("#input-username").val() && userSettingsModal.find("#input-username").val().trim().length > 0) {
+				tag = tag ? tag : null;
-					name = userSettingsModal.find("#input-username").val().trim();
-				}
 				
-				tag = null;
+				removeIcon = removeiconinput.checked;
-				if (userSettingsModal.find("#input-usertag").val() && userSettingsModal.find("#input-usertag").val().trim().length > 0) {
-					tag = userSettingsModal.find("#input-usertag").val().trim();
-				}
 				
-				if (userSettingsModal.find("#input-userurl:not('.invalid')").length > 0) {
+				ignoreTagColor = ignoretagcolorinput.checked;
-					url = null;
+				
-					if (!removeIcon && userSettingsModal.find("#input-userurl").val() && userSettingsModal.find("#input-userurl").val().trim().length > 0) {
+				url = !removeIcon && userurlinput.classList.contains("valid") ? userurlinput.value.trim() : null;
-						url = userSettingsModal.find("#input-userurl").val().trim();
+				url = url ? url : null;
-					}
-				}
 				
 				color1 = BDFDB.getSwatchColor(userSettingsModal, 1);
 				color2 = BDFDB.getSwatchColor(userSettingsModal, 2);
@@ -389,7 +397,8 @@ class EditUsers {
 				}
 				BDFDB.WebModules.forceAllUpdates(this);
 			});
-		userSettingsModal.find("#input-username").focus();
+			
+		usernameinput.focus();
 	}
 	
 	checkUrl (input) {
@@ -503,7 +512,7 @@ class EditUsers {
 	processPrivateChannel (instance, wrapper) {
 		if (instance.props && instance.props.user) {
 			let username = wrapper.querySelector(BDFDB.dotCN.dmchannelname);
-			this.changeName(instance.props.user, username.firstElementChild ? username.firstElementChild : username);
+			this.changePrivateChannel(instance.props.user, username.firstElementChild ? username.firstElementChild : username);
 			this.changeAvatar(instance.props.user, this.getAvatarDiv(wrapper));
 		}
 	}
@@ -629,7 +638,7 @@ class EditUsers {
 				});
 				username.EditUsersChangeObserver.observe(username, {attributes:true});
 			}
-			else username.removeAttribute("changed-by-editusers", true);
+			else username.removeAttribute("changed-by-editusers");
 		}
 	}
 	
@@ -649,7 +658,7 @@ class EditUsers {
 				});
 				username.EditUsersChangeObserver.observe(username, {attributes:true});
 			}
-			else username.removeAttribute("changed-by-editusers", true);
+			else username.removeAttribute("changed-by-editusers");
 		}
 	}
 	
@@ -674,7 +683,7 @@ class EditUsers {
 				});
 				username.EditUsersChangeObserver.observe(username, {attributes:true});
 			}
-			else username.removeAttribute("changed-by-editusers", true);
+			else username.removeAttribute("changed-by-editusers");
 		}
 	}
 	
@@ -705,7 +714,7 @@ class EditUsers {
 				});
 				avatar.EditUsersChangeObserver.observe(avatar, {attributes:true});
 			}
-			else avatar.removeAttribute("changed-by-editusers", true);
+			else avatar.removeAttribute("changed-by-editusers");
 		}
 	}
 	
@@ -735,6 +744,49 @@ class EditUsers {
 		}
 	}
 	
+	changePrivateChannel (info, username) {
+		if (!info || !username || !username.parentElement) return;
+		let dmchannel = BDFDB.getParentEle(BDFDB.dotCN.dmchannel, username);
+		if (!dmchannel) return;
+		if (username.EditUsersChangeObserver && typeof username.EditUsersChangeObserver.disconnect == "function") username.EditUsersChangeObserver.disconnect();
+		$(dmchannel).off("." + this.getName())
+		let data = this.getUserData(info.id, username);
+		if (data.name || data.color1 || data.color2 || username.getAttribute("changed-by-editusers")) {
+			let color1 = BDFDB.colorCONVERT(data.color1, "RGB");
+			let color2 = BDFDB.colorCONVERT(data.color2, "RGB");
+			BDFDB.setInnerText(username, data.name || info.username);
+			if (username.EditUsersHovered || dmchannel.classList.contains(BDFDB.disCN.dmchannelselected)) colorHover();
+			else colorDefault();
+				
+			if (data.name || data.color1 || data.color2) {
+				$(dmchannel)
+					.on("mouseenter." + this.getName(), () => {
+						username.EditUsersHovered = true;
+						colorHover();
+					})
+					.on("mouseleave." + this.getName(), () => {
+						delete username.EditUsersHovered;
+						colorDefault();
+					});
+				username.setAttribute("changed-by-editusers", true);
+				username.EditUsersChangeObserver = new MutationObserver((changes, _) => {
+					username.EditUsersChangeObserver.disconnect();
+					this.changePrivateChannel(info, username);
+				});
+				username.EditUsersChangeObserver.observe(username, {attributes:true});
+			}
+			else username.removeAttribute("changed-by-editusers");
+			function colorDefault() {
+				username.style.setProperty("color", color1 ? BDFDB.colorCHANGE(color1, -0.5) : null, "important");
+				username.style.setProperty("background", color2 ? BDFDB.colorCHANGE(color2, -0.5) : null, "important");
+			}
+			function colorHover() {
+				username.style.setProperty("color", color1, "important");
+				username.style.setProperty("background", color2, "important");
+			}
+		}
+	}
+	
 	changeMention (info, mention) {
 		if (!info || !mention || !mention.parentElement) return;
 		if (mention.EditUsersChangeObserver && typeof mention.EditUsersChangeObserver.disconnect == "function") mention.EditUsersChangeObserver.disconnect();
@@ -746,13 +798,13 @@ class EditUsers {
 		if (mention.EditUsersHovered) colorHover();
 		else colorDefault();
 		$(mention)
-			.off("mouseenter." + this.getName()).off("mouseleave." + this.getName())
+			.off("." + this.getName())
-			.on("mouseenter." + this.getName(), (e) => {
+			.on("mouseenter." + this.getName(), () => {
 				mention.EditUsersHovered = true;
 				colorHover();
 			})
-			.on("mouseleave." + this.getName(), (e) => {
+			.on("mouseleave." + this.getName(), () => {
-				mention.EditUsersHovered = false;
+				delete mention.EditUsersHovered;
 				colorDefault();
 			});
 		mention.EditUsersChangeObserver = new MutationObserver((changes, _) => {
@@ -786,15 +838,15 @@ class EditUsers {
 				});
 				username.EditUsersChangeObserver.observe(username, {attributes:true});
 			}
-			else username.removeAttribute("changed-by-editusers", true);
+			else username.removeAttribute("changed-by-editusers");
 		}
 	}
 	
 	getAvatarDiv (wrapper) {
-		var avatar = wrapper.querySelector(BDFDB.dotCNC.avatarimage + BDFDB.dotCNC.callavatarwrapper + BDFDB.dotCNC.voiceavatarcontainer + "[class*='avatar-']");
+		var avatar = wrapper.querySelector(this.avatarselector);
 		while (!avatar && wrapper.parentElement) {
 			wrapper = wrapper.parentElement;
-			avatar = wrapper.querySelector(BDFDB.dotCNC.avatarimage + BDFDB.dotCNC.callavatarwrapper + BDFDB.dotCNC.voiceavatarcontainer + "[class*='avatar-']");
+			avatar = wrapper.querySelector(this.avatarselector);
 		}
 		return avatar.firstElementChild || avatar;
 	}

Plugins/GoogleTranslateOption/GoogleTranslateOption.plugin.js

@@ -805,7 +805,7 @@ class GoogleTranslateOption {
 			translatorcheckbox.addEventListener("click", () => {
 				this.updateSettings(translatepopout);
 				translatepopout.remove();
-				button.classList.remove(BDFDB.disCN.optionpopoutopen);
+				button.classList.remove("popout-open");
 				this.openTranslatePopout(button);
 			});
 		});
@@ -814,7 +814,7 @@ class GoogleTranslateOption {
 			if (!translatepopout.contains(e.target)) {
 				document.removeEventListener("mousedown", removePopout);
 				translatepopout.remove();
-				setTimeout(() => {button.classList.remove(BDFDB.disCN.optionpopoutopen);},300);
+				setTimeout(() => {button.classList.remove("popout-open");},300);
 			}
 		};
 		document.addEventListener("mousedown", removePopout);
@@ -841,7 +841,6 @@ class GoogleTranslateOption {
 			var language = option.getAttribute("value");
 			selectWrap.setAttribute("value", language);
 			selectControl.querySelector(BDFDB.dotCN.title).innerText = this.languages[language].name;
-			console.log(type, language);
 			BDFDB.saveData(type, language, this, "choices");
 		})});
 		

Plugins/PersonalPins/PersonalPins.plugin.js

@@ -10,8 +10,8 @@ class PersonalPins {
 			"MessageOptionPopout":"componentDidMount"
 		};
 		
-		this.notesButton =
+		this.notesButtonMarkup =
-			`<span class="${BDFDB.disCN.channelheadericonmargin} notesButton">
+			`<span class="${BDFDB.disCN.channelheadericonmargin} notes-button">
 				<svg class="${BDFDB.disCNS.channelheadericoninactive + BDFDB.disCN.channelheadericon}" name="Note" width="16" height="16" viewBox="0 0 26 26">
 					<g fill="none" fill-rule="evenodd" transform="translate(3,2)">
 						<path class="${BDFDB.disCN.channelheadericonforeground}" fill="currentColor" d="M 4.618, 0 c -0.316, 0 -0.573, 0.256 -0.573, 0.573 v 1.145 c 0, 0.316, 0.256, 0.573, 0.573, 0.573 s 0.573 -0.256, 0.573 -0.573 V 0.573 C 5.191, 0.256, 4.935, 0, 4.618, 0 z"/>
@@ -32,21 +32,20 @@ class PersonalPins {
 							<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.alignstretch + BDFDB.disCNS.nowrap + BDFDB.disCNS.searchbar + BDFDB.disCN.size14}" style="flex: 1 1 auto;">
 								<input class="${BDFDB.disCN.searchbarinput}" value="" placeholder="Search for ..." style="flex: 1 1 auto;">
 								<div class="${BDFDB.disCN.searchbariconwrap}">
-									<i class="${BDFDB.disCNS.searchbaricon + BDFDB.disCNS.searchbareyeglass + BDFDB.disCN.searchbarvisible}"/>
+									<i class="${BDFDB.disCNS.searchbaricon + BDFDB.disCNS.searchbareyeglass + BDFDB.disCN.searchbarvisible}"></i>
-									<i class="${BDFDB.disCNS.searchbaricon + BDFDB.disCN.searchbarclear}"/>
+									<i class="${BDFDB.disCNS.searchbaricon + BDFDB.disCN.searchbarclear}"></i>
 								</div>
 							</div>
 						</div>
-						<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.margintop8}" style="flex: 0 0 auto;">
+						<div class="${BDFDB.disCN.tabbarheadercontainer}" style="flex: 0 0 auto;">
-							<div tab="channel" class="tab">REPLACE_popout_channel_text</div>
+							<div class="${BDFDB.disCNS.tabbarheader + BDFDB.disCN.tabbartop}">
-							<div tab="server" class="tab">REPLACE_popout_server_text</div>
+								<div tab="channel" class="${BDFDB.disCNS.settingsitemdefault + BDFDB.disCNS.settingsitem + BDFDB.disCNS.settingsnotselected + BDFDB.disCN.tabbarheaderitem}">REPLACE_popout_channel_text</div>
-							<div tab="allservers" class="tab">REPLACE_popout_allservers_text</div>
+								<div tab="server" class="${BDFDB.disCNS.settingsitemdefault + BDFDB.disCNS.settingsitem + BDFDB.disCNS.settingsnotselected + BDFDB.disCN.tabbarheaderitem}">REPLACE_popout_server_text</div>
-							<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.quickselect}" style="padding-bottom: 15px; float:right;">
+								<div tab="allservers" class="${BDFDB.disCNS.settingsitemdefault + BDFDB.disCNS.settingsitem + BDFDB.disCNS.settingsnotselected + BDFDB.disCN.tabbarheaderitem}">REPLACE_popout_allservers_text</div>
-								<div class="${BDFDB.disCN.quickselectlabel}">REPLACE_popout_sort_text:</div>
+							</div>
-								<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.quickselectclick}" style="flex: 0 0 auto;">
+							<div class="${BDFDB.disCN.recentmentionsmentionfilter}" style="padding-right: 15px;">
-									<div option="timestamp" class="${BDFDB.disCN.quickselectvalue}">REPLACE_popout_messagesort_text</div>
+								<div class="${BDFDB.disCN.recentmentionsmentionfilterlabel}">REPLACE_popout_sort_text:</div>
-									<div class="${BDFDB.disCN.quickselectarrow}"></div>
+								<div option="timestamp" class="${BDFDB.disCN.recentmentionsmentionfiltervalue}" style="text-transform: none;">REPLACE_popout_messagesort_text</div>
-								</div>
 							</div>
 						</div>
 					</div>
@@ -152,7 +151,7 @@ class PersonalPins {
 
 	getDescription () {return "Similar to normal pins. Lets you save messages as notes for yourself.";}
 
-	getVersion () {return "1.7.0";}
+	getVersion () {return "1.7.2";}
 
 	getAuthor () {return "DevilBro";}
 	
@@ -162,16 +161,15 @@ class PersonalPins {
 		settingshtml += `<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.marginbottom8}" style="flex: 0 0 auto;"><h3 class="${BDFDB.disCNS.titledefault + BDFDB.disCNS.title + BDFDB.disCNS.marginreset + BDFDB.disCNS.weightmedium + BDFDB.disCNS.size16 + BDFDB.disCNS.height24 + BDFDB.disCN.flexchild}" style="flex: 1 1 auto;">Delete all Notes.</h3><button type="button" class="${BDFDB.disCNS.flexchild + BDFDB.disCNS.button + BDFDB.disCNS.buttonlookfilled + BDFDB.disCNS.buttoncolorred + BDFDB.disCNS.buttonsizemedium + BDFDB.disCN.buttongrow} reset-button" style="flex: 0 0 auto;"><div class="${BDFDB.disCN.buttoncontents}">Reset</div></button></div>`;
 		settingshtml += `</div></div>`;
 		
-		let settingspanel = $(settingshtml)[0];
+		let settingspanel = BDFDB.htmlToElement(settingshtml);
 
 		BDFDB.initElements(settingspanel);
 
-		$(settingspanel)
+		settingspanel.querySelector(".reset-button").addEventListener("click", () => {
-			.on("click", ".reset-button", () => {
+			BDFDB.openConfirmModal(this, "Are you sure you want to delete all pinned notes?", () => {
-				BDFDB.openConfirmModal(this, "Are you sure you want to delete all pinned notes?", () => {
+				BDFDB.removeAllData(this, "pins");
-					BDFDB.removeAllData(this, "pins");
-				});
 			});
+		});
 		return settingspanel;
 	}
 
@@ -207,6 +205,36 @@ class PersonalPins {
 			this.HistoryUtils = BDFDB.WebModules.findByProperties("transitionTo", "replaceWith", "getHistory");
 			this.MainDiscord = BDFDB.WebModules.findByProperties("ActionTypes");
 			
+			/* REMOVE 11.01.2019 */
+			let p = BDFDB.loadAllData(this, "pins");
+			for (let g in p) {
+				for (let c in p[g]) {
+					for (let m in p[g][c]) {
+						if (p[g][c][m].serverID) {
+							p[g][c][m].guild_id = p[g][c][m].serverID;
+							delete p[g][c][m].serverID;
+							p[g][c][m].guild_name = p[g][c][m].serverName;
+							delete p[g][c][m].serverName;
+							p[g][c][m].channel_id = p[g][c][m].channelID;
+							delete p[g][c][m].channelID;
+							p[g][c][m].channel_name = p[g][c][m].channelName;
+							delete p[g][c][m].channelName;
+							p[g][c][m].author_id = p[g][c][m].authorID;
+							delete p[g][c][m].authorID;
+							p[g][c][m].author_name = p[g][c][m].authorName;
+							delete p[g][c][m].authorName;
+							p[g][c][m].dmuser_id = p[g][c][m].dmUserID;
+							delete p[g][c][m].dmUserID;
+							p[g][c][m] = BDFDB.sortObject(p[g][c][m]);
+						}
+						if (BDFDB.isObjectEmpty(p[g][c][m])) delete p[g][c][m];
+					}
+					if (BDFDB.isObjectEmpty(p[g][c])) delete p[g][c];
+				}
+				if (BDFDB.isObjectEmpty(p[g])) delete p[g];
+			}
+			BDFDB.saveAllData(p, this, "pins");
+			
 			BDFDB.WebModules.forceAllUpdates(this);
 		}
 		else {
@@ -217,7 +245,7 @@ class PersonalPins {
 
 	stop () {
 		if (typeof BDFDB === "object") {
-			BDFDB.removeEles(".popout-personalpins-notes", ".personalpins-sort-popout", ".notesButton");
+			BDFDB.removeEles(".popout-personalpins-notes", ".personalpins-sort-popout", ".notes-button");
 			BDFDB.unloadMessage(this);
 		}
 	}
@@ -248,352 +276,309 @@ class PersonalPins {
 	
 	onMessageContextMenu (instance, menu) {
 		if (instance.props && instance.props.message && instance.props.channel && instance.props.target && !menu.querySelector(".personalpins-item")) {
-			let pininstance = BDFDB.getOwnerInstance({node:menu,name:"MessagePinItem"});
+			let pinentry = BDFDB.React.findDOMNodeSafe(BDFDB.getOwnerInstance({node:menu,name:"MessagePinItem"}));
-			if (pininstance && pininstance._reactInternalFiber && pininstance._reactInternalFiber.return && pininstance._reactInternalFiber.return.stateNode) {
+			let messagePinContextEntry = BDFDB.htmlToElement(this.getNoteData(instance.props.message, instance.props.target, instance.props.channel) ? this.messageUnpinContextEntryMarkup : this.messagePinContextEntryMarkup);
-				let {messagediv, pos} = this.getMessageAndPos(instance.props.target);
+			if (pinentry) pinentry.parentElement.insertBefore(messagePinContextEntry, pinentry.nextElementSibling);
-				if (!messagediv || pos == -1) return;
+			else menu.insertBefore(messagePinContextEntry, menu.firstElementChild);
-				if (this.getNoteData(instance.props.message, instance.props.channel, pos)) {
+			let pinitem = messagePinContextEntry.querySelector(".personalpins-item");
-					$(this.messageUnpinContextEntryMarkup).insertAfter(pininstance._reactInternalFiber.return.stateNode)
+			pinitem.addEventListener("click", () => {
-						.on("click", ".personalpins-unpin-item", () => {
+				instance._reactInternalFiber.return.memoizedProps.closeContextMenu();
-							instance._reactInternalFiber.return.memoizedProps.closeContextMenu();
+				this.addMessageToNotes(instance.props.message, instance.props.target, instance.props.channel);
-							this.removeNoteData(instance.props.message, instance.props.channel, pos);
+			});
-						});
+			if (BDFDB.isPluginEnabled("MessageUtilities")) {
-				}
+				BDFDB.setContextHint(pinitem, bdplugins.MessageUtilities.plugin.getActiveShortcutString("__Note_Message"));
-				else {
-					$(this.messagePinContextEntryMarkup).insertAfter(pininstance._reactInternalFiber.return.stateNode)
-						.on("click", ".personalpins-pin-item", () => {
-							instance._reactInternalFiber.return.memoizedProps.closeContextMenu();
-							this.addMessageToNotes(instance.props.message, instance.props.target, instance.props.channel);
-						});
-				}
-				if (BDFDB.isPluginEnabled("MessageUtilities")) {
-					BDFDB.setContextHint(menu.querySelector(".personalpins-item"), bdplugins.MessageUtilities.plugin.getActiveShortcutString("__Note_Message"));
-				}
 			}
 		}
 	}
 	
 	processHeaderBar (instance, wrapper) {
-		BDFDB.removeEles(".notesButton");
+		BDFDB.removeEles(".notes-button");
-		$(this.notesButton)
+		let search = wrapper.querySelector(BDFDB.dotCN.channelheadersearch);
-			.insertBefore(wrapper.querySelector(BDFDB.dotCN.channelheadersearch))
+		if (!search) return;
-			.on("click." + this.getName(), BDFDB.dotCN.channelheadericon, (e) => {
+		let notesbutton = BDFDB.htmlToElement(this.notesButtonMarkup);
-				this.openNotesPopout(e);
+		search.parentElement.insertBefore(notesbutton, search);
-			})
+		let icon = notesbutton.querySelector(BDFDB.dotCN.channelheadericon);
-			.on("mouseenter." + this.getName(), BDFDB.dotCN.channelheadericon, (e) => {
+		icon.addEventListener("click", () => {
-				BDFDB.createTooltip(this.labels.popout_note_text, e.currentTarget, {type:"bottom",selector:"note-button-tooltip"});
+			this.openNotesPopout(icon);
-			});
+		});
+		icon.addEventListener("mouseenter", () => {
+			BDFDB.createTooltip(this.labels.popout_note_text, icon, {type:"bottom",selector:"note-button-tooltip"});
+		});
 	}
 	
 	processMessage (instance, wrapper) {  
 		if (instance.props && typeof instance.props.renderButtons == "function" && !wrapper.querySelector(BDFDB.dotCN.optionpopoutbutton)) {
 			let buttonwrap = wrapper.querySelector(BDFDB.dotCN.messagebuttoncontainer);
 			if (buttonwrap) {
-				let button = $(`<div class="${BDFDB.disCN.optionpopoutbutton}"></div>`)[0];
+				let optionPopoutButton = BDFDB.htmlToElement(`<div class="${BDFDB.disCN.optionpopoutbutton}"></div>`);
-				$(button).on("click", () => {BDFDB.createMessageOptionPopout(button);}).appendTo(buttonwrap);
+				optionPopoutButton.addEventListener("click", () => {BDFDB.createMessageOptionPopout(optionPopoutButton);});
+				buttonwrap.appendChild(optionPopoutButton);
 			}
 		}
 	}
 	
 	processMessageOptionPopout (instance, wrapper) {
 		if (instance.props.message && instance.props.channel && instance._reactInternalFiber.memoizedProps.target && !wrapper.querySelector(".personalpins-itembtn")) {
-			let {messagediv, pos} = this.getMessageAndPos(instance._reactInternalFiber.memoizedProps.target);
+			let popoutUnpinEntry = BDFDB.htmlToElement(this.getNoteData(instance.props.message, instance._reactInternalFiber.memoizedProps.target, instance.props.channel) ? this.popoutUnpinEntryMarkup : this.popoutPinEntryMarkup);
-			if (!messagediv || pos == -1) return;
+			wrapper.appendChild(popoutUnpinEntry);
-			if (this.getNoteData(instance.props.message, instance.props.channel, pos)) {
+			popoutUnpinEntry.addEventListener("click", () => {
-				$(this.popoutUnpinEntryMarkup)
+				this.addMessageToNotes(instance.props.message, instance._reactInternalFiber.memoizedProps.target, instance.props.channel);
-					.on("click." + this.getName(), () => {
+				instance.props.onClose();
-						this.removeNoteData(instance.props.message, instance.props.channel, pos);
+			});
-						instance.props.onClose();
+		}
-					})
+	}
-					.appendTo(wrapper);
+	
+	openNotesPopout (button) {
+		let container = document.querySelector(BDFDB.dotCN.popouts);
+		if (!container || button.classList.contains("popout-open")) return;
+		button.classList.add("popout-open");
+		let notespopout = BDFDB.htmlToElement(this.notesPopoutMarkup);
+		container.appendChild(notespopout);
+		BDFDB.initElements(notespopout);
+		let buttonrects = button.getBoundingClientRect(); 
+		notespopout.style.setProperty("left", buttonrects.left + buttonrects.width/2 + "px");
+		notespopout.style.setProperty("top", buttonrects.top + buttonrects.height + "px")
+		notespopout.querySelectorAll(BDFDB.dotCN.tabbarheaderitem).forEach(tab => {tab.addEventListener("click", () => {
+			this.addNotes(notespopout);
+		});});
+		notespopout.querySelector(BDFDB.dotCN.searchbarinput).addEventListener("keyup", () => {
+			clearTimeout(notespopout.searchTimeout);
+			notespopout.searchTimeout = setTimeout(() => {this.addNotes(notespopout);},1000);
+		});
+		notespopout.querySelector(BDFDB.dotCN.searchbarclear).addEventListener("click", e => {
+			clearTimeout(notespopout.searchTimeout);
+			notespopout.searchTimeout = setTimeout(() => {this.addNotes(notespopout);},1000);
+		});
+		notespopout.querySelector(BDFDB.dotCN.recentmentionsmentionfilter).addEventListener("click", e => {
+			BDFDB.createSortPopout(e.currentTarget, this.sortPopoutMarkup, () => {this.addNotes(notespopout);});
+		});
+		
+		var removePopout = (e) => {
+			if (!notespopout.contains(e.target) && !BDFDB.getParentEle(".personalpins-sort-popout", e.target)) {
+				document.removeEventListener("mousedown", removePopout);
+				notespopout.remove();
+				setTimeout(() => {button.classList.remove("popout-open");},300);
 			}
-			else {
+		};
-				$(this.popoutPinEntryMarkup)
+		document.addEventListener("mousedown", removePopout);
-					.on("click." + this.getName(), () => {
+		
-						this.addMessageToNotes(instance.props.message, instance._reactInternalFiber.memoizedProps.target, instance.props.channel);
+		this.addNotes(notespopout);
-						instance.props.onClose();
+	}
-					})
+	
-					.appendTo(wrapper);
+	addNotes (notespopout) {
+		BDFDB.removeEles(notespopout.querySelectorAll(BDFDB.dotCNC.messagegroupwrapper + BDFDB.dotCN.messagespopoutchannelseparator));
+		let channel = BDFDB.getSelectedChannel();
+		if (channel) {
+			let guild_id = channel.guild_id ? channel.guild_id : "@me";
+			let pins = BDFDB.loadAllData(this, "pins");
+			if (!BDFDB.isObjectEmpty(pins)) {
+				let container = notespopout.querySelector(BDFDB.dotCN.messagespopout);
+				let placeholder = notespopout.querySelector(BDFDB.dotCN.messagespopoutemptyplaceholder);
+				if (!container || !placeholder) return;
+				placeholder.querySelector(BDFDB.dotCN.messagespopoutimage).style.setProperty("background-image", `url(${BDFDB.getDiscordTheme() == BDFDB.disCN.themelight ? "/assets/03c7541028afafafd1a9f6a81cb7f149.svg" : "/assets/6793e022dc1b065b21f12d6df02f91bd.svg"})`);
+				let notes = {};
+				switch (notespopout.querySelector(BDFDB.dotCN.tabbarheaderitem + BDFDB.dotCN.settingsitemselected).getAttribute("tab")) {
+					case "channel":
+						notes = pins[guild_id] && pins[guild_id][channel.id] ? pins[guild_id][channel.id] : {};
+						break;
+					case "server":
+						if (pins[guild_id]) for (let channel in pins[guild_id]) notes = Object.assign(notes, pins[guild_id][channel]); 
+						break;
+					case "allservers":
+						for (let server in pins) if (pins[server]) for (let channel in pins[server]) notes = Object.assign(notes, pins[server][channel]); 
+						break;
+				}
+				let noteArray = [];
+				for (let id in notes) {noteArray.push(notes[id]);}
+				BDFDB.sortArrayByKey(noteArray, notespopout.querySelector(BDFDB.dotCN.recentmentionsmentionfiltervalue).getAttribute("option"));
+				for (let noteData of noteArray) this.appendNote(container, noteData, placeholder);
+				let searchstring = notespopout.querySelector(BDFDB.dotCN.searchbarinput).value.replace(/[<|>]/g, "");
+				if (searchstring) for (let note of notespopout.querySelectorAll(BDFDB.dotCN.messagegroupwrapper)) {
+					note.innerHTML = BDFDB.highlightText(note.innerHTML, searchstring);
+					if (!note.querySelector(BDFDB.dotCN.highlight)) {
+						note.previousSibling.remove();
+						note.remove();
+					}
+				}
+				if (container.firstElementChild == placeholder) placeholder.style.removeProperty("display");
+				else placeholder.style.setProperty("display", "none", "important");
 			}
 		}
 	}
 	
-	openNotesPopout (e) {
+	appendNote (container, noteData, placeholder) {
-		let wrapper = e.currentTarget;
+		if (!container || !noteData) return;
-		if (wrapper.classList.contains("popout-open")) return;
+		let server = this.GuildUtils.getGuild(noteData.guild_id) || {};
-		wrapper.classList.add("popout-open");
+		let channel = this.ChannelUtils.getChannel(noteData.channel_id) || {};
-		let popout = $(this.notesPopoutMarkup);
+		let user = this.UserUtils.getUser(noteData.author_id) || {};
-		BDFDB.initElements(popout);
+		let member = this.MemberUtils.getMember(noteData.guild_id, noteData.author_id) || {};
-		let wrappersize = wrapper.getBoundingClientRect(); 
+		let date = new Date(noteData.timestamp);
-		popout
+		let message = BDFDB.htmlToElement(this.messageMarkup);
-			.appendTo(BDFDB.dotCN.popouts)
+		let messagedivider = BDFDB.htmlToElement(this.messageDividerMarkup);
-			.css("left", wrappersize.width/2 + wrappersize.left + "px")
+		container.insertBefore(message, container.firstChild);
-			.css("top", wrappersize.height + wrappersize.top + "px")
+		container.insertBefore(messagedivider, container.firstChild);
-			.on("click", ".tab:not(.selected)", () => {
+		let channelname = messagedivider.querySelector(BDFDB.dotCN.messagespopoutchannelname);
-				this.addNotes(popout[0]);
+		channelname.innerText = (noteData.guild_id == "@me" ? " @" : " #") + (channel.name || noteData.channel_name);
-			})
+		if (noteData.guild_id != "@me" && BDFDB.isPluginEnabled("EditChannels")) {
-			.on("keyup." + this.getName(), BDFDB.dotCN.searchbarinput, () => {
+			bdplugins.EditChannels.plugin.changeChannel2({id:noteData.channel_id,name:noteData.channel_name}, channelname);
-				clearTimeout(popout.searchTimeout);
+		}
-				popout.searchTimeout = setTimeout(() => {this.addNotes(popout[0]);},1000);
+		else if (noteData.guild_id == "@me" && BDFDB.isPluginEnabled("EditUsers")) {
-			})
+			let dmuser_id = channel && channel.type == 1 ? channel.recipients[0] : noteData.dmuser_id;
-			.on("click." + this.getName(), BDFDB.dotCN.searchbarclear + BDFDB.dotCN.searchbarvisible, () => {
+			if (dmuser_id) {
-				clearTimeout(popout.searchTimeout);
+				bdplugins.EditUsers.plugin.changeName2({id:dmuser_id,username:noteData.channel_name}, channelname);
-				popout.searchTimeout = setTimeout(() => {this.addNotes(popout[0]);},1000);
+				if (channelname.innerText.indexOf("@") != 0) channelname.innerText = "@" + channelname.innerText;
-			})
+			}
-			.on("click", BDFDB.dotCN.quickselectclick, (e2) => {
+		}
-				this.openSortPopout(e2, popout[0]);
+		let guildname = messagedivider.querySelector(BDFDB.dotCN.messagespopoutguildname);
-			});
+		guildname.innerText = server.name || noteData.guild_name;
-			
+		let avatar = message.querySelector(BDFDB.dotCN.avatarimage);
-		$(document).on("mousedown.notepopout" + this.getName(), (e2) => {
+		avatar.style.setProperty("background-image", `url(${user.id ? BDFDB.getUserAvatar(user.id) : noteData.avatar})`);
-			if (popout.has(e2.target).length == 0 && $(".personalpins-sort-popout").has(e2.target).length == 0) {
+		let username = message.querySelector(BDFDB.dotCN.messageusername);
-				$(document).off("mousedown.notepopout" + this.getName());
+		username.innerText = user.username || noteData.author_name;
-				popout.remove();
+		username.style.setProperty("color", member.colorString || noteData.color);
-				setTimeout(() => {wrapper.classList.remove("popout-open");},300);
+		if (BDFDB.isPluginEnabled("EditUsers")) {
+			bdplugins.EditUsers.plugin.changeName({id:noteData.author_id,username:noteData.author_name}, username, noteData.guild_id);
+			if (user.id) bdplugins.EditUsers.plugin.changeAvatar({id:noteData.author_id,username:noteData.author_name}, avatar);
+			bdplugins.EditUsers.plugin.addTag({id:noteData.author_id,username:noteData.author_name}, username.parentElement, " " + BDFDB.disCN.bottagnametag);
+		}
+		let timestamp = message.querySelector(BDFDB.dotCN.messagetimestampcozy);
+		timestamp.innerText = date.toLocaleString(BDFDB.getDiscordLanguage().id);
+		timestamp.setAttribute("datetime", date);
+		if (BDFDB.isPluginEnabled("CompleteTimestamps")) bdplugins.CompleteTimestamps.plugin.changeTimestamp(timestamp);
+		message.querySelector(BDFDB.dotCN.messagemarkup).innerHTML = noteData.markup.replace(`<span class="edited">`,`<span class="${BDFDB.disCN.messageedited}">`);
+		message.querySelector(BDFDB.dotCN.messageaccessory).innerHTML = noteData.accessory;
+		if (noteData.accessory) {
+			let ytvideo = message.querySelector(BDFDB.dotCN.embed + " iframe[src*='https://www.youtube.com']");
+			if (ytvideo) {
+				let ytlink = ytvideo.parentElement.parentElement.querySelector(BDFDB.dotCN.embedtitle).href;
+				let wrapper = ytvideo.parentElement;
+				ytvideo.remove();
+				require("request")(ytlink, (error, response, result) => {
+					if (result) {
+						wrapper.innerHTML = `<a class="${BDFDB.disCNS.imagewrapper + BDFDB.disCN.imagezoom}" href="" rel="noreferrer noopener" target="_blank" style="width: 400px; height: 225px;"><img alt="" src="${result.split('<link itemprop="thumbnailUrl" href="')[1].split('"')[0]}" style="width: 400px; height: 225px;"></a><div class="${BDFDB.disCNS.embedvideoactions + BDFDB.disCNS.flexcenter + BDFDB.disCNS.flex + BDFDB.disCNS.justifycenter + BDFDB.disCN.aligncenter}"><div class="${BDFDB.disCNS.embedvideoactionsinner + BDFDB.disCNS.flexcenter + BDFDB.disCNS.flex + BDFDB.disCNS.justifycenter + BDFDB.disCN.aligncenter}"><div class="${BDFDB.disCN.iconactionswrapper}"><div tabindex="0" class="${BDFDB.disCNS.iconwrapper + BDFDB.disCN.iconwrapperactive}" role="button"><svg name="Play" class="${BDFDB.disCNS.iconplay + BDFDB.disCN.icon}" width="16" height="16" viewBox="0 0 24 24"><polygon fill="currentColor" points="0 0 0 14 11 7" transform="translate(7 5)"></polygon></svg></div><a class="${BDFDB.disCNS.anchor + BDFDB.disCN.iconwrapper}" href="${ytlink}" rel="noreferrer noopener" target="_blank"><svg name="OpenExternal" class="${BDFDB.disCNS.iconexternalmargins + BDFDB.disCN.icon}" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" transform="translate(3.000000, 4.000000)" d="M16 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4v-2H2V4h14v10h-4v2h4c1.1 0 2-.9 2-2V2a2 2 0 0 0-2-2zM9 6l-4 4h3v6h2v-6h3L9 6z"></path></svg></a></div></div></div></div>`;
+						wrapper.querySelector(BDFDB.dotCN.iconplay).addEventListener("click", (e) => {
+							while (wrapper.firstChild) wrapper.firstChild.remove();
+							let width = 400;
+							let height = Math.round(width*(result.split('<meta itemprop="height" content="')[1].split('"')[0]/result.split('<meta itemprop="width" content="')[1].split('"')[0]));
+							wrapper.appendChild(BDFDB.htmlToElement(`<iframe src="${result.split('<link itemprop="embedURL" href="')[1].split('"')[0]}?start=0&amp;autoplay=1&amp;auto_play=1" width="${width}" height="${height}" frameborder="0" allowfullscreen=""></iframe>`));
+						});
+					}
+				});
+			}
+		}
+		messagedivider.querySelector(BDFDB.dotCN.messagespopoutchannelname).addEventListener("click", (e) => {
+			if (!BDFDB.isObjectEmpty(channel)) {
+				notespopout.remove();
+				this.SelectChannelUtils.selectChannel(server.id, channel.id);
+			}
+			else BDFDB.shake();
+		});
+		message.querySelector(BDFDB.dotCN.messagespopoutclosebutton).addEventListener("click", (e) => {
+			messagedivider.remove();
+			message.remove();
+			this.removeNoteData(noteData);
+			if (container.firstElementChild == placeholder) placeholder.style.removeProperty("display");
+		});
+		message.querySelector(BDFDB.dotCN.messagespopoutjumpbutton + ".jump").addEventListener("click", (e) => {
+			this.HistoryUtils.transitionTo(this.MainDiscord.Routes.MESSAGE(noteData.guild_id, noteData.channel_id, noteData.id));
+		});
+		message.querySelector(BDFDB.dotCN.messagespopoutjumpbutton + ".copy").addEventListener("click", (e) => {
+			let clipboard = require("electron").clipboard;
+			if (noteData.content) clipboard.write({text: noteData.content});
+			else {
+				let image = message.querySelector(BDFDB.dotCNS.imagewrapper + "img");
+				if (image) {
+					// stolen from Image2Clipboard
+					require("request")({url: image.src, encoding: null}, (error, response, buffer) => {
+						if (buffer) {
+							let platform = require("process").platform;
+							if (platform === "win32" || platform === "darwin") {
+								clipboard.write({image: require("electron").nativeImage.createFromBuffer(buffer)});
+							}
+							else {
+								let file = require("path").join(require("process").env["HOME"], "personalpinstemp.png");
+								require("fs").writeFileSync(file, buffer, {encoding: null});
+								clipboard.write({image: file});
+								require("fs").unlinkSync(file);
+							}
+						}
+					});
+				}
 			}
 		});
-		
-		this.addNotes(popout[0]);
-	}
-	
-	openSortPopout (e, notespopout) {
-		let wrapper = e.currentTarget;
-		if (wrapper.classList.contains("popout-open")) return;
-		wrapper.classList.add("popout-open");
-		let value = $(wrapper).find(BDFDB.dotCN.quickselectvalue);
-		let popout = $(this.sortPopoutMarkup);
-		$(BDFDB.dotCN.popouts).append(popout)
-			.off("click", BDFDB.dotCN.contextmenuitem)
-			.on("click", BDFDB.dotCN.contextmenuitem, (e2) => {
-				value.text($(e2.currentTarget).text());
-				value.attr("option", $(e2.currentTarget).attr("option"));
-				$(document).off("mousedown.sortpopout" + this.getName());
-				popout.remove();
-				setTimeout(() => {wrapper.classList.remove("popout-open");},300);
-				this.addNotes(notespopout);
-			});
-			
-		popout
-			.css("left", $(e.currentTarget).offset().left + $(e.currentTarget).outerWidth() + "px")
-			.css("top", $(e.currentTarget).offset().top + value.outerHeight() + "px")
-			.find(BDFDB.dotCN.contextmenu).addClass(BDFDB.getDiscordTheme());
-			
-		$(document).on("mousedown.sortpopout" + this.getName(), (e2) => {
-			if (popout.has(e2.target).length == 0) {
-				$(document).off("mousedown.sortpopout" + this.getName());
-				popout.remove();
-				setTimeout(() => {wrapper.classList.remove("popout-open");},300);
-			}
-		});
-	}
-	
-	getMessageAndPos (target) {
-		let messagediv = BDFDB.getParentEle(BDFDB.dotCN.message, target);
-		let pos = Array.from(messagediv.parentElement.querySelectorAll(BDFDB.dotCN.message)).indexOf(messagediv);
-		return {messagediv, pos};
 	}
 	
 	addMessageToNotes (message, target, channel) {
 		if (!message || !target) return;
 		let {messagediv, pos} = this.getMessageAndPos(target);
 		if (!messagediv || pos == -1) return;
-		channel = channel ? channel : this.ChannelUtils.getChannel(message.channel_id);
-		let guild = this.GuildUtils.getGuild(channel.guild_id) || {};
-		let channelID = channel.id;
-		let serverID = guild.id ? guild.id : "@me";
 		let pins = BDFDB.loadAllData(this, "pins");
-		pins[serverID] = pins[serverID] ? pins[serverID] : {}
+		let guild = this.GuildUtils.getGuild(channel.guild_id) || {};
-		pins[serverID][channelID] = pins[serverID][channelID] ? pins[serverID][channelID] : {}
+		let guild_id = guild.id ? guild.id : "@me";
-		let messageID = message.id;
+		channel = channel ? channel : this.ChannelUtils.getChannel(message.channel_id);
-		let channelname = channel.name;
+		pins[guild_id] = pins[guild_id] || {}
-		if (!channelname && channel.recipients.length > 0) {
+		pins[guild_id][channel.id] = pins[guild_id][channel.id] || {}
-			for (let dmmemberID of channel.recipients) {
+		if (!pins[guild_id][channel.id][message.id + "_" + pos]) {
-				channelname = channelname ? channelname + ", @" : channelname;
+			let channelname = channel.name;
-				channelname = channelname + this.UserUtils.getUser(dmmemberID).username;
+			if (!channelname && channel.recipients.length > 0) {
+				for (let dmuser_id of channel.recipients) {
+					channelname = channelname ? channelname + ", @" : channelname;
+					channelname = channelname + this.UserUtils.getUser(dmuser_id).username;
+				}
 			}
+			let markup = messagediv.querySelector(BDFDB.dotCN.messagemarkup).cloneNode(true);
+			markup.querySelectorAll(BDFDB.dotCN.messageheadercompact).forEach(h2 => {h2.remove();});
+			pins[guild_id][channel.id][message.id + "_" + pos] = BDFDB.sortObject({
+				"guild_id": guild_id,
+				"guild_name": guild.name ? guild.name : "Direct Messages",
+				"channel_id": channel.id,
+				"channel_name": channelname,
+				"dmuser_id": channel.type == 1 ? channel.recipients[0] : null,
+				"id": message.id,
+				"pos": pos,
+				"timestamp": message.timestamp._i.getTime(),
+				"addedat": new Date().getTime(),
+				"color": message.colorString,
+				"author_id": message.author.id,
+				"author_name": message.author.username,
+				"avatar": BDFDB.getUserAvatar(message.author.id),
+				"content": message.content,
+				"markup": markup.innerHTML,
+				"accessory": messagediv.querySelector(BDFDB.dotCN.messageaccessory).innerHTML
+			});
+			BDFDB.saveAllData(pins, this, "pins");
+			BDFDB.showToast(this.labels.toast_noteadd_text, {type:"success"});
 		}
-		let markup = messagediv.querySelector(BDFDB.dotCN.messagemarkup).cloneNode(true);
+		else this.removeNoteData(pins[guild_id][channel.id][message.id + "_" + pos]);
-		markup.querySelectorAll(BDFDB.dotCN.messageheadercompact).forEach(h2 => {h2.remove();});
-		pins[serverID][channelID][messageID + "_" + pos] = {
-			"serverID": serverID,
-			"serverName": guild.name ? guild.name : "Direct Messages",
-			"channelID": channelID,
-			"channelName": channelname,
-			"dmUserID": channel.type == 1 ? channel.recipients[0] : null,
-			"id": messageID,
-			"pos": pos,
-			"timestamp": message.timestamp._i.getTime(),
-			"addedat": new Date().getTime(),
-			"color": message.colorString,
-			"authorID": message.author.id,
-			"authorName": message.author.username,
-			"avatar": BDFDB.getUserAvatar(message.author.id),
-			"content": message.content,
-			"markup": markup.innerHTML,
-			"accessory": messagediv.querySelector(BDFDB.dotCN.messageaccessory).innerHTML
-		};
-		BDFDB.saveAllData(pins, this, "pins");
-		BDFDB.showToast(this.labels.toast_noteadd_text, {type:"success"});
 	}
 	
-	addNotes (notespopout) {
+	getNoteData (message, target, channel) {
-		BDFDB.removeEles(".popout-personalpins-notes " + BDFDB.dotCN.messagegroupwrapper, ".popout-personalpins-notes " + BDFDB.dotCN.messagespopoutchannelseparator);
+		if (!message || !target) return;
-		let channelObj = BDFDB.getSelectedChannel();
+		let {messagediv, pos} = this.getMessageAndPos(target);
-		if (channelObj) {
+		if (!messagediv || pos == -1) return;
-			let serverID = channelObj.guild_id ? channelObj.guild_id : "@me";
+		channel = channel ? channel : this.ChannelUtils.getChannel(message.channel_id);
-			let channelID = channelObj.id;
-			let pins = BDFDB.loadAllData(this, "pins");
-			if (!BDFDB.isObjectEmpty(pins)) {
-				let container = notespopout.querySelector(BDFDB.dotCN.messagespopout);
-				let placeholder = notespopout.querySelector(BDFDB.dotCN.messagespopoutemptyplaceholder);
-				placeholder.querySelector(BDFDB.dotCN.messagespopoutimage).style.setProperty("background-image", `url(${BDFDB.getDiscordTheme() == BDFDB.disCN.themelight ? "/assets/03c7541028afafafd1a9f6a81cb7f149.svg" : "/assets/6793e022dc1b065b21f12d6df02f91bd.svg"})`);
-				let messages = {};
-				switch (notespopout.querySelector(".tab.selected").getAttribute("tab")) {
-					case "channel":
-						messages = pins[serverID] && pins[serverID][channelID] ? pins[serverID][channelID] : {};
-						break;
-					case "server":
-						if (pins[serverID]) for (let channel in pins[serverID]) messages = Object.assign(messages, pins[serverID][channel]); 
-						break;
-					case "allservers":
-						for (let server in pins) if (pins[server]) for (let channel in pins[server]) messages = Object.assign(messages, pins[server][channel]); 
-						break;
-				}
-				let messageArray = [];
-				for (let id in messages) {
-					messageArray.push(messages[id]);
-				}
-				BDFDB.sortArrayByKey(messageArray, notespopout.querySelector(BDFDB.dotCN.quickselectvalue).getAttribute("option"));
-				for (let messageData of messageArray) {
-					let server = this.GuildUtils.getGuild(messageData.serverID) || {};
-					let channel = this.ChannelUtils.getChannel(messageData.channelID) || {};
-					let user = this.UserUtils.getUser(messageData.authorID) || {};
-					let member = this.MemberUtils.getMember(messageData.serverID, messageData.authorID) || {};
-					let date = new Date(messageData.timestamp);
-					let message = $(this.messageMarkup)[0];
-					let messagedivider = $(this.messageDividerMarkup)[0];
-					container.insertBefore(message, container.firstChild);
-					container.insertBefore(messagedivider, container.firstChild);
-					let channelname = messagedivider.querySelector(BDFDB.dotCN.messagespopoutchannelname);
-					channelname.innerText = (messageData.serverID == "@me" ? " @" : " #") + (channel.name || messageData.channelName);
-					if (messageData.serverID != "@me" && BDFDB.isPluginEnabled("EditChannels")) {
-						bdplugins.EditChannels.plugin.changeChannel2({id:messageData.channelID,name:messageData.channelName}, channelname);
-					}
-					else if (messageData.serverID == "@me" && BDFDB.isPluginEnabled("EditUsers")) {
-						let dmUserID = channel && channel.type == 1 ? channel.recipients[0] : messageData.dmUserID;
-						if (dmUserID) {
-							bdplugins.EditUsers.plugin.changeName2({id:dmUserID,username:messageData.channelName}, channelname);
-							channelname.innerText = "@" + channelname.innerText;
-						}
-					}
-					let guildname = messagedivider.querySelector(BDFDB.dotCN.messagespopoutguildname);
-					guildname.innerText = server.name || messageData.serverName;
-					let avatar = message.querySelector(BDFDB.dotCN.avatarimage);
-					avatar.style.setProperty("background-image", `url(${user.id ? BDFDB.getUserAvatar(user.id) : messageData.avatar})`);
-					let username = message.querySelector(BDFDB.dotCN.messageusername);
-					username.innerText = user.username || messageData.authorName;
-					username.style.setProperty("color", member.colorString || messageData.color);
-					if (BDFDB.isPluginEnabled("EditUsers")) {
-						bdplugins.EditUsers.plugin.changeName({id:messageData.authorID,username:messageData.authorName}, username, messageData.serverID);
-						if (user.id) bdplugins.EditUsers.plugin.changeAvatar({id:messageData.authorID,username:messageData.authorName}, avatar);
-						bdplugins.EditUsers.plugin.addTag({id:messageData.authorID,username:messageData.authorName}, username.parentElement, " " + BDFDB.disCN.bottagnametag);
-					}
-					let timestamp = message.querySelector(BDFDB.dotCN.messagetimestampcozy);
-					timestamp.innerText = date.toLocaleString(BDFDB.getDiscordLanguage().id);
-					timestamp.setAttribute("datetime", date);
-					if (BDFDB.isPluginEnabled("CompleteTimestamps")) bdplugins.CompleteTimestamps.plugin.changeTimestamp(timestamp);
-					message.querySelector(BDFDB.dotCN.messagemarkup).innerHTML = messageData.markup.replace(`<span class="edited">`,`<span class="${BDFDB.disCN.messageedited}">`);
-					message.querySelector(BDFDB.dotCN.messageaccessory).innerHTML = messageData.accessory;
-					if (messageData.accessory) {
-						let ytvideo = message.querySelector(BDFDB.dotCN.embed + " iframe[src*='https://www.youtube.com']");
-						if (ytvideo) {
-							let ytlink = ytvideo.parentElement.parentElement.querySelector(BDFDB.dotCN.embedtitle).href;
-							let wrapper = ytvideo.parentElement;
-							ytvideo.remove();
-							require("request")(ytlink, (error, response, result) => {
-								if (result) {
-									wrapper.innerHTML = `<a class="${BDFDB.disCNS.imagewrapper + BDFDB.disCN.imagezoom}" href="" rel="noreferrer noopener" target="_blank" style="width: 400px; height: 225px;"><img alt="" src="${result.split('<link itemprop="thumbnailUrl" href="')[1].split('"')[0]}" style="width: 400px; height: 225px;"></a><div class="${BDFDB.disCNS.embedvideoactions + BDFDB.disCNS.flexcenter + BDFDB.disCNS.flex + BDFDB.disCNS.justifycenter + BDFDB.disCN.aligncenter}"><div class="${BDFDB.disCNS.embedvideoactionsinner + BDFDB.disCNS.flexcenter + BDFDB.disCNS.flex + BDFDB.disCNS.justifycenter + BDFDB.disCN.aligncenter}"><div class="${BDFDB.disCN.iconactionswrapper}"><div tabindex="0" class="${BDFDB.disCNS.iconwrapper + BDFDB.disCN.iconwrapperactive}" role="button"><svg name="Play" class="${BDFDB.disCNS.iconplay + BDFDB.disCN.icon}" width="16" height="16" viewBox="0 0 24 24"><polygon fill="currentColor" points="0 0 0 14 11 7" transform="translate(7 5)"></polygon></svg></div><a class="${BDFDB.disCNS.anchor + BDFDB.disCN.iconwrapper}" href="${ytlink}" rel="noreferrer noopener" target="_blank"><svg name="OpenExternal" class="${BDFDB.disCNS.iconexternalmargins + BDFDB.disCN.icon}" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" transform="translate(3.000000, 4.000000)" d="M16 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4v-2H2V4h14v10h-4v2h4c1.1 0 2-.9 2-2V2a2 2 0 0 0-2-2zM9 6l-4 4h3v6h2v-6h3L9 6z"></path></svg></a></div></div></div></div>`;
-									$(wrapper).on("click." + this.getName(), BDFDB.dotCN.iconplay, (e) => {
-										while (wrapper.firstChild) wrapper.firstChild.remove();
-										let width = 400;
-										let height = Math.round(width*(result.split('<meta itemprop="height" content="')[1].split('"')[0]/result.split('<meta itemprop="width" content="')[1].split('"')[0])); 
-										$(`<iframe src="${result.split('<link itemprop="embedURL" href="')[1].split('"')[0]}?start=0&amp;autoplay=1&amp;auto_play=1" width="${width}" height="${height}" frameborder="0" allowfullscreen=""></iframe>`).appendTo(wrapper);
-									});
-								}
-							});
-						}
-					}
-					$(messagedivider)
-						.on("click." + this.getName(), BDFDB.dotCN.messagespopoutchannelname, (e) => {
-							if (!BDFDB.isObjectEmpty(channel)) {
-								notespopout.remove();
-								this.SelectChannelUtils.selectChannel(server.id, channel.id);
-							}
-							else BDFDB.shake();
-						});
-					$(message)
-						.on("click." + this.getName(), BDFDB.dotCN.messagespopoutclosebutton, (e) => {
-							messagedivider.remove();
-							message.remove();
-							this.removeNoteData(messageData, channel, messageData.pos);
-							if (!container.querySelector(BDFDB.dotCN.messagegroup)) $(placeholder).show();
-						})
-						.on("click." + this.getName(), BDFDB.dotCN.messagespopoutjumpbutton + ".jump", (e) => {
-							this.HistoryUtils.transitionTo(this.MainDiscord.Routes.MESSAGE(messageData.serverID, messageData.channelID, messageData.id));
-						})
-						.on("click." + this.getName(), BDFDB.dotCN.messagespopoutjumpbutton + ".copy", (e) => {
-							let clipboard = require("electron").clipboard;
-							if (messageData.content) clipboard.write({text: messageData.content});
-							else {
-								let image = message.querySelector(BDFDB.dotCNS.imagewrapper + "img");
-								if (image) {
-									// stolen from Image2Clipboard
-									require("request")({url: image.src, encoding: null}, (error, response, buffer) => {
-										if (buffer) {
-											let platform = require("process").platform;
-											if (platform === "win32" || platform === "darwin") {
-												clipboard.write({image: require("electron").nativeImage.createFromBuffer(buffer)});
-											}
-											else {
-												let file = require("path").join(require("process").env["HOME"], "personalpinstemp.png");
-												require("fs").writeFileSync(file, buffer, {encoding: null});
-												clipboard.write({image: file});
-												require("fs").unlinkSync(file);
-											}
-										}
-									});
-								}
-							}
-						});
-				}
-				let searchstring = notespopout.querySelector(BDFDB.dotCN.searchbarinput).value.replace(/[<|>]/g, "");
-				if (searchstring) for (let note of notespopout.querySelectorAll(BDFDB.dotCN.messagegroup)) {
-					note.innerHTML = BDFDB.highlightText(note.innerHTML, searchstring);
-					if (!note.querySelector(BDFDB.dotCN.highlight)) note.remove();
-				}
-				$(placeholder).toggle(notespopout.querySelectorAll(BDFDB.dotCN.messagegroup).length == 0);
-			}
-		}
-	}
-	
-	getNoteData (message, channel, pos) {
 		let pins = BDFDB.loadAllData(this, "pins");
 		let guildid = channel.guild_id ? channel.guild_id : "@me";
 		return pins[guildid] && pins[guildid][channel.id] && pins[guildid][channel.id][message.id + "_" + pos] ? pins[guildid][channel.id][message.id + "_" + pos] : null;
 	}
 	
-	removeNoteData (message, channel, pos) {
+	removeNoteData (noteData) {
-		if (!message || !channel) return;
 		let pins = BDFDB.loadAllData(this, "pins");
-		let guildid = channel.guild_id ? channel.guild_id : "@me";
+		delete pins[noteData.guild_id][noteData.channel_id][noteData.id + "_" + noteData.pos];
-		delete pins[guildid][channel.id][message.id + "_" + pos];
+		if (BDFDB.isObjectEmpty(pins[noteData.guild_id][noteData.channel_id])) {
-		if (BDFDB.isObjectEmpty(pins[guildid][channel.id])) {
+			delete pins[noteData.guild_id][noteData.channel_id];
-			delete pins[guildid][channel.id];
+			if (BDFDB.isObjectEmpty(pins[noteData.guild_id])) delete pins[noteData.guild_id];
-			if (BDFDB.isObjectEmpty(pins[guildid])) delete pins[guildid];
 		}
 		BDFDB.saveAllData(pins, this, "pins");
 		BDFDB.showToast(this.labels.toast_noteremove_text, {type:"danger"});
 	}
 	
+	getMessageAndPos (target) {
+		let messagediv = BDFDB.getParentEle(BDFDB.dotCN.message, target);
+		let pos = Array.from(messagediv.parentElement.querySelectorAll(BDFDB.dotCN.message)).indexOf(messagediv);
+		return {messagediv, pos};
+	}
+	
 	setLabelsByLanguage () {
 		switch (BDFDB.getDiscordLanguage().id) {
 			case "hr":		//croatian

Plugins/PluginRepo/PluginRepo.plugin.js

@@ -1,6 +1,14 @@
 //META{"name":"PluginRepo"}*// 
 
 class PluginRepo {
+	getName () {return "PluginRepo";}
+
+	getVersion () {return "1.6.6";}
+
+	getAuthor () {return "DevilBro";}
+
+	getDescription () {return "Allows you to look at all plugins from the plugin repo and download them on the fly. Repo button is in the plugins settings.";}
+	
 	initConstructor () {
 		this.patchModules = {
 			"V2C_List":"componentDidMount"
@@ -82,7 +90,7 @@ class PluginRepo {
 				<div class="${BDFDB.disCN.modal}">
 					<div class="${BDFDB.disCN.modalinner}">
 						<div class="${BDFDB.disCN.modalsub}">
-							<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.modalheader}" style="flex: 0 0 auto; padding: 20px 20px 0 20px;">
+							<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.modalheader}" style="flex: 0 0 auto; padding-bottom: 10px;">
 								<div class="${BDFDB.disCN.flexchild}" style="flex: 1 1 auto;">
 									<h4 class="${BDFDB.disCNS.h4 + BDFDB.disCNS.headertitle + BDFDB.disCNS.size16 + BDFDB.disCNS.height20 + BDFDB.disCNS.weightsemibold + BDFDB.disCNS.defaultcolor + BDFDB.disCNS.h4defaultmargin + BDFDB.disCN.marginreset} pluginAmount">Plugin Repository</h4>
 									<div class="${BDFDB.disCNS.modalguildname + BDFDB.disCNS.small + BDFDB.disCNS.size12 + BDFDB.disCNS.height16 + BDFDB.disCN.primary}"></div>
@@ -94,24 +102,26 @@ class PluginRepo {
 									</g>
 								</svg>
 							</div>
-							<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCNS.modalheader + BDFDB.disCN.marginbottom20}" style="flex: 0 0 auto; padding: 10px 20px 0px 20px;">
+							<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCNS.marginbottom8 + BDFDB.disCN.tabbarcontainer}" style="flex: 0 0 auto; padding-right: 12px;">
-								<div tab="plugins" class="tab selected">Plugins</div>
+								<div class="${BDFDB.disCNS.tabbar + BDFDB.disCN.tabbartop}">
-								<div tab="settings" class="tab">Settings</div>
+									<div tab="plugins" class="${BDFDB.disCNS.settingsitemdefault + BDFDB.disCNS.settingsitem + BDFDB.disCNS.settingsnotselected + BDFDB.disCN.tabbaritem}">Plugins</div>
-								<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.alignstretch + BDFDB.disCNS.nowrap + BDFDB.disCNS.searchbar + BDFDB.disCN.size14}" style="flex: 1 1 auto; margin: -15px 5px 0 0;">
+									<div tab="settings" class="${BDFDB.disCNS.settingsitemdefault + BDFDB.disCNS.settingsitem + BDFDB.disCNS.settingsnotselected + BDFDB.disCN.tabbaritem}">Settings</div>
+								</div>
+								<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.alignstretch + BDFDB.disCNS.nowrap + BDFDB.disCNS.searchbar + BDFDB.disCN.size14}" style="flex: 1 1 auto;">
 									<input class="${BDFDB.disCN.searchbarinput}" value="" placeholder="Search for ..." style="flex: 1 1 auto;">
 									<div class="${BDFDB.disCN.searchbariconwrap}">
 										<i class="${BDFDB.disCNS.searchbaricon + BDFDB.disCNS.searchbareyeglass + BDFDB.disCN.searchbarvisible}"/>
 										<i class="${BDFDB.disCNS.searchbaricon + BDFDB.disCN.searchbarclear}"/>
 									</div>
 								</div>
-								<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.quickselect}" style="padding-bottom: 15px;">
+								<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.quickselect}">
 									<div class="${BDFDB.disCN.quickselectlabel}">Sort by:</div>
 									<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.quickselectclick} sort-filter" style="flex: 0 0 auto;">
 										<div option="${Object.keys(this.sortings.sort)[0]}" class="${BDFDB.disCN.quickselectvalue}">${this.sortings.sort[Object.keys(this.sortings.sort)[0]]}</div>
 										<div class="${BDFDB.disCN.quickselectarrow}"></div>
 									</div>
 								</div>
-								<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.quickselect}" style="padding-bottom: 15px;">
+								<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.quickselect}">
 									<div class="${BDFDB.disCN.quickselectlabel}">Order:</div>
 									<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.quickselectclick} order-filter" style="flex: 0 0 auto;">
 										<div option="${Object.keys(this.sortings.order)[0]}" class="${BDFDB.disCN.quickselectvalue}">${this.sortings.order[Object.keys(this.sortings.order)[0]]}</div>
@@ -215,14 +225,6 @@ class PluginRepo {
 			}`;
 	}
 	
-	getName () {return "PluginRepo";}
-
-	getDescription () {return "Allows you to look at all plugins from the plugin repo and download them on the fly. Repo button is in the plugins settings.";}
-
-	getVersion () {return "1.6.5";}
-
-	getAuthor () {return "DevilBro";}
-	
 	getSettingsPanel () {
 		if (!this.started || typeof BDFDB !== "object") return;
 		var settingshtml = `<div class="${this.getName()}-settings DevilBro-settings"><div class="${BDFDB.disCNS.titledefault + BDFDB.disCNS.title + BDFDB.disCNS.size18 + BDFDB.disCNS.height24 + BDFDB.disCNS.weightnormal + BDFDB.disCN.marginbottom8}">${this.getName()}</div><div class="DevilBro-settings-inner">`;
@@ -237,7 +239,7 @@ class PluginRepo {
 		settingshtml += `<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.marginbottom20}" style="flex: 0 0 auto;"><h3 class="${BDFDB.disCNS.titledefault + BDFDB.disCNS.title + BDFDB.disCNS.marginreset + BDFDB.disCNS.weightmedium + BDFDB.disCNS.size16 + BDFDB.disCNS.height24 + BDFDB.disCN.flexchild}" style="flex: 1 1 auto;">Remove all added Plugins from your own list.</h3><button type="button" class="${BDFDB.disCNS.flexchild + BDFDB.disCNS.button + BDFDB.disCNS.buttonlookfilled + BDFDB.disCNS.buttoncolorred + BDFDB.disCNS.buttonsizemedium + BDFDB.disCN.buttongrow} remove-all" style="flex: 0 0 auto;"><div class="${BDFDB.disCN.buttoncontents}">Reset</div></button></div>`;
 		settingshtml += `</div></div>`;
 		
-		var settingspanel = $(settingshtml)[0];
+		let settingspanel = BDFDB.htmlToElement(settingshtml);
 
 		BDFDB.initElements(settingspanel);
 
@@ -306,6 +308,7 @@ class PluginRepo {
 			changes.forEach(change => {
 				if (change.addedNodes) change.addedNodes.forEach(node => {
 					if (node.tagName && node.classList && node.className.includes("plugin-context-menu") && !node.querySelector(".pluginrepo-item")) {
+						observer.disconnect();
 						let items = node.querySelectorAll(BDFDB.dotCN.contextmenuitem);
 						$(this.settingsContextEntryMarkup)
 							.on("click", () => {
@@ -399,12 +402,12 @@ class PluginRepo {
 				BDFDB.saveData("RNMstart", e.currentTarget.checked, this, "settings");
 			})
 			.on("click." + this.getName(), ".sort-filter", (e) => {
-				this.openSortPopout(e, this.sortPopoutMarkup, pluginRepoModal);
+				BDFDB.createSortPopout(e.currentTarget, this.sortPopoutMarkup, () => {this.sortEntries(pluginRepoModal);});
 			})
 			.on("click." + this.getName(), ".order-filter", (e) => {
-				this.openSortPopout(e, this.orderPopoutMarkup, pluginRepoModal);
+				BDFDB.createSortPopout(e.currentTarget, this.orderPopoutMarkup, () => {this.sortEntries(pluginRepoModal);});
 			})
-			.on("click." + this.getName(), ".tab[tab=plugins]:not(.selected)", (e) => {
+			.on("click." + this.getName(), BDFDB.dotCN.tabbaritem + "[tab=plugins]:not(" + BDFDB.dotCN.settingsitemselected + ")", (e) => {
 				var newHiddenSettings = BDFDB.loadAllData(this, "hidden");
 				if (!BDFDB.equals(newHiddenSettings, hiddenSettings)) {
 					hiddenSettings = Object.assign({},newHiddenSettings);
@@ -532,7 +535,7 @@ class PluginRepo {
 			let pos = entrypositions.indexOf(li.getAttribute("data-url"));
 			if (pos > -1) {
 				li.querySelectorAll(BDFDB.dotCNC._reponame + BDFDB.dotCNC._repoversion + BDFDB.dotCNC._repoauthor + BDFDB.dotCN._repodescription).forEach(ele => {
-					if (searchstring || ele.querySelector(".highlight")) ele.innerHTML = BDFDB.highlightText(ele.innerText, searchstring); 
+					if (searchstring && searchstring.length > 2 || ele.querySelector(BDFDB.dotCN.highlight)) ele.innerHTML = BDFDB.highlightText(ele.innerText, searchstring); 
 				});
 				li.style.removeProperty("display");
 				li.style.setProperty("order", pos, "important");
@@ -544,37 +547,6 @@ class PluginRepo {
 		}
 	}
 	
-	openSortPopout (e, markup, pluginRepoModal) {
-		var wrapper = e.currentTarget;
-		if (wrapper.classList.contains("popout-open")) return;
-		wrapper.classList.add("popout-open");
-		var value = $(wrapper).find(BDFDB.dotCN.quickselectvalue);
-		var popout = $(markup);
-		$(BDFDB.dotCN.popouts).append(popout)
-			.off("click", BDFDB.dotCN.contextmenuitem)
-			.on("click", BDFDB.dotCN.contextmenuitem, (e2) => {
-				value.text($(e2.currentTarget).text());
-				value.attr("option", $(e2.currentTarget).attr("option"));
-				$(document).off("mousedown.sortpopout" + this.getName());
-				popout.remove();
-				this.sortEntries(pluginRepoModal);
-				setTimeout(() => {wrapper.classList.remove("popout-open");},300);
-			});
-			
-		popout
-			.css("left", $(wrapper).offset().left + $(wrapper).outerWidth() + "px")
-			.css("top", $(wrapper).offset().top + value.outerHeight() + "px")
-			.find(BDFDB.dotCN.contextmenu).addClass(BDFDB.getDiscordTheme());
-			
-		$(document).on("mousedown.sortpopout" + this.getName(), (e2) => {
-			if (popout.has(e2.target).length == 0) {
-				$(document).off("mousedown.sortpopout" + this.getName());
-				popout.remove();
-				setTimeout(() => {wrapper.classList.remove("popout-open");},300);
-			}
-		});
-	}
-	
 	loadPlugins () {
 		var getPluginInfo, createWebview, runInWebview;
 		var webview, webviewrunning = false, webviewqueue = [], outdated = 0, i = 0;

Plugins/ThemeRepo/ThemeRepo.plugin.js

@@ -1,6 +1,14 @@
 //META{"name":"ThemeRepo"}*//
 
 class ThemeRepo {
+	getName () {return "ThemeRepo";}
+
+	getVersion () {return "1.6.6";}
+
+	getAuthor () {return "DevilBro";}
+
+	getDescription () {return "Allows you to preview all themes from the theme repo and download them on the fly. Repo button is in the theme settings.";}
+	
 	initConstructor () {
 		this.patchModules = {
 			"V2C_List":"componentDidMount"
@@ -94,7 +102,7 @@ class ThemeRepo {
 				<div class="${BDFDB.disCN.modal}">
 					<div class="${BDFDB.disCN.modalinner}">
 						<div class="${BDFDB.disCN.modalsub}">
-							<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.modalheader}" style="flex: 0 0 auto; padding: 20px 20px 0 20px;">
+							<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.modalheader}" style="flex: 0 0 auto; padding-bottom: 10px;">
 								<div class="${BDFDB.disCN.flexchild}" style="flex: 1 1 auto;">
 									<h4 class="${BDFDB.disCNS.h4 + BDFDB.disCNS.headertitle + BDFDB.disCNS.size16 + BDFDB.disCNS.height20 + BDFDB.disCNS.weightsemibold + BDFDB.disCNS.defaultcolor + BDFDB.disCNS.h4defaultmargin + BDFDB.disCN.marginreset} themeAmount">Theme Repository</h4>
 									<div class="${BDFDB.disCNS.modalguildname + BDFDB.disCNS.small + BDFDB.disCNS.size12 + BDFDB.disCNS.height16 + BDFDB.disCN.primary}"></div>
@@ -106,24 +114,26 @@ class ThemeRepo {
 									</g>
 								</svg>
 							</div>
-							<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCNS.modalheader + BDFDB.disCN.marginbottom20}" style="flex: 0 0 auto; padding: 10px 20px 0px 20px;">
+							<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCNS.marginbottom8 + BDFDB.disCN.tabbarcontainer}" style="flex: 0 0 auto; padding-right: 12px;">
-								<div tab="themes" class="tab selected">Themes</div>
+								<div class="${BDFDB.disCNS.tabbar + BDFDB.disCN.tabbartop}">
-								<div tab="settings" class="tab">Settings</div>
+									<div tab="themes" class="${BDFDB.disCNS.settingsitemdefault + BDFDB.disCNS.settingsitem + BDFDB.disCNS.settingsnotselected + BDFDB.disCN.tabbaritem}">Themes</div>
-								<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.alignstretch + BDFDB.disCNS.nowrap + BDFDB.disCNS.searchbar + BDFDB.disCN.size14}" style="flex: 1 1 auto; margin: -15px 5px 0 0;">
+									<div tab="settings" class="${BDFDB.disCNS.settingsitemdefault + BDFDB.disCNS.settingsitem + BDFDB.disCNS.settingsnotselected + BDFDB.disCN.tabbaritem}">Settings</div>
+								</div>
+								<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.alignstretch + BDFDB.disCNS.nowrap + BDFDB.disCNS.searchbar + BDFDB.disCN.size14}" style="flex: 1 1 auto;">
 									<input class="${BDFDB.disCN.searchbarinput}" value="" placeholder="Search for ..." style="flex: 1 1 auto;">
 									<div class="${BDFDB.disCN.searchbariconwrap}">
 										<i class="${BDFDB.disCNS.searchbaricon + BDFDB.disCNS.searchbareyeglass + BDFDB.disCN.searchbarvisible}"/>
 										<i class="${BDFDB.disCNS.searchbaricon + BDFDB.disCN.searchbarclear}"/>
 									</div>
 								</div>
-								<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.quickselect}" style="padding-bottom: 15px;">
+								<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.quickselect}">
 									<div class="${BDFDB.disCN.quickselectlabel}">Sort by:</div>
 									<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.quickselectclick} sort-filter" style="flex: 0 0 auto;">
 										<div option="${Object.keys(this.sortings.sort)[0]}" class="${BDFDB.disCN.quickselectvalue}">${this.sortings.sort[Object.keys(this.sortings.sort)[0]]}</div>
 										<div class="${BDFDB.disCN.quickselectarrow}"></div>
 									</div>
 								</div>
-								<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.quickselect}" style="padding-bottom: 15px;">
+								<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.quickselect}">
 									<div class="${BDFDB.disCN.quickselectlabel}">Order:</div>
 									<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.quickselectclick} order-filter" style="flex: 0 0 auto;">
 										<div option="${Object.keys(this.sortings.order)[0]}" class="${BDFDB.disCN.quickselectvalue}">${this.sortings.order[Object.keys(this.sortings.order)[0]]}</div>
@@ -251,6 +261,9 @@ class ThemeRepo {
 			.${this.getName()}-modal .themeEntry ${BDFDB.dotCN._repocontrols} > * {
 				margin-right: 5px !important;
 			}
+			.${this.getName()}-modal .themeEntry ${BDFDB.dotCN._repocontrols} > .previewCheckboxWrapper {
+				margin-right: 0px !important;
+			}
 			.${this.getName()}-modal .themeEntry svg[fill="currentColor"],
 			.${this.getName()}-modal .themeEntry ${BDFDB.dotCN.giffavoritebutton}:not(${BDFDB.dotCN.giffavoriteselected}) {
 				color: #72767d !important;
@@ -265,14 +278,6 @@ class ThemeRepo {
 			}`;
 	}
 	
-	getName () {return "ThemeRepo";}
-
-	getDescription () {return "Allows you to preview all themes from the theme repo and download them on the fly. Repo button is in the theme settings.";}
-
-	getVersion () {return "1.6.5";}
-
-	getAuthor () {return "DevilBro";}
-	
 	getSettingsPanel () {
 		if (!this.started || typeof BDFDB !== "object") return;
 		var settingshtml = `<div class="${this.getName()}-settings DevilBro-settings"><div class="${BDFDB.disCNS.titledefault + BDFDB.disCNS.title + BDFDB.disCNS.size18 + BDFDB.disCNS.height24 + BDFDB.disCNS.weightnormal + BDFDB.disCN.marginbottom8}">${this.getName()}</div><div class="DevilBro-settings-inner">`;
@@ -287,7 +292,7 @@ class ThemeRepo {
 		settingshtml += `<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.marginbottom20}" style="flex: 0 0 auto;"><h3 class="${BDFDB.disCNS.titledefault + BDFDB.disCNS.title + BDFDB.disCNS.marginreset + BDFDB.disCNS.weightmedium + BDFDB.disCNS.size16 + BDFDB.disCNS.height24 + BDFDB.disCN.flexchild}" style="flex: 1 1 auto;">Remove all added Themes from your own list.</h3><button type="button" class="${BDFDB.disCNS.flexchild + BDFDB.disCNS.button + BDFDB.disCNS.buttonlookfilled + BDFDB.disCNS.buttoncolorred + BDFDB.disCNS.buttonsizemedium + BDFDB.disCN.buttongrow} remove-all" style="flex: 0 0 auto;"><div class="${BDFDB.disCN.buttoncontents}">Reset</div></button></div>`;
 		settingshtml += `</div></div>`;
 		
-		var settingspanel = $(settingshtml)[0];
+		let settingspanel = BDFDB.htmlToElement(settingshtml);
 
 		BDFDB.initElements(settingspanel);
 
@@ -359,6 +364,7 @@ class ThemeRepo {
 			changes.forEach(change => {
 				if (change.addedNodes) change.addedNodes.forEach(node => {
 					if (node.tagName && node.classList && node.className.includes("plugin-context-menu") && !node.querySelector(".themerepo-item")) {
+						observer.disconnect();
 						let items = node.querySelectorAll(BDFDB.dotCN.contextmenuitem);
 						$(this.settingsContextEntryMarkup)
 							.on("click", () => {
@@ -456,10 +462,10 @@ class ThemeRepo {
 				$(window).off("message." + this.getName());
 			})
 			.on("click." + this.getName(), ".sort-filter", (e) => {
-				this.openSortPopout(e, this.sortPopoutMarkup, themeRepoModal);
+				BDFDB.createSortPopout(e.currentTarget, this.sortPopoutMarkup, () => {this.sortEntries(themeRepoModal);});
 			})
 			.on("click." + this.getName(), ".order-filter", (e) => {
-				this.openSortPopout(e, this.orderPopoutMarkup, themeRepoModal);
+				BDFDB.createSortPopout(e.currentTarget, this.orderPopoutMarkup, () => {this.sortEntries(themeRepoModal);});
 			})
 			.on("change." + this.getName(), "#input-darklight", (e) => {
 				frame.contentWindow.postMessage({origin:"ThemeRepo",reason:"DarkLight",checked:e.currentTarget.checked},"*");
@@ -480,7 +486,7 @@ class ThemeRepo {
 			.on("change." + this.getName(), "#input-rnmstart", (e) => {
 				BDFDB.saveData("RNMstart", e.currentTarget.checked, this, "settings");
 			})
-			.on("click." + this.getName(), ".tab[tab=themes]:not(.selected)", (e) => {
+			.on("click." + this.getName(), BDFDB.dotCN.tabbaritem + "[tab=themes]:not(" + BDFDB.dotCN.settingsitemselected + ")", (e) => {
 				var newHiddenSettings = BDFDB.loadAllData(this, "hidden");
 				if (!BDFDB.equals(newHiddenSettings, hiddenSettings)) {
 					hiddenSettings = Object.assign({},newHiddenSettings);
@@ -656,7 +662,7 @@ class ThemeRepo {
 			let pos = entrypositions.indexOf(li.getAttribute("data-url"));
 			if (pos > -1) {
 				li.querySelectorAll(BDFDB.dotCNC._reponame + BDFDB.dotCNC._repoversion + BDFDB.dotCNC._repoauthor + BDFDB.dotCN._repodescription).forEach(ele => {
-					if (searchstring || ele.querySelector(".highlight")) ele.innerHTML = BDFDB.highlightText(ele.innerText, searchstring); 
+					if (searchstring && searchstring.length > 2 || ele.querySelector(BDFDB.dotCN.highlight)) ele.innerHTML = BDFDB.highlightText(ele.innerText, searchstring);
 				});
 				li.style.removeProperty("display");
 				li.style.setProperty("order", pos, "important");
@@ -668,37 +674,6 @@ class ThemeRepo {
 		}
 	}
 	
-	openSortPopout (e, markup, themeRepoModal) {
-		var wrapper = e.currentTarget;
-		if (wrapper.classList.contains("popout-open")) return;
-		wrapper.classList.add("popout-open");
-		var value = $(wrapper).find(BDFDB.dotCN.quickselectvalue);
-		var popout = $(markup);
-		$(BDFDB.dotCN.popouts).append(popout)
-			.off("click", BDFDB.dotCN.contextmenuitem)
-			.on("click", BDFDB.dotCN.contextmenuitem, (e2) => {
-				value.text($(e2.currentTarget).text());
-				value.attr("option", $(e2.currentTarget).attr("option"));
-				$(document).off("mousedown.sortpopout" + this.getName());
-				popout.remove();
-				this.sortEntries(themeRepoModal);
-				setTimeout(() => {wrapper.classList.remove("popout-open");},300);
-			});
-			
-		popout
-			.css("left", $(wrapper).offset().left + $(wrapper).outerWidth() + "px")
-			.css("top", $(wrapper).offset().top + value.outerHeight() + "px")
-			.find(BDFDB.dotCN.contextmenu).addClass(BDFDB.getDiscordTheme());
-			
-		$(document).on("mousedown.sortpopout" + this.getName(), (e2) => {
-			if (popout.has(e2.target).length == 0) {
-				$(document).off("mousedown.sortpopout" + this.getName());
-				popout.remove();
-				setTimeout(() => {wrapper.classList.remove("popout-open");},300);
-			}
-		});
-	}
-	
 	loadThemes () {
 		var getThemeInfo, outdated = 0, i = 0;
 		var tags = ["name","description","author","version"];