Merge upstream develop

Author: github-actions[bot]

apps/polycentric/app/(tabs)/_layout.tsx

@@ -35,8 +35,8 @@ export default function TabsLayout() {
         <NativeTabs.Trigger.Icon sf="bell" md="notifications" />
       </NativeTabs.Trigger>
 
-      <NativeTabs.Trigger name="verify">
-        <NativeTabs.Trigger.Label>Verify</NativeTabs.Trigger.Label>
+      <NativeTabs.Trigger name="verifications">
+        <NativeTabs.Trigger.Label>Verifications</NativeTabs.Trigger.Label>
         <NativeTabs.Trigger.Icon sf="checkmark.seal" md="verified" />
       </NativeTabs.Trigger>
 

apps/polycentric/app/_layout.tsx

@@ -1,3 +1,4 @@
+import { Toaster } from '@/src/common/components/toast';
 import { LinkPreviewsProvider } from '@/src/common/link-previews';
 import { PolycentricProvider } from '@/src/common/lib/polycentric-hooks';
 import { Atoms, ThemeProvider, useTheme } from '@/src/common/theme';
@@ -96,6 +97,7 @@ export default function RootLayout() {
               <TrueSheetProvider>
                 <RootStack />
                 <PortalHost />
+                <Toaster />
               </TrueSheetProvider>
             </PolycentricProvider>
           </LinkPreviewsProvider>

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

@@ -19,13 +19,19 @@ export type ScrollViewProps = RNScrollViewProps & {
     | undefined;
 };
 
-export function ScrollView({
-  HeaderComponent,
-  contentContainerStyle,
-  onScroll: _ignoredOnScroll,
-  children,
-  ...rest
-}: ScrollViewProps) {
+export const ScrollView = React.forwardRef<
+  Animated.ScrollView,
+  ScrollViewProps
+>(function ScrollView(
+  {
+    HeaderComponent,
+    contentContainerStyle,
+    onScroll: _ignoredOnScroll,
+    children,
+    ...rest
+  },
+  ref,
+) {
   const { onScroll, headerHeight, headerAnimatedStyle, onHeaderLayout } =
     useHidingHeader();
 
@@ -40,6 +46,7 @@ export function ScrollView({
       ) : null}
 
       <Animated.ScrollView
+        ref={ref}
         {...rest}
         onScroll={onScroll}
         scrollEventThrottle={16}
@@ -52,4 +59,4 @@ export function ScrollView({
       </Animated.ScrollView>
     </View>
   );
-}
+});

apps/polycentric/src/common/components/toast/Toast.tsx

@@ -0,0 +1,111 @@
+import { Text } from '@/src/common/components';
+import Icon, { IconName } from '@/src/common/components/Icon';
+import {
+  Atoms,
+  BorderRadius,
+  PaletteColorToken,
+  useTheme,
+} from '@/src/common/theme';
+import * as ToastPrimitive from '@rn-primitives/toast';
+import { useCallback, useEffect } from 'react';
+import { Pressable, View } from 'react-native';
+import Animated, {
+  LinearTransition,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { runOnJS } from 'react-native-worklets';
+import { ToastData, ToastVariant, useToastStore } from './useToastStore';
+
+const ENTER_MS = 220;
+const EXIT_MS = 160;
+
+const VARIANTS: Record<
+  ToastVariant,
+  { icon: IconName; color: PaletteColorToken }
+> = {
+  info: { icon: 'notification', color: 'primary_500' },
+  success: { icon: 'checkmarkCircle', color: 'positive_500' },
+  error: { icon: 'ban', color: 'negative_500' },
+  warning: { icon: 'flag', color: 'warning_500' },
+};
+
+const shadow = {
+  shadowColor: '#000',
+  shadowOpacity: 0.12,
+  shadowRadius: 12,
+  shadowOffset: { width: 0, height: 4 },
+  elevation: 4,
+};
+
+export function Toast({ toast }: { toast: ToastData }) {
+  const { theme } = useTheme();
+  const dismiss = useToastStore((s) => s.dismiss);
+  const progress = useSharedValue(0);
+  const variant = VARIANTS[toast.variant];
+
+  const close = useCallback(() => {
+    progress.value = withTiming(0, { duration: EXIT_MS }, (finished) => {
+      if (finished) runOnJS(dismiss)(toast.id);
+    });
+  }, [progress, dismiss, toast.id]);
+
+  useEffect(() => {
+    progress.value = withTiming(1, { duration: ENTER_MS });
+    if (toast.duration === null) return;
+    const timer = setTimeout(close, toast.duration);
+    return () => clearTimeout(timer);
+  }, [progress, close, toast.duration]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    // Drop down from above on enter, lift back up on exit.
+    transform: [{ translateY: (progress.value - 1) * 16 }],
+  }));
+
+  return (
+    <Animated.View layout={LinearTransition} style={animatedStyle}>
+      <ToastPrimitive.Root
+        open
+        onOpenChange={(next) => {
+          if (!next) close();
+        }}
+        style={[
+          Atoms.flex_row,
+          Atoms.items_center,
+          Atoms.gap_sm,
+          Atoms.p_lg,
+          {
+            borderRadius: BorderRadius.full,
+            backgroundColor: theme.palette.neutral_0,
+            borderWidth: 1,
+            borderColor: theme.palette.neutral_50,
+            ...shadow,
+          },
+        ]}
+      >
+        <Icon name={variant.icon} color={variant.color} size={20} />
+        <View style={Atoms.flex_1}>
+          <ToastPrimitive.Title asChild>
+            <Text variant="body" fontWeight="semibold" style={theme.atoms.text}>
+              {toast.title}
+            </Text>
+          </ToastPrimitive.Title>
+          {toast.description ? (
+            <ToastPrimitive.Description asChild>
+              <Text variant="small" style={theme.atoms.text_neutral_medium}>
+                {toast.description}
+              </Text>
+            </ToastPrimitive.Description>
+          ) : null}
+        </View>
+        <ToastPrimitive.Close asChild>
+          <Pressable hitSlop={8}>
+            <Icon name="close" color="neutral_500" size={18} />
+          </Pressable>
+        </ToastPrimitive.Close>
+      </ToastPrimitive.Root>
+    </Animated.View>
+  );
+}

apps/polycentric/src/common/components/toast/Toaster.tsx

@@ -0,0 +1,34 @@
+import { Atoms, Spacing } from '@/src/common/theme';
+import { Portal } from '@rn-primitives/portal';
+import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Toast } from './Toast';
+import { useToastStore } from './useToastStore';
+
+export function Toaster() {
+  const toasts = useToastStore((s) => s.toasts);
+  const insets = useSafeAreaInsets();
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <Portal name="toaster">
+      <View
+        pointerEvents="box-none"
+        style={[
+          Atoms.absolute,
+          Atoms.inset_0,
+          Atoms.justify_start,
+          Atoms.px_lg,
+          Atoms.gap_sm,
+          // Safe-area inset is dynamic, so it stays out of the Atoms list.
+          { paddingTop: insets.top + Spacing.sm },
+        ]}
+      >
+        {toasts.map((toast) => (
+          <Toast key={toast.id} toast={toast} />
+        ))}
+      </View>
+    </Portal>
+  );
+}

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

