about summary refs log tree commit diff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/ThemeContext.tsx10
-rw-r--r--src/lib/hooks/usePalette.ts12
-rw-r--r--src/lib/styles.ts15
-rw-r--r--src/screens/Messages/ChatList.tsx58
-rw-r--r--src/screens/Messages/components/InboxPreview.tsx6
-rw-r--r--src/state/modals/index.tsx9
-rw-r--r--src/view/com/util/Link.tsx9
-rw-r--r--src/view/com/util/ViewHeader.tsx2
-rw-r--r--src/view/com/util/forms/Button.tsx18
-rw-r--r--src/view/com/util/forms/DropdownButton.tsx19
-rw-r--r--src/view/com/util/forms/NativeDropdown.tsx38
-rw-r--r--src/view/com/util/forms/NativeDropdown.web.tsx3
-rw-r--r--src/view/com/util/forms/ToggleButton.tsx15
-rw-r--r--src/view/com/util/text/Text.tsx8
14 files changed, 153 insertions, 69 deletions
diff --git a/src/lib/ThemeContext.tsx b/src/lib/ThemeContext.tsx
index e4cebfcb2..c00d26606 100644
--- a/src/lib/ThemeContext.tsx
+++ b/src/lib/ThemeContext.tsx
@@ -1,7 +1,8 @@
-import React, {createContext, ReactNode, useContext} from 'react'
-import {TextStyle, ViewStyle} from 'react-native'
+import {type ReactNode} from 'react'
+import {createContext, useContext} from 'react'
+import {type TextStyle, type ViewStyle} from 'react-native'
 
-import {ThemeName} from '#/alf/types'
+import {type ThemeName} from '#/alf/types'
 import {darkTheme, defaultTheme, dimTheme} from './themes'
 
 export type ColorScheme = 'light' | 'dark'
@@ -29,6 +30,9 @@ export type Palette = Record<PaletteColorName, PaletteColor>
 export type ShapeName = 'button' | 'bigButton' | 'smallButton'
 export type Shapes = Record<ShapeName, ViewStyle>
 
+/**
+ * @deprecated use typography atoms from `#/alf`
+ */
 export type TypographyVariant =
   | '2xl-thin'
   | '2xl'
diff --git a/src/lib/hooks/usePalette.ts b/src/lib/hooks/usePalette.ts
index 2530642f6..db226fba6 100644
--- a/src/lib/hooks/usePalette.ts
+++ b/src/lib/hooks/usePalette.ts
@@ -1,7 +1,11 @@
 import {useMemo} from 'react'
-import {TextStyle, ViewStyle} from 'react-native'
+import {type TextStyle, type ViewStyle} from 'react-native'
 
