nastech-app 1.0.0

package/sources/components/EmptyMainScreen.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import { View, Text, Platform } from 'react-native';
+import { Typography } from '@/constants/Typography';
+import { RoundButton } from '@/components/RoundButton';
+import { useConnectTerminal } from '@/hooks/useConnectTerminal';
+import { Modal } from '@/modal';
+import { t } from '@/text';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+
+const stylesheet = StyleSheet.create((theme) => ({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 32,
+    },
+    title: {
+        marginBottom: 16,
+        textAlign: 'center',
+        fontSize: 24,
+        color: theme.colors.text,
+        ...Typography.default('semiBold'),
+    },
+    terminalBlock: {
+        backgroundColor: theme.colors.surfaceHighest,
+        borderRadius: 8,
+        padding: 20,
+        marginHorizontal: 24,
+        marginBottom: 20,
+        borderWidth: 1,
+        borderColor: theme.colors.divider,
+    },
+    terminalText: {
+        ...Typography.mono(),
+        fontSize: 16,
+        color: theme.colors.status.connected,
+    },
+    terminalTextFirst: {
+        marginBottom: 8,
+    },
+    stepsContainer: {
+        marginTop: 12,
+        marginHorizontal: 24,
+        marginBottom: 48,
+        width: 250,
+    },
+    stepRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 8,
+    },
+    stepRowLast: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    stepNumber: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        backgroundColor: theme.colors.surfaceHigh,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 12,
+    },
+    stepNumberText: {
+        ...Typography.default('semiBold'),
+        fontSize: 14,
+        color: theme.colors.text,
+    },
+    stepText: {
+        ...Typography.default(),
+        fontSize: 18,
+        color: theme.colors.textSecondary,
+    },
+    buttonsContainer: {
+        alignItems: 'center',
+        width: '100%',
+    },
+    buttonWrapper: {
+        width: 240,
+        marginBottom: 12,
+    },
+    buttonWrapperSecondary: {
+        width: 240,
+    },
+}));
+
+export function EmptyMainScreen() {
+    const { connectTerminal, connectWithUrl, isLoading } = useConnectTerminal();
+    const { theme } = useUnistyles();
+    const styles = stylesheet;
+
+    return (
+        <View style={styles.container}>
+            {/* Terminal-style code block */}
+            <Text style={styles.title}>{t('components.emptyMainScreen.readyToCode')}</Text>
+            <View style={styles.terminalBlock}>
+                <Text style={[styles.terminalText, styles.terminalTextFirst]}>
+                    $ pip install nastech-agent
+                </Text>
+                <Text style={styles.terminalText}>
+                    $ nastech
+                </Text>
+            </View>
+
+
+            {Platform.OS !== 'web' && (
+                <>
+                    <View style={styles.stepsContainer}>
+                        <View style={styles.stepRow}>
+                            <View style={styles.stepNumber}>
+                                <Text style={styles.stepNumberText}>1</Text>
+                            </View>
+                            <Text style={styles.stepText}>
+                                {t('components.emptyMainScreen.installCli')}
+                            </Text>
+                        </View>
+                        <View style={styles.stepRow}>
+                            <View style={styles.stepNumber}>
+                                <Text style={styles.stepNumberText}>2</Text>
+                            </View>
+                            <Text style={styles.stepText}>
+                                {t('components.emptyMainScreen.runIt')}
+                            </Text>
+                        </View>
+                        <View style={styles.stepRowLast}>
+                            <View style={styles.stepNumber}>
+                                <Text style={styles.stepNumberText}>3</Text>
+                            </View>
+                            <Text style={styles.stepText}>
+                                {t('components.emptyMainScreen.scanQrCode')}
+                            </Text>
+                        </View>
+                    </View>
+                    <View style={styles.buttonsContainer}>
+                        <View style={styles.buttonWrapper}>
+                            <RoundButton
+                                title={t('components.emptyMainScreen.openCamera')}
+                                size="large"
+                                loading={isLoading}
+                                onPress={connectTerminal}
+                            />
+                        </View>
+                        <View style={styles.buttonWrapperSecondary}>
+                            <RoundButton
+                                title={t('connect.enterUrlManually')}
+                                size="normal"
+                                display="inverted"
+                                onPress={async () => {
+                                    const url = await Modal.prompt(
+                                        t('modals.authenticateTerminal'),
+                                        t('modals.pasteUrlFromTerminal'),
+                                        {
+                                            placeholder: 'nastech://terminal?...',
+                                            cancelText: t('common.cancel'),
+                                            confirmText: t('common.authenticate')
+                                        }
+                                    );
+
+                                    if (url?.trim()) {
+                                        connectWithUrl(url.trim());
+                                    }
+                                }}
+                            />
+                        </View>
+                    </View>
+                </>
+            )}
+        </View>
+    );
+}

