#434

frontend/src/components/counts/CountsControls.tsx

@@ -9,7 +9,9 @@ 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 { countsUseLatest, normaliseCountsParams } from '@/lib/counts'
+import { countsUseLatest, fieldsForCounts, normaliseCountsParams,
+	 selectedCountColumns } from '@/lib/counts'
+import { useCountsDefinition } from '@/lib/countsDefinitions'
 import { useClientMotion } from '@/lib/useClientMotion'
 import { inputClass } from '@/lib/utils'
 import { useUITranslation } from '@/lib/useUITranslation'
@@ -21,21 +23,36 @@ import type { CountsResource } from '@/lib/counts'
 
 const CountsControls = (
     { resource, applied, open, setOpen, execute, displayJSON, displayRowNumbers,
-      reorder, actions }: {
+      displayThumbnail, reorder, actions }: {
         resource: CountsResource; applied: URLSearchParams; open: boolean
         setOpen: (open: boolean) => void
         execute: (params: URLSearchParams) => void
         displayJSON: (enabled: boolean) => void
 	displayRowNumbers: (enabled: boolean) => void
+	displayThumbnail: (enabled: boolean) => void
         reorder: (value: string) => void; actions?: ReactNode },
 ) => {
   const { label, message } = useUITranslation ('counts')
+  const definition = useCountsDefinition ()
   const id = useId ()
   const motion = useClientMotion ()
   const [draft, setDraft] = useState (() => new URLSearchParams (applied))
   const order = applied.get ('order')
   const nestedJSON = applied.get ('nested_json')
   const rowNumbers = applied.get ('row_numbers')
+  const thumbnail = selectedCountColumns (resource, applied, definition).includes ('thumbnail')
+  const details = applied.get ('mode') === 'details'
+  const hasNested = details && fieldsForCounts (resource, definition)
+      .some (field => field.children != null)
+  useEffect (() => {
+    setDraft (previous => {
+      const next = new URLSearchParams (previous)
+      const columns = selectedCountColumns (resource, previous, definition)
+	  .filter (column => column !== 'thumbnail')
+      next.set ('columns', (thumbnail ? ['thumbnail', ...columns] : columns).join (','))
+      return next
+    })
+  }, [thumbnail, resource, definition])
   useEffect (() => {
     setDraft (previous => {
       const next = new URLSearchParams (previous)
@@ -95,14 +112,32 @@ const CountsControls = (
         {['summary', 'details'].map (value => <option key={value} value={value}>
           {message (value).text}</option>)}
       </select>
+      {actions}
+    </div>
+    <fieldset className="flex flex-wrap items-center gap-x-3 gap-y-1 border-b py-1
+	dark:border-slate-700">
+      <legend className="sr-only">{label ('displaySettings')}</legend>
       <label className="inline-flex items-center gap-1 text-sm">
 	<input type="checkbox" checked={draft.get ('row_numbers') === '1'}
 	    onChange={event => {
 	      update ('row_numbers', event.target.checked ? '1' : '0')
 	      displayRowNumbers (event.target.checked)
 	    }}/>{label ('rowNumbers')}
-      </label>{actions}
-    </div>
+      </label>
+      {details && resource === 'posts' && <label
+	  className="inline-flex items-center gap-1 text-sm">
+	<input type="checkbox" checked={thumbnail}
+	    onChange={event => displayThumbnail (event.target.checked)}/>
+	{label ('columns.thumbnailDisplay')}
+      </label>}
+      {hasNested && <label className="inline-flex items-center gap-1 text-sm">
+	<input type="checkbox" checked={draft.get ('nested_json') === '1'}
+	    onChange={event => {
+	      update ('nested_json', event.target.checked ? '1' : '0')
+	      displayJSON (event.target.checked)
+	    }}/>{label ('nested.asJSON')}
+      </label>}
+    </fieldset>
     <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]">
@@ -111,12 +146,6 @@ const CountsControls = (
 	  {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">
-                  <input type="checkbox" checked={draft.get ('nested_json') === '1'}
-                      onChange={event => {
-                        update ('nested_json', event.target.checked ? '1' : '0')
-                        displayJSON (event.target.checked)
-                      }}/>{label ('nested.asJSON')}</label>
                 <CountsFieldTree resource={resource} params={draft} update={(key, value) => {
                   update (key, value)
                   if (key === 'order') reorder (value)