From 8167885aa8dde48b1e5054cbc67c8d356508018b Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Mon, 2 Dec 2024 18:42:52 -0600
Subject: [PATCH] Trade boilerplate for ease of use

---
 src/components/Layout/Header/index.tsx        | 26 +++----------------
 src/screens/Settings/AboutSettings.tsx        |  1 +
 .../Settings/AccessibilitySettings.tsx        |  1 +
 src/screens/Settings/AccountSettings.tsx      |  1 +
 src/screens/Settings/AppIconSettings.tsx      |  1 +
 src/screens/Settings/AppPasswords.tsx         |  1 +
 src/screens/Settings/AppearanceSettings.tsx   |  1 +
 .../Settings/ContentAndMediaSettings.tsx      |  1 +
 .../Settings/ExternalMediaPreferences.tsx     |  1 +
 .../Settings/FollowingFeedPreferences.tsx     |  1 +
 src/screens/Settings/LanguageSettings.tsx     |  1 +
 src/screens/Settings/NotificationSettings.tsx |  1 +
 .../Settings/PrivacyAndSecuritySettings.tsx   |  1 +
 src/screens/Settings/Settings.tsx             |  1 +
 src/screens/Settings/ThreadPreferences.tsx    |  1 +
 15 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx
index 7fd2bb1210..32705f520d 100644
--- a/src/components/Layout/Header/index.tsx
+++ b/src/components/Layout/Header/index.tsx
@@ -32,46 +32,26 @@ export function Outer({children}: {children: React.ReactNode}) {
         a.py_sm,
         t.atoms.border_contrast_low,
       ]}>
-      <View style={[a.flex_1]}>{children}</View>
+      {children}
     </View>
   )
 }
 
 export function Content({children}: {children: React.ReactNode}) {
   return (
-    <View
-      style={[
-        a.flex_1,
-        a.justify_center,
-        a.py_xs,
-        isIOS && a.align_center,
-        {
-          paddingHorizontal: BUTTON_SIZE + a.gap_sm.gap,
-          minHeight: BUTTON_SIZE,
-        },
-      ]}>
+    <View style={[a.flex_1, a.justify_center, isIOS && a.align_center]}>
       {children}
     </View>
   )
 }
 
