#399

frontend/src/components/posts/import/PostImportRowDialog.tsx

@@ -70,10 +70,14 @@ const PostImportRowDialog: FC<Props> = (
     { open, row, messageRow, saving, onOpenChange, onSave },
 ) => {
     const [draft, setDraft] = useState<Draft | null> (null)
+    const [resetRequested, setResetRequested] = useState (false)
 
     useEffect (() => {
 	if (open && row)
-	  setDraft (buildDraft (row))
+	  {
+	    setDraft (buildDraft (row))
+	    setResetRequested (false)
+	  }
     }, [open, row])
 
     if (row == null || draft == null)
@@ -90,12 +94,10 @@ const PostImportRowDialog: FC<Props> = (
     }
 
     const save = async () => {
-	if (
-	    await onSave ({
-		draft,
-		resetRequested: false,
-		resetSnapshot: row.resetSnapshot })
-	)
+	if (await onSave ({
+	    draft,
+	    resetRequested,
+	    resetSnapshot: row.resetSnapshot }))
 	  onOpenChange (false)
     }
 
@@ -139,8 +141,7 @@ const PostImportRowDialog: FC<Props> = (
 		      warnings={displayRow.fieldWarnings.thumbnailBase}
 		      errors={groupedMessages (
 			  displayRow.validationErrors.thumbnailBase,
-			  displayRow.importErrors?.thumbnailBase,
-		      )}
+			  displayRow.importErrors?.thumbnailBase)}
 		      onChange={value => update ('thumbnailBase', value)}/>
 		  <PostOriginalCreatedTimeField
 		      originalCreatedFrom={draft.originalCreatedFrom || null}
@@ -153,8 +154,7 @@ const PostImportRowDialog: FC<Props> = (
 			  displayRow.validationErrors.originalCreatedBefore,
 			  displayRow.importErrors?.originalCreatedAt,
 			  displayRow.importErrors?.originalCreatedFrom,
-			  displayRow.importErrors?.originalCreatedBefore,
-		      )}/>
+			  displayRow.importErrors?.originalCreatedBefore)}/>
 		  <DialogTextField
 		      label="動画時間"
 		      value={draft.duration}
@@ -162,8 +162,7 @@ const PostImportRowDialog: FC<Props> = (
 			  displayRow.validationErrors.duration,
 			  displayRow.validationErrors.videoMs,
 			  displayRow.importErrors?.duration,
-			  displayRow.importErrors?.videoMs,
-		      )}
+			  displayRow.importErrors?.videoMs)}
 		      onChange={value => update ('duration', value)}/>
 		  <DialogAreaField
 		      label="タグ"
@@ -177,8 +176,7 @@ const PostImportRowDialog: FC<Props> = (
 		      value={draft.parentPostIds}
 		      errors={groupedMessages (
 			  displayRow.validationErrors.parentPostIds,
-			  displayRow.importErrors?.parentPostIds,
-		      )}
+			  displayRow.importErrors?.parentPostIds)}
 		      onChange={value => update ('parentPostIds', value)}/>
 		  <FieldWarning messages={displayRow.baseWarnings}/>
 		  <FieldError messages={displayRow.validationErrors.base}/>
