#434

frontend/src/components/counts/CountsControls.tsx

@@ -3,12 +3,14 @@ import { useEffect, useId, useState } from 'react'
 import CountsAdditionalConditions from '@/components/counts/CountsAdditionalConditions'
 import CountsAxes from '@/components/counts/CountsAxes'
 import CountsFieldTree from '@/components/counts/CountsFieldTree'
+import AnimatedCollapse from '@/components/common/AnimatedCollapse'
 import DateTimeField from '@/components/common/DateTimeField'
 import FormField from '@/components/common/FormField'
 import HelpPopover from '@/components/common/HelpPopover'
 import TagInput from '@/components/common/TagInput'
 import { Button } from '@/components/ui/button'
 import { normaliseCountsParams } from '@/lib/counts'
+import { useClientMotion } from '@/lib/useClientMotion'
 import { inputClass } from '@/lib/utils'
 import { useUITranslation } from '@/lib/useUITranslation'
 
@@ -27,6 +29,7 @@ const CountsControls = (
 ) => {
   const { label, message } = useUITranslation ('counts')
   const id = useId ()
+  const motion = useClientMotion ()
   const [draft, setDraft] = useState (() => new URLSearchParams (applied))
   const order = applied.get ('order')
   const nestedJSON = applied.get ('nested_json')
@@ -75,7 +78,9 @@ const CountsControls = (
       <Button type="submit" size="sm">{label ('run')}</Button>
       <Button type="button" size="sm" variant="outline" aria-expanded={open}
           aria-controls={id} onClick={() => setOpen (!open)}>
-        {label ('conditions')}<span aria-hidden>{open ? '▴' : '▾'}</span>
+        {label ('conditions')}<span aria-hidden className="inline-block" style={{
+            transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
+            transition: `transform ${motion.duration ('collapse')}ms ${motion.easing}` }}>▸</span>
       </Button>
       <select className={inputClass (false, 'w-auto py-1')}
           aria-label={message ('mode').text} lang={message ('mode').language}
@@ -84,11 +89,12 @@ const CountsControls = (
           {message (value).text}</option>)}
       </select>{actions}
     </div>
-    <div id={id} hidden={!open} className="max-h-[35dvh] overflow-y-auto overscroll-contain
+    <AnimatedCollapse id={id} open={open}>
+    <div className="max-h-[35dvh] overflow-y-auto overscroll-contain
         border-b py-2 dark:border-slate-700 md:max-h-[40dvh]">
       <div className="grid gap-3 md:grid-cols-2">
         <fieldset className="min-w-0" data-counts-output>
-          {mode === 'summary' ? <CountsAxes resource={resource} params={draft} update={update}/>
+	  {mode === 'summary' ? <CountsAxes params={draft} update={update}/>
               : <>
                 <legend className="mb-1 font-semibold">{label ('output')}</legend>
                 <label className="mb-1 flex items-center gap-1">
@@ -120,10 +126,11 @@ const CountsControls = (
             {() => <TagInput includeNico includeUnused value={draft.get ('tags') ?? ''}
                 setValue={value => update ('tags', value)}/>}
           </FormField>}
-          <CountsAdditionalConditions resource={resource} params={draft} update={update}/>
+	  <CountsAdditionalConditions params={draft} update={update}/>
         </fieldset>
       </div>
     </div>
+    </AnimatedCollapse>
   </form>
 }