package/sources/components/EmptyMessages.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { Typography } from '@/constants/Typography';
+import { Session } from '@/sync/storageTypes';
+import { useSessionStatus, formatPathRelativeToHome } from '@/utils/sessionUtils';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { t } from '@/text';
+
+const stylesheet = StyleSheet.create((theme) => ({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 48,
+    },
+    iconContainer: {
+        marginBottom: 12,
+    },
+    hostText: {
+        fontSize: 18,
+        color: theme.colors.text,
+        textAlign: 'center',
+        marginBottom: 4,
+        ...Typography.default('semiBold'),
+    },
+    pathText: {
+        fontSize: 14,
+        color: theme.colors.textSecondary,
+        textAlign: 'center',
+        marginBottom: 40,
+        ...Typography.default('regular'),
+    },
+    noMessagesText: {
+        fontSize: 20,
+        color: theme.colors.textSecondary,
+        textAlign: 'center',
+        marginBottom: 8,
+        ...Typography.default('regular'),
+    },
+    createdText: {
+        fontSize: 16,
+        color: theme.colors.textSecondary,
+        textAlign: 'center',
+        lineHeight: 24,
+        ...Typography.default(),
+    },
+}));
+
+interface EmptyMessagesProps {
+    session: Session;
+}
+
+function getOSIcon(os?: string): keyof typeof Ionicons.glyphMap {
+    if (!os) return 'hardware-chip-outline';
+    
+    const osLower = os.toLowerCase();
+    if (osLower.includes('darwin') || osLower.includes('mac')) {
+        return 'laptop-outline';
+    } else if (osLower.includes('win')) {
+        return 'desktop-outline';
+    } else if (osLower.includes('linux')) {
+        return 'terminal-outline';
+    }
+    return 'hardware-chip-outline';
+}
+
+function formatRelativeTime(timestamp: number): string {
+    const now = Date.now();
+    const diffMs = now - timestamp;
+    const diffMinutes = Math.floor(diffMs / (1000 * 60));
+    const diffHours = Math.floor(diffMinutes / 60);
+    const diffDays = Math.floor(diffHours / 24);
+    
+    if (diffMinutes < 1) {
+        return t('time.justNow');
+    } else if (diffMinutes < 60) {
+        return t('time.minutesAgo', { count: diffMinutes });
+    } else if (diffHours < 24) {
+        return t('time.hoursAgo', { count: diffHours });
+    } else {
+        return t('sessionHistory.daysAgo', { count: diffDays });
+    }
+}
+
+export function EmptyMessages({ session }: EmptyMessagesProps) {
+    const { theme } = useUnistyles();
+    const styles = stylesheet;
+    const osIcon = getOSIcon(session.metadata?.os);
+    const sessionStatus = useSessionStatus(session);
+    const startedTime = formatRelativeTime(session.createdAt);
+    
+    return (
+        <View style={styles.container}>
+            <Ionicons 
+                name={osIcon}
+                size={72} 
+                color={theme.colors.textSecondary}
+                style={styles.iconContainer}
+            />
+            
+            {session.metadata?.host && (
+                <Text style={styles.hostText}>
+                    {session.metadata.host}
+                </Text>
+            )}
+            
+            {session.metadata?.path && (
+                <Text style={styles.pathText}>
+                    {formatPathRelativeToHome(session.metadata.path, session.metadata.homeDir)}
+                </Text>
+            )}
+            
+            <Text style={styles.noMessagesText}>
+                No messages yet
+            </Text>
+            
+            <Text style={styles.createdText}>
+                Created {startedTime}
+            </Text>
+        </View>
+    );
+}

