nastech-app 1.0.0

package/sources/components/StatusDot.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { ViewStyle } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming } from 'react-native-reanimated';
+
+export interface StatusDotProps {
+    color: string;
+    isPulsing?: boolean;
+    size?: number;
+    style?: ViewStyle;
+}
+
+export const StatusDot = React.memo(({ color, isPulsing, size = 6, style }: StatusDotProps) => {
+    const opacity = useSharedValue(1);
+
+    React.useEffect(() => {
+        if (isPulsing) {
+            opacity.value = withRepeat(
+                withTiming(0.3, { duration: 1000 }),
+                -1, // infinite
+                true // reverse
+            );
+        } else {
+            opacity.value = withTiming(1, { duration: 200 });
+        }
+    }, [isPulsing]);
+
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            opacity: opacity.value,
+        };
+    });
+
+    const baseStyle: ViewStyle = {
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: color,
+    };
+
+    return (
+        <Animated.View
+            style={[
+                baseStyle,
+                animatedStyle,
+                style
+            ]}
+        />
+    );
+});

package/sources/components/StyledText.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Text as RNText, TextProps as RNTextProps, StyleProp, TextStyle } from 'react-native';
+import { Typography } from '@/constants/Typography';
+
+interface StyledTextProps extends RNTextProps {
+  /**
+   * Whether to use the default typography. Set to false to skip default font.
+   * Useful when you want to use a different typography style.
+   */
+  useDefaultTypography?: boolean;
+  /**
+   * Whether the text should be selectable. Defaults to false.
+   */
+  selectable?: boolean;
+}
+
+export const Text: React.FC<StyledTextProps> = ({ 
+  style, 
+  useDefaultTypography = true,
+  selectable = false,
+  ...props 
+}) => {
+  const defaultStyle = useDefaultTypography ? Typography.default() : {};
+  
+  return (
+    <RNText 
+      style={[defaultStyle, style]}
+      selectable={selectable}
+      {...props} 
+    />
+  );
+};
+
+// Export the original RNText as well, in case it's needed
+export { Text as RNText } from 'react-native'; 

package/sources/components/Switch.tsx

@@ -0,0 +1,20 @@
+import { Platform, Switch as RNSwitch, SwitchProps } from 'react-native';
+import { useUnistyles } from 'react-native-unistyles';
+import { Deferred } from './Deferred';
+
+export const Switch = (props: SwitchProps) => {
+    const { theme } = useUnistyles();
+    return (
+        <Deferred enabled={Platform.OS === 'android'}>
+            <RNSwitch
+                {...props}
+                trackColor={{ false: theme.colors.switch.track.inactive, true: theme.colors.switch.track.active }}
+                ios_backgroundColor={theme.colors.switch.track.inactive}
+                thumbColor={theme.colors.switch.thumb.active}
+                {...{
+                    activeThumbColor: theme.colors.switch.thumb.active,
+                }}
+            />
+        </Deferred>
+    );
+}

