Task/architecture of project

.github/workflows/test.yml

@@ -18,4 +18,6 @@ jobs:
         run: npm ci
 
       - name: Run tests
+        env:
+           FLUENT_USER_EMAIL: 'test@example.com'
         run: npm test -- --ci

.gitignore

@@ -73,3 +73,7 @@ yarn-error.log
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+# Environment files
+.env
+.env.*

App.tsx

@@ -5,7 +5,7 @@ import { initializeDatabase } from './src/db/index';
 import AppNavigator from './src/navigation/AppNavigator';
 import { NavigationContainer } from '@react-navigation/native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { syncAllData } from './src/services/syncServices';
+import { syncAllData } from './src/services/sync';
 import { FLUENT_USER_EMAIL } from '@env';
 
 const log = logger.create('App');

__tests__/App.test.tsx

@@ -43,7 +43,7 @@ jest.mock('../src/navigation/AppNavigator', () => {
   const { View } = require('react-native');
   return () => MockReact.createElement(View, { testID: 'app-navigator' });
 });
-jest.mock('../src/api/fluent-api.test', () => ({
+jest.mock('../src/services/fluent-api.test', () => ({
   runApiIntegrationTest: jest.fn(() => Promise.resolve()),
 }));
 
@@ -63,7 +63,7 @@ jest.mock('../src/db/index', () => ({
   initializeDatabase: jest.fn(() => Promise.resolve()),
 }));
 
-jest.mock('../src/services/syncServices', () => ({
+jest.mock('../src/services/sync', () => ({
   syncAllData: jest.fn(() => Promise.resolve()),
 }));
 

eslint.config.js

@@ -63,6 +63,15 @@ export default [
     rules: {
       'jest/no-disabled-tests': 'warn',
       'jest/no-focused-tests': 'error',
+      'no-console': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+  {
+    files: ['src/utils/logger.ts'],
+    rules: {
+      'no-console': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
     },
   },
 ];

src/app/appStyles.ts

@@ -0,0 +1,200 @@
+import { StyleSheet } from 'react-native';
+
+export const appStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  centered: {
+    justifyContent: 'center',
+  },
+  titleLg: {
+    fontSize: 20,
+    fontWeight: '700',
+  },
+  titleMd: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  subtitle: {
+    fontSize: 14,
+    marginTop: 2,
+  },
+  sectionHeaderText: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  cardTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  cardSubtitle: {
+    fontSize: 14,
+    marginTop: 3,
+  },
+  emptyText: {
+    color: '#666',
+    fontSize: 16,
+  },
+  noVersesText: {
+    fontSize: 14,
+    color: '#999',
+  },
+  listContent: {
+    gap: 12,
+  },
+  scrollContent: {
+    gap: 12,
+    paddingBottom: 8,
+  },
+  cardRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#d1d1d6',
+    padding: 16,
+    gap: 12,
+  },
+  cardColumn: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#d1d1d6',
+    padding: 16,
+  },
+  cardText: {
+    flex: 1,
+  },
+  backBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingVertical: 20,
+  },
+  logoContainer: {
+    alignItems: 'center',
+    paddingVertical: 28,
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 10,
+    borderWidth: 1,
+    borderColor: '#d1d1d6',
+    borderRadius: 12,
+    padding: 14,
+    marginBottom: 12,
+  },
+  playerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    marginBottom: 12,
+  },
+  playBtn: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: '#1a6ef5',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  progressTrack: {
+    flex: 1,
+    height: 4,
+    backgroundColor: '#e0e0e0',
+    borderRadius: 2,
+  },
+  progressFill: {
+    width: '20%',
+    height: 4,
+    backgroundColor: '#1a6ef5',
+    borderRadius: 2,
+  },
+  progressFillRecorded: {
+    width: '40%',
+    height: 4,
+    backgroundColor: '#1a6ef5',
+    borderRadius: 2,
+  },
+  accordionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#d1d1d6',
+    borderRadius: 8,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    marginTop: 4,
+  },
+  accordionLabel: {
+    fontSize: 14,
+  },
+  sourceTextScroll: {
+    maxHeight: 120,
+    marginTop: 10,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+  },
+  sourceText: {
+    fontSize: 14,
+    lineHeight: 24,
+    color: '#333',
+  },
+  recordBtn: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: '#e53935',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    marginVertical: 12,
+  },
+  deleteBtn: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: '#e53935',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    marginTop: 8,
+  },
+  chipsScroll: {
+    flexGrow: 0,
+    paddingVertical: 12,
+  },
+  chipsContent: {
+    gap: 8,
+    paddingHorizontal: 2,
+  },
+  chip: {
+    minWidth: 48,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: '#d1d1d6',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  activeChip: {
+    borderWidth: 2,
+    borderColor: '#1a6ef5',
+  },
+  chipText: {
+    fontSize: 16,
+  },
+  activeChipText: {
+    color: '#1a6ef5',
+    fontWeight: '600',
+  },
+  chipMic: {
+    position: 'absolute',
+    top: 3,
+    right: 4,
+  },
+});

src/screens/main/ProjectList.tsx → src/app/tabs/ProjectList.tsx

@@ -4,17 +4,17 @@ import {
   Text,
   FlatList,
   TouchableOpacity,
-  StyleSheet,
   ActivityIndicator,
 } from 'react-native';
 import { logger } from '../../utils/logger';
-import { Project } from '../../types/dbTypes';
+import { Project } from '../../types/db/types';
 import { getProjects } from '../../db/queries';
 import { useNavigation } from '@react-navigation/native';
 import FluentLogo from '../../assets/icons/fluent-logo.svg';
-import { RootStackParamList } from '../../navigation/types';
+import { RootStackParamList } from '../../types/navigation/types';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { Ionicons } from '@react-native-vector-icons/ionicons';
+import { appStyles as styles } from '../appStyles';
 
 const log = logger.create('ProjectListScreen');
 type Nav = StackNavigationProp<RootStackParamList, 'Projects'>;
@@ -64,7 +64,7 @@ export default function ProjectsScreen() {
         contentContainerStyle={styles.listContent}
         renderItem={({ item }) => (
           <TouchableOpacity
-            style={styles.card}
+            style={styles.cardRow}
             activeOpacity={0.7}
             onPress={() =>
               navigation.navigate('Chapters', {
@@ -88,55 +88,3 @@ export default function ProjectsScreen() {
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 16,
-  },
-  logoContainer: {
-    alignItems: 'center',
-    paddingVertical: 28,
-  },
-  sectionHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 10,
-    borderWidth: 1,
-    borderColor: '#d1d1d6',
-    borderRadius: 12,
-    padding: 14,
-    marginBottom: 12,
-  },
-  sectionHeaderText: {
-    fontSize: 16,
-    fontWeight: '500',
-  },
-  listContent: {
-    gap: 12,
-  },
-  card: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: '#d1d1d6',
-    padding: 16,
-    gap: 12,
-  },
-  cardText: {
-    flex: 1,
-  },
-  cardTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  cardSubtitle: {
-    fontSize: 14,
-    marginTop: 3,
-  },
-  centered: {
-    justifyContent: 'center',
-  },
-});