clean

src/components/ListCard.tsx

@@ -1,11 +1,18 @@
 import React from 'react'
 import {View} from 'react-native'
-import {AppBskyActorDefs, AppBskyGraphDefs, AtUri} from '@atproto/api'
+import {
+  AppBskyActorDefs,
+  AppBskyGraphDefs,
+  AtUri,
+  moderateUserList,
+} from '@atproto/api'
 import {Trans} from '@lingui/macro'
 import {useQueryClient} from '@tanstack/react-query'
 
 import {sanitizeHandle} from 'lib/strings/handles'
+import {useModerationOpts} from 'state/preferences/moderation-opts'
 import {precacheList} from 'state/queries/feed'
+import {useSession} from 'state/session'
 import {useTheme} from '#/alf'
 import {atoms as a} from '#/alf'
 import {
@@ -43,6 +50,18 @@ type Props = {
 
 export function Default(props: Props) {
   const {view, showPinButton} = props
+  const {currentAccount} = useSession()
+  const moderationOpts = useModerationOpts()
+
+  const moderation = moderationOpts
+    ? moderateUserList(view, moderationOpts)
+    : undefined
+  const modUi = moderation?.ui('contentView')
+  const isBlurred = Boolean(modUi?.blurs[0])
+
+  const isOwner = currentAccount?.did === view.creator.did
+  const isTitleHidden = !isOwner && isBlurred
+
   return (
     <Link {...props}>
       <Outer>
@@ -52,6 +71,7 @@ export function Default(props: Props) {
             title={view.name}
             creator={view.creator}
             purpose={view.purpose}
+            isHidden={isTitleHidden}
           />
           {showPinButton && view.purpose === CURATELIST && (
             <SaveButton view={view} pin />
@@ -89,18 +109,31 @@ export function TitleAndByline({
   title,
   creator,
   purpose = CURATELIST,
+  isHidden,
 }: {
   title: string
   creator?: AppBskyActorDefs.ProfileViewBasic
   purpose?: AppBskyGraphDefs.ListView['purpose']
+  isHidden?: boolean
 }) {
   const t = useTheme()
 
   return (
     <View style={[a.flex_1]}>
-      <Text style={[a.text_md, a.font_bold, a.leading_snug]} numberOfLines={1}>
+      {isHidden ? (
-        {title}
+        <Text
-      </Text>
+          style={[a.text_md, a.font_bold, a.leading_snug, a.italic]}
+          numberOfLines={1}>
+          <Trans>Hidden list</Trans>
+        </Text>
+      ) : (
+        <Text
+          style={[a.text_md, a.font_bold, a.leading_snug]}
+          numberOfLines={1}>
+          {title}
+        </Text>
+      )}
+
       {creator && (
         <Text
           style={[a.leading_snug, t.atoms.text_contrast_medium]}

src/view/com/lists/ListCard.tsx

@@ -1,200 +0,0 @@
-import React from 'react'
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
-import {AppBskyGraphDefs, AtUri, ModerationOpts, RichText} from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {useSession} from '#/state/session'
-import {usePalette} from 'lib/hooks/usePalette'
-import {makeProfileLink} from 'lib/routes/links'
-import {sanitizeDisplayName} from 'lib/strings/display-names'
-import {sanitizeHandle} from 'lib/strings/handles'
-import {s} from 'lib/styles'
-import {atoms as a} from '#/alf'
-import {RichText as RichTextCom} from '#/components/RichText'
-import {Link} from '../util/Link'
-import {Text} from '../util/text/Text'
-import {UserAvatar} from '../util/UserAvatar'
-import * as Hider from '#/components/moderation/Hider'
-import {useModerationOpts} from 'state/preferences/moderation-opts'
-
-export const ListCard = ({
-  testID,
-  list,
-  noBg,
-  noBorder,
-  renderButton,
-  style,
-  moderationOpts,
-}: {
-  testID?: string
-  list: AppBskyGraphDefs.ListView
-  noBg?: boolean
-  noBorder?: boolean
-  renderButton?: () => JSX.Element
-  style?: StyleProp<ViewStyle>
-  moderationOpts: ModerationOpts
-}) => {
-  const {_} = useLingui()
-  const pal = usePalette('default')
-  const {currentAccount} = useSession()
-
-  const isOwner = currentAccount?.did === list.creator.did
-  const isListHidden = list.labels?.findIndex(l => l.val === '!hide') !== -1
-  const hideTitle = !isOwner && isListHidden
-
-  const isModList = list.purpose === 'app.bsky.graph.defs#modlist'
-  const creatorHandle = sanitizeHandle(list.creator.handle, '@')
-
-  const moderation = moderationOpts.
-
-  const rkey = React.useMemo(() => {
-    try {
-      const urip = new AtUri(list.uri)
-      return urip.rkey
-    } catch {
-      return ''
-    }
-  }, [list])
-
-  const descriptionRichText = React.useMemo(() => {
-    if (list.description) {
-      return new RichText({
-        text: list.description,
-        facets: list.descriptionFacets,
-      })
-    }
-    return undefined
-  }, [list])
-
-  return (
-    <Hider.Outer modui={moderation.modUi('content')}>
-
-    </Hider.Outer>
-    <Link
-      testID={testID}
-      style={[
-        styles.outer,
-        pal.border,
-        noBorder && styles.outerNoBorder,
-        !noBg && pal.view,
-        style,
-      ]}
-      href={makeProfileLink(list.creator, 'lists', rkey)}
-      title={hideTitle ? _(msg`Hidden list`) : list.name}
-      asAnchor
-      anchorNoUnderline>
-      <View style={styles.layout}>
-        <View style={styles.layoutAvi}>
-          <UserAvatar type="list" size={40} avatar={list.avatar} />
-        </View>
-        <View style={styles.layoutContent}>
-          <Text
-            type="lg"
-            style={[s.bold, pal.text, hideTitle && {fontStyle: 'italic'}]}
-            numberOfLines={1}
-            lineHeight={1.2}>
-            {hideTitle ? _(msg`Hidden list`) : sanitizeDisplayName(list.name)}
-          </Text>
-          <Text type="md" style={[pal.textLight]} numberOfLines={1}>
-            {isOwner ? (
-              isModList ? (
-                <Trans>Moderation list by you</Trans>
-              ) : (
-                <Trans>User list by you</Trans>
-              )
-            ) : isModList ? (
-              <Trans>Moderation list by {creatorHandle}</Trans>
-            ) : (
-              <Trans>User list by {creatorHandle}</Trans>
-            )}
-          </Text>
-          <View style={s.flexRow}>
-            {list.viewer?.muted ? (
-              <PillText>
-                <Trans>Muted</Trans>
-              </PillText>
-            ) : null}
-            {list.viewer?.blocked ? (
-              <PillText>
-                <Trans>Blocked</Trans>
-              </PillText>
-            ) : null}
-          </View>
-        </View>
-        {renderButton ? (
-          <View style={styles.layoutButton}>{renderButton()}</View>
-        ) : undefined}
-      </View>
-      {descriptionRichText ? (
-        <View style={styles.details}>
-          <RichTextCom
-            style={[a.flex_1]}
-            numberOfLines={20}
-            value={descriptionRichText}
-          />
-        </View>
-      ) : undefined}
-    </Link>
-  )
-}
-
-function PillText({children}: {children: React.ReactNode}) {
-  const pal = usePalette('default')
-  return (
-    <Text type="xs" style={[s.mt5, pal.btn, styles.pill, pal.text]}>
-      {children}
-    </Text>
-  )
-}
-
-const styles = StyleSheet.create({
-  outer: {
-    borderTopWidth: StyleSheet.hairlineWidth,
-    paddingHorizontal: 6,
-  },
-  outerNoBorder: {
-    borderTopWidth: 0,
-  },
-  layout: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  layoutAvi: {
-    width: 54,
-    paddingLeft: 4,
-    paddingTop: 8,
-    paddingBottom: 10,
-  },
-  avi: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    resizeMode: 'cover',
-  },
-  layoutContent: {
-    flex: 1,
-    paddingRight: 10,
-    paddingTop: 10,
-    paddingBottom: 10,
-  },
-  layoutButton: {
-    paddingRight: 10,
-  },
-  details: {
-    paddingLeft: 54,
-    paddingRight: 10,
-    paddingBottom: 10,
-  },
-  pill: {
-    borderRadius: 4,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-  },
-  btn: {
-    paddingVertical: 7,
-    borderRadius: 50,
-    marginLeft: 6,
-    paddingHorizontal: 14,
-  },
-})

src/view/com/lists/MyLists.tsx

@@ -4,7 +4,6 @@ import {
   FlatList as RNFlatList,
   RefreshControl,
   StyleProp,
-  StyleSheet,
   View,
   ViewStyle,
 } from 'react-native'
@@ -18,11 +17,13 @@ import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
+import {isWeb} from 'platform/detection'
 import {useModerationOpts} from 'state/preferences/moderation-opts'
 import {EmptyState} from 'view/com/util/EmptyState'
+import {atoms as a, useTheme} from '#/alf'
+import * as ListCard from '#/components/ListCard'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {List} from '../util/List'
-import {ListCard} from './ListCard'
 
 const LOADING = {_reactKey: '__loading__'}
 const EMPTY = {_reactKey: '__empty__'}
@@ -42,6 +43,7 @@ export function MyLists({
   testID?: string
 }) {
   const pal = usePalette('default')
+  const t = useTheme()
   const {track} = useAnalytics()
   const {_} = useLingui()
   const moderationOpts = useModerationOpts()
@@ -87,7 +89,6 @@ export function MyLists({
       if (item === EMPTY) {
         return (
           <EmptyState
-            key={item._reactKey}
             icon="list-ul"
             message={_(msg`You have no lists.`)}
             testID="listsEmpty"
@@ -96,14 +97,13 @@ export function MyLists({
       } else if (item === ERROR_ITEM) {
         return (
           <ErrorMessage
-            key={item._reactKey}
             message={cleanError(error)}
             onPressTryAgain={onRefresh}
           />
         )
       } else if (item === LOADING) {
         return (
-          <View key={item._reactKey} style={{padding: 20}}>
+          <View style={{padding: 20}}>
             <ActivityIndicator />
           </View>
         )
@@ -111,18 +111,18 @@ export function MyLists({
       return renderItem ? (
         renderItem(item, index)
       ) : (
-        <ListCard
+        <View
-          key={item.uri}
+          style={[
-          list={item}
+            (index !== 0 || isWeb) && a.border_t,
-          testID={`list-${item.name}`}
+            t.atoms.border_contrast_low,
-          style={styles.item}
+            a.px_lg,
-          // If this component is being rendered, it means that `moderationOpts` is not undefined. Not going to refactor
+            a.py_lg,
-          // this for now since it might not be around forever. -h
+          ]}>
-          moderationOpts={moderationOpts!}
+          <ListCard.Default view={item} />
-        />
+        </View>
       )
     },
-    [error, onRefresh, renderItem, moderationOpts, _],
+    [renderItem, t.atoms.border_contrast_low, _, error, onRefresh],
   )
 
   if (inline) {
@@ -171,10 +171,3 @@ export function MyLists({
     )
   }
 }
-
-const styles = StyleSheet.create({
-  item: {
-    paddingHorizontal: 18,
-    paddingVertical: 4,
-  },
-})

src/view/com/util/post-embeds/ListEmbed.tsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
-import {usePalette} from 'lib/hooks/usePalette'
-import {ListCard} from 'view/com/lists/ListCard'
-import {AppBskyGraphDefs} from '@atproto/api'
-import {s} from 'lib/styles'
-
-export function ListEmbed({
-  item,
-  style,
-}: {
-  item: AppBskyGraphDefs.ListView
-  style?: StyleProp<ViewStyle>
-}) {
-  const pal = usePalette('default')
-
-  return (
-    <View style={[pal.view, pal.border, s.border1, styles.container]}>
-      <ListCard list={item} style={[style, styles.card]} />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 8,
-  },
-  card: {
-    borderTopWidth: 0,
-    borderRadius: 8,
-  },
-})

src/view/com/util/post-embeds/index.tsx

@@ -25,13 +25,13 @@ import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {usePalette} from 'lib/hooks/usePalette'
 import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
+import * as ListCard from '#/components/ListCard'
 import {Embed as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
 import {ContentHider} from '../../../../components/moderation/ContentHider'
 import {AutoSizedImage} from '../images/AutoSizedImage'
 import {ImageLayoutGrid} from '../images/ImageLayoutGrid'
 import {ExternalLinkEmbed} from './ExternalLinkEmbed'
-import {ListEmbed} from './ListEmbed'
 import {MaybeQuoteEmbed} from './QuoteEmbed'
 
 type Embed =
@@ -203,10 +203,19 @@ function MaybeListCard({view}: {view: AppBskyGraphDefs.ListView}) {
   const moderation = React.useMemo(() => {
     return moderationOpts ? moderateUserList(view, moderationOpts) : undefined
   }, [view, moderationOpts])
+  const t = useTheme()
 
   return (
     <ContentHider modui={moderation?.ui('contentList')}>
-      <ListEmbed item={view} />
+      <View
+        style={[
+          a.border,
+          t.atoms.border_contrast_medium,
+          a.p_md,
+          a.rounded_sm,
+        ]}>
+        <ListCard.Default view={view} />
+      </View>
     </ContentHider>
   )
 }