Add option to enable/disable standard seo-tab and settings-tab

packages/devtools/src/components/tab-content.tsx

@@ -1,14 +1,15 @@
 import { createMemo } from 'solid-js'
-import { useDevtoolsState } from '../context/use-devtools-context'
-import { tabs } from '../tabs'
+import { useDevtoolsSettings, useDevtoolsState } from '../context/use-devtools-context'
+import { getTabs } from '../tabs'
 import { useStyles } from '../styles/use-styles'
 import type { JSX } from 'solid-js'
 
 export const TabContent = () => {
   const { state } = useDevtoolsState()
+  const { settings } = useDevtoolsSettings()
   const styles = useStyles()
   const component = createMemo<(() => JSX.Element) | null>(
-    () => tabs.find((t) => t.id === state().activeTab)?.component || null,
+    () => getTabs(settings()).find((t) => t.id === state().activeTab)?.component || null,
   )
 
   return <div class={styles().tabContent}>{component()?.()}</div>

packages/devtools/src/components/tabs.tsx

@@ -2,9 +2,9 @@ import clsx from 'clsx'
 import { For } from 'solid-js'
 import { PiP, X } from '@tanstack/devtools-ui/icons'
 import { useStyles } from '../styles/use-styles'
-import { useDevtoolsState } from '../context/use-devtools-context'
+import { useDevtoolsState, useDevtoolsSettings } from '../context/use-devtools-context'
 import { useDrawContext } from '../context/draw-context'
-import { tabs } from '../tabs'
+import { getTabs } from '../tabs'
 import { usePiPWindow } from '../context/pip-context'
 
 interface TabsProps {
@@ -14,6 +14,7 @@ interface TabsProps {
 export const Tabs = (props: TabsProps) => {
   const styles = useStyles()
   const { state, setState } = useDevtoolsState()
+  const { settings } = useDevtoolsSettings()
   const pipWindow = usePiPWindow()
   const handleDetachment = () => {
     pipWindow().requestPipWindow(
@@ -24,7 +25,7 @@ export const Tabs = (props: TabsProps) => {
 
   return (
     <div class={styles().tabContainer}>
-      <For each={tabs}>
+      <For each={getTabs(settings())}>
         {(tab) => (
           <button
             type="button"

packages/devtools/src/context/devtools-store.ts

@@ -66,6 +66,16 @@ export type DevtoolsStore = {
      * @default TanStackLogo
      */
     triggerImage: string
+    /**
+     * Whether the SEO tab is enabled
+     * @default true
+     */
+    enableSeoTab: boolean
+    /**
+     * Whether the Settings tab is enabled
+     * @default true
+     */
+    enableSettingsTab: boolean
   }
   state: {
     activeTab: TabName
@@ -92,6 +102,8 @@ export const initialState: DevtoolsStore = {
         ? 'dark'
         : 'light',
     triggerImage: '',
+    enableSeoTab: true,
+    enableSettingsTab: true,
   },
   state: {
     activeTab: 'plugins',

packages/devtools/src/tabs/index.tsx

@@ -2,6 +2,7 @@ import { Cogs, List, PageSearch } from '@tanstack/devtools-ui/icons'
 import { SettingsTab } from './settings-tab'
 import { PluginsTab } from './plugins-tab'
 import { SeoTab } from './seo-tab'
+import type { DevtoolsStore } from '../context/devtools-store'
 
 export const tabs = [
   {
@@ -24,4 +25,12 @@ export const tabs = [
   },
 ] as const
 
+export const getTabs = (settings: DevtoolsStore['settings']) => {
+  return tabs.filter((t) => {
+    if (t.id === 'seo') return settings.enableSeoTab
+    if (t.id === 'settings') return settings.enableSettingsTab
+    return true
+  })
+}
+
 export type TabName = (typeof tabs)[number]['id']