@@ -0,0 +1,4 @@
+export { Toaster } from './Toaster';
+export { toast, useToast } from './useToast';
+export { useToastStore } from './useToastStore';
+export type { ToastData, ToastOptions, ToastVariant } from './useToastStore';

apps/polycentric/src/common/components/toast/useToast.tsx

@@ -0,0 +1,23 @@
+import { ToastOptions, ToastVariant, useToastStore } from './useToastStore';
+
+function trigger(variant: ToastVariant) {
+  return (title: string, options?: ToastOptions) =>
+    useToastStore.getState().show(title, { ...options, variant });
+}
+
+// Imperative API usable outside of components (event handlers, async flows).
+export const toast = {
+  show: (title: string, options?: ToastOptions) =>
+    useToastStore.getState().show(title, options),
+  info: trigger('info'),
+  success: trigger('success'),
+  error: trigger('error'),
+  warning: trigger('warning'),
+  dismiss: (id: string) => useToastStore.getState().dismiss(id),
+  dismissAll: () => useToastStore.getState().dismissAll(),
+};
+
+// Hook form for components; the triggers are stable and read live store state.
+export function useToast() {
+  return toast;
+}

apps/polycentric/src/common/components/toast/useToastStore.tsx

@@ -0,0 +1,51 @@
+import { create } from 'zustand';
+
+export type ToastVariant = 'info' | 'success' | 'error' | 'warning';
+
+export interface ToastData {
+  id: string;
+  title: string;
+  description?: string;
+  variant: ToastVariant;
+  // Auto-dismiss delay in ms; null keeps it up until dismissed.
+  duration: number | null;
+}
+
+export interface ToastOptions {
+  description?: string;
+  variant?: ToastVariant;
+  duration?: number | null;
+}
+
+const MAX_VISIBLE = 4;
+const DEFAULT_DURATION = 4000;
+
+interface ToastStore {
+  toasts: ToastData[];
+  show: (title: string, options?: ToastOptions) => string;
+  dismiss: (id: string) => void;
+  dismissAll: () => void;
+}
+
+let nextId = 0;
+
+export const useToastStore = create<ToastStore>((set) => ({
+  toasts: [],
+  show: (title, options = {}) => {
+    const id = `toast-${(nextId += 1)}`;
+    const toast: ToastData = {
+      id,
+      title,
+      description: options.description,
+      variant: options.variant ?? 'info',
+      duration:
+        options.duration === undefined ? DEFAULT_DURATION : options.duration,
+    };
+    // Drop the oldest once the stack is full.
+    set((s) => ({ toasts: [...s.toasts, toast].slice(-MAX_VISIBLE) }));
+    return id;
+  },
+  dismiss: (id) =>
+    set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) })),
+  dismissAll: () => set({ toasts: [] }),
+}));

