From 2f68ceb890527bfafccbfdd602dcc34727e267eb Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 19 Mar 2026 13:26:22 +0200
Subject: [PATCH] delete unused screen

---
 src/view/com/util/ViewSelector.tsx | 238 ------------------
 src/view/screens/Debug.tsx         | 387 -----------------------------
 2 files changed, 625 deletions(-)
 delete mode 100644 src/view/com/util/ViewSelector.tsx
 delete mode 100644 src/view/screens/Debug.tsx

diff --git a/src/view/com/util/ViewSelector.tsx b/src/view/com/util/ViewSelector.tsx
deleted file mode 100644
index 98d78a38cd..0000000000
--- a/src/view/com/util/ViewSelector.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-import {
-  forwardRef,
-  type JSX,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import {
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-  Pressable,
-  RefreshControl,
-  ScrollView,
-  StyleSheet,
-  View,
-} from 'react-native'
-
-import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
-import {usePalette} from '#/lib/hooks/usePalette'
-import {clamp} from '#/lib/numbers'
-import {colors, s} from '#/lib/styles'
-import {IS_ANDROID} from '#/env'
-import {Text} from './text/Text'
-import {FlatList_INTERNAL} from './Views'
-
-const HEADER_ITEM = {_reactKey: '__header__'}
-const SELECTOR_ITEM = {_reactKey: '__selector__'}
-const STICKY_HEADER_INDICES = [1]
-
-export type ViewSelectorHandle = {
-  scrollToTop: () => void
-}
-
-export const ViewSelector = forwardRef<
-  ViewSelectorHandle,
-  {
-    sections: string[]
-    items: any[]
-    refreshing?: boolean
-    swipeEnabled?: boolean
-    renderHeader?: () => JSX.Element
-    renderItem: (item: any) => JSX.Element
-    ListFooterComponent?:
-      | React.ComponentType<any>
-      | React.ReactElement<any>
-      | null
-      | undefined
-    onSelectView?: (viewIndex: number) => void
-    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
-    onRefresh?: () => void
-    onEndReached?: (info: {distanceFromEnd: number}) => void
-  }
->(function ViewSelectorImpl(
-  {
-    sections,
-    items,
-    refreshing,
-    renderHeader,
-    renderItem,
-    ListFooterComponent,
-    onSelectView,
-    onScroll,
-    onRefresh,
-    onEndReached,
-  },
-  ref,
-) {
-  const pal = usePalette('default')
-  const [selectedIndex, setSelectedIndex] = useState<number>(0)
-  const flatListRef = useRef<FlatList_INTERNAL>(null)
-
-  // events
-  // =
-
-  const keyExtractor = useCallback((item: any) => item._reactKey, [])
-
-  const onPressSelection = useCallback(
-    (index: number) => setSelectedIndex(clamp(index, 0, sections.length)),
-    [setSelectedIndex, sections],
-  )
-  useEffect(() => {
-    onSelectView?.(selectedIndex)
-  }, [selectedIndex, onSelectView])
-
-  useImperativeHandle(ref, () => ({
-    scrollToTop: () => {
-      flatListRef.current?.scrollToOffset({offset: 0})
-    },
-  }))
-
-  // rendering
-  // =
-
-  const renderItemInternal = useCallback(
-    ({item}: {item: any}) => {
-      if (item === HEADER_ITEM) {
-        if (renderHeader) {
-          return renderHeader()
-        }
-        return <View />
-      } else if (item === SELECTOR_ITEM) {
-        return (
-          <Selector
-            items={sections}
-            selectedIndex={selectedIndex}
-            onSelect={onPressSelection}
-          />
-        )
-      } else {
-        return renderItem(item)
-      }
-    },
-    [sections, selectedIndex, onPressSelection, renderHeader, renderItem],
-  )
-
-  const data = useMemo(() => [HEADER_ITEM, SELECTOR_ITEM, ...items], [items])
-  return (
-    <FlatList_INTERNAL
-      // @ts-expect-error FlatList_INTERNAL ref type is wrong -sfn
-      ref={flatListRef}
-      data={data}
-      keyExtractor={keyExtractor}
-      renderItem={renderItemInternal}
-      ListFooterComponent={ListFooterComponent}
-      // NOTE sticky header disabled on android due to major performance issues -prf
-      stickyHeaderIndices={IS_ANDROID ? undefined : STICKY_HEADER_INDICES}
-      onScroll={onScroll}
-      onEndReached={onEndReached}
-      refreshControl={
-        <RefreshControl
-          refreshing={refreshing!}
-          onRefresh={onRefresh}
-          tintColor={pal.colors.text}
-        />
-      }
-      onEndReachedThreshold={0.6}
-      contentContainerStyle={s.contentContainer}
-      removeClippedSubviews={true}
-      scrollIndicatorInsets={{right: 1}} // fixes a bug where the scroll indicator is on the middle of the screen https://github.com/bluesky-social/social-app/pull/464
-    />
-  )
-})
-
-export function Selector({
-  selectedIndex,
-  items,
-  onSelect,
-}: {
-  selectedIndex: number
-  items: string[]
-  onSelect?: (index: number) => void
-}) {
-  const pal = usePalette('default')
-  const borderColor = useColorSchemeStyle(
-    {borderColor: colors.black},
-    {borderColor: colors.white},
-  )
-
-  const onPressItem = (index: number) => {
-    onSelect?.(index)
-  }
-
-  return (
-    <View
-      style={{
-        width: '100%',
-        backgroundColor: pal.colors.background,
-      }}>
-      <ScrollView
-        testID="selector"
-        horizontal
-        showsHorizontalScrollIndicator={false}>
-        <View style={[pal.view, styles.outer]}>
-          {items.map((item, i) => {
-            const selected = i === selectedIndex
-            return (
-              <Pressable
-                testID={`selector-${i}`}
-                key={item}
-                onPress={() => onPressItem(i)}
-                accessibilityLabel={item}
-                accessibilityHint={`Selects ${item}`}
-                // TODO: Modify the component API such that lint fails
-                // at the invocation site as well
-              >
-                <View
-                  style={[
-                    styles.item,
-                    selected && styles.itemSelected,
-                    borderColor,
-                  ]}>
-                  <Text
-                    style={
-                      selected
-                        ? [styles.labelSelected, pal.text]
-                        : [styles.label, pal.textLight]
-                    }>
-                    {item}
-                  </Text>
-                </View>
-              </Pressable>
-            )
-          })}
-        </View>
-      </ScrollView>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  outer: {
-    flexDirection: 'row',
-    paddingHorizontal: 14,
-  },
-  item: {
-    marginRight: 14,
-    paddingHorizontal: 10,
-    paddingTop: 8,
-    paddingBottom: 12,
-  },
-  itemSelected: {
-    borderBottomWidth: 3,
-  },
-  label: {
-    fontWeight: '600',
-  },
-  labelSelected: {
-    fontWeight: '600',
-  },
-  underline: {
-    position: 'absolute',
-    height: 4,
-    bottom: 0,
-  },
-})
diff --git a/src/view/screens/Debug.tsx b/src/view/screens/Debug.tsx
deleted file mode 100644
index 7e79b26ccd..0000000000
--- a/src/view/screens/Debug.tsx
+++ /dev/null
@@ -1,387 +0,0 @@
-import {useState} from 'react'
-import {ScrollView, View} from 'react-native'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {
-  type CommonNavigatorParams,
-  type NativeStackScreenProps,
-} from '#/lib/routes/types'
-import {s} from '#/lib/styles'
-import {type PaletteColorName, ThemeProvider} from '#/lib/ThemeContext'
-import {EmptyState} from '#/view/com/util/EmptyState'
-import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
-import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
-import {Button} from '#/view/com/util/forms/Button'
-import * as LoadingPlaceholder from '#/view/com/util/LoadingPlaceholder'
-import {Text} from '#/view/com/util/text/Text'
-import {ViewHeader} from '#/view/com/util/ViewHeader'
-import {ViewSelector} from '#/view/com/util/ViewSelector'
-import {HashtagWide_Stroke1_Corner0_Rounded as HashtagWideIcon} from '#/components/icons/Hashtag'
-import * as Layout from '#/components/Layout'
-import * as Toast from '#/components/Toast'
-
-const MAIN_VIEWS = ['Base', 'Controls', 'Error', 'Notifs']
-
-export const DebugScreen = ({}: NativeStackScreenProps<
-  CommonNavigatorParams,
-  'Debug'
->) => {
-  const [colorScheme, setColorScheme] = useState<'light' | 'dark'>('light')
-  const onToggleColorScheme = () => {
-    setColorScheme(colorScheme === 'light' ? 'dark' : 'light')
-  }
-  return (
-    <ThemeProvider theme={colorScheme}>
-      <Layout.Screen>
-        <DebugInner
-          colorScheme={colorScheme}
-          onToggleColorScheme={onToggleColorScheme}
-        />
-      </Layout.Screen>
-    </ThemeProvider>
-  )
-}
-
-function DebugInner({}: {
-  colorScheme: 'light' | 'dark'
-  onToggleColorScheme: () => void
-}) {
-  const [currentView, setCurrentView] = useState<number>(0)
-  const pal = usePalette('default')
-  const {_} = useLingui()
-
-  const renderItem = (item: any) => {
-    return (
-      <View key={`view-${item.currentView}`}>
-        {item.currentView === 3 ? (
-          <NotifsView />
-        ) : item.currentView === 2 ? (
-          <ErrorView />
-        ) : item.currentView === 1 ? (
-          <ControlsView />
-        ) : (
-          <BaseView />
-        )}
-      </View>
-    )
-  }
-
-  const items = [{currentView}]
-
-  return (
-    <View style={[s.hContentRegion, pal.view]}>
-      <ViewHeader title={_(msg`Debug panel`)} />
-      <ViewSelector
-        swipeEnabled
-        sections={MAIN_VIEWS}
-        items={items}
-        renderItem={renderItem}
-        onSelectView={setCurrentView}
-      />
-    </View>
-  )
-}
-
-function Heading({label}: {label: string}) {
-  const pal = usePalette('default')
-  return (
-    <View style={[s.pt10, s.pb5]}>
-      <Text type="title-lg" style={pal.text}>
-        {label}
-      </Text>
-    </View>
-  )
-}
-
-function BaseView() {
-  return (
-    <View style={[s.pl10, s.pr10]}>
-      <Heading label="Typography" />
-      <TypographyView />
-      <Heading label="Palettes" />
-      <PaletteView palette="default" />
-      <PaletteView palette="primary" />
-      <PaletteView palette="secondary" />
-      <PaletteView palette="inverted" />
-      <PaletteView palette="error" />
-      <Heading label="Empty state" />
-      <EmptyStateView />
-      <Heading label="Loading placeholders" />
-      <LoadingPlaceholderView />
-      <View style={s.footerSpacer} />
-    </View>
-  )
-}
-
-function ControlsView() {
-  return (
-    <ScrollView style={[s.pl10, s.pr10]}>
-      <Heading label="Buttons" />
-      <ButtonsView />
-      <View style={s.footerSpacer} />
-    </ScrollView>
-  )
-}
-
-function ErrorView() {
-  return (
-    <View style={s.p10}>
-      <View style={s.mb5}>
-        <ErrorScreen
-          title="Error screen"
-          message="A major error occurred that led the entire screen to fail"
-          details="Here are some details"
-          onPressTryAgain={() => {}}
-        />
-      </View>
-      <View style={s.mb5}>
-        <ErrorMessage message="This is an error that occurred while things were being done" />
-      </View>
-      <View style={s.mb5}>
-        <ErrorMessage
-          message="This is an error that occurred while things were being done"
-          numberOfLines={1}
-        />
-      </View>
-      <View style={s.mb5}>
-        <ErrorMessage
-          message="This is an error that occurred while things were being done"
-          onPressTryAgain={() => {}}
-        />
-      </View>
-      <View style={s.mb5}>
-        <ErrorMessage
-          message="This is an error that occurred while things were being done"
-          onPressTryAgain={() => {}}
-          numberOfLines={1}
-        />
-      </View>
-    </View>
-  )
-}
-
-function NotifsView() {
-  const triggerPush = () => {
-    // TODO: implement local notification for testing
-  }
-  const triggerToast = () => {
-    Toast.show('The task has been completed')
-  }
-  const triggerToast2 = () => {
-    Toast.show('The task has been completed successfully and with no problems')
-  }
-  return (
-    <View style={s.p10}>
-      <View style={s.flexRow}>
-        <Button onPress={triggerPush} label="Trigger Push" />
-        <Button onPress={triggerToast} label="Trigger Toast" />
-        <Button onPress={triggerToast2} label="Trigger Toast 2" />
-      </View>
-    </View>
-  )
-}
-
-function PaletteView({palette}: {palette: PaletteColorName}) {
-  const defaultPal = usePalette('default')
-  const pal = usePalette(palette)
-  return (
-    <View style={[pal.view, pal.border, s.p10, s.mb5, s.border1]}>
-      <Text style={[pal.text]}>{palette} colors</Text>
-      <Text style={[pal.textLight]}>Light text</Text>
-      <Text style={[pal.link]}>Link text</Text>
-      {palette !== 'default' && (
-        <View style={[defaultPal.view]}>
-          <Text style={[pal.textInverted]}>Inverted text</Text>
-        </View>
-      )}
-    </View>
-  )
-}
-
-function TypographyView() {
-  const pal = usePalette('default')
-  return (
-    <View style={[pal.view]}>
-      <Text type="2xl-thin" style={[pal.text]}>
-        '2xl-thin' lorem ipsum dolor
-      </Text>
-      <Text type="2xl" style={[pal.text]}>
-        '2xl' lorem ipsum dolor
-      </Text>
-      <Text type="2xl-medium" style={[pal.text]}>
-        '2xl-medium' lorem ipsum dolor
-      </Text>
-      <Text type="2xl-bold" style={[pal.text]}>
-        '2xl-bold' lorem ipsum dolor
-      </Text>
-      <Text type="2xl-heavy" style={[pal.text]}>
-        '2xl-heavy' lorem ipsum dolor
-      </Text>
-      <Text type="xl-thin" style={[pal.text]}>
-        'xl-thin' lorem ipsum dolor
-      </Text>
-      <Text type="xl" style={[pal.text]}>
-        'xl' lorem ipsum dolor
-      </Text>
-      <Text type="xl-medium" style={[pal.text]}>
-        'xl-medium' lorem ipsum dolor
-      </Text>
-      <Text type="xl-bold" style={[pal.text]}>
-        'xl-bold' lorem ipsum dolor
-      </Text>
-      <Text type="xl-heavy" style={[pal.text]}>
-        'xl-heavy' lorem ipsum dolor
-      </Text>
-      <Text type="lg-thin" style={[pal.text]}>
-        'lg-thin' lorem ipsum dolor
-      </Text>
-      <Text type="lg" style={[pal.text]}>
-        'lg' lorem ipsum dolor
-      </Text>
-      <Text type="lg-medium" style={[pal.text]}>
-        'lg-medium' lorem ipsum dolor
-      </Text>
-      <Text type="lg-bold" style={[pal.text]}>
-        'lg-bold' lorem ipsum dolor
-      </Text>
-      <Text type="lg-heavy" style={[pal.text]}>
-        'lg-heavy' lorem ipsum dolor
-      </Text>
-      <Text type="md-thin" style={[pal.text]}>
-        'md-thin' lorem ipsum dolor
-      </Text>
-      <Text type="md" style={[pal.text]}>
-        'md' lorem ipsum dolor
-      </Text>
-      <Text type="md-medium" style={[pal.text]}>
-        'md-medium' lorem ipsum dolor
-      </Text>
-      <Text type="md-bold" style={[pal.text]}>
-        'md-bold' lorem ipsum dolor
-      </Text>
-      <Text type="md-heavy" style={[pal.text]}>
-        'md-heavy' lorem ipsum dolor
-      </Text>
-      <Text type="sm-thin" style={[pal.text]}>
-        'sm-thin' lorem ipsum dolor
-      </Text>
-      <Text type="sm" style={[pal.text]}>
-        'sm' lorem ipsum dolor
-      </Text>
-      <Text type="sm-medium" style={[pal.text]}>
-        'sm-medium' lorem ipsum dolor
-      </Text>
-      <Text type="sm-bold" style={[pal.text]}>
-        'sm-bold' lorem ipsum dolor
-      </Text>
-      <Text type="sm-heavy" style={[pal.text]}>
-        'sm-heavy' lorem ipsum dolor
-      </Text>
-      <Text type="xs-thin" style={[pal.text]}>
-        'xs-thin' lorem ipsum dolor
-      </Text>
-      <Text type="xs" style={[pal.text]}>
-        'xs' lorem ipsum dolor
-      </Text>
-      <Text type="xs-medium" style={[pal.text]}>
-        'xs-medium' lorem ipsum dolor
-      </Text>
-      <Text type="xs-bold" style={[pal.text]}>
-        'xs-bold' lorem ipsum dolor
-      </Text>
-      <Text type="xs-heavy" style={[pal.text]}>
-        'xs-heavy' lorem ipsum dolor
-      </Text>
-
-      <Text type="title-2xl" style={[pal.text]}>
-        'title-2xl' lorem ipsum dolor
-      </Text>
-      <Text type="title-xl" style={[pal.text]}>
-        'title-xl' lorem ipsum dolor
-      </Text>
-      <Text type="title-lg" style={[pal.text]}>
-        'title-lg' lorem ipsum dolor
-      </Text>
-      <Text type="title" style={[pal.text]}>
-        'title' lorem ipsum dolor
-      </Text>
-      <Text type="button" style={[pal.text]}>
-        Button
-      </Text>
-      <Text type="button-lg" style={[pal.text]}>
-        Button-lg
-      </Text>
-    </View>
-  )
-}
-
-function EmptyStateView() {
-  const {_} = useLingui()
-
-  return (
-    <EmptyState
-      icon={HashtagWideIcon}
-      iconSize="2xl"
-      message={_(msg`This is an empty state`)}
-    />
-  )
-}
-
-function LoadingPlaceholderView() {
-  return (
-    <>
-      <LoadingPlaceholder.PostLoadingPlaceholder />
-      <LoadingPlaceholder.NotificationLoadingPlaceholder />
-    </>
-  )
-}
-
-function ButtonsView() {
-  const defaultPal = usePalette('default')
-  const buttonStyles = {marginRight: 5}
-  return (
-    <View style={[defaultPal.view]}>
-      <View style={[s.flexRow, s.mb5]}>
-        <Button type="primary" label="Primary solid" style={buttonStyles} />
-        <Button type="secondary" label="Secondary solid" style={buttonStyles} />
-      </View>
-      <View style={[s.flexRow, s.mb5]}>
-        <Button type="default" label="Default solid" style={buttonStyles} />
-        <Button type="inverted" label="Inverted solid" style={buttonStyles} />
-      </View>
-      <View style={s.flexRow}>
-        <Button
-          type="primary-outline"
-          label="Primary outline"
-          style={buttonStyles}
-        />
-        <Button
-          type="secondary-outline"
-          label="Secondary outline"
-          style={buttonStyles}
-        />
-      </View>
-      <View style={s.flexRow}>
-        <Button
-          type="primary-light"
-          label="Primary light"
-          style={buttonStyles}
-        />
-        <Button
-          type="secondary-light"
-          label="Secondary light"
-          style={buttonStyles}
-        />
-      </View>
-      <View style={s.flexRow}>
-        <Button
-          type="default-light"
-          label="Default light"
-          style={buttonStyles}
-        />
-      </View>
-    </View>
-  )
-}