feat(core,ui): trigger image support (#134)

Howdy! I apologize for not reviewing the contributing guidelines more
carefully and built this feature without first soliciting feedback from
the team on the desire to implement this. I hope this request is
received well.

This PR adds support for specifying a trigger image via the config
object or via the UI. We are interested in using the devtools package
for more than just the tanstack ecosystem, and would like to consider
replacing it with our engineering/dev logo (even though we're using
tanstack for all the things!) If no logo is provided, it will default to
the tanstack logo in the package.

<img width="112" height="105" alt="image"
src="https://github.com/user-attachments/assets/10a0728e-61cc-4eea-b076-e065a17651fb"
/>

**Via UI**
<img width="430" alt="image"
src="https://github.com/user-attachments/assets/42b7f024-114c-4cfb-879a-7a0a30b5892b"
/>


**Via Configuragion**
```tsx
<TanStackDevtools
  config={{
    triggerImage: "https://avatars.githubusercontent.com/u/1041792?v=4",
  }}
/>
```

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: jakiestfu

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"