From 2ad93a58957719131df0ec1b0fb5cc1d7c6f7e34 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 26 Aug 2025 21:09:20 -0500
Subject: [PATCH] Add lists storybook screen

---
 src/Navigation.tsx                        |  6 +++++
 src/lib/routes/types.ts                   |  1 +
 src/routes.ts                             |  1 +
 src/view/screens/Storybook/index.tsx      |  9 +++++++
 src/view/screens/StorybookLists/index.tsx | 31 +++++++++++++++++++++++
 5 files changed, 48 insertions(+)
 create mode 100644 src/view/screens/StorybookLists/index.tsx

diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index fa33a9d56c..d624682939 100644
--- a/src/Navigation.tsx
+++ b/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}
diff --git a/src/lib/routes/types.ts b/src/lib/routes/types.ts
index 4f7054cb3f..1cc6e21a81 100644
--- a/src/lib/routes/types.ts
+++ b/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
diff --git a/src/routes.ts b/src/routes.ts
index 1ed913bb29..8fcc53d9df 100644
--- a/src/routes.ts
+++ b/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',
diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx
index 8706547610..a5871d4832 100644
--- a/src/view/screens/Storybook/index.tsx
+++ b/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>
diff --git a/src/view/screens/StorybookLists/index.tsx b/src/view/screens/StorybookLists/index.tsx
new file mode 100644
index 0000000000..819acc3551
--- /dev/null
+++ b/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
+}