fix: theme change and connection tabs

package.json

@@ -27,7 +27,6 @@
     "tabulator-tables": "^5.5.0",
     "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#v1",
     "tauri-plugin-window-state-api": "github:tauri-apps/tauri-plugin-window-state#v1",
-    "theme-change": "^2.5.0",
     "zod": "^3.21.4"
   },
   "devDependencies": {

src/App.tsx

@@ -16,16 +16,18 @@ function App() {
   return (
     <div class="w-full h-full flex flex-col">
       <div class="px-2 pb-2 bg-base-300 tabs tabs-boxed rounded-none gap-2 flex justify-between items-center">
-        <div>
+        <div class="flex items-center">
           <For each={tabsStore.tabs}>
             {(tab, idx) =>
-              <div class="group flex items-center">
-                <div onClick={() => setActiveTab(idx() + 1)} class="tab tab-md "
+              <div class="flex items-center">
+                <div onClick={() => setActiveTab(idx() + 1)} class="tab tab-md tab-secondary"
                   classList={{ 'tab-active': tabsStore.activeTab === idx() + 1, }}
-                ><span class="">{tab.label}</span>               </div>
-                {idx() + 1 !== 1 && <button onClick={() => closeTab(tab.id!)} class="hidden group-hover:block pl-2 mb-1">
-                  <CloseIcon />
-                </button>}
+                ><span class="text-md font-bold">{tab.label}</span></div>
+                <Show when={tabsStore.activeTab === idx() + 1 && idx() + 1 !== 1}>
+                  <button onClick={() => closeTab(tab.id!)} class="pl-2 mb-1">
+                    <CloseIcon />
+                  </button>
+                </Show>
               </div>
             }
           </For>

src/components/UI/ThemeSwitch.tsx

@@ -1,20 +1,25 @@
 import { For } from "solid-js"
 import { titleCase } from "../../utils/formatters"
-const THEMES = ["light", "dark", "aqua", "synthwave", "dracula", "night", "cupcake"]
+const THEMES = ["light", "dark", "aqua", "synthwave", "dracula", "night", "cupcake"] as const;
 import { onMount } from 'solid-js'
-import { themeChange } from 'theme-change'
 
 const ThemeSwitch = () => {
-
   onMount(async () => {
-    themeChange();
+    const theme = localStorage.getItem("theme") || "dark"
+    document.documentElement.dataset.theme = theme
   })
+
+  const select = (theme: typeof THEMES[number]) => {
+    document.documentElement.dataset.theme = theme
+    localStorage.setItem("theme", theme)
+  }
+
   return (
     <details class="dropdown dropdown-left">
       <summary class="m-1 btn btn-xs">Theme</summary>
       <ul class="p-2 shadow menu dropdown-content  z-[1] bg-base-100 rounded-box w-52">
         <For each={THEMES}>
-          {(theme) => <li data-toggle-theme={theme} class="py-1">{titleCase(theme)}</li>}
+          {(theme) => <li  class="py-1"><a onClick={()=> select(theme)}>{titleCase(theme)}</a></li>}
         </For>
       </ul>
     </details>