#399

frontend/src/pages/posts/PostImportReviewPage.tsx

@@ -4,7 +4,6 @@ import { useNavigate,
 	 useParams,
 	 useSearchParams } from 'react-router-dom'
 
-import FieldError from '@/components/common/FieldError'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
 import PostImportRowDialog from '@/components/posts/import/PostImportRowDialog'
@@ -98,7 +97,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
 	  return
 
 	const element = document.getElementById (`post-import-row-${ editingRow.sourceRow }`)
-	element?.scrollIntoView ({ block: 'center', behaviour: 'smooth' })
+	element?.scrollIntoView ({ block: 'center', behavior: 'smooth' })
     }, [editingRow, session?.repairMode])
 
     const updateSessionRows = (nextRows: PostImportRow[]) =>
@@ -233,7 +232,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
 	    <MainArea>
 	      <div className="mx-auto max-w-4xl space-y-4 p-4">
 		<PageTitle>投稿インポート</PageTitle>
-		<FieldError messages={['取込状態が見つかりません．']}/>
+		<div className="text-red-700 dark:text-red-300">取込状態が見つかりません．</div>
 		<Button type="button" onClick={() => navigate ('/posts/import')}>
 		  URL リスト入力へ戻る
 		</Button>
@@ -242,65 +241,46 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
       }
 
     return (
-	<MainArea>
+	<>
 	  <Helmet>
 	    <title>{`投稿インポート確認 | ${ SITE_TITLE }`}</title>
 	  </Helmet>
 
-	  <div className="mx-auto flex max-w-6xl flex-col gap-4 p-4 pb-8">
-	    <PageTitle>投稿情報の確認</PageTitle>
+	  <MainArea className="min-h-0">
+	    <div className="mx-auto max-w-6xl space-y-4 p-4">
+	      <PageTitle>投稿情報の確認・編輯</PageTitle>
 
-	    <div className="rounded-lg border bg-white p-4 dark:border-neutral-700
-			    dark:bg-neutral-900">
-	      <div className="flex flex-wrap items-center gap-2">
-		<SummaryChip label="全件" value={counts.total}/>
-		<SummaryChip label="登録対象" value={counts.submittable}/>
-		<SummaryChip label="要修正" value={counts.invalid}/>
-		<SummaryChip label="スキップ予定" value={counts.skipPlanned}/>
-		<SummaryChip label="登録済み" value={counts.created}/>
-		<SummaryChip label="失敗" value={counts.failed}/>
+	      <div className="rounded-lg border bg-white p-4 dark:border-neutral-700
+			      dark:bg-neutral-900">
+		<div className="flex flex-wrap items-center gap-2">
+		  <SummaryChip label="全件" value={counts.total}/>
+		  <SummaryChip label="登録対象" value={counts.submittable}/>
+		  <SummaryChip label="要修正" value={counts.invalid}/>
+		  <SummaryChip label="スキップ予定" value={counts.skipPlanned}/>
+		  <SummaryChip label="登録済み" value={counts.created}/>
+		  <SummaryChip label="失敗" value={counts.failed}/>
+		</div>
+	      </div>
+
+	      <div className="space-y-3">
+		{reviewRows.map (row => (
+		    <div key={row.sourceRow} id={`post-import-row-${ row.sourceRow }`}>
+		      <PostImportRowSummary
+			  row={row}
+			  onEdit={() => {
+			      setSearchParams ({ edit: String (row.sourceRow) })
+			  }}/>
+		    </div>))}
 	      </div>
 	    </div>
+	  </MainArea>
 
-	    <div className="flex-1 space-y-3 pb-24">
-	      {reviewRows.map (row => (
-		  <div key={row.sourceRow} id={`post-import-row-${ row.sourceRow }`}>
-		    <PostImportRowSummary
-			row={row}
-			onEdit={() => {
-			    setSearchParams ({ edit: String (row.sourceRow) })
-			}}/>
-		  </div>))}
-	    </div>
-	  </div>
-
-	  <div
-	      className="sticky bottom-0 border-t bg-white/95 p-4 backdrop-blur
-			 dark:border-neutral-700 dark:bg-neutral-950/95">
-	    <div className="mx-auto flex max-w-6xl flex-col gap-3 md:flex-row
-			    md:items-center md:justify-between">
-	      <div className="flex flex-wrap items-center gap-2 text-sm">
-		<PostImportStatusBadge value="pending"/>
-		<span>登録対象 {submittable.length} 件</span>
-		<PostImportStatusBadge value="error"/>
-		<span>要修正 {counts.invalid} 件</span>
-	      </div>
-	      <div className="flex flex-col gap-2 sm:flex-row">
-		<Button
-		    type="button"
-		    variant="outline"
-		    onClick={() => navigate ('/posts/import')}>
-		  URL リスト入力へ戻る
-		</Button>
-		<Button
-		    type="button"
-		    onClick={submit}
-		    disabled={loading || submittable.length === 0}>
-		  有効な投稿を一括登録
-		</Button>
-	      </div>
-	    </div>
-	  </div>
+	  <PostImportFooter
+	      loading={loading}
+	      invalidCount={counts.invalid}
+	      submittableCount={submittable.length}
+	      onBack={() => navigate ('/posts/import')}
+	      onSubmit={submit}/>
 
 	  <PostImportRowDialog
 	      open={editingRow != null}
@@ -311,9 +291,42 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
 		    setSearchParams ({ })
 	      }}
 	      onSave={saveDraft}/>
-	</MainArea>)
+	</>)
 }
 
+const PostImportFooter = (
+    { loading, invalidCount, submittableCount, onBack, onSubmit }: {
+	loading:           boolean
+	invalidCount:      number
+	submittableCount:  number
+	onBack:            () => void
+	onSubmit:          () => void },
+) => (
+    <div
+	className="shrink-0 border-t bg-white/95 p-4 backdrop-blur
+		   dark:border-neutral-700 dark:bg-neutral-950/95">
+      <div className="mx-auto flex max-w-6xl flex-col gap-3 md:flex-row
+		      md:items-center md:justify-between">
+	<div className="flex flex-wrap items-center gap-2 text-sm">
+	  <PostImportStatusBadge value="pending"/>
+	  <span>登録対象 {submittableCount} 件</span>
+	  <PostImportStatusBadge value="error"/>
+	  <span>要修正 {invalidCount} 件</span>
+	</div>
+	<div className="flex flex-col gap-2 sm:flex-row">
+	  <Button type="button" variant="outline" onClick={onBack}>
+	    URL リスト入力へ戻る
+	  </Button>
+	  <Button
+	      type="button"
+	      onClick={onSubmit}
+	      disabled={loading || submittableCount === 0}>
+	    有効な投稿を一括登録
+	  </Button>
+	</div>
+      </div>
+    </div>)
+
 const SummaryChip = ({ label, value }: { label: string
 					  value: number }) => (
     <div className="rounded-full border border-border bg-background px-3 py-1 text-sm">