Use tab id and order field where appropriate instead of tabIndex.

app/common/typed-ipc.ts

@@ -14,7 +14,7 @@ export type MainMessage = {
   "realm-name-changed": (serverURL: string, realmName: string) => void;
   "reload-full-app": () => void;
   "save-last-tab": (index: number) => void;
-  "switch-server-tab": (index: number) => void;
+  "switch-server-tab": (serverId: string) => void;
   "toggle-app": () => void;
   "toggle-badge-option": (newValue: boolean) => void;
   "toggle-menubar": (showMenubar: boolean) => void;
@@ -63,7 +63,7 @@ export type RendererMessage = {
   "set-idle": () => void;
   "show-keyboard-shortcuts": () => void;
   "show-notification-settings": () => void;
-  "switch-server-tab": (index: number) => void;
+  "switch-server-tab": (serverId: string) => void;
   "tab-devtools": () => void;
   "toggle-autohide-menubar": (
     autoHideMenubar: boolean,

app/common/types.ts

@@ -30,4 +30,6 @@ export type TabData = {
   page?: TabPage;
   label: string;
   index: number;
+  id: string;
+  serverId?: string;
 };

app/main/menu.ts

@@ -329,7 +329,7 @@ function getWindowSubmenu(
         checked: tab.index === activeTabIndex,
         click(_item, focusedWindow) {
           if (focusedWindow) {
-            sendAction("switch-server-tab", tab.index);
+            sendAction("switch-server-tab", tab.serverId!);
           }
         },
         type: "checkbox",
@@ -348,7 +348,7 @@ function getWindowSubmenu(
           if (focusedWindow) {
             sendAction(
               "switch-server-tab",
-              getNextServer(tabs, activeTabIndex!),
+              getNextServer(tabs, tabs[activeTabIndex!]),
             );
           }
         },
@@ -361,7 +361,7 @@ function getWindowSubmenu(
           if (focusedWindow) {
             sendAction(
               "switch-server-tab",
-              getPreviousServer(tabs, activeTabIndex!),
+              getPreviousServer(tabs, tabs[activeTabIndex!]),
             );
           }
         },
@@ -704,20 +704,22 @@ async function checkForUpdate(): Promise<void> {
   await appUpdater(true);
 }
 
-function getNextServer(tabs: TabData[], activeTabIndex: number): number {
+function getNextServer(tabs: TabData[], activeTab: TabData): string {
+  let {index} = activeTab;
   do {
-    activeTabIndex = (activeTabIndex + 1) % tabs.length;
-  } while (tabs[activeTabIndex]?.role !== "server");
+    index = (index + 1) % tabs.length;
+  } while (tabs[index]?.role !== "server");
 
-  return activeTabIndex;
+  return tabs[index].serverId!;
 }
 
-function getPreviousServer(tabs: TabData[], activeTabIndex: number): number {
+function getPreviousServer(tabs: TabData[], activeTab: TabData): string {
+  let {index} = activeTab;
   do {
-    activeTabIndex = (activeTabIndex - 1 + tabs.length) % tabs.length;
-  } while (tabs[activeTabIndex]?.role !== "server");
+    index = (index - 1 + tabs.length) % tabs.length;
+  } while (tabs[index]?.role !== "server");
 
-  return activeTabIndex;
+  return tabs[index].serverId!;
 }
 
 export function setMenu(properties: MenuProperties): void {

app/renderer/js/components/server-tab.ts

@@ -9,19 +9,22 @@ import type WebView from "./webview.ts";
 
 export type ServerTabProperties = {
   webview: Promise<WebView>;
+  serverId: string;
 } & TabProperties;
 
 export default class ServerTab extends Tab {
   webview: Promise<WebView>;
+  serverId: string;
   $el: Element;
   $name: Element;
   $icon: HTMLImageElement;
   $badge: Element;
 
-  constructor({webview, ...properties}: ServerTabProperties) {
+  constructor({webview, serverId, ...properties}: ServerTabProperties) {
     super(properties);
 
     this.webview = webview;
+    this.serverId = serverId;
     this.$el = generateNodeFromHtml(this.templateHtml());
     this.properties.$root.append(this.$el);
     this.registerListeners();
@@ -84,7 +87,7 @@ export default class ServerTab extends Tab {
     const shownIndex = this.properties.index + 1;
 
     // Array index == Shown index - 1
-    ipcRenderer.send("switch-server-tab", shownIndex - 1);
+    ipcRenderer.send("switch-server-tab", this.serverId);
 
     return process.platform === "darwin"
       ? `⌘${shownIndex}`

app/renderer/js/components/tab.ts

@@ -8,7 +8,7 @@ export type TabProperties = {
   $root: Element;
   onClick: () => void;
   index: number;
-  tabId: number;
+  tabId: string;
   onHover?: () => void;
   onHoverOut?: () => void;
   materialIcon?: string;

app/renderer/js/components/webview.ts

@@ -22,7 +22,7 @@ type WebViewProperties = {
   $root: Element;
   rootWebContents: WebContents;
   index: number;
-  tabId: number;
+  tabId: string;
   url: string;
   role: TabRole;
   isActive: () => boolean;

app/renderer/js/main.ts

@@ -86,7 +86,6 @@ export class ServerManagerView {
   activeTabIndex: number;
   tabs: ServerOrFunctionalTab[];
   functionalTabs: Map<TabPage, number>;
-  tabId: number;
   presetOrgs: string[];
   preferenceView?: PreferenceView;
   constructor() {
@@ -132,7 +131,6 @@ export class ServerManagerView {
     this.tabs = [];
     this.presetOrgs = [];
     this.functionalTabs = new Map();
-    this.tabId = 0;
   }
 
   async init(): Promise<void> {
@@ -375,7 +373,7 @@ export class ServerManagerView {
   }
 
   initServer(server: ServerConfig, index: number): ServerTab {
-    const tabId = this.gettabId();
+    const tabId = this.generateTabId();
     const tab: ServerTab = new ServerTab({
       role: "server",
       icon: DomainUtil.iconAsUrl(server.icon),
@@ -384,6 +382,7 @@ export class ServerManagerView {
       onClick: this.activateLastTab.bind(this, index),
       index,
       tabId,
+      serverId: server.id,
       onHover: this.onHover.bind(this, index),
       onHoverOut: this.onHoverOut.bind(this, index),
       webview: WebView.create({
@@ -483,10 +482,8 @@ export class ServerManagerView {
     this.toggleDndButton(dnd);
   }
 
-  gettabId(): number {
-    const currentIndex = this.tabId;
-    this.tabId++;
-    return currentIndex;
+  generateTabId(): string {
+    return DomainUtil.generateDomainId();
   }
 
   async getCurrentActiveServer(): Promise<string> {
@@ -574,7 +571,7 @@ export class ServerManagerView {
     const index = this.tabs.length;
     this.functionalTabs.set(tabProperties.page, index);
 
-    const tabId = this.gettabId();
+    const tabId = this.generateTabId();
     const $view = await tabProperties.makeView();
     this.$webviewsContainer.append($view);
 
@@ -669,6 +666,7 @@ export class ServerManagerView {
       page: tab.properties.page,
       label: tab.properties.label,
       index: tab.properties.index,
+      id: tab.properties.tabId,
     }));
   }
 
@@ -811,14 +809,21 @@ export class ServerManagerView {
     }
   }
 
-  async isLoggedIn(tabId: number): Promise<boolean> {
-    const tab = this.tabs[tabId];
+  async isLoggedIn(index: number): Promise<boolean> {
+    const tab = this.tabs[index];
     if (!(tab instanceof ServerTab)) return false;
     const webview = await tab.webview;
     const url = webview.getWebContents().getURL();
     return !(url.endsWith("/login/") || webview.loading);
   }
 
+  getTabByServerId(serverId: string): ServerTab | undefined {
+    return this.tabs.find(
+      (tab): tab is ServerTab =>
+        tab instanceof ServerTab && tab.serverId === serverId,
+    );
+  }
+
   addContextMenu($serverImg: HTMLElement, index: number): void {
     $serverImg.addEventListener("contextmenu", async (event) => {
       event.preventDefault();
@@ -1005,8 +1010,9 @@ export class ServerManagerView {
       ipcRenderer.send("reload-full-app");
     });
 
-    ipcRenderer.on("switch-server-tab", async (event, index: number) => {
-      await this.activateLastTab(index);
+    ipcRenderer.on("switch-server-tab", async (event, serverId: string) => {
+      const tab = this.getTabByServerId(serverId)!;
+      await this.activateLastTab(tab.properties.index);
     });
 
     ipcRenderer.on("open-org-tab", async () => {

app/renderer/js/pages/preference/connected-org-section.ts

@@ -53,6 +53,7 @@ export function initConnectedOrgSection({
       $root: $serverInfoContainer,
       server,
       index: i,
+      serverId: server.id,
       onChange: reloadApp,
     });
   }

app/renderer/js/pages/preference/server-info-form.ts

@@ -12,6 +12,7 @@ type ServerInfoFormProperties = {
   $root: Element;
   server: ServerConfig;
   index: number;
+  serverId: string;
   onChange: () => void;
 };
 
@@ -70,14 +71,26 @@ export function initServerInfoForm(properties: ServerInfoFormProperties): void {
   });
 
   $openServerButton.addEventListener("click", () => {
-    ipcRenderer.send("forward-message", "switch-server-tab", properties.index);
+    ipcRenderer.send(
+      "forward-message",
+      "switch-server-tab",
+      properties.serverId,
+    );
   });
 
   $serverInfoAlias.addEventListener("click", () => {
-    ipcRenderer.send("forward-message", "switch-server-tab", properties.index);
+    ipcRenderer.send(
+      "forward-message",
+      "switch-server-tab",
+      properties.serverId,
+    );
   });
 
   $serverIcon.addEventListener("click", () => {
-    ipcRenderer.send("forward-message", "switch-server-tab", properties.index);
+    ipcRenderer.send(
+      "forward-message",
+      "switch-server-tab",
+      properties.serverId,
+    );
   });
 }