@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/screens/UserListScreen.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+type ListMode = 'followers' | 'following';
+interface UserListScreenProps extends BaseScreenProps {
+    userId: string;
+    mode: ListMode;
+    initialCount?: number;
+}
+declare const UserListScreen: React.FC<UserListScreenProps>;
+export default UserListScreen;

package/src/ui/screens/UserListScreen.js

@@ -0,0 +1,249 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const styles_1 = require("../styles");
+const Avatar_1 = __importDefault(require("../components/Avatar"));
+const components_1 = require("../components");
+const vector_icons_1 = require("@expo/vector-icons");
+const useI18n_1 = require("../hooks/useI18n");
+const OxyContext_1 = require("../context/OxyContext");
+const core_1 = require("@oxyhq/core");
+const PAGE_SIZE = 20;
+const UserListScreen = ({ userId, mode, initialCount, theme, goBack, navigate, }) => {
+    const { oxyServices, user: currentUser } = (0, OxyContext_1.useOxy)();
+    const [users, setUsers] = (0, react_1.useState)([]);
+    const [total, setTotal] = (0, react_1.useState)(initialCount ?? 0);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [isLoadingMore, setIsLoadingMore] = (0, react_1.useState)(false);
+    const [isRefreshing, setIsRefreshing] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [hasMore, setHasMore] = (0, react_1.useState)(true);
+    const colors = (0, styles_1.useThemeColors)(theme ?? 'light');
+    const styles = createStyles(colors);
+    const { t } = (0, useI18n_1.useI18n)();
+    const currentUserId = currentUser?.id || currentUser?._id;
+    const fetchUsers = (0, react_1.useCallback)(async (offset = 0, isRefresh = false) => {
+        if (!userId) {
+            setError('No user ID provided');
+            setIsLoading(false);
+            return;
+        }
+        try {
+            if (isRefresh) {
+                setIsRefreshing(true);
+            }
+            else if (offset === 0) {
+                setIsLoading(true);
+            }
+            else {
+                setIsLoadingMore(true);
+            }
+            setError(null);
+            const response = mode === 'followers'
+                ? await oxyServices.getUserFollowers(userId, { limit: PAGE_SIZE, offset })
+                : await oxyServices.getUserFollowing(userId, { limit: PAGE_SIZE, offset });
+            const newUsers = mode === 'followers' ? response.followers : response.following;
+            if (offset === 0 || isRefresh) {
+                setUsers(newUsers);
+            }
+            else {
+                setUsers((prev) => [...prev, ...newUsers]);
+            }
+            setTotal(response.total);
+            setHasMore(response.hasMore);
+        }
+        catch (err) {
+            core_1.logger.error(`Failed to fetch ${mode}`, err instanceof Error ? err : new Error(String(err)), {
+                component: 'UserListScreen',
+            });
+            setError(`Failed to load ${mode}. Please try again.`);
+        }
+        finally {
+            setIsLoading(false);
+            setIsLoadingMore(false);
+            setIsRefreshing(false);
+        }
+    }, [userId, mode, oxyServices]);
+    (0, react_1.useEffect)(() => {
+        fetchUsers(0);
+    }, [fetchUsers]);
+    const handleLoadMore = (0, react_1.useCallback)(() => {
+        if (!isLoadingMore && hasMore && !isLoading) {
+            fetchUsers(users.length);
+        }
+    }, [isLoadingMore, hasMore, isLoading, users.length, fetchUsers]);
+    const handleRefresh = (0, react_1.useCallback)(() => {
+        fetchUsers(0, true);
+    }, [fetchUsers]);
+    const handleUserPress = (0, react_1.useCallback)((user) => {
+        const targetUserId = user.id || user._id;
+        if (targetUserId && navigate) {
+            navigate('Profile', { userId: targetUserId });
+        }
+    }, [navigate]);
+    const renderUser = (0, react_1.useCallback)(({ item }) => {
+        const itemUserId = item.id || item._id || '';
+        const isCurrentUser = itemUserId === currentUserId;
+        const description = typeof item.description === 'string' ? item.description : '';
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: styles.userItem, onPress: () => handleUserPress(item), activeOpacity: 0.7, children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, { uri: item.avatar
+                        ? oxyServices.getFileDownloadUrl(item.avatar, 'thumb')
+                        : undefined, name: item.username || item.name?.full, size: 48 }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.userInfo, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.userName, numberOfLines: 1, children: item.name?.full || item.username || 'Unknown User' }), item.username && ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.userHandle, numberOfLines: 1, children: ["@", item.username] })), description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.userBio, numberOfLines: 2, children: description })) : null] }), !isCurrentUser && itemUserId ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.followButtonWrapper, children: (0, jsx_runtime_1.jsx)(components_1.FollowButton, { userId: itemUserId, size: "small" }) })) : null] }));
+    }, [colors, styles, handleUserPress, currentUserId, oxyServices]);
+    const renderEmpty = (0, react_1.useCallback)(() => {
+        if (isLoading)
+            return null;
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.emptyContainer, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: mode === 'followers' ? 'people-outline' : 'heart-outline', size: 64, color: colors.secondaryText }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyTitle, children: mode === 'followers'
+                        ? t('userList.noFollowers') || 'No followers yet'
+                        : t('userList.noFollowing') || 'Not following anyone' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptySubtitle, children: mode === 'followers'
+                        ? t('userList.noFollowersDesc') || 'When people follow this user, they will appear here.'
+                        : t('userList.noFollowingDesc') || 'When this user follows people, they will appear here.' })] }));
+    }, [isLoading, mode, colors, styles, t]);
+    const renderFooter = (0, react_1.useCallback)(() => {
+        if (!isLoadingMore)
+            return null;
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.footerLoader, children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: colors.primary }) }));
+    }, [isLoadingMore, colors, styles]);
+    const title = mode === 'followers'
+        ? (t('userList.followers') || 'Followers')
+        : (t('userList.following') || 'Following');
+    if (isLoading && users.length === 0) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.header, children: [goBack && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: goBack, style: styles.backButton, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "arrow-back", size: 24, color: colors.text }) })), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.headerTitle, children: title }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.headerRight })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.loadingContainer, children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "large", color: colors.primary }) })] }));
+    }
+    if (error) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.header, children: [goBack && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: goBack, style: styles.backButton, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "arrow-back", size: 24, color: colors.text }) })), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.headerTitle, children: title }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.headerRight })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.errorContainer, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "alert-circle", size: 48, color: colors.error }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.errorText, children: error }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.retryButton, onPress: () => fetchUsers(0), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.retryButtonText, children: t('common.retry') || 'Retry' }) })] })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.header, children: [goBack && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: goBack, style: styles.backButton, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "arrow-back", size: 24, color: colors.text }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.headerTitleContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.headerTitle, children: title }), total > 0 && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.headerCount, children: total })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.headerRight })] }), (0, jsx_runtime_1.jsx)(react_native_1.FlatList, { data: users, renderItem: renderUser, keyExtractor: (item, index) => item.id || item._id || `user-${index}`, contentContainerStyle: styles.listContent, ItemSeparatorComponent: () => (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.separator }), ListEmptyComponent: renderEmpty, ListFooterComponent: renderFooter, onEndReached: handleLoadMore, onEndReachedThreshold: 0.3, refreshControl: (0, jsx_runtime_1.jsx)(react_native_1.RefreshControl, { refreshing: isRefreshing, onRefresh: handleRefresh, tintColor: colors.primary, colors: [colors.primary] }) })] }));
+};
+const createStyles = (colors) => react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: colors.background,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: colors.border,
+    },
+    backButton: {
+        padding: 8,
+        marginRight: 8,
+    },
+    headerTitleContainer: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: colors.text,
+    },
+    headerCount: {
+        fontSize: 16,
+        color: colors.secondaryText,
+        marginLeft: 8,
+    },
+    headerRight: {
+        width: 40,
+    },
+    loadingContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    errorContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 32,
+    },
+    errorText: {
+        fontSize: 16,
+        color: colors.error,
+        textAlign: 'center',
+        marginTop: 16,
+        marginBottom: 24,
+    },
+    retryButton: {
+        backgroundColor: colors.primary,
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        borderRadius: 8,
+    },
+    retryButtonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    listContent: {
+        flexGrow: 1,
+    },
+    userItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+    userInfo: {
+        flex: 1,
+        marginLeft: 12,
+        marginRight: 8,
+    },
+    userName: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: colors.text,
+    },
+    userHandle: {
+        fontSize: 14,
+        color: colors.secondaryText,
+        marginTop: 2,
+    },
+    userBio: {
+        fontSize: 14,
+        color: colors.text,
+        marginTop: 4,
+        opacity: 0.8,
+    },
+    followButtonWrapper: {
+        marginLeft: 'auto',
+    },
+    separator: {
+        height: 1,
+        backgroundColor: colors.border,
+        marginLeft: 76,
+    },
+    emptyContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 32,
+        paddingTop: 80,
+    },
+    emptyTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: colors.text,
+        marginTop: 16,
+        textAlign: 'center',
+    },
+    emptySubtitle: {
+        fontSize: 14,
+        color: colors.secondaryText,
+        marginTop: 8,
+        textAlign: 'center',
+    },
+    footerLoader: {
+        paddingVertical: 16,
+        alignItems: 'center',
+    },
+});
+exports.default = UserListScreen;

