Move header out of interaction settings form

src/components/dialogs/PostInteractionSettingsDialog.tsx

@@ -65,13 +65,30 @@ export function PostInteractionSettingsControlledDialog({
       <Dialog.ScrollableInner
         label={_(msg`Edit post interaction settings`)}
         style={[{maxWidth: 500}, a.w_full]}>
-        <PostInteractionSettingsForm {...rest} />
+        <View style={[a.gap_md]}>
+          <Header />
+          <PostInteractionSettingsForm {...rest} />
+        </View>
         <Dialog.Close />
       </Dialog.ScrollableInner>
     </Dialog.Outer>
   )
 }
 
+export function Header() {
+  return (
+    <View style={[a.gap_md, a.pb_sm]}>
+      <Text style={[a.text_2xl, a.font_bold]}>
+        <Trans>Post interaction settings</Trans>
+      </Text>
+      <Text style={[a.text_md, a.pb_xs]}>
+        <Trans>Customize who can interact with this post.</Trans>
+      </Text>
+      <Divider />
+    </View>
+  )
+}
+
 export type PostInteractionSettingsDialogProps = {
   control: Dialog.DialogControlProps
   /**
@@ -203,21 +220,25 @@ export function PostInteractionSettingsDialogControlledInner(
     <Dialog.ScrollableInner
       label={_(msg`Edit post interaction settings`)}
       style={[{maxWidth: 500}, a.w_full]}>
-      {isLoading ? (
+      <View style={[a.gap_md]}>
-        <View style={[a.flex_1, a.py_4xl, a.align_center, a.justify_center]}>
+        <Header />
-          <Loader size="xl" />
+
-        </View>
+        {isLoading ? (
-      ) : (
+          <View style={[a.flex_1, a.py_4xl, a.align_center, a.justify_center]}>
-        <PostInteractionSettingsForm
+            <Loader size="xl" />
-          replySettingsDisabled={!isThreadgateOwnedByViewer}
+          </View>
-          isSaving={isSaving}
+        ) : (
-          onSave={onSave}
+          <PostInteractionSettingsForm
-          postgate={postgateValue}
+            replySettingsDisabled={!isThreadgateOwnedByViewer}
-          onChangePostgate={setEditedPostgate}
+            isSaving={isSaving}
-          threadgateAllowUISettings={allowUIValue}
+            onSave={onSave}
-          onChangeThreadgateAllowUISettings={setEditedAllowUISettings}
+            postgate={postgateValue}
-        />
+            onChangePostgate={setEditedPostgate}
-      )}
+            threadgateAllowUISettings={allowUIValue}
+            onChangeThreadgateAllowUISettings={setEditedAllowUISettings}
+          />
+        )}
+      </View>
     </Dialog.ScrollableInner>
   )
 }
@@ -283,17 +304,7 @@ export function PostInteractionSettingsForm({
   return (
     <View>
       <View style={[a.flex_1, a.gap_md]}>
-        <Text style={[a.text_2xl, a.font_bold]}>
-          <Trans>Post interaction settings</Trans>
-        </Text>
-
         <View style={[a.gap_lg]}>
-          <Text style={[a.text_md]}>
-            <Trans>Customize who can interact with this post.</Trans>
-          </Text>
-
-          <Divider />
-
           <View style={[a.gap_sm]}>
             <Text style={[a.font_bold, a.text_lg]}>
               <Trans>Quote settings</Trans>