package/sources/components/TabBar.tsx

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { View, Pressable, Text } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { Image } from 'expo-image';
+import { t } from '@/text';
+import { Typography } from '@/constants/Typography';
+import { layout } from '@/components/layout';
+import { useInboxHasContent } from '@/hooks/useInboxHasContent';
+
+export type TabType = 'inbox' | 'sessions' | 'settings';
+
+interface TabBarProps {
+    activeTab: TabType;
+    onTabPress: (tab: TabType) => void;
+    inboxBadgeCount?: number;
+}
+
+const styles = StyleSheet.create((theme) => ({
+    outerContainer: {
+        backgroundColor: theme.colors.surface,
+        borderTopWidth: 1,
+        borderTopColor: theme.colors.divider,
+    },
+    innerContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        alignItems: 'flex-start',
+        maxWidth: layout.maxWidth,
+        width: '100%',
+        alignSelf: 'center',
+    },
+    tab: {
+        flex: 1,
+        alignItems: 'center',
+        paddingTop: 8,
+        paddingBottom: 4,
+    },
+    tabContent: {
+        alignItems: 'center',
+        position: 'relative',
+    },
+    label: {
+        fontSize: 10,
+        marginTop: 3,
+        ...Typography.default(),
+    },
+    labelActive: {
+        color: theme.colors.text,
+        ...Typography.default('semiBold'),
+    },
+    labelInactive: {
+        color: theme.colors.textSecondary,
+    },
+    badge: {
+        position: 'absolute',
+        top: -4,
+        right: -8,
+        backgroundColor: theme.colors.status.error,
+        borderRadius: 8,
+        minWidth: 16,
+        height: 16,
+        paddingHorizontal: 4,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    badgeText: {
+        color: '#FFFFFF',
+        fontSize: 10,
+        ...Typography.default('semiBold'),
+    },
+    indicatorDot: {
+        position: 'absolute',
+        top: 0,
+        right: -2,
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: theme.colors.text,
+    },
+}));
+
+export const TabBar = React.memo(({ activeTab, onTabPress, inboxBadgeCount = 0 }: TabBarProps) => {
+    const { theme } = useUnistyles();
+    const insets = useSafeAreaInsets();
+    const inboxHasContent = useInboxHasContent();
+
+    const tabs: { key: TabType; icon: any; label: string }[] = React.useMemo(() => {
+        // NOTE: Zen tab removed - the feature never got to a useful state
+        return [
+            { key: 'inbox', icon: require('@/assets/images/brutalist/Brutalism-27.png'), label: t('tabs.inbox') },
+            { key: 'sessions', icon: require('@/assets/images/brutalist/Brutalism-15.png'), label: t('tabs.sessions') },
+            { key: 'settings', icon: require('@/assets/images/brutalist/Brutalism-9.png'), label: t('tabs.settings') },
+        ];
+    }, []);
+
+    return (
+        <View style={[styles.outerContainer, { paddingBottom: insets.bottom }]}>
+            <View style={styles.innerContainer}>
+                {tabs.map((tab) => {
+                    const isActive = activeTab === tab.key;
+                    
+                    return (
+                        <Pressable
+                            key={tab.key}
+                            style={styles.tab}
+                            onPress={() => onTabPress(tab.key)}
+                            hitSlop={8}
+                        >
+                            <View style={styles.tabContent}>
+                                <Image
+                                    source={tab.icon}
+                                    contentFit="contain"
+                                    style={[{ width: 24, height: 24 }]}
+                                    tintColor={isActive ? theme.colors.text : theme.colors.textSecondary}
+                                />
+                                {tab.key === 'inbox' && inboxBadgeCount > 0 && (
+                                    <View style={styles.badge}>
+                                        <Text style={styles.badgeText}>
+                                            {inboxBadgeCount > 99 ? '99+' : inboxBadgeCount}
+                                        </Text>
+                                    </View>
+                                )}
+                                {tab.key === 'inbox' && inboxHasContent && inboxBadgeCount === 0 && (
+                                    <View style={styles.indicatorDot} />
+                                )}
+                            </View>
+                            <Text style={[
+                                styles.label,
+                                isActive ? styles.labelActive : styles.labelInactive
+                            ]}>
+                                {tab.label}
+                            </Text>
+                        </Pressable>
+                    );
+                })}
+            </View>
+        </View>
+    );
+});

package/sources/components/ToolGroupView.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { View, Text, Pressable, ActivityIndicator } from 'react-native';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { Ionicons } from '@expo/vector-icons';
+import { ToolGroupItem, generateGroupSummary } from '@/hooks/useGroupedMessages';
+import { MessageView } from './MessageView';
+import { Metadata } from '@/sync/storageTypes';
+import { layout } from './layout';
+
+interface ToolGroupViewProps {
+    group: ToolGroupItem;
+    metadata: Metadata | null;
+    sessionId: string;
+    expanded: boolean;
+    onToggle: () => void;
+}
+
+export const ToolGroupView = React.memo<ToolGroupViewProps>((props) => {
+    const { group, metadata, sessionId, expanded, onToggle } = props;
+    const { theme } = useUnistyles();
+    const summary = React.useMemo(() => generateGroupSummary(group.messages), [group.messages]);
+
+    return (
+        <View style={styles.outerContainer}>
+            <View style={styles.innerContainer}>
+                <Pressable
+                    onPress={onToggle}
+                    style={({ pressed }) => [
+                        styles.header,
+                        pressed && styles.headerPressed,
+                    ]}
+                >
+                    <Ionicons
+                        name={expanded ? 'chevron-down' : 'chevron-forward'}
+                        size={16}
+                        color={theme.colors.textSecondary}
+                    />
+                    <Text style={styles.summaryText} numberOfLines={1}>
+                        {summary}
+                    </Text>
+                    {group.hasRunning && (
+                        <ActivityIndicator
+                            size="small"
+                            color={theme.colors.textSecondary}
+                            style={{ transform: [{ scaleX: 0.7 }, { scaleY: 0.7 }] }}
+                        />
+                    )}
+                </Pressable>
+                {expanded && (
+                    <View style={styles.content}>
+                        {group.messages.map((msg) => (
+                            <MessageView
+                                key={msg.id}
+                                message={msg}
+                                metadata={metadata}
+                                sessionId={sessionId}
+                            />
+                        ))}
+                    </View>
+                )}
+            </View>
+        </View>
+    );
+});
+
+const styles = StyleSheet.create((theme) => ({
+    outerContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+    },
+    innerContainer: {
+        flexGrow: 1,
+        flexBasis: 0,
+        minWidth: 0,
+        maxWidth: layout.maxWidth,
+        marginHorizontal: 8,
+        marginVertical: 4,
+        borderRadius: 8,
+        overflow: 'hidden',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        backgroundColor: theme.colors.surfaceHighest,
+        borderRadius: 8,
+    },
+    headerPressed: {
+        opacity: 0.7,
+    },
+    summaryText: {
+        flex: 1,
+        fontSize: 14,
+        color: theme.colors.textSecondary,
+    },
+    content: {
+        marginTop: 2,
+    },
+}));

