Add lists storybook screen

src/Navigation.tsx

@@ -65,6 +65,7 @@ import {PrivacyPolicyScreen} from '#/view/screens/PrivacyPolicy'
 import {ProfileScreen} from '#/view/screens/Profile'
 import {ProfileFeedLikedByScreen} from '#/view/screens/ProfileFeedLikedBy'
 import {Storybook} from '#/view/screens/Storybook'
+import {StorybookLists} from '#/view/screens/StorybookLists'
 import {SupportScreen} from '#/view/screens/Support'
 import {TermsOfServiceScreen} from '#/view/screens/TermsOfService'
 import {BottomBar} from '#/view/shell/bottom-bar/BottomBar'
@@ -305,6 +306,11 @@ function commonScreens(Stack: typeof Flat, unreadCountLabel?: string) {
         getComponent={() => Storybook}
         options={{title: title(msg`Storybook`), requireAuth: true}}
       />
+      <Stack.Screen
+        name="StorybookLists"
+        getComponent={() => StorybookLists}
+        options={{title: title(msg`Storybook Lists`), requireAuth: true}}
+      />
       <Stack.Screen
         name="DebugMod"
         getComponent={() => DebugModScreen}

src/lib/routes/types.ts

@@ -34,6 +34,7 @@ export type CommonNavigatorParams = {
   ProfileLabelerLikedBy: {name: string}
   Debug: undefined
   DebugMod: undefined
+  StorybookLists: undefined
   SharedPreferencesTester: undefined
   Log: undefined
   Support: undefined

src/routes.ts

@@ -39,6 +39,7 @@ export const router = new Router<AllNavigatableRoutes>({
   // debug
   Debug: '/sys/debug',
   DebugMod: '/sys/debug-mod',
+  StorybookLists: '/sys/debug-lists',
   Log: '/sys/log',
   // settings
   LanguageSettings: '/settings/language',

src/view/screens/Storybook/index.tsx

@@ -8,6 +8,7 @@ import {ListContained} from '#/view/screens/Storybook/ListContained'
 import {atoms as a, ThemeProvider} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Layout from '#/components/Layout'
+import {Link} from '#/components/Link'
 import {Admonitions} from './Admonitions'
 import {Breakpoints} from './Breakpoints'
 import {Buttons} from './Buttons'
@@ -96,6 +97,14 @@ function StorybookInner() {
               <ButtonText>Open Shared Prefs Tester</ButtonText>
             </Button>
 
+            <Link
+              to="/sys/debug-lists"
+              label="Lists debugger"
+              size="small"
+              color="primary_subtle">
+              <ButtonText>Lists debugger</ButtonText>
+            </Link>
+
             <ThemeProvider theme="light">
               <Theming />
             </ThemeProvider>

src/view/screens/StorybookLists/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import {View} from 'react-native'
+import {useNavigation} from '@react-navigation/native'
+
+import {type NavigationProp} from '#/lib/routes/types'
+import {useSetThemePrefs} from '#/state/shell'
+import {ListContained} from '#/view/screens/Storybook/ListContained'
+import {atoms as a, ThemeProvider} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import * as Layout from '#/components/Layout'
+
+export function StorybookLists() {
+  return (
+    <Layout.Screen>
+      <Layout.Header.Outer>
+        <Layout.Header.BackButton />
+        <Layout.Header.Content>
+          <Layout.Header.TitleText>Storybook</Layout.Header.TitleText>
+        </Layout.Header.Content>
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+      <Layout.Content keyboardShouldPersistTaps="handled">
+        <StorybookInner />
+      </Layout.Content>
+    </Layout.Screen>
+  )
+}
+
+function StorybookInner() {
+  return null
+}