feat(core,ui): trigger image support

docs/configuration.md

@@ -57,6 +57,13 @@ type KeyboardKey = ModifierKey | (string & {});
 
 ```
 
+- `triggerImage` - The image used for the dev tools trigger
+
+```ts
+{ triggerImage: string }
+
+```
+
 - `urlFlag` - The required flag that must be present in the url to enable devtools.
 
 ```ts

packages/devtools-ui/src/styles/use-styles.ts

@@ -59,6 +59,8 @@ const stylesFactory = (theme: Theme = 'dark') => {
 
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
 
+  const wrapperSize = 320
+
   return {
     logo: css`
       cursor: pointer;
@@ -78,7 +80,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
 
     selectWrapper: css`
       width: 100%;
-      max-width: 300px;
+      max-width: ${wrapperSize}px;
       display: flex;
       flex-direction: column;
       gap: 0.375rem;
@@ -129,7 +131,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
     `,
     inputWrapper: css`
       width: 100%;
-      max-width: 300px;
+      max-width: ${wrapperSize}px;
       display: flex;
       flex-direction: column;
       gap: 0.375rem;
@@ -152,6 +154,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
     `,
     input: css`
       appearance: none;
+      box-sizing: border-box;
       width: 100%;
       padding: 0.75rem;
       border-radius: 0.5rem;

packages/devtools/src/components/trigger.tsx

@@ -8,9 +8,11 @@ import type { Accessor } from 'solid-js'
 export const Trigger = ({
   isOpen,
   setIsOpen,
+  image = TanStackLogo,
 }: {
   isOpen: Accessor<boolean>
   setIsOpen: (isOpen: boolean) => void
+  image: string
 }) => {
   const { settings } = useDevtoolsSettings()
   const styles = useStyles()
@@ -28,7 +30,7 @@ export const Trigger = ({
       class={buttonStyle()}
       onClick={() => setIsOpen(!isOpen())}
     >
-      <img src={TanStackLogo} alt="TanStack Logo" />
+      <img src={image || TanStackLogo} alt="TanStack Devtools" />
     </button>
   )
 }

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

@@ -61,6 +61,11 @@ export type DevtoolsStore = {
      * @default "dark"
      */
     theme: 'light' | 'dark'
+    /**
+     * The image used for the dev tools trigger
+     * @default TanStackLogo
+     */
+    triggerImage: string
   }
   state: {
     activeTab: TabName
@@ -86,6 +91,7 @@ export const initialState: DevtoolsStore = {
       window.matchMedia('(prefers-color-scheme: dark)').matches
         ? 'dark'
         : 'light',
+    triggerImage: '',
   },
   state: {
     activeTab: 'plugins',

packages/devtools/src/devtools.tsx

@@ -201,7 +201,11 @@ export default function DevTools() {
                   : true
             }
           >
-            <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />
+            <Trigger
+              isOpen={isOpen}
+              setIsOpen={toggleOpen}
+              image={settings().triggerImage}
+            />
             <MainPanel isResizing={isResizing} isOpen={isOpen}>
               <ContentPanel
                 ref={(ref) => (panelRef = ref)}

packages/devtools/src/tabs/settings-tab.tsx

@@ -71,6 +71,13 @@ export const SettingsTab = () => {
             }
             checked={settings().hideUntilHover}
           />
+          <Input
+            label="Trigger Image"
+            description="Specify the URL of the image to use for the trigger"
+            value={settings().triggerImage}
+            placeholder="Default TanStack Logo"
+            onChange={(value) => setSettings({ triggerImage: value })}
+          />
           <Select
             label="Theme"
             description="Choose the theme for the devtools panel"