Bippin and boppin

src/Navigation.tsx

@@ -76,6 +76,7 @@ import {TermsOfServiceScreen} from '#/view/screens/TermsOfService'
 import {BottomBar} from '#/view/shell/bottom-bar/BottomBar'
 import {createNativeStackNavigatorWithAuth} from '#/view/shell/createNativeStackNavigatorWithAuth'
 import {SharedPreferencesTesterScreen} from '#/screens/E2E/SharedPreferencesTesterScreen'
+import {Creator as FeedCreator} from '#/screens/Feeds/Creator'
 import {Wizard as FeedsWizard} from '#/screens/Feeds/Wizard'
 import HashtagScreen from '#/screens/Hashtag'
 import {MessagesScreen} from '#/screens/Messages/ChatList'
@@ -354,7 +355,7 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
       />
       <Stack.Screen
         name="FeedsWizard"
-        getComponent={() => FeedsWizard}
+        getComponent={() => FeedCreator}
         options={{title: title(msg`Create a feed`), requireAuth: true}}
       />
       <Stack.Screen

src/components/Layout.tsx

@@ -1,9 +1,21 @@
 import React from 'react'
-import {View, ViewStyle} from 'react-native'
+import {View, ViewProps,ViewStyle} from 'react-native'
 import {StyleProp} from 'react-native'
+import {
+  KeyboardAwareScrollView,
+  KeyboardAwareScrollViewProps,
+} from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
 
-import {atoms as a} from '#/alf'
+import {NavigationProp} from '#/lib/routes/types'
+import {atoms as a, useBreakpoints,useTheme} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import {Divider} from '#/components/Divider'
+import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
+import {Text} from '#/components/Typography'
 
 // Every screen should have a Layout component wrapping it.
 // This component provides a default padding for the top of the screen.
