#434

frontend/src/components/counts/CountsResults.tsx

@@ -8,6 +8,7 @@ import PostThumbnailPreview from '@/components/posts/PostThumbnailPreview'
 import { changeCountSort, countColumns, countsRequestParams, fieldsForCounts,
 	 readCountSort, selectedCountColumns, writeCountSort } from '@/lib/counts'
 import { countsCellCopy, countsCellText, countsImageURL } from '@/lib/countsDisplay'
+import useDialogue from '@/lib/dialogues/useDialogue'
 import { useLocale } from '@/lib/useLocale'
 import { useUITranslation } from '@/lib/useUITranslation'
 
@@ -25,6 +26,7 @@ const CountsResults = (
 ) => {
   const { label, message } = useUITranslation ('counts')
   const locale = useLocale ()
+  const dialogue = useDialogue ()
   const summary = (params.get ('mode') ?? 'summary') === 'summary'
   const axis = params.get ('axis') ?? 'month'
   const columns = selectedCountColumns (resource, params)
@@ -70,8 +72,22 @@ const CountsResults = (
     case 'thumbnail':
       {
 	const url = countsImageURL (row.thumbnailBase)
-	return url == null ? null : <PostThumbnailPreview url={url} className="h-10 w-16"
-	    alt={message ('shared:labels.thumbnail').text} referrerPolicy="no-referrer"/>
+	return url == null ? null : (
+	    <button type="button" className="block" aria-label={message (
+		'shared:labels.thumbnail').text}
+		onClick={event => {
+		  const trigger = event.currentTarget
+		  void dialogue.form ({
+		      title: label ('shared:labels.thumbnail'),
+		      cancelText: label ('shared:dialogue.close'),
+		      size: 'viewport',
+		      body: () => <img src={url} alt={message ('shared:labels.thumbnail').text}
+			  referrerPolicy="no-referrer" className="h-full w-full object-contain"/>
+		  }).then (() => trigger.focus ({ preventScroll: true }))
+		}}>
+	      <PostThumbnailPreview url={url} className="h-10 w-16"
+		  alt={message ('shared:labels.thumbnail').text} referrerPolicy="no-referrer"/>
+	    </button>)
       }
     case 'url':
     case 'thumbnail_base':
@@ -107,7 +123,8 @@ const CountsResults = (
 		  <CountsSortHeader field="count" label={message ('metric')}
 		      sorts={sorts} change={sort}/>
 		</> : columns.map (column => column === 'thumbnail'
-		    ? <th key={column} className="relative px-2 py-1">
+		    ? <th key={column} data-counts-heading={message (countColumns[column]).text}
+			className="relative px-2 py-1">
 			<span className="sr-only">{label (countColumns[column])}</span>
 			<CountsResizeHandle field={column} label={message (countColumns[column])}/>
 		      </th>