added ordering feature for server tabs, fixes zulip#548

app/renderer/css/main.css

@@ -145,6 +145,10 @@ body {
   color: rgb(108 133 146 / 100%);
 }
 
+.sortable-chosen .server-tooltip {
+  display: none;
+}
+
 .tab {
   position: relative;
   margin: 2px 0;

app/renderer/js/main.ts

@@ -28,6 +28,7 @@ import {initializeTray} from "./tray.js";
 import {ipcRenderer} from "./typed-ipc-renderer.js";
 import * as DomainUtil from "./utils/domain-util.js";
 import ReconnectUtil from "./utils/reconnect-util.js";
+import Sortable from "sortablejs";
 
 Sentry.init({});
 
@@ -57,7 +58,7 @@ const dingSound = new Audio(
 
 export class ServerManagerView {
   $addServerButton: HTMLButtonElement;
-  $tabsContainer: Element;
+  $tabsContainer: HTMLElement;
   $reloadButton: HTMLButtonElement;
   $loadingIndicator: HTMLButtonElement;
   $settingsButton: HTMLButtonElement;
@@ -81,6 +82,7 @@ export class ServerManagerView {
   tabIndex: number;
   presetOrgs: string[];
   preferenceView?: PreferenceView;
+  sortableSidebar: Sortable | null;
   constructor() {
     this.$addServerButton = document.querySelector("#add-tab")!;
     this.$tabsContainer = document.querySelector("#tabs-container")!;
@@ -123,6 +125,7 @@ export class ServerManagerView {
     this.presetOrgs = [];
     this.functionalTabs = new Map();
     this.tabIndex = 0;
+    this.sortableSidebar = null;
   }
 
   async init(): Promise<void> {
@@ -235,6 +238,20 @@ export class ServerManagerView {
   initSidebar(): void {
     const showSidebar = ConfigUtil.getConfigItem("showSidebar", true);
     this.toggleSidebar(showSidebar);
+    this.sortableSidebar = new Sortable(this.$tabsContainer, {
+      animation: 150,
+      onEnd: (event: Sortable.SortableEvent) => {
+        // Update the domain order in the database
+        DomainUtil.updateDomainOrder(event.oldIndex || 0, event.newIndex || 0);
+
+        // Update the current active tab index
+        this.activeTabIndex = event.newIndex || 0;
+        ConfigUtil.setConfigItem("lastActiveTab", event.newIndex || 0);
+
+        // Reload the app to give the tabs their new indexes
+        ipcRenderer.send("reload-full-app");
+      },
+    });
   }
 
   // Remove the stale UA string from the disk if the app is not freshly

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

@@ -72,6 +72,20 @@ export function updateDomain(index: number, server: ServerConf): void {
   db.push(`/domains[${index}]`, server, true);
 }
 
+export function updateDomainOrder(oldIndex: number, newIndex: number) {
+  let domains = serverConfSchema
+    .array()
+    .parse(db.getObject<unknown>("/domains"));
+
+  const [movedDomain] = domains.splice(oldIndex, 1);
+  domains.splice(newIndex, 0, movedDomain);
+
+  // Update each domain in the database with its new order
+  domains.forEach((domain, index) => {
+    updateDomain(index, domain);
+  });
+}
+
 export async function addDomain(server: {
   url: string;
   alias: string;

package.json

@@ -143,7 +143,9 @@
     "InstantMessaging"
   ],
   "dependencies": {
-    "gatemaker": "https://github.com/andersk/gatemaker/archive/d31890ae1cb293faabcb1e4e465c673458f6eed2.tar.gz"
+    "@types/sortablejs": "^1.15.8",
+    "gatemaker": "https://github.com/andersk/gatemaker/archive/d31890ae1cb293faabcb1e4e465c673458f6eed2.tar.gz",
+    "sortablejs": "^1.15.2"
   },
   "devDependencies": {
     "@electron/remote": "^2.0.8",