chore: spike on new information architecture

package.json

@@ -125,6 +125,7 @@
     "@react-native-cookies/cookies": "6.0.11",
     "@react-native-google-signin/google-signin": "11.0.1",
     "@react-navigation/bottom-tabs": "6.3.2",
+    "@react-navigation/drawer": "6.7.2",
     "@react-navigation/native": "6.0.11",
     "@react-navigation/native-stack": "6.7.0",
     "@react-navigation/stack": "6.2.2",

src/app/Navigation/AuthenticatedRoutes/NotificationsTab.tsx

@@ -0,0 +1,19 @@
+import { registerScreen, StackNavigator } from "app/Navigation/AuthenticatedRoutes/StackNavigator"
+import { sharedRoutes } from "app/Navigation/AuthenticatedRoutes/sharedRoutes"
+import { modules } from "app/Navigation/utils/modules"
+
+export const NotificationsTab: React.FC = () => {
+  return (
+    <StackNavigator.Navigator
+      screenOptions={{ headerShown: false }}
+      initialRouteName="Notifications"
+    >
+      {registerScreen({
+        name: "Notifications",
+        module: modules["Notifications"],
+      })}
+
+      {sharedRoutes()}
+    </StackNavigator.Navigator>
+  )
+}

src/app/Navigation/AuthenticatedRoutes/Tabs.tsx

@@ -1,12 +1,13 @@
 import { ActionType, OwnerType, Screen, tappedTabBar } from "@artsy/cohesion"
 import { Flex, Text, useColor } from "@artsy/palette-mobile"
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"
+import { createDrawerNavigator, DrawerContentScrollView } from "@react-navigation/drawer"
 import { createNativeStackNavigator } from "@react-navigation/native-stack"
 import { HomeTab } from "app/Navigation/AuthenticatedRoutes/HomeTab"
 import { InboxTab } from "app/Navigation/AuthenticatedRoutes/InboxTab"
+import { NotificationsTab } from "app/Navigation/AuthenticatedRoutes/NotificationsTab"
 import { ProfileTab } from "app/Navigation/AuthenticatedRoutes/ProfileTab"
 import { SearchTab } from "app/Navigation/AuthenticatedRoutes/SearchTab"
-import { SellTab } from "app/Navigation/AuthenticatedRoutes/SellTab"
 import { modalRoutes } from "app/Navigation/AuthenticatedRoutes/modalRoutes"
 import { internal_navigationRef } from "app/Navigation/Navigation"
 import { AppModule } from "app/Navigation/routes"
@@ -15,6 +16,9 @@ import { useBottomTabsBadges } from "app/Navigation/utils/useBottomTabsBadges"
 import { BottomTabOption, BottomTabType } from "app/Scenes/BottomTabs/BottomTabType"
 import { BottomTabsIcon } from "app/Scenes/BottomTabs/BottomTabsIcon"
 import { bottomTabsConfig } from "app/Scenes/BottomTabs/bottomTabsConfig"
+import { ProfileDrawer } from "app/Scenes/MyProfile/Drawer"
+import { MyProfileHeaderQueryRenderer } from "app/Scenes/MyProfile/MyProfileHeader"
+import { MyProfileSettings } from "app/Scenes/MyProfile/MyProfileSettings"
 import { OnboardingQuiz } from "app/Scenes/Onboarding/OnboardingQuiz/OnboardingQuiz"
 import { GlobalStore } from "app/store/GlobalStore"
 import { useIsStaging } from "app/utils/hooks/useIsStaging"
@@ -39,7 +43,7 @@ type TabRoutesParams = {
   home: undefined
   search: undefined
   inbox: undefined
-  sell: undefined
+  notifications: undefined
   profile: undefined
 }
 
@@ -143,14 +147,41 @@ const AppTabs: React.FC = () => {
       <Tab.Screen name="home" component={HomeTab} options={{ ...tabsBadges["home"] }} />
       <Tab.Screen name="search" component={SearchTab} />
       <Tab.Screen name="inbox" component={InboxTab} options={{ ...tabsBadges["inbox"] }} />
-      <Tab.Screen name="sell" component={SellTab} />
+      <Tab.Screen name="notifications" component={NotificationsTab} />
       <Tab.Screen name="profile" component={ProfileTab} options={{ ...tabsBadges["profile"] }} />
     </Tab.Navigator>
   )
 }
 
 export const AuthenticatedRoutesStack = createNativeStackNavigator()
 
