From 34f81325d2db68db2804ae102f96fa3abbcd0220 Mon Sep 17 00:00:00 2001
From: miteruzo <miteruzo@naver.com>
Date: Wed, 15 Jul 2026 23:42:05 +0900
Subject: [PATCH] #399

---
 .../components/dialogues/DialogueProvider.tsx | 66 +++++++++++++------
 .../posts/import/PostImportRowForm.tsx        |  1 +
 frontend/src/lib/dialogues/useDialogue.ts     |  9 +--
 3 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/dialogues/DialogueProvider.tsx b/frontend/src/components/dialogues/DialogueProvider.tsx
index bf2271f..bf126d2 100644
--- a/frontend/src/components/dialogues/DialogueProvider.tsx
+++ b/frontend/src/components/dialogues/DialogueProvider.tsx
@@ -153,6 +153,15 @@ const DialogueProvider: FC<Props> = ({ children }) => {
       [closeRequest, pendingIds])
 
   const active = queue[0]
+  const startActions =
+      active?.kind === 'form'
+      ? (formActions[active.id] ?? []).filter (action => action.placement === 'start')
+      : []
+  const endActions =
+      active?.kind === 'form'
+      ? (formActions[active.id] ?? []).filter (action =>
+	  action.placement == null || action.placement === 'end')
+      : []
 
   return (
       <DialogueContext.Provider value={api}>
@@ -204,27 +213,44 @@ const DialogueProvider: FC<Props> = ({ children }) => {
 				 confirm: options => openNestedConfirm (active.id, options) })}
 		       </div>
 
-		       <DialogFooter className="shrink-0 pt-4">
-			 <Button
-			     variant="outline"
-			     onClick={() => closeRequest (active.id)}
-			     disabled={pendingIds.includes (active.id)
-				 || nestedConfirm?.parentId === active.id}>
-			   {active.options.cancelText ?? '取消'}
-			 </Button>
+		       <DialogFooter className="shrink-0 pt-4 sm:justify-between">
+			 <div className="flex flex-wrap gap-2">
+			   {startActions.map (action => (
+			       <Button
+				   key={action.label}
+				   variant={action.variant === 'danger'
+				       ? 'destructive'
+				       : 'default'}
+				   onClick={() => void handleFormAction (active.id, action)}
+				   disabled={pendingIds.includes (active.id)
+				       || nestedConfirm?.parentId === active.id
+				       || action.disabled}>
+				 {action.label}
+			       </Button>))}
+			 </div>
 
-			 {(formActions[active.id] ?? []).map (action => (
-			     <Button
-				 key={action.label}
-				 variant={action.variant === 'danger'
-				     ? 'destructive'
-				     : 'default'}
-				 onClick={() => void handleFormAction (active.id, action)}
-				 disabled={pendingIds.includes (active.id)
-				     || nestedConfirm?.parentId === active.id
-				     || action.disabled}>
-			       {action.label}
-			     </Button>))}
+			 <div className="flex flex-wrap justify-end gap-2">
+			   <Button
+			       variant="outline"
+			       onClick={() => closeRequest (active.id)}
+			       disabled={pendingIds.includes (active.id)
+				   || nestedConfirm?.parentId === active.id}>
+			     {active.options.cancelText ?? '取消'}
+			   </Button>
+
+			   {endActions.map (action => (
+			       <Button
+				   key={action.label}
+				   variant={action.variant === 'danger'
+				       ? 'destructive'
+				       : 'default'}
+				   onClick={() => void handleFormAction (active.id, action)}
+				   disabled={pendingIds.includes (active.id)
+				       || nestedConfirm?.parentId === active.id
+				       || action.disabled}>
+				 {action.label}
+			       </Button>))}
+			 </div>
 		       </DialogFooter>
 		     </>)
 		 : (
diff --git a/frontend/src/components/posts/import/PostImportRowForm.tsx b/frontend/src/components/posts/import/PostImportRowForm.tsx
index 4200a5c..9a453b8 100644
--- a/frontend/src/components/posts/import/PostImportRowForm.tsx
+++ b/frontend/src/components/posts/import/PostImportRowForm.tsx
@@ -137,6 +137,7 @@ const PostImportRowForm: FC<Props> = (
   useEffect (() => {
     controls.setActions ([{
 	label: '変更をリセット',
+	placement: 'start',
 	variant: 'danger',
 	disabled: resetDisabled,
 	onSelect: reset },
diff --git a/frontend/src/lib/dialogues/useDialogue.ts b/frontend/src/lib/dialogues/useDialogue.ts
index c712a9a..579c824 100644
--- a/frontend/src/lib/dialogues/useDialogue.ts
+++ b/frontend/src/lib/dialogues/useDialogue.ts
@@ -24,10 +24,11 @@ type ChoiceOptions<T extends string> = { title:         string
 					 cancelText?:   string }
 
 type DialogueFormAction = {
-  label:    string
-  variant?: DialogueVariant
-  disabled?: boolean
-  onSelect: () => Promise<boolean | void> | boolean | void }
+  label:      string
+  placement?: 'start' | 'end'
+  variant?:   DialogueVariant
+  disabled?:  boolean
+  onSelect:   () => Promise<boolean | void> | boolean | void }
 
 type DialogueFormControls = {
   close:      () => void