package/sources/components/EmptySessionsTablet.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { Typography } from '@/constants/Typography';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { useAllMachines } from '@/sync/storage';
+import { isMachineOnline } from '@/utils/machineUtils';
+import { useRouter } from 'expo-router';
+
+const stylesheet = StyleSheet.create((theme) => ({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 48,
+    },
+    iconContainer: {
+        marginBottom: 24,
+    },
+    titleText: {
+        fontSize: 20,
+        color: theme.colors.textSecondary,
+        textAlign: 'center',
+        marginBottom: 8,
+        ...Typography.default('regular'),
+    },
+    descriptionText: {
+        fontSize: 16,
+        color: theme.colors.textSecondary,
+        textAlign: 'center',
+        marginBottom: 24,
+        ...Typography.default(),
+    },
+    button: {
+        backgroundColor: theme.colors.button.primary.background,
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        borderRadius: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    buttonDisabled: {
+        backgroundColor: theme.colors.textSecondary,
+        opacity: 0.6,
+    },
+    buttonIcon: {
+        marginRight: 8,
+    },
+    buttonText: {
+        fontSize: 16,
+        color: theme.colors.button.primary.tint,
+        fontWeight: '600',
+        ...Typography.default('semiBold'),
+    },
+}));
+
+export function EmptySessionsTablet() {
+    const { theme } = useUnistyles();
+    const styles = stylesheet;
+    const router = useRouter();
+    const machines = useAllMachines();
+    
+    const hasOnlineMachines = React.useMemo(() => {
+        return machines.some(machine => isMachineOnline(machine));
+    }, [machines]);
+    
+    const handleStartNewSession = () => {
+        router.navigate('/new');
+    };
+    
+    return (
+        <View style={styles.container}>
+            <Ionicons 
+                name="terminal-outline" 
+                size={64} 
+                color={theme.colors.textSecondary}
+                style={styles.iconContainer}
+            />
+            
+            <Text style={styles.titleText}>
+                No active sessions
+            </Text>
+            
+            {hasOnlineMachines ? (
+                <>
+                    <Text style={styles.descriptionText}>
+                        Start a new session on any of your connected machines.
+                    </Text>
+                    <Pressable
+                        style={styles.button}
+                        onPress={handleStartNewSession}
+                    >
+                        <Ionicons
+                            name="add"
+                            size={20}
+                            color={theme.colors.button.primary.tint}
+                            style={styles.buttonIcon}
+                        />
+                        <Text style={styles.buttonText}>
+                            Start New Session
+                        </Text>
+                    </Pressable>
+                </>
+            ) : (
+                <Text style={styles.descriptionText}>
+                    Open a new terminal on your computer to start session.
+                </Text>
+            )}
+        </View>
+    );
+}

package/sources/components/ExternalLink.tsx

@@ -0,0 +1,22 @@
+import { Link } from 'expo-router';
+import React from 'react';
+import { Platform } from 'react-native';
+import { openExternalUrl } from '@/utils/openExternalUrl';
+
+export function ExternalLink(
+  props: Omit<React.ComponentProps<typeof Link>, 'href'> & { href: string }
+) {
+  return (
+    <Link
+      target="_blank"
+      {...props}
+      href={props.href as any}
+      onPress={(e) => {
+        if (Platform.OS !== 'web') {
+          e.preventDefault();
+          void openExternalUrl(props.href as string);
+        }
+      }}
+    />
+  );
+}

package/sources/components/FAB.tsx

@@ -0,0 +1,53 @@
+import { Ionicons } from '@expo/vector-icons';
+import * as React from 'react';
+import { View, Pressable } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+
+const stylesheet = StyleSheet.create((theme, runtime) => ({
+    container: {
+        position: 'absolute',
+        right: 16,
+    },
+    button: {
+        borderRadius: 20,
+        width: 56,
+        height: 56,
+        padding: 16,
+        shadowColor: theme.colors.shadow.color,
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 3.84,
+        shadowOpacity: theme.colors.shadow.opacity,
+        elevation: 5,
+    },
+    buttonDefault: {
+        backgroundColor: theme.colors.fab.background,
+    },
+    buttonPressed: {
+        backgroundColor: theme.colors.fab.backgroundPressed,
+    },
+}));
+
+export const FAB = React.memo(({ onPress }: { onPress: () => void }) => {
+    const { theme } = useUnistyles();
+    const styles = stylesheet;
+    const safeArea = useSafeAreaInsets();
+    return (
+        <View
+            style={[
+                styles.container,
+                { bottom: safeArea.bottom + 16 }
+            ]}
+        >
+            <Pressable
+                style={({ pressed }) => [
+                    styles.button,
+                    pressed ? styles.buttonPressed : styles.buttonDefault
+                ]}
+                onPress={onPress}
+            >
+                <Ionicons name="add" size={24} color={theme.colors.fab.icon} />
+            </Pressable>
+        </View>
+    )
+});

package/sources/components/FABWide.tsx

