[Mobile] Change read item design, stop muting views

Author: brunolemos

packages/components/src/components/cards/BaseCard.shared.ts

@@ -1,4 +1,5 @@
 import {
+  AppViewMode,
   cheapestPlanWithNotifications,
   Column,
   ColumnSubscription,
@@ -100,7 +101,13 @@ export const sizes = {
 export const renderCardActions =
   Platform.OS === 'web' || constants.DISABLE_SWIPEABLE_CARDS
 
-export interface BaseCardProps {
+export interface AdditionalCardProps {
+  appViewMode: AppViewMode
+  columnId: string
+  height: number
+}
+
+export interface BaseCardProps extends AdditionalCardProps {
   action?: {
     avatar: {
       imageURL: string
@@ -118,7 +125,6 @@ export interface BaseCardProps {
     repoId?: number | string | undefined
     text?: string
   }
-  height: number
   icon: {
     name: GitHubIcon
     color?: keyof ThemeColors
@@ -192,7 +198,7 @@ function getPrivateBannerCardProps(
   props: Pick<BaseCardProps, 'avatar' | 'date'> & {
     iconColor: BaseCardProps['icon']['color']
   },
-): Omit<BaseCardProps, 'height'> {
+): Omit<BaseCardProps, keyof AdditionalCardProps> {
   const highlightFeature: keyof Plan['featureFlags'] =
     'enablePrivateRepositories'
 
@@ -247,7 +253,7 @@ function _getCardPropsForItem(
     plan: UserPlan | null | undefined
     repoIsKnown: boolean
   },
-): Omit<BaseCardProps, 'height'> {
+): Omit<BaseCardProps, keyof AdditionalCardProps> {
   switch (type) {
     case 'activity': {
       const event = item as EnhancedGitHubEvent
@@ -928,7 +934,7 @@ function _getCardPropsForItem(
 
       const reasonMetadata = getNotificationReasonMetadata(notification.reason)
 
-      const defaultProps: Omit<BaseCardProps, 'height'> = {
+      const defaultProps: Omit<BaseCardProps, keyof AdditionalCardProps> = {
         action: undefined,
         avatar: {
           imageURL:
@@ -1160,7 +1166,8 @@ export function getCardPropsForItem(
     plan: UserPlan | null | undefined
     repoIsKnown: boolean
   },
-): BaseCardProps {
+): Omit<BaseCardProps, keyof AdditionalCardProps> &
+  Pick<AdditionalCardProps, 'height'> {
   const props = _memoizedGetCardPropsForItem(
     type,
     columnId,
@@ -1173,7 +1180,7 @@ export function getCardPropsForItem(
 }
 
 export function getCardSizeForProps(
-  props: Omit<BaseCardProps, 'height'>,
+  props: Omit<BaseCardProps, keyof AdditionalCardProps>,
 ): number {
   if (!props) return 0
 

packages/components/src/components/cards/BaseCard.tsx

@@ -1,5 +1,5 @@
 import { getDateSmallText, getFullDateText, Theme } from '@devhub/core'
-import React, { Fragment, useContext } from 'react'
+import React, { Fragment } from 'react'
 import { PixelRatio, ScrollView, StyleSheet, Text, View } from 'react-native'
 import { useDispatch } from 'react-redux'
 
@@ -17,7 +17,6 @@ import {
 import { stripEmojis } from '../../utils/helpers/github/emojis'
 import { vibrateHapticFeedback } from '../../utils/helpers/shared'
 import { KeyboardKeyIsPressed } from '../AppKeyboardShortcuts'
-import { CurrentColumnContext } from '../columns/Column'
 import { getCardBackgroundThemeColor } from '../columns/ColumnRenderer'
 import { Avatar } from '../common/Avatar'
 import { IntervalRefresh } from '../common/IntervalRefresh'
@@ -193,10 +192,13 @@ const styles = StyleSheet.create({
 export const BaseCard = React.memo((props: BaseCardProps) => {
   const {
     action,
+    appViewMode,
+    height,
+
     avatar,
+    columnId,
     date,
     githubApp,
-    height,
     icon,
     isRead,
     isSaved,
@@ -223,14 +225,15 @@ export const BaseCard = React.memo((props: BaseCardProps) => {
       link,
     )
 
+  const isMuted = appViewMode === 'single-column' ? false : isRead
+
   const backgroundThemeColor = (theme: Theme) =>
     getCardBackgroundThemeColor({
       isDark: theme.isDark,
-      isMuted: isRead,
+      isMuted,
     })
 
   const dispatch = useDispatch()
-  const columnId = useContext(CurrentColumnContext)
 
   const textIsOnlyIssueNumber =
     text && text.text && text.text.match(/^#([0-9]+)$/)
@@ -308,7 +311,7 @@ export const BaseCard = React.memo((props: BaseCardProps) => {
               <ThemedText
                 color={'foregroundColor'}
                 numberOfLines={1}
-                style={[styles.title, { fontWeight: isRead ? '300' : '500' }]}
+                style={[styles.title, { fontWeight: isMuted ? '300' : '500' }]}
               >
                 {title}
               </ThemedText>
@@ -353,7 +356,7 @@ export const BaseCard = React.memo((props: BaseCardProps) => {
                 numberOfLines={1}
                 style={[
                   styles.subtitle,
-                  { fontWeight: isRead ? '300' : '400' },
+                  { fontWeight: isMuted ? '300' : '400' },
                 ]}
               >
                 {subtitle}
@@ -692,7 +695,7 @@ export const BaseCard = React.memo((props: BaseCardProps) => {
         <Spacer flex={1} />
       </View>
 
-      <CardItemSeparator muted={isRead} />
+      <CardItemSeparator muted={isMuted} />
     </View>
   )
 })

packages/components/src/components/cards/CardWithLink.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useMemo, useRef } from 'react'
 import { StyleSheet, TouchableHighlightProps, View } from 'react-native'
 import { useDispatch } from 'react-redux'
 
+import { useAppViewMode } from '../../hooks/use-app-view-mode'
 import { useDynamicRef } from '../../hooks/use-dynamic-ref'
 import { useHover } from '../../hooks/use-hover'
 import { useIsItemFocused } from '../../hooks/use-is-item-focused'
@@ -25,6 +26,7 @@ import {
 import { ThemedView } from '../themed/ThemedView'
 import { BaseCard } from './BaseCard'
 import { getCardPropsForItem } from './BaseCard.shared'
+import { CardLeftBorder } from './partials/CardLeftBorder'
 import { CardSavedIndicator } from './partials/CardSavedIndicator'
 
 export interface CardWithLinkProps {
@@ -53,6 +55,7 @@ export const CardWithLink = React.memo((props: CardWithLinkProps) => {
 
   const dispatch = useDispatch()
   const plan = useReduxState(selectors.currentUserPlanSelector)
+  const { appViewMode } = useAppViewMode()
 
   const item = useItem(nodeIdOrId)
 
@@ -73,10 +76,12 @@ export const CardWithLink = React.memo((props: CardWithLinkProps) => {
         <BaseCard
           key={`${type}-base-card-${getItemNodeIdOrId(item)!}`}
           {..._cardProps}
+          appViewMode={appViewMode}
+          columnId={columnId}
         />
       ),
     }
-  }, [columnId, item, ownerIsKnown, plan, repoIsKnown])
+  }, [appViewMode, columnId, item, ownerIsKnown, plan, repoIsKnown])
 
   const isReadRef = useDynamicRef(!!(cardProps && cardProps.isRead))
 
@@ -108,7 +113,8 @@ export const CardWithLink = React.memo((props: CardWithLinkProps) => {
             theme[
               getCardBackgroundThemeColor({
                 isDark: theme.isDark,
-                isMuted: isReadRef.current,
+                isMuted:
+                  appViewMode === 'single-column' ? false : isReadRef.current,
                 isHovered: isHoveredRef.current,
               })
             ],
@@ -126,7 +132,7 @@ export const CardWithLink = React.memo((props: CardWithLinkProps) => {
         },
       })
     }
-  }, [])
+  }, [appViewMode])
 
   const handleFocusChange = useCallback(
     (value, disableDomFocus?: boolean) => {
@@ -180,7 +186,7 @@ export const CardWithLink = React.memo((props: CardWithLinkProps) => {
       backgroundThemeColor={theme =>
         getCardBackgroundThemeColor({
           isDark: theme.isDark,
-          isMuted: cardProps.isRead,
+          isMuted: appViewMode === 'single-column' ? false : cardProps.isRead,
           // isHovered: !Platform.supportsTouch && isFocusedRef.current,
         })
       }
@@ -239,13 +245,13 @@ export const CardWithLink = React.memo((props: CardWithLinkProps) => {
 
       {CardComponent}
 
-      {/* {appViewMode === 'single-column' && (
+      {appViewMode === 'single-column' && (
         <CardLeftBorder
           style={{
             opacity: !!(cardProps && !cardProps.isRead) ? 1 : 0,
           }}
         />
-      )} */}
+      )}
 
       {!!isSaved && <CardSavedIndicator />}
     </Link>