add create new project + init new repo and file

apps/app/app/newProjectModal.tsx

@@ -7,10 +7,11 @@ export default function NewProjectModal() {
     const [projectName, setProjectName] = useState<string | undefined>(
         undefined
     );
+
     const mutation = trpc.projects.createDirectory.useMutation();
 
     const createProject = () => {
-        if (projectName === undefined) return;
+        if (projectName === undefined || projectName === '') return;
         mutation.mutate({ path: projectName });
     };
 
@@ -22,7 +23,7 @@ export default function NewProjectModal() {
             <Text className='text-white'>Create a new project</Text>
             <TextInput
                 placeholder={'Project name'}
-                onChangeText={(text) => setProjectName(text)}
+                onChangeText={(text) => setProjectName(text.trim())}
                 style={{
                     color: 'white',
                 }}
@@ -32,6 +33,10 @@ export default function NewProjectModal() {
             <TouchableOpacity onPress={createProject}>
                 <Text className='text-white'>Create</Text>
             </TouchableOpacity>
+
+            {mutation.error && (
+                <Text className={'text-red-600'}>{mutation.error.message}</Text>
+            )}
         </View>
     );
 }

apps/app/app/projects/[project]/[path]/index.tsx

@@ -1,6 +1,12 @@
-import { Text, TextInput, TouchableOpacity, View } from 'react-native';
+import {
+    ActivityIndicator,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    View,
+} from 'react-native';
 import { Stack, useLocalSearchParams } from 'expo-router';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 // @ts-ignore Can't find type declaration for module 'react-native-path'
 import path from 'react-native-path';
 
@@ -20,6 +26,18 @@ export default function File() {
     const [fileContent, setFileContent] = useState<string | undefined>(
         undefined
     );
+    if (project === undefined) {
+        throw new Error('project is required');
+    }
+    if (typeof project !== 'string') {
+        throw new Error('project must be a string');
+    }
+    if (file === undefined) {
+        throw new Error('file is required');
+    }
+    if (typeof file !== 'string') {
+        throw new Error('file must be a string');
+    }
 
     function unescapeHtml(value: string): string {
         return value
@@ -105,27 +123,21 @@ export default function File() {
 
     useEffect(() => {
         if (fileInfo === undefined) return;
-        console.log(fileInfo);
+
         setFileContent(fileInfo.content);
     }, [fileInfo]);
-
-    if (project === undefined) {
-        throw new Error('project is required');
-    }
-    if (typeof project !== 'string') {
-        throw new Error('project must be a string');
-    }
-    if (file === undefined) {
-        throw new Error('file is required');
+    if (fileInfo === undefined || isLoading) {
+        return (
+            <View>
+                <Stack.Screen
+                    options={{
+                        title: path.basename(file),
+                    }}
+                />
+                <ActivityIndicator color='#FFFFFF' />
+            </View>
+        );
     }
-    if (typeof file !== 'string') {
-        throw new Error('file must be a string');
-    }
-
-    if (fileInfo === undefined) {
-        return <Text className={'text-white'}></Text>;
-    }
-
     return (
         <View>
             <Stack.Screen
@@ -141,8 +153,6 @@ export default function File() {
                 }}
             />
 
-            {isLoading && <Text className={'text-white'}>Loading...</Text>}
-
             <TextInput
                 className={'text-white'}
                 onChangeText={setFileContent}

apps/app/app/projects/[project]/index.tsx

@@ -1,14 +1,39 @@
-import { Text, TouchableOpacity, View } from 'react-native';
-import { Link, Stack, useLocalSearchParams } from 'expo-router';
+import {
+    ActivityIndicator,
+    GestureResponderEvent,
+    Text,
+    TouchableOpacity,
+    View,
+} from 'react-native';
+import { Link, router, Stack, useLocalSearchParams } from 'expo-router';
 import React from 'react';
 import { trpc } from '../../../utils/api';
 import { Directory, nameSchema } from '@repo/types/Files';
 import { z } from 'zod';
 // @ts-ignore Can't find type declaration for module 'react-native-path'
 import path from 'react-native-path';
+import Icon from 'react-native-vector-icons/AntDesign';
+import { Menu, Divider, PaperProvider, Button } from 'react-native-paper';
 
 export default function Project() {
     const { project } = useLocalSearchParams();
+    const [visible, setVisible] = React.useState(false);
+    const [menuAnchor, setMenuAnchor] = React.useState<{
+        x: number;
+        y: number;
+    }>({
+        x: 0,
+        y: 0,
+    });
+
+    const onIconPress = (event: GestureResponderEvent) => {
+        const { nativeEvent } = event;
+        setMenuAnchor({
+            x: nativeEvent.pageX,
+            y: nativeEvent.pageY,
+        });
+        setVisible(true);
+    };
     if (project === undefined) {
         throw new Error('project is required');
     }
@@ -20,14 +45,50 @@ export default function Project() {
             path: project,
         });
 
-    if (isLoading) return <Text>Loading...</Text>;
+    if (isLoading) return <ActivityIndicator color='#FFFFFF' />;
 
+    const directoryComponent = (directory: Directory, level: number) => {
+        return (
+            <View key={directory.path}>
+                <View
+                    style={{
+                        flexDirection: 'row',
+                        justifyContent: 'flex-start',
+                        alignItems: 'center',
+                    }}
+                >
+                    <Text
+                        className={'text-white'}
+                        style={{ marginLeft: level * 20 }}
+                    >
+                        {directory.path}
+                    </Text>
+                    <TouchableOpacity onPress={onIconPress}>
+                        <Text
+                            className={'text-white'}
+                            style={{ marginLeft: 5 }}
+                        >
+                            <Icon
+                                name='pluscircleo'
+                                style={{
+                                    padding: 10,
+                                    borderRadius: 50,
+                                    textAlign: 'center',
+                                }}
+                            />
+                        </Text>
+                    </TouchableOpacity>
+                </View>
+                {generateUiTree(directory.path, directory.children, level + 1)}
+            </View>
+        );
+    };
     const generateUiTree = (
         parentPath: string,
         children: (z.infer<typeof nameSchema> | Directory)[],
         level = 1 as number
     ) => {
-        return children.map((file) => {
+        return children.map((file, index) => {
             if (nameSchema.safeParse(file).success) {
                 file = file as z.infer<typeof nameSchema>;
                 return (
@@ -43,7 +104,7 @@ export default function Project() {
                             },
                         }}
                         asChild
-                        key={file.name}
+                        key={file.name + index}
                     >
                         <TouchableOpacity>
                             <Text
@@ -57,27 +118,35 @@ export default function Project() {
                 );
             } else {
                 file = file as Directory;
-                return (
-                    <View key={file.path}>
-                        <Text
-                            className={'text-white'}
-                            style={{ marginLeft: level * 20 }}
-                        >
-                            {file.path}
-                        </Text>
-                        {generateUiTree(file.path, file.children, level + 1)}
-                    </View>
-                );
+                return directoryComponent(file, level);
             }
         });
     };
 
     return (
         <View>
             <Stack.Screen options={{ title: project }} />
-            <Text className='text-white'>{project}</Text>
+            {directoryComponent(
+                {
+                    path: project,
+                    children: [],
+                },
+                0
+            )}
             {directoryTree !== undefined &&
                 generateUiTree('', directoryTree.children)}
+            <PaperProvider>
+                <Menu
+                    visible={visible}
+                    onDismiss={() => {
+                        setVisible(false);
+                    }}
+                    anchor={menuAnchor}
+                >
+                    <Menu.Item onPress={() => {}} title='New Directory' />
+                    <Menu.Item onPress={() => {}} title='New File' />
+                </Menu>
+            </PaperProvider>
         </View>
     );
 }

apps/app/app/projects/index.tsx

@@ -1,5 +1,5 @@
 import { Link, Stack } from 'expo-router';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
 import React from 'react';
 import { trpc } from '../../utils/api';
 
@@ -18,7 +18,7 @@ export default function Projects() {
         );
 
     if (isLoading || !projects) {
-        return <Text>Loading...</Text>;
+        return <ActivityIndicator color='#FFFFFF' />;
     }
 
     return (

apps/app/global.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;