left-sidebar: Add initial character of Realm Name instead of default …

…icon.

This PR adds a feature for showing the first char of realm name as the server icon when the
icon fails to load for some reasons.

app/renderer/css/main.css

@@ -186,6 +186,16 @@ body {
     padding: 2px 0;
 }
 
+.server-tab .alt-icon {
+    font-family: Verdana;
+    font-weight: 600;
+    font-size: 22px;
+    border: 2px solid #222c31;
+    margin-left: 17%;
+    width: 33px;
+    border-radius: 50%;
+}
+
 .tab .server-tab:hover {
     opacity: 0.8;
 }

app/renderer/js/components/webview.js

@@ -33,6 +33,7 @@ class WebView extends BaseComponent {
 					disablewebsecurity
 					${this.props.preload ? 'preload="js/preload.js"' : ''}
 					partition="persist:webviewsession"
+					name="${this.props.name}"
 					webpreferences="allowRunningInsecureContent, javascript=yes">
 				</webview>`;
 	}

app/renderer/js/main.js

@@ -214,8 +214,12 @@ class ServerManagerView {
 
 		const $serverImgs = document.querySelectorAll('.server-icons');
 		$serverImgs.forEach($serverImg => {
+			if ($serverImg.src.includes('img/icon.png')) {
+				this.displayInitalCharLogo($serverImg);
+			}
+
 			$serverImg.addEventListener('error', () => {
-				$serverImg.src = 'img/icon.png';
+				this.displayInitalCharLogo($serverImg);
 			});
 		});
 
@@ -237,6 +241,27 @@ class ServerManagerView {
 		return currentIndex;
 	}
 
+	displayInitalCharLogo($img) {
+		const $altIcon = document.createElement('div');
+		const $parent = $img.parentElement;
+		const $container = $parent.parentElement;
+		const webviewId = $container.dataset.tabId;
+		const $webview = document.querySelector(`webview[data-tab-id="${webviewId}"]`);
+		const realmName = $webview.getAttribute('name');
+
+		if (realmName === null) {
+			$img.src = '/img/icon.png';
+			return;
+		}
+
+		$altIcon.textContent = realmName.charAt(0) || 'Z';
+		$altIcon.classList.add('server-icon');
+		$altIcon.classList.add('alt-icon');
+
+		$parent.removeChild($img);
+		$parent.appendChild($altIcon);
+	}
+
 	sidebarHoverEvent(SidebarButton, SidebarTooltip, addServer = false) {
 		SidebarButton.addEventListener('mouseover', () => {
 			SidebarTooltip.removeAttribute('style');