Update data-tab-id on dragging server tabs.

app/package.json

@@ -40,7 +40,8 @@
     "node-json-db": "0.7.3",
     "request": "2.85.0",
     "semver": "5.4.1",
-    "wurl": "2.5.0"
+    "wurl": "2.5.0",
+    "sortablejs": "*"
   },
   "optionalDependencies": {
     "node-mac-notifier": "0.1.0"

app/renderer/js/main.js

@@ -16,6 +16,8 @@ const ReconnectUtil = require(__dirname + '/js/utils/reconnect-util.js');
 const Logger = require(__dirname + '/js/utils/logger-util.js');
 const { feedbackHolder } = require(__dirname + '/js/feedback.js');
 
+const Sortable = require('sortablejs');
+
 const logger = new Logger({
 	file: 'errors.log',
 	timestamp: true
@@ -42,6 +44,8 @@ class ServerManagerView {
 
 		this.$sidebar = document.getElementById('sidebar');
 
+		this.$drag = document.querySelector('.simpleList');
+
 		this.$fullscreenPopup = document.getElementById('fullscreen-popup');
 		this.$fullscreenEscapeKey = process.platform === 'darwin' ? '^⌘F' : 'F11';
 		this.$fullscreenPopup.innerHTML = `Press ${this.$fullscreenEscapeKey} to exit full screen`;
@@ -142,6 +146,27 @@ class ServerManagerView {
 	initSidebar() {
 		const showSidebar = ConfigUtil.getConfigItem('showSidebar', true);
 		this.toggleSidebar(showSidebar);
+
+		// Allow dragging of server tabs and update the data-tab-id
+		const _this = this;
+		this.$sortable = Sortable.create(this.$drag, {
+			dataIdAttr: 'data-sortable-id',
+			onEnd() {
+				const newTabs = [];
+				const tabElements = document.querySelectorAll('#tabs-container .tab');
+				tabElements.forEach((el, index) => {
+					const oldIndex = +el.getAttribute('data-tab-id');
+					newTabs.push(_this.tabs[oldIndex]);
+					el.setAttribute('data-tab-id', index.toString());
+				});
+
+				_this.tabs = newTabs;
+				ipcRenderer.send('update-menu', {
+					tabs: _this.tabs,
+					activeTabIndex: _this.activeTabIndex
+				});
+			}
+		});
 	}
 
 	initTabs() {

app/renderer/main.html

@@ -15,7 +15,7 @@
   </div>
   <div id="sidebar" class="toggle-sidebar">
     <div id="view-controls-container">
-      <div id="tabs-container"></div>
+      <div id="tabs-container" class="simpleList"></div>
       <div id="add-tab" class="tab functional-tab">
         <div class="server-tab" id="add-action">
           <i class="material-icons">add</i>