@@ -191,14 +189,9 @@ const PostImportRowDialog: FC<Props> = (
 	      <Button
 		  type="button"
 		  variant="outline"
-		  onClick={async () => {
-		      const resetDraft = buildResetDraft (row)
-		      setDraft (resetDraft)
-		      if (await onSave ({
-			  draft: resetDraft,
-			  resetRequested: true,
-			  resetSnapshot: row.resetSnapshot }))
-			onOpenChange (false)
+		  onClick={() => {
+		      setDraft (buildResetDraft (row))
+		      setResetRequested (true)
 		  }}>
 		変更をリセット
 	      </Button>

frontend/src/components/posts/import/PostImportRowSummary.tsx

@@ -4,7 +4,6 @@ import { cn } from '@/lib/utils'
 import PostImportStatusBadge from '@/components/posts/import/PostImportStatusBadge'
 import ThumbnailPreview from '@/components/posts/import/ThumbnailPreview'
 import { displayPostImportStatus } from '@/components/posts/import/postImportRowStatus'
-import { importPanelToneForRow } from '@/components/posts/import/postImportTone'
 
 import type { FC } from 'react'
 
@@ -35,9 +34,7 @@ const PostImportRowSummary: FC<Props> = ({ row, onEdit }) => {
 	      className={cn (
 		  'hidden items-center gap-4 rounded-lg border p-4 md:grid',
 		  'md:grid-cols-[4rem_5rem_minmax(0,1fr)_auto_auto]',
-		  importPanelToneForRow (row),
-		  'transition-shadow hover:shadow-sm',
-	      )}>
+		  'transition-shadow hover:shadow-sm')}>
 	    <div className="space-y-1">
 	      <div className="text-sm font-medium">#{row.sourceRow}</div>
 	    </div>
@@ -80,8 +77,7 @@ const PostImportRowSummary: FC<Props> = ({ row, onEdit }) => {
 	  <div
 	      className={cn (
 		  'space-y-3 rounded-lg border p-4 md:hidden',
-		  importPanelToneForRow (row),
-	      )}>
+		  'transition-shadow hover:shadow-sm')}>
 	    <div className="flex items-start gap-3">
 	      <ThumbnailPreview
 		  url={String (row.attributes.thumbnailBase ?? '')}

frontend/src/components/posts/import/PostImportStatusBadge.tsx

@@ -14,9 +14,9 @@ const LABELS: Record<PostImportBadgeValue, string> = {
     skipped: 'スキップ' }
 
 const TONES: Record<PostImportBadgeValue, StatusBadgeTone> = {
-    ready: 'ready',
+    ready: 'success',
     warning: 'warning',
-    skipped: 'skipped' }
+    skipped: 'neutral' }
 
 
 const PostImportStatusBadge: FC<Props> = ({ value }) => (

frontend/src/components/posts/import/PostImportSummaryChip.tsx

@@ -1,19 +0,0 @@
-import PostImportStatusBadge from '@/components/posts/import/PostImportStatusBadge'
-
-import type { FC } from 'react'
-
-import type { PostImportBadgeValue } from '@/components/posts/import/postImportRowStatus'
-
-type Props = {
-    label: string
-    value: number
-    badge?: PostImportBadgeValue }
-
-const PostImportSummaryChip: FC<Props> = ({ label, value, badge }) => (
-    <div className="flex items-center gap-2 rounded-full border border-border
-		    bg-background px-3 py-1 text-sm">
-      {badge != null && <PostImportStatusBadge value={badge}/>}
-      <span>{label} {value}</span>
-    </div>)
-
-export default PostImportSummaryChip

frontend/src/components/posts/import/postImportRowStatus.ts

@@ -10,20 +10,13 @@ const hasWarnings = (row: PostImportRow): boolean =>
 
 export const displayPostImportStatus = (
     row: PostImportRow,
-): PostImportDisplayStatus | null => {
-    const skipped =
-	row.skipReason === 'existing'
-	|| row.importStatus === 'skipped'
-    const hidden =
-	Object.keys (row.validationErrors ?? { }).length > 0
+): PostImportDisplayStatus | null =>
+    (row.skipReason === 'existing' || row.importStatus === 'skipped')
+    ? 'skipped'
+    : ((Object.keys (row.validationErrors ?? { }).length > 0
 	|| row.importStatus === 'failed'
-	|| row.importStatus === 'created'
-
-    if (skipped)
-      return 'skipped'
-    if (hidden)
-      return null
-    return hasWarnings (row) || row.status === 'warning'
-	? 'warning'
-	: 'ready'
-}
+	|| row.importStatus === 'created')
+       ? null
+       : ((hasWarnings (row) || row.status === 'warning')
+	  ? 'warning'
+	  : 'ready'))

frontend/src/components/posts/import/postImportTone.ts

@@ -1,36 +0,0 @@
-import { displayPostImportStatus } from '@/components/posts/import/postImportRowStatus'
-
-import type { PostImportRow } from '@/lib/postImportSession'
-
-export const importPanelToneClass = (
-    status: 'created' | 'error' | 'failed' | 'invalid' | 'skipped' | 'warning' | 'ready',
-): string[] => {
-    switch (status)
-      {
-      case 'created':
-	return [
-	    'border-sky-200 bg-sky-50',
-	    'dark:border-sky-900 dark:bg-sky-950/30']
-      case 'error':
-      case 'failed':
-      case 'invalid':
-	return [
-	    'border-rose-200 bg-rose-50',
-	    'dark:border-rose-900 dark:bg-rose-950/30']
-      case 'skipped':
-	return [
-	    'border-stone-200 bg-stone-50',
-	    'dark:border-stone-800 dark:bg-stone-900/60']
-      case 'warning':
-	return [
-	    'border-amber-200 bg-amber-50',
-	    'dark:border-amber-900 dark:bg-amber-950/30']
-      default:
-	return [
-	    'border-border bg-white',
-	    'dark:border-neutral-700 dark:bg-neutral-900']
-      }
-}
-
-export const importPanelToneForRow = (row: PostImportRow): string[] =>
-    importPanelToneClass (displayPostImportStatus (row) ?? 'ready')