-import {PaletteColor, PaletteColorName, useTheme} from '../ThemeContext'
+import {
+  type PaletteColor,
+  type PaletteColorName,
+  useTheme,
+} from '../ThemeContext'
 
 export interface UsePaletteValue {
   colors: PaletteColor
@@ -16,6 +20,10 @@ export interface UsePaletteValue {
   link: TextStyle
   icon: TextStyle
 }
+
+/**
+ * @deprecated use `useTheme` from `#/alf`
+ */
 export function usePalette(color: PaletteColorName): UsePaletteValue {
   const theme = useTheme()
   return useMemo(() => {
diff --git a/src/lib/styles.ts b/src/lib/styles.ts
index 55fb1a844..13b8c2bf3 100644
--- a/src/lib/styles.ts
+++ b/src/lib/styles.ts
@@ -1,9 +1,17 @@
-import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native'
+import {
+  Dimensions,
+  type StyleProp,
+  StyleSheet,
+  type TextStyle,
+} from 'react-native'
 
 import {isWeb} from '#/platform/detection'
-import {Theme, TypographyVariant} from './ThemeContext'
+import {type Theme, type TypographyVariant} from './ThemeContext'
 
 // 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
+/**
+ * @deprecated use ALF colors instead
+ */
 export const colors = {
   white: '#ffffff',
   black: '#000000',
@@ -63,6 +71,9 @@ export const gradients = {
   blueDark: {start: '#5F45E0', end: colors.blue3}, // avis, banner
 }
 
+/**
+ * @deprecated use atoms from `#/alf`
+ */
 export const s = StyleSheet.create({
   // helpers
   footerSpacer: {height: 100},
diff --git a/src/screens/Messages/ChatList.tsx b/src/screens/Messages/ChatList.tsx
index c37a025cc..345446464 100644
--- a/src/screens/Messages/ChatList.tsx
+++ b/src/screens/Messages/ChatList.tsx
@@ -55,7 +55,7 @@ type ListItem =
 function renderItem({item}: {item: ListItem}) {
   switch (item.type) {
     case 'INBOX':
-      return <InboxPreview count={item.count} profiles={item.profiles} />
+      return <InboxPreview profiles={item.profiles} />
     case 'CONVERSATION':
       return <ChatListItem convo={item.conversation} />
   }
@@ -140,22 +140,24 @@ export function MessagesScreenInner({navigation, route}: Props) {
 
   const leftConvos = useLeftConvos()
 
-  const inboxPreviewConvos = useMemo(() => {
-    const inbox =
-      inboxData?.pages
-        .flatMap(page => page.convos)
-        .filter(
-          convo =>
-            !leftConvos.includes(convo.id) &&
-            !convo.muted &&
-            convo.unreadCount > 0 &&
-            convo.members.every(member => member.handle !== 'missing.invalid'),
-        ) ?? []
-
-    return inbox
-      .map(x => x.members.find(y => y.did !== currentAccount?.did))
-      .filter(x => !!x)
-  }, [inboxData, leftConvos, currentAccount?.did])
+  const inboxAllConvos =
+    inboxData?.pages
+      .flatMap(page => page.convos)
+      .filter(
+        convo =>
+          !leftConvos.includes(convo.id) &&
+          !convo.muted &&
+          convo.members.every(member => member.handle !== 'missing.invalid'),
+      ) ?? []
+  const hasInboxConvos = inboxAllConvos?.length > 0
+
+  const inboxUnreadConvos = inboxAllConvos.filter(
+    convo => convo.unreadCount > 0,
+  )
+
+  const inboxUnreadConvoMembers = inboxUnreadConvos
+    .map(x => x.members.find(y => y.did !== currentAccount?.did))
+    .filter(x => !!x)
 
   const conversations = useMemo(() => {
     if (data?.pages) {
@@ -164,15 +166,13 @@ export function MessagesScreenInner({navigation, route}: Props) {
         // filter out convos that are actively being left
         .filter(convo => !leftConvos.includes(convo.id))
 
-      const hasInboxRequests = inboxPreviewConvos?.length > 0
-
       return [
-        ...(hasInboxRequests
+        ...(hasInboxConvos
           ? [
               {
                 type: 'INBOX' as const,
-                count: inboxPreviewConvos.length,
-                profiles: inboxPreviewConvos.slice(0, 3),
+                count: inboxUnreadConvoMembers.length,
+                profiles: inboxUnreadConvoMembers.slice(0, 3),
               },
             ]
           : []),
@@ -182,7 +182,7 @@ export function MessagesScreenInner({navigation, route}: Props) {
       ] satisfies ListItem[]
     }
     return []
-  }, [data, leftConvos, inboxPreviewConvos])
+  }, [data, leftConvos, hasInboxConvos, inboxUnreadConvoMembers])
 
   const onRefresh = useCallback(async () => {
     setIsPTRing(true)
@@ -231,21 +231,17 @@ export function MessagesScreenInner({navigation, route}: Props) {
 
   // NOTE(APiligrim)
   // Show empty state only if there are no conversations at all
-  const actualConversations = conversations.filter(
+  const activeConversations = conversations.filter(
     item => item.type === 'CONVERSATION',
   )
-  const hasInboxRequests = inboxPreviewConvos?.length > 0
 
-  if (actualConversations.length === 0) {
+  if (activeConversations.length === 0) {
     return (
       <Layout.Screen>
         <Header newChatControl={newChatControl} />
         <Layout.Center>
-          {hasInboxRequests && (
-            <InboxPreview
-              count={inboxPreviewConvos.length}
-              profiles={inboxPreviewConvos}
-            />
+          {!isLoading && hasInboxConvos && (
+            <InboxPreview profiles={inboxUnreadConvoMembers} />
           )}
           {isLoading ? (
             <ChatListLoadingPlaceholder />
diff --git a/src/screens/Messages/components/InboxPreview.tsx b/src/screens/Messages/components/InboxPreview.tsx
index fe2803522..6e1b02822 100644
--- a/src/screens/Messages/components/InboxPreview.tsx
+++ b/src/screens/Messages/components/InboxPreview.tsx
@@ -1,5 +1,5 @@
 import {View} from 'react-native'
-import {ChatBskyActorDefs} from '@atproto/api'
+import {type ChatBskyActorDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -12,10 +12,8 @@ import {Link} from '#/components/Link'
 
 export function InboxPreview({
   profiles,
-}: // count,
-{
+}: {
   profiles: ChatBskyActorDefs.ProfileViewBasic[]
-  count: number
 }) {
   const {_} = useLingui()
   const t = useTheme()
diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx
index a2cc63745..7b6f5d7b3 100644
--- a/src/state/modals/index.tsx
+++ b/src/state/modals/index.tsx
@@ -43,6 +43,9 @@ export interface ChangePasswordModal {
   name: 'change-password'
 }
 
+/**
+ * @deprecated DO NOT ADD NEW MODALS
+ */
 export type Modal =
   // Account
   | DeleteAccountModal
@@ -125,10 +128,16 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   )
 }
 
+/**
+ * @deprecated use the dialog system from `#/components/Dialog.tsx`
+ */
 export function useModals() {
   return React.useContext(ModalContext)
 }
 
+/**
+ * @deprecated use the dialog system from `#/components/Dialog.tsx`
+ */
 export function useModalControls() {
   return React.useContext(ModalControlContext)
 }
diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx
index 496b77182..33f9b41d8 100644
--- a/src/view/com/util/Link.tsx
+++ b/src/view/com/util/Link.tsx
@@ -56,6 +56,9 @@ interface Props extends React.ComponentProps<typeof TouchableOpacity> {
   onBeforePress?: () => void
 }
 
+/**
+ * @deprecated use Link from `#/components/Link.tsx` instead
+ */
 export const Link = memo(function Link({
   testID,
   style,
@@ -156,6 +159,9 @@ export const Link = memo(function Link({
   )
 })
 
+/**
+ * @deprecated use InlineLinkText from `#/components/Link.tsx` instead
+ */
 export const TextLink = memo(function TextLink({
   testID,
   type = 'md',
@@ -301,6 +307,9 @@ interface TextLinkOnWebOnlyProps extends TextProps {
   onPointerEnter?: () => void
   anchorNoUnderline?: boolean
 }
+/**
+ * @deprecated use WebOnlyInlineLinkText from `#/components/Link.tsx` instead
+ */
 export const TextLinkOnWebOnly = memo(function DesktopWebTextLink({
   testID,
   type = 'md',
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index 2d413f782..999ce52bd 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -3,7 +3,7 @@ import {Header} from '#/components/Layout'
 /**
  * Legacy ViewHeader component. Use Layout.Header going forward.
  *
- * @deprecated
+ * @deprecated use `Layout.Header` from `#/components/Layout.tsx`
  */
 export function ViewHeader({
   title,
diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx
index 96b49a003..24d478fe5 100644
--- a/src/view/com/util/forms/Button.tsx
+++ b/src/view/com/util/forms/Button.tsx
@@ -1,16 +1,16 @@
 import React from 'react'
 import {
   ActivityIndicator,
-  GestureResponderEvent,
-  NativeSyntheticEvent,
-  NativeTouchEvent,
+  type GestureResponderEvent,
+  type NativeSyntheticEvent,
+  type NativeTouchEvent,
   Pressable,
-  PressableStateCallbackType,
-  StyleProp,
+  type PressableStateCallbackType,
+  type StyleProp,
   StyleSheet,
-  TextStyle,
+  type TextStyle,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native'
 
 import {choose} from '#/lib/functions'
@@ -37,7 +37,9 @@ declare module 'react-native' {
   }
 }
 
-// TODO: Enforce that button always has a label
+/**
+ * @deprecated use Button from `#/components/Button.tsx` instead
+ */
 export function Button({
   type = 'primary',
   label,
diff --git a/src/view/com/util/forms/DropdownButton.tsx b/src/view/com/util/forms/DropdownButton.tsx
index a061edf2e..e20dadb49 100644
--- a/src/view/com/util/forms/DropdownButton.tsx
+++ b/src/view/com/util/forms/DropdownButton.tsx
@@ -1,22 +1,24 @@
-import React, {PropsWithChildren, useMemo, useRef} from 'react'
+import {type PropsWithChildren} from 'react'
+import {useMemo, useRef} from 'react'
 import {
   Dimensions,
-  GestureResponderEvent,
-  Insets,
-  StyleProp,
+  type GestureResponderEvent,
+  type Insets,
+  type StyleProp,
   StyleSheet,
   TouchableOpacity,
   TouchableWithoutFeedback,
   useWindowDimensions,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native'
 import Animated, {FadeIn, FadeInDown, FadeInUp} from 'react-native-reanimated'
 import RootSiblings from 'react-native-root-siblings'
-import {IconProp} from '@fortawesome/fontawesome-svg-core'
+import {type IconProp} from '@fortawesome/fontawesome-svg-core'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import type React from 'react'
 
 import {HITSLOP_10} from '#/lib/constants'
 import {usePalette} from '#/lib/hooks/usePalette'
@@ -26,7 +28,7 @@ import {isWeb} from '#/platform/detection'
 import {native} from '#/alf'
 import {FullWindowOverlay} from '#/components/FullWindowOverlay'
 import {Text} from '../text/Text'
-import {Button, ButtonType} from './Button'
+import {Button, type ButtonType} from './Button'
 
 const ESTIMATED_BTN_HEIGHT = 50
 const ESTIMATED_SEP_HEIGHT = 16
@@ -70,6 +72,9 @@ interface DropdownButtonProps {
   accessibilityHint?: string
 }
 
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export function DropdownButton({
   testID,
   type = 'bare',
diff --git a/src/view/com/util/forms/NativeDropdown.tsx b/src/view/com/util/forms/NativeDropdown.tsx
index 8fc9be6da..5e2089d29 100644
--- a/src/view/com/util/forms/NativeDropdown.tsx
+++ b/src/view/com/util/forms/NativeDropdown.tsx
@@ -1,9 +1,15 @@
 import React from 'react'
-import {Platform, Pressable, StyleSheet, View, ViewStyle} from 'react-native'
-import {IconProp} from '@fortawesome/fontawesome-svg-core'
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native'
+import {type IconProp} from '@fortawesome/fontawesome-svg-core'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import * as DropdownMenu from 'zeego/dropdown-menu'
-import {MenuItemCommonProps} from 'zeego/lib/typescript/menu'
+import {type MenuItemCommonProps} from 'zeego/lib/typescript/menu'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useTheme} from '#/lib/ThemeContext'
@@ -12,8 +18,14 @@ import {Portal} from '#/components/Portal'
 
 // Custom Dropdown Menu Components
 // ==
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export const DropdownMenuRoot = DropdownMenu.Root
 // export const DropdownMenuTrigger = DropdownMenu.Trigger
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export const DropdownMenuContent = DropdownMenu.Content
 
 type TriggerProps = Omit<
@@ -25,6 +37,9 @@ type TriggerProps = Omit<
     accessibilityLabel?: string
     accessibilityHint?: string
   }>
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export const DropdownMenuTrigger = DropdownMenu.create(
   (props: TriggerProps) => {
     const theme = useTheme()
@@ -59,6 +74,9 @@ export const DropdownMenuTrigger = DropdownMenu.create(
 )
 
 type ItemProps = React.ComponentProps<(typeof DropdownMenu)['Item']>
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export const DropdownMenuItem = DropdownMenu.create(
   (props: ItemProps & {testID?: string}) => {
     const theme = useTheme()
@@ -84,6 +102,9 @@ export const DropdownMenuItem = DropdownMenu.create(
 )
 
 type TitleProps = React.ComponentProps<(typeof DropdownMenu)['ItemTitle']>
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export const DropdownMenuItemTitle = DropdownMenu.create(
   (props: TitleProps) => {
     const pal = usePalette('default')
@@ -98,11 +119,17 @@ export const DropdownMenuItemTitle = DropdownMenu.create(
 )
 
 type IconProps = React.ComponentProps<(typeof DropdownMenu)['ItemIcon']>
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export const DropdownMenuItemIcon = DropdownMenu.create((props: IconProps) => {
   return <DropdownMenu.ItemIcon {...props} />
 }, 'ItemIcon')
 
 type SeparatorProps = React.ComponentProps<(typeof DropdownMenu)['Separator']>
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export const DropdownMenuSeparator = DropdownMenu.create(
   (props: SeparatorProps) => {
     const pal = usePalette('default')
@@ -142,11 +169,14 @@ type Props = {
   triggerStyle?: ViewStyle
 }
 
-/* The `NativeDropdown` function uses native iOS and Android dropdown menus.
+/**
+ * The `NativeDropdown` function uses native iOS and Android dropdown menus.
  * It also creates a animated custom dropdown for web that uses
  * Radix UI primitives under the hood
  * @prop {DropdownItem[]} items - An array of dropdown items
  * @prop {React.ReactNode} children - A custom dropdown trigger
+ *
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
  */
 export function NativeDropdown({
   items,
diff --git a/src/view/com/util/forms/NativeDropdown.web.tsx b/src/view/com/util/forms/NativeDropdown.web.tsx
index cab7bac51..37df48da3 100644
--- a/src/view/com/util/forms/NativeDropdown.web.tsx
+++ b/src/view/com/util/forms/NativeDropdown.web.tsx
@@ -63,6 +63,9 @@ type Props = {
   triggerStyle?: ViewStyle
 }
 
+/**
+ * @deprecated use Menu from `#/components/Menu.tsx` instead
+ */
 export function NativeDropdown({
   items,
   children,
diff --git a/src/view/com/util/forms/ToggleButton.tsx b/src/view/com/util/forms/ToggleButton.tsx
index 31222aafe..ca9d9fb49 100644
--- a/src/view/com/util/forms/ToggleButton.tsx
+++ b/src/view/com/util/forms/ToggleButton.tsx
@@ -1,12 +1,21 @@
-import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
+import {
+  type StyleProp,
+  StyleSheet,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native'
 
 import {choose} from '#/lib/functions'
 import {colors} from '#/lib/styles'
 import {useTheme} from '#/lib/ThemeContext'
-import {TypographyVariant} from '#/lib/ThemeContext'
+import {type TypographyVariant} from '#/lib/ThemeContext'
 import {Text} from '../text/Text'
-import {Button, ButtonType} from './Button'
+import {Button, type ButtonType} from './Button'
 
+/**
+ * @deprecated use Toggle from `#/components/form/Toggle.tsx` instead
+ */
 export function ToggleButton({
   testID,
   type = 'default-light',
diff --git a/src/view/com/util/text/Text.tsx b/src/view/com/util/text/Text.tsx
index 785cef09a..1e49605f4 100644
--- a/src/view/com/util/text/Text.tsx
+++ b/src/view/com/util/text/Text.tsx
@@ -1,16 +1,16 @@
 import React from 'react'
-import {StyleSheet, TextProps} from 'react-native'
+import {StyleSheet, type TextProps} from 'react-native'
 import {UITextView} from 'react-native-uitextview'
 
 import {lh, s} from '#/lib/styles'
-import {TypographyVariant, useTheme} from '#/lib/ThemeContext'
+import {type TypographyVariant, useTheme} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
 import {isIOS, isWeb} from '#/platform/detection'
 import {applyFonts, useAlf} from '#/alf'
 import {
   childHasEmoji,
   renderChildrenWithEmoji,
-  StringChild,
+  type StringChild,
 } from '#/alf/typography'
 
 export type CustomTextProps = Omit<TextProps, 'children'> & {
@@ -32,7 +32,7 @@ export type CustomTextProps = Omit<TextProps, 'children'> & {
 
 export {Text_DEPRECATED as Text}
 /**
- * @deprecated use Text from Typography instead.
+ * @deprecated use Text from `#/components/Typography.tsx` instead
  */
 function Text_DEPRECATED({
   type = 'md',
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-12 09:31:08 +0000