Settings revamp

bskyweb/cmd/bskyweb/server.go

@@ -244,6 +244,10 @@ func serve(cctx *cli.Context) error {
 	e.GET("/settings/external-embeds", server.WebGeneric)
 	e.GET("/settings/accessibility", server.WebGeneric)
 	e.GET("/settings/appearance", server.WebGeneric)
+	e.GET("/settings/account", server.WebGeneric)
+	e.GET("/settings/privacy-and-security", server.WebGeneric)
+	e.GET("/settings/content-and-media", server.WebGeneric)
+	e.GET("/settings/about", server.WebGeneric)
 	e.GET("/sys/debug", server.WebGeneric)
 	e.GET("/sys/debug-mod", server.WebGeneric)
 	e.GET("/sys/log", server.WebGeneric)

src/Navigation.tsx

@@ -95,6 +95,10 @@ import {Wizard} from '#/screens/StarterPack/Wizard'
 import {useTheme} from '#/alf'
 import {router} from '#/routes'
 import {Referrer} from '../modules/expo-bluesky-swiss-army'
+import {AboutSettingsScreen} from './screens/Settings/AboutSettings'
+import {AccountSettingsScreen} from './screens/Settings/AccountSettings'
+import {ContentAndMediaSettingsScreen} from './screens/Settings/ContentAndMediaSettings'
+import {PrivacyAndSecuritySettingsScreen} from './screens/Settings/PrivacyAndSecuritySettings'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
 
@@ -322,7 +326,39 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         name="AppearanceSettings"
         getComponent={() => AppearanceSettingsScreen}
         options={{
-          title: title(msg`Appearance Settings`),
+          title: title(msg`Appearance`),
+          requireAuth: true,
+        }}
+      />
+      <Stack.Screen
+        name="AccountSettings"
+        getComponent={() => AccountSettingsScreen}
+        options={{
+          title: title(msg`Account`),
+          requireAuth: true,
+        }}
+      />
+      <Stack.Screen
+        name="PrivacyAndSecuritySettings"
+        getComponent={() => PrivacyAndSecuritySettingsScreen}
+        options={{
+          title: title(msg`Privacy and Security`),
+          requireAuth: true,
+        }}
+      />
+      <Stack.Screen
+        name="ContentAndMediaSettings"
+        getComponent={() => ContentAndMediaSettingsScreen}
+        options={{
+          title: title(msg`Content and Media`),
+          requireAuth: true,
+        }}
+      />
+      <Stack.Screen
+        name="AboutSettings"
+        getComponent={() => AboutSettingsScreen}
+        options={{
+          title: title(msg`About`),
           requireAuth: true,
         }}
       />

src/alf/atoms.ts

@@ -102,6 +102,9 @@ export const atoms = {
   /*
    * Flex
    */
+  gap_0: {
+    gap: 0,
+  },
   gap_2xs: {
     gap: tokens.space._2xs,
   },

src/components/Layout.tsx

@@ -1,41 +1,100 @@
-import React from 'react'
+import React, {useContext, useMemo} from 'react'
 import {View, ViewStyle} from 'react-native'
 import {StyleProp} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
+import {ViewHeader} from '#/view/com/util/ViewHeader'
+import {ScrollView} from '#/view/com/util/Views'
+import {CenteredView} from '#/view/com/util/Views'
 import {atoms as a} from '#/alf'
 
 // Every screen should have a Layout component wrapping it.
 // This component provides a default padding for the top of the screen.
 // This allows certain screens to avoid the top padding if they want to.
-//
-// In a future PR I will add a unified header component to this file and
-// things like a preconfigured scrollview.
+
+const LayoutContext = React.createContext({
+  withinScreen: false,
+  topPaddingDisabled: false,
+  withinScrollView: false,
+})
 
 /**
  * Every screen should have a Layout.Screen component wrapping it.
  * This component provides a default padding for the top of the screen
  * and height/minHeight
  */
 let Screen = ({
-  disableTopPadding,
+  disableTopPadding = false,
   style,
   ...props
 }: React.ComponentProps<typeof View> & {
   disableTopPadding?: boolean
   style?: StyleProp<ViewStyle>
 }): React.ReactNode => {
   const {top} = useSafeAreaInsets()
+  const context = useMemo(
+    () => ({
+      withinScreen: true,
+      topPaddingDisabled: disableTopPadding,
+      withinScrollView: false,
+    }),
+    [disableTopPadding],
+  )
   return (
-    <View
-      style={[
-        {paddingTop: disableTopPadding ? 0 : top},
-        a.util_screen_outer,
-        style,
-      ]}
-      {...props}
-    />
+    <LayoutContext.Provider value={context}>
+      <View
+        style={[
+          {paddingTop: disableTopPadding ? 0 : top},
+          a.util_screen_outer,
+          style,
+        ]}
+        {...props}
+      />
+    </LayoutContext.Provider>
   )
 }
 Screen = React.memo(Screen)
 export {Screen}
+
+let Header = (
+  props: React.ComponentProps<typeof ViewHeader>,
+): React.ReactNode => {
+  const {withinScrollView} = useContext(LayoutContext)
+  if (!withinScrollView) {
+    return (
+      <CenteredView topBorder={false} sideBorders>
+        <ViewHeader showOnDesktop showBorder {...props} />
+      </CenteredView>
+    )
+  } else {
+    return <ViewHeader showOnDesktop showBorder {...props} />
+  }
+}
+Header = React.memo(Header)
+export {Header}
+
+let Content = ({
+  style,
+  contentContainerStyle,
+  ...props
+}: React.ComponentProps<typeof ScrollView> & {
+  style?: StyleProp<ViewStyle>
+  contentContainerStyle?: StyleProp<ViewStyle>
+}): React.ReactNode => {
+  const context = useContext(LayoutContext)
+  const newContext = useMemo(
+    () => ({...context, withinScrollView: true}),
+    [context],
+  )
+  return (
+    <LayoutContext.Provider value={newContext}>
+      <ScrollView
+        style={[a.flex_1, style]}
+        contentContainerStyle={[{paddingBottom: 100}, contentContainerStyle]}
+        {...props}
+      />
+    </LayoutContext.Provider>
+  )
+}
+Content = React.memo(Content)
+export {Content}

src/components/dialogs/BirthDateSettings.tsx

@@ -29,7 +29,7 @@ export function BirthDateSettingsDialog({
   const {isLoading, error, data: preferences} = usePreferencesQuery()
 
   return (
-    <Dialog.Outer control={control}>
+    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
       <Dialog.ScrollableInner label={_(msg`My Birthday`)}>
         <View style={[a.gap_sm, a.pb_lg]}>

src/components/icons/Bubble.tsx

@@ -11,3 +11,7 @@ export const Bubble_Stroke2_Corner2_Rounded = createSinglePathSVG({
 export const Bubble_Stroke2_Corner3_Rounded = createSinglePathSVG({
   path: 'M2.002 7a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H12.28l-4.762 2.858A1 1 0 0 1 6.002 21v-2a4 4 0 0 1-4-4V7Zm4-2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h1a1 1 0 0 1 1 1v1.234l3.486-2.092a1 1 0 0 1 .514-.142h6a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-12Z',
 })
+
+export const Bubbles_Stroke2_Corner2_Rounded = createSinglePathSVG({
+  path: 'M6.002 6a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-1v1a3 3 0 0 1-3 3h-4.24l-4.274 2.374a1 1 0 0 1-1.486-.874V19a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3h1V6Zm-1 3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h1a1 1 0 0 1 1 1v.8l3.015-1.674a1 1 0 0 1 .485-.126h4.5a1 1 0 0 0 1-1v-1.933a1 1 0 0 1 0-.134V10a1 1 0 0 0-1-1h-10Zm13 4v-3a3 3 0 0 0-3-3h-7V6a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-1Z',
+})

src/components/icons/Car.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Car_Stroke2_Corner2_Rounded = createSinglePathSVG({
+  path: 'M7.018 6a1 1 0 0 0-.808.412L5.4 5.824l.809.588L3 10.825V17a1 1 0 1 0 2 0 1 1 0 0 1 1-1h12a1 1 0 0 1 1 1 1 1 0 1 0 2 0v-5.998l-3.22-4.577A1 1 0 0 0 16.962 6H7.018ZM23 11.686V17a3 3 0 0 1-5.83 1H6.83A3.001 3.001 0 0 1 1 17v-5.5a1 1 0 1 1 0-2h.49l3.102-4.265A3 3 0 0 1 7.018 4h9.944a3 3 0 0 1 2.453 1.274l3.104 4.412H23a1 1 0 1 1 0 2ZM5 13a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Zm10 0a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Z',
+})

src/components/icons/CircleQuestion.tsx

@@ -1,5 +1,5 @@
 import {createSinglePathSVG} from './TEMPLATE'
 
 export const CircleQuestion_Stroke2_Corner2_Rounded = createSinglePathSVG({
-  path: 'M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z" clip-rule="evenodd"/><path fill="#000" fill-rule="evenodd" d="M12 9a1 1 0 0 0-.879.522 1 1 0 0 1-1.754-.96A3 3 0 0 1 12 7c1.515 0 2.567 1.006 2.866 2.189.302 1.189-.156 2.574-1.524 3.258A.62.62 0 0 0 13 13a1 1 0 1 1-2 0c0-.992.56-1.898 1.447-2.342.455-.227.572-.618.48-.978C12.836 9.314 12.529 9 12 9Z',
+  path: 'M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z M12 9a1 1 0 0 0-.879.522 1 1 0 0 1-1.754-.96A3 3 0 0 1 12 7c1.515 0 2.567 1.006 2.866 2.189.302 1.189-.156 2.574-1.524 3.258A.62.62 0 0 0 13 13a1 1 0 1 1-2 0c0-.992.56-1.898 1.447-2.342.455-.227.572-.618.48-.978C12.836 9.314 12.529 9 12 9Z M13 16a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z',
 })

src/components/icons/CodeBrackets.tsx

@@ -3,3 +3,7 @@ import {createSinglePathSVG} from './TEMPLATE'
 export const CodeBrackets_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M14.242 3.03a1 1 0 0 1 .728 1.213l-4 16a1 1 0 1 1-1.94-.485l4-16a1 1 0 0 1 1.213-.728ZM6.707 7.293a1 1 0 0 1 0 1.414L3.414 12l3.293 3.293a1 1 0 1 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0Zm10.586 0a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 1 1-1.414-1.414L20.586 12l-3.293-3.293a1 1 0 0 1 0-1.414Z',
 })
+
+export const CodeBrackets_Stroke2_Corner2_Rounded = createSinglePathSVG({
+  path: 'M14.243 3.03a1 1 0 0 1 .727 1.213l-4 16a1 1 0 1 1-1.94-.485l4-16a1 1 0 0 1 1.213-.728ZM6.707 7.293a1 1 0 0 1 0 1.414l-2.586 2.586a1 1 0 0 0 0 1.414l2.586 2.586a1 1 0 1 1-1.414 1.414l-2.586-2.586a3 3 0 0 1 0-4.242l2.586-2.586a1 1 0 0 1 1.414 0Zm10.586 0a1 1 0 0 1 1.414 0l2.586 2.586a3 3 0 0 1 0 4.242l-2.586 2.586a1 1 0 1 1-1.414-1.414l2.586-2.586a1 1 0 0 0 0-1.414l-2.586-2.586a1 1 0 0 1 0-1.414Z',
+})