From 52a8d62be56a43203fecb7bfc6a0fdb7d4169fb9 Mon Sep 17 00:00:00 2001
From: miteruzo <miteruzo@naver.com>
Date: Sun, 25 Oct 2026 16:25:04 +0900
Subject: [PATCH] #434

---
 .../src/components/counts/CountsControls.tsx  | 13 ++-
 .../components/counts/CountsNestedTable.tsx   | 91 ++++++++++---------
 .../src/components/counts/CountsResults.tsx   |  9 +-
 .../counts/CountsSelectableTable.tsx          |  8 +-
 .../src/components/counts/countsTable.css     | 19 ++++
 frontend/src/index.css                        |  1 +
 frontend/src/lib/counts.ts                    |  6 +-
 frontend/src/lib/countsDisplay.ts             | 39 ++++++--
 frontend/src/lib/countsTableLayout.ts         |  2 +-
 frontend/src/locales/ja/counts.json           | 10 +-
 frontend/src/pages/CountsResourcePage.tsx     |  9 +-
 11 files changed, 139 insertions(+), 68 deletions(-)
 create mode 100644 frontend/src/components/counts/countsTable.css

diff --git a/frontend/src/components/counts/CountsControls.tsx b/frontend/src/components/counts/CountsControls.tsx
index 55068f0..7ffa0b7 100644
--- a/frontend/src/components/counts/CountsControls.tsx
+++ b/frontend/src/components/counts/CountsControls.tsx
@@ -14,12 +14,13 @@ import type { CountsResource } from '@/lib/counts'
 
 
 const CountsControls = (
-    { resource, applied, open, setOpen, execute }: {
+    { resource, applied, open, setOpen, execute, displayJSON }: {
 	resource: CountsResource
 	applied: URLSearchParams
 	open: boolean
 	setOpen: (open: boolean) => void
-	execute: (params: URLSearchParams) => void },
+	execute: (params: URLSearchParams) => void
+	displayJSON: (enabled: boolean) => void },
 ) => {
   const { label, message } = useUITranslation ('counts')
   const locale = useLocale ()
@@ -92,6 +93,14 @@ const CountsControls = (
 	  <div className="grid gap-4 md:grid-cols-2">
 	    <fieldset className="min-w-0" data-counts-output>
 	      <legend className="mb-2 font-semibold">{label ('output')}</legend>
+	      <label className="mb-2 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>
 	      {mode === 'summary' ? (
 		  <label className="flex flex-wrap items-center gap-2">
 		    {label ('axis')}
diff --git a/frontend/src/components/counts/CountsNestedTable.tsx b/frontend/src/components/counts/CountsNestedTable.tsx
index 37ab970..753987a 100644
--- a/frontend/src/components/counts/CountsNestedTable.tsx
+++ b/frontend/src/components/counts/CountsNestedTable.tsx
@@ -4,7 +4,8 @@ import CountsSortHeader from '@/components/counts/CountsSortHeader'
 import CountsSelectableTable from '@/components/counts/CountsSelectableTable'
 import { changeCountSort, readCountSort, selectedCountChildren,
 	 writeCountSort } from '@/lib/counts'
-import { countsLogicalName, countsNestedOrder, countsNestedText } from '@/lib/countsDisplay'
+import { countsLogicalName, countsNestedExport,
+	 countsNestedOrder, countsNestedText } from '@/lib/countsDisplay'
 import { useLocale } from '@/lib/useLocale'
 import { useUITranslation } from '@/lib/useUITranslation'
 
@@ -53,47 +54,53 @@ const CountsNestedTable = (
 	<summary className="cursor-pointer text-xs" title={message ('nested.toggle').text}>
 	  <LocalisedText language={title.language}>{title.text}</LocalisedText> ({rows.length})
 	</summary>
-	{columns.length > 0 && rows.length > 0 && (
-	    <div className="relative isolate mt-1 max-h-72 w-full min-w-0 overflow-auto">
-	    <CountsSelectableTable family={path} columns={columns.map (field => field.key)}
-		identity={`${path}:${params}`} name={title}
-		className="border text-xs dark:border-slate-700">
-	      <thead className="sticky top-0 z-10 bg-background text-foreground
-		  dark:bg-background dark:text-foreground"><tr>
-		{columns.map (field => (
-		    <CountsSortHeader key={field.key} field={field.key}
-			label={message (field.label)}
-			sorts={sorts} structured={field.children != null}
-			change={(key, additive) => {
-			  const next = changeCountSort (sorts, key, additive)
-			      .map (sort => ({ ...sort, key: `${path}/${sort.key}` }))
-			  update ('child_sort', writeCountSort ([
-			      ...allSorts.filter (sort => !sort.key.startsWith (`${path}/`)),
-			      ...next]))
-			}}/>))}
-	      </tr></thead>
-	      <tbody>{ordered.map ((row, index) => (
-		  <tr key={index} className="border-t dark:border-slate-700">
-		    {columns.map (field => (
-			<td key={field.key}
-			    className="overflow-hidden break-words border-t px-2 py-1
-			    align-top dark:border-slate-700"
-			    data-counts-copy={
-				field.children
-				? countsNestedText (
-				    row[field.key] as CountRecord[] ?? [], field.children,
-				    `${path}.${field.key}`, params, locale)
-				: countsLogicalName (row, field.key, locale).text}>
-			  {field.children
-			   ? <CountsNestedTable rows={row[field.key] as CountRecord[] ?? []}
-			       fields={field.children} path={`${path}.${field.key}`}
-			       resource={resource}
-			       title={message (field.label)} params={params} update={update}/>
-			   : scalar (row, field.key)}
-			</td>))}
-		  </tr>))}</tbody>
-	    </CountsSelectableTable>
-	    </div>)}
+	{params.get ('nested_json') === '1' ? (
+	    <pre data-counts-scroll
+		className="mt-1 max-h-72 w-full overflow-auto whitespace-pre-wrap
+		    break-words text-xs">
+	      {JSON.stringify (countsNestedExport (rows, fields, path, params, locale), null, 2)}
+	    </pre>) : (columns.length > 0 && rows.length > 0 && (
+	    <div data-counts-scroll
+		className="relative isolate mt-1 max-h-72 w-full min-w-0 overflow-auto">
+	      <CountsSelectableTable family={path} columns={columns.map (field => field.key)}
+		  identity={`${path}:${params}`} name={title}
+		  className="border text-xs dark:border-slate-700">
+		<thead className="sticky top-0 z-10 bg-background text-foreground
+		    dark:bg-background dark:text-foreground"><tr>
+		  {columns.map (field => (
+		      <CountsSortHeader key={field.key} field={field.key}
+			  label={message (field.label)}
+			  sorts={sorts} structured={field.children != null}
+			  change={(key, additive) => {
+			    const next = changeCountSort (sorts, key, additive)
+				.map (sort => ({ ...sort, key: `${path}/${sort.key}` }))
+			    update ('child_sort', writeCountSort ([
+				...allSorts.filter (sort => !sort.key.startsWith (`${path}/`)),
+				...next]))
+			  }}/>))}
+		</tr></thead>
+		<tbody>{ordered.map ((row, index) => (
+		    <tr key={index} className="border-t dark:border-slate-700">
+		      {columns.map (field => (
+			  <td key={field.key}
+			      className="overflow-hidden break-words border-t px-2 py-1
+			      align-top dark:border-slate-700"
+			      data-counts-copy={
+				  field.children
+				  ? countsNestedText (
+				      row[field.key] as CountRecord[] ?? [], field.children,
+				      `${path}.${field.key}`, params, locale)
+				  : countsLogicalName (row, field.key, locale).text}>
+			    {field.children
+			     ? <CountsNestedTable rows={row[field.key] as CountRecord[] ?? []}
+				 fields={field.children} path={`${path}.${field.key}`}
+				 resource={resource}
+				 title={message (field.label)} params={params} update={update}/>
+			     : scalar (row, field.key)}
+			  </td>))}
+		    </tr>))}</tbody>
+	      </CountsSelectableTable>
+	    </div>))}
       </details>)
 }
 
diff --git a/frontend/src/components/counts/CountsResults.tsx b/frontend/src/components/counts/CountsResults.tsx
index 5a21816..6184951 100644
--- a/frontend/src/components/counts/CountsResults.tsx
+++ b/frontend/src/components/counts/CountsResults.tsx
@@ -5,7 +5,7 @@ import CountsSortHeader from '@/components/counts/CountsSortHeader'
 import CountsResizeHandle from '@/components/counts/CountsResizeHandle'
 import CountsSelectableTable from '@/components/counts/CountsSelectableTable'
 import PostThumbnailPreview from '@/components/posts/PostThumbnailPreview'
-import { changeCountSort, countColumns, fieldsForCounts,
+import { changeCountSort, countColumns, countsRequestParams, fieldsForCounts,
 	 readCountSort, selectedCountColumns, writeCountSort } from '@/lib/counts'
 import { countsCellCopy, countsCellText, countsImageURL } from '@/lib/countsDisplay'
 import { useLocale } from '@/lib/useLocale'
@@ -78,8 +78,8 @@ const CountsResults = (
       return <a href={countsImageURL (value) ?? undefined} target="_blank" rel="noreferrer">
 	{value}</a>
     case 'is_latest':
-      return <span aria-label={message (`boolean.${row.isLatest}`).text}
-	  lang={message (`boolean.${row.isLatest}`).language}>{row.isLatest ? '✓' : '✗'}</span>
+      return <LocalisedText language={message ('latestValue').language}>
+	{value}</LocalisedText>
     case 'user':
       return row.createdByUser?.name ? value : (
 	  <LocalisedText language={message (
@@ -96,7 +96,8 @@ const CountsResults = (
 	{!summary && columns.length === 0 ? <p>{label ('nested.noColumns')}</p> : (
 	    <CountsSelectableTable family={summary ? 'summary' : resource}
 		columns={summary ? ['group', 'count'] : columns}
-		identity={`${resource}:${params}:${(data.versions ?? []).map (row => row.id)}`}
+		identity={`${resource}:${countsRequestParams (params)}:${columns.join (',')}:${
+		    (data.versions ?? []).map (row => row.id)}`}
 		className="text-left text-sm">
 	      <thead className="sticky top-0 z-20 bg-background text-foreground
 		  dark:bg-background dark:text-foreground"><tr>
diff --git a/frontend/src/components/counts/CountsSelectableTable.tsx b/frontend/src/components/counts/CountsSelectableTable.tsx
index 988895f..ba669ad 100644
--- a/frontend/src/components/counts/CountsSelectableTable.tsx
+++ b/frontend/src/components/counts/CountsSelectableTable.tsx
@@ -129,7 +129,7 @@ const CountsSelectableTable = (
 	    aria-activedescendant={selection == null ? undefined
 		: `${id}-${selection.end.row}-${selection.end.column}`}
 	    style={{ tableLayout: 'fixed', width: totalWidth }}
-	    className={cn ('select-none border-separate border-spacing-0 outline-none',
+	    className={cn ('counts-grid select-none border-separate border-spacing-0 outline-none',
 		'focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500',
 		'dark:focus-visible:outline-blue-400',
 		'[&>tbody>tr>td[data-counts-selected]]:bg-blue-100',
@@ -144,6 +144,12 @@ const CountsSelectableTable = (
 	      const element = event.target as Element
 	      if (element.closest ('table') !== event.currentTarget
 		  || element.closest (interactive) != null || event.button !== 0) return
+	      if (element instanceof HTMLElement && element.hasAttribute ('data-counts-scroll'))
+	      {
+		const rect = element.getBoundingClientRect ()
+		if (event.clientX >= rect.left + element.clientLeft + element.clientWidth
+		    || event.clientY >= rect.top + element.clientTop + element.clientHeight) return
+	      }
 	      const point = pointFor (element)
 	      if (point == null) return
 	      event.stopPropagation ()
diff --git a/frontend/src/components/counts/countsTable.css b/frontend/src/components/counts/countsTable.css
new file mode 100644
index 0000000..1065994
--- /dev/null
+++ b/frontend/src/components/counts/countsTable.css
@@ -0,0 +1,19 @@
+.counts-grid > tbody > tr > td {
+  @apply h-6;
+}
+
+.counts-grid > tbody > tr:nth-child(odd) > td:not([data-counts-selected]) {
+  @apply bg-white text-slate-900;
+}
+
+.counts-grid > tbody > tr:nth-child(even) > td:not([data-counts-selected]) {
+  @apply bg-slate-50 text-slate-900;
+}
+
+.dark .counts-grid > tbody > tr:nth-child(odd) > td:not([data-counts-selected]) {
+  @apply bg-slate-950 text-slate-100;
+}
+
+.dark .counts-grid > tbody > tr:nth-child(even) > td:not([data-counts-selected]) {
+  @apply bg-slate-900 text-slate-100;
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3f776a6..581256e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,4 +1,5 @@
 @import "@fontsource-variable/noto-sans-jp";
+@import './components/counts/countsTable.css';
 
 @tailwind base;
 @tailwind components;
diff --git a/frontend/src/lib/counts.ts b/frontend/src/lib/counts.ts
index 4b41e33..def6766 100644
--- a/frontend/src/lib/counts.ts
+++ b/frontend/src/lib/counts.ts
@@ -78,9 +78,7 @@ const nested: Partial<Record<CountColumn, CountField[]>> = {
 	{ key: 'kind', label: 'counts:columns.kind' },
 	{ key: 'name', label: 'history:name' },
 	{ key: 'category', label: 'common:categoryLabel' },
-	{ key: 'sections', label: 'counts:columns.sections', children: [
-	    { key: 'beginMs', label: 'counts:columns.begin' },
-	    { key: 'endMs', label: 'counts:columns.end' }] },
+	{ key: 'sections', label: 'counts:columns.sections' },
 	{ key: 'names', label: 'counts:columns.names', children: nameFields }],
     names: nameFields,
     aliases: [{ key: 'languageCode', label: 'counts:columns.language' }, ...aliasFields],
@@ -173,7 +171,7 @@ export const normaliseCountsParams = (
 
 export const countsRequestParams = (params: URLSearchParams): URLSearchParams => {
   const result = new URLSearchParams (params)
-  for (const key of ['columns', 'children', 'child_sort'])
+  for (const key of ['columns', 'children', 'child_sort', 'nested_json'])
     result.delete (key)
   return result
 }
diff --git a/frontend/src/lib/countsDisplay.ts b/frontend/src/lib/countsDisplay.ts
index ce7cf20..4d86896 100644
--- a/frontend/src/lib/countsDisplay.ts
+++ b/frontend/src/lib/countsDisplay.ts
@@ -17,7 +17,7 @@ export const countsCellText = (
   case 'resource_id': return String (row.resourceId)
   case 'version_no': return String (row.versionNo)
   case 'is_latest':
-    return translateUIMessage (`boolean.${row.isLatest}`, 'counts', locale).text
+    return row.isLatest ? translateUIMessage ('latestValue', 'counts', locale).text : ''
   case 'title': return row.title ?? ''
   case 'url': return row.url ?? ''
   case 'thumbnail':
@@ -68,6 +68,20 @@ export const countsCSVCell = (
 }
 
 
+const countsSectionRanges = (value: unknown, locale: LocaleCode): string[] | null => {
+  if (!Array.isArray (value)) return null
+  const time = (ms: number): string => {
+    const parts = msToTime (ms).split (':')
+    if (parts.length === 2) parts[0] = parts[0].padStart (2, '0')
+    return parts.join (':')
+  }
+  return value.map ((section: { beginMs: number; endMs: number | null }) =>
+      translateUIMessage ('sections.range', 'counts', locale, {
+	  begin: time (section.beginMs),
+	  end: section.endMs == null ? '' : time (section.endMs) }).text)
+}
+
+
 const displayNames = new Map<string, Intl.DisplayNames> ()
 
 
@@ -78,6 +92,9 @@ export const countsLogicalName = (
 ): { text: string; language?: string } => {
   const value = row[field]
   if (value == null) return { text: '' }
+  if (field === 'sections')
+    return { text: (countsSectionRanges (value, locale) ?? []).join (
+	translateUIMessage ('sections.separator', 'counts', locale).text) }
   const code = String (value)
   if (field === 'languageCode' || field === 'scriptCode')
   {
@@ -106,7 +123,6 @@ export const countsLogicalName = (
 	: `common:categories.${code}`, 'counts', locale)
   if (typeof value === 'boolean')
     return translateUIMessage (`boolean.${value}`, 'counts', locale)
-  if (field === 'beginMs' || field === 'endMs') return { text: msToTime (Number (value)) }
   return { text: String (value) }
 }
 
@@ -130,15 +146,16 @@ export const countsNestedExport = (
 ): unknown => {
   const selected = selectedCountChildren (params)
   const columns = fields.filter (field => selected.has (`${path}.${field.key}`))
-  if (columns.length === 0)
-    return { [translateUIMessage ('common:countLabel', 'counts', locale).text]: rows.length }
+  if (columns.length === 0) return rows.map (() => ({ }))
   return countsNestedOrder (rows, path, params, locale).map (row =>
       Object.fromEntries (columns.map (field => [
 	  translateUIMessage (field.label, 'counts', locale).text,
 	  field.children
 	  ? countsNestedExport (row[field.key] as CountRecord[] ?? [], field.children,
 	      `${path}.${field.key}`, params, locale)
-	  : countsLogicalName (row, field.key, locale).text])))
+	  : (field.key === 'sections'
+	     ? countsSectionRanges (row[field.key], locale)
+	     : countsLogicalName (row, field.key, locale).text)])))
 }
 
 
@@ -168,10 +185,14 @@ export const countsCellCopy = (
     field: CountField,
     params: URLSearchParams,
     locale: LocaleCode,
-): string => field.children
-    ? countsNestedText (row[field.key as keyof CountsVersion] as CountRecord[] ?? [],
-	field.children, field.key, params, locale)
-    : countsCellText (row, field.key as CountColumn, locale)
+): string => {
+  if (field.children == null) return countsCellText (row, field.key as CountColumn, locale)
+  const rows = row[field.key as keyof CountsVersion] as CountRecord[] ?? []
+  return params.get ('nested_json') === '1'
+      ? JSON.stringify (
+	  countsNestedExport (rows, field.children, field.key, params, locale), null, 2)
+      : countsNestedText (rows, field.children, field.key, params, locale)
+}
 
 
 // Historical URLs are displayed without fetching current attachments or metadata.
diff --git a/frontend/src/lib/countsTableLayout.ts b/frontend/src/lib/countsTableLayout.ts
index 945de5d..0985218 100644
--- a/frontend/src/lib/countsTableLayout.ts
+++ b/frontend/src/lib/countsTableLayout.ts
@@ -9,7 +9,7 @@ export const defaultCountWidths: Record<string, number> = {
     video_ms: 120, original_created_at: 260, original_created_from: 240,
     original_created_before: 240, name: 240, names: 480, category: 180,
     aliases: 360, deprecated: 240, user: 200, created_at: 240, group: 240, count: 160,
-    id: 88, versionNo: 88, kind: 140, sections: 240, beginMs: 120, endMs: 120,
+    id: 88, versionNo: 88, kind: 140, sections: 260,
     languageCode: 180, scriptCode: 200, autoGenerated: 120 }
 
 type Layout = {
diff --git a/frontend/src/locales/ja/counts.json b/frontend/src/locales/ja/counts.json
index ce6d542..779aa50 100644
--- a/frontend/src/locales/ja/counts.json
+++ b/frontend/src/locales/ja/counts.json
@@ -35,8 +35,6 @@
     "language": "言語",
     "kind": "内部・外部",
     "sections": "記載区間",
-    "begin": "開始",
-    "end": "終了",
     "names": "言語別名称",
     "thumbnailDisplay": "サムネール表示"
   },
@@ -60,7 +58,8 @@
   "nested": {
     "toggle": "表内表を展開・折り畳み",
     "selection": "親を OFF にしても子項目の選択は保持します。子項目がすべて OFF の表は件数のみ表示します。",
-    "noColumns": "出力項目が選択されていません。"
+    "noColumns": "出力項目が選択されていません。",
+    "asJSON": "内表を JSON 表示"
   },
   "sort": {
     "action": "クリックで単独ソート。Ctrl または長押しでキーを追加・方向変更・解除。NULL は末尾。",
@@ -79,5 +78,10 @@
   },
   "resize": {
     "column": "{{column}}の列幅を変更。境界をドラッグ、タッチでは長押ししてドラッグ。矢印キーでも調整できます。"
+  },
+  "latestValue": "最新",
+  "sections": {
+    "range": "{{begin}}～{{end}}",
+    "separator": "、"
   }
 }
diff --git a/frontend/src/pages/CountsResourcePage.tsx b/frontend/src/pages/CountsResourcePage.tsx
index 057e0fd..793acc9 100644
--- a/frontend/src/pages/CountsResourcePage.tsx
+++ b/frontend/src/pages/CountsResourcePage.tsx
@@ -27,6 +27,8 @@ const CountsResourcePage = ({ resource }: { resource: CountsResource }) => {
   const [source, setParams] = useSearchParams ()
   const params = normaliseCountsParams (resource, source)
   const canonical = params.toString ()
+  const controlParams = new URLSearchParams (params)
+  controlParams.delete ('nested_json')
   const request = countsRequestParams (params)
   const [open, setOpen] = useState (false)
   const [sidebarOpen, setSidebarOpen] = useState (false)
@@ -103,8 +105,11 @@ const CountsResourcePage = ({ resource }: { resource: CountsResource }) => {
 	  <MainArea className="flex min-h-0 min-w-0 flex-col p-2">
 	    <PageTitle className="mb-1 text-base">{label (`titles.${resource}`)}</PageTitle>
 	    <div className="relative shrink-0 pr-16">
-	      <CountsControls key={`${resource}:${canonical}`} resource={resource} applied={params}
-		  open={open} setOpen={setOpen} execute={next => {
+	      <CountsControls key={`${resource}:${controlParams}`}
+		  resource={resource} applied={params}
+		  open={open} setOpen={setOpen}
+		  displayJSON={enabled => update ('nested_json', enabled ? '1' : '0')}
+		  execute={next => {
 		    if (next.toString () === canonical) void refetch ()
 		    else setParams (next)
 		  }}/>