Merge upstream develop

Author: github-actions[bot]

apps/polycentric/app/_layout.tsx

@@ -13,6 +13,14 @@ import {
   initialWindowMetrics,
 } from 'react-native-safe-area-context';
 
+// Anchor the root stack on the tabs so that deep-linking directly
+// into a modal route (e.g. `/feed/compose`, `/settings/identity`)
+// mounts the tabs underneath — giving the modal something to sit on
+// and a sensible target for the close button's `router.back()`.
+export const unstable_settings = {
+  initialRouteName: '(tabs)',
+};
+
 function RootStack() {
   const { theme } = useTheme();
 

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

@@ -17,7 +17,7 @@ export const AVATAR_SIZE_MAP: Record<AvatarSizePreset, number> = {
   sm: 32,
   md: 40,
   lg: 56,
-  xl: 80,
+  xl: 112,
   massive: 170,
 };
 

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

@@ -0,0 +1,53 @@
+import {
+  forwardRef,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+} from 'react';
+import { Platform, TextInput as RNTextInput } from 'react-native';
+import { TextInput, type TextInputProps } from '../primitives/TextInput';
+
+export interface TextAreaProps extends Omit<TextInputProps, 'multiline'> {
+  /** Minimum height in pixels. Defaults to 40. */
+  minHeight?: number;
+}
+
+/**
+ * Multiline text input that auto-grows and auto-shrinks with content.
+ */
+export const TextArea = forwardRef<RNTextInput, TextAreaProps>(
+  ({ minHeight = 20, style, value, scrollEnabled, ...props }, ref) => {
+    const innerRef = useRef<RNTextInput>(null);
+    useImperativeHandle(ref, () => innerRef.current as RNTextInput);
+
+    useLayoutEffect(() => {
+      if (Platform.OS !== 'web') return;
+      const node = innerRef.current as unknown as HTMLTextAreaElement | null;
+      if (!node?.style) return;
+      node.style.height = 'auto';
+      node.style.height = `${Math.max(minHeight, node.scrollHeight)}px`;
+    }, [value, minHeight]);
+
+    return (
+      <TextInput
+        ref={innerRef}
+        multiline
+        numberOfLines={1}
+        scrollEnabled={scrollEnabled ?? false}
+        value={value}
+        style={[
+          { minHeight },
+          Platform.OS === 'web'
+            ? // Suppress the corner resize grip and the vertical
+              // scrollbar — we drive height via scrollHeight.
+              ({ resize: 'none', overflow: 'hidden' } as object)
+            : null,
+          style,
+        ]}
+        {...props}
+      />
+    );
+  },
+);
+
+TextArea.displayName = 'TextArea';

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

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

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

@@ -1,15 +1,22 @@
 import { router } from 'expo-router';
 
-export function openCompose(replyTo?: {
-  identityId: string;
-  sequence: string;
-}) {
+export type OpenComposeOptions = {
+  replyTo?: { identityId: string; sequence: string };
+  /** Immediately launch the image picker once the composer mounts. */
+  attachImage?: boolean;
+};
+
+export function openCompose(options: OpenComposeOptions = {}) {
+  const { replyTo, attachImage } = options;
+  const params = new URLSearchParams();
   if (replyTo) {
-    const path = `${encodeURIComponent(replyTo.identityId)}/${encodeURIComponent(replyTo.sequence)}`;
-    router.push(`${Routes.tabs.feed.compose}?replyTo=${path}`);
-  } else {
-    router.push(Routes.tabs.feed.compose);
+    params.set('replyTo', `${replyTo.identityId}/${replyTo.sequence}`);
   }
+  if (attachImage) params.set('attach', '1');
+  const qs = params.toString();
+  router.push(
+    qs ? `${Routes.tabs.feed.compose}?${qs}` : Routes.tabs.feed.compose,
+  );
 }
 
 export const Routes = {

apps/polycentric/src/common/lib/images/processAndUploadImage.ts

@@ -0,0 +1,93 @@
+import { sha256 } from '@noble/hashes/sha2';
+import { v2, type PolycentricClient } from '@polycentric/react-native';
+
+/** Default variant edge lengths. */
+export const DEFAULT_IMAGE_VARIANT_SIZES = [48, 128, 512];
+
+export type ProcessAndUploadOptions = {
+  /** Variant edge lengths to emit. Interpreted per `mode`. */
+  sizes?: number[];
+  /** `fill` crops to a square (default, for avatars). `fit` preserves aspect. */
+  mode?: 'fill' | 'fit';
+  /** Source image width. Required for `mode: 'fit'` so variants record correct dims. */
+  sourceWidth?: number;
+  /** Source image height. Required for `mode: 'fit'` so variants record correct dims. */
+  sourceHeight?: number;
+};
+
+/**
+ * Fetch an image from `uri`, resize it into each size in `sizes` via
+ * the core's JPEG encoder, upload each variant's bytes to the client's
+ * servers, and return the assembled `ImageSet`.
+ */
+export async function processAndUploadImage(
+  client: PolycentricClient,
+  uri: string,
+  options: ProcessAndUploadOptions = {},
+): Promise<v2.ImageSet> {
+  const sizes = options.sizes ?? DEFAULT_IMAGE_VARIANT_SIZES;
+  const mode = options.mode ?? 'fill';
+
+  const response = await fetch(uri);
+  const raw = new Uint8Array(await response.arrayBuffer());
+
+  const variants = await Promise.all(
+    sizes.map(async (size) => {
+      const jpeg = client.processImageToJpeg(raw, size, size, mode);
+      const { width, height } = computeOutputDims(
+        size,
+        size,
+        mode,
+        options.sourceWidth,
+        options.sourceHeight,
+      );
+      const image = v2.Image.create({
+        blob: {
+          digest: {
+            type: v2.ContentDigestType.SHA256,
+            value: sha256(jpeg),
+          },
+          mimeType: 'image/jpeg',
+          size: BigInt(jpeg.length),
+        },
+        width,
+        height,
+      });
+      return { image, body: jpeg };
+    }),
+  );
+
+  await Promise.all(
+    variants.map((v) =>
+      v.image.blob
+        ? client.uploadBlob(v.image.blob, v.body)
+        : Promise.resolve(),
+    ),
+  );
+
+  return v2.ImageSet.create({ images: variants.map((v) => v.image) });
+}
+
+/**
+ * Match the `image` crate's `resize()`: scale both axes by
+ * `min(targetW/srcW, targetH/srcH)` and round. For fill mode the
+ * output is always exactly the requested bounds. For fit mode without
+ * known source dims, we fall back to the bounds (the client can re-
+ * derive aspect from the served image if needed).
+ */
+function computeOutputDims(
+  targetW: number,
+  targetH: number,
+  mode: 'fill' | 'fit',
+  srcW?: number,
+  srcH?: number,
+): { width: number; height: number } {
+  if (mode === 'fill' || !srcW || !srcH) {
+    return { width: targetW, height: targetH };
+  }
+  const ratio = Math.min(targetW / srcW, targetH / srcH);
+  return {
+    width: Math.max(1, Math.round(srcW * ratio)),
+    height: Math.max(1, Math.round(srcH * ratio)),
+  };
+}

apps/polycentric/src/common/lib/polycentric-hooks/helpers.ts

@@ -37,6 +37,9 @@ export type PostData = {
   content: string;
   createdAt: number;
 
+  /** Attached image sets, in author-provided order. */
+  images: v2.ImageSet[];
+
   /** Set when the underlying `v2.Post` carried a `reply`. */
   reply?: {
     root?: EventKeyRef;
@@ -105,6 +108,7 @@ export function decodeV2PostBundle(bundle: v2.EventBundle): PostData | null {
       sequence: key.sequence.toString(),
       content: post.text,
       createdAt: Number(event.createdAt ?? 0),
+      images: post.images,
       reply,
       signedEvent: v2.SignedEvent.create({
         eventBytes: bundle.signedEvent.eventBytes,

apps/polycentric/src/features/composer/ComposeScreen.tsx

@@ -1,19 +1,20 @@
 import { SheetMenu } from '@/src/common/lib/sheet';
+import { Routes } from '@/src/common/constants';
 import { usePostById } from '@/src/features/post/hooks/usePostById';
 import { types } from '@polycentric/react-native';
 import { router, useLocalSearchParams } from 'expo-router';
 import { useCallback } from 'react';
 import { ComposeSheetInner } from './ComposeSheetInner';
 
 export default function ComposeScreen() {
-  const params = useLocalSearchParams<{ replyTo?: string }>();
+  const params = useLocalSearchParams<{ replyTo?: string; attach?: string }>();
 
   // replyTo is an `identityId/sequence` path — the same identifier pair
   // `Routes.tabs.post` uses.
   const [replyToIdentity, replyToSequence] = params.replyTo?.split('/') ?? [];
   const { post: replyTo } = usePostById(replyToIdentity, replyToSequence);
 
-  console.log(replyTo);
+  const attachOnMount = params.attach === '1';
 
   const handlePostCreated = useCallback(
     async (_signedEvent: types.SignedEvent) => {
@@ -23,13 +24,22 @@ export default function ComposeScreen() {
     [],
   );
 
+  const handleClose = useCallback(() => {
+    if (router.canGoBack()) {
+      router.back();
+    } else {
+      router.replace(Routes.tabs.feed.index);
+    }
+  }, []);
+
   return (
-    <SheetMenu onClose={() => router.back()} detents={[0.82]} scrollable>
+    <SheetMenu onClose={handleClose} detents={[0.82]} scrollable>
       {(dismissSheet) => (
         <ComposeSheetInner
           dismissSheet={dismissSheet}
           onPostCreated={handlePostCreated}
           replyTo={replyTo}
+          attachOnMount={attachOnMount}
         />
       )}
     </SheetMenu>

apps/polycentric/src/features/composer/ComposeSheetFooterBar.tsx

@@ -1,12 +1,17 @@
 import { Button, Text } from '@/src/common/components/primitives';
 import { Atoms, useTheme, withHexOpacity } from '@/src/common/theme';
-import { ActivityIndicator, View } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { ActivityIndicator, Pressable, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export type ComposeSheetFooterBarProps = {
   charCount: number;
   submitting: boolean;
   canPost: boolean;
   onPost: () => void;
+  /** Optional hook for the "attach image" button. Button is hidden when omitted. */
+  onAttachImage?: () => void;
+  attachDisabled?: boolean;
   variant: 'native' | 'web';
 };
 
@@ -15,14 +20,39 @@ export function ComposeSheetFooterBar({
   submitting,
   canPost,
   onPost,
+  onAttachImage,
+  attachDisabled = false,
   variant,
 }: ComposeSheetFooterBarProps) {
   const { theme } = useTheme();
 
-  const countLabel = (
-    <Text variant="small" color="neutral_500">
-      {charCount}/2000
-    </Text>
+  const attachButton = onAttachImage ? (
+    <Pressable
+      onPress={onAttachImage}
+      disabled={attachDisabled}
+      hitSlop={10}
+      accessibilityLabel="Attach image"
+      style={[
+        Atoms.p_xs,
+        Atoms.rounded_md,
+        { opacity: attachDisabled ? 0.4 : 1 },
+      ]}
+    >
+      <Ionicons
+        name="image-outline"
+        size={22}
+        color={theme.palette.neutral_700}
+      />
+    </Pressable>
+  ) : null;
+
+  const leading = (
+    <View style={[Atoms.flex_row, Atoms.items_center, Atoms.gap_sm]}>
+      {attachButton}
+      <Text variant="small" color="neutral_500">
+        {charCount}/2000
+      </Text>
+    </View>
   );
 
   const postSlot = (
@@ -68,10 +98,9 @@ export function ComposeSheetFooterBar({
           Atoms.px_lg,
           theme.atoms.bg,
           borderTop,
-          { paddingBottom: 24 },
         ]}
       >
-        {countLabel}
+        {leading}
         {postSlot}
       </View>
     );
@@ -81,15 +110,15 @@ export function ComposeSheetFooterBar({
     <View
       style={[
         Atoms.flex_row,
-        Atoms.justify_end,
+        Atoms.justify_between,
+        Atoms.items_center,
         Atoms.py_md,
         Atoms.px_lg,
         theme.atoms.bg,
         borderTop,
-        { paddingBottom: 24 },
       ]}
     >
-      {countLabel}
+      {leading}
     </View>
   );
 }