Update theme command to open settings tab with selected item

packages/web/src/commands/stdCommands.ts

@@ -74,7 +74,14 @@ registerCommand({
   category: __t('command.theme', { defaultMessage: 'Theme' }),
   name: __t('command.theme.change', { defaultMessage: 'Change' }),
   toolbarName: __t('command.theme.changeToolbar', { defaultMessage: 'Change theme' }),
-  onClick: () => showModal(SettingsModal, { selectedTab: 'theme' }),
+  onClick: () => openNewTab({
+      title: 'Settings',
+      icon: 'icon settings',
+      tabComponent: 'SettingsTab',
+      props: {
+        selectedItem: 'theme',
+      },
+    }),
   // getSubCommands: () => get(extensions).themes.map(themeCommand),
 });
 

packages/web/src/tabs/SettingsTab.svelte

@@ -20,6 +20,8 @@
     import SQLEditorSettings from "../settings/SQLEditorSettings.svelte";
     import AiSettingsTab from "../settings/AiSettingsTab.svelte";
 
+    export let selectedItem = 'general';
+
     const menuItems = [
         {
             label: _t('settings.general', { defaultMessage: 'General' }),
@@ -106,8 +108,6 @@
             testid: 'settings-other',
         },
     ];
-
-    let selectedItem = 'general';
 </script>
 
 <SettingsFormProvider>