Merge upstream develop

Author: github-actions[bot]

apps/polycentric/app/[identityId]/verifications/index.tsx

@@ -0,0 +1,6 @@
+import ProfileScreen from '@/src/features/profile/ProfileScreen';
+
+// The profile's Verifications tab; `/[identityId]` is the Posts tab.
+export default function ProfileVerificationsRoute() {
+  return <ProfileScreen tab="verifications" />;
+}

apps/polycentric/src/common/components/Icon.tsx

@@ -22,6 +22,7 @@ function defineIcon<G extends string>(
  */
 export const IconsMap = {
   add: defineIcon(Ionicons, 'add'),
+  addCircleOutline: defineIcon(MaterialCommunityIcons, 'plus-circle-outline'),
   addOutline: defineIcon(Ionicons, 'add-circle-outline'),
   arrowBack: defineIcon(Ionicons, 'arrow-back'),
   at: defineIcon(Ionicons, 'at'),
@@ -50,7 +51,7 @@ export const IconsMap = {
   home: defineIcon(Ionicons, 'home-outline'),
   image: defineIcon(Ionicons, 'image-outline'),
   images: defineIcon(Ionicons, 'images-outline'),
-  infoOutline: defineIcon(Ionicons, 'information-circle-outline'),
+  infoOutline: defineIcon(MaterialCommunityIcons, 'information-outline'),
   key: defineIcon(MaterialIcons, 'vpn-key'),
   more: defineIcon(Ionicons, 'ellipsis-horizontal'),
   notification: defineIcon(MaterialCommunityIcons, 'bell-outline'),

apps/polycentric/src/common/components/InfoTooltip.tsx

@@ -47,19 +47,22 @@ export function InfoTooltip({
   const hide = () => setOpen(false);
 
   const bubbleStyle = [
-    Atoms.p_sm,
+    Atoms.pt_sm,
+    Atoms.pb_sm,
+    Atoms.pl_md,
+    Atoms.pr_md,
+    Atoms.rounded_md,
     {
       width: BUBBLE_WIDTH,
       maxWidth: BUBBLE_WIDTH,
-      borderRadius: 8,
       borderWidth: 1,
-      borderColor: theme.palette.neutral_300,
-      backgroundColor: theme.palette.background_secondary,
+      borderColor: theme.palette.neutral_50,
+      backgroundColor: theme.palette.neutral_25,
     },
   ] as const;
 
   const bubbleBody = (
-    <Text variant="small" color="neutral_900">
+    <Text variant="small" color="neutral_600" fontWeight="semibold">
       {text}
     </Text>
   );

apps/polycentric/src/common/components/List.tsx

@@ -17,8 +17,10 @@ import React, {
 } from 'react';
 import { View } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { Atoms } from '../theme';
+import { Atoms, useTheme } from '../theme';
 import { HidingHeader, renderNode, useHidingHeader } from './HidingHeader';
+import { InfoTooltip } from './InfoTooltip';
+import { Text } from './primitives';
 
 // A reanimated-compatible FlashList.
 const AnimatedFlashList = Animated.createAnimatedComponent(FlashList);
@@ -28,6 +30,38 @@ const WEB_PAGE_SIZE = 12;
 
 export type { FlashListProps, ListRenderItem, ListRenderItemInfo };
 
+// A list section header row, with an optional explanatory tooltip.
+export function SectionHeader({
+  title,
+  tooltip,
+}: {
+  title: string;
+  tooltip?: string;
+}) {
+  const { theme } = useTheme();
+  return (
+    <View
+      style={[
+        Atoms.flex_row,
+        Atoms.align_center,
+        Atoms.gap_xs,
+        Atoms.px_lg,
+        Atoms.pt_xl,
+        Atoms.pb_sm,
+      ]}
+    >
+      <Text
+        variant="small"
+        style={theme.atoms.text_neutral_medium}
+        fontWeight="semibold"
+      >
+        {title}
+      </Text>
+      {tooltip ? <InfoTooltip text={tooltip} size={14} /> : null}
+    </View>
+  );
+}
+
 export type ListProps<T> = FlashListProps<T> & {
   HeaderComponent?:
     | React.ComponentType<any>

apps/polycentric/src/common/constants/routes.ts

@@ -36,6 +36,8 @@ export const Routes = {
     claims: '/claims',
     identitySwitch: '/identity/switch',
     profile: (identityId: string) => `/${identityId}` as const,
+    profileVerifications: (identityId: string) =>
+      `/${identityId}/verifications` as const,
     editProfile: (identityId: string) => `/${identityId}/edit` as const,
     post: (identityId: string, keyFingerprint: string, sequence: string) =>
       `/${identityId}/post/${keyFingerprint}/${sequence}` as const,

apps/polycentric/src/features/notifications/Notification.tsx

@@ -95,6 +95,11 @@ function InteractionNotification({
     router.push(route ?? Routes.tabs.profile(notification.fromIdentity));
   }, [notification]);
 
+  const openProfile = useCallback(
+    () => router.push(Routes.tabs.profile(notification.fromIdentity)),
+    [notification.fromIdentity],
+  );
+
   const dim = withHexOpacity(theme.palette.neutral_500, '40');
 
   return (
@@ -110,10 +115,17 @@ function InteractionNotification({
         },
       ]}
     >
-      <ProfileAvatar identityKey={notification.fromIdentity} size="md" />
+      <ProfileAvatar
+        identityKey={notification.fromIdentity}
+        size="md"
+        onPress={openProfile}
+      />
       <View style={[Atoms.flex_1, Atoms.gap_xs]}>
         <Text>
-          <Text fontWeight="bold">{name}</Text> {summary(notification)}
+          <Text fontWeight="bold" onPress={openProfile}>
+            {name}
+          </Text>{' '}
+          {summary(notification)}
           {notification.createdAt > 0 ? (
             <Text color="neutral_500">
               {' '}

apps/polycentric/src/features/profile/ProfileContext.tsx

@@ -1,14 +1,15 @@
+import { Routes } from '@/src/common/constants/routes';
 import { useCurrentIdentity } from '@/src/common/lib/polycentric-hooks';
+import { router } from 'expo-router';
 import {
   createContext,
+  useCallback,
   useContext,
-  useEffect,
   useMemo,
-  useState,
   type ReactNode,
 } from 'react';
 
-type ActiveFeed = 'posts' | 'likes';
+export type ActiveFeed = 'posts' | 'verifications';
 
 interface ProfileContextValue {
   identityKey: string | null;
@@ -25,23 +26,36 @@ const ProfileContext = createContext<ProfileContextValue | null>(null);
 export function ProfileProvider({
   identityKey,
   alias = null,
+  activeFeed = 'posts',
   children,
 }: {
   identityKey: string | null;
   alias?: string | null;
+  // Which tab's route rendered this profile.
+  activeFeed?: ActiveFeed;
   children: ReactNode;
 }) {
   const { identity: selfIdentity } = useCurrentIdentity();
   const isSelf = !!identityKey && selfIdentity?.identityKey === identityKey;
 
-  const [activeFeed, setActiveFeed] = useState<ActiveFeed>('posts');
-  useEffect(() => {
-    if (!isSelf) setActiveFeed('posts');
-  }, [isSelf]);
+  // Tabs are routes; switching replaces the URL, keeping the alias when
+  // the profile was reached via one.
+  const setActiveFeed = useCallback(
+    (tab: ActiveFeed) => {
+      const profileId = alias ?? identityKey;
+      if (tab === activeFeed || !profileId) return;
+      router.replace(
+        tab === 'verifications'
+          ? Routes.tabs.profileVerifications(profileId)
+          : Routes.tabs.profile(profileId),
+      );
+    },
+    [activeFeed, alias, identityKey],
+  );
 
   const value = useMemo<ProfileContextValue>(
     () => ({ identityKey, isSelf, activeFeed, setActiveFeed, alias }),
-    [identityKey, isSelf, activeFeed, alias],
+    [identityKey, isSelf, activeFeed, setActiveFeed, alias],
   );
 
   return (

apps/polycentric/src/features/profile/ProfileHeader.tsx

@@ -14,6 +14,7 @@ import {
   truncateName,
   useUsername,
 } from '@/src/common/lib/polycentric-hooks';
+import { Tabs } from '@/src/common/components/Tabs';
 import { Atoms, useTheme } from '@/src/common/theme';
 import { useProfile } from '@/src/features/profile/hooks/useProfile';
 import { FetchMode } from '@polycentric/react-native';
@@ -150,6 +151,21 @@ function ProfileHeaderInner({ bannerColors, onBack }: ProfileHeaderProps) {
           )}
         </View>
       </View>
+
+      <Tabs>
+        <Tabs.Tab
+          active={activeFeed === 'posts'}
+          onPress={() => setActiveFeed('posts')}
+        >
+          Posts
+        </Tabs.Tab>
+        <Tabs.Tab
+          active={activeFeed === 'verifications'}
+          onPress={() => setActiveFeed('verifications')}
+        >
+          Verifications
+        </Tabs.Tab>
+      </Tabs>
     </View>
   );
 }

apps/polycentric/src/features/profile/ProfileScreen.test.tsx

@@ -60,12 +60,12 @@ jest.mock('./ProfileContext', () => {
 // Inert stubs for the module-level imports the screen pulls in.
 jest.mock('./ProfileHeader', () => ({ ProfileHeader: () => null }));
 jest.mock('./ProfileFeedSwitcher', () => ({ ProfileFeedSwitcher: () => null }));
+jest.mock('./ProfileVerificationsList', () => ({
+  ProfileVerificationsList: () => null,
+}));
 jest.mock('@/src/features/feed/hooks/useIdentityFeed', () => ({
   useIdentityFeed: () => ({ refresh: () => undefined }),
 }));
-jest.mock('@/src/features/feed/hooks/useLikesFeed', () => ({
-  useLikesFeed: () => ({ refresh: () => undefined }),
-}));
 jest.mock('@/src/common/lib/navigation/useFocusedRefresh', () => ({
   useFocusedRefresh: () => undefined,
 }));
@@ -192,12 +192,7 @@ describe('IdentityProfile (identity path)', () => {
 
     await render(<ProfileScreen />);
 
-    await waitFor(() =>
-      expect(mockReplace).toHaveBeenCalledWith({
-        pathname: '/[identityId]',
-        params: { identityId: ALIAS },
-      }),
-    );
+    await waitFor(() => expect(mockReplace).toHaveBeenCalledWith(`/${ALIAS}`));
     expect(mockRecord).toHaveBeenCalledWith(ALIAS, IDENTITY);
   });
 
@@ -216,12 +211,7 @@ describe('IdentityProfile (identity path)', () => {
 
     await render(<ProfileScreen />);
 
-    await waitFor(() =>
-      expect(mockReplace).toHaveBeenCalledWith({
-        pathname: '/[identityId]',
-        params: { identityId: ALIAS },
-      }),
-    );
+    await waitFor(() => expect(mockReplace).toHaveBeenCalledWith(`/${ALIAS}`));
     expect(mockResolve).not.toHaveBeenCalled();
   });