@@ -39,3 +51,162 @@ let Screen = ({
 }
 Screen = React.memo(Screen)
 export {Screen}
+
+export const ScrollView = React.forwardRef(function LayoutScrollView(
+  {
+    children,
+    style,
+    ...props
+  }: KeyboardAwareScrollViewProps & {
+    children: React.ReactNode
+  },
+  _ref: React.Ref<typeof KeyboardAwareScrollView>,
+) {
+  return (
+    <KeyboardAwareScrollView
+      style={[a.w_full, style, {transform: 'unset'}]}
+      keyboardShouldPersistTaps="handled"
+      {...props}>
+      {children}
+    </KeyboardAwareScrollView>
+  )
+})
+
+export const Center = React.forwardRef(function LayoutContent(
+  {children, style, ...props}: ViewProps & {children: React.ReactNode},
+  ref: React.Ref<View>,
+) {
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
+  return (
+    <>
+      {gtMobile && (
+        <View
+          style={[
+            a.fixed,
+            a.inset_0,
+            a.border_l,
+            a.border_r,
+            t.atoms.border_contrast_low,
+            {
+              width: 600,
+              left: '50%',
+              transform: [
+                {
+                  translateX: '-50%',
+                },
+              ],
+            },
+          ]}
+        />
+      )}
+      <View
+        ref={ref}
+        style={[
+          a.util_screen_outer,
+          a.w_full,
+          a.mx_auto,
+          gtMobile && {
+            maxWidth: 600,
+          },
+          style,
+        ]}
+        {...props}>
+        {children}
+      </View>
+    </>
+  )
+})
+
+export function Gutter({
+  children,
+  top,
+  bottom,
+}: {
+  children: React.ReactNode
+  top?: boolean
+  bottom?: boolean
+}) {
+  const {gtMobile} = useBreakpoints()
+  return (
+    <View
+      style={[
+        a.px_lg,
+        top && a.pt_lg,
+        bottom && a.pb_lg,
+        gtMobile && [a.px_xl, top && a.pt_xl, bottom && a.pb_xl],
+      ]}>
+      {children}
+    </View>
+  )
+}
+
+export function Header({children}: {children: React.ReactNode}) {
+  const {_} = useLingui()
+  const {gtMobile} = useBreakpoints()
+  const navigation = useNavigation<NavigationProp>()
+
+  const onPressBack = React.useCallback(() => {
+    if (navigation.canGoBack()) {
+      navigation.goBack()
+    } else {
+      navigation.navigate('Home')
+    }
+  }, [navigation])
+
+  return (
+    <View style={[a.w_full]}>
+      <Gutter>
+        <View
+          style={[
+            a.flex_row,
+            a.align_start,
+            a.gap_md,
+            a.pb_xs,
+            a.pt_md,
+            gtMobile && a.pt_lg,
+          ]}>
+          <Button
+            label={_(msg`Go back`)}
+            size="small"
+            variant="solid"
+            color="secondary"
+            shape="round"
+            onPress={onPressBack}>
+            <ButtonIcon icon={ChevronLeft} />
+          </Button>
+          <View style={[a.pb_md, gtMobile && [a.pb_lg]]}>{children}</View>
+        </View>
+      </Gutter>
+
+      <View style={[gtMobile && a.px_xl]}>
+        <Divider />
+      </View>
+    </View>
+  )
+}
+
+Header.TitleText = function HeaderTitleText({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const {gtMobile} = useBreakpoints()
+  return (
+    <Text
+      style={[
+        a.text_xl,
+        a.font_heavy,
+        a.leading_tight,
+        {paddingTop: 6},
+        gtMobile && [
+          a.text_3xl,
+          {
+            paddingTop: 2,
+          },
+        ],
+      ]}>
+      {children}
+    </Text>
+  )
+}

src/screens/Feeds/Creator/index.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useProfileQuery} from '#/state/queries/profile'
+import {useSession} from '#/state/session'
+import {atoms as a, useTheme} from '#/alf'
+import {Admonition} from '#/components/Admonition'
+import * as TextField from '#/components/forms/TextField'
+import * as Layout from '#/components/Layout'
+import {Text} from '#/components/Typography'
+
+export function Creator() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const {data: currentProfile} = useProfileQuery({
+    did: currentAccount?.did,
+    staleTime: 300,
+  })
+
+  const [name, setName] = React.useState('')
+  const [description, setDescription] = React.useState('')
+
+  return (
+    <Layout.Screen>
+      <Layout.ScrollView>
+        <Layout.Center>
+          <Layout.Header>
+            <Layout.Header.TitleText>Create a feed</Layout.Header.TitleText>
+          </Layout.Header>
+
+          <Layout.Gutter top>
+            <View style={[a.gap_lg]}>
+              <Text
+                style={[
+                  a.text_md,
+                  a.leading_snug,
+                  a.pb_sm,
+                  t.atoms.text_contrast_medium,
+                ]}>
+                <Trans>
+                  Create a feed for you, your friends, or your organization. You
+                  can decide what type of content is included using the options
+                  below.
+                </Trans>
+              </Text>
+
+              <View>
+                <TextField.LabelText>
+                  <Trans>Title</Trans>
+                </TextField.LabelText>
+
+                <TextField.Root>
+                  <TextField.Input
+                    label={_(
+                      msg`${
+                        currentProfile?.displayName || currentProfile?.handle
+                      }'s feed`,
+                    )}
+                    value={name}
+                    onChangeText={setName}
+                  />
+                  <TextField.SuffixText label={_(`${name?.length} out of 50`)}>
+                    <Text style={[t.atoms.text_contrast_medium]}>
+                      {name?.length ?? 0}/50
+                    </Text>
+                  </TextField.SuffixText>
+                </TextField.Root>
+              </View>
+              <View>
+                <TextField.LabelText>
+                  <Trans>Description</Trans>
+                </TextField.LabelText>
+                <TextField.Root>
+                  <TextField.Input
+                    label={_(
+                      msg`${
+                        currentProfile?.displayName || currentProfile?.handle
+                      }'s favorite posts`,
+                    )}
+                    value={description}
+                    onChangeText={setDescription}
+                    multiline
+                    style={{minHeight: 150}}
+                  />
+                </TextField.Root>
+              </View>
+
+              <Admonition type="tip">
+                Choosing a descriptive title and description will help others
+                find your feed!
+              </Admonition>
+            </View>
+          </Layout.Gutter>
+        </Layout.Center>
+      </Layout.ScrollView>
+    </Layout.Screen>
+  )
+}

web/index.html

@@ -45,7 +45,7 @@
       }
       html {
         background-color: white;
-        scrollbar-gutter: stable both-edges;
+        /*scrollbar-gutter: stable both-edges;*/
       }
       @media (prefers-color-scheme: dark) {
         html {