feat: Re-add support for dragging and re-ordering tabs

Author: amanharwara

package.json

@@ -1,7 +1,7 @@
 {
   "name": "altus",
   "productName": "Altus",
-  "version": "5.4.1",
+  "version": "5.5.0",
   "description": "Desktop client for WhatsApp Web with themes & multiple account support.",
   "main": ".vite/build/main.js",
   "build": {

public/locales/en/translation.json

@@ -98,5 +98,8 @@
   "selectPreset": "Select a preset...",
   "bgColor": "Background color",
   "fgColor": "Foreground Color",
-  "acColor": "Accent Color"
-}
+  "acColor": "Accent Color",
+  "Exit": "Exit",
+  "Cancel": "Cancel",
+  "Are you sure you want to exit?": "Are you sure you want to exit?"
+}

public/locales/en/translation.missing.json

@@ -1,5 +1 @@
-{
-  "Exit": "Exit",
-  "Cancel": "Cancel",
-  "Are you sure you want to exit?": "Are you sure you want to exit?"
-}
+{}

src/App.tsx

@@ -1,5 +1,11 @@
-import { For, type Component, createSignal, createResource } from "solid-js";
-import { tabStore } from "./stores/tabs/solid";
+import {
+  For,
+  type Component,
+  createSignal,
+  createResource,
+  onCleanup,
+} from "solid-js";
+import { stableTabArray, tabStore } from "./stores/tabs/solid";
 import WebView from "./components/WebView";
 import TabsList from "./components/TabsList";
 import SettingsDialog from "./components/SettingsDialog";
@@ -14,14 +20,25 @@ const App: Component = () => {
   const [isThemeManagerOpen, setIsThemeManagerOpen] = createSignal(false);
   const [menu, { refetch: refetchAppMenu }] = createResource(window.getAppMenu);
 
-  window.electronIPCHandlers.onOpenSettings(() => {
-    setIsSettingsOpen(true);
+  const handlers = new Set<() => void>();
+  onCleanup(() => {
+    for (const cleanup of handlers) {
+      cleanup();
+    }
   });
-  window.electronIPCHandlers.onOpenThemeManager(() => {
-    setIsThemeManagerOpen(true);
-  });
-
-  window.electronIPCHandlers.onReloadCustomTitleBar(refetchAppMenu);
+  handlers.add(
+    window.electronIPCHandlers.onOpenSettings(() => {
+      setIsSettingsOpen(true);
+    })
+  );
+  handlers.add(
+    window.electronIPCHandlers.onOpenThemeManager(() => {
+      setIsThemeManagerOpen(true);
+    })
+  );
+  handlers.add(
+    window.electronIPCHandlers.onReloadCustomTitleBar(refetchAppMenu)
+  );
 
   return (
     <I18NProvider>
@@ -38,11 +55,14 @@ const App: Component = () => {
           )}
         >
           <TabsList />
-          <For each={tabStore.tabs}>
+          <For each={stableTabArray()}>
             {(tab) => (
               <div
+                role="tabpanel"
+                ref={(el) => console.log(tab.id, el)}
+                id={`tabpanel-${tab.id}`}
                 class={twJoin(
-                  "min-h-0 flex-grow",
+                  "min-h-0 flex-grow text-white",
                   tabStore.selectedTabId !== tab.id && "hidden"
                 )}
               >