Add 'the lab' settings screen

bskyweb/cmd/bskyweb/server.go

@@ -277,6 +277,7 @@ func serve(cctx *cli.Context) error {
 	e.GET("/settings/content-and-media", server.WebGeneric)
 	e.GET("/settings/about", server.WebGeneric)
 	e.GET("/settings/app-icon", server.WebGeneric)
+	e.GET("/settings/lab", server.WebGeneric)
 	e.GET("/sys/debug", server.WebGeneric)
 	e.GET("/sys/debug-mod", server.WebGeneric)
 	e.GET("/sys/log", server.WebGeneric)

src/Navigation.tsx

@@ -83,6 +83,7 @@ import {ProfileFollowsScreen} from '#/screens/Profile/ProfileFollows'
 import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
 import {AppearanceSettingsScreen} from '#/screens/Settings/AppearanceSettings'
 import {AppIconSettingsScreen} from '#/screens/Settings/AppIconSettings'
+import {LabSettingsScreen} from '#/screens/Settings/LabSettings'
 import {NotificationSettingsScreen} from '#/screens/Settings/NotificationSettings'
 import {
   StarterPackScreen,
@@ -392,6 +393,14 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
           requireAuth: true,
         }}
       />
+      <Stack.Screen
+        name="LabSettings"
+        getComponent={() => LabSettingsScreen}
+        options={{
+          title: title(msg`The Lab`),
+          requireAuth: true,
+        }}
+      />
       <Stack.Screen
         name="Hashtag"
         getComponent={() => HashtagScreen}

src/lib/routes/types.ts

@@ -53,6 +53,7 @@ export type CommonNavigatorParams = {
   ContentAndMediaSettings: undefined
   AboutSettings: undefined
   AppIconSettings: undefined
+  LabSettings: undefined
   Search: {q?: string}
   Hashtag: {tag: string; author?: string}
   Topic: {topic: string}

src/routes.ts

@@ -47,6 +47,7 @@ export const router = new Router({
   ContentAndMediaSettings: '/settings/content-and-media',
   AboutSettings: '/settings/about',
   AppIconSettings: '/settings/app-icon',
+  LabSettings: '/settings/lab',
   // support
   Support: '/support',
   PrivacyPolicy: '/support/privacy',

src/screens/Settings/LabSettings/index.tsx

@@ -0,0 +1,47 @@
+import {useState} from 'react'
+import {Alert, View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+
+import {PressableScale} from '#/lib/custom-animations/PressableScale'
+import {CommonNavigatorParams} from '#/lib/routes/types'
+import {useGate} from '#/lib/statsig/statsig'
+import {atoms as a, useTheme} from '#/alf'
+import * as Toggle from '#/components/forms/Toggle'
+import * as Layout from '#/components/Layout'
+import {Text} from '#/components/Typography'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'LabSettings'>
+export function LabSettingsScreen({}: Props) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const gate = useGate()
+
+  return (
+    <Layout.Screen>
+      <Layout.Header.Outer>
+        <Layout.Header.BackButton />
+        <Layout.Header.Content>
+          <Layout.Header.TitleText>
+            <Trans>The Lab</Trans>
+          </Layout.Header.TitleText>
+        </Layout.Header.Content>
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+
+      <Layout.Content contentContainerStyle={[a.p_lg]}>
+        <Text
+          style={[
+            a.text_md,
+            a.mt_xl,
+            a.mb_sm,
+            a.font_bold,
+            t.atoms.text_contrast_medium,
+          ]}>
+          <Trans>The Lab (TODO)</Trans>
+        </Text>
+      </Layout.Content>
+    </Layout.Screen>
+  )
+}

src/screens/Settings/Settings.tsx

@@ -202,6 +202,12 @@ export function SettingsScreen({}: Props) {
               <Trans>Languages</Trans>
             </SettingsList.ItemText>
           </SettingsList.LinkItem>
+          <SettingsList.LinkItem to="/settings/lab" label={_(msg`The Lab`)}>
+            <SettingsList.ItemIcon icon={EarthIcon} />
+            <SettingsList.ItemText>
+              <Trans>The Lab</Trans>
+            </SettingsList.ItemText>
+          </SettingsList.LinkItem>
           <SettingsList.PressableItem
             onPress={() => Linking.openURL(HELP_DESK_URL)}
             label={_(msg`Help`)}