package/src/ui/screens/WelcomeNewUserScreen.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+/**
+ * Post-signup welcome & onboarding screen.
+ * - Greets the newly registered user
+ * - Lets them immediately set / change their avatar using existing FileManagement picker
+ * - Only when the user presses "Continue" do we invoke onAuthenticated to finish flow & close sheet
+ */
+declare const WelcomeNewUserScreen: React.FC<BaseScreenProps & {
+    newUser?: any;
+}>;
+export default WelcomeNewUserScreen;

package/src/ui/screens/WelcomeNewUserScreen.js

@@ -0,0 +1,304 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const Avatar_1 = __importDefault(require("../components/Avatar"));
+const vector_icons_1 = require("@expo/vector-icons");
+const sonner_1 = require("../../lib/sonner");
+const styles_1 = require("../styles");
+const fonts_1 = require("../styles/fonts");
+const themeUtils_1 = require("../utils/themeUtils");
+const GroupedPillButtons_1 = __importDefault(require("../components/internal/GroupedPillButtons"));
+const useI18n_1 = require("../hooks/useI18n");
+const OxyContext_1 = require("../context/OxyContext");
+const useAccountMutations_1 = require("../hooks/mutations/useAccountMutations");
+const core_1 = require("@oxyhq/core");
+const GAP = 12;
+const INNER_GAP = 8;
+// Individual animated progress dot
+const AnimatedProgressDot = ({ isActive, colors, styles }) => {
+    const width = (0, react_native_reanimated_1.useSharedValue)(isActive ? 12 : 6);
+    const backgroundColor = (0, react_native_reanimated_1.useSharedValue)(isActive ? colors.primary : colors.border);
+    (0, react_1.useEffect)(() => {
+        width.value = (0, react_native_reanimated_1.withTiming)(isActive ? 12 : 6, { duration: 300 });
+        backgroundColor.value = (0, react_native_reanimated_1.withTiming)(isActive ? colors.primary : colors.border, { duration: 300 });
+    }, [isActive, colors.primary, colors.border, width, backgroundColor]);
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        width: width.value,
+        backgroundColor: backgroundColor.value,
+    }));
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
+            styles.progressDot,
+            animatedStyle,
+        ] }));
+};
+/**
+ * Post-signup welcome & onboarding screen.
+ * - Greets the newly registered user
+ * - Lets them immediately set / change their avatar using existing FileManagement picker
+ * - Only when the user presses "Continue" do we invoke onAuthenticated to finish flow & close sheet
+ */
+const WelcomeNewUserScreen = ({ navigate, onAuthenticated, theme, newUser, }) => {
+    // Use useOxy() hook for OxyContext values
+    const { user, oxyServices } = (0, OxyContext_1.useOxy)();
+    const { t } = (0, useI18n_1.useI18n)();
+    const updateProfileMutation = (0, useAccountMutations_1.useUpdateProfile)();
+    const currentUser = user || newUser; // fallback
+    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
+    const colors = (0, styles_1.useThemeColors)(normalizedTheme);
+    const styles = (0, react_1.useMemo)(() => createStyles(normalizedTheme), [normalizedTheme]);
+    // Animation state
+    const fadeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const slideAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const [currentStep, setCurrentStep] = (0, react_1.useState)(0);
+    // Track avatar separately to ensure it updates immediately after selection
+    const [selectedAvatarId, setSelectedAvatarId] = (0, react_1.useState)(currentUser?.avatar);
+    // Update selectedAvatarId when user changes
+    (0, react_1.useEffect)(() => {
+        if (user?.avatar) {
+            setSelectedAvatarId(user.avatar);
+        }
+        else if (newUser?.avatar) {
+            setSelectedAvatarId(newUser.avatar);
+        }
+    }, [user?.avatar, newUser?.avatar]);
+    const avatarUri = selectedAvatarId ? oxyServices.getFileDownloadUrl(selectedAvatarId, 'thumb') : undefined;
+    // Steps content
+    const welcomeTitle = currentUser?.username
+        ? (t('welcomeNew.welcome.titleWithName', { username: currentUser.username }) || `Welcome, ${currentUser.username} 👋`)
+        : (t('welcomeNew.welcome.title') || 'Welcome 👋');
+    const steps = [
+        { key: 'welcome', title: welcomeTitle, body: t('welcomeNew.welcome.body') || "You just created an account in a calm, ethical space. A few quick things — then you're in." },
+        {
+            key: 'account', title: t('welcomeNew.account.title') || 'One Account. Simple.', bullets: [
+                t('welcomeNew.account.bullets.0') || 'One identity across everything',
+                t('welcomeNew.account.bullets.1') || 'No re‑signing in all the time',
+                t('welcomeNew.account.bullets.2') || 'Your preferences stay with you',
+            ]
+        },
+        {
+            key: 'principles', title: t('welcomeNew.principles.title') || 'What We Stand For', bullets: [
+                t('welcomeNew.principles.bullets.0') || 'Privacy by default',
+                t('welcomeNew.principles.bullets.1') || 'No manipulative feeds',
+                t('welcomeNew.principles.bullets.2') || 'You decide what to share',
+                t('welcomeNew.principles.bullets.3') || 'No selling your data',
+            ]
+        },
+        { key: 'karma', title: t('welcomeNew.karma.title') || 'Karma = Trust & Growth', body: t('welcomeNew.karma.body') || 'Oxy Karma is a points system that reacts to what you do. Helpful, respectful, constructive actions earn it. Harmful or low‑effort stuff chips it away. More karma can unlock benefits; low karma can limit features. It keeps things fair and rewards real contribution.' },
+        { key: 'avatar', title: t('welcomeNew.avatar.title') || 'Make It Yours', body: t('welcomeNew.avatar.body') || 'Add an avatar so people recognize you. It will show anywhere you show up here. Skip if you want — you can add it later.', showAvatar: true },
+        { key: 'ready', title: t('welcomeNew.ready.title') || "You're Ready", body: t('welcomeNew.ready.body') || 'Explore. Contribute. Earn karma. Stay in control.' }
+    ];
+    const totalSteps = steps.length;
+    const avatarStepIndex = steps.findIndex(s => s.showAvatar);
+    const animateToStepCallback = (0, react_1.useCallback)((next) => {
+        react_native_1.Animated.timing(fadeAnim, { toValue: 0, duration: 180, useNativeDriver: react_native_1.Platform.OS !== 'web' }).start(() => {
+            setCurrentStep(next);
+            slideAnim.setValue(-40);
+            react_native_1.Animated.parallel([
+                react_native_1.Animated.timing(fadeAnim, { toValue: 1, duration: 220, useNativeDriver: react_native_1.Platform.OS !== 'web' }),
+                react_native_1.Animated.spring(slideAnim, { toValue: 0, useNativeDriver: react_native_1.Platform.OS !== 'web', friction: 9 })
+            ]).start();
+        });
+    }, [fadeAnim, slideAnim]);
+    const nextStep = (0, react_1.useCallback)(() => { if (currentStep < totalSteps - 1)
+        animateToStepCallback(currentStep + 1); }, [currentStep, totalSteps, animateToStepCallback]);
+    const prevStep = (0, react_1.useCallback)(() => { if (currentStep > 0)
+        animateToStepCallback(currentStep - 1); }, [currentStep, animateToStepCallback]);
+    const skipToAvatar = (0, react_1.useCallback)(() => { if (avatarStepIndex >= 0)
+        animateToStepCallback(avatarStepIndex); }, [avatarStepIndex, animateToStepCallback]);
+    const finish = (0, react_1.useCallback)(() => { if (onAuthenticated && currentUser)
+        onAuthenticated(currentUser); }, [onAuthenticated, currentUser]);
+    const openAvatarPicker = (0, react_1.useCallback)(() => {
+        // Ensure we're on the avatar step before opening picker
+        if (avatarStepIndex >= 0 && currentStep !== avatarStepIndex) {
+            animateToStepCallback(avatarStepIndex);
+        }
+        navigate?.('FileManagement', {
+            selectMode: true,
+            multiSelect: false,
+            disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
+            afterSelect: 'none', // Don't navigate away - stay on current screen
+            onSelect: async (file) => {
+                if (!file.contentType.startsWith('image/')) {
+                    sonner_1.toast.error(t('editProfile.toasts.selectImage') || 'Please select an image file');
+                    return;
+                }
+                try {
+                    // Update file visibility to public for avatar
+                    await (0, core_1.updateAvatarVisibility)(file.id, oxyServices, 'WelcomeNewUser');
+                    // Update the avatar immediately in local state
+                    setSelectedAvatarId(file.id);
+                    // Update user using TanStack Query mutation
+                    await updateProfileMutation.mutateAsync({ avatar: file.id });
+                    sonner_1.toast.success(t('editProfile.toasts.avatarUpdated') || 'Avatar updated');
+                    // Ensure we stay on the avatar step
+                    if (avatarStepIndex >= 0 && currentStep !== avatarStepIndex) {
+                        animateToStepCallback(avatarStepIndex);
+                    }
+                }
+                catch (e) {
+                    sonner_1.toast.error((e instanceof Error ? e.message : null) || t('editProfile.toasts.updateAvatarFailed') || 'Failed to update avatar');
+                }
+            }
+        });
+    }, [navigate, updateProfileMutation, oxyServices, currentStep, avatarStepIndex, animateToStepCallback, t]);
+    const step = steps[currentStep];
+    const pillButtons = (0, react_1.useMemo)(() => {
+        if (currentStep === totalSteps - 1) {
+            return [
+                { text: t('welcomeNew.actions.back') || 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
+                { text: t('welcomeNew.actions.enter') || 'Enter', onPress: finish, icon: 'log-in-outline', variant: 'primary' },
+            ];
+        }
+        if (currentStep === 0) {
+            const arr = [];
+            if (avatarStepIndex > 0)
+                arr.push({ text: t('welcomeNew.actions.skip') || 'Skip', onPress: skipToAvatar, icon: 'play-skip-forward', variant: 'transparent' });
+            arr.push({ text: t('welcomeNew.actions.next') || 'Next', onPress: nextStep, icon: 'arrow-forward', variant: 'primary' });
+            return arr;
+        }
+        if (step.showAvatar) {
+            return [
+                { text: t('welcomeNew.actions.back') || 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
+                { text: avatarUri ? (t('welcomeNew.actions.continue') || 'Continue') : (t('welcomeNew.actions.skip') || 'Skip'), onPress: nextStep, icon: 'arrow-forward', variant: 'primary' },
+            ];
+        }
+        return [
+            { text: t('welcomeNew.actions.back') || 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
+            { text: t('welcomeNew.actions.next') || 'Next', onPress: nextStep, icon: 'arrow-forward', variant: 'primary' },
+        ];
+    }, [currentStep, totalSteps, prevStep, nextStep, finish, skipToAvatar, avatarStepIndex, step.showAvatar, avatarUri]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.progressContainer, children: steps.map((s, i) => ((0, jsx_runtime_1.jsx)(AnimatedProgressDot, { isActive: i === currentStep, colors: colors, styles: styles }, s.key))) }), (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.scrollInner, styles.contentContainer], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.header, styles.sectionSpacing], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, { color: colors.text }], children: step.title }), step.body && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.body, { color: colors.secondaryText }], children: step.body })] }), Array.isArray(step.bullets) && step.bullets.length > 0 && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.bulletContainer, styles.sectionSpacing], children: step.bullets.map(b => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.bulletRow, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "ellipse", size: 8, color: colors.primary, style: { marginTop: 6 } }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.bulletText, { color: colors.secondaryText }], children: b })] }, b))) })), step.showAvatar && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.avatarSection, styles.sectionSpacing], children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, { size: 120, name: currentUser?.name?.full || currentUser?.name?.first || currentUser?.username, uri: avatarUri, backgroundColor: `${colors.primary}20`, style: styles.avatar }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles.changeAvatarButton, { backgroundColor: colors.primary }], onPress: openAvatarPicker, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "image-outline", size: 18, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.changeAvatarText, children: avatarUri ? (t('welcomeNew.avatar.change') || 'Change Avatar') : (t('welcomeNew.avatar.add') || 'Add Avatar') })] })] })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.sectionSpacing, children: (0, jsx_runtime_1.jsx)(GroupedPillButtons_1.default, { buttons: pillButtons, colors: colors }) })] }) })] }));
+};
+const createStyles = (theme) => {
+    const isDark = theme === 'dark';
+    const border = isDark ? '#333333' : '#E0E0E0';
+    return react_native_1.StyleSheet.create({
+        container: {
+            width: '100%',
+            paddingHorizontal: 20,
+        },
+        scrollInner: {
+            paddingTop: 0,
+        },
+        contentContainer: {
+            width: '100%',
+            maxWidth: 420,
+            alignSelf: 'center',
+        },
+        sectionSpacing: {
+            marginBottom: GAP,
+        },
+        header: {
+            alignItems: 'flex-start',
+            width: '100%',
+            gap: INNER_GAP / 2,
+        },
+        title: {
+            fontSize: 42,
+            fontFamily: fonts_1.fontFamilies.interBold,
+            fontWeight: react_native_1.Platform.OS === 'web' ? 'bold' : undefined,
+            letterSpacing: -1,
+            textAlign: 'left',
+        },
+        body: {
+            fontSize: 16,
+            lineHeight: 22,
+            textAlign: 'left',
+            maxWidth: 320,
+            alignSelf: 'flex-start',
+        },
+        bulletContainer: {
+            gap: INNER_GAP,
+            width: '100%',
+        },
+        bulletRow: {
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            gap: 10,
+        },
+        bulletText: {
+            flex: 1,
+            fontSize: 15,
+            lineHeight: 20,
+        },
+        avatarSection: {
+            width: '100%',
+            alignItems: 'center',
+        },
+        avatar: {
+            marginBottom: INNER_GAP,
+        },
+        changeAvatarButton: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: 18,
+            paddingVertical: 10,
+            borderRadius: 28,
+            gap: 8,
+            shadowOpacity: 0,
+            shadowRadius: 0,
+            shadowOffset: { width: 0, height: 0 },
+            elevation: 0,
+            ...(react_native_1.Platform.OS === 'web' ? { boxShadow: 'none' } : null),
+        },
+        changeAvatarText: {
+            color: '#FFFFFF',
+            fontSize: 15,
+            fontWeight: '600',
+        },
+        progressContainer: {
+            flexDirection: 'row',
+            width: '100%',
+            justifyContent: 'center',
+            marginTop: 24, // Space for bottom sheet handle (~20px) + small buffer
+            marginBottom: 24, // Equal spacing below dots
+        },
+        progressDot: {
+            height: 6,
+            width: 6,
+            borderRadius: 3,
+            marginHorizontal: 3,
+            backgroundColor: border,
+        },
+    });
+};
+exports.default = WelcomeNewUserScreen;

