#306

frontend/src/pages/materials/MaterialListPage.tsx

@@ -17,17 +17,16 @@ import { dateString, inputClass } from '@/lib/utils'
 
 import type { FC, FormEvent } from 'react'
 
-import type {
-    FetchMaterialsParams,
-    Material,
-    MaterialFilter,
-    MaterialIndexGroup,
-    MaterialIndexGroupBy,
-    MaterialIndexDirection,
-    MaterialIndexMediaKind,
-    MaterialIndexSort,
-    MaterialIndexTagState,
-    MaterialIndexView } from '@/types'
+import type { FetchMaterialsParams,
+	      Material,
+	      MaterialFilter,
+	      MaterialIndexGroup,
+	      MaterialIndexGroupBy,
+	      MaterialIndexDirection,
+	      MaterialIndexMediaKind,
+	      MaterialIndexSort,
+	      MaterialIndexTagState,
+	      MaterialIndexView } from '@/types'
 
 const MEDIA_KIND_LABELS: Record<Material['mediaKind'], string> = {
     image:      '画像',
@@ -195,23 +194,19 @@ const GroupHeading: FC<{
     title:          string
     tagId:          number
 }> = ({ count, materialFilter, returnTo, title, tagId }) => (
-    <div className="flex flex-wrap items-center gap-2 border-b border-stone-200 pb-2
+    <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">
+		     dark:text-sky-300 w-full">
 	{title}
       </PrefetchLink>
-      <span className="text-sm text-stone-600 dark:text-stone-300">
-	{count} 件
-      </span>
-      <PrefetchLink
-	  to={materialNewPath (title, returnTo)}
-	  className="text-sm text-sky-700 underline underline-offset-2
-		     dark:text-sky-300">
-	このタグに素材を追加
-      </PrefetchLink>
+      <div className="text-right w-auto">
+	<span className="text-nowrap text-sm text-stone-600 dark:text-stone-300">
+	  {count} 件
+	</span>
+      </div>
     </div>)
 
 
@@ -410,12 +405,12 @@ const MaterialListPage: FC = () => {
 		  src: url(${ nikumaru }) format('opentype');
 		}`}
 	  </style>
-	  <title>{`素材一覧 | ${ SITE_TITLE }`}</title>
+	  <title>{`素材管理 | ${ SITE_TITLE }`}</title>
 	</Helmet>
 
 	<div className="space-y-5">
 	  <div className="flex flex-wrap items-center justify-between gap-3">
-	    <PageTitle>素材一覧</PageTitle>
+	    <PageTitle className="my-auto">素材管理</PageTitle>
 	    <div className="flex flex-wrap gap-2">
 	      <PrefetchLink
 		  to="/materials/new"
@@ -431,13 +426,6 @@ const MaterialListPage: FC = () => {
 			     dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
 		同期元抑止
 	      </PrefetchLink>
-	      <PrefetchLink
-		  to="/materials/changes"
-		  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"
@@ -458,12 +446,6 @@ const MaterialListPage: FC = () => {
 		  {tagScope.tag.name}
 		  {tagScope.includeDescendants ? ' 配下の素材を表示中' : ' の素材を表示中'}
 		</span>
-		<PrefetchLink
-		    to={materialNewPath (tagScope.tag.name, location.pathname + location.search)}
-		    className="font-medium underline underline-offset-2
-			       text-sky-700 dark:text-sky-300">
-		  このタグに素材を追加
-		</PrefetchLink>
 		<PrefetchLink
 		    to={clearedTagSelectionPath (location.search, materialFilter)}
 		    className="font-medium underline underline-offset-2
@@ -534,21 +516,6 @@ const MaterialListPage: FC = () => {
 		    </select>)}
 	      </FormField>
 
-	      <FormField label="グルーピング">
-		{({ invalid }) => (
-		    <select
-			value={groupByInput}
-			onChange={e => setGroupByInput (
-			    e.target.value as MaterialIndexGroupBy)}
-			disabled={tagId == null}
-			className={inputClass (invalid)}>
-		      <option value="none">{GROUP_BY_LABELS.none}</option>
-		      <option value="parent_tag" disabled={tagId == null}>
-			{GROUP_BY_LABELS.parent_tag}
-		      </option>
-		    </select>)}
-	      </FormField>
-
 	      <FormField label="作成日時">
 		{() => (
 		    <div className="flex flex-wrap items-center gap-2">
@@ -591,7 +558,7 @@ const MaterialListPage: FC = () => {
 		      : [
 			  '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"
@@ -604,7 +571,7 @@ const MaterialListPage: FC = () => {
 		      : [
 			  'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
 			  'dark:bg-stone-900 dark:text-stone-100'].join (' ') }`}>
-		一覧
+		詳細
 	      </button>
 	    </div>
 
@@ -632,7 +599,18 @@ const MaterialListPage: FC = () => {
 	  {isError && (
 	      <p className="text-red-600 dark:text-red-300">素材一覧の取得に失敗しました．</p>)}
 	  {(!isLoading && !isError && materials.length === 0) && (
-	      <p>素材はありません．</p>)}
+	      <p>
+		素材はありません。
+		{['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)