Reorder sidebar org list by dragging

app/renderer/css/main.css

@@ -64,6 +64,12 @@ body {
     outline: 1px solid rgba(169, 169, 169, 1.000);
 }
 
+
+/* Class for the dragging element of sidebar used in sortablejs */
+.sortable-drag {
+    visibility: hidden;
+}
+
 @font-face {
     font-family: 'Material Icons';
     font-style: normal;

app/renderer/js/main.ts

@@ -2,6 +2,7 @@ import {ipcRenderer, remote, clipboard} from 'electron';
 import path from 'path';
 
 import isDev from 'electron-is-dev';
+import Sortable from 'sortablejs';
 
 import * as Messages from '../../resources/messages';
 
@@ -76,6 +77,7 @@ class ServerManagerView {
 	$settingsButton: HTMLButtonElement;
 	$webviewsContainer: Element;
 	$backButton: HTMLButtonElement;
+	$orgsList: HTMLElement;
 	$dndButton: HTMLButtonElement;
 	$addServerTooltip: HTMLElement;
 	$reloadTooltip: HTMLElement;
@@ -87,8 +89,11 @@ class ServerManagerView {
 	$sidebar: Element;
 	$fullscreenPopup: Element;
 	$fullscreenEscapeKey: string;
+	$sortableList: Sortable;
+	isReorderDragging: boolean;
 	loading: Set<string>;
 	activeTabIndex: number;
+	servers: DomainUtil.ServerConf[];
 	tabs: ServerOrFunctionalTab[];
 	functionalTabs: Map<string, number>;
 	tabIndex: number;
@@ -120,6 +125,7 @@ class ServerManagerView {
 		this.$dndTooltip = $actionsContainer.querySelector('#dnd-tooltip');
 
 		this.$sidebar = document.querySelector('#sidebar');
+		this.$orgsList = document.querySelector('#tabs-container');
 
 		this.$fullscreenPopup = document.querySelector('#fullscreen-popup');
 		this.$fullscreenEscapeKey = process.platform === 'darwin' ? '^⌘F' : 'F11';
@@ -128,9 +134,11 @@ class ServerManagerView {
 		this.loading = new Set();
 		this.activeTabIndex = -1;
 		this.tabs = [];
+		this.servers = DomainUtil.getDomains();
 		this.presetOrgs = [];
 		this.functionalTabs = new Map();
 		this.tabIndex = 0;
+		this.isReorderDragging = false;
 	}
 
 	async init(): Promise<void> {
@@ -232,9 +240,35 @@ class ServerManagerView {
 		}
 	}
 
+	async onEnd(): Promise<void> {
+		this.isReorderDragging = false;
+		const newServers: DomainUtil.ServerConf[] = [];
+		const tabElements = document.querySelectorAll('#tabs-container .tab');
+		tabElements.forEach((element, index) => {
+			const oldIndex = Number(element.getAttribute('data-tab-id')) % this.servers.length;
+			newServers.push(this.servers[oldIndex]);
+			(element as HTMLElement).dataset.tabId = index.toString();
+		});
+		this.servers = newServers;
+		DomainUtil.batchUpdateDomain(this.servers);
+		await this.reloadView(false);
+	}
+
+	onStart(evt: Sortable.SortableEvent): void {
+		this.isReorderDragging = true;
+		this.$serverIconTooltip[evt.oldIndex].removeAttribute('style');
+	}
+
 	initSidebar(): void {
 		const showSidebar = ConfigUtil.getConfigItem('showSidebar', true);
 		this.toggleSidebar(showSidebar);
+		this.$sortableList = Sortable.create(this.$orgsList, {
+			dataIdAttr: 'data-sortable-id',
+			direction: 'vertical',
+			onStart: this.onStart.bind(this),
+			onEnd: this.onEnd.bind(this),
+			forceFallback: true
+		});
 	}
 
 	// Remove the stale UA string from the disk if the app is not freshly
@@ -311,23 +345,26 @@ class ServerManagerView {
 		}
 	}
 
-	async initTabs(): Promise<void> {
-		const servers = DomainUtil.getDomains();
-		if (servers.length > 0) {
-			for (const [i, server] of servers.entries()) {
+	async initTabs(refresh = true): Promise<void> {
+		if (refresh) {
+			this.servers = DomainUtil.getDomains();
+		}
+
+		if (this.servers.length > 0) {
+			for (const [i, server] of this.servers.entries()) {
 				this.initServer(server, i);
 			}
 
 			// Open last active tab
 			let lastActiveTab = ConfigUtil.getConfigItem('lastActiveTab');
-			if (lastActiveTab >= servers.length) {
+			if (lastActiveTab >= this.servers.length) {
 				lastActiveTab = 0;
 			}
 
 			// `checkDomain()` and `webview.load()` for lastActiveTab before the others
-			await DomainUtil.updateSavedServer(servers[lastActiveTab].url, lastActiveTab);
+			await DomainUtil.updateSavedServer(this.servers[lastActiveTab].url, lastActiveTab);
 			this.activateTab(lastActiveTab);
-			await Promise.all(servers.map(async (server, i) => {
+			await Promise.all(this.servers.map(async (server, i) => {
 				// After the lastActiveTab is activated, we load the others in the background
 				// without activating them, to prevent flashing of server icons
 				if (i === lastActiveTab) {
@@ -493,6 +530,11 @@ class ServerManagerView {
 	}
 
 	onHover(index: number): void {
+		// We don't to show tooltip when dragging is going on in sidebar to reorder
+		if (this.isReorderDragging) {
+			return;
+		}
+
 		// `this.$serverIconTooltip[index].textContent` already has realm name, so we are just
 		// removing the style.
 		this.$serverIconTooltip[index].removeAttribute('style');
@@ -682,14 +724,14 @@ class ServerManagerView {
 		this.$webviewsContainer.textContent = '';
 	}
 
-	async reloadView(): Promise<void> {
+	async reloadView(refresh = true): Promise<void> {
 		// Save and remember the index of last active tab so that we can use it later
 		const lastActiveTab = this.tabs[this.activeTabIndex].props.index;
 		ConfigUtil.setConfigItem('lastActiveTab', lastActiveTab);
 
 		// Destroy the current view and re-initiate it
 		this.destroyView();
-		await this.initTabs();
+		await this.initTabs(refresh);
 		this.initServerActions();
 	}
 
@@ -850,7 +892,7 @@ class ServerManagerView {
 			await LinkUtil.openBrowser(new URL('https://zulip.com/help/'));
 		});
 
-		ipcRenderer.on('reload-viewer', this.reloadView.bind(this, this.tabs[this.activeTabIndex].props.index));
+		ipcRenderer.on('reload-viewer', this.reloadView.bind(this, true));
 
 		ipcRenderer.on('reload-current-viewer', this.reloadCurrentView.bind(this));
 

app/renderer/js/utils/domain-util.ts

@@ -57,6 +57,13 @@ export function updateDomain(index: number, server: ServerConf): void {
 	db.push(`/domains[${index}]`, server, true);
 }
 
+export function	batchUpdateDomain(servers: ServerConf[]): void {
+	db.delete('/domains');
+	for (const server of servers) {
+		db.push('/domains[]', server, true);
+	}
+}
+
 export async function addDomain(server: ServerConf): Promise<void> {
 	if (server.icon) {
 		const localIconUrl = await saveServerIcon(server);