feat(core): collapsable plugin tabs (#77)

Adds collapsable plugin tabs, to the devtoolss panel, for increased
devtool real-estate.

Author: harry-whorlow

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

@@ -1,8 +1,10 @@
 import clsx from 'clsx'
+import { DrawClientProvider } from '../context/draw-context'
 import { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import { TANSTACK_DEVTOOLS } from '../utils/storage'
 import { usePiPWindow } from '../context/pip-context'
+
 import type { Accessor, JSX } from 'solid-js'
 
 export const MainPanel = (props: {
@@ -30,7 +32,7 @@ export const MainPanel = (props: {
         styles().devtoolsPanelContainerResizing(props.isResizing),
       )}
     >
-      {props.children}
+      <DrawClientProvider>{props.children}</DrawClientProvider>
     </div>
   )
 }

packages/devtools/src/components/tabs.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx'
 import { For } from 'solid-js'
 import { useStyles } from '../styles/use-styles'
 import { useDevtoolsState } from '../context/use-devtools-context'
+import { useDrawContext } from '../context/draw-context'
 import { tabs } from '../tabs'
 import { usePiPWindow } from '../context/pip-context'
 
@@ -18,6 +19,8 @@ export const Tabs = (props: TabsProps) => {
       `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`,
     )
   }
+  const { hoverUtils } = useDrawContext()
+
   return (
     <div class={styles().tabContainer}>
       <For each={tabs}>
@@ -26,6 +29,12 @@ export const Tabs = (props: TabsProps) => {
             type="button"
             onClick={() => setState({ activeTab: tab.id })}
             class={clsx(styles().tab, { active: state().activeTab === tab.id })}
+            onMouseEnter={() => {
+              if (tab.id === 'plugins') hoverUtils.enter()
+            }}
+            onMouseLeave={() => {
+              if (tab.id === 'plugins') hoverUtils.leave()
+            }}
           >
             {tab.icon}
           </button>

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

@@ -0,0 +1,47 @@
+import { createContext, createSignal, useContext } from 'solid-js'
+import type { ParentComponent } from 'solid-js'
+
+const useDraw = () => {
+  const [activeMenuHover, setActiveMenuHover] = createSignal<boolean>(false)
+  let hoverTimeout: ReturnType<typeof setTimeout> | null = null
+
+  const hoverUtils = {
+    enter: () => {
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout)
+        hoverTimeout = null
+      }
+      setActiveMenuHover(true)
+    },
+
+    leave: () => {
+      hoverTimeout = setTimeout(() => {
+        setActiveMenuHover(false)
+      }, 400)
+    },
+  }
+
+  return { activeMenuHover, hoverUtils }
+}
+
+type ContextType = ReturnType<typeof useDraw>
+
+const DrawContext = createContext<ContextType | undefined>(undefined)
+
+export const DrawClientProvider: ParentComponent = (props) => {
+  const value = useDraw()
+
+  return (
+    <DrawContext.Provider value={value}>{props.children}</DrawContext.Provider>
+  )
+}
+
+export function useDrawContext() {
+  const context = useContext(DrawContext)
+
+  if (context === undefined) {
+    throw new Error(`useDrawContext must be used within a DrawClientProvider`)
+  }
+
+  return context
+}

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

@@ -231,12 +231,25 @@ const stylesFactory = () => {
       height: 100%;
       overflow: hidden;
     `,
-    pluginsTabSidebar: css`
-      width: ${size[48]};
+    pluginsTabDraw: css`
+      width: 0px;
+      height: 100%;
       background-color: ${colors.darkGray[800]};
-      border-right: 1px solid ${colors.gray[700]};
       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]};
+    `,
+    pluginsTabSidebar: css`
+      width: ${size[48]};
       overflow-y: auto;
+      transition: transform 0.3s ease;
+      transform: translateX(-100%);
+    `,
+    pluginsTabSidebarExpanded: css`
+      transform: translateX(0);
     `,
     pluginName: css`
       font-size: ${fontSize.xs};

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

@@ -1,11 +1,13 @@
 import { For, createEffect } from 'solid-js'
 import clsx from 'clsx'
+import { useDrawContext } from '../context/draw-context'
 import { usePlugins } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from '../constants'
 
 export const PluginsTab = () => {
   const { plugins, activePlugin, setActivePlugin } = usePlugins()
+  const { activeMenuHover, hoverUtils } = useDrawContext()
   let activePluginRef: HTMLDivElement | undefined
 
   createEffect(() => {
@@ -17,32 +19,50 @@ export const PluginsTab = () => {
     }
   })
   const styles = useStyles()
+
   return (
     <div class={styles().pluginsTabPanel}>
-      <div class={styles().pluginsTabSidebar}>
-        <For each={plugins()}>
-          {(plugin) => {
-            let pluginHeading: HTMLHeadingElement | undefined
-            createEffect(() => {
-              if (pluginHeading) {
-                typeof plugin.name === 'string'
-                  ? (pluginHeading.textContent = plugin.name)
-                  : plugin.name(pluginHeading)
-              }
-            })
-            return (
-              <div
-                onClick={() => setActivePlugin(plugin.id!)}
-                class={clsx(styles().pluginName, {
-                  active: activePlugin() === plugin.id,
-                })}
-              >
-                <h3 id={PLUGIN_TITLE_CONTAINER_ID} ref={pluginHeading} />
-              </div>
-            )
-          }}
-        </For>
+      <div
+        class={clsx(styles().pluginsTabDraw, {
+          [styles().pluginsTabDrawExpanded]: activeMenuHover(),
+        })}
+        onMouseEnter={() => {
+          hoverUtils.enter()
+        }}
+        onMouseLeave={() => {
+          hoverUtils.leave()
+        }}
+      >
+        <div
+          class={clsx(styles().pluginsTabSidebar, {
+            [styles().pluginsTabSidebarExpanded]: activeMenuHover(),
+          })}
+        >
+          <For each={plugins()}>
+            {(plugin) => {
+              let pluginHeading: HTMLHeadingElement | undefined
+              createEffect(() => {
+                if (pluginHeading) {
+                  typeof plugin.name === 'string'
+                    ? (pluginHeading.textContent = plugin.name)
+                    : plugin.name(pluginHeading)
+                }
+              })
+              return (
+                <div
+                  onClick={() => setActivePlugin(plugin.id!)}
+                  class={clsx(styles().pluginName, {
+                    active: activePlugin() === plugin.id,
+                  })}
+                >
+                  <h3 id={PLUGIN_TITLE_CONTAINER_ID} ref={pluginHeading} />
+                </div>
+              )
+            }}
+          </For>
+        </div>
       </div>
+
       <div
         id={PLUGIN_CONTAINER_ID}
         ref={activePluginRef}