#306

frontend/src/pages/materials/MaterialListPage.tsx

@@ -23,7 +23,6 @@ import type {
     MaterialIndexDirection,
     MaterialIndexMediaKind,
     MaterialIndexSort,
-    MaterialIndexSuppression,
     MaterialIndexTagState,
     MaterialIndexView } from '@/types'
 
@@ -32,8 +31,7 @@ const MEDIA_KIND_LABELS: Record<Material['mediaKind'], string> = {
     video:      '動画',
     audio:      '音声',
     file_other: 'その他ファイル',
-    url_only:   'URL のみ',
-    suppressed: '抑止済み'}
+    url_only:   'URL のみ'}
 
 const MEDIA_FILTER_LABELS: Record<MaterialIndexMediaKind, string> = {
     all:        'すべて',
@@ -84,14 +82,9 @@ const materialTitle = (material: Material): string =>
 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 (' ') }`}>
+		    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="h-full w-full object-contain"/>
        : (
@@ -123,14 +116,8 @@ const MaterialCard: FC<{ material: Material }> = ({ material }) => (
 
 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 (' ')}`}>
+	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">
@@ -141,8 +128,6 @@ const MaterialListItem: FC<{ material: Material }> = ({ material }) => (
 			   dark:text-sky-300">
 	      {materialTitle (material)}
 	    </PrefetchLink>
-	    {material.fileSuppressedAt && (
-		<p className="mt-1 text-sm text-red-700 dark:text-red-200">抑止済み</p>)}
 	  </div>
 	  <dl className="space-y-1 text-sm text-stone-600 dark:text-stone-300">
 	    <div>
@@ -188,10 +173,6 @@ const MaterialListPage: FC = () => {
       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',
@@ -210,8 +191,6 @@ const MaterialListPage: FC = () => {
   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)
@@ -221,7 +200,6 @@ const MaterialListPage: FC = () => {
       q: qQuery,
       tagState,
       mediaKind,
-      suppression,
       createdFrom: createdFromQuery,
       createdTo: createdToQuery,
       updatedFrom: updatedFromQuery,
@@ -241,12 +219,11 @@ const MaterialListPage: FC = () => {
     setQ (qQuery)
     setTagStateInput (tagState)
     setMediaKindInput (mediaKind)
-    setSuppressionInput (suppression)
     setCreatedFrom (createdFromQuery)
     setCreatedTo (createdToQuery)
     setUpdatedFrom (updatedFromQuery)
     setUpdatedTo (updatedToQuery)
-  }, [createdFromQuery, createdToQuery, mediaKind, qQuery, suppression, tagState,
+  }, [createdFromQuery, createdToQuery, mediaKind, qQuery, tagState,
       updatedFromQuery, updatedToQuery])
 
   const search = (e: FormEvent) => {
@@ -256,7 +233,6 @@ const MaterialListPage: FC = () => {
     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)
@@ -301,6 +277,13 @@ const MaterialListPage: FC = () => {
 			     dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
 		新規素材を追加
 	      </PrefetchLink>
+	      <PrefetchLink
+		  to="/materials/suppressions"
+		  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"
@@ -363,19 +346,6 @@ const MaterialListPage: FC = () => {
 		    </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">