@@ -0,0 +1,59 @@
+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 { t } from '@/text';
+
+const stylesheet = StyleSheet.create((theme, runtime) => ({
+    container: {
+        position: 'absolute',
+        left: 16,
+        right: 16,
+    },
+    button: {
+        borderRadius: 12,
+        paddingVertical: 16,
+        paddingHorizontal: 20,
+        shadowColor: theme.colors.shadow.color,
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 3.84,
+        shadowOpacity: theme.colors.shadow.opacity,
+        elevation: 5,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    buttonDefault: {
+        backgroundColor: theme.colors.fab.background,
+    },
+    buttonPressed: {
+        backgroundColor: theme.colors.fab.backgroundPressed,
+    },
+    text: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: theme.colors.fab.icon,
+    },
+}));
+
+export const FABWide = React.memo(({ onPress }: { onPress: () => void }) => {
+    const styles = stylesheet;
+    const safeArea = useSafeAreaInsets();
+    return (
+        <View
+            style={[
+                styles.container,
+                { bottom: safeArea.bottom + 16 }
+            ]}
+        >
+            <Pressable
+                style={({ pressed }) => [
+                    styles.button,
+                    pressed ? styles.buttonPressed : styles.buttonDefault
+                ]}
+                onPress={onPress}
+            >
+                <Text style={styles.text}>{t('newSession.title')}</Text>
+            </Pressable>
+        </View>
+    )
+});

package/sources/components/FeedItemCard.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { FeedItem } from '@/sync/feedTypes';
+import { Ionicons } from '@expo/vector-icons';
+import { t } from '@/text';
+import { useRouter } from 'expo-router';
+import { useUser } from '@/sync/storage';
+import { Avatar } from './Avatar';
+import { Item } from './Item';
+import { useUnistyles } from 'react-native-unistyles';
+
+interface FeedItemCardProps {
+    item: FeedItem;
+}
+
+export const FeedItemCard = React.memo(({ item }: FeedItemCardProps) => {
+    const { theme } = useUnistyles();
+    const router = useRouter();
+    
+    // Get user profile from global users cache for friend-related items
+    // User MUST exist for friend-related items or they would have been filtered out
+    const user = useUser(
+        (item.body.kind === 'friend_request' || item.body.kind === 'friend_accepted')
+            ? item.body.uid 
+            : undefined
+    );
+    
+    const getTimeAgo = (timestamp: number) => {
+        const now = Date.now();
+        const diff = now - timestamp;
+        const minutes = Math.floor(diff / 60000);
+        const hours = Math.floor(diff / 3600000);
+        const days = Math.floor(diff / 86400000);
+        
+        if (minutes < 1) return t('time.justNow');
+        if (minutes < 60) return t('time.minutesAgo', { count: minutes });
+        if (hours < 24) return t('time.hoursAgo', { count: hours });
+        return t('sessionHistory.daysAgo', { count: days });
+    };
+    
+    switch (item.body.kind) {
+        case 'friend_request': {
+            const avatarElement = user!.avatar ? (
+                <Avatar 
+                    id={user!.id}
+                    imageUrl={user!.avatar.url}
+                    size={40}
+                />
+            ) : (
+                <Ionicons name="person" size={20} color={theme.colors.textSecondary} />
+            );
+            
+            return (
+                <Item
+                    title={t('feed.friendRequestFrom', { name: user!.firstName || user!.username })}
+                    subtitle={getTimeAgo(item.createdAt)}
+                    leftElement={avatarElement}
+                    onPress={() => router.push(`/user/${user!.id}`)}
+                    showChevron={true}
+                />
+            );
+        }
+            
+        case 'friend_accepted': {
+            const avatarElement = user!.avatar ? (
+                <Avatar 
+                    id={user!.id}
+                    imageUrl={user!.avatar.url}
+                    size={40}
+                />
+            ) : (
+                <Ionicons name="checkmark-circle" size={20} color={theme.colors.status.connected} />
+            );
+            
+            return (
+                <Item
+                    title={t('feed.friendAccepted', { name: user!.firstName || user!.username })}
+                    subtitle={getTimeAgo(item.createdAt)}
+                    leftElement={avatarElement}
+                    onPress={() => router.push(`/user/${user!.id}`)}
+                    showChevron={true}
+                />
+            );
+        }
+            
+        case 'text':
+            return (
+                <Item
+                    title={item.body.text}
+                    subtitle={getTimeAgo(item.createdAt)}
+                    icon={<Ionicons name="information-circle" size={20} color={theme.colors.textSecondary} />}
+                    showChevron={false}
+                />
+            );
+            
+        default:
+            return null;
+    }
+});