#306

frontend/src/components/MaterialSidebar.tsx

@@ -1,23 +1,31 @@
-import { Fragment, useEffect, useState } from 'react'
+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 { apiGet } from '@/lib/api'
+import { materialsKeys } from '@/lib/queryKeys'
+import { fetchMaterialTagTree, parseMaterialFilter } from '@/lib/materials'
 
-import type { FC, ReactNode } from 'react'
+import type { Dispatch, FC, ReactNode, SetStateAction } from 'react'
 
-import type { Tag } from '@/types'
+import type { MaterialFilter, MaterialSidebarTag, Tag } from '@/types'
 
-type TagWithDepth = Tag & {
-    hasChildren:  boolean
-    children:     TagWithDepth[] }
+const FILTERS: MaterialFilter[] = ['present', 'missing', 'any']
+
+const FILTER_LABELS: Record<MaterialFilter, string> = {
+    present: '素材あり',
+    missing: '素材なし',
+    any:     'すべて',
+}
 
 
 const setChildrenById = (
-    tags:     TagWithDepth[],
+    tags:     MaterialSidebarTag[],
     targetId: number,
-    children: TagWithDepth[],
-): TagWithDepth[] => (
+    children: MaterialSidebarTag[],
+): MaterialSidebarTag[] => (
     tags.map (tag => {
       if (tag.id === targetId)
 	return { ...tag, children }
@@ -25,75 +33,305 @@ const setChildrenById = (
       if (tag.children.length === 0)
 	return tag
 
-      return { ...tag,
-	       children: (setChildrenById (tag.children, targetId, children)
-			  .filter (t => t.category !== 'meme' || t.hasChildren)) }
+      return { ...tag, children: setChildrenById (tag.children, targetId, children) }
     }))
 
 
-const MaterialSidebar: FC = () => {
-  const [tags, setTags] = useState<TagWithDepth[]> ([])
-  const [openTags, setOpenTags] = useState<Record<number, boolean>> ({ })
-  const [tagFetchedFlags, setTagFetchedFlags] = useState<Record<number, boolean>> ({ })
+const materialPath = (
+    tagName: string,
+    materialFilter: MaterialFilter,
+): string => `/materials?tag=${ encodeURIComponent (tagName) }&material_filter=${ materialFilter }`
 
-  useEffect (() => {
-    void (async () => {
-      setTags ((await apiGet<TagWithDepth[]> ('/tags/with-depth'))
-	       .filter (t => t.category !== 'meme' || t.hasChildren))
-    }) ()
-  }, [])
 
-  const renderTags = (ts: TagWithDepth[], nestLevel = 0): ReactNode => (
-      ts.map (t => (
-	  <Fragment key={t.id}>
-	    <li>
-	      <div className="flex">
-		<div className="flex-none w-4">
-		  {t.hasChildren && (
-		      <a
-			  href="#"
-			  onClick={async e => {
-			    e.preventDefault ()
-			    if (!(tagFetchedFlags[t.id]))
-			      {
-				try
-				{
-				  const data =
-				      await apiGet<TagWithDepth[]> (
-					  '/tags/with-depth', { params: { parent: String (t.id) } })
-				  setTags (prev => setChildrenById (prev, t.id, data))
-				  setTagFetchedFlags (prev => ({ ...prev, [t.id]: true }))
-				}
-				catch
-				{
-				  ;
-				}
-			      }
-			    setOpenTags (prev => ({ ...prev, [t.id]: !(prev[t.id]) }))
-			  }}>
-			{openTags[t.id] ? <>&minus;</> : '+'}
-		      </a>)}
-		</div>
-		<div className="flex-1 truncate">
-		  <TagLink
-		      tag={t}
-		      nestLevel={nestLevel}
-		      title={t.name}
-		      withCount={false}
-		      withWiki={false}
-		      to={`/materials?tag=${ encodeURIComponent (t.name) }`}/>
-		</div>
-	      </div>
-	    </li>
-	    {openTags[t.id] && renderTags (t.children, nestLevel + 1)}
-	  </Fragment>)))
+const sidebarTagToTag = (tag: MaterialSidebarTag): Tag => ({
+    id:             tag.id,
+    name:           tag.name,
+    category:       tag.category,
+    deprecatedAt:   tag.deprecated ? '' : null,
+    aliases:        [],
+    parents:        [],
+    postCount:      0,
+    createdAt:      '',
+    updatedAt:      '',
+    hasWiki:        false,
+    materialId:     null,
+    hasDeerjikists: false,
+    matchedAlias:   null })
 
-  return (
-      <SidebarComponent>
-	<ul>
-	  {renderTags (tags)}
-	</ul>
-      </SidebarComponent>)
+
+const updateMaterialFilterQuery = (
+    pathname: string,
+    locationSearch: string,
+    navigate: ReturnType<typeof useNavigate>,
+    materialFilter: MaterialFilter,
+) => {
+    const qs = new URLSearchParams (locationSearch)
+    qs.set ('material_filter', materialFilter)
+    navigate (`${ pathname }${ qs.toString () ? `?${ qs.toString () }` : '' }`)
 }
 
-export default MaterialSidebar
+
+const MaterialFilterButtons: FC<{
+    materialFilter: MaterialFilter
+    onChange:       (materialFilter: MaterialFilter) => void
+}> = ({ materialFilter, onChange }) => (
+    <div className="flex flex-wrap gap-2">
+      {FILTERS.map (value => (
+	  <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 ' +
+		    'dark:bg-sky-950 dark:text-sky-100'
+		  : 'border-neutral-300 bg-white text-neutral-700 dark:border-stone-700 ' +
+		    'dark:bg-stone-900 dark:text-stone-200' }`}>
+	    {FILTER_LABELS[value]}
+	  </button>))}
+    </div>)
+
+
+const MaterialTreeNode: FC<{
+    materialFilter: MaterialFilter
+    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 }) => {
+  const open = Boolean (openTags[tag.id])
+  const { data } = useQuery ({
+      queryKey: materialsKeys.tree ({ parentId: tag.id, materialFilter }),
+      queryFn:	() => fetchMaterialTagTree ({ parentId: tag.id, materialFilter }),
+      enabled:	open && tag.hasChildren && tag.children.length === 0,
+  })
+
+  useEffect (() => {
+    if (open && data && tag.children.length === 0)
+      onChildren (tag.id, data)
+  }, [data, onChildren, open, tag.children.length, tag.id])
+
+  return (
+      <Fragment>
+	<li>
+	  <div className="flex">
+	    <div className="flex-none w-4">
+	      {tag.hasChildren && (
+		  <button
+		      type="button"
+		      onClick={() => setOpenTags (prev => ({ ...prev, [tag.id]: !prev[tag.id] }))}
+		      className="text-neutral-500 dark:text-stone-400">
+		    {open ? <>&minus;</> : '+'}
+		  </button>)}
+	    </div>
+	    <div className="flex-1 truncate">
+	      <TagLink
+		  tag={sidebarTagToTag (tag)}
+		  nestLevel={nestLevel}
+		  title={tag.name}
+		  withCount={false}
+		  withWiki={false}
+		  to={materialPath (tag.name, materialFilter)}/>
+	    </div>
+	  </div>
+	</li>
+	{open && tag.children.length > 0 && (
+	    <ul>
+	      {tag.children.map (child => (
+		  <MaterialTreeNode
+		      key={child.id}
+		      tag={child}
+		      nestLevel={nestLevel + 1}
+		      materialFilter={materialFilter}
+		      openTags={openTags}
+		      setOpenTags={setOpenTags}
+		      onChildren={onChildren}/>))}
+	    </ul>)}
+      </Fragment>)
+}
+
+
+const MobileMaterialTreeNode: FC<{
+    depth?:          number
+    materialFilter: MaterialFilter
+    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 }) => {
+  const open = Boolean (openTags[tag.id])
+  const { data } = useQuery ({
+      queryKey: materialsKeys.tree ({ parentId: tag.id, materialFilter }),
+      queryFn:  () => fetchMaterialTagTree ({ parentId: tag.id, materialFilter }),
+      enabled:  open && tag.hasChildren && tag.children.length === 0,
+  })
+
+  useEffect (() => {
+    if (open && data && tag.children.length === 0)
+      onChildren (tag.id, data)
+  }, [data, onChildren, open, tag.children.length, tag.id])
+
+  return (
+      <div className="flex flex-row-reverse items-start gap-2">
+	<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
+			 text-stone-900 shadow-sm dark:border-stone-700 dark:bg-stone-900
+			 dark:text-stone-100"
+	      style={{ writingMode: 'vertical-rl' }}>
+	    <TagLink
+		tag={sidebarTagToTag (tag)}
+		title={tag.name}
+		withCount={false}
+		withWiki={false}
+		to={materialPath (tag.name, materialFilter)}/>
+	  </div>
+	  {tag.hasChildren && (
+	      <button
+		  type="button"
+		  onClick={() => setOpenTags (prev => ({ ...prev, [tag.id]: !prev[tag.id] }))}
+		  className="rounded-full border border-stone-300 bg-white px-2 py-0.5
+			     text-sm text-stone-700 dark:border-stone-700
+			     dark:bg-stone-900 dark:text-stone-100">
+		{open ? <>&minus;</> : '+'}
+	      </button>)}
+	</div>
+	{open && tag.children.length > 0 && (
+	    <div
+		className="relative flex flex-row-reverse items-start gap-2 rounded-2xl border
+			   border-stone-200 bg-stone-100/70 py-2 pl-2 pr-2 text-stone-900
+			   dark:border-stone-700 dark:bg-stone-900/70 dark:text-stone-100"
+		style={{ marginTop: `${ depth === 0 ? 1.25 : .75 }rem` }}>
+	      <span
+		  aria-hidden="true"
+		  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
+			tag={child}
+			depth={depth + 1}
+			materialFilter={materialFilter}
+			openTags={openTags}
+			setOpenTags={setOpenTags}
+			onChildren={onChildren}/>
+		  </div>))}
+	    </div>)}
+      </div>)
+}
+
+
+const MaterialSidebar: FC = () => {
+  const location = useLocation ()
+  const navigate = useNavigate ()
+  const qs = new URLSearchParams (location.search)
+  const materialFilter = parseMaterialFilter (qs.get ('material_filter'), 'present')
+
+  const [desktopTags, setDesktopTags] = useState<MaterialSidebarTag[]> ([])
+  const [openTags, setOpenTags] = useState<Record<number, boolean>> ({ })
+  const mobileRailRef = useRef<HTMLDivElement | null> (null)
+
+  const { data: rootTags = [], isLoading, isError } = useQuery ({
+      queryKey: materialsKeys.tree ({ parentId: null, materialFilter }),
+      queryFn:  () => fetchMaterialTagTree ({ parentId: null, materialFilter }),
+  })
+
+  useEffect (() => {
+    setDesktopTags (rootTags)
+  }, [rootTags])
+
+  useEffect (() => {
+    const el = mobileRailRef.current
+    if (!(el))
+      return
+
+    requestAnimationFrame (() => {
+      el.scrollLeft = el.scrollWidth
+    })
+  }, [rootTags, materialFilter])
+
+  const visibleRootTags = desktopTags.length > 0 ? desktopTags : rootTags
+
+  const setChildren = (tagId: number, children: MaterialSidebarTag[]) => {
+    setDesktopTags (prev => {
+      const base = prev.length > 0 ? prev : rootTags
+      return setChildrenById (base, tagId, children)
+    })
+  }
+
+  const handleFilterChange = (value: MaterialFilter) => {
+    setDesktopTags ([])
+    setOpenTags ({ })
+    updateMaterialFilterQuery (location.pathname, location.search, navigate, value)
+  }
+
+  const renderDesktopTree = (tags: MaterialSidebarTag[]): ReactNode => (
+      tags.map (tag => (
+	  <MaterialTreeNode
+	      key={tag.id}
+	      tag={tag}
+	      materialFilter={materialFilter}
+	      openTags={openTags}
+	      setOpenTags={setOpenTags}
+	      onChildren={setChildren}/>)))
+
+  return (
+      <>
+	<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 flex items-center justify-between gap-3">
+	    <span className="text-sm font-medium text-stone-700 dark:text-stone-200">タグ一覧</span>
+	    <PrefetchLink
+		to={`/materials?unclassified=1&material_filter=${ materialFilter }`}
+		className="text-sm text-sky-700 underline underline-offset-2 dark:text-sky-300">
+	      未分類素材
+	    </PrefetchLink>
+	  </div>
+	  <MaterialFilterButtons
+	      materialFilter={materialFilter}
+	      onChange={handleFilterChange}/>
+	  <div ref={mobileRailRef} className="mt-3 overflow-x-auto">
+	    <div className="flex min-w-max flex-row-reverse gap-3 pb-1">
+	      {visibleRootTags.map (tag => (
+		  <MobileMaterialTreeNode
+		      key={tag.id}
+		      tag={tag}
+		      materialFilter={materialFilter}
+		      openTags={openTags}
+		      setOpenTags={setOpenTags}
+		      onChildren={setChildren}/>))}
+	    </div>
+	  </div>
+	</div>
+
+	<div className="hidden md:block">
+	  <SidebarComponent>
+	    <div className="space-y-4">
+	      <MaterialFilterButtons
+		  materialFilter={materialFilter}
+		  onChange={handleFilterChange}/>
+	      <div>
+		<PrefetchLink
+		    to={`/materials?unclassified=1&material_filter=${ materialFilter }`}
+		    className="text-sm text-sky-700 underline underline-offset-2 dark:text-sky-300">
+		  未分類素材
+		</PrefetchLink>
+	      </div>
+	      {isLoading && (
+		  <p className="text-sm text-neutral-500 dark:text-stone-400">読込中……</p>)}
+	      {isError && (
+		  <p className="text-sm text-red-600 dark:text-red-300">
+		    タグ一覧の取得に失敗しました．
+		  </p>)}
+	      {(!isLoading && !isError) && (
+		  <ul>
+		    {renderDesktopTree (visibleRootTags)}
+		  </ul>)}
+	    </div>
+	  </SidebarComponent>
+	</div>
+      </>)
+}
+
+
+export default MaterialSidebar

frontend/src/lib/materials.ts

@@ -0,0 +1,114 @@
+import {
+    apiGet,
+    isApiError,
+    apiPatch,
+    apiPost,
+    apiPut,
+} from '@/lib/api'
+
+import type {
+    Material,
+    MaterialFilter,
+    MaterialSidebarTag,
+    MaterialTagTree,
+} from '@/types'
+
+export type FetchMaterialsParams = {
+    page?:         number
+    limit?:        number
+    tagId?:        number | null
+    parentId?:     number | null
+    unclassified?: boolean
+}
+
+export type FetchMaterialTreeParams = {
+    parentId?:       number | null
+    materialFilter:  MaterialFilter
+}
+
+export type MaterialIndexResponse = {
+    materials: Material[]
+    count:     number
+}
+
+const MATERIAL_FILTERS: MaterialFilter[] = ['present', 'missing', 'any']
+
+
+export const parseMaterialFilter = (
+    value: unknown,
+    fallback: MaterialFilter = 'present',
+): MaterialFilter =>
+    typeof value === 'string' && MATERIAL_FILTERS.includes (value as MaterialFilter)
+    ? value as MaterialFilter
+    : fallback
+
+
+export const fetchMaterials = async (
+    { page, limit, tagId, parentId, unclassified }: FetchMaterialsParams,
+): Promise<MaterialIndexResponse> =>
+    await apiGet ('/materials', { params: {
+        ...(page != null && { page }),
+        ...(limit != null && { limit }),
+        ...(tagId != null && { tag_id: tagId }),
+        ...(parentId != null && { parent_id: parentId }),
+        ...(unclassified && { unclassified: '1' }),
+    } })
+
+
+export const fetchMaterial = async (id: string): Promise<Material | null> => {
+  try
+  {
+    return await apiGet (`/materials/${ id }`)
+  }
+  catch (error)
+  {
+    if (isApiError (error) && error.response?.status === 404)
+      return null
+    throw error
+  }
+}
+
+
+export const fetchMaterialTagTree = async (
+    { parentId, materialFilter }: FetchMaterialTreeParams,
+): Promise<MaterialSidebarTag[]> =>
+    await apiGet ('/tags/with-depth', { params: {
+        ...(parentId != null && { parent: String (parentId) }),
+        material_filter: materialFilter,
+    } })
+
+
+export const fetchMaterialTagByName = async (
+    name: string,
+    materialFilter: MaterialFilter,
+): Promise<MaterialTagTree | null> => {
+  try
+  {
+    return await apiGet (`/tags/name/${ encodeURIComponent (name) }/materials`,
+                         { params: { material_filter: materialFilter } })
+  }
+  catch (error)
+  {
+    if (isApiError (error) && error.response?.status === 404)
+      return null
+    throw error
+  }
+}
+
+
+export const createMaterial = async (formData: FormData): Promise<Material> =>
+    await apiPost ('/materials', formData)
+
+
+export const updateMaterial = async (
+    id: string,
+    formData: FormData,
+): Promise<Material> =>
+    await apiPut (`/materials/${ id }`, formData)
+
+
+export const suppressMaterialFile = async (
+    id: string,
+    payload: { reason: string; purge?: boolean },
+): Promise<Material> =>
+    await apiPatch (`/materials/${ id }/suppress_file`, payload)

frontend/src/lib/queryKeys.ts

@@ -1,4 +1,9 @@
-import type { FetchNicoTagsParams, FetchPostsParams, FetchTagsParams } from '@/types'
+import type {
+    FetchNicoTagsParams,
+    FetchPostsParams,
+    FetchTagsParams,
+    MaterialFilter,
+} from '@/types'
 
 export const postsKeys = {
     root:     ['posts'] as const,
@@ -25,6 +30,26 @@ export const tagsKeys = {
 		      ['tags', 'changes', p] as const,
     deerjikists:  (id: string) => ['tags', 'deerjikists', id] as const }
 
+export const materialsKeys = {
+    root:         ['materials'] as const,
+    index:        (p: {
+        page?:         number
+        limit?:        number
+        tagId?:        number | null
+        parentId?:     number | null
+        unclassified?: boolean
+    }) => ['materials', 'index', p] as const,
+    byTagName:     (name: string, materialFilter: MaterialFilter) =>
+		      ['materials', 'tag', name, materialFilter] as const,
+    show:         (id: string) => ['materials', id] as const,
+    tree:         (p: {
+        parentId?:       number | null
+        materialFilter:  MaterialFilter
+    }) => ['materials', 'tree', p] as const,
+    unclassified: (p: { page?: number; limit?: number } = { }) =>
+		      ['materials', 'unclassified', p] as const,
+}
+
 export const wikiKeys = {
     root:   ['wiki'] as const,
     index:  (p: { title?: string }) => ['wiki', 'index', p] as const,

frontend/src/pages/materials/MaterialDetailPage.tsx

@@ -1,3 +1,4 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
@@ -13,248 +14,254 @@ import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
-import { apiGet, apiPatch, apiPut } from '@/lib/api'
+import {
+    suppressMaterialFile,
+    fetchMaterial,
+    updateMaterial,
+} from '@/lib/materials'
+import { materialsKeys } from '@/lib/queryKeys'
 import { inputClass } from '@/lib/utils'
 import { useValidationErrors } from '@/lib/useValidationErrors'
 
 import type { FC } from 'react'
 
-import type { Material, Tag, User } from '@/types'
-
-type MaterialWithTag = Material & { tag: Tag }
+import type { User } from '@/types'
 
 type MaterialFormField = 'tag' | 'file' | 'url' | 'exportPaths'
 
 
 const MaterialDetailPage: FC<{ user: User | null }> = ({ user }) => {
   const { id } = useParams ()
+  const qc = useQueryClient ()
 
   const [exportPath, setExportPath] = useState ('')
   const [file, setFile] = useState<File | null> (null)
   const [filePreview, setFilePreview] = useState ('')
-  const [loading, setLoading] = useState (false)
-  const [material, setMaterial] = useState<MaterialWithTag | null> (null)
-  const [sending, setSending] = useState (false)
   const [tag, setTag] = useState ('')
   const [url, setURL] = useState ('')
   const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
       useValidationErrors<MaterialFormField> ()
 
-  const handleSubmit = async () => {
-    clearValidationErrors ()
+  const { data: material, isError, isLoading } = useQuery ({
+      queryKey: materialsKeys.show (id ?? ''),
+      queryFn:  () => fetchMaterial (id ?? ''),
+      enabled:  id != null,
+  })
 
-    const formData = new FormData
-    if (tag.trim ())
-      formData.append ('tag', tag)
-    if (file)
-      formData.append ('file', file)
-    if (url.trim ())
-      formData.append ('url', url)
-    formData.append ('export_paths[legacy_drive]', exportPath)
+  useEffect (() => {
+    if (!(material))
+      return
 
-    try
-    {
-      setSending (true)
-      const data = await apiPut<Material> (`/materials/${ id }`, formData)
-      setMaterial (data)
-      toast ({ title: '更新成功!' })
-    }
-    catch (e)
-    {
-      applyValidationError (e)
-      toast ({ title: '更新失敗……', description: '入力を見直してください．' })
-    }
-    finally
-    {
-      setSending (false)
-    }
+    setTag (material.tag.name)
+    setURL (material.url ?? '')
+    setExportPath (material.exportPaths.legacyDrive ?? '')
+    if (material.file && material.contentType)
+      {
+        setFilePreview (material.file)
+        setFile (null)
+      }
+  }, [material])
+
+  const invalidateMaterialQueries = async () => {
+    await qc.invalidateQueries ({ queryKey: materialsKeys.root })
   }
 
-  const handleSuppress = async () => {
+  const updateMutation = useMutation ({
+      mutationFn: async () => {
+        const formData = new FormData
+        if (tag.trim ())
+          formData.append ('tag', tag)
+        if (file)
+          formData.append ('file', file)
+        if (url.trim ())
+          formData.append ('url', url)
+        formData.append ('export_paths[legacy_drive]', exportPath)
+
+        return await updateMaterial (id ?? '', formData)
+      },
+      onSuccess: async data => {
+        qc.setQueryData (materialsKeys.show (id ?? ''), data)
+        await invalidateMaterialQueries ()
+        toast ({ title: '更新成功!' })
+      },
+      onError: error => {
+        applyValidationError (error)
+        toast ({ title: '更新失敗……', description: '入力を見直してください．' })
+      },
+  })
+
+  const suppressMutation = useMutation ({
+      mutationFn: async (reason: string) =>
+          await suppressMaterialFile (id ?? '', { reason }),
+      onSuccess: async data => {
+        qc.setQueryData (materialsKeys.show (id ?? ''), data)
+        setFile (null)
+        setFilePreview ('')
+        await invalidateMaterialQueries ()
+        toast ({ title: '抑止しました' })
+      },
+      onError: () => {
+        toast ({ title: '抑止に失敗しました' })
+      },
+  })
+
+  const handleSubmit = () => {
+    clearValidationErrors ()
+    updateMutation.mutate ()
+  }
+
+  const handleSuppress = () => {
     const reason = window.prompt ('抑止理由を入力してください。')
     if (reason == null || reason.trim () === '')
       return
     if (!window.confirm ('素材ファイルを抑止します。表示と ZIP export から除外されます。'))
       return
 
-    try
-    {
-      const data = await apiPatch<Material> (
-	  `/materials/${ id }/suppress_file`,
-	  { reason },
-      )
-      setMaterial (data)
-      setFile (null)
-      setFilePreview ('')
-      toast ({ title: '抑止しました' })
-    }
-    catch
-    {
-      toast ({ title: '抑止に失敗しました' })
-    }
+    suppressMutation.mutate (reason)
   }
 
-  useEffect (() => {
-    if (!(id))
-      return
-
-    void (async () => {
-      try
-      {
-	setLoading (true)
-	const data = await apiGet<MaterialWithTag> (`/materials/${ id }`)
-	setMaterial (data)
-	setTag (data.tag.name)
-	if (data.file && data.contentType)
-	  {
-	    setFilePreview (data.file)
-	    setFile (null)
-	  }
-	setURL (data.url ?? '')
-	setExportPath (data.exportPaths.legacyDrive ?? '')
-      }
-      finally
-      {
-	setLoading (false)
-      }
-    }) ()
-  }, [id])
-
   return (
       <MainArea>
-	{material && (
-	    <Helmet>
-	      <title>{`${ material.tag.name } 素材照会 | ${ SITE_TITLE }`}</title>
-	    </Helmet>)}
+        {material && (
+            <Helmet>
+              <title>{`${ material.tag.name } 素材照会 | ${ SITE_TITLE }`}</title>
+            </Helmet>)}
 
-	{loading ? 'Loading...' : (material && (
-	    <>
-	      <PageTitle>
-		<TagLink
-		    tag={material.tag}
-		    withWiki={false}
-		    withCount={false}/>
-	      </PageTitle>
+        {isLoading ? 'Loading...' : isError ? (
+            <p className="text-red-600 dark:text-red-300">
+              素材の取得に失敗しました．
+            </p>
+        ) : material == null ? (
+            <p className="text-stone-700 dark:text-stone-300">
+              素材が見つかりませんでした．
+            </p>
+        ) : (
+            <>
+              <PageTitle>
+                <TagLink
+                    tag={material.tag}
+                    withWiki={false}
+                    withCount={false}/>
+              </PageTitle>
 
-	      {material.fileSuppressedAt && (
-		  <div className="mb-4 rounded border border-red-300 bg-red-50 p-3 text-red-700">
-		    <span>素材ファイルは抑止済みです。</span>
-		    {material.fileSuppressionReason && (
-			<span> 理由: {material.fileSuppressionReason}</span>)}
-		  </div>)}
+              {material.fileSuppressedAt && (
+                  <div className="mb-4 rounded border border-red-300 bg-red-50 p-3
+                                  text-red-900 dark:border-red-800 dark:bg-red-950
+                                  dark:text-red-100">
+                    <span>素材ファイルは抑止済みです。</span>
+                    {material.fileSuppressionReason && (
+                        <span> 理由: {material.fileSuppressionReason}</span>)}
+                  </div>)}
 
-	      {(!material.fileSuppressedAt && material.file && material.contentType) && (
-		  (/image\/.*/.test (material.contentType) && (
-		      <img src={material.file} alt={material.tag.name || undefined}/>))
-		  || (/video\/.*/.test (material.contentType) && (
-		      <video src={material.file} controls/>))
-		  || (/audio\/.*/.test (material.contentType) && (
-		      <audio src={material.file} controls/>)))}
+              {(!material.fileSuppressedAt && material.file && material.contentType) && (
+                  (/image\/.*/.test (material.contentType) && (
+                      <img src={material.file} alt={material.tag.name || undefined}/>))
+                  || (/video\/.*/.test (material.contentType) && (
+                      <video src={material.file} controls/>))
+                  || (/audio\/.*/.test (material.contentType) && (
+                      <audio src={material.file} controls/>)))}
 
-	      <TabGroup>
-		<Tab name="Wiki">
-		  <WikiBody
-		      title={material.tag.name}
-		      body={material.wikiPageBody ?? undefined}/>
-		</Tab>
+              <TabGroup>
+                <Tab name="Wiki">
+                  <WikiBody
+                      title={material.tag.name}
+                      body={material.wikiPageBody ?? undefined}/>
+                </Tab>
 
-		<Tab name="編輯">
-		  <div className="max-w-wl pt-2 space-y-4">
-		    <FieldError messages={baseErrors}/>
+                <Tab name="編輯">
+                  <div className="max-w-wl space-y-4 pt-2">
+                    <FieldError messages={baseErrors}/>
 
-		    {/* タグ */}
-		    <FormField label="タグ" messages={fieldErrors.tag}>
-		      {({ describedBy, invalid }) => (
-			  <TagInput
-			      describedBy={describedBy}
-			      invalid={invalid}
-			      value={tag}
-			      setValue={setTag}/>)}
-		    </FormField>
+                    <FormField label="タグ" messages={fieldErrors.tag}>
+                      {({ describedBy, invalid }) => (
+                          <TagInput
+                              describedBy={describedBy}
+                              invalid={invalid}
+                              value={tag}
+                              setValue={setTag}/>)}
+                    </FormField>
 
-		    {/* ファイル */}
-		    <FormField label="ファイル" messages={fieldErrors.file}>
-		      {({ describedBy, invalid }) => (
-			  <>
-			    <input
-				type="file"
-				accept="image/*,video/*,audio/*"
-				aria-describedby={describedBy}
-				aria-invalid={invalid}
-				onChange={e => {
-				  const f = e.target.files?.[0]
-				  setFile (f ?? null)
-				  setFilePreview (f ? URL.createObjectURL (f) : '')
-				}}/>
-			    {(file && filePreview) && (
-				(/image\/.*/.test (file.type) && (
-				    <img
-					src={filePreview}
-					alt="preview"
-					className="mt-2 max-h-48 rounded border"/>))
-				|| (/video\/.*/.test (file.type) && (
-				    <video
-					src={filePreview}
-					controls
-					className="mt-2 max-h-48 rounded border"/>))
-				|| (/audio\/.*/.test (file.type) && (
-				    <audio
-					src={filePreview}
-					controls
-					className="mt-2 max-h-48"/>))
-				|| (
-				    <p className="text-red-600 dark:text-red-400">
-				      その形式のファイルには対応していません．
-				    </p>))}
-			  </>)}
-		    </FormField>
+                    <FormField label="ファイル" messages={fieldErrors.file}>
+                      {({ describedBy, invalid }) => (
+                          <>
+                            <input
+                                type="file"
+                                accept="image/*,video/*,audio/*"
+                                aria-describedby={describedBy}
+                                aria-invalid={invalid}
+                                onChange={e => {
+                                  const nextFile = e.target.files?.[0]
+                                  setFile (nextFile ?? null)
+                                  setFilePreview (
+                                      nextFile ? URL.createObjectURL (nextFile) : '')
+                                }}/>
+                            {(file && filePreview) && (
+                                (/image\/.*/.test (file.type) && (
+                                    <img
+                                        src={filePreview}
+                                        alt="preview"
+                                        className="mt-2 max-h-48 rounded border"/>))
+                                || (/video\/.*/.test (file.type) && (
+                                    <video
+                                        src={filePreview}
+                                        controls
+                                        className="mt-2 max-h-48 rounded border"/>))
+                                || (/audio\/.*/.test (file.type) && (
+                                    <audio
+                                        src={filePreview}
+                                        controls
+                                        className="mt-2 max-h-48"/>))
+                                || (
+                                    <p className="text-red-600 dark:text-red-400">
+                                      その形式のファイルには対応していません．
+                                    </p>))}
+                          </>)}
+                    </FormField>
 
-		    {/* 参考 URL */}
-		    <FormField label="参考 URL" messages={fieldErrors.url}>
-		      {({ describedBy, invalid }) => (
-			  <input
-			      type="url"
-			      value={url}
-			      onChange={e => setURL (e.target.value)}
-			      aria-describedby={describedBy}
-			      aria-invalid={invalid}
-			      className={inputClass (invalid)}/>)}
-		    </FormField>
+                    <FormField label="参考 URL" messages={fieldErrors.url}>
+                      {({ describedBy, invalid }) => (
+                          <input
+                              type="url"
+                              value={url}
+                              onChange={e => setURL (e.target.value)}
+                              aria-describedby={describedBy}
+                              aria-invalid={invalid}
+                              className={inputClass (invalid)}/>)}
+                    </FormField>
 
-		    <FormField
-			label="ZIP 出力パス"
-			messages={fieldErrors.exportPaths}>
-		      {({ describedBy, invalid }) => (
-			  <input
-			      type="text"
-			      value={exportPath}
-			      onChange={e => setExportPath (e.target.value)}
-			      placeholder="伊地知ニジカ/表情/泣き.png"
-			      aria-describedby={describedBy}
-			      aria-invalid={invalid}
-			      className={inputClass (invalid)}/>)}
-		    </FormField>
+                    <FormField label="ZIP 出力パス" messages={fieldErrors.exportPaths}>
+                      {({ describedBy, invalid }) => (
+                          <input
+                              type="text"
+                              value={exportPath}
+                              onChange={e => setExportPath (e.target.value)}
+                              placeholder="伊地知ニジカ/表情/泣き.png"
+                              aria-describedby={describedBy}
+                              aria-invalid={invalid}
+                              className={inputClass (invalid)}/>)}
+                    </FormField>
 
-		    {/* 送信 */}
-		    <div className="flex flex-wrap gap-2">
-		      <Button
-			  onClick={handleSubmit}
-			  className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
-			  disabled={sending}>
-			更新
-		      </Button>
-		      {user?.role === 'admin' && !material.fileSuppressedAt && (
-			  <Button
-			      type="button"
-			      variant="destructive"
-			      onClick={handleSuppress}>
-			    ファイルを抑止
-			  </Button>)}
-		    </div>
-		  </div>
-		</Tab>
-	      </TabGroup>
-	    </>))}
+                    <div className="flex flex-wrap gap-2">
+                      <Button
+                          onClick={handleSubmit}
+                          className="rounded bg-blue-600 px-4 py-2 text-white
+                                     disabled:bg-gray-400"
+                          disabled={updateMutation.isPending}>
+                        更新
+                      </Button>
+                      {user?.role === 'admin' && !material.fileSuppressedAt && (
+                          <Button
+                              type="button"
+                              variant="destructive"
+                              onClick={handleSuppress}
+                              disabled={suppressMutation.isPending}>
+                            ファイルを抑止
+                          </Button>)}
+                    </div>
+                  </div>
+                </Tab>
+              </TabGroup>
+            </>)}
       </MainArea>)
 }
 

frontend/src/pages/materials/MaterialListPage.tsx

@@ -1,176 +1,328 @@
-import { Fragment, useEffect, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Fragment, useEffect, useMemo, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import nikumaru from '@/assets/fonts/nikumaru.otf'
 import PrefetchLink from '@/components/PrefetchLink'
 import TagLink from '@/components/TagLink'
+import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import SectionTitle from '@/components/common/SectionTitle'
 import SubsectionTitle from '@/components/common/SubsectionTitle'
+import TagInput from '@/components/common/TagInput'
 import MainArea from '@/components/layout/MainArea'
 import { API_BASE_URL, SITE_TITLE } from '@/config'
-import { apiGet } from '@/lib/api'
+import {
+    fetchMaterials,
+    fetchMaterialTagByName,
+    parseMaterialFilter,
+} from '@/lib/materials'
+import { materialsKeys } from '@/lib/queryKeys'
+import { inputClass } from '@/lib/utils'
 
 import type { FC } from 'react'
 
-import type { Material, Tag } from '@/types'
+import type { Material, MaterialFilter, MaterialTagTree } from '@/types'
 
-type TagWithMaterial = Omit<Tag, 'children'> & {
-    children: TagWithMaterial[]
-    material: Material | null }
+const MATERIAL_FILTER_LABELS: Record<MaterialFilter, string> = {
+    present: '素材あり',
+    missing: '素材なし',
+    any:     'すべて',
+}
 
 
-const MaterialCard = ({ tag }: { tag: TagWithMaterial }) => {
+const MaterialCard = ({ tag }: { tag: MaterialTagTree }) => {
   if (!(tag.material))
-    return
+    return null
 
   return (
       <PrefetchLink
-	  to={`/materials/${ tag.material.id }`}
-	  className="block w-40 h-40">
-	<div
-	    className={`w-full h-full overflow-hidden rounded-xl shadow
-			text-center content-center text-4xl ${
-			tag.material.fileSuppressedAt
-			? 'border-2 border-red-300 bg-red-50 text-base text-red-700'
-			: '' }`}
-	    style={{ fontFamily: 'Nikumaru' }}>
-	  {tag.material.fileSuppressedAt
-	   ? <span>抑止済み</span>
-	   : (tag.material.contentType && /image\/.*/.test (tag.material.contentType))
-	   ? <img src={tag.material.file || undefined}/>
-	   : <span>照会</span>}
-	</div>
+          to={`/materials/${ tag.material.id }`}
+          className="block h-40 w-40">
+        <div
+            className={`h-full w-full overflow-hidden rounded-xl shadow text-center
+                        content-center text-4xl ${
+                        tag.material.fileSuppressedAt
+                        ? 'border-2 border-red-300 bg-red-50 text-base text-red-900 ' +
+                          'dark:border-red-800 dark:bg-red-950 dark:text-red-100'
+                        : 'bg-white text-stone-900 dark:bg-stone-900 dark:text-stone-100' }`}
+            style={{ fontFamily: 'Nikumaru' }}>
+          {tag.material.fileSuppressedAt
+           ? <span>抑止済み</span>
+           : (tag.material.contentType && /image\/.*/.test (tag.material.contentType))
+           ? <img src={tag.material.file || undefined}/>
+           : <span>照会</span>}
+        </div>
       </PrefetchLink>)
 }
 
 
-const MaterialListPage: FC = () => {
-  const [loading, setLoading] = useState (false)
-  const [tag, setTag] = useState<TagWithMaterial | null> (null)
+const MaterialList = ({ materials }: { materials: Material[] }) => (
+    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+      {materials.map (material => (
+          <article
+              key={material.id}
+              className={`rounded-2xl border p-4 shadow-sm ${
+                  material.fileSuppressedAt
+                  ? 'border-red-200 bg-red-50 text-red-900 dark:border-red-900 ' +
+                    'dark:bg-red-950 dark:text-red-100'
+                  : 'border-stone-200 bg-white text-stone-900 dark:border-stone-700 ' +
+                    'dark:bg-stone-900 dark:text-stone-100'}`}>
+            <div className="flex items-start justify-between gap-3">
+              <div>
+                <h2 className="font-medium text-stone-900 dark:text-stone-100">
+                  {material.tag?.name ?? '未分類素材'}
+                </h2>
+                {material.fileSuppressedAt && (
+                    <p className="mt-1 text-sm text-red-700 dark:text-red-200">抑止済み</p>)}
+              </div>
+              <PrefetchLink
+                  to={`/materials/${ material.id }`}
+                  className="text-sm text-sky-700 underline underline-offset-2 dark:text-sky-300">
+                照会
+              </PrefetchLink>
+            </div>
+            {material.exportPaths.legacyDrive && (
+                <p className="mt-3 break-all text-sm text-stone-600 dark:text-stone-300">
+                  {material.exportPaths.legacyDrive}
+                </p>)}
+          </article>))}
+    </div>)
 
+
+const MaterialTagTreeView = ({ tag }: { tag: MaterialTagTree }) => (
+    <>
+      <PageTitle>
+        <TagLink
+            tag={tag}
+            withWiki={false}
+            withCount={false}
+            to={tag.material
+                ? `/materials/${ tag.material.id }`
+                : `/materials?tag=${ encodeURIComponent (tag.name) }`}/>
+      </PageTitle>
+      {(!tag.material && tag.hasMaterial !== true && tag.category !== 'meme') && (
+          <div className="-mt-2">
+            <PrefetchLink to={`/materials/new?tag=${ encodeURIComponent (tag.name) }`}>
+              追加
+            </PrefetchLink>
+          </div>)}
+
+      <MaterialCard tag={tag}/>
+
+      <div className="ml-2 overflow-x-auto pb-2">
+        {tag.children.map (c2 => (
+            <Fragment key={c2.id}>
+              <SectionTitle>
+                <TagLink
+                    tag={c2}
+                    withWiki={false}
+                    withCount={false}
+                    to={`/materials?tag=${ encodeURIComponent (c2.name) }`}/>
+              </SectionTitle>
+              {(!c2.material && c2.hasMaterial !== true && c2.category !== 'meme') && (
+                  <div className="-mt-4">
+                    <PrefetchLink to={`/materials/new?tag=${ encodeURIComponent (c2.name) }`}>
+                      追加
+                    </PrefetchLink>
+                  </div>)}
+
+              <MaterialCard tag={c2}/>
+
+              <div className="ml-2">
+                {c2.children.map (c3 => (
+                    <Fragment key={c3.id}>
+                      <SubsectionTitle>
+                        <TagLink
+                            tag={c3}
+                            withWiki={false}
+                            withCount={false}
+                            to={`/materials?tag=${ encodeURIComponent (c3.name) }`}/>
+                      </SubsectionTitle>
+                      {(!c3.material && c3.hasMaterial !== true && c3.category !== 'meme') && (
+                          <div className="-mt-2">
+                            <PrefetchLink
+                                to={`/materials/new?tag=${ encodeURIComponent (c3.name) }`}>
+                              追加
+                            </PrefetchLink>
+                          </div>)}
+
+                      <MaterialCard tag={c3}/>
+                    </Fragment>))}
+              </div>
+            </Fragment>))}
+      </div>
+    </>)
+
+
+const MaterialSearchTop: FC<{
+    materialFilter: MaterialFilter
+    setMaterialFilter: (value: MaterialFilter) => void
+    tagName: string
+    setTagName: (value: string) => void
+}> = ({ materialFilter, setMaterialFilter, tagName, setTagName }) => {
+  const navigate = useNavigate ()
   const location = useLocation ()
-  const query = new URLSearchParams (location.search)
+
+  const handleSearch = () => {
+    const qs = new URLSearchParams (location.search)
+    if (tagName.trim ())
+      qs.set ('tag', tagName.trim ())
+    else
+      qs.delete ('tag')
+    qs.delete ('unclassified')
+    qs.set ('material_filter', materialFilter)
+    navigate (`/materials?${ qs.toString () }`)
+  }
+
+  return (
+      <div className="mx-auto max-w-3xl space-y-6">
+        <PageTitle>素材集</PageTitle>
+
+        <section className="rounded-3xl border border-stone-200 bg-white p-5 shadow-sm
+                            text-stone-900 dark:border-stone-700 dark:bg-stone-900
+                            dark:text-stone-100">
+          <div className="space-y-4">
+            <FormField label="タグ名検索">
+              {() => (
+                  <TagInput
+                      value={tagName}
+                      setValue={setTagName}/>)}
+            </FormField>
+
+            <FormField label="素材状態">
+              {({ invalid }) => (
+                  <select
+                      value={materialFilter}
+                      onChange={e => setMaterialFilter (e.target.value as MaterialFilter)}
+                      className={inputClass (invalid)}>
+                    {Object.entries (MATERIAL_FILTER_LABELS).map (([value, label]) => (
+                        <option key={value} value={value}>
+                          {label}
+                        </option>))}
+                  </select>)}
+            </FormField>
+
+            <div className="flex flex-wrap gap-3">
+              <button
+                  type="button"
+                  onClick={handleSearch}
+                  className="rounded-full bg-sky-600 px-4 py-2 text-white hover:bg-sky-700
+                             dark:bg-sky-500 dark:text-stone-950 dark:hover:bg-sky-400">
+                この条件で探す
+              </button>
+              <PrefetchLink
+                  to={`/materials?unclassified=1&material_filter=${ materialFilter }`}
+                  className="rounded-full border border-stone-300 bg-white px-4 py-2
+                             text-stone-900 hover:bg-stone-100 dark:border-stone-700
+                             dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
+                未分類素材を見る
+              </PrefetchLink>
+              <PrefetchLink
+                  to="/materials/new"
+                  className="rounded-full border border-stone-300 bg-white px-4 py-2
+                             text-stone-900 hover:bg-stone-100 dark:border-stone-700
+                             dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
+                新規素材を追加
+              </PrefetchLink>
+              <a
+                  href={`${ API_BASE_URL }/materials/download.zip?profile=legacy_drive`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="rounded-full border border-stone-300 bg-white px-4 py-2
+                             text-stone-900 hover:bg-stone-100 dark:border-stone-700
+                             dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
+                ZIP をダウンロード
+              </a>
+            </div>
+          </div>
+        </section>
+      </div>)
+}
+
+
+const MaterialListPage: FC = () => {
+  const location = useLocation ()
+  const query = useMemo (() => new URLSearchParams (location.search), [location.search])
   const tagQuery = query.get ('tag') ?? ''
+  const unclassified = query.get ('unclassified') === '1'
+  const initialFilter = parseMaterialFilter (query.get ('material_filter'), 'present')
+
+  const [tagName, setTagName] = useState (tagQuery)
+  const [materialFilter, setMaterialFilter] = useState<MaterialFilter> (initialFilter)
+
+  const {
+      data: tag,
+      isLoading: tagLoading,
+      isError: tagError,
+  } = useQuery ({
+      queryKey: materialsKeys.byTagName (tagQuery, initialFilter),
+      queryFn:  () => fetchMaterialTagByName (tagQuery, initialFilter),
+      enabled:  tagQuery !== '' && !unclassified,
+  })
+
+  const {
+      data: unclassifiedData,
+      isLoading: unclassifiedLoading,
+      isError: unclassifiedError,
+  } = useQuery ({
+      queryKey: materialsKeys.unclassified ({ page: 1, limit: 50 }),
+      queryFn:  () => fetchMaterials ({ page: 1, limit: 50, unclassified: true }),
+      enabled:  unclassified,
+  })
 
   useEffect (() => {
-    if (!(tagQuery))
-      {
-	setTag (null)
-	return
-      }
-
-    void (async () => {
-      try
-      {
-	setLoading (true)
-	setTag (
-	    await apiGet<TagWithMaterial> (
-		`/tags/name/${ encodeURIComponent (tagQuery) }/materials`))
-      }
-      finally
-      {
-	setLoading (false)
-      }
-    }) ()
-  }, [location.search, tagQuery])
+    setTagName (tagQuery)
+    setMaterialFilter (initialFilter)
+  }, [initialFilter, tagQuery])
 
   return (
       <MainArea>
-	<Helmet>
-	  <style>
-	    {`
-		@font-face
-		{
-		  font-family: 'Nikumaru';
-		  src: url(${ nikumaru }) format('opentype');
-		}`}
-	  </style>
-	  <title>{`${ tag ? `${ tag.name } 素材集` : '素材集' } | ${ SITE_TITLE }`}</title>
-	</Helmet>
+        <Helmet>
+          <style>
+            {`
+                @font-face
+                {
+                  font-family: 'Nikumaru';
+                  src: url(${ nikumaru }) format('opentype');
+                }`}
+          </style>
+          <title>{`${ tag ? `${ tag.name } 素材集` : '素材集' } | ${ SITE_TITLE }`}</title>
+        </Helmet>
 
-	{loading ? 'Loading...' : (
-	    tag
-	    ? (
-		<>
-		  <PageTitle>
-		    <TagLink
-			tag={tag}
-			withWiki={false}
-			withCount={false}
-			to={tag.material
-			    ? `/materials/${ tag.material.id }`
-			    : `/materials?tag=${ encodeURIComponent (tag.name) }`}/>
-		  </PageTitle>
-		  {(!(tag.material) && tag.category !== 'meme') && (
-		      <div className="-mt-2">
-			<PrefetchLink
-			    to={`/materials/new?tag=${ encodeURIComponent (tag.name) }`}>
-			  追加
-			</PrefetchLink>
-		      </div>)}
-
-		  <MaterialCard tag={tag}/>
-
-		  <div className="ml-2 overflow-x-auto pb-2">
-		    {tag.children.map (c2 => (
-			<Fragment key={c2.id}>
-			  <SectionTitle>
-			    <TagLink
-				tag={c2}
-				withWiki={false}
-				withCount={false}
-				to={`/materials?tag=${ encodeURIComponent (c2.name) }`}/>
-			  </SectionTitle>
-			  {(!(c2.material) && c2.category !== 'meme') && (
-			      <div className="-mt-4">
-				<PrefetchLink
-				    to={`/materials/new?tag=${ encodeURIComponent (c2.name) }`}>
-				  追加
-				</PrefetchLink>
-			      </div>)}
-
-			  <MaterialCard tag={c2}/>
-
-			  <div className="ml-2">
-			    {c2.children.map (c3 => (
-				<Fragment key={c3.id}>
-				  <SubsectionTitle>
-				    <TagLink
-					tag={c3}
-					withWiki={false}
-					withCount={false}
-					to={`/materials?tag=${ encodeURIComponent (c3.name) }`}/>
-				  </SubsectionTitle>
-				  {(!(c3.material) && c3.category !== 'meme') && (
-				      <div className="-mt-2">
-					<PrefetchLink
-					    to={`/materials/new?tag=${
-						encodeURIComponent (c3.name) }`}>
-					  追加
-					</PrefetchLink>
-				      </div>)}
-
-				  <MaterialCard tag={c3}/>
-				</Fragment>))}
-			  </div>
-			</Fragment>))}
-		  </div>
-		</>)
-	    : (
-		<>
-		  <p>左のリストから照会したいタグを選択してください。</p>
-		  <p>もしくは……</p>
-		  <ul>
-		    <li><PrefetchLink to="/materials/new">素材を新規追加する</PrefetchLink></li>
-		    <li>
-		      <a href={`${ API_BASE_URL }/materials/download.zip?profile=legacy_drive`}>
-			すべての素材をダウンロードする
-		      </a>
-		    </li>
-		  </ul>
-		</>))}
+        {unclassified ? (
+            <>
+              <PageTitle>未分類素材</PageTitle>
+              <div className="-mt-2 mb-4">
+                <PrefetchLink
+                    to={`/materials?material_filter=${ materialFilter }`}
+                    className="text-sm text-sky-700 underline underline-offset-2
+                               dark:text-sky-300">
+                  素材検索トップへ戻る
+                </PrefetchLink>
+              </div>
+              {unclassifiedLoading && <p>Loading...</p>}
+              {unclassifiedError && (
+                  <p className="text-red-600 dark:text-red-300">未分類素材の取得に失敗しました．</p>)}
+              {unclassifiedData && unclassifiedData.materials.length === 0 && (
+                  <p>未分類素材はありません．</p>)}
+              {unclassifiedData && unclassifiedData.materials.length > 0 && (
+                  <MaterialList materials={unclassifiedData.materials}/>)}
+            </>) : tagQuery ? (
+                <>
+                  {tagLoading && <p>Loading...</p>}
+                  {tagError && (
+                      <p className="text-red-600">素材一覧の取得に失敗しました．</p>)}
+                  {(!tagLoading && !tagError && !tag) && (
+                      <p>該当する素材タグが見つかりませんでした．</p>)}
+                  {tag && <MaterialTagTreeView tag={tag}/>}
+                </>) : (
+                    <MaterialSearchTop
+                        tagName={tagName}
+                        setTagName={setTagName}
+                        materialFilter={materialFilter}
+                        setMaterialFilter={setMaterialFilter}/>)}
       </MainArea>)
 }
 

frontend/src/pages/materials/MaterialNewPage.tsx

@@ -1,3 +1,4 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useLocation, useNavigate } from 'react-router-dom'
@@ -11,7 +12,8 @@ import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
-import { apiPost } from '@/lib/api'
+import { createMaterial } from '@/lib/materials'
+import { materialsKeys } from '@/lib/queryKeys'
 import { inputClass } from '@/lib/utils'
 import { useValidationErrors } from '@/lib/useValidationErrors'
 
@@ -21,6 +23,7 @@ type MaterialFormField = 'tag' | 'file' | 'url' | 'exportPaths'
 
 
 const MaterialNewPage: FC = () => {
+  const qc = useQueryClient ()
   const location = useLocation ()
   const query = new URLSearchParams (location.search)
   const tagQuery = query.get ('tag') ?? ''
@@ -29,41 +32,39 @@ const MaterialNewPage: FC = () => {
 
   const [file, setFile] = useState<File | null> (null)
   const [filePreview, setFilePreview] = useState ('')
-  const [sending, setSending] = useState (false)
   const [tag, setTag] = useState (tagQuery)
   const [url, setURL] = useState ('')
   const [exportPath, setExportPath] = useState ('')
   const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
       useValidationErrors<MaterialFormField> ()
 
-  const handleSubmit = async () => {
+  const createMutation = useMutation ({
+      mutationFn: async () => {
+        const formData = new FormData
+        if (tag)
+          formData.append ('tag', tag)
+        if (file)
+          formData.append ('file', file)
+        if (url)
+          formData.append ('url', url)
+        formData.append ('export_paths[legacy_drive]', exportPath)
+
+        return await createMaterial (formData)
+      },
+      onSuccess: async () => {
+        await qc.invalidateQueries ({ queryKey: materialsKeys.root })
+        toast ({ title: '送信成功!' })
+        navigate (`/materials?tag=${ encodeURIComponent (tag) }`)
+      },
+      onError: error => {
+        applyValidationError (error)
+        toast ({ title: '送信失敗……', description: '入力を見直してください．' })
+      },
+  })
+
+  const handleSubmit = () => {
     clearValidationErrors ()
-
-    const formData = new FormData
-    if (tag)
-      formData.append ('tag', tag)
-    if (file)
-      formData.append ('file', file)
-    if (url)
-      formData.append ('url', url)
-    formData.append ('export_paths[legacy_drive]', exportPath)
-
-    try
-    {
-      setSending (true)
-      await apiPost ('/materials', formData)
-      toast ({ title: '送信成功!' })
-      navigate (`/materials?tag=${ encodeURIComponent (tag) }`)
-    }
-    catch (e)
-    {
-      applyValidationError (e)
-      toast ({ title: '送信失敗……', description: '入力を見直してください．' })
-    }
-    finally
-    {
-      setSending (false)
-    }
+    createMutation.mutate ()
   }
 
   return (
@@ -153,7 +154,7 @@ const MaterialNewPage: FC = () => {
 	  <Button
 	      onClick={handleSubmit}
 	      className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
-	      disabled={sending}>
+	      disabled={createMutation.isPending}>
 	    追加
 	  </Button>
 	</Form>

frontend/src/types.ts

@@ -65,6 +65,8 @@ export type FetchNicoTagsOrder = `${ FetchNicoTagsOrderField }:${ 'asc' | 'desc'
 
 export type FetchNicoTagsOrderField = 'name' | 'created_at' | 'updated_at'
 
+export type MaterialFilter = 'present' | 'missing' | 'any'
+
 export type Material = {
     id:                     number
     versionNo:              number
@@ -82,6 +84,21 @@ export type Material = {
     updatedAt:              string
     updatedByUser:          { id: number; name: string } }
 
+export type MaterialSidebarTag = {
+    id:          number
+    name:        string
+    category:    Category
+    deprecated:  boolean
+    hasChildren: boolean
+    hasMaterial: boolean
+    children:    MaterialSidebarTag[] }
+
+export type MaterialTagTree = Omit<Tag, 'children'> & {
+    hasChildren: boolean
+    hasMaterial: boolean
+    children:    MaterialTagTree[]
+    material?:   Material | null }
+
 export type MaterialExportItem = {
     id:          number
     profile:     string