+const Drawer = createDrawerNavigator()
+
+export default function AppDrawerNavigator() {
+  return (
+    <Drawer.Navigator
+      initialRouteName="AppTabs"
+      drawerContent={(props) => {
+        return (
+          <DrawerContentScrollView {...props}>
+            <MyProfileHeaderQueryRenderer />
+            <ProfileDrawer />
+          </DrawerContentScrollView>
+        )
+      }}
+    >
+      <Drawer.Screen
+        name="AppTabs"
+        component={AppTabs}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Drawer.Screen name="Profile" component={Flex} />
+    </Drawer.Navigator>
+  )
+}
+
 export const AuthenticatedRoutes: React.FC = () => {
   const onboardingState = GlobalStore.useAppState((state) => state.auth.onboardingState)
 
@@ -162,8 +193,8 @@ export const AuthenticatedRoutes: React.FC = () => {
     <AuthenticatedRoutesStack.Navigator>
       <AuthenticatedRoutesStack.Group>
         <AuthenticatedRoutesStack.Screen
-          name="AppTabs"
-          component={AppTabs}
+          name="AppDrawerNavigator"
+          component={AppDrawerNavigator}
           options={{ headerShown: false }}
         />
         {modalRoutes()}
@@ -188,12 +219,14 @@ export const tabsTracks = {
       case "search":
         tabScreen = OwnerType.search
         break
-      case "sell":
-        tabScreen = OwnerType.sell
+      case "notifications":
+        // @ts-ignore
+        tabScreen = OwnerType.notifications
         break
     }
 
     return {
+      // @ts-ignore
       context_screen_owner_type: tabScreen,
       action: ActionType.screen,
     }

src/app/Navigation/routes.tsx

@@ -243,10 +243,11 @@ export const artsyDotNetRoutes = defineRoutes([
   },
   {
     path: "/notifications",
-    name: "Activity",
+    name: "Notifications",
     Component: ActivityScreen,
     options: {
-      hidesBottomTabs: true,
+      // hidesBottomTabs: true,
+      onlyShowInTabName: "notifications",
       screenOptions: {
         headerShown: false,
       },

src/app/Scenes/BottomTabs/BottomTabType.ts

@@ -5,7 +5,8 @@ export const BottomTabOption = {
   home: OwnerType.home,
   search: OwnerType.search,
   inbox: OwnerType.inbox,
-  sell: OwnerType.sell,
+  // @ts-ignore
+  notifications: OwnerType.notifications,
   profile: OwnerType.profile,
 } as const
 

src/app/Scenes/BottomTabs/BottomTabsIcon.tsx

@@ -1,4 +1,4 @@
-import { useColor } from "@artsy/palette-mobile"
+import { BellFillIcon, BellIcon, Flex, useColor } from "@artsy/palette-mobile"
 import Svg, { Path } from "react-native-svg"
 import { BottomTabType } from "./BottomTabType"
 
@@ -71,28 +71,16 @@ export const BottomTabsIcon: React.FC<{ tab: BottomTabType; state: "active" | "i
         />
       ),
     },
-    sell: {
+    notifications: {
       active: (
-        <Path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M39.8559 29.4484C40.1995 29.1049 40.376 28.6285 40.3393 28.144L39.6905 19.5714C39.6282 18.748 38.9724 18.0944 38.1487 18.0348L29.6124 17.4174C29.1297 17.3825 28.6557 17.5591 28.3135 17.9013L16.2211 29.9937C15.5702 30.6446 15.5702 31.7 16.2211 32.3509L25.4087 41.5385C26.0596 42.1894 27.1149 42.1894 27.7658 41.5385L39.8559 29.4484ZM30.1794 25.3985C30.1794 24.1926 31.157 23.215 32.3629 23.215C33.5689 23.215 34.5464 24.1926 34.5464 25.3985C34.5464 26.6044 33.5689 27.582 32.3629 27.582C31.157 27.582 30.1794 26.6044 30.1794 25.3985Z"
-          fill={color("black100")}
-        />
+        <Flex justifyContent="center" alignItems="center" top={11} overflow="visible">
+          <BellFillIcon height={34} width={34} />
+        </Flex>
       ),
       inactive: (
-        <>
-          <Path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M29.9418 27.7577C28.8812 26.6972 28.8812 24.9777 29.9418 23.9171C31.0023 22.8566 32.7218 22.8566 33.7824 23.9171C34.8429 24.9777 34.8429 26.6972 33.7824 27.7577C32.7218 28.8183 31.0023 28.8183 29.9418 27.7577ZM31.1203 26.5792C30.7107 26.1695 30.7107 25.5054 31.1203 25.0957C31.53 24.6861 32.1942 24.6861 32.6038 25.0957C33.0135 25.5054 33.0135 26.1695 32.6038 26.5792C32.1942 26.9888 31.53 26.9888 31.1203 26.5792Z"
-          />
-          <Path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M39.8393 28.584C39.876 29.0685 39.6995 29.5448 39.3559 29.8884L27.2658 41.9784C26.6149 42.6293 25.5596 42.6293 24.9087 41.9784L15.7211 32.7908C15.0702 32.1399 15.0702 31.0846 15.7211 30.4337L27.8135 18.3412C28.1557 17.999 28.6297 17.8225 29.1124 17.8574L37.6487 18.4748C38.4724 18.5343 39.1282 19.188 39.1905 20.0114L39.8393 28.584ZM38.1773 28.7098L26.0873 40.7998L16.8997 31.6122L28.9921 19.5198L37.5285 20.1372L38.1773 28.7098Z"
-          />
-        </>
+        <Flex justifyContent="center" alignItems="center" top={11} overflow="visible">
+          <BellIcon height={34} width={34} />
+        </Flex>
       ),
     },
     profile: {

src/app/Scenes/BottomTabs/bottomTabsConfig.tsx

@@ -1,8 +1,8 @@
 import { OwnerType, TappedTabBarArgs } from "@artsy/cohesion"
 import { BottomTabType } from "./BottomTabType"
 
-export type BottomTabRoute = "/" | "/search" | "/inbox" | "/sell" | "/my-profile"
-export const BottomTabRoutes = ["/", "/search", "/inbox", "/sell", "/my-profile"]
+export type BottomTabRoute = "/" | "/search" | "/inbox" | "/notifications" | "/my-profile"
+export const BottomTabRoutes = ["/", "/search", "/inbox", "/notifications", "/my-profile"]
 
 export const bottomTabsConfig: {
   [k in BottomTabType]: {
@@ -27,10 +27,11 @@ export const bottomTabsConfig: {
     analyticsDescription: OwnerType.inbox,
     name: "Inbox",
   },
-  sell: {
-    route: "/sell",
-    analyticsDescription: OwnerType.sell,
-    name: "Sell",
+  notifications: {
+    route: "/notifications",
+    // @ts-ignore
+    analyticsDescription: OwnerType.notifications,
+    name: "Notifications",
   },
   profile: {
     route: "/my-profile",

src/app/Scenes/HomeView/Components/HomeHeader.tsx

@@ -1,17 +1,14 @@
 import { OwnerType } from "@artsy/cohesion"
-import { Flex } from "@artsy/palette-mobile"
+import { Flex, MenuIcon, Touchable } from "@artsy/palette-mobile"
+import { useNavigation } from "@react-navigation/native"
 import { GlobalSearchInput } from "app/Components/GlobalSearchInput/GlobalSearchInput"
 import { PaymentFailureBanner } from "app/Scenes/HomeView/Components/PaymentFailureBanner"
-import { GlobalStore } from "app/store/GlobalStore"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { Suspense } from "react"
-import { ActivityIndicator } from "./ActivityIndicator"
 
 export const HomeHeader: React.FC = () => {
   const showPaymentFailureBanner = useFeatureFlag("AREnablePaymentFailureBanner")
-  const hasUnseenNotifications = GlobalStore.useAppState(
-    (state) => state.bottomTabs.hasUnseenNotifications
-  )
+  const navigation = useNavigation()
 
   return (
     <Flex backgroundColor="background">
@@ -23,12 +20,14 @@ export const HomeHeader: React.FC = () => {
 
       <Flex pb={1} pt={2}>
         <Flex flexDirection="row" px={2} gap={1} justifyContent="space-around" alignItems="center">
+          <Flex alignItems="flex-start">
+            <Touchable onPress={navigation.openDrawer}>
+              <MenuIcon width={24} height={24} />
+            </Touchable>
+          </Flex>
           <Flex flex={1}>
             <GlobalSearchInput ownerType={OwnerType.home} />
           </Flex>
-          <Flex alignItems="flex-end">
-            <ActivityIndicator hasUnseenNotifications={hasUnseenNotifications} />
-          </Flex>
         </Flex>
       </Flex>
     </Flex>

src/app/Scenes/HomeView/HomeView.tsx

@@ -191,6 +191,7 @@ export const HomeView: React.FC = memo(() => {
           refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={handleRefresh} />}
           onEndReachedThreshold={2}
           stickyHeaderIndices={[0]}
+          stickyHeaderHiddenOnScroll
           windowSize={15}
         />
         {!!data?.me && <EmailConfirmationBannerFragmentContainer me={data.me} />}

src/app/Scenes/MyCollection/Components/MyCollectionCollectedArtistsRail.tsx

@@ -60,7 +60,7 @@ export const MyCollectionCollectedArtistsRail: React.FC<MyCollectionCollectedArt
         ItemSeparatorComponent={() => <Spacer y={2} />}
         contentContainerStyle={{
           paddingTop: space(2),
-          paddingBottom: space(4),
+          paddingBottom: space(2),
           paddingLeft: space(2),
         }}
         ListFooterComponent={
@@ -109,7 +109,7 @@ export const Artist: React.FC<{
         <Avatar
           initials={data.initials || undefined}
           src={data?.image?.url || undefined}
-          size="md"
+          size="sm"
         />
         <Text variant="xs" numberOfLines={2} textAlign="center" mt={0.5}>
           {data.name}

src/app/Scenes/MyCollection/Screens/ArtworkForm/Components/MyCollectionArtworkFormDeleteArtworkModal.tsx

@@ -57,7 +57,7 @@ export const MyCollectionArtworkFormDeleteArtworkModal: React.FC<MyCollectionArt
           onRequestClose={hideModal}
           animationType="slide"
         >
-          <Flex p={2}>
+          <Flex p={2} backgroundColor="background" flexGrow={1}>
             <Text variant="lg-display">Delete this artwork?</Text>
             <Spacer y={2} />
             <Text variant="sm">This artwork will be removed from My Collection.</Text>