-export function Slot({
-  children,
-  position = 'left',
-}: {
-  children?: React.ReactNode
-  position?: 'left' | 'right'
-}) {
+export function Slot({children}: {children?: React.ReactNode}) {
   return (
     <View
       style={[
-        a.absolute,
-        a.inset_0,
         a.z_50,
         {
           width: BUTTON_SIZE,
-          right: position === 'left' ? 'auto' : 0,
-          left: position === 'right' ? 'auto' : 0,
         },
       ]}>
       {children}
diff --git a/src/screens/Settings/AboutSettings.tsx b/src/screens/Settings/AboutSettings.tsx
index d24f5756e6..c6a6a6ac9b 100644
--- a/src/screens/Settings/AboutSettings.tsx
+++ b/src/screens/Settings/AboutSettings.tsx
@@ -29,6 +29,7 @@ export function AboutSettingsScreen({}: Props) {
               <Trans>About</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         <SettingsList.Container>
           <SettingsList.LinkItem
diff --git a/src/screens/Settings/AccessibilitySettings.tsx b/src/screens/Settings/AccessibilitySettings.tsx
index ab076a44b5..8a2bb569aa 100644
--- a/src/screens/Settings/AccessibilitySettings.tsx
+++ b/src/screens/Settings/AccessibilitySettings.tsx
@@ -47,6 +47,7 @@ export function AccessibilitySettingsScreen({}: Props) {
               <Trans>Accessibility</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         <SettingsList.Container>
           <SettingsList.Group contentContainerStyle={[a.gap_sm]}>
diff --git a/src/screens/Settings/AccountSettings.tsx b/src/screens/Settings/AccountSettings.tsx
index 0fffb10388..16a5d43239 100644
--- a/src/screens/Settings/AccountSettings.tsx
+++ b/src/screens/Settings/AccountSettings.tsx
@@ -46,6 +46,7 @@ export function AccountSettingsScreen({}: Props) {
               <Trans>Account</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
 
         <SettingsList.Container>
diff --git a/src/screens/Settings/AppIconSettings.tsx b/src/screens/Settings/AppIconSettings.tsx
index c108edc8fb..42fbd8655e 100644
--- a/src/screens/Settings/AppIconSettings.tsx
+++ b/src/screens/Settings/AppIconSettings.tsx
@@ -29,6 +29,7 @@ export function AppIconSettingsScreen({}: Props) {
               <Trans>App Icon</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         <Text style={[a.text_lg, a.font_heavy]}>Defaults</Text>
         <View style={[a.flex_row, a.flex_wrap]}>
diff --git a/src/screens/Settings/AppPasswords.tsx b/src/screens/Settings/AppPasswords.tsx
index 2d8b192b39..b92ece1ac3 100644
--- a/src/screens/Settings/AppPasswords.tsx
+++ b/src/screens/Settings/AppPasswords.tsx
@@ -52,6 +52,7 @@ export function AppPasswordsScreen({}: Props) {
               <Trans>App Passwords</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         {error ? (
           <ErrorScreen
diff --git a/src/screens/Settings/AppearanceSettings.tsx b/src/screens/Settings/AppearanceSettings.tsx
index 4bbc46f5dc..d13fe376d2 100644
--- a/src/screens/Settings/AppearanceSettings.tsx
+++ b/src/screens/Settings/AppearanceSettings.tsx
@@ -87,6 +87,7 @@ export function AppearanceSettingsScreen({}: Props) {
                 <Trans>Appearance</Trans>
               </Layout.Header.TitleText>
             </Layout.Header.Content>
+            <Layout.Header.Slot />
           </Layout.Header.Outer>
           <SettingsList.Container>
             <AppearanceToggleButtonGroup
diff --git a/src/screens/Settings/ContentAndMediaSettings.tsx b/src/screens/Settings/ContentAndMediaSettings.tsx
index 69abe31650..a1077555d1 100644
--- a/src/screens/Settings/ContentAndMediaSettings.tsx
+++ b/src/screens/Settings/ContentAndMediaSettings.tsx
@@ -40,6 +40,7 @@ export function ContentAndMediaSettingsScreen({}: Props) {
               <Trans>Content & Media</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         <SettingsList.Container>
           <SettingsList.LinkItem
diff --git a/src/screens/Settings/ExternalMediaPreferences.tsx b/src/screens/Settings/ExternalMediaPreferences.tsx
index 882bfbb5cd..2976f5ef93 100644
--- a/src/screens/Settings/ExternalMediaPreferences.tsx
+++ b/src/screens/Settings/ExternalMediaPreferences.tsx
@@ -34,6 +34,7 @@ export function ExternalMediaPreferencesScreen({}: Props) {
               <Trans>External Media Preferences</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         <SettingsList.Container>
           <SettingsList.Item>
diff --git a/src/screens/Settings/FollowingFeedPreferences.tsx b/src/screens/Settings/FollowingFeedPreferences.tsx
index 0681f2f4f0..239fc482f6 100644
--- a/src/screens/Settings/FollowingFeedPreferences.tsx
+++ b/src/screens/Settings/FollowingFeedPreferences.tsx
@@ -56,6 +56,7 @@ export function FollowingFeedPreferencesScreen({}: Props) {
               <Trans>Following Feed Preferences</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         <SettingsList.Container>
           <SettingsList.Item>
diff --git a/src/screens/Settings/LanguageSettings.tsx b/src/screens/Settings/LanguageSettings.tsx
index d03ff8b7dd..8791607760 100644
--- a/src/screens/Settings/LanguageSettings.tsx
+++ b/src/screens/Settings/LanguageSettings.tsx
@@ -72,6 +72,7 @@ export function LanguageSettingsScreen({}: Props) {
               <Trans>Languages</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         <SettingsList.Container>
           <SettingsList.Group iconInset={false}>
diff --git a/src/screens/Settings/NotificationSettings.tsx b/src/screens/Settings/NotificationSettings.tsx
index c0180b7fd9..3f27107ec7 100644
--- a/src/screens/Settings/NotificationSettings.tsx
+++ b/src/screens/Settings/NotificationSettings.tsx
@@ -41,6 +41,7 @@ export function NotificationSettingsScreen({}: Props) {
               <Trans>Notification Settings</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         {isQueryError ? (
           <Error
diff --git a/src/screens/Settings/PrivacyAndSecuritySettings.tsx b/src/screens/Settings/PrivacyAndSecuritySettings.tsx
index b0b54251d8..df9d4e09f4 100644
--- a/src/screens/Settings/PrivacyAndSecuritySettings.tsx
+++ b/src/screens/Settings/PrivacyAndSecuritySettings.tsx
@@ -37,6 +37,7 @@ export function PrivacyAndSecuritySettingsScreen({}: Props) {
               <Trans>Privacy and Security</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
         <SettingsList.Container>
           <SettingsList.Item>
diff --git a/src/screens/Settings/Settings.tsx b/src/screens/Settings/Settings.tsx
index 9c1cad8e89..9b2e8fe3ad 100644
--- a/src/screens/Settings/Settings.tsx
+++ b/src/screens/Settings/Settings.tsx
@@ -81,6 +81,7 @@ export function SettingsScreen({}: Props) {
               <Trans>Settings</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
 
         <SettingsList.Container>
diff --git a/src/screens/Settings/ThreadPreferences.tsx b/src/screens/Settings/ThreadPreferences.tsx
index cf720f9749..de0b270747 100644
--- a/src/screens/Settings/ThreadPreferences.tsx
+++ b/src/screens/Settings/ThreadPreferences.tsx
@@ -46,6 +46,7 @@ export function ThreadPreferencesScreen({}: Props) {
               <Trans>Thread Preferences</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
+          <Layout.Header.Slot />
         </Layout.Header.Outer>
 
         <SettingsList.Container>