fix(query-devtools/Devtools): correct the Theme sub-trigger className from 'position' to 'theme'

Author: sukvvon

.changeset/devtools-theme-subtrigger-classname.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/query-devtools': patch
+---
+
+Fix the Theme sub-trigger's marker class in the devtools settings menu, which was incorrectly mirroring the Position sub-trigger's class so the two could not be styled independently.

packages/query-devtools/src/Devtools.tsx

@@ -1192,7 +1192,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                       class={cx(
                         styles().settingsSubTrigger,
                         'tsqd-settings-menu-sub-trigger',
-                        'tsqd-settings-menu-sub-trigger-position',
+                        'tsqd-settings-menu-sub-trigger-theme',
                       )}
                     >
                       <span>Theme</span>

packages/query-devtools/src/__tests__/Devtools.test.tsx

@@ -1078,12 +1078,13 @@ describe('Devtools', () => {
         key: 'Enter',
       })
 
-      const themeTrigger = Array.from(
-        document.querySelectorAll<HTMLElement>(
-          '.tsqd-settings-menu-sub-trigger',
-        ),
-      ).find((el) => String(el.textContent).includes('Theme'))
-      expect(themeTrigger).not.toBeUndefined()
+      const themeTrigger = document.querySelector<HTMLElement>(
+        '.tsqd-settings-menu-sub-trigger-theme',
+      )
+      expect(themeTrigger).not.toBeNull()
+      expect(themeTrigger).not.toBe(
+        document.querySelector('.tsqd-settings-menu-sub-trigger-position'),
+      )
       fireEvent.keyDown(themeTrigger!, { key: 'ArrowRight' })
 
       expect(
@@ -1098,12 +1099,10 @@ describe('Devtools', () => {
         key: 'Enter',
       })
 
-      const themeTrigger = Array.from(
-        document.querySelectorAll<HTMLElement>(
-          '.tsqd-settings-menu-sub-trigger',
-        ),
-      ).find((el) => String(el.textContent).includes('Theme'))
-      expect(themeTrigger).not.toBeUndefined()
+      const themeTrigger = document.querySelector<HTMLElement>(
+        '.tsqd-settings-menu-sub-trigger-theme',
+      )
+      expect(themeTrigger).not.toBeNull()
       fireEvent.keyDown(themeTrigger!, { key: 'ArrowRight' })
 
       const themeMenu = document.querySelector(