#399

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">
+		       <DialogFooter className="shrink-0 pt-4 sm:justify-between">
-			 <Button
+			 <div className="flex flex-wrap gap-2">
-			     variant="outline"
+			   {startActions.map (action => (
-			     onClick={() => closeRequest (active.id)}
+			       <Button
-			     disabled={pendingIds.includes (active.id)
+				   key={action.label}
-				 || nestedConfirm?.parentId === active.id}>
+				   variant={action.variant === 'danger'
-			   {active.options.cancelText ?? '取消'}
+				       ? 'destructive'
-			 </Button>
+				       : '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 => (
+			 <div className="flex flex-wrap justify-end gap-2">
-			     <Button
+			   <Button
-				 key={action.label}
+			       variant="outline"
-				 variant={action.variant === 'danger'
+			       onClick={() => closeRequest (active.id)}
-				     ? 'destructive'
+			       disabled={pendingIds.includes (active.id)
-				     : 'default'}
+				   || nestedConfirm?.parentId === active.id}>
-				 onClick={() => void handleFormAction (active.id, action)}
+			     {active.options.cancelText ?? '取消'}
-				 disabled={pendingIds.includes (active.id)
+			   </Button>
-				     || nestedConfirm?.parentId === active.id
+
-				     || action.disabled}>
+			   {endActions.map (action => (
-			       {action.label}
+			       <Button
-			     </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>
 		     </>)
 		 : (

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 },

frontend/src/lib/dialogues/useDialogue.ts

@@ -24,10 +24,11 @@ type ChoiceOptions<T extends string> = { title:         string
 					 cancelText?:   string }
 
 type DialogueFormAction = {
-  label:    string
+  label:      string
-  variant?: DialogueVariant
+  placement?: 'start' | 'end'
-  disabled?: boolean
+  variant?:   DialogueVariant
-  onSelect: () => Promise<boolean | void> | boolean | void }
+  disabled?:  boolean
+  onSelect:   () => Promise<boolean | void> | boolean | void }
 
 type DialogueFormControls = {
   close:      () => void