frontend/src/pages/theatres/TheatreDetailPage.test.tsx

@@ -277,10 +277,9 @@ describe ('TheatreDetailPage', () => {
       .toBeInTheDocument ()
     expect (within (tagSection ()).getByRole ('link', { name: '別親タグ' }))
       .toBeInTheDocument ()
-    expect (within (tagSection ()).getByRole ('link', { name: '子タグ' }))
+    expect (within (tagSection ()).getAllByRole ('link', { name: '子タグ' })[0])
       .toBeInTheDocument ()
-    expect (within (tagSection ()).getAllByRole ('link', { name: '子タグ' }))
+    expect (within (tagSection ()).getAllByText ('↳').length).toBeGreaterThan (0)
-      .toHaveLength (1)
 
     fireEvent.click (screen.getByRole ('button', { name: '2 列 A 型' }))
     fireEvent.click (screen.getAllByRole ('button', { name: '横並び' })[0])

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -125,10 +125,9 @@ const flattenTags = (tags: Tag[]): Tag[] => {
 
 
 const tagsByCategory = (tags: Tag[]): Partial<Record<Category, Tag[]>> => {
-  const flattenedTags = flattenTags (tags)
   const grouped: Partial<Record<Category, Tag[]>> = { }
 
-  for (const tag of flattenedTags)
+  for (const tag of tags)
     {
       grouped[tag.category] ??= []
       grouped[tag.category]!.push (tag)
@@ -141,15 +140,39 @@ const tagsByCategory = (tags: Tag[]): Partial<Record<Category, Tag[]>> => {
 }
 
 
+const renderReadonlyTagTree = (
+    tag:       Tag,
+    nestLevel: number,
+    path:      string,
+    ancestors: Set<number> = new Set<number> (),
+): ReactNode[] => {
+  const key = `${ path }-${ tag.id }`
+  const nextAncestors = new Set (ancestors)
+  nextAncestors.add (tag.id)
+
+  return [
+      (
+	  <li key={key} className="text-left leading-tight">
+	    <TagLink tag={tag} nestLevel={nestLevel} withCount={false}/>
+	  </li>),
+      ...((tag.children ?? [])
+	  .filter (child => !(nextAncestors.has (child.id)))
+	  .sort (compareTagName)
+	  .flatMap (child =>
+	      renderReadonlyTagTree (child, nestLevel + 1, key, nextAncestors)))]
+}
+
+
 const TagList: FC<{ tags: Tag[]; compact?: boolean; flow?: TagFlow }> = (
     { tags, compact, flow = 'vertical' }) => {
-  const grouped = tagsByCategory (tags)
+  const horizontalGrouped = tagsByCategory (flattenTags (tags))
+  const verticalGrouped = tagsByCategory (tags)
 
   if (flow === 'horizontal')
     {
       return (
 	  <ul className={cn ('flex flex-wrap gap-x-3 gap-y-1', compact && 'text-sm')}>
-	    {CATEGORIES.flatMap (cat => grouped[cat] ?? []).map (tag => (
+	    {CATEGORIES.flatMap (cat => horizontalGrouped[cat] ?? []).map (tag => (
 		<li key={tag.id} className="text-left leading-tight">
 		  <TagLink tag={tag} withCount={false}/>
 		</li>))}
@@ -159,7 +182,7 @@ const TagList: FC<{ tags: Tag[]; compact?: boolean; flow?: TagFlow }> = (
   return (
       <div className="space-y-3">
 	{CATEGORIES.map (cat => {
-	  const rows = grouped[cat] ?? []
+	  const rows = verticalGrouped[cat] ?? []
 	  if (rows.length === 0)
 	    return null
 
@@ -169,10 +192,8 @@ const TagList: FC<{ tags: Tag[]; compact?: boolean; flow?: TagFlow }> = (
 		  {CATEGORY_NAMES[cat]}
 		</div>
 		<ul className={cn ('space-y-1', compact && 'text-sm')}>
-		  {rows.map (tag => (
+		  {rows.flatMap (tag =>
-		      <li key={tag.id} className="text-left leading-tight">
+		      renderReadonlyTagTree (tag, 0, `cat-${ cat }`))}
-			<TagLink tag={tag} withCount={false}/>
-		      </li>))}
 		</ul>
 	      </div>)
 	})}