feat(core): expand plugin tabs when no plugin selected (#81)

Author: harry-whorlow

packages/devtools/src/components/main-panel.tsx

@@ -32,7 +32,9 @@ export const MainPanel = (props: {
         styles().devtoolsPanelContainerResizing(props.isResizing),
       )}
     >
-      <DrawClientProvider>{props.children}</DrawClientProvider>
+      <DrawClientProvider animationMs={400}>
+        {props.children}
+      </DrawClientProvider>
     </div>
   )
 }

packages/devtools/src/context/draw-context.tsx

@@ -1,35 +1,55 @@
-import { createContext, createSignal, useContext } from 'solid-js'
+import {
+  createContext,
+  createMemo,
+  createSignal,
+  onCleanup,
+  useContext,
+} from 'solid-js'
 import type { ParentComponent } from 'solid-js'
 
-const useDraw = () => {
-  const [activeMenuHover, setActiveMenuHover] = createSignal<boolean>(false)
+const useDraw = (props: { animationMs: number }) => {
+  const [activeHover, setActiveHover] = createSignal<boolean>(false)
+  const [forceExpand, setForceExpand] = createSignal<boolean>(false)
+
+  const expanded = createMemo(() => activeHover() || forceExpand())
+
   let hoverTimeout: ReturnType<typeof setTimeout> | null = null
+  onCleanup(() => {
+    if (hoverTimeout) clearTimeout(hoverTimeout)
+  })
 
   const hoverUtils = {
     enter: () => {
       if (hoverTimeout) {
         clearTimeout(hoverTimeout)
         hoverTimeout = null
       }
-      setActiveMenuHover(true)
+      setActiveHover(true)
     },
 
     leave: () => {
       hoverTimeout = setTimeout(() => {
-        setActiveMenuHover(false)
-      }, 400)
+        setActiveHover(false)
+      }, props.animationMs)
     },
   }
 
-  return { activeMenuHover, hoverUtils }
+  return {
+    expanded,
+    setForceExpand,
+    hoverUtils,
+    animationMs: props.animationMs,
+  }
 }
 
 type ContextType = ReturnType<typeof useDraw>
 
 const DrawContext = createContext<ContextType | undefined>(undefined)
 
-export const DrawClientProvider: ParentComponent = (props) => {
-  const value = useDraw()
+export const DrawClientProvider: ParentComponent<{
+  animationMs: number
+}> = (props) => {
+  const value = useDraw({ animationMs: props.animationMs })
 
   return (
     <DrawContext.Provider value={value}>{props.children}</DrawContext.Provider>

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

@@ -1,6 +1,7 @@
-import { createMemo, useContext } from 'solid-js'
+import { createEffect, createMemo, useContext } from 'solid-js'
 import { DevtoolsContext } from './devtools-context.jsx'
-/* import type { DevtoolsPlugin } from './devtools-context' */
+import { useDrawContext } from './draw-context.jsx'
+
 import type { DevtoolsStore } from './devtools-store.js'
 
 /**
@@ -19,10 +20,19 @@ const useDevtoolsContext = () => {
 
 export const usePlugins = () => {
   const { store, setStore } = useDevtoolsContext()
+  const { setForceExpand } = useDrawContext()
 
   const plugins = createMemo(() => store.plugins)
   const activePlugin = createMemo(() => store.state.activePlugin)
 
+  createEffect(() => {
+    if (activePlugin() == null) {
+      setForceExpand(false)
+    } else {
+      setForceExpand(true)
+    }
+  })
+
   const setActivePlugin = (pluginId: string) => {
     setStore((prev) => ({
       ...prev,

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

@@ -4,6 +4,9 @@ import { tokens } from './tokens'
 import type { TanStackDevtoolsConfig } from '../context/devtools-context'
 import type { Accessor } from 'solid-js'
 
+const mSecondsToCssSeconds = (mSeconds: number) =>
+  `${(mSeconds / 1000).toFixed(2)}s`
+
 const stylesFactory = () => {
   const { colors, font, size, alpha, border } = tokens
   const { fontFamily, size: fontSize } = font
@@ -231,26 +234,37 @@ const stylesFactory = () => {
       height: 100%;
       overflow: hidden;
     `,
+
     pluginsTabDraw: css`
       width: 0px;
       height: 100%;
       background-color: ${colors.darkGray[800]};
       box-shadow: 0 1px 0 ${colors.gray[700]};
-      transition: width 0.3s ease;
     `,
     pluginsTabDrawExpanded: css`
       width: ${size[48]};
       border-right: 1px solid ${colors.gray[700]};
     `,
+    pluginsTabDrawTransition: (mSeconds: number) => {
+      return css`
+        transition: width ${mSecondsToCssSeconds(mSeconds)} ease;
+      `
+    },
+
     pluginsTabSidebar: css`
       width: ${size[48]};
       overflow-y: auto;
-      transition: transform 0.3s ease;
       transform: translateX(-100%);
     `,
     pluginsTabSidebarExpanded: css`
       transform: translateX(0);
     `,
+    pluginsTabSidebarTransition: (mSeconds: number) => {
+      return css`
+        transition: transform ${mSecondsToCssSeconds(mSeconds)} ease;
+      `
+    },
+
     pluginName: css`
       font-size: ${fontSize.xs};
       font-family: ${fontFamily.sans};

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

@@ -7,7 +7,7 @@ import { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from '../constants'
 
 export const PluginsTab = () => {
   const { plugins, activePlugin, setActivePlugin } = usePlugins()
-  const { activeMenuHover, hoverUtils } = useDrawContext()
+  const { expanded, hoverUtils, animationMs } = useDrawContext()
   let activePluginRef: HTMLDivElement | undefined
 
   createEffect(() => {
@@ -23,9 +23,13 @@ export const PluginsTab = () => {
   return (
     <div class={styles().pluginsTabPanel}>
       <div
-        class={clsx(styles().pluginsTabDraw, {
-          [styles().pluginsTabDrawExpanded]: activeMenuHover(),
-        })}
+        class={clsx(
+          styles().pluginsTabDraw,
+          {
+            [styles().pluginsTabDrawExpanded]: expanded(),
+          },
+          styles().pluginsTabDrawTransition(animationMs),
+        )}
         onMouseEnter={() => {
           hoverUtils.enter()
         }}
@@ -34,9 +38,13 @@ export const PluginsTab = () => {
         }}
       >
         <div
-          class={clsx(styles().pluginsTabSidebar, {
-            [styles().pluginsTabSidebarExpanded]: activeMenuHover(),
-          })}
+          class={clsx(
+            styles().pluginsTabSidebar,
+            {
+              [styles().pluginsTabSidebarExpanded]: expanded(),
+            },
+            styles().pluginsTabSidebarTransition(animationMs),
+          )}
         >
           <For each={plugins()}>
             {(plugin) => {