package/sources/components/TransitionStack.tsx

@@ -0,0 +1,14 @@
+import "react-native-reanimated";
+import Transition, {
+	type TransitionStackNavigatorTypeBag,
+} from "react-native-screen-transitions";
+import { withLayoutContext } from "expo-router";
+
+const TransitionableStack = Transition.createTransitionableStackNavigator();
+
+export const Stack = withLayoutContext<
+	TransitionStackNavigatorTypeBag["ScreenOptions"],
+	typeof TransitionableStack.Navigator,
+	TransitionStackNavigatorTypeBag["State"],
+	TransitionStackNavigatorTypeBag["EventMap"]
+>(TransitionableStack.Navigator);

package/sources/components/UpdateBanner.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Ionicons } from '@expo/vector-icons';
+import { Item } from './Item';
+import { ItemGroup } from './ItemGroup';
+import { useUnistyles } from 'react-native-unistyles';
+import { useUpdates } from '@/hooks/useUpdates';
+import { useChangelog } from '@/hooks/useChangelog';
+import { useNativeUpdate } from '@/hooks/useNativeUpdate';
+import { useRouter } from 'expo-router';
+import { Platform } from 'react-native';
+import { openExternalUrl } from '@/utils/openExternalUrl';
+import { t } from '@/text';
+
+export const UpdateBanner = React.memo(() => {
+    const { theme } = useUnistyles();
+    const { updateAvailable, reloadApp } = useUpdates();
+    const { hasUnread, markAsRead } = useChangelog();
+    const updateUrl = useNativeUpdate();
+    const router = useRouter();
+
+    // Show native app update banner (highest priority)
+    if (updateUrl) {
+        const handleOpenStore = () => openExternalUrl(updateUrl);
+
+        return (
+            <ItemGroup>
+                <Item
+                    title={t('updateBanner.nativeUpdateAvailable')}
+                    subtitle={Platform.OS === 'ios' ? t('updateBanner.tapToUpdateAppStore') : t('updateBanner.tapToUpdatePlayStore')}
+                    icon={<Ionicons name="download-outline" size={28} color={theme.colors.success} />}
+                    showChevron={true}
+                    onPress={handleOpenStore}
+                />
+            </ItemGroup>
+        );
+    }
+
+    // Show OTA update banner if available (second priority)
+    if (updateAvailable) {
+        return (
+            <ItemGroup>
+                <Item
+                    title={t('updateBanner.updateAvailable')}
+                    subtitle={t('updateBanner.pressToApply')}
+                    icon={<Ionicons name="download-outline" size={28} color={theme.colors.success} />}
+                    showChevron={false}
+                    onPress={reloadApp}
+                />
+            </ItemGroup>
+        );
+    }
+
+    // Show changelog banner if there are unread changelog entries (lowest priority)
+    if (hasUnread) {
+        return (
+            <ItemGroup>
+                <Item
+                    title={t('updateBanner.whatsNew')}
+                    subtitle={t('updateBanner.seeLatest')}
+                    icon={<Ionicons name="sparkles-outline" size={28} color={theme.colors.text} />}
+                    showChevron={true}
+                    onPress={() => {
+                        router.push('/changelog');
+                        setTimeout(() => {
+                            markAsRead();
+                        }, 1000);
+                    }}
+                />
+            </ItemGroup>
+        );
+    }
+
+    return null;
+});

