Merge upstream develop

Author: github-actions[bot]

apps/polycentric/src/common/components/Avatar/AvatarEdit.tsx

@@ -1,21 +1,19 @@
 import { ComponentProps, useState } from 'react';
 import { Avatar } from './Avatar';
-import { identiconUrl } from '../../lib/polycentric-hooks';
 import * as ImagePicker from 'expo-image-picker';
-import type { ImagePickerAsset } from 'expo-image-picker';
 
 type AvatarEditProps = {
-  identity: string;
+  /** Avatar shown until the user picks a new image. */
+  defaultUri: string;
   onSelect?: (uri: string) => void;
-} & ComponentProps<typeof Avatar>;
+} & Omit<ComponentProps<typeof Avatar>, 'source' | 'onPress'>;
+
 export default function AvatarEdit({
-  identity,
+  defaultUri,
   onSelect,
   ...props
 }: AvatarEditProps) {
-  const [avatarUrl, setAvatarUrl] = useState<string>(
-    identiconUrl(identity, 160),
-  );
+  const [selectedUri, setSelectedUri] = useState<string>();
 
   const onPress = async () => {
     const result = await ImagePicker.launchImageLibraryAsync();
@@ -25,9 +23,15 @@ export default function AvatarEdit({
     }
 
     const asset = result.assets[0];
-    setAvatarUrl(asset.uri);
+    setSelectedUri(asset.uri);
     onSelect?.(asset.uri);
   };
 
-  return <Avatar {...props} source={{ uri: avatarUrl }} onPress={onPress} />;
+  return (
+    <Avatar
+      {...props}
+      source={{ uri: selectedUri ?? defaultUri }}
+      onPress={onPress}
+    />
+  );
 }

apps/polycentric/src/common/components/Avatar/ProfileEditAvatar.tsx

@@ -0,0 +1,40 @@
+import { ComponentProps, useMemo } from 'react';
+import { resolveAvatarSize } from './Avatar';
+import AvatarEdit from './AvatarEdit';
+import {
+  identiconUrl,
+  pickImageVariant,
+  usePolycentric,
+} from '../../lib/polycentric-hooks';
+import { useProfile } from '@/src/features/profile/hooks/useProfile';
+
+type ProfileEditAvatarProps = {
+  identityKey: string;
+} & Omit<ComponentProps<typeof AvatarEdit>, 'defaultUri'>;
+
+/**
+ * Edit-mode counterpart to {@link ProfileAvatar}: seeds the image picker with
+ * the identity's current avatar (resolved the same way — best-fitting variant
+ * from the profile's `avatar` ImageSet via the blob CDN, falling back to a
+ * Dicebear identicon) before the user chooses a replacement.
+ */
+export function ProfileEditAvatar({
+  identityKey,
+  size = 'md',
+  ...rest
+}: ProfileEditAvatarProps) {
+  const profile = useProfile(identityKey);
+  const client = usePolycentric();
+  const pixelSize = resolveAvatarSize(size);
+
+  const uri = useMemo(() => {
+    const variant = pickImageVariant(profile.avatar, pixelSize);
+    if (variant?.blob?.digest) {
+      const url = client.blobUrl(variant.blob.digest);
+      if (url) return url;
+    }
+    return identiconUrl(identityKey, pixelSize);
+  }, [profile.avatar, client, identityKey, pixelSize]);
+
+  return <AvatarEdit {...rest} size={size} defaultUri={uri} />;
+}

apps/polycentric/src/common/components/primitives/index.ts

@@ -1,5 +1,6 @@
 export * from '../Avatar/Avatar';
 export * from '../Avatar/ProfileAvatar';
+export * from '../Avatar/ProfileEditAvatar';
 export * from '../TextArea';
 export * from './Button';
 export * from './Chip';

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

@@ -1,5 +1,5 @@
 import { Button, Text, TextInput } from '@/src/common/components';
-import AvatarEdit from '@/src/common/components/Avatar/AvatarEdit';
+import { ProfileEditAvatar } from '@/src/common/components/Avatar/ProfileEditAvatar';
 import {
   useCurrentIdentity,
   useProfileEdit,
@@ -44,8 +44,8 @@ function EditProfileSheet({
       />
       <View style={[Atoms.p_lg, Atoms.gap_xl]}>
         <View style={[Atoms.items_center, Atoms.gap_md]}>
-          <AvatarEdit
-            identity={identityKey}
+          <ProfileEditAvatar
+            identityKey={identityKey}
             size="massive"
             onSelect={edit.setAvatarUri}
           />