backend/app/controllers/materials_controller.rb

@@ -1,3 +1,6 @@
+require 'set'
+
+
 class MaterialsController < ApplicationController
   rescue_from MaterialZipExporter::EmptyExportError, with: :render_zip_empty
   rescue_from MaterialZipExporter::DuplicatePathError, with: :render_zip_duplicate_path
@@ -13,12 +16,14 @@ class MaterialsController < ApplicationController
     offset = (page - 1) * limit
 
     filters = material_index_filters
+    tag_graph = material_index_tag_graph(filters)
     q = Material.includes(:material_export_items,
                           thumbnail_attachment: :blob,
                           file_attachment: :blob,
                           tag: :tag_name)
     q = q.where(tag_id: nil) if filters[:tag_state] == 'untagged'
     q = q.where.not(tag_id: nil) if filters[:tag_state] == 'tagged'
+    q = apply_material_tag_filter(q, filters, tag_graph)
     q = q.where('materials.created_at >= ?', filters[:created_from]) if filters[:created_from]
     q = q.where('materials.created_at <= ?', filters[:created_to]) if filters[:created_to]
     q = q.where('materials.updated_at >= ?', filters[:updated_from]) if filters[:updated_from]
@@ -37,8 +42,16 @@ class MaterialsController < ApplicationController
         .offset(offset)
         .to_a
 
-    render json: { materials: MaterialRepr.list_many(materials, host: request.base_url),
+    response = { materials: MaterialRepr.list_many(materials, host: request.base_url),
-                   count: }
+                 count: }
+    if filters[:tag_id]
+      response[:tag_scope] = material_index_tag_scope(filters, tag_graph)
+    end
+    if filters[:group_by] == 'parent_tag'
+      response[:groups] = material_index_groups(materials, tag_graph)
+    end
+
+    render json: response
   end
 
   def show
@@ -198,9 +211,18 @@ class MaterialsController < ApplicationController
     direction = params[:direction].to_s.downcase
     direction = 'desc' unless ['asc', 'desc'].include?(direction)
 