package/sources/components/UserCard.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { UserProfile, getDisplayName } from '@/sync/friendTypes';
+import { Item } from '@/components/Item';
+import { Avatar } from '@/components/Avatar';
+
+interface UserCardProps {
+    user: UserProfile;
+    onPress?: () => void;
+}
+
+export function UserCard({ 
+    user, 
+    onPress
+}: UserCardProps) {
+    const displayName = getDisplayName(user);
+    const avatarUrl = user.avatar?.url || user.avatar?.path;
+
+    // Create avatar element using the Avatar component
+    const avatarElement = (
+        <Avatar
+            id={user.id}
+            size={40}
+            imageUrl={avatarUrl}
+            thumbhash={user.avatar?.thumbhash}
+        />
+    );
+
+    // Create subtitle
+    const subtitle = `@${user.username}`;
+
+    return (
+        <Item
+            title={displayName}
+            subtitle={subtitle}
+            subtitleLines={1}
+            leftElement={avatarElement}
+            onPress={onPress}
+            showChevron={!!onPress}
+        />
+    );
+}

package/sources/components/UserSearchResult.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, ActivityIndicator, Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { UserProfile, getDisplayName } from '@/sync/friendTypes';
+import { Avatar } from '@/components/Avatar';
+import { t } from '@/text';
+import { useRouter } from 'expo-router';
+
+interface UserSearchResultProps {
+    user: UserProfile;
+    onAddFriend: () => void;
+    isProcessing?: boolean;
+}
+
+export function UserSearchResult({ 
+    user, 
+    onAddFriend, 
+    isProcessing = false 
+}: UserSearchResultProps) {
+    const router = useRouter();
+    const displayName = getDisplayName(user);
+    const avatarUrl = user.avatar?.url || user.avatar?.path;
+    
+    // Determine button state based on relationship status
+    const getButtonContent = () => {
+        if (isProcessing) {
+            return <ActivityIndicator size="small" color="white" />;
+        }
+        
+        switch (user.status) {
+            case 'friend':
+                return <Text style={styles.buttonTextDisabled}>{t('friends.alreadyFriends')}</Text>;
+            case 'pending':
+                return <Text style={styles.buttonTextDisabled}>{t('friends.requestPending')}</Text>;
+            case 'requested':
+                return <Text style={styles.buttonTextDisabled}>{t('friends.requestSent')}</Text>;
+            default:
+                return <Text style={styles.buttonText}>{t('friends.addFriend')}</Text>;
+        }
+    };
+    
+    const isDisabled = isProcessing || user.status === 'friend' || user.status === 'pending' || user.status === 'requested';
+
+    return (
+        <Pressable 
+            style={styles.container}
+            onPress={() => router.push(`/user/${user.id}`)}
+        >
+            <View style={styles.content}>
+                <Avatar
+                    id={user.id}
+                    size={48}
+                    imageUrl={avatarUrl}
+                    thumbhash={user.avatar?.thumbhash}
+                />
+                
+                <View style={styles.info}>
+                    <Text style={styles.name}>{displayName}</Text>
+                    <Text style={styles.username}>@{user.username}</Text>
+                </View>
+
+                <TouchableOpacity
+                    style={[
+                        styles.button, 
+                        isDisabled && styles.buttonDisabled
+                    ]}
+                    onPress={onAddFriend}
+                    disabled={isDisabled}
+                >
+                    {getButtonContent()}
+                </TouchableOpacity>
+            </View>
+        </Pressable>
+    );
+}
+
+const styles = StyleSheet.create((theme) => ({
+    container: {
+        backgroundColor: theme.colors.surface,
+        borderRadius: 12,
+        marginHorizontal: 16,
+        marginVertical: 4,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.05,
+        shadowRadius: 2,
+        elevation: 2,
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 16,
+    },
+    info: {
+        flex: 1,
+        marginLeft: 16,
+    },
+    name: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: theme.colors.text,
+        marginBottom: 2,
+    },
+    username: {
+        fontSize: 14,
+        color: theme.colors.textSecondary,
+    },
+    button: {
+        backgroundColor: theme.colors.button.primary.background,
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+        borderRadius: 8,
+        minWidth: 100,
+        alignItems: 'center',
+    },
+    buttonDisabled: {
+        backgroundColor: theme.colors.divider,
+    },
+    buttonText: {
+        color: theme.colors.button.primary.tint,
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    buttonTextDisabled: {
+        color: theme.colors.textSecondary,
+        fontSize: 14,
+        fontWeight: '500',
+    },
+}));