package/src/ui/screens/karma/KarmaAboutScreen.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../../types/navigation';
+declare const KarmaAboutScreen: React.FC<BaseScreenProps>;
+export default KarmaAboutScreen;

package/src/ui/screens/karma/KarmaAboutScreen.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const components_1 = require("../../components");
+const useI18n_1 = require("../../hooks/useI18n");
+const useThemeStyles_1 = require("../../hooks/useThemeStyles");
+const themeUtils_1 = require("../../utils/themeUtils");
+const useColorScheme_1 = require("../../hooks/useColorScheme");
+const fonts_1 = require("../../styles/fonts");
+const KarmaAboutScreen = ({ goBack, theme }) => {
+    const { t } = (0, useI18n_1.useI18n)();
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(normalizedTheme, colorScheme);
+    // Override primaryColor for Karma screens (purple instead of blue)
+    const primaryColor = '#d169e5';
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { backgroundColor: themeStyles.backgroundColor }], children: [(0, jsx_runtime_1.jsx)(components_1.Header, { title: t('karma.about.title') || 'About Karma', subtitle: t('karma.about.subtitle') || 'Learn about the karma system', onBack: goBack, elevation: "subtle" }), (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { contentContainerStyle: styles.contentContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.paragraph, { color: themeStyles.textColor }], children: t('karma.about.intro') || 'Karma is a recognition of your positive actions in the Oxy Ecosystem. It cannot be sent or received directly, only earned by contributing to the community.' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.section, { color: primaryColor }], children: t('karma.about.how.title') || 'How to Earn Karma' }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.paragraph, { color: themeStyles.textColor }], children: ["\u2022 ", t('karma.about.how.help') || 'Helping other users', '\n', "\u2022 ", t('karma.about.how.report') || 'Reporting bugs', '\n', "\u2022 ", t('karma.about.how.contribute') || 'Contributing content', '\n', "\u2022 ", t('karma.about.how.participate') || 'Participating in events', '\n', "\u2022 ", t('karma.about.how.other') || 'Other positive actions'] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.section, { color: primaryColor }], children: t('karma.about.why.title') || 'Why Karma?' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.paragraph, { color: themeStyles.textColor }], children: t('karma.about.why.text') || 'Karma unlocks special features and recognition in the Oxy Ecosystem. The more you contribute, the more you earn!' })] })] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: { flex: 1 },
+    title: {
+        fontFamily: fonts_1.fontFamilies.interBold,
+        fontWeight: react_native_1.Platform.OS === 'web' ? 'bold' : undefined, // Only apply fontWeight on web
+        fontSize: 54,
+        margin: 24,
+        marginBottom: 24,
+    },
+    contentContainer: { padding: 24, paddingTop: 20 },
+    section: {
+        fontSize: 18,
+        fontWeight: react_native_1.Platform.OS === 'web' ? 'bold' : undefined,
+        fontFamily: fonts_1.fontFamilies.interBold,
+        marginTop: 24,
+        marginBottom: 8
+    },
+    paragraph: { fontSize: 16, marginBottom: 12 },
+});
+exports.default = KarmaAboutScreen;

package/src/ui/screens/karma/KarmaCenterScreen.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../../types/navigation';
+declare const KarmaCenterScreen: React.FC<BaseScreenProps>;
+export default KarmaCenterScreen;