Discord Split Panel

discord-split-panel.user.js

// ==UserScript==
// @name         Discord Channel List Sidebar
// @author		 FRNathan13
// @description  Implement split panel between channel list and chat container in discord app, size is saved when you change position of panel. Powered by jQuery and Split.js 
// @version		 1.3.2
// @match        https://discord.com/channels/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=discord.com
// @grant		 GM_setValue
// @grant		 GM_getValue
// @require		 https://code.jquery.com/jquery-3.6.0.min.js
// @require		 https://unpkg.com/split.js/dist/split.min.js
// @supportURL	 https://gist.github.com/nathan130200/153ec46dd52009db44934ec013a3a3d3
// @downloadURL	 https://gist.github.com/nathan130200/153ec46dd52009db44934ec013a3a3d3/raw/e7388b49c72ff4fbe1be7ee3c8cdd41295c5eab2/discord-split-panel.user.js
// ==/UserScript==

function attachStyle(opt){
	var el;
	
	if(opt.href) {
		el = document.createElement('link');
		el.rel = 'styleSheet';
		el.href = opt.href;
		document.body.appendChild(el);
	}
	else {
		el = document.createElement('style');
		el.innerHTML = opt.content;
		document.body.appendChild(el);
	}
}

(function(){
	
	try {
		attachStyle(`
			.gutter {
				background-color: #eee;
				background-repeat: no-repeat;
				background-position: 50%;
			}

			.gutter.gutter-horizontal {
				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
				cursor: col-resize;
			}
		`);
		
		var sizes = [15, 85];
		var rawSizes = GM_getValue('__split_sizes');
		
		if(!rawSizes)
			GM_setValue('__split_sizes', JSON.stringify(sizes));
		else
			sizes = JSON.parse(rawSizes);
		
		var tick = setInterval(function(){
			try {
				Split(['.sidebar-1tnWFu', '.chat-2ZfjoI'], {
					gutterSize: 6,
					gutterAlign: 'start',
					sizes,
					onDragEnd(sizes) {
						GM_setValue('__split_sizes', JSON.stringify(sizes))
						console.error(sizes);
					}
				});
				
				clearInterval(tick);
				return;
			}
			catch(e) {
				console.error('Attempt to start splitter panel...');
			}
		}, 1000);
	}
	catch(e) {
		console.error(e);
	}
})();