apps/polycentric/src/features/composer/hooks/useComposer.ts

@@ -1,3 +1,4 @@
+import { toast } from '@/src/common/components/toast';
 import { useLinkPreviews } from '@/src/common/link-previews';
 import { processAndUploadImage } from '@/src/common/lib/images/processAndUploadImage';
 import {
@@ -346,6 +347,7 @@ export function useComposer({
       await client.commitEvent(signedEvent, content);
 
       setSubmitting(false);
+      toast.success(isReply ? 'Reply posted' : 'Post published');
       onClose();
       resetAll();
 

apps/polycentric/src/features/verifications/CopyLinkComponent.tsx

@@ -0,0 +1,54 @@
+import { Text } from '@/src/common/components';
+import Icon from '@/src/common/components/Icon';
+import { useToast } from '@/src/common/components/toast';
+import { Atoms, useTheme } from '@/src/common/theme';
+import * as Clipboard from 'expo-clipboard';
+import { useEffect, useRef, useState } from 'react';
+import { Pressable } from 'react-native';
+
+export function CopyLinkComponent({ link }: { link: string }) {
+  const { theme } = useTheme();
+  const toast = useToast();
+  const [copied, setCopied] = useState(false);
+  const timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  useEffect(() => () => clearTimeout(timeout.current), []);
+
+  const onCopy = () => {
+    void Clipboard.setStringAsync(link);
+    setCopied(true);
+    toast.success('Copied to clipboard');
+    clearTimeout(timeout.current);
+    timeout.current = setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <Pressable
+      onPress={onCopy}
+      style={({ hovered }) => [
+        Atoms.flex_row,
+        Atoms.items_center,
+        Atoms.gap_sm,
+        Atoms.p_md,
+        Atoms.rounded_md,
+        {
+          backgroundColor: hovered
+            ? theme.palette.neutral_200
+            : theme.palette.neutral_100,
+        },
+      ]}
+    >
+      <Text
+        variant="body"
+        style={[Atoms.flex_1, theme.atoms.text, { fontFamily: 'monospace' }]}
+      >
+        {link}
+      </Text>
+      <Icon
+        name={copied ? 'checkmark' : 'copy'}
+        size={18}
+        color={copied ? 'positive_500' : 'neutral_500'}
+      />
+    </Pressable>
+  );
+}