素材管理 (#306) (#381)

開発環境では、**DB を壊さない前提で、migration → API → 画面 → 同期 → ZIP → 履歴**の順に見るのがよいです。今回の差分は素材管理全体に触っているので、単体でチョンチョン見るより、素材の一生を通すのが早いです。

## 0. 先に方針

**やらないこと:**

```sh id="snb3i6"
rails db:drop
rails db:reset
rails db:setup
DISABLE_DATABASE_ENVIRONMENT_CHECK=1 ...
```

これは禁止。
開発 DB に本番データを入れているなら、床板を剥がして耐震確認するようなものです。

---

## 1. migration 確認

まず現在の状態を見る。

```sh id="qsdfpt"
cd backend
RAILS_ENV=development bundle exec rails db:migrate:status
```

その後、通常 migration。

```sh id="a89fir"
RAILS_ENV=development bundle exec rails db:migrate
```

見るポイント:

```txt id="c1u57a"
materials に source_* / normalized_source_key / version_no がある
material_versions に event_type / file snapshot / source snapshot がある
material_export_items がある
material_sync_suppressions がある
material_sync_sources がある
既存 materials に material_versions version_no=1 create が backfill されている
```

確認用:

```sh id="g4vd4m"
RAILS_ENV=development bundle exec rails runner '
puts "materials=#{Material.count}"
puts "versions=#{MaterialVersion.count}"
puts "materials without versions=#{Material.left_joins(:material_versions).where(material_versions: { id: nil }).count}"
puts "sync suppressions table=#{ActiveRecord::Base.connection.table_exists?(:material_sync_suppressions)}"
'
```

ここで `materials without versions=0` になれば、backfill は通っています。

---

## 2. 既存素材一覧の画面確認

フロントを起動して `/materials` を見る。

```sh id="vl28jd"
cd frontend
npm run dev
```

見る観点:

```txt id="i2ovxw"
初期表示で素材が出る
初期表示ではグルーピングがオフ
タグなし素材も出る
カード表示でサムネまたは代替テキストが出る
一覧表示に切り替えられる
q / tag_state / media_kind / sort / direction が効く
```

ここでまず、普通の素材一覧が壊れていないことを確認します。

---

## 3. 左タグバーの確認

`/materials` を開いて左タグバーからタグを選ぶ。

見る観点:

```txt id="n6udul"
URL が tag_id=...&include_descendants=1&group_by=parent_tag になる
選択中タグが左バーで強調される
一覧上部に「選択中」の表示が出る
「タグ選択を解除」で通常表示に戻れる
解除後、tag_id / include_descendants / group_by / page が消える
子タグ・孫タグの素材も一覧に出る
親タググルーピングされる
```

特に重要なのはこれ。

```txt id="d33os0"
親タグ A を選択
  A に直接紐づく素材
  A > B に紐づく素材
  A > B > C に紐づく素材
が同じ一覧に出ること
```

---

## 4. 選択タグから素材追加

左タグからタグを選択した状態で、一覧上部の **このタグに素材を追加** を押す。

見る観点:

```txt id="qdd5uw"
素材追加画面の tag 欄に選択中タグ名が初期入力されている
file または url を指定して保存できる
保存後 return_to で元のタグ選択済み一覧に戻る
戻った一覧に追加した素材が出る
material_versions に create が 1 件できる
```

Rails console でも確認できます。

```sh id="i07rrb"
RAILS_ENV=development bundle exec rails runner '
m = Material.order(id: :desc).first
puts({ id: m.id, tag: m.tag&.name, versions: m.material_versions.count, version_no: m.version_no }.inspect)
'
```

---

## 5. グループ見出しから素材追加

親タググルーピング表示中に、各グループ見出しの **このタグに素材を追加** を押す。

見る観点:

```txt id="fpx8w4"
グループタグ名が tag 欄に初期入力される
保存後、元の一覧に戻る
追加素材がそのグループ内に出る
```

ここは今回の導線の肝です。棚の見出しから直接その棚へ素材を置けるかを見る。

---

## 6. 素材更新と履歴

既存素材の詳細または編集導線から、タグ・URL・ファイル・export path を更新する。

見る観点:

```txt id="w36i61"
更新前 snapshot が無ければ create が補われる
更新後 update version ができる
file_blob_id / file_filename / file_sha256 が material_versions に入る
export_paths_json が履歴に残る
/materials/changes または /materials/versions で履歴が見える
```

console:

```sh id="a3okhv"
RAILS_ENV=development bundle exec rails runner '
m = Material.order(updated_at: :desc).first
puts m.material_versions.order(:version_no).map { |v|
  [v.version_no, v.event_type, v.tag_name, v.file_filename, v.file_sha256, v.export_paths_hash]
}.inspect
'
```

---

## 7. サムネイル

画像素材を追加して、一覧にサムネイルが出るか確認。

動画素材があるなら、`ffmpeg` が入っている環境で backfill。

```sh id="qxm8fj"
cd backend
RAILS_ENV=development bundle exec rails materials:thumbnails:backfill
```

見る観点:

```txt id="s9a1vf"
画像は 180x180 のサムネが付く
動画はフレームからサムネが作られる
非対応ファイルは代替テキスト表示になる
ログに result が出る
```

---

## 8. ZIP export

export path がある素材を用意して、ブラウザで確認。

```txt id="aq7f7o"
/materials/download.zip?profile=legacy_drive
```

見る観点:

```txt id="h4rve5"
ZIP が落ちる
entry path が material_export_items.export_path になる
disabled な export item は入らない
ファイル実体が欠けている場合は 422 と missing_files が返る
```

---

## 9. 抑止

`/materials/suppressions` で path prefix 抑止を追加する。

見る観点:

```txt id="w80jbu"
member で作成できる
guest は forbidden / unauthorized
google_drive_path_prefix で既存素材が discard される
discard 履歴が material_versions に残る
同期時に同じ source_path 配下が再作成されない
```

---

## 10. Google Drive 同期

開発環境では、まず小さいフォルダでやるのがよいです。
いきなり本番素材集フォルダを食わせると、ログが藪になります 🌿

必要な ENV:

```sh id="kzbb7f"
GOOGLE_DRIVE_SERVICE_ACCOUNT_EMAIL=...
GOOGLE_DRIVE_PRIVATE_KEY_PATH=...
MATERIAL_SYNC_SOURCE_KIND=google_drive_path
MATERIAL_SYNC_SOURCE_FILE_ID=<folder_id>
MATERIAL_SYNC_SOURCE_NAME=dev-small-folder
MATERIAL_SYNC_SOURCE_PROFILE=legacy_drive
```

seed で source 作成、または console で作成。

```sh id="sec40c"
RAILS_ENV=development bundle exec rails db:seed
RAILS_ENV=development bundle exec rails materials:sync
```

見る観点:

```txt id="a5ltqu"
imported / updated / unchanged / suppressed / failed がログに出る
2 回目実行で unchanged が増える
tag は nil のままでも保存できる
人手で tag / url を付けた既存同期素材が、再同期で消えない
Google native file は skip される
download 後 sha256 block が効く
```

---

## 11. schema.rb は別途確認

これはテストというより merge gate です。
今回まだ怪しいので、差分に以下が混ざっていないことを確認します。

```txt id="s3k6da"
wiki_assets 削除
wiki_pages.next_asset_no 削除
素材管理と無関係な CHECK constraint 削除
素材管理と無関係な index order 消失
```

ここが残るなら、機能テストが通っても merge は止めた方がいいです。

---

## 最小テスト順

時間がないなら、この順で十分です。

```txt id="c1k2pw"
1. db:migrate
2. materials without versions = 0 を確認
3. /materials 初期表示
4. 左タグ選択 → 子孫込み表示 → グルーピング
5. タグ選択解除
6. 選択タグから素材追加 → return_to で戻る
7. グループ見出しから素材追加
8. 更新して material_versions を確認
9. ZIP export
10. 小さい Drive folder で materials:sync を 2 回
```

これで、今回の差分の主要な導線はほぼ踏めます。

Reviewed-on: #381
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/pages/materials/MaterialListPage.tsx

@@ -1,75 +1,395 @@
-import { Fragment, useEffect, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { 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 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 Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
-import { apiGet } from '@/lib/api'
+import { fetchMaterials, parseMaterialFilter } from '@/lib/materials'
+import { materialsKeys } from '@/lib/queryKeys'
+import { dateString, inputClass } from '@/lib/utils'
 
-import type { FC } from 'react'
+import type { FC, FormEvent } from 'react'
 
-import type { Material, Tag } from '@/types'
+import type { FetchMaterialsParams,
+	      Material,
+	      MaterialFilter,
+	      MaterialIndexGroup,
+	      MaterialIndexGroupBy,
+	      MaterialIndexDirection,
+	      MaterialIndexMediaKind,
+	      MaterialIndexSort,
+	      MaterialIndexTagState,
+	      MaterialIndexView } from '@/types'
 
-type TagWithMaterial = Omit<Tag, 'children'> & {
-    children: TagWithMaterial[]
-    material: Material | null }
+const MEDIA_KIND_LABELS: Record<Material['mediaKind'], string> = {
+    image:      '画像',
+    video:      '動画',
+    audio:      '音声',
+    file_other: 'その他ファイル',
+    url_only:   'URL のみ'}
+
+const MEDIA_FILTER_LABELS: Record<MaterialIndexMediaKind, string> = {
+    all:        'すべて',
+    image:      '画像',
+    video:      '動画',
+    audio:      '音声',
+    file_other: 'その他ファイル',
+    url_only:   '外部リンクのみ'}
+
+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: TagWithMaterial }) => {
-  if (!(tag.material))
-    return
-
-  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"
-	    style={{ fontFamily: 'Nikumaru' }}>
-	  {(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 MaterialListPage: FC = () => {
-  const [loading, setLoading] = useState (false)
-  const [tag, setTag] = useState<TagWithMaterial | null> (null)
+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 groupedTagPath = (
+    tagId: number,
+    materialFilter: MaterialFilter,
+): string =>
+    `/materials?tag_id=${ tagId }&include_descendants=1&group_by=parent_tag`
+    + `&material_filter=${ materialFilter }`
+
+
+const materialNewPath = (
+    tagName: string,
+    returnTo: string,
+): string =>
+    `/materials/new?tag=${ encodeURIComponent (tagName) }`
+    + `&return_to=${ encodeURIComponent (returnTo) }`
+
+
+const clearedTagSelectionPath = (
+    locationSearch: string,
+    materialFilter: MaterialFilter,
+): string => {
+    const qs = new URLSearchParams (locationSearch)
+    qs.delete ('tag_id')
+    qs.delete ('include_descendants')
+    qs.delete ('group_by')
+    qs.delete ('page')
+    qs.set ('material_filter', materialFilter)
+    return `/materials?${ qs.toString () }`
+}
+
+
+const MaterialThumb: FC<{ material: Material }> = ({ material }) => (
+    <div
+	className={`flex aspect-square h-[180px] w-[180px] items-center justify-center
+		    overflow-hidden rounded-lg border border-stone-200 bg-white text-center
+		    text-stone-900 shadow-sm dark:border-stone-700 dark:bg-stone-900
+		    dark:text-stone-100`}>
+      {material.thumbnail
+       ? <img src={material.thumbnail} alt="" className="block h-full w-full object-cover"/>
+       : (
+	  <span
+	      className="px-2 text-2xl leading-tight"
+	      style={{ fontFamily: material.thumbnailFallbackKind === 'tag_name'
+		  ? 'Nikumaru'
+		  : undefined }}>
+	    {material.thumbnailFallbackText}
+	  </span>)}
+    </div>)
+
+
+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 border-stone-200 bg-white p-3 text-stone-900
+		   shadow-sm dark:border-stone-700 dark:bg-stone-900 dark:text-stone-100">
+      <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>
+	  <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 GroupHeading: FC<{
+    count:          number
+    materialFilter: MaterialFilter
+    title:          string
+    tagId:          number
+}> = ({ count, materialFilter, title, tagId }) => (
+    <div className="flex items-center gap-2 border-b border-stone-200 pb-2
+		    dark:border-stone-700">
+      <PrefetchLink
+	  to={groupedTagPath (tagId, materialFilter)}
+	  className="font-medium text-sky-700 underline underline-offset-2
+		     dark:text-sky-300 w-full">
+	{title}
+      </PrefetchLink>
+      <div className="text-right w-auto">
+	<span className="text-nowrap text-sm text-stone-600 dark:text-stone-300">
+	  {count} 件
+	</span>
+      </div>
+    </div>)
+
+
+const MaterialListPage: FC = () => {
   const location = useLocation ()
-  const query = new URLSearchParams (location.search)
-  const tagQuery = query.get ('tag') ?? ''
+  const navigate = useNavigate ()
+  const query = useMemo (() => new URLSearchParams (location.search), [location.search])
+  const materialFilter = parseMaterialFilter (query.get ('material_filter'), 'present')
+
+  const page = Number (query.get ('page') ?? 1)
+  const limit = Number (query.get ('limit') ?? 20)
+  const qQuery = query.get ('q') ?? ''
+  const tagIdQuery = Number (query.get ('tag_id') ?? 0)
+  const tagId = tagIdQuery > 0 ? tagIdQuery : null
+  const includeDescendants = query.get ('include_descendants') === '1'
+  const tagState = query.get ('unclassified') === '1'
+      ? 'untagged'
+      : parseOption<MaterialIndexTagState> (
+	  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 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 groupByQuery = parseOption<MaterialIndexGroupBy> (
+      query.get ('group_by'),
+      ['none', 'parent_tag'],
+      'none')
+  const groupBy = tagId == null ? 'none' : groupByQuery
+  const view = parseOption<MaterialIndexView> (query.get ('view'), ['card', 'list'], 'card')
+  const createdFromQuery = query.get ('created_from') ?? ''
+  const createdToQuery = query.get ('created_to') ?? ''
+  const updatedFromQuery = query.get ('updated_from') ?? ''
+  const updatedToQuery = query.get ('updated_to') ?? ''
+
+  const [q, setQ] = useState ('')
+  const [tagStateInput, setTagStateInput] = useState<MaterialIndexTagState> ('all')
+  const [mediaKindInput, setMediaKindInput] = useState<MaterialIndexMediaKind> ('all')
+  const [groupByInput, setGroupByInput] = useState<MaterialIndexGroupBy> ('none')
+  const [createdFrom, setCreatedFrom] = useState<string | null> (null)
+  const [createdTo, setCreatedTo] = useState<string | null> (null)
+  const [updatedFrom, setUpdatedFrom] = useState<string | null> (null)
+  const [updatedTo, setUpdatedTo] = useState<string | null> (null)
+
+  const keys: FetchMaterialsParams = {
+      q: qQuery,
+      tagState,
+      mediaKind,
+      tagId,
+      includeDescendants,
+      groupBy,
+      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 tagScope = data?.tagScope ?? null
+  const materials = data?.materials ?? []
+  const groups = data?.groups ?? []
+  const totalPages = data ? Math.ceil (data.count / limit) : 0
+  const materialsById = useMemo (
+      () => new Map (materials.map (material => [material.id, material])),
+      [materials],
+  )
+  const groupedMaterialIds = useMemo (
+      () => new Set (groups.flatMap (group => group.materialIds)),
+      [groups],
+  )
+  const ungroupedMaterials = useMemo (
+      () => materials.filter (material => !groupedMaterialIds.has (material.id)),
+      [groupedMaterialIds, materials],
+  )
 
   useEffect (() => {
-    if (!(tagQuery))
-      {
-	setTag (null)
-	return
-      }
+    setQ (qQuery)
+    setTagStateInput (tagState)
+    setMediaKindInput (mediaKind)
+    setGroupByInput (groupBy)
+    setCreatedFrom (createdFromQuery)
+    setCreatedTo (createdToQuery)
+    setUpdatedFrom (updatedFromQuery)
+    setUpdatedTo (updatedToQuery)
+  }, [createdFromQuery, createdToQuery, groupBy, mediaKind, qQuery, tagState,
+      updatedFromQuery, updatedToQuery])
 
-    void (async () => {
-      try
-      {
-	setLoading (true)
-	setTag (
-	    await apiGet<TagWithMaterial> (
-		`/tags/name/${ encodeURIComponent (tagQuery) }/materials`))
-      }
-      finally
-      {
-	setLoading (false)
-      }
-    }) ()
-  }, [location.search, tagQuery])
+  const search = (e: FormEvent) => {
+    e.preventDefault ()
+
+    const qs = new URLSearchParams ()
+    setIf (qs, 'q', q)
+    qs.set ('tag_state', tagStateInput)
+    qs.set ('media_kind', mediaKindInput)
+    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 ('group_by', tagId == null ? 'none' : groupByInput)
+    qs.set ('view', view)
+    qs.set ('page', '1')
+    qs.set ('limit', String (limit))
+    qs.set ('material_filter', materialFilter)
+    if (tagId != null)
+      qs.set ('tag_id', String (tagId))
+
+    if (includeDescendants)
+      qs.set ('include_descendants', '1')
+
+    navigate (`/materials?${ qs.toString () }`)
+  }
+
+  const updateQuery = (changes: Record<string, string>) => {
+    const qs = new URLSearchParams (location.search)
+    Object.entries (changes).forEach (([key, value]) => {
+      if (value === '')
+	qs.delete (key)
+      else
+	qs.set (key, value)
+    })
+    navigate (`/materials?${ qs.toString () }`)
+  }
+
+  const renderMaterialCollection = (rows: Material[]) =>
+      view === 'card'
+      ? (
+	  <div className="grid grid-cols-[repeat(auto-fill,minmax(196px,1fr))]
+			  justify-items-center gap-4">
+	    {rows.map (material => (
+		<MaterialCard key={material.id} material={material}/>))}
+	  </div>)
+      : (
+	  <div className="space-y-3">
+	    {rows.map (material => (
+		<MaterialListItem key={material.id} material={material}/>))}
+	  </div>)
+
+  const renderGroupedMaterials = (materialGroups: MaterialIndexGroup[]) => (
+      <div className="space-y-6">
+	{materialGroups.map (group => {
+	  const groupMaterials =
+	      group.materialIds
+	      .map (materialId => materialsById.get (materialId))
+	      .filter ((material): material is Material => material != null)
+
+	  if (groupMaterials.length === 0)
+	    return null
+
+	  return (
+	      <section key={group.key} className="space-y-3">
+		<GroupHeading
+		    tagId={group.tag.id}
+		    title={group.tag.name}
+		    count={group.count}
+		    materialFilter={materialFilter}/>
+		{renderMaterialCollection (groupMaterials)}
+	      </section>)
+	})}
+	{ungroupedMaterials.length > 0 && (
+	    <section className="space-y-3">
+	      <div className="border-b border-stone-200 pb-2 dark:border-stone-700">
+		<span className="font-medium text-stone-900 dark:text-stone-100">
+		  その他
+		</span>
+	      </div>
+	      {renderMaterialCollection (ungroupedMaterials)}
+	    </section>)}
+      </div>)
 
   return (
       <MainArea>
@@ -82,86 +402,205 @@ const MaterialListPage: FC = () => {
 		  src: url(${ nikumaru }) format('opentype');
 		}`}
 	  </style>
-	  <title>{`${ tag ? `${ tag.name } 素材集` : '素材集' } | ${ SITE_TITLE }`}</title>
+	  <title>{`素材管理 | ${ 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>)}
+	<div className="space-y-5">
+	  <div className="flex flex-wrap items-center justify-between gap-3">
+	    <PageTitle className="my-auto">素材管理</PageTitle>
+	    <div className="flex flex-wrap gap-2">
+	      {/* TODO: 局所出力を可能にする */}
+	      {/* <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>
 
-		  <MaterialCard tag={tag}/>
+	  {tagScope && (
+	      <div className="flex flex-wrap items-center gap-3 rounded-lg border
+			      border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-900
+			      dark:border-sky-800 dark:bg-sky-950 dark:text-sky-100">
+		<span>
+		  {tagScope.tag.name}
+		  {tagScope.includeDescendants ? ' 配下の素材を表示中' : ' の素材を表示中'}
+		</span>
+		<PrefetchLink
+		    to={clearedTagSelectionPath (location.search, materialFilter)}
+		    className="font-medium underline underline-offset-2
+			       text-sky-700 dark:text-sky-300">
+		  タグ選択を解除
+		</PrefetchLink>
+	      </div>)}
+	  {(tagId != null && tagScope == null) && (
+	      <div className="flex flex-wrap items-center gap-3 rounded-lg border
+			      border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900
+			      dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100">
+		<span>選択中タグが見つかりません．</span>
+		<PrefetchLink
+		    to={clearedTagSelectionPath (location.search, materialFilter)}
+		    className="font-medium underline underline-offset-2
+			       text-amber-800 dark:text-amber-200">
+		  タグ選択を解除
+		</PrefetchLink>
+	      </div>)}
 
-		  <div className="ml-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>)}
+	  {tagState === 'untagged' && (
+	      <PrefetchLink
+		  to={`/materials?material_filter=${ materialFilter }`}
+		  className="text-sm text-sky-700 underline underline-offset-2 dark:text-sky-300">
+		素材検索トップへ戻る
+	      </PrefetchLink>)}
 
-			  <MaterialCard tag={c2}/>
+	  <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>
 
-			  <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>)}
+	      <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>
 
-				  <MaterialCard tag={c3}/>
-				</Fragment>))}
-			  </div>
-			</Fragment>))}
-		  </div>
-		</>)
-	    : (
-		<>
-		  <p>左のリストから照会したいタグを選択してください。</p>
-		  <p>もしくは……</p>
-		  <ul>
-		    <li><PrefetchLink to="/materials/new">素材を新規追加する</PrefetchLink></li>
-		    {/* <li><a href="#">すべての素材をダウンロードする</a></li> */}
-		  </ul>
-		</>))}
+	      <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="作成日時">
+		{() => (
+		    <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>
+		素材はありません。
+		{(tagScope && ['character', 'material'].includes (tagScope.tag.category)) && (
+		    <>
+		      <PrefetchLink
+			  to={materialNewPath (tagScope.tag.name, location.pathname + location.search)}
+			  className="font-medium underline underline-offset-2
+				     text-sky-700 dark:text-sky-300">
+			追加してください
+		      </PrefetchLink>。
+		    </>)}
+	      </p>)}
+	  {materials.length > 0 && (
+	      groupBy === 'parent_tag' && groups.length > 0
+	      ? renderGroupedMaterials (groups)
+	      : renderMaterialCollection (materials))}
+	  <Pagination page={page} totalPages={totalPages}/>
+	</div>
       </MainArea>)
 }