+    group_by = params[:group_by].to_s.presence
+    group_by = 'none' unless ['none', 'parent_tag'].include?(group_by)
+
+    tag_id = params[:tag_id].to_i
+    tag_id = nil if tag_id <= 0
+
     { q: params[:q].to_s.strip.presence,
       tag_state:,
       media_kind:,
+      tag_id:,
+      include_descendants: bool?(:include_descendants),
+      group_by:,
       created_from: parse_time_param(:created_from),
       created_to: parse_time_param(:created_to),
       updated_from: parse_time_param(:updated_from),
@@ -270,6 +292,147 @@ class MaterialsController < ApplicationController
     end
   end
 
+  def apply_material_tag_filter q, filters, tag_graph
+    return q unless filters[:tag_id]
+
+    tag_ids =
+        if tag_graph
+          tag_graph[:scope_tag_ids]
+        else
+          [filters[:tag_id]]
+        end
+
+    q.where(tag_id: tag_ids)
+  end
+
+  def material_index_tag_graph filters
+    return nil unless filters[:tag_id]
+
+    children_by_parent_id = Hash.new { |h, k| h[k] = [] }
+    TagImplication.pluck(:parent_tag_id, :tag_id).each do |parent_id, child_id|
+      children_by_parent_id[parent_id] << child_id
+    end
+
+    scope_tag_ids =
+        if filters[:include_descendants]
+          collect_material_descendant_ids(filters[:tag_id], children_by_parent_id)
+        else
+          Set.new([filters[:tag_id]])
+        end
+    tags_by_id =
+        Tag
+        .joins(:tag_name)
+        .where(id: scope_tag_ids)
+        .pluck('tags.id', 'tag_names.name', 'tags.category', 'tags.deprecated_at')
+        .each_with_object({ }) do |(id, name, category, deprecated_at), hash|
+          hash[id] = { id:, name:, category:, deprecated: deprecated_at.present? }
+        end
+
+    selected_tag = tags_by_id[filters[:tag_id]]
+    return nil unless selected_tag
+
+    group_tag_id_by_tag_id = { }
+    children_by_parent_id[filters[:tag_id]].each do |child_tag_id|
+      assign_material_group_branch(child_tag_id,
+                                   children_by_parent_id:,
+                                   tags_by_id:,
+                                   group_tag_id_by_tag_id:,
+                                   current_group_tag_id: nil,
+                                   seen: Set.new([filters[:tag_id]]))
+    end
+
+    { selected_tag_id: filters[:tag_id],
+      selected_tag:,
+      scope_tag_ids: scope_tag_ids.to_a,
+      tags_by_id:,
+      group_tag_id_by_tag_id: }
+  end
+
+  def collect_material_descendant_ids selected_tag_id, children_by_parent_id
+    ids = Set.new([selected_tag_id])
+    stack = [selected_tag_id]
+
+    until stack.empty?
+      tag_id = stack.pop
+      children_by_parent_id[tag_id].each do |child_tag_id|
+        next if ids.include?(child_tag_id)
+
+        ids << child_tag_id
+        stack << child_tag_id
+      end
+    end
+
+    ids
+  end
+
+  def assign_material_group_branch tag_id, children_by_parent_id:, tags_by_id:,
+                                   group_tag_id_by_tag_id:, current_group_tag_id:, seen:
+    return if seen.include?(tag_id)
+
+    tag = tags_by_id[tag_id]
+    return unless tag
+
+    seen = seen.dup << tag_id
+    next_group_tag_id = current_group_tag_id
+    next_group_tag_id = tag_id if next_group_tag_id.nil? && !tag[:deprecated]
+    group_tag_id_by_tag_id[tag_id] = next_group_tag_id if next_group_tag_id
+
+    children_by_parent_id[tag_id].each do |child_tag_id|
+      assign_material_group_branch(child_tag_id,
+                                   children_by_parent_id:,
+                                   tags_by_id:,
+                                   group_tag_id_by_tag_id:,
+                                   current_group_tag_id: next_group_tag_id,
+                                   seen:)
+    end
+  end
+
+  def material_index_groups materials, tag_graph
+    return [] unless tag_graph
+
+    groups_by_key = { }
+
+    materials.each do |material|
+      next unless material.tag_id
+
+      group_tag_id =
+          if material.tag_id == tag_graph[:selected_tag_id]
+            tag_graph[:selected_tag_id]
+          else
+            tag_graph[:group_tag_id_by_tag_id][material.tag_id] || tag_graph[:selected_tag_id]
+          end
+
+      group_tag = tag_graph[:tags_by_id][group_tag_id]
+      next unless group_tag
+
+      key = "tag:#{ group_tag_id }"
+      group =
+          groups_by_key[key] ||= { key:,
+                                   tag: group_tag_repr(group_tag),
+                                   material_ids: [],
+                                   count: 0 }
+      group[:material_ids] << material.id
+      group[:count] += 1
+    end
+
+    groups_by_key.values.sort_by { |group| group[:tag][:name] }
+  end
+
+  def material_index_tag_scope filters, tag_graph
+    return nil unless tag_graph
+
+    {
+      tag: group_tag_repr(tag_graph[:selected_tag]),
+      include_descendants: filters[:include_descendants]
+    }
+  end
+
+  def group_tag_repr group_tag
+    { id: group_tag[:id],
+      name: group_tag[:name],
+      category: group_tag[:category] }
+  end
+
   def material_index_order_sql filters
     direction = filters[:direction] == 'asc' ? 'ASC' : 'DESC'
     sort_sql =

frontend/src/components/MaterialSidebar.tsx

@@ -2,6 +2,7 @@ import { Fragment, useEffect, useRef, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useLocation, useNavigate } from 'react-router-dom'
 
+import PrefetchLink from '@/components/PrefetchLink'
 import TagLink from '@/components/TagLink'
 import SidebarComponent from '@/components/layout/SidebarComponent'
 import { materialsKeys } from '@/lib/queryKeys'
@@ -35,8 +36,23 @@ const setChildrenById = (
 
 
 const materialPath = (
-    tagName: string,
+    tagId: number,
-    materialFilter: MaterialFilter): string => `/materials?q=${ encodeURIComponent (tagName) }&material_filter=${ materialFilter }`
+    materialFilter: MaterialFilter): string =>
+    `/materials?tag_id=${ tagId }&include_descendants=1&group_by=parent_tag`
+    + `&material_filter=${ materialFilter }`
+
+
+const clearTagSelectionPath = (
+    locationSearch: string,
+    materialFilter: MaterialFilter): string => {
+    const qs = new URLSearchParams (locationSearch)
+    qs.delete ('tag_id')
+    qs.delete ('include_descendants')
+    qs.delete ('group_by')
+    qs.delete ('page')
+    qs.set ('material_filter', materialFilter)
+    return `/materials?${ qs.toString () }`
+}
 
 
 const sidebarTagToTag = (tag: MaterialSidebarTag): Tag => ({
@@ -55,6 +71,13 @@ const sidebarTagToTag = (tag: MaterialSidebarTag): Tag => ({
     matchedAlias:   null })
 
 
+const tagSelectionShellClass = (selected: boolean): string =>
+    selected
+    ? 'rounded-md border border-sky-500 bg-sky-50 px-2 py-1 text-sky-700 '
+      + 'dark:border-sky-400 dark:bg-sky-950 dark:text-sky-100'
+    : 'px-2 py-1'
+
+
 const updateMaterialFilterQuery = (
     pathname: string,
     locationSearch: string,
@@ -72,16 +95,16 @@ const MaterialFilterButtons: FC<{
 }> = ({ materialFilter, onChange }) => (
     <div className="flex flex-wrap gap-2">
       {FILTERS.map (value => (
-	  <button
+      <button
 	      key={value}
 	      type="button"
 	      onClick={() => onChange (value)}
 	      className={`rounded-full border px-3 py-1 text-sm ${
 		  materialFilter === value
-		  ? 'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400 ' +
+		  ? 'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400 '
-		    'dark:bg-sky-950 dark:text-sky-100'
+		    + 'dark:bg-sky-950 dark:text-sky-100'
-		  : 'border-neutral-300 bg-white text-neutral-700 dark:border-stone-700 ' +
+		  : 'border-neutral-300 bg-white text-neutral-700 dark:border-stone-700 '
-		    'dark:bg-stone-900 dark:text-stone-200' }`}>
+		    + 'dark:bg-stone-900 dark:text-stone-200' }`}>
 	    {FILTER_LABELS[value]}
 	  </button>))}
     </div>)
@@ -89,12 +112,14 @@ const MaterialFilterButtons: FC<{
 
 const MaterialTreeNode: FC<{
     materialFilter: MaterialFilter
+    selectedTagId:  number | null
     nestLevel?:     number
     onChildren:     (tagId: number, children: MaterialSidebarTag[]) => void
     openTags:       Record<number, boolean>
     setOpenTags:    Dispatch<SetStateAction<Record<number, boolean>>>
     tag:            MaterialSidebarTag
-}> = ({ materialFilter, nestLevel = 0, onChildren, openTags, setOpenTags, tag }) => {
+}> = ({ materialFilter, nestLevel = 0, onChildren, openTags, selectedTagId,
+	 setOpenTags, tag }) => {
   const open = Boolean (openTags[tag.id])
   const { data } = useQuery ({
       queryKey: materialsKeys.tree ({ parentId: tag.id, materialFilter }),
@@ -120,24 +145,27 @@ const MaterialTreeNode: FC<{
 		  </button>)}
 	    </div>
 	    <div className="flex-1 truncate">
-	      <TagLink
+	      <div className={tagSelectionShellClass (selectedTagId === tag.id)}>
-		  tag={sidebarTagToTag (tag)}
+		<TagLink
-		  nestLevel={nestLevel}
+		    tag={sidebarTagToTag (tag)}
-		  title={tag.name}
+		    nestLevel={nestLevel}
-		  withCount={false}
+		    title={tag.name}
-		  withWiki={false}
+		    withCount={false}
-		  to={materialPath (tag.name, materialFilter)}/>
+		    withWiki={false}
+		    to={materialPath (tag.id, materialFilter)}/>
+	      </div>
 	    </div>
 	  </div>
 	</li>
 	{open && tag.children.length > 0 && (
 	    <ul>
 	      {tag.children.map (child => (
-		  <MaterialTreeNode
+		      <MaterialTreeNode
 		      key={child.id}
 		      tag={child}
 		      nestLevel={nestLevel + 1}
 		      materialFilter={materialFilter}
+		      selectedTagId={selectedTagId}
 		      openTags={openTags}
 		      setOpenTags={setOpenTags}
 		      onChildren={onChildren}/>))}
@@ -149,11 +177,13 @@ const MaterialTreeNode: FC<{
 const MobileMaterialTreeNode: FC<{
     depth?:          number
     materialFilter: MaterialFilter
+    selectedTagId:  number | null
     onChildren:     (tagId: number, children: MaterialSidebarTag[]) => void
     openTags:       Record<number, boolean>
     setOpenTags:    Dispatch<SetStateAction<Record<number, boolean>>>
     tag:            MaterialSidebarTag
-}> = ({ depth = 0, materialFilter, onChildren, openTags, setOpenTags, tag }) => {
+}> = ({ depth = 0, materialFilter, onChildren, openTags, selectedTagId,
+	 setOpenTags, tag }) => {
   const open = Boolean (openTags[tag.id])
   const { data } = useQuery ({
       queryKey: materialsKeys.tree ({ parentId: tag.id, materialFilter }),
@@ -167,18 +197,17 @@ const MobileMaterialTreeNode: FC<{
 
   return (
       <div className="flex flex-row-reverse items-start gap-2">
-	<div className="flex flex-col items-center gap-1">
+      <div className="flex flex-col items-center gap-1">
 	  <div
-	      className="rounded-xl border border-stone-300 bg-white px-3 py-2 text-sm
+	      className={`${ tagSelectionShellClass (selectedTagId === tag.id) } rounded-xl
-			 text-stone-900 shadow-sm dark:border-stone-700 dark:bg-stone-900
+			 border px-3 py-2 text-sm shadow-sm`}
-			 dark:text-stone-100"
 	      style={{ writingMode: 'vertical-rl' }}>
 	    <TagLink
 		tag={sidebarTagToTag (tag)}
 		title={tag.name}
 		withCount={false}
 		withWiki={false}
-		to={materialPath (tag.name, materialFilter)}/>
+		to={materialPath (tag.id, materialFilter)}/>
 	  </div>
 	  {tag.hasChildren && (
 	      <button
@@ -201,13 +230,14 @@ const MobileMaterialTreeNode: FC<{
 		  className="absolute -right-3 top-4 h-px w-3 bg-stone-300 dark:bg-stone-600"/>
 	      {tag.children.map (child => (
 		  <div key={child.id} className="relative">
-		    <MobileMaterialTreeNode
+	    <MobileMaterialTreeNode
-			tag={child}
+		      tag={child}
-			depth={depth + 1}
+		      depth={depth + 1}
-			materialFilter={materialFilter}
+		      materialFilter={materialFilter}
-			openTags={openTags}
+		      selectedTagId={selectedTagId}
-			setOpenTags={setOpenTags}
+		      openTags={openTags}
-			onChildren={onChildren}/>
+		      setOpenTags={setOpenTags}
+		      onChildren={onChildren}/>
 		  </div>))}
 	    </div>)}
       </div>)
@@ -219,6 +249,7 @@ const MaterialSidebar: FC = () => {
   const navigate = useNavigate ()
   const qs = new URLSearchParams (location.search)
   const materialFilter = parseMaterialFilter (qs.get ('material_filter'), 'present')
+  const selectedTagId = Number (qs.get ('tag_id') ?? 0) || null
 
   const [desktopTags, setDesktopTags] = useState<MaterialSidebarTag[]> ([])
   const [openTags, setOpenTags] = useState<Record<number, boolean>> ({ })
@@ -257,12 +288,15 @@ const MaterialSidebar: FC = () => {
     updateMaterialFilterQuery (location.pathname, location.search, navigate, value)
   }
 
+  const clearTagSelection = clearTagSelectionPath (location.search, materialFilter)
+
   const renderDesktopTree = (tags: MaterialSidebarTag[]): ReactNode => (
       tags.map (tag => (
 	  <MaterialTreeNode
 	      key={tag.id}
 	      tag={tag}
 	      materialFilter={materialFilter}
+	      selectedTagId={selectedTagId}
 	      openTags={openTags}
 	      setOpenTags={setOpenTags}
 	      onChildren={setChildren}/>)))
@@ -271,6 +305,14 @@ const MaterialSidebar: FC = () => {
       <>
 	<div className="border-b bg-stone-50 p-3 dark:border-stone-700 dark:bg-stone-950
 			dark:text-stone-100 md:hidden">
+	  <div className="mb-3">
+	    <PrefetchLink
+		to={clearTagSelection}
+		className="text-sm text-sky-700 underline underline-offset-2
+			   dark:text-sky-300">
+	      {selectedTagId != null ? '選択解除' : '全素材'}
+	    </PrefetchLink>
+	  </div>
 	  <MaterialFilterButtons
 	      materialFilter={materialFilter}
 	      onChange={handleFilterChange}/>
@@ -281,6 +323,7 @@ const MaterialSidebar: FC = () => {
 		      key={tag.id}
 		      tag={tag}
 		      materialFilter={materialFilter}
+		      selectedTagId={selectedTagId}
 		      openTags={openTags}
 		      setOpenTags={setOpenTags}
 		      onChildren={setChildren}/>))}
@@ -291,6 +334,12 @@ const MaterialSidebar: FC = () => {
 	<div className="hidden md:block">
 	  <SidebarComponent>
 	    <div className="space-y-4">
+	      <PrefetchLink
+		  to={clearTagSelection}
+		  className="text-sm text-sky-700 underline underline-offset-2
+			     dark:text-sky-300">
+		{selectedTagId != null ? '選択解除' : '全素材'}
+	      </PrefetchLink>
 	      <MaterialFilterButtons
 		  materialFilter={materialFilter}
 		  onChange={handleFilterChange}/>

frontend/src/lib/materials.ts

@@ -7,6 +7,7 @@ import {
 
 import type {
     Material,
+    MaterialIndexResponse,
     MaterialVersion,
     FetchMaterialsParams,
     MaterialFilter,
@@ -20,11 +21,6 @@ export type FetchMaterialTreeParams = {
     materialFilter:  MaterialFilter
 }
 
-export type MaterialIndexResponse = {
-    materials: Material[]
-    count:     number
-}
-
 export type MaterialSyncSuppressionResponse = {
     suppressions: MaterialSyncSuppression[]
 }
@@ -48,11 +44,15 @@ export const parseMaterialFilter = (
 export const fetchMaterials = async (
     { q, tagState, mediaKind, createdFrom, createdTo,
       updatedFrom, updatedTo, sort, direction, page,
+      tagId, includeDescendants, groupBy,
       limit }: FetchMaterialsParams): Promise<MaterialIndexResponse> =>
     await apiGet ('/materials', { params: {
 	...(q && { q }),
 	tag_state:   tagState,
 	media_kind:  mediaKind,
+	...(tagId != null && { tag_id: tagId }),
+	...(includeDescendants && { include_descendants: '1' }),
+	...(groupBy !== 'none' && { group_by: groupBy }),
 	...(createdFrom && { created_from: createdFrom }),
 	...(createdTo && { created_to: createdTo }),
 	...(updatedFrom && { updated_from: updatedFrom }),

frontend/src/pages/materials/MaterialListPage.tsx

@@ -20,6 +20,9 @@ import type { FC, FormEvent } from 'react'
 import type {
     FetchMaterialsParams,
     Material,
+    MaterialFilter,
+    MaterialIndexGroup,
+    MaterialIndexGroupBy,
     MaterialIndexDirection,
     MaterialIndexMediaKind,
     MaterialIndexSort,
@@ -50,6 +53,10 @@ const SORT_LABELS: Record<MaterialIndexSort, string> = {
     version_no:     'バージョン',
     id:             'ID'}
 
+const GROUP_BY_LABELS: Record<MaterialIndexGroupBy, string> = {
+    none:       'オフ',
+    parent_tag: '親タグ'}
+
 
 const setIf = (qs: URLSearchParams, key: string, value: string | null) => {
   const next = value?.trim ()
@@ -79,6 +86,33 @@ const materialTitle = (material: Material): string =>
     material.tag?.name ?? `素材 #${ material.id }`
 
 
+const groupedTagPath = (
+    tagId: number,
+    materialFilter: MaterialFilter): string =>
+    `/materials?tag_id=${ tagId }&include_descendants=1&group_by=parent_tag`
+    + `&material_filter=${ materialFilter }`
+
+
+const materialNewPath = (
+    tagName: string,
+    returnTo: string): string =>
+    `/materials/new?tag=${ encodeURIComponent (tagName) }`
+    + `&return_to=${ encodeURIComponent (returnTo) }`
+
+
+const clearedTagSelectionPath = (
+    locationSearch: string,
+    materialFilter: MaterialFilter): string => {
+    const qs = new URLSearchParams (locationSearch)
+    qs.delete ('tag_id')
+    qs.delete ('include_descendants')
+    qs.set ('group_by', 'none')
+    qs.delete ('page')
+    qs.set ('material_filter', materialFilter)
+    return `/materials?${ qs.toString () }`
+}
+
+
 const MaterialThumb: FC<{ material: Material }> = ({ material }) => (
     <div
 	className={`flex aspect-square h-[180px] w-[180px] items-center justify-center
@@ -154,6 +188,33 @@ const MaterialListItem: FC<{ material: Material }> = ({ material }) => (
     </article>)
 
 
+const GroupHeading: FC<{
+    count:          number
+    materialFilter: MaterialFilter
+    returnTo:       string
+    title:          string
+    tagId:          number
+}> = ({ count, materialFilter, returnTo, title, tagId }) => (
+    <div className="flex flex-wrap items-center gap-2 border-b border-stone-200 pb-2
+		    dark:border-stone-700">
+      <PrefetchLink
+	  to={groupedTagPath (tagId, materialFilter)}
+	  className="font-medium text-sky-700 underline underline-offset-2
+		     dark:text-sky-300">
+	{title}
+      </PrefetchLink>
+      <span className="text-sm text-stone-600 dark:text-stone-300">
+	{count} 件
+      </span>
+      <PrefetchLink
+	  to={materialNewPath (title, returnTo)}
+	  className="text-sm text-sky-700 underline underline-offset-2
+		     dark:text-sky-300">
+	このタグに素材を追加
+      </PrefetchLink>
+    </div>)
+
+
 const MaterialListPage: FC = () => {
   const location = useLocation ()
   const navigate = useNavigate ()
@@ -162,7 +223,10 @@ const MaterialListPage: FC = () => {
 
   const page = Number (query.get ('page') ?? 1)
   const limit = Number (query.get ('limit') ?? 20)
-  const qQuery = query.get ('q') ?? query.get ('tag') ?? ''
+  const qQuery = query.get ('q') ?? ''
+  const tagIdQuery = Number (query.get ('tag_id') ?? 0)
+  const tagId = tagIdQuery > 0 ? tagIdQuery : null
+  const includeDescendants = query.get ('include_descendants') === '1'
   const tagState = query.get ('unclassified') === '1'
       ? 'untagged'
       : parseOption<MaterialIndexTagState> (
@@ -182,6 +246,11 @@ const MaterialListPage: FC = () => {
       query.get ('direction'),
       ['asc', 'desc'],
       'desc')
+  const groupByQuery = parseOption<MaterialIndexGroupBy> (
+      query.get ('group_by'),
+      ['none', 'parent_tag'],
+      'none')
+  const groupBy = tagId == null ? 'none' : groupByQuery
   const view = parseOption<MaterialIndexView> (query.get ('view'), ['card', 'list'], 'card')
   const createdFromQuery = query.get ('created_from') ?? ''
   const createdToQuery = query.get ('created_to') ?? ''
@@ -191,6 +260,7 @@ const MaterialListPage: FC = () => {
   const [q, setQ] = useState ('')
   const [tagStateInput, setTagStateInput] = useState<MaterialIndexTagState> ('all')
   const [mediaKindInput, setMediaKindInput] = useState<MaterialIndexMediaKind> ('all')
+  const [groupByInput, setGroupByInput] = useState<MaterialIndexGroupBy> ('none')
   const [createdFrom, setCreatedFrom] = useState<string | null> (null)
   const [createdTo, setCreatedTo] = useState<string | null> (null)
   const [updatedFrom, setUpdatedFrom] = useState<string | null> (null)
@@ -200,6 +270,9 @@ const MaterialListPage: FC = () => {
       q: qQuery,
       tagState,
       mediaKind,
+      tagId,
+      includeDescendants,
+      groupBy,
       createdFrom: createdFromQuery,
       createdTo: createdToQuery,
       updatedFrom: updatedFromQuery,
@@ -212,18 +285,33 @@ const MaterialListPage: FC = () => {
   const { data, isLoading, isError } = useQuery ({
       queryKey: materialsKeys.index (keys),
       queryFn:  () => fetchMaterials (keys)})
+  const tagScope = data?.tagScope ?? null
   const materials = data?.materials ?? []
+  const groups = data?.groups ?? []
   const totalPages = data ? Math.ceil (data.count / limit) : 0
+  const materialsById = useMemo (
+      () => new Map (materials.map (material => [material.id, material])),
+      [materials],
+  )
+  const groupedMaterialIds = useMemo (
+      () => new Set (groups.flatMap (group => group.materialIds)),
+      [groups],
+  )
+  const ungroupedMaterials = useMemo (
+      () => materials.filter (material => !groupedMaterialIds.has (material.id)),
+      [groupedMaterialIds, materials],
+  )
 
   useEffect (() => {
     setQ (qQuery)
     setTagStateInput (tagState)
     setMediaKindInput (mediaKind)
+    setGroupByInput (groupBy)
     setCreatedFrom (createdFromQuery)
     setCreatedTo (createdToQuery)
     setUpdatedFrom (updatedFromQuery)
     setUpdatedTo (updatedToQuery)
-  }, [createdFromQuery, createdToQuery, mediaKind, qQuery, tagState,
+  }, [createdFromQuery, createdToQuery, groupBy, mediaKind, qQuery, tagState,
       updatedFromQuery, updatedToQuery])
 
   const search = (e: FormEvent) => {
@@ -239,19 +327,78 @@ const MaterialListPage: FC = () => {
     setIf (qs, 'updated_to', updatedTo)
     qs.set ('sort', sort)
     qs.set ('direction', direction)
+    qs.set ('group_by', tagId == null ? 'none' : groupByInput)
     qs.set ('view', view)
     qs.set ('page', '1')
     qs.set ('limit', String (limit))
     qs.set ('material_filter', materialFilter)
+    if (tagId != null)
+      qs.set ('tag_id', String (tagId))
+
+    if (includeDescendants)
+      qs.set ('include_descendants', '1')
+
     navigate (`/materials?${ qs.toString () }`)
   }
 
   const updateQuery = (changes: Record<string, string>) => {
     const qs = new URLSearchParams (location.search)
-    Object.entries (changes).forEach (([key, value]) => qs.set (key, value))
+    Object.entries (changes).forEach (([key, value]) => {
+      if (value === '')
+	qs.delete (key)
+      else
+	qs.set (key, value)
+    })
     navigate (`/materials?${ qs.toString () }`)
   }
 
+  const renderMaterialCollection = (rows: Material[]) =>
+      view === 'card'
+      ? (
+	  <div className="grid grid-cols-[repeat(auto-fill,minmax(196px,1fr))]
+			  justify-items-center gap-4">
+	    {rows.map (material => (
+		<MaterialCard key={material.id} material={material}/>))}
+	  </div>)
+      : (
+	  <div className="space-y-3">
+	    {rows.map (material => (
+		<MaterialListItem key={material.id} material={material}/>))}
+	  </div>)
+
+  const renderGroupedMaterials = (materialGroups: MaterialIndexGroup[]) => (
+      <div className="space-y-6">
+	{materialGroups.map (group => {
+	  const groupMaterials =
+	      group.materialIds
+	      .map (materialId => materialsById.get (materialId))
+	      .filter ((material): material is Material => material != null)
+
+	  if (groupMaterials.length === 0)
+	    return null
+
+	  return (
+	      <section key={group.key} className="space-y-3">
+		<GroupHeading
+		    tagId={group.tag.id}
+		    title={group.tag.name}
+		    count={group.count}
+		    materialFilter={materialFilter}
+		    returnTo={location.pathname + location.search}/>
+		{renderMaterialCollection (groupMaterials)}
+	      </section>)
+	})}
+	{ungroupedMaterials.length > 0 && (
+	    <section className="space-y-3">
+	      <div className="border-b border-stone-200 pb-2 dark:border-stone-700">
+		<span className="font-medium text-stone-900 dark:text-stone-100">
+		  その他
+		</span>
+	      </div>
+	      {renderMaterialCollection (ungroupedMaterials)}
+	    </section>)}
+      </div>)
+
   return (
       <MainArea>
 	<Helmet>
@@ -303,6 +450,28 @@ const MaterialListPage: FC = () => {
 	    </div>
 	  </div>
 
+	  {tagScope && (
+	      <div className="flex flex-wrap items-center gap-3 rounded-lg border
+			      border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-900
+			      dark:border-sky-800 dark:bg-sky-950 dark:text-sky-100">
+		<span>
+		  {tagScope.tag.name}
+		  {tagScope.includeDescendants ? ' 配下の素材を表示中' : ' の素材を表示中'}
+		</span>
+		<PrefetchLink
+		    to={materialNewPath (tagScope.tag.name, location.pathname + location.search)}
+		    className="font-medium underline underline-offset-2
+			       text-sky-700 dark:text-sky-300">
+		  このタグに素材を追加
+		</PrefetchLink>
+		<PrefetchLink
+		    to={clearedTagSelectionPath (location.search, materialFilter)}
+		    className="font-medium underline underline-offset-2
+			       text-sky-700 dark:text-sky-300">
+		  タグ選択を解除
+		</PrefetchLink>
+	      </div>)}
+
 	  {tagState === 'untagged' && (
 	      <PrefetchLink
 		  to={`/materials?material_filter=${ materialFilter }`}
@@ -353,6 +522,21 @@ const MaterialListPage: FC = () => {
 		    </select>)}
 	      </FormField>
 
+	      <FormField label="グルーピング">
+		{({ invalid }) => (
+		    <select
+			value={groupByInput}
+			onChange={e => setGroupByInput (
+			    e.target.value as MaterialIndexGroupBy)}
+			disabled={tagId == null}
+			className={inputClass (invalid)}>
+		      <option value="none">{GROUP_BY_LABELS.none}</option>
+		      <option value="parent_tag" disabled={tagId == null}>
+			{GROUP_BY_LABELS.parent_tag}
+		      </option>
+		    </select>)}
+	      </FormField>
+
 	      <FormField label="作成日時">
 		{() => (
 		    <div className="flex flex-wrap items-center gap-2">
@@ -438,18 +622,9 @@ const MaterialListPage: FC = () => {
 	  {(!isLoading && !isError && materials.length === 0) && (
 	      <p>素材はありません．</p>)}
 	  {materials.length > 0 && (
-	      view === 'card'
+	      groupBy === 'parent_tag' && groups.length > 0
-	      ? (
+	      ? renderGroupedMaterials (groups)
-		  <div className="grid grid-cols-[repeat(auto-fill,minmax(196px,1fr))]
+	      : renderMaterialCollection (materials))}
-				  justify-items-center gap-4">
-		    {materials.map (material => (
-			<MaterialCard key={material.id} material={material}/>))}
-		  </div>)
-	      : (
-		  <div className="space-y-3">
-		    {materials.map (material => (
-			<MaterialListItem key={material.id} material={material}/>))}
-		  </div>))}
 	  <Pagination page={page} totalPages={totalPages}/>
 	</div>
       </MainArea>)

frontend/src/pages/materials/MaterialNewPage.tsx

@@ -27,6 +27,7 @@ const MaterialNewPage: FC = () => {
   const location = useLocation ()
   const query = new URLSearchParams (location.search)
   const tagQuery = query.get ('tag') ?? ''
+  const returnToQuery = query.get ('return_to') ?? ''
 
   const navigate = useNavigate ()
 
@@ -54,7 +55,7 @@ const MaterialNewPage: FC = () => {
       onSuccess: async () => {
 	await qc.invalidateQueries ({ queryKey: materialsKeys.root })
 	toast ({ title: '送信成功!' })
-	navigate (`/materials?tag=${ encodeURIComponent (tag) }`)
+	navigate (returnToQuery || `/materials?tag=${ encodeURIComponent (tag) }`)
       },
       onError: error => {
 	applyValidationError (error)

frontend/src/types.ts

@@ -88,12 +88,26 @@ export type MaterialIndexSort =
 
 export type MaterialIndexTagState = 'all' | 'tagged' | 'untagged'
 
+export type MaterialIndexGroupBy = 'none' | 'parent_tag'
+
 export type MaterialIndexView = 'card' | 'list'
 
+export type MaterialTagScope = {
+    tag:                {
+	id:          number
+	name:        string
+	category:    Category
+    }
+    includeDescendants: boolean
+}
+
 export type FetchMaterialsParams = {
     q:            string
     tagState:     MaterialIndexTagState
     mediaKind:    MaterialIndexMediaKind
+    tagId:        number | null
+    includeDescendants: boolean
+    groupBy:      MaterialIndexGroupBy
     createdFrom:  string
     createdTo:    string
     updatedFrom:  string
@@ -170,6 +184,23 @@ export type MaterialExportItem = {
     exportPath:  string
     enabled:     boolean }
 
+export type MaterialIndexGroup = {
+    key:         string
+    tag:         {
+	id:          number
+	name:        string
+	category:    Category
+    }
+    materialIds: number[]
+    count:       number }
+
+export type MaterialIndexResponse = {
+    materials: Material[]
+    count:     number
+    groups?:   MaterialIndexGroup[]
+    tagScope?: MaterialTagScope | null
+}
+
 export type MaterialVersion = {
     id:               number
     materialId:       number