Remove top padding from shell, move down into individual screens (#5548)

1 files changed, 297 insertions, 280 deletions

diff --git a/src/view/screens/DebugMod.tsx b/src/view/screens/DebugMod.tsx
index d83623adc..b87fc8683 100644
--- a/src/view/screens/DebugMod.tsx
+++ b/src/view/screens/DebugMod.tsx
@@ -21,6 +21,7 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
 import {moderationOptsOverrideContext} from '#/state/preferences/moderation-opts'
 import {FeedNotification} from '#/state/queries/notifications/types'
 import {
@@ -28,7 +29,6 @@ import {
   shouldFilterNotif,
 } from '#/state/queries/notifications/util'
 import {useSession} from '#/state/session'
-import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
 import {CenteredView, ScrollView} from '#/view/com/util/Views'
 import {ProfileHeaderStandard} from '#/screens/Profile/Header/ProfileHeaderStandard'
 import {atoms as a, useTheme} from '#/alf'
@@ -41,6 +41,7 @@ import {
   ChevronBottom_Stroke2_Corner0_Rounded as ChevronBottom,
   ChevronTop_Stroke2_Corner0_Rounded as ChevronTop,
 } from '#/components/icons/Chevron'
+import * as Layout from '#/components/Layout'
 import {H1, H3, P, Text} from '#/components/Typography'
 import {ScreenHider} from '../../components/moderation/ScreenHider'
 import {FeedItem as NotifFeedItem} from '../com/notifications/FeedItem'
@@ -264,309 +265,325 @@ export const DebugModScreen = ({}: NativeStackScreenProps<
   }, [post, modOpts])
 
   return (
-    <moderationOptsOverrideContext.Provider value={modOpts}>
-      <ScrollView>
-        <CenteredView style={[t.atoms.bg, a.px_lg, a.py_lg]}>
-          <H1 style={[a.text_5xl, a.font_bold, a.pb_lg]}>Moderation states</H1>
-
-          <Heading title="" subtitle="Scenario" />
-          <ToggleButton.Group
-            label="Scenario"
-            values={scenario}
-            onChange={setScenario}>
-            <ToggleButton.Button name="label" label="Label">
-              <ToggleButton.ButtonText>Label</ToggleButton.ButtonText>
-            </ToggleButton.Button>
-            <ToggleButton.Button name="block" label="Block">
-              <ToggleButton.ButtonText>Block</ToggleButton.ButtonText>
-            </ToggleButton.Button>
-            <ToggleButton.Button name="mute" label="Mute">
-              <ToggleButton.ButtonText>Mute</ToggleButton.ButtonText>
-            </ToggleButton.Button>
-          </ToggleButton.Group>
-
-          {scenario[0] === 'label' && (
-            <>
-              <View
-                style={[
-                  a.border,
-                  a.rounded_sm,
-                  a.mt_lg,
-                  a.mb_lg,
-                  a.p_lg,
-                  t.atoms.border_contrast_medium,
-                ]}>
-                <Toggle.Group
-                  label="Toggle"
-                  type="radio"
-                  values={label}
-                  onChange={setLabel}>
-                  <View style={[a.flex_row, a.gap_md, a.flex_wrap]}>
-                    {LABEL_VALUES.map(labelValue => {
-                      let targetFixed = target[0]
-                      if (
-                        targetFixed !== 'account' &&
-                        targetFixed !== 'profile'
-                      ) {
-                        targetFixed = 'content'
-                      }
-                      const disabled =
-                        isSelfLabel &&
-                        LABELS[labelValue].flags.includes('no-self')
-                      return (
-                        <Toggle.Item
-                          key={labelValue}
-                          name={labelValue}
-                          label={labelStrings[labelValue].name}
-                          disabled={disabled}
-                          style={disabled ? {opacity: 0.5} : undefined}>
-                          <Toggle.Radio />
-                          <Toggle.LabelText>{labelValue}</Toggle.LabelText>
-                        </Toggle.Item>
-                      )
-                    })}
-                    <Toggle.Item
-                      name="custom"
-                      label="Custom label"
-                      disabled={isSelfLabel}
-                      style={isSelfLabel ? {opacity: 0.5} : undefined}>
-                      <Toggle.Radio />
-                      <Toggle.LabelText>Custom label</Toggle.LabelText>
-                    </Toggle.Item>
-                  </View>
-                </Toggle.Group>
-
-                {label[0] === 'custom' ? (
-                  <CustomLabelForm
-                    def={customLabelDef}
-                    setDef={setCustomLabelDef}
-                  />
-                ) : (
-                  <>
-                    <View style={{height: 10}} />
-                    <Divider />
-                  </>
-                )}
-
-                <View style={{height: 10}} />
-
-                <SmallToggler label="Advanced">
+    <Layout.Screen>
+      <moderationOptsOverrideContext.Provider value={modOpts}>
+        <ScrollView>
+          <CenteredView style={[t.atoms.bg, a.px_lg, a.py_lg]}>
+            <H1 style={[a.text_5xl, a.font_bold, a.pb_lg]}>
+              Moderation states
+            </H1>
+
+            <Heading title="" subtitle="Scenario" />
+            <ToggleButton.Group
+              label="Scenario"
+              values={scenario}
+              onChange={setScenario}>
+              <ToggleButton.Button name="label" label="Label">
+                <ToggleButton.ButtonText>Label</ToggleButton.ButtonText>
+              </ToggleButton.Button>
+              <ToggleButton.Button name="block" label="Block">
+                <ToggleButton.ButtonText>Block</ToggleButton.ButtonText>
+              </ToggleButton.Button>
+              <ToggleButton.Button name="mute" label="Mute">
+                <ToggleButton.ButtonText>Mute</ToggleButton.ButtonText>
+              </ToggleButton.Button>
+            </ToggleButton.Group>
+
+            {scenario[0] === 'label' && (
+              <>
+                <View
+                  style={[
+                    a.border,
+                    a.rounded_sm,
+                    a.mt_lg,
+                    a.mb_lg,
+                    a.p_lg,
+                    t.atoms.border_contrast_medium,
+                  ]}>
                   <Toggle.Group
                     label="Toggle"
-                    type="checkbox"
-                    values={scenarioSwitches}
-                    onChange={setScenarioSwitches}>
-                    <View style={[a.gap_md, a.flex_row, a.flex_wrap, a.pt_md]}>
-                      <Toggle.Item name="targetMe" label="Target is me">
-                        <Toggle.Checkbox />
-                        <Toggle.LabelText>Target is me</Toggle.LabelText>
-                      </Toggle.Item>
-                      <Toggle.Item name="following" label="Following target">
-                        <Toggle.Checkbox />
-                        <Toggle.LabelText>Following target</Toggle.LabelText>
-                      </Toggle.Item>
-                      <Toggle.Item name="selfLabel" label="Self label">
-                        <Toggle.Checkbox />
-                        <Toggle.LabelText>Self label</Toggle.LabelText>
-                      </Toggle.Item>
-                      <Toggle.Item name="noAdult" label="Adult disabled">
-                        <Toggle.Checkbox />
-                        <Toggle.LabelText>Adult disabled</Toggle.LabelText>
-                      </Toggle.Item>
-                      <Toggle.Item name="loggedOut" label="Logged out">
-                        <Toggle.Checkbox />
-                        <Toggle.LabelText>Logged out</Toggle.LabelText>
+                    type="radio"
+                    values={label}
+                    onChange={setLabel}>
+                    <View style={[a.flex_row, a.gap_md, a.flex_wrap]}>
+                      {LABEL_VALUES.map(labelValue => {
+                        let targetFixed = target[0]
+                        if (
+                          targetFixed !== 'account' &&
+                          targetFixed !== 'profile'
+                        ) {
+                          targetFixed = 'content'
+                        }
+                        const disabled =
+                          isSelfLabel &&
+                          LABELS[labelValue].flags.includes('no-self')
+                        return (
+                          <Toggle.Item
+                            key={labelValue}
+                            name={labelValue}
+                            label={labelStrings[labelValue].name}
+                            disabled={disabled}
+                            style={disabled ? {opacity: 0.5} : undefined}>
+                            <Toggle.Radio />
+                            <Toggle.LabelText>{labelValue}</Toggle.LabelText>
+                          </Toggle.Item>
+                        )
+                      })}
+                      <Toggle.Item
+                        name="custom"
+                        label="Custom label"
+                        disabled={isSelfLabel}
+                        style={isSelfLabel ? {opacity: 0.5} : undefined}>
+                        <Toggle.Radio />
+                        <Toggle.LabelText>Custom label</Toggle.LabelText>
                       </Toggle.Item>
                     </View>
                   </Toggle.Group>
 
-                  {LABELS[label[0] as keyof typeof LABELS]?.configurable !==
-                    false && (
-                    <View style={[a.mt_md]}>
-                      <Text
-                        style={[a.font_bold, a.text_xs, t.atoms.text, a.pb_sm]}>
-                        Preference
-                      </Text>
-                      <Toggle.Group
-                        label="Preference"
-                        type="radio"
-                        values={visibility}
-                        onChange={setVisiblity}>
-                        <View
+                  {label[0] === 'custom' ? (
+                    <CustomLabelForm
+                      def={customLabelDef}
+                      setDef={setCustomLabelDef}
+                    />
+                  ) : (
+                    <>
+                      <View style={{height: 10}} />
+                      <Divider />
+                    </>
+                  )}
+
+                  <View style={{height: 10}} />
+
+                  <SmallToggler label="Advanced">
+                    <Toggle.Group
+                      label="Toggle"
+                      type="checkbox"
+                      values={scenarioSwitches}
+                      onChange={setScenarioSwitches}>
+                      <View
+                        style={[a.gap_md, a.flex_row, a.flex_wrap, a.pt_md]}>
+                        <Toggle.Item name="targetMe" label="Target is me">
+                          <Toggle.Checkbox />
+                          <Toggle.LabelText>Target is me</Toggle.LabelText>
+                        </Toggle.Item>
+                        <Toggle.Item name="following" label="Following target">
+                          <Toggle.Checkbox />
+                          <Toggle.LabelText>Following target</Toggle.LabelText>
+                        </Toggle.Item>
+                        <Toggle.Item name="selfLabel" label="Self label">
+                          <Toggle.Checkbox />
+                          <Toggle.LabelText>Self label</Toggle.LabelText>
+                        </Toggle.Item>
+                        <Toggle.Item name="noAdult" label="Adult disabled">
+                          <Toggle.Checkbox />
+                          <Toggle.LabelText>Adult disabled</Toggle.LabelText>
+                        </Toggle.Item>
+                        <Toggle.Item name="loggedOut" label="Logged out">
+                          <Toggle.Checkbox />
+                          <Toggle.LabelText>Logged out</Toggle.LabelText>
+                        </Toggle.Item>
+                      </View>
+                    </Toggle.Group>
+
+                    {LABELS[label[0] as keyof typeof LABELS]?.configurable !==
+                      false && (
+                      <View style={[a.mt_md]}>
+                        <Text
                           style={[
-                            a.flex_row,
-                            a.gap_md,
-                            a.flex_wrap,
-                            a.align_center,
+                            a.font_bold,
+                            a.text_xs,
+                            t.atoms.text,
+                            a.pb_sm,
                           ]}>
-                          <Toggle.Item name="hide" label="Hide">
+                          Preference
+                        </Text>
+                        <Toggle.Group
+                          label="Preference"
+                          type="radio"
+                          values={visibility}
+                          onChange={setVisiblity}>
+                          <View
+                            style={[
+                              a.flex_row,
+                              a.gap_md,
+                              a.flex_wrap,
+                              a.align_center,
+                            ]}>
+                            <Toggle.Item name="hide" label="Hide">
+                              <Toggle.Radio />
+                              <Toggle.LabelText>Hide</Toggle.LabelText>
+                            </Toggle.Item>
+                            <Toggle.Item name="warn" label="Warn">
+                              <Toggle.Radio />
+                              <Toggle.LabelText>Warn</Toggle.LabelText>
+                            </Toggle.Item>
+                            <Toggle.Item name="ignore" label="Ignore">
+                              <Toggle.Radio />
+                              <Toggle.LabelText>Ignore</Toggle.LabelText>
+                            </Toggle.Item>
+                          </View>
+                        </Toggle.Group>
+                      </View>
+                    )}
+                  </SmallToggler>
+                </View>
+
+                <View style={[a.flex_row, a.flex_wrap, a.gap_md]}>
+                  <View>
+                    <Text
+                      style={[
+                        a.font_bold,
+                        a.text_xs,
+                        t.atoms.text,
+                        a.pl_md,
+                        a.pb_xs,
+                      ]}>
+                      Target
+                    </Text>
+                    <View
+                      style={[
+                        a.border,
+                        a.rounded_full,
+                        a.px_md,
+                        a.py_sm,
+                        t.atoms.border_contrast_medium,
+                        t.atoms.bg,
+                      ]}>
+                      <Toggle.Group
+                        label="Target"
+                        type="radio"
+                        values={target}
+                        onChange={setTarget}>
+                        <View style={[a.flex_row, a.gap_md, a.flex_wrap]}>
+                          <Toggle.Item name="account" label="Account">
+                            <Toggle.Radio />
+                            <Toggle.LabelText>Account</Toggle.LabelText>
+                          </Toggle.Item>
+                          <Toggle.Item name="profile" label="Profile">
                             <Toggle.Radio />
-                            <Toggle.LabelText>Hide</Toggle.LabelText>
+                            <Toggle.LabelText>Profile</Toggle.LabelText>
                           </Toggle.Item>
-                          <Toggle.Item name="warn" label="Warn">
+                          <Toggle.Item name="post" label="Post">
                             <Toggle.Radio />
-                            <Toggle.LabelText>Warn</Toggle.LabelText>
+                            <Toggle.LabelText>Post</Toggle.LabelText>
                           </Toggle.Item>
-                          <Toggle.Item name="ignore" label="Ignore">
+                          <Toggle.Item name="embed" label="Embed">
                             <Toggle.Radio />
-                            <Toggle.LabelText>Ignore</Toggle.LabelText>
+                            <Toggle.LabelText>Embed</Toggle.LabelText>
                           </Toggle.Item>
                         </View>
                       </Toggle.Group>
                     </View>
-                  )}
-                </SmallToggler>
-              </View>
-
-              <View style={[a.flex_row, a.flex_wrap, a.gap_md]}>
-                <View>
-                  <Text
-                    style={[
-                      a.font_bold,
-                      a.text_xs,
-                      t.atoms.text,
-                      a.pl_md,
-                      a.pb_xs,
-                    ]}>
-                    Target
-                  </Text>
-                  <View
-                    style={[
-                      a.border,
-                      a.rounded_full,
-                      a.px_md,
-                      a.py_sm,
-                      t.atoms.border_contrast_medium,
-                      t.atoms.bg,
-                    ]}>
-                    <Toggle.Group
-                      label="Target"
-                      type="radio"
-                      values={target}
-                      onChange={setTarget}>
-                      <View style={[a.flex_row, a.gap_md, a.flex_wrap]}>
-                        <Toggle.Item name="account" label="Account">
-                          <Toggle.Radio />
-                          <Toggle.LabelText>Account</Toggle.LabelText>
-                        </Toggle.Item>
-                        <Toggle.Item name="profile" label="Profile">
-                          <Toggle.Radio />
-                          <Toggle.LabelText>Profile</Toggle.LabelText>
-                        </Toggle.Item>
-                        <Toggle.Item name="post" label="Post">
-                          <Toggle.Radio />
-                          <Toggle.LabelText>Post</Toggle.LabelText>
-                        </Toggle.Item>
-                        <Toggle.Item name="embed" label="Embed">
-                          <Toggle.Radio />
-                          <Toggle.LabelText>Embed</Toggle.LabelText>
-                        </Toggle.Item>
-                      </View>
-                    </Toggle.Group>
                   </View>
                 </View>
-              </View>
-            </>
-          )}
-
-          <Spacer />
-
-          <Heading title="" subtitle="Results" />
-
-          <ToggleButton.Group label="Results" values={view} onChange={setView}>
-            <ToggleButton.Button name="post" label="Post">
-              <ToggleButton.ButtonText>Post</ToggleButton.ButtonText>
-            </ToggleButton.Button>
-            <ToggleButton.Button name="notifications" label="Notifications">
-              <ToggleButton.ButtonText>Notifications</ToggleButton.ButtonText>
-            </ToggleButton.Button>
-            <ToggleButton.Button name="account" label="Account">
-              <ToggleButton.ButtonText>Account</ToggleButton.ButtonText>
-            </ToggleButton.Button>
-            <ToggleButton.Button name="data" label="Data">
-              <ToggleButton.ButtonText>Data</ToggleButton.ButtonText>
-            </ToggleButton.Button>
-          </ToggleButton.Group>
-
-          <View
-            style={[
-              a.border,
-              a.rounded_sm,
-              a.mt_lg,
-              a.p_md,
-              t.atoms.border_contrast_medium,
-            ]}>
-            {view[0] === 'post' && (
-              <>
-                <Heading title="Post" subtitle="in feed" />
-                <MockPostFeedItem post={post} moderation={postModeration} />
-
-                <Heading title="Post" subtitle="viewed directly" />
-                <MockPostThreadItem post={post} moderation={postModeration} />
-
-                <Heading title="Post" subtitle="reply in thread" />
-                <MockPostThreadItem
-                  post={post}
-                  moderation={postModeration}
-                  reply
-                />
-              </>
-            )}
-
-            {view[0] === 'notifications' && (
-              <>
-                <Heading title="Notification" subtitle="quote or reply" />
-                <MockNotifItem notif={replyNotif} moderationOpts={modOpts} />
-                <View style={{height: 20}} />
-                <Heading title="Notification" subtitle="follow or like" />
-                <MockNotifItem notif={followNotif} moderationOpts={modOpts} />
               </>
             )}
 
-            {view[0] === 'account' && (
-              <>
-                <Heading title="Account" subtitle="in listing" />
-                <MockAccountCard
-                  profile={profile}
-                  moderation={profileModeration}
-                />
-
-                <Heading title="Account" subtitle="viewing directly" />
-                <MockAccountScreen
-                  profile={profile}
-                  moderation={profileModeration}
-                  moderationOpts={modOpts}
-                />
-              </>
-            )}
+            <Spacer />
+
+            <Heading title="" subtitle="Results" />
+
+            <ToggleButton.Group
+              label="Results"
+              values={view}
+              onChange={setView}>
+              <ToggleButton.Button name="post" label="Post">
+                <ToggleButton.ButtonText>Post</ToggleButton.ButtonText>
+              </ToggleButton.Button>
+              <ToggleButton.Button name="notifications" label="Notifications">
+                <ToggleButton.ButtonText>Notifications</ToggleButton.ButtonText>
+              </ToggleButton.Button>
+              <ToggleButton.Button name="account" label="Account">
+                <ToggleButton.ButtonText>Account</ToggleButton.ButtonText>
+              </ToggleButton.Button>
+              <ToggleButton.Button name="data" label="Data">
+                <ToggleButton.ButtonText>Data</ToggleButton.ButtonText>
+              </ToggleButton.Button>
+            </ToggleButton.Group>
+
+            <View
+              style={[
+                a.border,
+                a.rounded_sm,
+                a.mt_lg,
+                a.p_md,
+                t.atoms.border_contrast_medium,
+              ]}>
+              {view[0] === 'post' && (
+                <>
+                  <Heading title="Post" subtitle="in feed" />
+                  <MockPostFeedItem post={post} moderation={postModeration} />
+
+                  <Heading title="Post" subtitle="viewed directly" />
+                  <MockPostThreadItem post={post} moderation={postModeration} />
+
+                  <Heading title="Post" subtitle="reply in thread" />
+                  <MockPostThreadItem
+                    post={post}
+                    moderation={postModeration}
+                    reply
+                  />
+                </>
+              )}
+
+              {view[0] === 'notifications' && (
+                <>
+                  <Heading title="Notification" subtitle="quote or reply" />
+                  <MockNotifItem notif={replyNotif} moderationOpts={modOpts} />
+                  <View style={{height: 20}} />
+                  <Heading title="Notification" subtitle="follow or like" />
+                  <MockNotifItem notif={followNotif} moderationOpts={modOpts} />
+                </>
+              )}
+
+              {view[0] === 'account' && (
+                <>
+                  <Heading title="Account" subtitle="in listing" />
+                  <MockAccountCard
+                    profile={profile}
+                    moderation={profileModeration}
+                  />
 
-            {view[0] === 'data' && (
-              <>
-                <ModerationUIView
-                  label="Profile Moderation UI"
-                  mod={profileModeration}
-                />
-                <ModerationUIView
-                  label="Post Moderation UI"
-                  mod={postModeration}
-                />
-                <DataView
-                  label={label[0]}
-                  data={LABELS[label[0] as keyof typeof LABELS]}
-                />
-                <DataView
-                  label="Profile Moderation Data"
-                  data={profileModeration}
-                />
-                <DataView label="Post Moderation Data" data={postModeration} />
-              </>
-            )}
-          </View>
+                  <Heading title="Account" subtitle="viewing directly" />
+                  <MockAccountScreen
+                    profile={profile}
+                    moderation={profileModeration}
+                    moderationOpts={modOpts}
+                  />
+                </>
+              )}
+
+              {view[0] === 'data' && (
+                <>
+                  <ModerationUIView
+                    label="Profile Moderation UI"
+                    mod={profileModeration}
+                  />
+                  <ModerationUIView
+                    label="Post Moderation UI"
+                    mod={postModeration}
+                  />
+                  <DataView
+                    label={label[0]}
+                    data={LABELS[label[0] as keyof typeof LABELS]}
+                  />
+                  <DataView
+                    label="Profile Moderation Data"
+                    data={profileModeration}
+                  />
+                  <DataView
+                    label="Post Moderation Data"
+                    data={postModeration}
+                  />
+                </>
+              )}
+            </View>
 
-          <View style={{height: 400}} />
-        </CenteredView>
-      </ScrollView>
-    </moderationOptsOverrideContext.Provider>
+            <View style={{height: 400}} />
+          </CenteredView>
+        </ScrollView>
+      </moderationOptsOverrideContext.Provider>
+    </Layout.Screen>
   )
 }