#306

2026-06-25 07:44:11 +09:00
@@ -40,7 +40,7 @@ const setChildrenById = (
 const materialPath = (
    tagName: string,
    materialFilter: MaterialFilter,
-): string => `/materials?tag=${ encodeURIComponent (tagName) }&material_filter=${ materialFilter }`
+): string => `/materials?q=${ encodeURIComponent (tagName) }&material_filter=${ materialFilter }`


 const sidebarTagToTag = (tag: MaterialSidebarTag): Tag => ({
@@ -8,19 +8,12 @@ import {

 import type {
    Material,
+    FetchMaterialsParams,
    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
@@ -44,14 +37,22 @@ export const parseMaterialFilter = (


 export const fetchMaterials = async (
-    { page, limit, tagId, parentId, unclassified }: FetchMaterialsParams,
+    { q, tagState, mediaKind, suppression, createdFrom, createdTo,
+      updatedFrom, updatedTo, sort, direction, page, limit }: 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' }),
+        ...(q && { q }),
+        tag_state:   tagState,
+        media_kind:  mediaKind,
+        suppression,
+        ...(createdFrom && { created_from: createdFrom }),
+        ...(createdTo && { created_to: createdTo }),
+        ...(updatedFrom && { updated_from: updatedFrom }),
+        ...(updatedTo && { updated_to: updatedTo }),
+        sort,
+        direction,
+        page,
+        limit,
    } })


@@ -1,5 +1,6 @@
 import type {
    FetchNicoTagsParams,
+    FetchMaterialsParams,
    FetchPostsParams,
    FetchTagsParams,
    MaterialFilter,
@@ -32,13 +33,7 @@ export const tagsKeys = {

 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,
+    index:        (p: FetchMaterialsParams) => ['materials', 'index', p] as const,
    byTagName:     (name: string, materialFilter: MaterialFilter) =>
 		      ['materials', 'tag', name, materialFilter] as const,
    show:         (id: string) => ['materials', id] as const,
@@ -47,12 +47,15 @@ const MaterialDetailPage: FC<{ user: User | null }> = ({ user }) => {
      queryFn:  () => fetchMaterial (id ?? ''),
      enabled:  id != null,
  })
+  const materialTitle = material
+      ? material.tag?.name ?? `素材 #${ material.id }`
+      : ''

  useEffect (() => {
    if (!(material))
      return

-    setTag (material.tag.name)
+    setTag (material.tag?.name ?? '')
    setURL (material.url ?? '')
    setExportPath (material.exportPaths.legacyDrive ?? '')
    if (material.file && material.contentType)
@@ -124,7 +127,7 @@ const MaterialDetailPage: FC<{ user: User | null }> = ({ user }) => {
      <MainArea>
        {material && (
            <Helmet>
-              <title>{`${ material.tag.name } 素材照会 | ${ SITE_TITLE }`}</title>
+              <title>{`${ materialTitle } 素材照会 | ${ SITE_TITLE }`}</title>
            </Helmet>)}

        {isLoading ? 'Loading...' : isError ? (
@@ -138,10 +141,13 @@ const MaterialDetailPage: FC<{ user: User | null }> = ({ user }) => {
        ) : (
            <>
              <PageTitle>
-                <TagLink
-                    tag={material.tag}
-                    withWiki={false}
-                    withCount={false}/>
+                {material.tag
+                 ? (
+                    <TagLink
+                        tag={material.tag}
+                        withWiki={false}
+                        withCount={false}/>)
+                 : materialTitle}
              </PageTitle>

              {material.fileSuppressedAt && (
@@ -155,7 +161,7 @@ const MaterialDetailPage: FC<{ user: User | null }> = ({ user }) => {

              {(!material.fileSuppressedAt && material.file && material.contentType) && (
                  (/image\/.*/.test (material.contentType) && (
-                      <img src={material.file} alt={material.tag.name || undefined}/>))
+                      <img src={material.file} alt={material.tag?.name || undefined}/>))
                  || (/video\/.*/.test (material.contentType) && (
                      <video src={material.file} controls/>))
                  || (/audio\/.*/.test (material.contentType) && (
@@ -163,9 +169,15 @@ const MaterialDetailPage: FC<{ user: User | null }> = ({ user }) => {

              <TabGroup>
                <Tab name="Wiki">
-                  <WikiBody
-                      title={material.tag.name}
-                      body={material.wikiPageBody ?? undefined}/>
+                  {material.tag
+                   ? (
+                      <WikiBody
+                          title={material.tag.name}
+                          body={material.wikiPageBody ?? undefined}/>)
+                   : (
+                      <p className="text-stone-700 dark:text-stone-300">
+                        タグ未設定の素材です．
+                      </p>)}
                </Tab>

                <Tab name="編輯">
@@ -1,281 +1,291 @@
 import { useQuery } from '@tanstack/react-query'
-import { Fragment, useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 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 DateTimeField from '@/components/common/DateTimeField'
 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 Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
 import { API_BASE_URL, SITE_TITLE } from '@/config'
-import {
-    fetchMaterials,
-    fetchMaterialTagByName,
-    parseMaterialFilter,
-} from '@/lib/materials'
+import { fetchMaterials, parseMaterialFilter } from '@/lib/materials'
 import { materialsKeys } from '@/lib/queryKeys'
-import { inputClass } from '@/lib/utils'
+import { dateString, inputClass } from '@/lib/utils'

-import type { FC } from 'react'
+import type { FC, FormEvent } from 'react'

-import type { Material, MaterialFilter, MaterialTagTree } from '@/types'
+import type {
+    FetchMaterialsParams,
+    Material,
+    MaterialIndexDirection,
+    MaterialIndexMediaKind,
+    MaterialIndexSort,
+    MaterialIndexSuppression,
+    MaterialIndexTagState,
+    MaterialIndexView,
+} from '@/types'

-const MATERIAL_FILTER_LABELS: Record<MaterialFilter, string> = {
-    present: '素材あり',
-    missing: '素材なし',
-    any:     'すべて',
+const MEDIA_KIND_LABELS: Record<Material['mediaKind'], string> = {
+    image:      '画像',
+    video:      '動画',
+    audio:      '音声',
+    file_other: 'その他ファイル',
+    url_only:   'URL のみ',
+    suppressed: '抑止済み',
+}
+
+const MEDIA_FILTER_LABELS: Record<MaterialIndexMediaKind, string> = {
+    all:        'すべて',
+    image:      '画像',
+    video:      '動画',
+    audio:      '音声',
+    file_other: 'その他ファイル',
+    url_only:   'URL のみ',
+}
+
+const SORT_LABELS: Record<MaterialIndexSort, string> = {
+    created_at:     '作成日時',
+    updated_at:     '更新日時',
+    tag_name:       'タグ名',
+    media_kind:     '種類',
+    file_byte_size: 'ファイルサイズ',
+    version_no:     'バージョン',
+    id:             'ID',
 }


-const MaterialCard = ({ tag }: { tag: MaterialTagTree }) => {
-  if (!(tag.material))
-    return null
-
-  return (
-      <PrefetchLink
-          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 setIf = (qs: URLSearchParams, key: string, value: string | null) => {
+  const next = value?.trim ()
+  if (next)
+    qs.set (key, next)
 }


-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>))}
+const parseOption = <T extends string> (
+    value: string | null,
+    allowed: readonly T[],
+    fallback: T,
+): T => allowed.includes (value as T) ? value as T : fallback
+
+
+const fileSizeText = (bytes: number | null): string => {
+  if (bytes == null)
+    return ''
+  if (bytes < 1024)
+    return `${ bytes } B`
+  if (bytes < 1024 * 1024)
+    return `${ (bytes / 1024).toFixed (1) } KB`
+  return `${ (bytes / 1024 / 1024).toFixed (1) } MB`
+}
+
+
+const materialTitle = (material: Material): string =>
+    material.tag?.name ?? `素材 #${ material.id }`
+
+
+const MaterialThumb: FC<{ material: Material }> = ({ material }) => (
+    <div
+        className={`flex aspect-square h-[180px] w-[180px] items-center justify-center
+                    overflow-hidden rounded-lg border text-center shadow-sm ${
+                    material.fileSuppressedAt
+                    ? [
+                        'border-red-300 bg-red-50 text-red-900 dark:border-red-800',
+                        'dark:bg-red-950 dark:text-red-100',
+                      ].join (' ')
+                    : [
+                        'border-stone-200 bg-white text-stone-900 dark:border-stone-700',
+                        'dark:bg-stone-900 dark:text-stone-100',
+                      ].join (' ') }`}>
+      {material.thumbnail
+       ? <img src={material.thumbnail} alt="" className="h-full w-full object-contain"/>
+       : (
+          <span
+              className="px-2 text-2xl leading-tight"
+              style={{ fontFamily: material.thumbnailFallbackKind === 'tag_name'
+		  ? 'Nikumaru'
+		  : undefined }}>
+            {material.thumbnailFallbackText}
+          </span>)}
    </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) }`}>
-              追加
+const MaterialCard: FC<{ material: Material }> = ({ material }) => (
+    <article className="w-[180px] justify-self-center">
+      <PrefetchLink to={`/materials/${ material.id }`} className="block">
+        <MaterialThumb material={material}/>
+        <div className="mt-2 w-[180px]">
+          <p className="truncate text-sm font-medium text-stone-900 dark:text-stone-100">
+            {materialTitle (material)}
+          </p>
+          <p className="truncate text-xs text-stone-600 dark:text-stone-300">
+            {MEDIA_KIND_LABELS[material.mediaKind]} / {dateString (material.createdAt)}
+          </p>
+        </div>
+      </PrefetchLink>
+    </article>)
+
+
+const MaterialListItem: FC<{ material: Material }> = ({ material }) => (
+    <article
+        className={`rounded-lg border p-3 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',
+                      ].join (' ')
+                    : [
+                        'border-stone-200 bg-white text-stone-900 dark:border-stone-700',
+                        'dark:bg-stone-900 dark:text-stone-100',
+                      ].join (' ')}`}>
+      <div className="flex gap-3">
+        <MaterialThumb material={material}/>
+        <div className="min-w-0 flex-1 space-y-2">
+          <div>
+            <PrefetchLink
+                to={`/materials/${ material.id }`}
+                className="font-medium text-sky-700 underline underline-offset-2
+                           dark:text-sky-300">
+              {materialTitle (material)}
            </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 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>
+            {material.fileSuppressedAt && (
+                <p className="mt-1 text-sm text-red-700 dark:text-red-200">抑止済み</p>)}
          </div>
-        </section>
-      </div>)
-}
+          <dl className="space-y-1 text-sm text-stone-600 dark:text-stone-300">
+            <div>
+              <dt className="inline">種類: </dt>
+              <dd className="inline">{MEDIA_KIND_LABELS[material.mediaKind]}</dd>
+            </div>
+            {material.fileByteSize != null && (
+                <div>
+                  <dt className="inline">サイズ: </dt>
+                  <dd className="inline">{fileSizeText (material.fileByteSize)}</dd>
+                </div>)}
+            {material.url && (
+                <div>
+                  <dt className="inline">URL: </dt>
+                  <dd className="inline break-all">{material.url}</dd>
+                </div>)}
+            <div>
+              <dt className="inline">作成: </dt>
+              <dd className="inline">{dateString (material.createdAt)}</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </article>)


 const MaterialListPage: FC = () => {
  const location = useLocation ()
+  const navigate = useNavigate ()
  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 materialFilter = parseMaterialFilter (query.get ('material_filter'), 'present')

-  const [tagName, setTagName] = useState (tagQuery)
-  const [materialFilter, setMaterialFilter] = useState<MaterialFilter> (initialFilter)
+  const page = Number (query.get ('page') ?? 1)
+  const limit = Number (query.get ('limit') ?? 20)
+  const qQuery = query.get ('q') ?? query.get ('tag') ?? ''
+  const tagState = query.get ('unclassified') === '1'
+      ? 'untagged'
+      : parseOption<MaterialIndexTagState> (
+          query.get ('tag_state'),
+          ['all', 'tagged', 'untagged'],
+          'all')
+  const mediaKind = parseOption<MaterialIndexMediaKind> (
+      query.get ('media_kind'),
+      ['all', 'image', 'video', 'audio', 'file_other', 'url_only'],
+      'all')
+  const suppression = parseOption<MaterialIndexSuppression> (
+      query.get ('suppression'),
+      ['active', 'suppressed', 'all'],
+      'active')
+  const sort = parseOption<MaterialIndexSort> (
+      query.get ('sort'),
+      ['created_at', 'updated_at', 'tag_name', 'media_kind', 'file_byte_size',
+       'version_no', 'id'],
+      'created_at')
+  const direction = parseOption<MaterialIndexDirection> (
+      query.get ('direction'),
+      ['asc', 'desc'],
+      'desc')
+  const view = parseOption<MaterialIndexView> (query.get ('view'), ['card', 'list'], 'card')
+  const createdFromQuery = query.get ('created_from') ?? ''
+  const createdToQuery = query.get ('created_to') ?? ''
+  const updatedFromQuery = query.get ('updated_from') ?? ''
+  const updatedToQuery = query.get ('updated_to') ?? ''

-  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,
+  const [q, setQ] = useState ('')
+  const [tagStateInput, setTagStateInput] = useState<MaterialIndexTagState> ('all')
+  const [mediaKindInput, setMediaKindInput] = useState<MaterialIndexMediaKind> ('all')
+  const [suppressionInput, setSuppressionInput] =
+      useState<MaterialIndexSuppression> ('active')
+  const [createdFrom, setCreatedFrom] = useState<string | null> (null)
+  const [createdTo, setCreatedTo] = useState<string | null> (null)
+  const [updatedFrom, setUpdatedFrom] = useState<string | null> (null)
+  const [updatedTo, setUpdatedTo] = useState<string | null> (null)
+
+  const keys: FetchMaterialsParams = {
+      q: qQuery,
+      tagState,
+      mediaKind,
+      suppression,
+      createdFrom: createdFromQuery,
+      createdTo: createdToQuery,
+      updatedFrom: updatedFromQuery,
+      updatedTo: updatedToQuery,
+      sort,
+      direction,
+      view,
+      page,
+      limit,
+  }
+  const { data, isLoading, isError } = useQuery ({
+      queryKey: materialsKeys.index (keys),
+      queryFn:  () => fetchMaterials (keys),
  })
+  const materials = data?.materials ?? []
+  const totalPages = data ? Math.ceil (data.count / limit) : 0

  useEffect (() => {
-    setTagName (tagQuery)
-    setMaterialFilter (initialFilter)
-  }, [initialFilter, tagQuery])
+    setQ (qQuery)
+    setTagStateInput (tagState)
+    setMediaKindInput (mediaKind)
+    setSuppressionInput (suppression)
+    setCreatedFrom (createdFromQuery)
+    setCreatedTo (createdToQuery)
+    setUpdatedFrom (updatedFromQuery)
+    setUpdatedTo (updatedToQuery)
+  }, [createdFromQuery, createdToQuery, mediaKind, qQuery, suppression, tagState,
+      updatedFromQuery, updatedToQuery])
+
+  const search = (e: FormEvent) => {
+    e.preventDefault ()
+
+    const qs = new URLSearchParams ()
+    setIf (qs, 'q', q)
+    qs.set ('tag_state', tagStateInput)
+    qs.set ('media_kind', mediaKindInput)
+    qs.set ('suppression', suppressionInput)
+    setIf (qs, 'created_from', createdFrom)
+    setIf (qs, 'created_to', createdTo)
+    setIf (qs, 'updated_from', updatedFrom)
+    setIf (qs, 'updated_to', updatedTo)
+    qs.set ('sort', sort)
+    qs.set ('direction', direction)
+    qs.set ('view', view)
+    qs.set ('page', '1')
+    qs.set ('limit', String (limit))
+    qs.set ('material_filter', materialFilter)
+    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))
+    navigate (`/materials?${ qs.toString () }`)
+  }

  return (
      <MainArea>
@@ -288,41 +298,205 @@ const MaterialListPage: FC = () => {
                  src: url(${ nikumaru }) format('opentype');
                }`}
          </style>
-          <title>{`${ tag ? `${ tag.name } 素材集` : '素材集' } | ${ SITE_TITLE }`}</title>
+          <title>{`素材一覧 | ${ SITE_TITLE }`}</title>
        </Helmet>

-        {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}/>)}
+        <div className="space-y-5">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <PageTitle>素材一覧</PageTitle>
+            <div className="flex flex-wrap gap-2">
+              <PrefetchLink
+                  to={`/materials?tag_state=untagged&material_filter=${ materialFilter }`}
+                  className="rounded-full border border-stone-300 bg-white px-4 py-2 text-sm
+                             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-sm
+                             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-sm
+                             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>
+
+          {tagState === 'untagged' && (
+              <PrefetchLink
+                  to={`/materials?material_filter=${ materialFilter }`}
+                  className="text-sm text-sky-700 underline underline-offset-2 dark:text-sky-300">
+                素材検索トップへ戻る
+              </PrefetchLink>)}
+
+          <form
+              onSubmit={search}
+              className="max-w-3xl rounded-lg border border-stone-200 bg-white p-4
+                         text-stone-900 dark:border-stone-700 dark:bg-stone-900
+                         dark:text-stone-100">
+            <div className="space-y-3">
+              <FormField label="検索">
+                {({ invalid }) => (
+                    <input
+                        type="search"
+                        value={q}
+                        onChange={e => setQ (e.target.value)}
+                        placeholder="タグ名 / URL / ファイル名"
+                        className={inputClass (invalid)}/>)}
+              </FormField>
+
+              <FormField label="タグ状態">
+                {({ invalid }) => (
+                    <select
+                        value={tagStateInput}
+                        onChange={e => setTagStateInput (
+                            e.target.value as MaterialIndexTagState)}
+                        className={inputClass (invalid)}>
+                      <option value="all">すべて</option>
+                      <option value="tagged">タグあり</option>
+                      <option value="untagged">タグなし</option>
+                    </select>)}
+              </FormField>
+
+              <FormField label="メディア">
+                {({ invalid }) => (
+                    <select
+                        value={mediaKindInput}
+                        onChange={e => setMediaKindInput (
+                            e.target.value as MaterialIndexMediaKind)}
+                        className={inputClass (invalid)}>
+                      {Object.entries (MEDIA_FILTER_LABELS).map (([value, label]) => (
+                          <option key={value} value={value}>
+                            {label}
+                          </option>))}
+                    </select>)}
+              </FormField>
+
+              <FormField label="抑止状態">
+                {({ invalid }) => (
+                    <select
+                        value={suppressionInput}
+                        onChange={e => setSuppressionInput (
+                            e.target.value as MaterialIndexSuppression)}
+                        className={inputClass (invalid)}>
+                      <option value="active">有効のみ</option>
+                      <option value="suppressed">抑止済みのみ</option>
+                      <option value="all">すべて</option>
+                    </select>)}
+              </FormField>
+
+              <FormField label="作成日時">
+                {() => (
+                    <div className="flex flex-wrap items-center gap-2">
+                      <DateTimeField value={createdFrom ?? undefined} onChange={setCreatedFrom}/>
+                      <span>〜</span>
+                      <DateTimeField value={createdTo ?? undefined} onChange={setCreatedTo}/>
+                    </div>)}
+              </FormField>
+
+              <FormField label="更新日時">
+                {() => (
+                    <div className="flex flex-wrap items-center gap-2">
+                      <DateTimeField value={updatedFrom ?? undefined} onChange={setUpdatedFrom}/>
+                      <span>〜</span>
+                      <DateTimeField value={updatedTo ?? undefined} onChange={setUpdatedTo}/>
+                    </div>)}
+              </FormField>
+            </div>
+
+            <div className="mt-4 flex flex-wrap gap-3">
+              <button
+                  type="submit"
+                  className="rounded 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>
+            </div>
+          </form>
+
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <div className="flex flex-wrap gap-2">
+              <button
+                  type="button"
+                  onClick={() => updateQuery ({ view: 'card' })}
+                  className={`rounded-full border px-4 py-2 text-sm ${
+                      view === 'card'
+                      ? [
+                          'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
+                          'dark:bg-sky-950 dark:text-sky-100',
+                        ].join (' ')
+                      : [
+                          'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
+                          'dark:bg-stone-900 dark:text-stone-100',
+                        ].join (' ') }`}>
+                カード
+              </button>
+              <button
+                  type="button"
+                  onClick={() => updateQuery ({ view: 'list' })}
+                  className={`rounded-full border px-4 py-2 text-sm ${
+                      view === 'list'
+                      ? [
+                          'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
+                          'dark:bg-sky-950 dark:text-sky-100',
+                        ].join (' ')
+                      : [
+                          'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
+                          'dark:bg-stone-900 dark:text-stone-100',
+                        ].join (' ') }`}>
+                一覧
+              </button>
+            </div>
+
+            <div className="flex flex-wrap items-center gap-2 text-sm">
+              <select
+                  value={sort}
+                  onChange={e => updateQuery ({ sort: e.target.value, page: '1' })}
+                  className={inputClass (false, 'w-auto')}>
+                {Object.entries (SORT_LABELS).map (([value, label]) => (
+                    <option key={value} value={value}>
+                      {label}
+                    </option>))}
+              </select>
+              <select
+                  value={direction}
+                  onChange={e => updateQuery ({ direction: e.target.value, page: '1' })}
+                  className={inputClass (false, 'w-auto')}>
+                <option value="desc">降順</option>
+                <option value="asc">昇順</option>
+              </select>
+            </div>
+          </div>
+
+          {isLoading && <p>Loading...</p>}
+          {isError && (
+              <p className="text-red-600 dark:text-red-300">素材一覧の取得に失敗しました．</p>)}
+          {(!isLoading && !isError && materials.length === 0) && (
+              <p>素材はありません．</p>)}
+          {materials.length > 0 && (
+              view === 'card'
+              ? (
+                  <div className="grid grid-cols-[repeat(auto-fill,minmax(196px,1fr))]
+                                  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>)
 }

@@ -77,7 +77,12 @@ export const buildMaterial = (overrides: Partial<Material> = {}): Material => ({
  file:                  null,
  url:                   null,
  wikiPageBody:          null,
+  thumbnail:             null,
+  thumbnailFallbackText: 'テストタグ',
+  thumbnailFallbackKind: 'tag_name',
+  mediaKind:             'url_only',
  contentType:           null,
+  fileByteSize:          null,
  fileSuppressedAt:      null,
  fileSuppressionReason: null,
  exportPaths:           {},
@@ -67,14 +67,59 @@ export type FetchNicoTagsOrderField = 'name' | 'created_at' | 'updated_at'

 export type MaterialFilter = 'present' | 'missing' | 'any'

+export type MaterialIndexDirection = 'asc' | 'desc'
+
+export type MaterialIndexMediaKind =
+    | 'all'
+    | 'image'
+    | 'video'
+    | 'audio'
+    | 'file_other'
+    | 'url_only'
+
+export type MaterialIndexSort =
+    | 'created_at'
+    | 'updated_at'
+    | 'tag_name'
+    | 'media_kind'
+    | 'file_byte_size'
+    | 'version_no'
+    | 'id'
+
+export type MaterialIndexSuppression = 'active' | 'suppressed' | 'all'
+
+export type MaterialIndexTagState = 'all' | 'tagged' | 'untagged'
+
+export type MaterialIndexView = 'card' | 'list'
+
+export type FetchMaterialsParams = {
+    q:            string
+    tagState:     MaterialIndexTagState
+    mediaKind:    MaterialIndexMediaKind
+    suppression:  MaterialIndexSuppression
+    createdFrom:  string
+    createdTo:    string
+    updatedFrom:  string
+    updatedTo:    string
+    sort:         MaterialIndexSort
+    direction:    MaterialIndexDirection
+    view:         MaterialIndexView
+    page:         number
+    limit:        number }
+
 export type Material = {
    id:                     number
    versionNo:              number
-    tag:                    Tag
+    tag:                    Tag | null
    file:                   string | null
    url:                    string | null
    wikiPageBody?:          string | null
+    thumbnail:              string | null
+    thumbnailFallbackText:  string | null
+    thumbnailFallbackKind:  'tag_name' | 'created_at'
+    mediaKind:              'image' | 'video' | 'audio' | 'file_other' | 'url_only' | 'suppressed'
    contentType:            string | null
+    fileByteSize:           number | null
    fileSuppressedAt:       string | null
    fileSuppressionReason:  string | null
    exportPaths:            Record<string, string>