feat(devtools): foldable actions and filters

artalar · Oct 11, 2024 · fc76711 · fc76711
1 parent 0d46dd0
commit fc76711
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 19 deletions.
diff --git a/packages/devtools/src/Graph/reatomFilters.tsx b/packages/devtools/src/Graph/reatomFilters.tsx
@@ -1,4 +1,4 @@
-import { parseAtoms, assign, LinkedListAtom, reatomString, Action, atom } from '@reatom/framework'
+import { parseAtoms, assign, LinkedListAtom, reatomString, Action, atom, reatomBoolean } from '@reatom/framework'
 import { h, hf, JSX } from '@reatom/jsx'
 import { reatomZod } from '@reatom/npm-zod'
 import { z } from 'zod'
@@ -7,6 +7,8 @@ const Filters = z.object({
   hoverPreview: z.boolean(),
   inlinePreview: z.boolean(),
   timestamps: z.boolean(),
+  filtersFolded: z.boolean(),
+  actionsFolded: z.boolean(),
   valuesSearch: z.string(),
   list: z.array(
     z.object({
@@ -26,11 +28,13 @@ const initState: Filters = {
   hoverPreview: true,
   inlinePreview: false,
   timestamps: true,
+  filtersFolded: false,
+  actionsFolded: false,
   valuesSearch: '',
   list: [{ name: 'private', search: `(^_)|(\._)`, type: 'mismatch', color: DEFAULT_COLOR, readonly: true }],
 }
 const initSnapshot = JSON.stringify(initState)
-const version = 'v17'
+const version = 'v20'
 
 const FilterButton = ({
   isInput,
@@ -90,15 +94,33 @@ export const reatomFilters = (
     element: (
       <div>
         <fieldset
+          data-folded={filters.filtersFolded}
           css={`
             display: flex;
             flex-direction: column;
             gap: 10px;
-            padding-top: 10px;
             margin: 0 20px;
+
+            &[data-folded] {
+              max-height: 0px;
+              overflow: hidden;
+              padding-bottom: 0;
+            }
           `}
         >
-          <legend>filters</legend>
+          <legend
+            css={`
+              cursor: pointer;
+            `}
+            aria-label="Show/hide filters"
+            title="Show/hide filters"
+            tabindex={0}
+            role="button"
+            aria-expanded={filters.filtersFolded}
+            on:click={filters.filtersFolded.toggle}
+          >
+            filters
+          </legend>
           <form
             on:submit={(ctx, e) => {
               e.preventDefault()
@@ -243,15 +265,34 @@ export const reatomFilters = (
           />
         </fieldset>
         <fieldset
+          data-folded={filters.actionsFolded}
           css={`
             display: flex;
             gap: 10px;
             margin: 0 20px;
             top: 0;
             overflow: auto;
+
+            &[data-folded] {
+              max-height: 0px;
+              overflow: hidden;
+              padding-bottom: 0;
+            }
           `}
         >
-          <legend>actions</legend>
+          <legend
+            css={`
+              cursor: pointer;
+            `}
+            aria-label="Show/hide actions"
+            title="Show/hide actions"
+            tabindex={0}
+            role="button"
+            aria-expanded={filters.filtersFolded}
+            on:click={filters.actionsFolded.toggle}
+          >
+            actions
+          </legend>
           <div
             css={`
               width: 150px;

diff --git a/packages/devtools/src/Graph/reatomInspector.tsx b/packages/devtools/src/Graph/reatomInspector.tsx
@@ -94,6 +94,14 @@ export const reatomInspector = ({ filters }: { filters: ReturnType<typeof reatom
     })
   }, `${name}.close`)
 
+  const OPACITY = {
+    hidden: '0',
+    open: '0.8',
+    fixed: '1',
+  }
+
+  ;['filtersHeight', 'opacity']
+
   const filtersHeight = atom((ctx) => filters.element.clientHeight + 'px', `${name}.filtersHeight`).pipe(
     withComputed((ctx, s) => {
       ctx.spy(state)
@@ -102,17 +110,10 @@ export const reatomInspector = ({ filters }: { filters: ReturnType<typeof reatom
     }),
   )
 
-  const OPACITY = {
-    hidden: '0',
-    open: '0.8',
-    fixed: '1',
-  }
-
   const element = (
     <dialog
       open={atom((ctx) => ctx.spy(state).kind !== 'hidden')}
       css:filtersHeight={filtersHeight}
-      css:pe={atom((ctx) => (ctx.spy(state).kind === 'hidden' ? 'none' : 'all'))}
       css:opacity={atom((ctx) => OPACITY[ctx.spy(state).kind])}
       css={`
         position: absolute;
@@ -121,17 +122,10 @@ export const reatomInspector = ({ filters }: { filters: ReturnType<typeof reatom
         width: calc(100% - 160px);
         height: calc(100% - var(--filtersHeight) - 40px);
         max-height: 100%;
-        overflow: auto;
-        background: var(--devtools-bg);
-        padding: 0;
-        margin: 0;
-        border: none;
-        border-radius: 2px;
         box-shadow:
           0 0 0 1px rgba(0, 0, 0, 0.1),
           0 4px 11px rgba(0, 0, 0, 0.1);
         z-index: 1;
-        /* pointer-events: var(--pe); */
         opacity: var(--opacity);
         transition: opacity 0.2s;
         &:hover {