From 57d674e8ff546a64d0e873d34cc63d2a1b1f1f23 Mon Sep 17 00:00:00 2001
From: ryderwishart <ryderwishart@gmail.com>
Date: Wed, 5 Nov 2025 23:26:25 -0700
Subject: [PATCH 01/11] Onboarding wizard ui

---
 components/LanguageListSkeleton.tsx        |  21 +
 components/OnboardingProgressIndicator.tsx | 125 ++++
 hooks/useLanguagesByRegion.ts              |  92 +++
 hooks/useProjectsByLanguage.ts             | 126 ++++
 hooks/useRegions.ts                        |  48 ++
 services/localizations.ts                  | 182 ++++-
 views/new/NextGenProjectsView.tsx          |  63 +-
 views/new/OnboardingFlow.tsx               | 763 +++++++++++++++++++++
 8 files changed, 1407 insertions(+), 13 deletions(-)
 create mode 100644 components/LanguageListSkeleton.tsx
 create mode 100644 components/OnboardingProgressIndicator.tsx
 create mode 100644 hooks/useLanguagesByRegion.ts
 create mode 100644 hooks/useProjectsByLanguage.ts
 create mode 100644 hooks/useRegions.ts
 create mode 100644 views/new/OnboardingFlow.tsx

diff --git a/components/LanguageListSkeleton.tsx b/components/LanguageListSkeleton.tsx
new file mode 100644
index 000000000..a6e128896
--- /dev/null
+++ b/components/LanguageListSkeleton.tsx
@@ -0,0 +1,21 @@
+import { Skeleton } from '@/components/ui/skeleton';
+import React from 'react';
+import { View } from 'react-native';
+
+// Loading skeleton for language list
+export function LanguageListSkeleton() {
+  return (
+    <View className="flex-1 gap-3">
+      {Array.from({ length: 6 }, (_, i) => (
+        <View
+          key={i}
+          className="h-16 flex-row items-center gap-3 rounded-lg border border-border bg-card px-6"
+        >
+          <Skeleton className="h-5 w-5 rounded-full" />
+          <Skeleton className="h-5 flex-1" />
+        </View>
+      ))}
+    </View>
+  );
+}
+
diff --git a/components/OnboardingProgressIndicator.tsx b/components/OnboardingProgressIndicator.tsx
new file mode 100644
index 000000000..972d586ea
--- /dev/null
+++ b/components/OnboardingProgressIndicator.tsx
@@ -0,0 +1,125 @@
+import { cn } from '@/utils/styleUtils';
+import { getThemeColor } from '@/utils/styleUtils';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring
+} from 'react-native-reanimated';
+import { useEffect } from 'react';
+import { View } from 'react-native';
+import { Text } from '@/components/ui/text';
+
+export type OnboardingStep = 'region' | 'language' | 'projects' | 'create-project';
+
+interface OnboardingProgressIndicatorProps {
+  currentStep: OnboardingStep;
+  className?: string;
+}
+
+const STEP_ORDER: OnboardingStep[] = ['region', 'language', 'projects', 'create-project'];
+
+const STEP_LABELS: Record<OnboardingStep, string> = {
+  region: 'Region',
+  language: 'Language',
+  projects: 'Projects',
+  'create-project': 'Create'
+};
+
+export function OnboardingProgressIndicator({
+  currentStep,
+  className
+}: OnboardingProgressIndicatorProps) {
+  const currentStepIndex = STEP_ORDER.indexOf(currentStep);
+  const progress = useSharedValue(currentStepIndex / (STEP_ORDER.length - 1));
+
+  // Animate progress when step changes
+  useEffect(() => {
+    const targetProgress = currentStepIndex / (STEP_ORDER.length - 1);
+    progress.value = withSpring(targetProgress, {
+      damping: 15,
+      stiffness: 100
+    });
+  }, [currentStepIndex, progress]);
+
+  // Animated progress bar style
+  const progressBarStyle = useAnimatedStyle(() => {
+    return {
+      width: `${progress.value * 100}%`
+    };
+  });
+
+  return (
+    <View className={cn('w-full px-6 py-4', className)}>
+      {/* Steps container */}
+      <View className="relative flex-row items-center justify-between">
+        {/* Progress bar background */}
+        <View className="absolute left-0 right-0 top-0 h-0.5 bg-muted" style={{ top: 12 }}>
+          {/* Animated progress fill */}
+          <Animated.View
+            style={[
+              progressBarStyle,
+              {
+                height: '100%',
+                backgroundColor: getThemeColor('primary'),
+                borderRadius: 9999
+              }
+            ]}
+          />
+        </View>
+
+        {/* Step indicators */}
+        {STEP_ORDER.map((step, index) => {
+          const isActive = index === currentStepIndex;
+          const isCompleted = index < currentStepIndex;
+          const isPending = index > currentStepIndex;
+
+          return (
+            <View key={step} className="relative z-10 items-center">
+              {/* Step circle */}
+              <View
+                className={cn(
+                  'h-6 w-6 items-center justify-center rounded-full border-2',
+                  isActive
+                    ? 'border-primary bg-primary'
+                    : isCompleted
+                      ? 'border-primary bg-primary'
+                      : 'border-muted-foreground bg-background'
+                )}
+              >
+                {isCompleted ? (
+                  <Text className="text-xs font-semibold text-primary-foreground">✓</Text>
+                ) : (
+                  <Text
+                    className={cn(
+                      'text-xs font-semibold',
+                      isActive
+                        ? 'text-primary-foreground'
+                        : 'text-muted-foreground'
+                    )}
+                  >
+                    {index + 1}
+                  </Text>
+                )}
+              </View>
+
+              {/* Step label */}
+              <Text
+                className={cn(
+                  'mt-2 text-xs',
+                  isActive
+                    ? 'font-medium text-foreground'
+                    : isCompleted
+                      ? 'text-muted-foreground'
+                      : 'text-muted-foreground/60'
+                )}
+                numberOfLines={1}
+              >
+                {STEP_LABELS[step]}
+              </Text>
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
diff --git a/hooks/useLanguagesByRegion.ts b/hooks/useLanguagesByRegion.ts
new file mode 100644
index 000000000..38e10ccf2
--- /dev/null
+++ b/hooks/useLanguagesByRegion.ts
@@ -0,0 +1,92 @@
+import { system } from '@/db/powersync/system';
+import { useHybridData } from '@/views/new/useHybridData';
+import { toCompilableQuery } from '@powersync/drizzle-driver';
+import { sql } from 'drizzle-orm';
+
+export interface Languoid {
+  id: string;
+  name: string;
+  level: 'family' | 'language' | 'dialect';
+  parent_id: string | null;
+  active: boolean;
+  created_at: string;
+  last_updated: string;
+}
+
+export interface LanguageByRegion extends Languoid {
+  region_id: string;
+  region_name: string;
+}
+
+/**
+ * Hook to query languoids filtered by region
+ * Uses the languoid_region join table to connect languoids to regions
+ */
+export function useLanguagesByRegion(regionId: string | null) {
+  return useHybridData<LanguageByRegion>({
+    dataType: 'languages-by-region',
+    queryKeyParams: [regionId || ''],
+    
+    // Note: languoid and languoid_region tables don't exist in local SQLite
+    // Use a dummy offline query that returns empty array
+    offlineQuery: toCompilableQuery(
+      sql`SELECT '' as id, '' as name, '' as level, '' as parent_id, '' as region_id, '' as region_name, 0 as active, '' as created_at, '' as last_updated WHERE 1 = 0`
+    ),
+    
+    // Cloud query - fetch languoids filtered by region
+    cloudQueryFn: async () => {
+      if (!regionId) return [];
+      
+      // Query languoids via languoid_region join
+      const { data, error } = await system.supabaseConnector.client
+        .from('languoid_region')
+        .select(`
+          languoid_id,
+          region_id,
+          languoid:languoid_id (
+            id,
+            name,
+            level,
+            parent_id,
+            active,
+            created_at,
+            last_updated
+          ),
+          region:region_id (
+            name
+          )
+        `)
+        .eq('region_id', regionId)
+        .eq('active', true);
+      
+      if (error) throw error;
+      
+      // Transform the nested data structure
+      const languages: LanguageByRegion[] = (data || []).map((item: any) => {
+        const languoid = item.languoid;
+        const region = item.region;
+        
+        return {
+          id: languoid.id,
+          name: languoid.name,
+          level: languoid.level,
+          parent_id: languoid.parent_id,
+          active: languoid.active,
+          created_at: languoid.created_at,
+          last_updated: languoid.last_updated,
+          region_id: item.region_id,
+          region_name: region?.name || ''
+        };
+      });
+      
+      // Sort by name
+      languages.sort((a, b) => a.name.localeCompare(b.name));
+      
+      return languages;
+    },
+    
+    enableCloudQuery: !!regionId,
+    enableOfflineQuery: false // Languoid tables don't exist locally
+  });
+}
+
diff --git a/hooks/useProjectsByLanguage.ts b/hooks/useProjectsByLanguage.ts
new file mode 100644
index 000000000..9834e5a5c
--- /dev/null
+++ b/hooks/useProjectsByLanguage.ts
@@ -0,0 +1,126 @@
+import { project, profile_project_link } from '@/db/drizzleSchema';
+import { system } from '@/db/powersync/system';
+import { useHybridData } from '@/views/new/useHybridData';
+import { toCompilableQuery } from '@powersync/drizzle-driver';
+import { and, eq, getTableColumns, notInArray, or, sql } from 'drizzle-orm';
+import { useAuth } from '@/contexts/AuthContext';
+import { useUserRestrictions } from '@/hooks/db/useBlocks';
+import { useLocalStore } from '@/store/localStore';
+
+type Project = typeof project.$inferSelect;
+
+/**
+ * Hook to query projects filtered by target language ID
+ * Excludes projects the user is already a member of
+ * Respects user's privacy settings and blocked content/users
+ */
+export function useProjectsByLanguage(languageId: string | null) {
+  const { currentUser } = useAuth();
+  const userId = currentUser?.id;
+  
+  const showInvisibleContent = useLocalStore(
+    (state) => state.showHiddenContent
+  );
+
+  const {
+    data: restrictions
+  } = useUserRestrictions('project', true, true, false);
+
+  const blockContentIds = (restrictions.blockedContentIds ?? []).map(
+    (c) => c.content_id
+  );
+  const blockUserIds = (restrictions.blockedUserIds ?? []).map(
+    (c) => c.blocked_id
+  );
+
+  return useHybridData<Project>({
+    dataType: 'projects-by-language',
+    queryKeyParams: [languageId || '', userId || '', showInvisibleContent ? 'show-hidden' : ''],
+    
+    // Offline query - get projects by target language
+    offlineQuery: toCompilableQuery(
+      system.db
+        .select({
+          ...getTableColumns(project)
+        })
+        .from(project)
+        .where(
+          and(
+            ...[
+              languageId ? eq(project.target_language_id, languageId) : undefined,
+              eq(project.active, true),
+              // Exclude projects user is already a member of
+              userId &&
+                sql`NOT EXISTS (
+                  SELECT 1 FROM ${profile_project_link}
+                  WHERE ${profile_project_link.project_id} = ${project.id}
+                  AND ${profile_project_link.profile_id} = ${userId}
+                  AND ${profile_project_link.active} = 1
+                )`,
+              // Visibility filter
+              or(
+                !showInvisibleContent ? eq(project.visible, true) : undefined,
+                userId ? eq(project.creator_id, userId) : undefined
+              ),
+              // Blocked users filter
+              blockUserIds.length > 0 && notInArray(project.creator_id, blockUserIds),
+              // Blocked content filter
+              blockContentIds.length > 0 && notInArray(project.id, blockContentIds)
+            ].filter(Boolean)
+          )
+        )
+    ),
+    
+    // Cloud query - get projects by target language
+    cloudQueryFn: async () => {
+      if (!languageId) return [];
+      
+      // Get projects user is already a member of (to exclude)
+      const userProjectIds = userId
+        ? await system.supabaseConnector.client
+            .from('profile_project_link')
+            .select('project_id')
+            .eq('profile_id', userId)
+            .eq('active', true)
+            .then(({ data }) => data?.map((p) => p.project_id) || [])
+        : [];
+
+      let query = system.supabaseConnector.client
+        .from('project')
+        .select('*')
+        .eq('target_language_id', languageId)
+        .eq('active', true);
+
+      // Exclude projects user is already a member of
+      if (userProjectIds.length > 0) {
+        query = query.not('id', 'in', `(${userProjectIds.join(',')})`);
+      }
+
+      // Visibility filter
+      if (!showInvisibleContent) {
+        query = query.eq('visible', true);
+      }
+
+      // Blocked users filter
+      if (blockUserIds.length > 0) {
+        query = query.or(
+          `creator_id.is.null,creator_id.not.in.(${blockUserIds.join(',')})`
+        );
+      }
+
+      // Blocked content filter
+      if (blockContentIds.length > 0) {
+        query = query.not('id', 'in', `(${blockContentIds.join(',')})`);
+      }
+
+      const { data, error } = await query.overrideTypes<Project[]>();
+
+      if (error) throw error;
+      return data || [];
+    },
+    
+    enableCloudQuery: !!languageId,
+    enableOfflineQuery: !!languageId
+  });
+}
+
diff --git a/hooks/useRegions.ts b/hooks/useRegions.ts
new file mode 100644
index 000000000..46ab608f9
--- /dev/null
+++ b/hooks/useRegions.ts
@@ -0,0 +1,48 @@
+import { system } from '@/db/powersync/system';
+import { useHybridData } from '@/views/new/useHybridData';
+import { toCompilableQuery } from '@powersync/drizzle-driver';
+import { sql } from 'drizzle-orm';
+
+export interface Region {
+  id: string;
+  name: string;
+  level: 'continent' | 'nation' | 'subnational';
+  parent_id: string | null;
+  active: boolean;
+  created_at: string;
+  last_updated: string;
+}
+
+/**
+ * Hook to query regions from the region table
+ * Filters by level (continent or nation)
+ */
+export function useRegions(levels: ('continent' | 'nation')[] = ['continent', 'nation']) {
+  return useHybridData<Region>({
+    dataType: 'regions',
+    queryKeyParams: [levels.join(',')],
+    
+    // Note: region table doesn't exist in local SQLite, so we'll only query cloud
+    // Use a dummy offline query that returns empty array
+    offlineQuery: toCompilableQuery(
+      sql`SELECT '' as id, '' as name, '' as level, '' as parent_id, 0 as active, '' as created_at, '' as last_updated WHERE 1 = 0`
+    ),
+    
+    // Cloud query - fetch regions from Supabase
+    cloudQueryFn: async () => {
+      const { data, error } = await system.supabaseConnector.client
+        .from('region')
+        .select('*')
+        .in('level', levels)
+        .eq('active', true)
+        .order('name');
+      
+      if (error) throw error;
+      return data as Region[];
+    },
+    
+    enableCloudQuery: true,
+    enableOfflineQuery: false // Region table doesn't exist locally
+  });
+}
+
diff --git a/services/localizations.ts b/services/localizations.ts
index 14553d029..0bbcfeb7e 100644
--- a/services/localizations.ts
+++ b/services/localizations.ts
@@ -899,6 +899,160 @@ export const localizations = {
     tok_pisin: 'Plis makim wanpela tokples',
     indonesian: 'Silakan pilih bahasa'
   },
+  selectRegion: {
+    english: 'Select Region',
+    spanish: 'Seleccionar Región',
+    brazilian_portuguese: 'Selecionar Região',
+    tok_pisin: 'Makim Region',
+    indonesian: 'Pilih Wilayah'
+  },
+  selectRegionToFilterLanguages: {
+    english: 'Select a region to see languages from that area',
+    spanish: 'Seleccione una región para ver idiomas de esa área',
+    brazilian_portuguese: 'Selecionar uma região para ver idiomas dessa área',
+    tok_pisin: 'Makim wanpela region long lukim ol tokples bilong ples ya',
+    indonesian: 'Pilih wilayah untuk melihat bahasa dari area tersebut'
+  },
+  selectYourLanguage: {
+    english: 'Select Your Language',
+    spanish: 'Seleccione Su Idioma',
+    brazilian_portuguese: 'Selecionar Seu Idioma',
+    tok_pisin: 'Makim Tokples Bilong Yu',
+    indonesian: 'Pilih Bahasa Anda'
+  },
+  createLanguage: {
+    english: 'Create Language',
+    spanish: 'Crear Idioma',
+    brazilian_portuguese: 'Criar Idioma',
+    tok_pisin: 'Mekim Tokples',
+    indonesian: 'Buat Bahasa'
+  },
+  createNewLanguage: {
+    english: 'Create New Language',
+    spanish: 'Crear Nuevo Idioma',
+    brazilian_portuguese: 'Criar Novo Idioma',
+    tok_pisin: 'Mekim Nupela Tokples',
+    indonesian: 'Buat Bahasa Baru'
+  },
+  languageNotInList: {
+    english: 'My language is not in the list',
+    spanish: 'Mi idioma no está en la lista',
+    brazilian_portuguese: 'Meu idioma não está na lista',
+    tok_pisin: 'Tokples bilong mi i no stap long list',
+    indonesian: 'Bahasa saya tidak ada dalam daftar'
+  },
+  willCreateLanguage: {
+    english: 'Will create language',
+    spanish: 'Creará idioma',
+    brazilian_portuguese: 'Criará idioma',
+    tok_pisin: 'Bai mekim tokples',
+    indonesian: 'Akan membuat bahasa'
+  },
+  nativeName: {
+    english: 'Native Name',
+    spanish: 'Nombre Nativo',
+    brazilian_portuguese: 'Nome Nativo',
+    tok_pisin: 'Nem Bilong Tokples',
+    indonesian: 'Nama Asli'
+  },
+  englishName: {
+    english: 'English Name',
+    spanish: 'Nombre en Inglés',
+    brazilian_portuguese: 'Nome em Inglês',
+    tok_pisin: 'Nem Long English',
+    indonesian: 'Nama dalam Bahasa Inggris'
+  },
+  iso6393Code: {
+    english: 'ISO 639-3 Code',
+    spanish: 'Código ISO 639-3',
+    brazilian_portuguese: 'Código ISO 639-3',
+    tok_pisin: 'ISO 639-3 Code',
+    indonesian: 'Kode ISO 639-3'
+  },
+  locale: {
+    english: 'Locale',
+    spanish: 'Idioma',
+    brazilian_portuguese: 'Idioma',
+    tok_pisin: 'Locale',
+    indonesian: 'Lokalisasi'
+  },
+  createAndContinue: {
+    english: 'Create and Continue',
+    spanish: 'Crear y Continuar',
+    brazilian_portuguese: 'Criar e Continuar',
+    tok_pisin: 'Mekim na Go Long',
+    indonesian: 'Buat dan Lanjutkan'
+  },
+  whatWouldYouLikeToCreate: {
+    english: 'What would you like to create?',
+    spanish: '¿Qué te gustaría crear?',
+    brazilian_portuguese: 'O que você gostaria de criar?',
+    tok_pisin: 'Wanem samting yu laik mekim?',
+    indonesian: 'Apa yang ingin Anda buat?'
+  },
+  createBibleProject: {
+    english: 'Bible',
+    spanish: 'Biblia',
+    brazilian_portuguese: 'Bíblia',
+    tok_pisin: 'Baibel',
+    indonesian: 'Alkitab'
+  },
+  translateBibleIntoYourLanguage: {
+    english: 'Translate the Bible into your language',
+    spanish: 'Traduce la Biblia a tu idioma',
+    brazilian_portuguese: 'Traduza a Bíblia para o seu idioma',
+    tok_pisin: 'Translate Baibel long tokples bilong yu',
+    indonesian: 'Terjemahkan Alkitab ke bahasa Anda'
+  },
+  createOtherProject: {
+    english: 'Other Translation',
+    spanish: 'Otra Traducción',
+    brazilian_portuguese: 'Outra Tradução',
+    tok_pisin: 'Narapela Translation',
+    indonesian: 'Terjemahan Lain'
+  },
+  createGeneralTranslationProject: {
+    english: 'Create a general translation project',
+    spanish: 'Crear un proyecto de traducción general',
+    brazilian_portuguese: 'Criar um projeto de tradução geral',
+    tok_pisin: 'Mekim wanpela project long translate ol samting',
+    indonesian: 'Buat proyek terjemahan umum'
+  },
+  selectProject: {
+    english: 'Select Project',
+    spanish: 'Seleccionar Proyecto',
+    brazilian_portuguese: 'Selecionar Projeto',
+    tok_pisin: 'Makim Project',
+    indonesian: 'Pilih Proyek'
+  },
+  createFirstProject: {
+    english: 'Create First Project',
+    spanish: 'Crear Primer Proyecto',
+    brazilian_portuguese: 'Criar Primeiro Projeto',
+    tok_pisin: 'Mekim Nambawan Project',
+    indonesian: 'Buat Proyek Pertama'
+  },
+  createNewProject: {
+    english: 'Create New Project',
+    spanish: 'Crear Nuevo Proyecto',
+    brazilian_portuguese: 'Criar Novo Projeto',
+    tok_pisin: 'Mekim Nupela Project',
+    indonesian: 'Buat Proyek Baru'
+  },
+  existingProjectsInLanguage: {
+    english: 'Existing projects in {language}',
+    spanish: 'Proyectos existentes en {language}',
+    brazilian_portuguese: 'Projetos existentes em {language}',
+    tok_pisin: 'Ol project i stap pinis long {language}',
+    indonesian: 'Proyek yang ada dalam {language}'
+  },
+  noProjectsInLanguage: {
+    english: 'No projects yet in {language}',
+    spanish: 'Aún no hay proyectos en {language}',
+    brazilian_portuguese: 'Ainda não há projetos em {language}',
+    tok_pisin: 'I no gat project yet long {language}',
+    indonesian: 'Belum ada proyek dalam {language}'
+  },
   searchLanguages: {
     english: 'Search languages...',
     spanish: 'Buscar idiomas...',
@@ -913,6 +1067,18 @@ export const localizations = {
     tok_pisin: 'I no gat tokples',
     indonesian: 'Tidak ada bahasa ditemukan'
   },
+  noLanguagesInRegion: {
+    english:
+      'No languages found in this region. You can create a new language below.',
+    spanish:
+      'No se encontraron idiomas en esta región. Puedes crear un nuevo idioma a continuación.',
+    brazilian_portuguese:
+      'Nenhum idioma encontrado nesta região. Você pode criar um novo idioma abaixo.',
+    tok_pisin:
+      'I no gat tokples long dispela region. Yu ken mekim nupela tokples long bihain.',
+    indonesian:
+      'Tidak ada bahasa ditemukan di wilayah ini. Anda dapat membuat bahasa baru di bawah ini.'
+  },
   typeToSearch: {
     english: 'Type at least {min} characters to search',
     spanish: 'Escriba al menos {min} caracteres para buscar',
@@ -1032,6 +1198,13 @@ export const localizations = {
     tok_pisin: 'Welkam bek, hero!',
     indonesian: 'Selamat datang kembali, pahlawan!'
   },
+  welcomeToApp: {
+    english: 'Welcome',
+    spanish: 'Bienvenido',
+    brazilian_portuguese: 'Bem-vindo',
+    tok_pisin: 'Welkam',
+    indonesian: 'Selamat datang'
+  },
   recentlyVisited: {
     english: 'Recently Visited',
     spanish: 'Recientemente visitado',
@@ -2155,7 +2328,14 @@ export const localizations = {
     english: 'Go Back',
     spanish: 'Volver',
     brazilian_portuguese: 'Voltar',
-    tok_pisin: 'Go bek',
+    tok_pisin: 'Go Bek',
+    indonesian: 'Kembali'
+  },
+  back: {
+    english: 'Back',
+    spanish: 'Atrás',
+    brazilian_portuguese: 'Voltar',
+    tok_pisin: 'Go Bek',
     indonesian: 'Kembali'
   },
   confirmRemove: {
diff --git a/views/new/NextGenProjectsView.tsx b/views/new/NextGenProjectsView.tsx
index 42a2af079..e6c3e8b97 100644
--- a/views/new/NextGenProjectsView.tsx
+++ b/views/new/NextGenProjectsView.tsx
@@ -29,6 +29,7 @@ import { FolderPenIcon, PlusIcon, SearchIcon } from 'lucide-react-native';
 import React, { useEffect } from 'react';
 import { ActivityIndicator, useWindowDimensions, View } from 'react-native';
 import { ProjectListItem } from './ProjectListItem';
+import { OnboardingFlow } from './OnboardingFlow';
 
 // New imports for bottom sheet + form
 import { LanguageCombobox } from '@/components/language-combobox';
@@ -526,6 +527,35 @@ export default function NextGenProjectsView() {
   // Use the appropriate query based on active tab
   const currentQuery = activeTab === 'my' ? myProjectsQuery : allProjects;
   const { data: projectData, isLoading } = currentQuery;
+  
+  // Check if user has no projects (for onboarding)
+  const hasNoProjects = React.useMemo(() => {
+    if (activeTab !== 'my') return false;
+    if (isLoading) return false;
+    if (!currentUser?.id) return false;
+    
+    // Check if myProjectsQuery has no data
+    if (Array.isArray(projectData)) {
+      return projectData.length === 0;
+    }
+    return false;
+  }, [activeTab, isLoading, currentUser?.id, projectData]);
+  
+  const [showOnboarding, setShowOnboarding] = React.useState(false);
+  
+  // Show onboarding when user has no projects
+  React.useEffect(() => {
+    if (hasNoProjects && !showOnboarding) {
+      setShowOnboarding(true);
+    } else if (!hasNoProjects && showOnboarding) {
+      setShowOnboarding(false);
+    }
+  }, [hasNoProjects, showOnboarding]);
+
+  // Function to open onboarding wizard
+  const handleOpenOnboarding = () => {
+    setShowOnboarding(true);
+  };
 
   // Get fetching state for search indicator
   const isFetchingProjects = React.useMemo(() => {
@@ -622,15 +652,20 @@ export default function NextGenProjectsView() {
   const dimensions = useWindowDimensions();
 
   return (
-    <Drawer
-      open={isCreateOpen}
-      onOpenChange={(open) => {
-        setIsCreateOpen(open);
-        resetForm();
-      }}
-      dismissible={!isCreatingProject}
-    >
-      <View className="flex flex-1 flex-col gap-6 p-6">
+    <>
+      <OnboardingFlow
+        visible={showOnboarding}
+        onClose={() => setShowOnboarding(false)}
+      />
+      <Drawer
+        open={isCreateOpen}
+        onOpenChange={(open) => {
+          setIsCreateOpen(open);
+          resetForm();
+        }}
+        dismissible={!isCreatingProject}
+      >
+        <View className="flex flex-1 flex-col gap-6 p-6">
         <View className="flex flex-col gap-4">
           {/* Tabs */}
           <Tabs
@@ -668,9 +703,12 @@ export default function NextGenProjectsView() {
               suffixStyling={false}
               hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
             />
-            <DrawerTrigger className={buttonVariants({ size: 'icon-lg' })}>
+            <Button
+              className={buttonVariants({ size: 'icon-lg' })}
+              onPress={handleOpenOnboarding}
+            >
               <Icon as={PlusIcon} className="text-primary-foreground" />
-            </DrawerTrigger>
+            </Button>
           </View>
         </View>
 
@@ -723,7 +761,7 @@ export default function NextGenProjectsView() {
                   {activeTab === 'my' && !searchQuery && (
                     <Button
                       variant="default"
-                      onPress={() => setIsCreateOpen(true)}
+                      onPress={handleOpenOnboarding}
                       className="mt-2"
                     >
                       <Icon as={PlusIcon} size={16} />
@@ -854,5 +892,6 @@ export default function NextGenProjectsView() {
         </Form>
       </DrawerContent>
     </Drawer>
+    </>
   );
 }
diff --git a/views/new/OnboardingFlow.tsx b/views/new/OnboardingFlow.tsx
new file mode 100644
index 000000000..75abf2223
--- /dev/null
+++ b/views/new/OnboardingFlow.tsx
@@ -0,0 +1,763 @@
+import { LanguageListSkeleton } from '@/components/LanguageListSkeleton';
+import type { OnboardingStep } from '@/components/OnboardingProgressIndicator';
+import { OnboardingProgressIndicator } from '@/components/OnboardingProgressIndicator';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Icon } from '@/components/ui/icon';
+import { Input } from '@/components/ui/input';
+import { Text } from '@/components/ui/text';
+import { useAuth } from '@/contexts/AuthContext';
+import type { language as languageTable } from '@/db/drizzleSchema';
+import { system } from '@/db/powersync/system';
+import { useAppNavigation } from '@/hooks/useAppNavigation';
+import { useLanguagesByRegion } from '@/hooks/useLanguagesByRegion';
+import { useLocalization } from '@/hooks/useLocalization';
+import { useProjectsByLanguage } from '@/hooks/useProjectsByLanguage';
+import { useRegions } from '@/hooks/useRegions';
+import { resolveTable } from '@/utils/dbUtils';
+import { getThemeColor } from '@/utils/styleUtils';
+import { useHybridData } from '@/views/new/useHybridData';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toCompilableQuery } from '@powersync/drizzle-driver';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  BookOpenIcon,
+  ChurchIcon,
+  GlobeIcon,
+  LanguagesIcon,
+  PlusIcon,
+  XIcon
+} from 'lucide-react-native';
+import React, { useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  View
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import uuid from 'react-native-uuid';
+import { z } from 'zod';
+import { ProjectListItem } from './ProjectListItem';
+
+type Language = typeof languageTable.$inferSelect;
+
+interface OnboardingFlowProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+type Step = OnboardingStep | 'create-language';
+
+export function OnboardingFlow({ visible, onClose }: OnboardingFlowProps) {
+  const { t } = useLocalization();
+  const { currentUser } = useAuth();
+  const { goToProject } = useAppNavigation();
+  const queryClient = useQueryClient();
+  const insets = useSafeAreaInsets();
+
+  const [step, setStep] = useState<Step>('region');
+  const [projectType, setProjectType] = useState<
+    'bible' | 'unstructured' | null
+  >(null);
+  const [selectedRegionId, setSelectedRegionId] = useState<string | null>(null);
+  const [selectedLanguageId, setSelectedLanguageId] = useState<string | null>(
+    null
+  );
+  const [showCreateLanguage, setShowCreateLanguage] = useState(false);
+
+  const { db } = system;
+
+  // Query regions
+  const { data: regions, isLoading: isLoadingRegions } = useRegions([
+    'continent',
+    'nation'
+  ]);
+
+  // Query languages by region
+  const { data: languagesByRegion, isLoading: isLoadingLanguages } =
+    useLanguagesByRegion(selectedRegionId);
+
+  // Query projects by selected language
+  const { data: projectsByLanguage = [], isLoading: isLoadingProjects } =
+    useProjectsByLanguage(selectedLanguageId);
+
+  // Query existing languages to map languoids to language records
+  const { data: existingLanguages = [] } = useHybridData({
+    dataType: 'all-languages-for-onboarding',
+    queryKeyParams: [],
+    offlineQuery: toCompilableQuery(
+      system.db.query.language.findMany({
+        where: (language, { eq }) => eq(language.active, true)
+      })
+    ),
+    cloudQueryFn: async () => {
+      const { data, error } = await system.supabaseConnector.client
+        .from('language')
+        .select('*')
+        .eq('active', true)
+        .overrideTypes<Language[]>();
+      if (error) throw error;
+      return data;
+    },
+    enableCloudQuery: true,
+    enableOfflineQuery: true
+  });
+
+  // Language creation form schema
+  const languageFormSchema = z.object({
+    native_name: z.string().min(1, t('nameRequired')).trim(),
+    english_name: z.string().optional().or(z.literal('')),
+    iso639_3: z.string().optional(),
+    locale: z.string().optional()
+  });
+
+  type LanguageFormData = z.infer<typeof languageFormSchema>;
+
+  const languageForm = useForm<LanguageFormData>({
+    resolver: zodResolver(languageFormSchema),
+    defaultValues: {
+      native_name: '',
+      english_name: '',
+      iso639_3: '',
+      locale: ''
+    }
+  });
+
+  // Create language mutation
+  const { mutateAsync: createLanguage, isPending: isCreatingLanguage } =
+    useMutation({
+      mutationFn: async (values: LanguageFormData) => {
+        const newLanguage = await db
+          .insert(resolveTable('language', { localOverride: true }))
+          .values({
+            id: uuid.v4(),
+            native_name: values.native_name,
+            english_name: values.english_name || null,
+            iso639_3: values.iso639_3 || null,
+            locale: values.locale || null,
+            ui_ready: false,
+            creator_id: currentUser!.id,
+            download_profiles: [currentUser!.id]
+          })
+          .returning();
+
+        if (!newLanguage[0]) throw new Error('Failed to create language');
+        return newLanguage[0] as Language;
+      }
+    });
+
+  // Create project mutation
+  const { mutateAsync: createProject, isPending: isCreatingProject } =
+    useMutation({
+      mutationFn: async (languageId: string) => {
+        const languageName =
+          existingLanguages.find((l) => l.id === languageId)?.native_name ||
+          existingLanguages.find((l) => l.id === languageId)?.english_name ||
+          'Unknown Language';
+        const projectName =
+          projectType === 'bible'
+            ? `Bible Translation - ${languageName}`
+            : `Translation Project - ${languageName}`;
+
+        let newProject:
+          | { id: string; name: string; template: string | null }
+          | undefined;
+        await db.transaction(async (tx) => {
+          const [project] = await tx
+            .insert(resolveTable('project', { localOverride: true }))
+            .values({
+              name: projectName,
+              template: projectType!,
+              target_language_id: languageId,
+              creator_id: currentUser!.id,
+              download_profiles: [currentUser!.id],
+              private: true,
+              visible: true
+            })
+            .returning();
+
+          if (!project) throw new Error('Failed to create project');
+
+          await tx
+            .insert(
+              resolveTable('profile_project_link', { localOverride: true })
+            )
+            .values({
+              id: `${currentUser!.id}_${project.id}`,
+              project_id: project.id,
+              profile_id: currentUser!.id,
+              membership: 'owner'
+            });
+
+          newProject = project as {
+            id: string;
+            name: string;
+            template: string | null;
+          };
+        });
+
+        if (!newProject) throw new Error('Failed to create project');
+        return newProject;
+      },
+      onSuccess: (newProject) => {
+        // Invalidate queries
+        void queryClient.invalidateQueries({ queryKey: ['my-projects'] });
+        void queryClient.invalidateQueries({
+          queryKey: ['projects-by-language']
+        });
+
+        // Navigate to the project
+        goToProject({
+          id: newProject.id,
+          name: newProject.name,
+          template: newProject.template
+        });
+
+        // Close onboarding and reset state
+        handleClose();
+      },
+      onError: (error) => {
+        console.error('Failed to create project', error);
+      }
+    });
+
+  // Map languoids to language records - create language record if it doesn't exist
+  const mappedLanguages = useMemo(() => {
+    if (!Array.isArray(languagesByRegion) || !Array.isArray(existingLanguages))
+      return [];
+
+    return languagesByRegion.map((languoid) => {
+      // Try to find existing language by matching names
+      const existingLang = existingLanguages.find(
+        (lang) =>
+          lang.native_name?.toLowerCase() === languoid.name.toLowerCase() ||
+          lang.english_name?.toLowerCase() === languoid.name.toLowerCase()
+      );
+
+      return {
+        ...languoid,
+        languageId: existingLang?.id || null,
+        language: existingLang || null,
+        // Store languoid info for creating language if needed
+        languoidName: languoid.name
+      };
+    });
+  }, [languagesByRegion, existingLanguages]);
+
+  const handleRegionSelect = (regionId: string) => {
+    setSelectedRegionId(regionId);
+    setStep('language');
+  };
+
+  const handleLanguageSelect = async (
+    languageId: string | null,
+    languoidName?: string
+  ) => {
+    if (!languageId && languoidName) {
+      // Need to create language record first
+      try {
+        const newLanguage = await createLanguage({
+          native_name: languoidName,
+          english_name: languoidName,
+          iso639_3: '',
+          locale: ''
+        });
+        setSelectedLanguageId(newLanguage.id);
+        setStep('projects');
+      } catch (error) {
+        console.error('Failed to create language', error);
+      }
+    } else if (languageId) {
+      setSelectedLanguageId(languageId);
+      setStep('projects');
+    }
+  };
+
+  const handleCreateLanguage = async (values: LanguageFormData) => {
+    try {
+      const newLanguage = await createLanguage(values);
+      setSelectedLanguageId(newLanguage.id);
+      setShowCreateLanguage(false);
+      languageForm.reset();
+      setStep('projects');
+    } catch (error) {
+      console.error('Failed to create language', error);
+    }
+  };
+
+  const handleProjectSelect = (project: (typeof projectsByLanguage)[0]) => {
+    // Navigate to existing project
+    goToProject({
+      id: project.id,
+      name: project.name,
+      template: project.template,
+      projectData: project as Record<string, unknown>
+    });
+    handleClose();
+  };
+
+  const handleCreateNewProject = () => {
+    setStep('create-project');
+  };
+
+  const handleProjectTypeSelect = async (type: 'bible' | 'unstructured') => {
+    if (!selectedLanguageId) return;
+    setProjectType(type);
+    try {
+      await createProject(selectedLanguageId);
+    } catch (error) {
+      console.error('Failed to create project', error);
+    }
+  };
+
+  const handleBack = () => {
+    if (step === 'language') {
+      setStep('region');
+      setSelectedRegionId(null);
+    } else if (step === 'projects') {
+      setStep('language');
+      setSelectedLanguageId(null);
+    } else if (step === 'create-project') {
+      setStep('projects');
+      setProjectType(null);
+    } else if (step === 'create-language') {
+      setStep('language');
+      setShowCreateLanguage(false);
+      languageForm.reset();
+    }
+  };
+
+  const handleClose = () => {
+    // Reset all state when closing
+    setStep('region');
+    setProjectType(null);
+    setSelectedRegionId(null);
+    setSelectedLanguageId(null);
+    setShowCreateLanguage(false);
+    languageForm.reset();
+    onClose();
+  };
+
+  const isLoading = isCreatingLanguage || isCreatingProject;
+
+  // Get selected language name for display
+  const selectedLanguageName = useMemo(() => {
+    if (!selectedLanguageId) return '';
+    const lang = existingLanguages.find((l) => l.id === selectedLanguageId);
+    return lang?.native_name || lang?.english_name || '';
+  }, [selectedLanguageId, existingLanguages]);
+
+  if (!visible) return null;
+
+  // Determine progress step (exclude create-language from progress)
+  const progressStep: OnboardingStep =
+    step === 'create-language' ? 'language' : step;
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={false}
+      animationType="slide"
+      onRequestClose={handleClose}
+    >
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        className="flex-1 bg-background"
+        style={{ paddingTop: insets.top }}
+      >
+        {/* Progress Indicator */}
+        {step !== 'create-language' && (
+          <OnboardingProgressIndicator currentStep={progressStep} />
+        )}
+
+        {/* Header */}
+        <View className="flex-row items-center justify-between border-b border-border px-6 py-4">
+          <Text variant="h2" className="flex-1">
+            {step === 'region' && t('selectRegion')}
+            {step === 'language' && t('selectYourLanguage')}
+            {step === 'projects' && t('selectProject')}
+            {step === 'create-project' && t('whatWouldYouLikeToCreate')}
+            {step === 'create-language' && t('createLanguage')}
+          </Text>
+          <Pressable onPress={handleClose} disabled={isLoading}>
+            <Icon as={XIcon} size={24} className="text-muted-foreground" />
+          </Pressable>
+        </View>
+
+        {/* Content */}
+        <ScrollView className="flex-1" contentContainerStyle={{ padding: 24 }}>
+          {/* Step 1: Region Selection */}
+          {step === 'region' && (
+            <View className="flex-1 gap-6">
+              <Text
+                variant="default"
+                className="text-center text-muted-foreground"
+              >
+                {t('selectRegionToFilterLanguages')}
+              </Text>
+
+              {isLoadingRegions ? (
+                <View className="flex-1 items-center justify-center">
+                  <ActivityIndicator
+                    size="large"
+                    color={getThemeColor('primary')}
+                  />
+                </View>
+              ) : (
+                <View className="gap-3">
+                  {regions.map((region) => (
+                    <Button
+                      key={region.id}
+                      variant="outline"
+                      onPress={() => handleRegionSelect(region.id)}
+                      className="h-16 flex-row items-center justify-between px-6"
+                      disabled={isLoading}
+                    >
+                      <View className="flex-row items-center gap-3">
+                        <Icon
+                          as={GlobeIcon}
+                          size={20}
+                          className="text-primary"
+                        />
+                        <Text variant="default">{region.name}</Text>
+                        <Text className="text-xs text-muted-foreground">
+                          ({region.level})
+                        </Text>
+                      </View>
+                    </Button>
+                  ))}
+                </View>
+              )}
+            </View>
+          )}
+
+          {/* Step 2: Language Selection */}
+          {step === 'language' && !showCreateLanguage && (
+            <View className="flex-1 gap-6">
+              <Text
+                variant="default"
+                className="text-center text-muted-foreground"
+              >
+                {t('selectYourLanguage')}
+              </Text>
+
+              {isLoadingLanguages ? (
+                <LanguageListSkeleton />
+              ) : mappedLanguages.length === 0 ? (
+                <View className="flex-1 items-center justify-center py-8">
+                  <Icon
+                    as={LanguagesIcon}
+                    size={48}
+                    className="mb-4 text-muted-foreground"
+                  />
+                  <Text
+                    variant="default"
+                    className="mb-2 text-center text-muted-foreground"
+                  >
+                    {t('noLanguagesFound')}
+                  </Text>
+                  <Text className="text-center text-sm text-muted-foreground/80">
+                    {t('noLanguagesInRegion')}
+                  </Text>
+                  <Button
+                    variant="default"
+                    onPress={() => setShowCreateLanguage(true)}
+                    className="mt-6"
+                    disabled={isLoading}
+                  >
+                    <Text>{t('createNewLanguage')}</Text>
+                  </Button>
+                </View>
+              ) : (
+                <>
+                  <ScrollView
+                    className="flex-1"
+                    contentContainerStyle={{ gap: 12 }}
+                  >
+                    {mappedLanguages.map((lang) => {
+                      const languageId = lang.languageId;
+
+                      return (
+                        <Button
+                          key={lang.id}
+                          variant="outline"
+                          onPress={() =>
+                            handleLanguageSelect(languageId, lang.languoidName)
+                          }
+                          className="h-16 flex-row items-center justify-between px-6"
+                          disabled={isLoading}
+                        >
+                          <View className="flex-row items-center gap-3">
+                            <Icon
+                              as={LanguagesIcon}
+                              size={20}
+                              className="text-primary"
+                            />
+                            <Text variant="default">{lang.name}</Text>
+                            {!languageId && (
+                              <Text className="text-xs text-muted-foreground">
+                                ({t('willCreateLanguage')})
+                              </Text>
+                            )}
+                          </View>
+                        </Button>
+                      );
+                    })}
+                  </ScrollView>
+
+                  <Button
+                    variant="ghost"
+                    onPress={() => setShowCreateLanguage(true)}
+                    className="mt-4"
+                    disabled={isLoading}
+                  >
+                    <Text>{t('languageNotInList')}</Text>
+                  </Button>
+                </>
+              )}
+            </View>
+          )}
+
+          {/* Step 3: Project Selection */}
+          {step === 'projects' && (
+            <View className="flex-1 gap-6">
+              {isLoadingProjects ? (
+                <View className="flex-1 items-center justify-center">
+                  <ActivityIndicator
+                    size="large"
+                    color={getThemeColor('primary')}
+                  />
+                </View>
+              ) : (
+                <>
+                  {/* Create New Project Button - Always prominent */}
+                  <Button
+                    variant="default"
+                    size="lg"
+                    onPress={handleCreateNewProject}
+                    className="mb-4 flex-row items-center justify-center gap-2"
+                    disabled={isLoading}
+                  >
+                    <Icon
+                      as={PlusIcon}
+                      size={20}
+                      className="text-primary-foreground"
+                    />
+                    <Text className="text-primary-foreground">
+                      {projectsByLanguage.length === 0
+                        ? t('createFirstProject')
+                        : t('createNewProject')}
+                    </Text>
+                  </Button>
+
+                  {/* Existing Projects List */}
+                  {projectsByLanguage.length > 0 ? (
+                    <View className="gap-4">
+                      <Text
+                        variant="default"
+                        className="text-center text-muted-foreground"
+                      >
+                        {t('existingProjectsInLanguage', {
+                          language: selectedLanguageName
+                        })}
+                      </Text>
+                      <ScrollView
+                        className="flex-1"
+                        contentContainerStyle={{ gap: 12 }}
+                      >
+                        {projectsByLanguage.map((project) => (
+                          <Pressable
+                            key={project.id}
+                            onPress={() => handleProjectSelect(project)}
+                          >
+                            <ProjectListItem
+                              project={{
+                                ...project,
+                                source: 'cloud' as const
+                              }}
+                            />
+                          </Pressable>
+                        ))}
+                      </ScrollView>
+                    </View>
+                  ) : (
+                    <View className="flex-1 items-center justify-center py-8">
+                      <Text
+                        variant="default"
+                        className="text-center text-muted-foreground"
+                      >
+                        {t('noProjectsInLanguage', {
+                          language: selectedLanguageName
+                        })}
+                      </Text>
+                    </View>
+                  )}
+                </>
+              )}
+            </View>
+          )}
+
+          {/* Step 4: Create Project Type Selection */}
+          {step === 'create-project' && (
+            <View className="flex-1 items-center justify-center gap-8">
+              <Text variant="default" className="mb-4 text-center">
+                {t('whatWouldYouLikeToCreate')}
+              </Text>
+
+              <View className="w-full gap-4">
+                {/* Bible Project Card */}
+                <Card className="w-full">
+                  <Pressable
+                    onPress={() => handleProjectTypeSelect('bible')}
+                    disabled={isLoading}
+                    accessibilityRole="button"
+                  >
+                    <View className="flex-row items-center p-6">
+                      <View className="mr-6 h-16 w-16 items-center justify-center rounded-lg bg-muted">
+                        <Icon
+                          as={BookOpenIcon}
+                          size={32}
+                          className="text-primary"
+                        />
+                      </View>
+                      <View className="flex-1 flex-col items-start">
+                        <Text
+                          variant="h4"
+                          className="mb-1"
+                          numberOfLines={1}
+                          ellipsizeMode="tail"
+                        >
+                          {t('createBibleProject')}
+                        </Text>
+                        <Text
+                          className="text-sm text-muted-foreground"
+                          numberOfLines={2}
+                          ellipsizeMode="tail"
+                        >
+                          {t('translateBibleIntoYourLanguage')}
+                        </Text>
+                      </View>
+                    </View>
+                  </Pressable>
+                </Card>
+
+                {/* Other Translation Project Card */}
+                <Card className="w-full">
+                  <Pressable
+                    onPress={() => handleProjectTypeSelect('unstructured')}
+                    disabled={isLoading}
+                    accessibilityRole="button"
+                  >
+                    <View className="flex-row items-center p-6">
+                      <View className="mr-6 h-16 w-16 items-center justify-center rounded-lg bg-muted">
+                        <Icon
+                          as={ChurchIcon}
+                          size={32}
+                          className="text-primary"
+                        />
+                      </View>
+                      <View className="flex-1 flex-col items-start">
+                        <Text
+                          variant="h4"
+                          className="mb-1"
+                          numberOfLines={1}
+                          ellipsizeMode="tail"
+                        >
+                          {t('createOtherProject')}
+                        </Text>
+                        <Text
+                          className="text-sm text-muted-foreground"
+                          numberOfLines={2}
+                          ellipsizeMode="tail"
+                        >
+                          {t('createGeneralTranslationProject')}
+                        </Text>
+                      </View>
+                    </View>
+                  </Pressable>
+                </Card>
+              </View>
+            </View>
+          )}
+
+          {/* Step 5: Create Language */}
+          {(step === 'create-language' || showCreateLanguage) && (
+            <View className="flex-1 gap-6">
+              <Text
+                variant="default"
+                className="text-center text-muted-foreground"
+              >
+                {t('createNewLanguage')}
+              </Text>
+
+              <View className="gap-4">
+                <Input
+                  placeholder={t('nativeName')}
+                  value={languageForm.watch('native_name')}
+                  onChangeText={(text) =>
+                    languageForm.setValue('native_name', text)
+                  }
+                  editable={!isLoading}
+                />
+
+                <Input
+                  placeholder={t('englishName') + ' (Optional)'}
+                  value={languageForm.watch('english_name')}
+                  onChangeText={(text) =>
+                    languageForm.setValue('english_name', text)
+                  }
+                  editable={!isLoading}
+                />
+
+                <Input
+                  placeholder={t('iso6393Code') + ' (Optional)'}
+                  value={languageForm.watch('iso639_3')}
+                  onChangeText={(text) =>
+                    languageForm.setValue('iso639_3', text)
+                  }
+                  editable={!isLoading}
+                />
+
+                <Input
+                  placeholder={t('locale') + ' (Optional)'}
+                  value={languageForm.watch('locale')}
+                  onChangeText={(text) => languageForm.setValue('locale', text)}
+                  editable={!isLoading}
+                />
+
+                <Button
+                  onPress={languageForm.handleSubmit(handleCreateLanguage)}
+                  disabled={isLoading || !languageForm.formState.isValid}
+                  className="mt-4"
+                >
+                  {isCreatingLanguage ? (
+                    <ActivityIndicator
+                      size="small"
+                      color={getThemeColor('primary-foreground')}
+                    />
+                  ) : (
+                    <Text>{t('createAndContinue')}</Text>
+                  )}
+                </Button>
+              </View>
+            </View>
+          )}
+        </ScrollView>
+
+        {/* Footer with Back button */}
+        {step !== 'region' && (
+          <View className="border-t border-border px-6 py-4">
+            <Button variant="ghost" onPress={handleBack} disabled={isLoading}>
+              <Text>{t('back')}</Text>
+            </Button>
+          </View>
+        )}
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}

From 3f80e64cd18a210b0155d8817725963d8dbe19f0 Mon Sep 17 00:00:00 2001
From: ryderwishart <ryderwishart@gmail.com>
Date: Thu, 13 Nov 2025 21:53:46 -0700
Subject: [PATCH 02/11] Add onboarding library

---
 package-lock.json | 70 +++++++++++++++++++++++++++++++++++++++++++++--
 package.json      |  1 +
 2 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8cc216869..ff94bd3a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "langquest",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "langquest",
-      "version": "2.0.0",
+      "version": "2.0.1",
       "dependencies": {
         "@azure/core-asynciterator-polyfill": "^1.0.2",
         "@expo-google-fonts/noto-sans": "^0.4.2",
@@ -85,6 +85,7 @@
         "react-native": "0.79.5",
         "react-native-element-dropdown": "2.12.2",
         "react-native-gesture-handler": "~2.24.0",
+        "react-native-onboarding": "^1.0.6",
         "react-native-pager-view": "^7.0.0",
         "react-native-reanimated": "~4.1.0",
         "react-native-safe-area-context": "5.4.0",
@@ -9229,6 +9230,38 @@
       "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
       "license": "MIT"
     },
+    "node_modules/assign-deep": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/assign-deep/-/assign-deep-0.4.8.tgz",
+      "integrity": "sha512-uxqXJCnNZDEjPnsaLKVzmh/ST5+Pqoz0wi06HDfHKx1ASNpSbbvz2qW2Gl8ZyHwr5jnm11X2S5eMQaP1lMZmCg==",
+      "license": "MIT",
+      "dependencies": {
+        "assign-symbols": "^0.1.1",
+        "is-primitive": "^2.0.0",
+        "kind-of": "^5.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/assign-deep/node_modules/kind-of": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+      "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/assign-symbols": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-0.1.1.tgz",
+      "integrity": "sha512-gwzH8QS/GV4pQsf6XOrlpBC6aDE8uJeZvymbEJ0W9TuDYqYOZc4RodvKDH98HCc+KFPYil1kD2XT0X0JWeOzQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ast-types": {
       "version": "0.15.2",
       "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.15.2.tgz",
@@ -16214,6 +16247,15 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "license": "MIT"
     },
+    "node_modules/is-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
+      "integrity": "sha512-N3w1tFaRfk3UrPfqeRyD+GYDASU3W5VinKhlORy8EWVf/sIdDL9GAcew85XmktCfH+ngG7SRXEVDoO18WMdB/Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -21125,6 +21167,16 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-onboarding": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/react-native-onboarding/-/react-native-onboarding-1.0.6.tgz",
+      "integrity": "sha512-vI/UlspW2N2Y+Q7jEAPskRXqgsJcdn48SDXU8sI91Tnc5xL/EkOQukrIxthSVIt10CRel++LgJws+B6bGk7Z2A==",
+      "license": "MIT",
+      "dependencies": {
+        "assign-deep": "^0.4.5",
+        "react-native-swiper": "git+https://github.com/FuYaoDe/react-native-swiper.git"
+      }
+    },
     "node_modules/react-native-pager-view": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-7.0.0.tgz",
@@ -21220,6 +21272,14 @@
         "react-native-svg": ">=12.0.0"
       }
     },
+    "node_modules/react-native-swiper": {
+      "version": "1.4.4",
+      "resolved": "git+ssh://git@github.com/FuYaoDe/react-native-swiper.git#a6417ff41a8b2d490bdcc4541015ab35736d4595",
+      "license": "ISC",
+      "dependencies": {
+        "react-timer-mixin": "^0.13.3"
+      }
+    },
     "node_modules/react-native-url-polyfill": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-native-url-polyfill/-/react-native-url-polyfill-2.0.0.tgz",
@@ -21489,6 +21549,12 @@
         "react": "^19.0.0"
       }
     },
+    "node_modules/react-timer-mixin": {
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz",
+      "integrity": "sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==",
+      "license": "MIT"
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 4335093c7..23b3eeab3 100644
--- a/package.json
+++ b/package.json
@@ -126,6 +126,7 @@
     "react-native": "0.79.5",
     "react-native-element-dropdown": "2.12.2",
     "react-native-gesture-handler": "~2.24.0",
+    "react-native-onboarding": "^1.0.6",
     "react-native-pager-view": "^7.0.0",
     "react-native-reanimated": "~4.1.0",
     "react-native-safe-area-context": "5.4.0",

From c3ee4d523fe3581acbfc19e6806030ef03ef2494 Mon Sep 17 00:00:00 2001
From: ryderwishart <ryderwishart@gmail.com>
Date: Fri, 14 Nov 2025 18:14:29 -0700
Subject: [PATCH 03/11] Further onboarding adjustments

---
 components/AppHeader.tsx                      |  18 +-
 components/OnboardingProgressIndicator.tsx    |  73 +-
 services/localizations.ts                     | 217 ++++++
 store/localStore.ts                           |  12 +
 views/AppView.tsx                             |   9 +
 views/new/NextGenProjectsView.tsx             | 640 ++++++++++--------
 views/new/SimpleOnboardingFlow.tsx            | 554 +++++++++++++++
 .../new/onboarding/AnimatedOnboardingIcon.tsx | 126 ++++
 views/new/onboarding/AnimatedStepContent.tsx  |  49 ++
 .../new/onboarding/BibleBookListAnimation.tsx |  90 +++
 views/new/onboarding/BibleChapterGrid.tsx     |  87 +++
 views/new/onboarding/InviteAnimation.tsx      |  72 ++
 .../onboarding/ProjectCreationAnimation.tsx   |  54 ++
 views/new/onboarding/QuestListAnimation.tsx   |  56 ++
 views/new/onboarding/RecordingAnimation.tsx   | 237 +++++++
 views/new/onboarding/VisionScreen.tsx         | 149 ++++
 16 files changed, 2143 insertions(+), 300 deletions(-)
 create mode 100644 views/new/SimpleOnboardingFlow.tsx
 create mode 100644 views/new/onboarding/AnimatedOnboardingIcon.tsx
 create mode 100644 views/new/onboarding/AnimatedStepContent.tsx
 create mode 100644 views/new/onboarding/BibleBookListAnimation.tsx
 create mode 100644 views/new/onboarding/BibleChapterGrid.tsx
 create mode 100644 views/new/onboarding/InviteAnimation.tsx
 create mode 100644 views/new/onboarding/ProjectCreationAnimation.tsx
 create mode 100644 views/new/onboarding/QuestListAnimation.tsx
 create mode 100644 views/new/onboarding/RecordingAnimation.tsx
 create mode 100644 views/new/onboarding/VisionScreen.tsx

diff --git a/components/AppHeader.tsx b/components/AppHeader.tsx
index ac9053c97..6b37ea4d1 100644
--- a/components/AppHeader.tsx
+++ b/components/AppHeader.tsx
@@ -11,6 +11,7 @@ import {
   AlertTriangle,
   ChevronRight,
   CloudOff,
+  HelpCircle,
   Menu,
   RefreshCw
 } from 'lucide-react-native';
@@ -29,11 +30,13 @@ import { Button } from './ui/button';
 export default function AppHeader({
   drawerToggleCallback,
   isCloudLoading = false,
-  isNavigating = false
+  isNavigating = false,
+  onOnboardingPress
 }: {
   drawerToggleCallback: () => void;
   isCloudLoading?: boolean;
   isNavigating?: boolean;
+  onOnboardingPress?: () => void;
 }) {
   const {
     breadcrumbs,
@@ -231,6 +234,19 @@ export default function AppHeader({
             : null}
         </View>
 
+        {/* Help/Onboarding Button */}
+        {onOnboardingPress && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onPress={onOnboardingPress}
+            className="relative size-8 mr-2"
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          >
+            <Icon as={HelpCircle} size={24} className="text-muted-foreground" />
+          </Button>
+        )}
+
         {/* Menu Button with Indicators */}
         <View className="relative">
           <Button
diff --git a/components/OnboardingProgressIndicator.tsx b/components/OnboardingProgressIndicator.tsx
index 972d586ea..0ad6b3286 100644
--- a/components/OnboardingProgressIndicator.tsx
+++ b/components/OnboardingProgressIndicator.tsx
@@ -9,37 +9,94 @@ import { useEffect } from 'react';
 import { View } from 'react-native';
 import { Text } from '@/components/ui/text';
 
-export type OnboardingStep = 'region' | 'language' | 'projects' | 'create-project';
+export type OnboardingStep =
+  | 'vision'
+  | 'region'
+  | 'language'
+  | 'projects'
+  | 'create-project'
+  | 'create-project-simple'
+  | 'bible-select-book'
+  | 'create-quest'
+  | 'record-audio'
+  | 'invite-collaborators';
 
 interface OnboardingProgressIndicatorProps {
   currentStep: OnboardingStep;
   className?: string;
 }
 
-const STEP_ORDER: OnboardingStep[] = ['region', 'language', 'projects', 'create-project'];
+// Simple onboarding steps (for minimal onboarding flow - Other path)
+const SIMPLE_STEP_ORDER: OnboardingStep[] = [
+  'vision',
+  'create-project-simple',
+  'create-quest',
+  'record-audio',
+  'invite-collaborators'
+];
+
+// Bible onboarding steps (bible-create-chapter is now part of bible-select-book)
+const BIBLE_STEP_ORDER: OnboardingStep[] = [
+  'vision',
+  'create-project-simple',
+  'bible-select-book',
+  'record-audio',
+  'invite-collaborators'
+];
+
+// Original onboarding steps (for region/language flow)
+const ORIGINAL_STEP_ORDER: OnboardingStep[] = [
+  'region',
+  'language',
+  'projects',
+  'create-project'
+];
+
+// Determine which step order to use based on current step
+const getStepOrder = (currentStep: OnboardingStep): OnboardingStep[] => {
+  // If vision step, use simple order (will be updated when project type is selected)
+  if (currentStep === 'vision') {
+    return SIMPLE_STEP_ORDER;
+  }
+  if (BIBLE_STEP_ORDER.includes(currentStep)) {
+    return BIBLE_STEP_ORDER;
+  }
+  if (SIMPLE_STEP_ORDER.includes(currentStep)) {
+    return SIMPLE_STEP_ORDER;
+  }
+  return ORIGINAL_STEP_ORDER;
+};
 
 const STEP_LABELS: Record<OnboardingStep, string> = {
+  vision: 'Vision',
   region: 'Region',
   language: 'Language',
   projects: 'Projects',
-  'create-project': 'Create'
+  'create-project': 'Create',
+  'create-project-simple': 'Project',
+  'bible-select-book': 'Book',
+  'bible-create-chapter': 'Chapter',
+  'create-quest': 'Quest',
+  'record-audio': 'Record',
+  'invite-collaborators': 'Invite'
 };
 
 export function OnboardingProgressIndicator({
   currentStep,
   className
 }: OnboardingProgressIndicatorProps) {
-  const currentStepIndex = STEP_ORDER.indexOf(currentStep);
-  const progress = useSharedValue(currentStepIndex / (STEP_ORDER.length - 1));
+  const stepOrder = getStepOrder(currentStep);
+  const currentStepIndex = stepOrder.indexOf(currentStep);
+  const progress = useSharedValue(currentStepIndex / (stepOrder.length - 1));
 
   // Animate progress when step changes
   useEffect(() => {
-    const targetProgress = currentStepIndex / (STEP_ORDER.length - 1);
+    const targetProgress = currentStepIndex / (stepOrder.length - 1);
     progress.value = withSpring(targetProgress, {
       damping: 15,
       stiffness: 100
     });
-  }, [currentStepIndex, progress]);
+  }, [currentStepIndex, progress, stepOrder.length]);
 
   // Animated progress bar style
   const progressBarStyle = useAnimatedStyle(() => {
@@ -68,7 +125,7 @@ export function OnboardingProgressIndicator({
         </View>
 
         {/* Step indicators */}
-        {STEP_ORDER.map((step, index) => {
+        {stepOrder.map((step, index) => {
           const isActive = index === currentStepIndex;
           const isCompleted = index < currentStepIndex;
           const isPending = index > currentStepIndex;
diff --git a/services/localizations.ts b/services/localizations.ts
index f9a4f1b4a..635543bdb 100644
--- a/services/localizations.ts
+++ b/services/localizations.ts
@@ -5360,6 +5360,223 @@ export const localizations = {
     brazilian_portuguese: 'Não sincronizado',
     tok_pisin: 'i no sync yet',
     indonesian: 'Tidak disinkronkan'
+  },
+  onboardingCreateProjectTitle: {
+    english: 'Record a Bible, or any other content',
+    spanish: 'Graba una Biblia o cualquier otro contenido',
+    brazilian_portuguese: 'Grave uma Bíblia ou qualquer outro conteúdo',
+    tok_pisin: 'Rekodim Baibel o ol narapela samting',
+    indonesian: 'Rekam Alkitab atau konten lainnya'
+  },
+  onboardingCreateProjectSubtitle: {
+    english: 'Start by creating your first project',
+    spanish: 'Comienza creando tu primer proyecto',
+    brazilian_portuguese: 'Comece criando seu primeiro projeto',
+    tok_pisin: 'Stat long mekim nupela projek',
+    indonesian: 'Mulai dengan membuat proyek pertama Anda'
+  },
+  onboardingCreateProjectExample: {
+    english: 'Stories',
+    spanish: 'Historias',
+    brazilian_portuguese: 'Histórias',
+    tok_pisin: 'Stori',
+    indonesian: 'Cerita'
+  },
+  onboardingCreateProjectDescription: {
+    english: 'Example project name',
+    spanish: 'Nombre de proyecto de ejemplo',
+    brazilian_portuguese: 'Nome do projeto de exemplo',
+    tok_pisin: 'Nem bilong projek olsem',
+    indonesian: 'Nama proyek contoh'
+  },
+  onboardingCreateProject: {
+    english: 'Create Project',
+    spanish: 'Crear Proyecto',
+    brazilian_portuguese: 'Criar Projeto',
+    tok_pisin: 'Mekim Projek',
+    indonesian: 'Buat Proyek'
+  },
+  onboardingCreateQuestTitle: {
+    english: 'Organize your content',
+    spanish: 'Organiza tu contenido',
+    brazilian_portuguese: 'Organize seu conteúdo',
+    tok_pisin: 'Oganaisim samting bilong yu',
+    indonesian: 'Organisir konten Anda'
+  },
+  onboardingCreateQuestSubtitle: {
+    english: 'Add quests to break down your project into manageable pieces',
+    spanish: 'Agrega misiones para dividir tu proyecto en partes manejables',
+    brazilian_portuguese: 'Adicione missões para dividir seu projeto em partes gerenciáveis',
+    tok_pisin: 'Putim kwest long brukim projek i go long liklik hap',
+    indonesian: 'Tambahkan quest untuk membagi proyek Anda menjadi bagian yang dapat dikelola'
+  },
+  onboardingQuestExample1: {
+    english: 'Story 1',
+    spanish: 'Historia 1',
+    brazilian_portuguese: 'História 1',
+    tok_pisin: 'Stori 1',
+    indonesian: 'Cerita 1'
+  },
+  onboardingQuestExample2: {
+    english: 'Story 2',
+    spanish: 'Historia 2',
+    brazilian_portuguese: 'História 2',
+    tok_pisin: 'Stori 2',
+    indonesian: 'Cerita 2'
+  },
+  onboardingCreateQuest: {
+    english: 'Create Quest',
+    spanish: 'Crear Misión',
+    brazilian_portuguese: 'Criar Missão',
+    tok_pisin: 'Mekim Kwest',
+    indonesian: 'Buat Quest'
+  },
+  onboardingRecordAudioTitle: {
+    english: 'Start recording',
+    spanish: 'Comienza a grabar',
+    brazilian_portuguese: 'Comece a gravar',
+    tok_pisin: 'Stat long rekodim',
+    indonesian: 'Mulai merekam'
+  },
+  onboardingRecordAudioSubtitle: {
+    english: 'Hold the button to record, or slide to record anytime you talk',
+    spanish: 'Mantén presionado el botón para grabar, o desliza para grabar cuando hables',
+    brazilian_portuguese: 'Mantenha pressionado o botão para gravar ou deslize para gravar quando falar',
+    tok_pisin: 'Holim button long rekodim, o slipim long rekodim taim yu toktok',
+    indonesian: 'Tahan tombol untuk merekam, atau geser untuk merekam kapan saja Anda berbicara'
+  },
+  onboardingRecordMethod1: {
+    english: 'Hold button to record',
+    spanish: 'Mantén presionado para grabar',
+    brazilian_portuguese: 'Mantenha pressionado para gravar',
+    tok_pisin: 'Holim button long rekodim',
+    indonesian: 'Tahan tombol untuk merekam'
+  },
+  onboardingRecordMethod2: {
+    english: 'Slide to record anytime you talk',
+    spanish: 'Desliza para grabar cuando hables',
+    brazilian_portuguese: 'Deslize para gravar quando falar',
+    tok_pisin: 'Slipim long rekodim taim yu toktok',
+    indonesian: 'Geser untuk merekam kapan saja Anda berbicara'
+  },
+  onboardingStartRecording: {
+    english: 'Start Recording',
+    spanish: 'Comenzar Grabación',
+    brazilian_portuguese: 'Iniciar Gravação',
+    tok_pisin: 'Stat Rekodim',
+    indonesian: 'Mulai Merekam'
+  },
+  onboardingInviteTitle: {
+    english: 'Work together',
+    spanish: 'Trabaja en equipo',
+    brazilian_portuguese: 'Trabalhe juntos',
+    tok_pisin: 'Wok wantaim',
+    indonesian: 'Bekerja bersama'
+  },
+  onboardingInviteSubtitle: {
+    english: 'Invite others to collaborate. They\'ll receive a notification and see your project in their list',
+    spanish: 'Invita a otros a colaborar. Recibirán una notificación y verán tu proyecto en su lista',
+    brazilian_portuguese: 'Convide outros para colaborar. Eles receberão uma notificação e verão seu projeto em sua lista',
+    tok_pisin: 'Singim ol narapela long wok wantaim. Bai ol kisim notis na lukim projek bilong yu long list bilong ol',
+    indonesian: 'Undang orang lain untuk berkolaborasi. Mereka akan menerima notifikasi dan melihat proyek Anda di daftar mereka'
+  },
+  onboardingInviteBenefit1: {
+    english: 'They receive a notification',
+    spanish: 'Reciben una notificación',
+    brazilian_portuguese: 'Eles recebem uma notificação',
+    tok_pisin: 'Ol kisim notis',
+    indonesian: 'Mereka menerima notifikasi'
+  },
+  onboardingInviteBenefit2: {
+    english: 'Project appears in their list',
+    spanish: 'El proyecto aparece en su lista',
+    brazilian_portuguese: 'O projeto aparece em sua lista',
+    tok_pisin: 'Projek i kamap long list bilong ol',
+    indonesian: 'Proyek muncul di daftar mereka'
+  },
+  onboardingInviteCollaborators: {
+    english: 'Invite Collaborators',
+    spanish: 'Invitar Colaboradores',
+    brazilian_portuguese: 'Convidar Colaboradores',
+    tok_pisin: 'Singim Ol Wokman',
+    indonesian: 'Undang Kolaborator'
+  },
+  onboardingContinue: {
+    english: 'Continue',
+    spanish: 'Continuar',
+    brazilian_portuguese: 'Continuar',
+    tok_pisin: 'Gohet',
+    indonesian: 'Lanjutkan'
+  },
+  onboardingBible: {
+    english: 'Bible',
+    spanish: 'Biblia',
+    brazilian_portuguese: 'Bíblia',
+    tok_pisin: 'Baibel',
+    indonesian: 'Alkitab'
+  },
+  onboardingOther: {
+    english: 'Other',
+    spanish: 'Otro',
+    brazilian_portuguese: 'Outro',
+    tok_pisin: 'Narapela',
+    indonesian: 'Lainnya'
+  },
+  onboardingBibleSelectBookTitle: {
+    english: 'Select a Book',
+    spanish: 'Selecciona un Libro',
+    brazilian_portuguese: 'Selecione um Livro',
+    tok_pisin: 'Pilim Buk',
+    indonesian: 'Pilih Buku'
+  },
+  onboardingBibleSelectBookSubtitle: {
+    english: 'Choose which book of the Bible to translate',
+    spanish: 'Elige qué libro de la Biblia traducir',
+    brazilian_portuguese: 'Escolha qual livro da Bíblia traduzir',
+    tok_pisin: 'Pilim wanpela buk bilong Baibel long tanim',
+    indonesian: 'Pilih buku Alkitab mana yang akan diterjemahkan'
+  },
+  onboardingBibleBookExample1: {
+    english: 'Genesis',
+    spanish: 'Génesis',
+    brazilian_portuguese: 'Gênesis',
+    tok_pisin: 'Jenesis',
+    indonesian: 'Kejadian'
+  },
+  onboardingBibleBookExample2: {
+    english: 'Matthew',
+    spanish: 'Mateo',
+    brazilian_portuguese: 'Mateus',
+    tok_pisin: 'Matyu',
+    indonesian: 'Matius'
+  },
+  onboardingBibleCreateChapterTitle: {
+    english: 'Create Chapter Quests',
+    spanish: 'Crear Quests de Capítulos',
+    brazilian_portuguese: 'Criar Quests de Capítulos',
+    tok_pisin: 'Mekim Ol Kwest bilong Kapitol',
+    indonesian: 'Buat Quest Bab'
+  },
+  onboardingBibleCreateChapterSubtitle: {
+    english: 'Each chapter becomes a quest you can work on',
+    spanish: 'Cada capítulo se convierte en una quest en la que puedes trabajar',
+    brazilian_portuguese: 'Cada capítulo se torna uma quest em que você pode trabalhar',
+    tok_pisin: 'Olgeta kapitol i kamap wanpela kwest yu ken wok long en',
+    indonesian: 'Setiap bab menjadi quest yang dapat Anda kerjakan'
+  },
+  onboardingBibleChapterExample1: {
+    english: 'Chapter 1',
+    spanish: 'Capítulo 1',
+    brazilian_portuguese: 'Capítulo 1',
+    tok_pisin: 'Kapitol 1',
+    indonesian: 'Bab 1'
+  },
+  onboardingBibleChapterExample2: {
+    english: 'Chapter 2',
+    spanish: 'Capítulo 2',
+    brazilian_portuguese: 'Capítulo 2',
+    tok_pisin: 'Kapitol 2',
+    indonesian: 'Bab 2'
   }
 } as const;
 
diff --git a/store/localStore.ts b/store/localStore.ts
index c5b9c9b4f..7b2b18b75 100644
--- a/store/localStore.ts
+++ b/store/localStore.ts
@@ -149,6 +149,12 @@ export interface LocalState {
   dismissUpdate: (version: string) => void;
   resetUpdateDismissal: () => void;
 
+  // Onboarding dismissal tracking
+  onboardingDismissed: boolean;
+  setOnboardingDismissed: (dismissed: boolean) => void;
+  triggerOnboarding: boolean;
+  setTriggerOnboarding: (trigger: boolean) => void;
+
   setProjectSourceFilter: (filter: string) => void;
   setProjectTargetFilter: (filter: string) => void;
   setAnalyticsOptOut: (optOut: boolean) => void;
@@ -261,6 +267,12 @@ export const useLocalStore = create<LocalState>()(
           dismissedUpdateVersion: null
         }),
 
+      // Onboarding dismissal tracking
+      onboardingDismissed: false,
+      setOnboardingDismissed: (dismissed) => set({ onboardingDismissed: dismissed }),
+      triggerOnboarding: false,
+      setTriggerOnboarding: (trigger) => set({ triggerOnboarding: trigger }),
+
       setAnalyticsOptOut: (optOut) => set({ analyticsOptOut: optOut }),
       setTheme: (theme) => {
         set({ theme });
diff --git a/views/AppView.tsx b/views/AppView.tsx
index 3690c668a..f91876838 100644
--- a/views/AppView.tsx
+++ b/views/AppView.tsx
@@ -62,9 +62,17 @@ function AppViewContent() {
   const { isAuthenticated } = useAuth();
   const authView = useLocalStore((state) => state.authView);
   const setAuthView = useLocalStore((state) => state.setAuthView);
+  const setTriggerOnboarding = useLocalStore((state) => state.setTriggerOnboarding);
   const [drawerIsVisible, setDrawerIsVisible] = useState(false);
   const [deferredView, setDeferredView] = useState(currentView);
   const { isCloudLoading } = useCloudLoading();
+  
+  // Handler for onboarding button in header (only show on projects view)
+  const handleOnboardingPress = React.useCallback(() => {
+    if (currentView === 'projects') {
+      setTriggerOnboarding(true);
+    }
+  }, [currentView, setTriggerOnboarding]);
 
   // Memoize drawer toggle callback to prevent AppHeader re-renders
   const drawerToggleCallback = React.useCallback(
@@ -186,6 +194,7 @@ function AppViewContent() {
           drawerToggleCallback={drawerToggleCallback}
           isCloudLoading={isCloudLoading}
           isNavigating={isNavigating}
+          onOnboardingPress={currentView === 'projects' ? handleOnboardingPress : undefined}
         />
 
         {/* Debug Controls (DEV only) - uncomment to test OTA updates */}
diff --git a/views/new/NextGenProjectsView.tsx b/views/new/NextGenProjectsView.tsx
index ab404301b..90cc02b2e 100644
--- a/views/new/NextGenProjectsView.tsx
+++ b/views/new/NextGenProjectsView.tsx
@@ -8,7 +8,9 @@ import { LayerType, useStatusContext } from '@/contexts/StatusContext';
 import { invite, profile_project_link, project } from '@/db/drizzleSchema';
 import { system } from '@/db/powersync/system';
 import { useUserRestrictions } from '@/hooks/db/useBlocks';
+import { useAppNavigation } from '@/hooks/useAppNavigation';
 import { useLocalization } from '@/hooks/useLocalization';
+import { useLocalStore } from '@/store/localStore';
 import { cn, getThemeColor } from '@/utils/styleUtils';
 import {
   useHybridData,
@@ -35,7 +37,7 @@ import {
 import React, { useEffect } from 'react';
 import { ActivityIndicator, useWindowDimensions, View } from 'react-native';
 import { ProjectListItem } from './ProjectListItem';
-import { OnboardingFlow } from './OnboardingFlow';
+import { SimpleOnboardingFlow } from './SimpleOnboardingFlow';
 
 // New imports for bottom sheet + form
 import { LanguageCombobox } from '@/components/language-combobox';
@@ -64,7 +66,6 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import { templateOptions } from '@/db/constants';
-import { useLocalStore } from '@/store/localStore';
 import { resolveTable } from '@/utils/dbUtils';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toCompilableQuery } from '@powersync/drizzle-driver';
@@ -298,7 +299,7 @@ export default function NextGenProjectsView() {
 
     // Watch 1: Watch all invites (not just pending) to detect status changes
     // This will fire when an invite changes from pending to accepted/declined
-    const watch1 = system.powersync.watch(
+    const _watch1 = system.powersync.watch(
       `SELECT id, status, active, email, receiver_profile_id, project_id, last_updated FROM invite WHERE (email = ? OR receiver_profile_id = ?)`,
       [userEmail || '', userId || ''],
       {
@@ -315,7 +316,7 @@ export default function NextGenProjectsView() {
     );
 
     // Watch 2: Watch memberships to detect when invites are accepted (creates membership)
-    const watch2 = userId
+    const _watch2 = userId
       ? system.powersync.watch(
           `SELECT id, profile_id, project_id, active, membership, last_updated FROM profile_project_link WHERE profile_id = ?`,
           [userId],
@@ -549,35 +550,40 @@ export default function NextGenProjectsView() {
   const currentQuery =
     !isAuthenticated || activeTab === 'all' ? allProjects : myProjectsQuery;
   const { data: projectData, isLoading } = currentQuery;
-  
-  // Check if user has no projects (for onboarding)
-  const hasNoProjects = React.useMemo(() => {
-    if (activeTab !== 'my') return false;
-    if (isLoading) return false;
-    if (!currentUser?.id) return false;
-    
-    // Check if myProjectsQuery has no data
-    if (Array.isArray(projectData)) {
-      return projectData.length === 0;
+
+  const onboardingDismissed = useLocalStore(
+    (state) => state.onboardingDismissed
+  );
+  const dateTermsAccepted = useLocalStore((state) => state.dateTermsAccepted);
+  const triggerOnboarding = useLocalStore((state) => state.triggerOnboarding);
+  const setTriggerOnboarding = useLocalStore(
+    (state) => state.setTriggerOnboarding
+  );
+  const [showSimpleOnboarding, setShowSimpleOnboarding] = React.useState(false);
+  const { goToProject } = useAppNavigation();
+
+  // Auto-show onboarding only if terms have NOT been accepted and not dismissed
+  React.useEffect(() => {
+    if (!dateTermsAccepted && !onboardingDismissed && !showSimpleOnboarding) {
+      setShowSimpleOnboarding(true);
     }
-    return false;
-  }, [activeTab, isLoading, currentUser?.id, projectData]);
-  
-  const [showOnboarding, setShowOnboarding] = React.useState(false);
-  
-  // Show onboarding when user has no projects
+  }, [dateTermsAccepted, onboardingDismissed, showSimpleOnboarding]);
+
+  // Watch for trigger from AppHeader
   React.useEffect(() => {
-    if (hasNoProjects && !showOnboarding) {
-      setShowOnboarding(true);
-    } else if (!hasNoProjects && showOnboarding) {
-      setShowOnboarding(false);
+    if (triggerOnboarding) {
+      setShowSimpleOnboarding(true);
+      setTriggerOnboarding(false);
     }
-  }, [hasNoProjects, showOnboarding]);
+  }, [triggerOnboarding, setTriggerOnboarding]);
 
-  // Function to open onboarding wizard
-  const handleOpenOnboarding = () => {
-    setShowOnboarding(true);
-  };
+  // Get the first project for onboarding navigation
+  const firstProject = React.useMemo(() => {
+    if (Array.isArray(projectData) && projectData.length > 0) {
+      return projectData[0];
+    }
+    return null;
+  }, [projectData]);
 
   // Get fetching state for search indicator
   const isFetchingProjects = React.useMemo(() => {
@@ -685,11 +691,59 @@ export default function NextGenProjectsView() {
 
   const dimensions = useWindowDimensions();
 
+  // Handlers for onboarding flow
+  const handleOnboardingCreateProject = () => {
+    if (currentUser) {
+      setIsCreateOpen(true);
+    } else {
+      // For anonymous users, just advance to next step
+      // They can see the flow but can't actually create projects
+    }
+  };
+
+  const handleOnboardingCreateQuest = () => {
+    if (firstProject) {
+      goToProject({
+        id: firstProject.id,
+        name: firstProject.name,
+        template: firstProject.template
+      });
+      // The onboarding will close and user can create quest in ProjectDirectoryView
+    }
+  };
+
+  const handleOnboardingStartRecording = () => {
+    if (firstProject) {
+      // Navigate to project - user can then navigate to a quest and start recording
+      goToProject({
+        id: firstProject.id,
+        name: firstProject.name,
+        template: firstProject.template
+      });
+      // The recording view will be shown when user navigates to a quest
+    }
+  };
+
+  const handleOnboardingInviteCollaborators = () => {
+    if (firstProject) {
+      goToProject({
+        id: firstProject.id,
+        name: firstProject.name,
+        template: firstProject.template
+      });
+      // User can access project membership modal from project settings
+    }
+  };
+
   return (
     <>
-      <OnboardingFlow
-        visible={showOnboarding}
-        onClose={() => setShowOnboarding(false)}
+      <SimpleOnboardingFlow
+        visible={showSimpleOnboarding}
+        onClose={() => setShowSimpleOnboarding(false)}
+        onCreateProject={handleOnboardingCreateProject}
+        onCreateQuest={handleOnboardingCreateQuest}
+        onStartRecording={handleOnboardingStartRecording}
+        onInviteCollaborators={handleOnboardingInviteCollaborators}
       />
       <Drawer
         open={isCreateOpen}
@@ -700,297 +754,301 @@ export default function NextGenProjectsView() {
         dismissible={!isCreatingProject}
       >
         <View className="flex flex-1 flex-col gap-6 p-6">
-        <View className="flex flex-col gap-4">
-          {/* Tabs */}
-          <Tabs
-            value={activeTab}
-            onValueChange={(v) => setActiveTab(v as TabType)}
-          >
-            <TabsList className="w-full">
-              {isAuthenticated ? (
-                <>
-                  <TabsTrigger value="my">
-                    <Text>{t('myProjects')}</Text>
-                  </TabsTrigger>
-                  <TabsTrigger value="all">
-                    <Text>{t('allProjects')}</Text>
-                  </TabsTrigger>
-                </>
-              ) : (
-                <>
-                  <TabsTrigger value="my">
-                    <Text>{t('signIn') || 'Sign In'}</Text>
-                  </TabsTrigger>
-                  <TabsTrigger value="all">
-                    <Text>{t('allProjects')}</Text>
-                  </TabsTrigger>
-                </>
-              )}
-            </TabsList>
-          </Tabs>
-
-          {/* Show login invitation for anonymous users in "my" tab, otherwise show search */}
-          {!isAuthenticated && activeTab === 'my' ? (
-            <View className="flex flex-col gap-6 rounded-lg border border-border bg-card p-6">
-              <View className="flex flex-col items-center gap-4">
-                <Icon as={UserIcon} size={48} className="text-primary" />
-                <View className="flex flex-col items-center gap-2">
-                  <Text variant="h4" className="text-center">
-                    {t('signInToSaveOrContribute') ||
-                      'Sign in to save or contribute to projects'}
-                  </Text>
+          <View className="flex flex-col gap-4">
+            {/* Tabs */}
+            <Tabs
+              value={activeTab}
+              onValueChange={(v) => setActiveTab(v as TabType)}
+            >
+              <TabsList className="w-full">
+                {isAuthenticated ? (
+                  <>
+                    <TabsTrigger value="my">
+                      <Text>{t('myProjects')}</Text>
+                    </TabsTrigger>
+                    <TabsTrigger value="all">
+                      <Text>{t('allProjects')}</Text>
+                    </TabsTrigger>
+                  </>
+                ) : (
+                  <>
+                    <TabsTrigger value="my">
+                      <Text>{t('signIn') || 'Sign In'}</Text>
+                    </TabsTrigger>
+                    <TabsTrigger value="all">
+                      <Text>{t('allProjects')}</Text>
+                    </TabsTrigger>
+                  </>
+                )}
+              </TabsList>
+            </Tabs>
+
+            {/* Show login invitation for anonymous users in "my" tab, otherwise show search */}
+            {!isAuthenticated && activeTab === 'my' ? (
+              <View className="flex flex-col gap-6 rounded-lg border border-border bg-card p-6">
+                <View className="flex flex-col items-center gap-4">
+                  <Icon as={UserIcon} size={48} className="text-primary" />
+                  <View className="flex flex-col items-center gap-2">
+                    <Text variant="h4" className="text-center">
+                      {t('signInToSaveOrContribute') ||
+                        'Sign in to save or contribute to projects'}
+                    </Text>
+                  </View>
+                  <Button
+                    variant="default"
+                    size="lg"
+                    onPress={() => setAuthView('sign-in')}
+                    className="w-full"
+                  >
+                    <Text className="font-semibold">
+                      {t('signIn') || 'Sign In'}
+                    </Text>
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="lg"
+                    onPress={() => setAuthView('register')}
+                    className="w-full"
+                  >
+                    <Text>{t('createAccount') || 'Create Account'}</Text>
+                  </Button>
                 </View>
-                <Button
-                  variant="default"
-                  size="lg"
-                  onPress={() => setAuthView('sign-in')}
-                  className="w-full"
-                >
-                  <Text className="font-semibold">
-                    {t('signIn') || 'Sign In'}
+                {/* Arrow and option to view all projects */}
+                <View className="flex flex-col items-center gap-2 border-t border-border pt-4">
+                  <Text className="text-sm text-muted-foreground">
+                    {t('orBrowseAllProjects') ||
+                      'Or browse all public projects'}
                   </Text>
-                </Button>
-                <Button
-                  variant="outline"
-                  size="lg"
-                  onPress={() => setAuthView('register')}
-                  className="w-full"
-                >
-                  <Text>{t('createAccount') || 'Create Account'}</Text>
-                </Button>
-              </View>
-              {/* Arrow and option to view all projects */}
-              <View className="flex flex-col items-center gap-2 border-t border-border pt-4">
-                <Text className="text-sm text-muted-foreground">
-                  {t('orBrowseAllProjects') || 'Or browse all public projects'}
-                </Text>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onPress={() => setActiveTab('all')}
-                  className="flex-row items-center gap-2"
-                >
-                  <Text>{t('viewAllProjects') || 'View All Projects'}</Text>
-                  <Icon as={ArrowRightIcon} size={16} />
-                </Button>
-              </View>
-            </View>
-          ) : (
-            <>
-              {/* Search and filter */}
-              <View className="flex flex-row items-center gap-2">
-                <Input
-                  className="flex-1"
-                  placeholder={t('searchProjects')}
-                  value={searchQuery}
-                  onChangeText={setSearchQuery}
-                  prefix={SearchIcon}
-                  prefixStyling={false}
-                  size="sm"
-                  suffix={
-                    isFetchingProjects && searchQuery ? (
-                      <ActivityIndicator
-                        size="small"
-                        color={getThemeColor('primary')}
-                      />
-                    ) : undefined
-                  }
-                  suffixStyling={false}
-                  hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
-                />
-                {currentUser && (
-                  <DrawerTrigger
-                    className={buttonVariants({ size: 'icon-lg' })}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onPress={() => setActiveTab('all')}
+                    className="flex-row items-center gap-2"
                   >
-                    <Icon as={PlusIcon} className="text-primary-foreground" />
-                  </DrawerTrigger>
-                )}
+                    <Text>{t('viewAllProjects') || 'View All Projects'}</Text>
+                    <Icon as={ArrowRightIcon} size={16} />
+                  </Button>
+                </View>
               </View>
-            </>
-          )}
-        </View>
-
-        {/* Show project list only if not showing login invitation */}
-        {!isAuthenticated && activeTab === 'my' ? null : isLoading ||
-          (isFetchingProjects && searchQuery && data.length === 0) ? (
-          <ProjectListSkeleton />
-        ) : (
-          <LegendList
-            key={`${activeTab}-${dimensions.width}-${data.length}`}
-            data={data}
-            columnWrapperStyle={{ gap: 12 }}
-            numColumns={dimensions.width > 768 && data.length > 1 ? 2 : 1}
-            keyExtractor={(item) => item.id}
-            recycleItems
-            estimatedItemSize={175}
-            maintainVisibleContentPosition
-            renderItem={({ item }) => (
-              <ProjectListItem
-                project={item}
-                isInvited={item.isInvited}
-                className={cn(dimensions.width > 768 && 'h-[212px]')}
-              />
-            )}
-            onEndReached={() => {
-              if (allProjects.hasNextPage && !allProjects.isFetchingNextPage) {
-                allProjects.fetchNextPage();
-              }
-            }}
-            onEndReachedThreshold={0.5}
-            ListFooterComponent={() =>
-              allProjects.isFetchingNextPage && (
-                <View className="p-4">
-                  <ActivityIndicator
-                    size="small"
-                    color={getThemeColor('primary')}
+            ) : (
+              <>
+                {/* Search and filter */}
+                <View className="flex flex-row items-center gap-2">
+                  <Input
+                    className="flex-1"
+                    placeholder={t('searchProjects')}
+                    value={searchQuery}
+                    onChangeText={setSearchQuery}
+                    prefix={SearchIcon}
+                    prefixStyling={false}
+                    size="sm"
+                    suffix={
+                      isFetchingProjects && searchQuery ? (
+                        <ActivityIndicator
+                          size="small"
+                          color={getThemeColor('primary')}
+                        />
+                      ) : undefined
+                    }
+                    suffixStyling={false}
+                    hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
                   />
-                </View>
-              )
-            }
-            ListEmptyComponent={() => (
-              <View className="flex-1 items-center justify-center py-16">
-                <View className="flex-col items-center gap-2">
-                  <Text className="text-muted-foreground">
-                    {searchQuery
-                      ? 'No projects found'
-                      : activeTab === 'my'
-                        ? 'No projects yet'
-                        : 'No projects available'}
-                  </Text>
-                  {activeTab === 'my' && !searchQuery && (
-                    <Button
-                      variant="default"
-                      onPress={handleOpenOnboarding}
-                      className="mt-2"
+                  {currentUser && (
+                    <DrawerTrigger
+                      className={buttonVariants({ size: 'icon-lg' })}
                     >
-                      <Icon as={PlusIcon} size={16} />
-                      <Text>{t('newProject')}</Text>
-                    </Button>
+                      <Icon as={PlusIcon} className="text-primary-foreground" />
+                    </DrawerTrigger>
                   )}
                 </View>
-              </View>
+              </>
             )}
-          />
-        )}
-      </View>
-
-      <DrawerContent className="pb-safe">
-        <Form {...form}>
-          <DrawerHeader>
-            <DrawerTitle>{t('newProject')}</DrawerTitle>
-          </DrawerHeader>
-          <View className="flex flex-col gap-4 px-4">
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      {...transformInputProps(field)}
-                      placeholder={t('projectName')}
-                      size="sm"
-                      prefix={FolderPenIcon}
-                      drawerInput
+          </View>
+
+          {/* Show project list only if not showing login invitation */}
+          {!isAuthenticated && activeTab === 'my' ? null : isLoading ||
+            (isFetchingProjects && searchQuery && data.length === 0) ? (
+            <ProjectListSkeleton />
+          ) : (
+            <LegendList
+              key={`${activeTab}-${dimensions.width}-${data.length}`}
+              data={data}
+              columnWrapperStyle={{ gap: 12 }}
+              numColumns={dimensions.width > 768 && data.length > 1 ? 2 : 1}
+              keyExtractor={(item) => item.id}
+              recycleItems
+              estimatedItemSize={175}
+              maintainVisibleContentPosition
+              renderItem={({ item }) => (
+                <ProjectListItem
+                  project={item}
+                  isInvited={item.isInvited}
+                  className={cn(dimensions.width > 768 && 'h-[212px]')}
+                />
+              )}
+              onEndReached={() => {
+                if (
+                  allProjects.hasNextPage &&
+                  !allProjects.isFetchingNextPage
+                ) {
+                  allProjects.fetchNextPage();
+                }
+              }}
+              onEndReachedThreshold={0.5}
+              ListFooterComponent={() =>
+                allProjects.isFetchingNextPage && (
+                  <View className="p-4">
+                    <ActivityIndicator
+                      size="small"
+                      color={getThemeColor('primary')}
                     />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
+                  </View>
+                )
+              }
+              ListEmptyComponent={() => (
+                <View className="flex-1 items-center justify-center py-16">
+                  <View className="flex-col items-center gap-2">
+                    <Text className="text-muted-foreground">
+                      {searchQuery
+                        ? 'No projects found'
+                        : activeTab === 'my'
+                          ? 'No projects yet'
+                          : 'No projects available'}
+                    </Text>
+                    {activeTab === 'my' && !searchQuery && (
+                      <Button
+                        variant="default"
+                        onPress={() => setIsCreateOpen(true)}
+                        className="mt-2"
+                      >
+                        <Icon as={PlusIcon} size={16} />
+                        <Text>{t('newProject')}</Text>
+                      </Button>
+                    )}
+                  </View>
+                </View>
               )}
             />
+          )}
+        </View>
 
-            <FormField
-              control={form.control}
-              name="target_language_id"
-              render={({ field }) => {
-                return (
+        <DrawerContent className="pb-safe">
+          <Form {...form}>
+            <DrawerHeader>
+              <DrawerTitle>{t('newProject')}</DrawerTitle>
+            </DrawerHeader>
+            <View className="flex flex-col gap-4 px-4">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
                   <FormItem>
                     <FormControl>
-                      <LanguageCombobox
-                        value={field.value}
-                        onChange={(lang) => field.onChange(lang.id)}
+                      <Input
+                        {...transformInputProps(field)}
+                        placeholder={t('projectName')}
+                        size="sm"
+                        prefix={FolderPenIcon}
+                        drawerInput
                       />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
-                );
-              }}
-            />
+                )}
+              />
 
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    <Textarea
-                      {...transformInputProps(field)}
-                      placeholder={t('description')}
-                      size="sm"
-                      drawerInput
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+              <FormField
+                control={form.control}
+                name="target_language_id"
+                render={({ field }) => {
+                  return (
+                    <FormItem>
+                      <FormControl>
+                        <LanguageCombobox
+                          value={field.value}
+                          onChange={(lang) => field.onChange(lang.id)}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
+
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Textarea
+                        {...transformInputProps(field)}
+                        placeholder={t('description')}
+                        size="sm"
+                        drawerInput
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-            <FormField
-              control={form.control}
-              name="template"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('template')}</FormLabel>
-                  <FormControl>
-                    <RadioGroup
-                      value={field.value}
-                      onValueChange={field.onChange}
-                    >
-                      {templateOptions.map((option) => (
-                        <RadioGroupItem
-                          key={option}
-                          value={option}
-                          label={t(option)}
-                        >
-                          <Text className="capitalize">{t(option)}</Text>
-                        </RadioGroupItem>
-                      ))}
-                    </RadioGroup>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <View className="flex-row items-center justify-between">
-              <Text>{t('private')}</Text>
               <FormField
                 control={form.control}
-                name="private"
+                name="template"
                 render={({ field }) => (
                   <FormItem>
+                    <FormLabel>{t('template')}</FormLabel>
                     <FormControl>
-                      <Switch {...transformSwitchProps(field)} />
+                      <RadioGroup
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        {templateOptions.map((option) => (
+                          <RadioGroupItem
+                            key={option}
+                            value={option}
+                            label={t(option)}
+                          >
+                            <Text className="capitalize">{t(option)}</Text>
+                          </RadioGroupItem>
+                        ))}
+                      </RadioGroup>
                     </FormControl>
                     <FormMessage />
                   </FormItem>
                 )}
               />
+              <View className="flex-row items-center justify-between">
+                <Text>{t('private')}</Text>
+                <FormField
+                  control={form.control}
+                  name="private"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Switch {...transformSwitchProps(field)} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </View>
             </View>
-          </View>
-          <DrawerFooter>
-            <FormSubmit
-              onPress={form.handleSubmit((data) => createProject(data))}
-              className="flex-row items-center gap-2"
-            >
-              <Text>{t('createObject')}</Text>
-            </FormSubmit>
-            <DrawerClose disabled={isCreatingProject}>
-              <Text>{t('cancel')}</Text>
-            </DrawerClose>
-          </DrawerFooter>
-        </Form>
-      </DrawerContent>
-    </Drawer>
+            <DrawerFooter>
+              <FormSubmit
+                onPress={form.handleSubmit((data) => createProject(data))}
+                className="flex-row items-center gap-2"
+              >
+                <Text>{t('createObject')}</Text>
+              </FormSubmit>
+              <DrawerClose disabled={isCreatingProject}>
+                <Text>{t('cancel')}</Text>
+              </DrawerClose>
+            </DrawerFooter>
+          </Form>
+        </DrawerContent>
+      </Drawer>
     </>
   );
 }
diff --git a/views/new/SimpleOnboardingFlow.tsx b/views/new/SimpleOnboardingFlow.tsx
new file mode 100644
index 000000000..00fa046ca
--- /dev/null
+++ b/views/new/SimpleOnboardingFlow.tsx
@@ -0,0 +1,554 @@
+import type { OnboardingStep } from '@/components/OnboardingProgressIndicator';
+import { OnboardingProgressIndicator } from '@/components/OnboardingProgressIndicator';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Icon } from '@/components/ui/icon';
+import { Text } from '@/components/ui/text';
+import { useLocalization } from '@/hooks/useLocalization';
+import { useLocalStore } from '@/store/localStore';
+import {
+  BookOpenIcon,
+  FolderIcon,
+  HelpCircle,
+  MicIcon,
+  UserPlusIcon,
+  XIcon
+} from 'lucide-react-native';
+import React, { useState } from 'react';
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  View
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { AnimatedOnboardingIcon } from './onboarding/AnimatedOnboardingIcon';
+import { AnimatedStepContent } from './onboarding/AnimatedStepContent';
+import { BibleBookListAnimation } from './onboarding/BibleBookListAnimation';
+import { BibleChapterGrid } from './onboarding/BibleChapterGrid';
+import { InviteAnimation } from './onboarding/InviteAnimation';
+import { ProjectCreationAnimation } from './onboarding/ProjectCreationAnimation';
+import { QuestListAnimation } from './onboarding/QuestListAnimation';
+import { RecordingAnimation } from './onboarding/RecordingAnimation';
+import { VisionScreen } from './onboarding/VisionScreen';
+
+interface SimpleOnboardingFlowProps {
+  visible: boolean;
+  onClose: () => void;
+  onCreateProject?: () => void;
+  onCreateQuest?: () => void;
+  onStartRecording?: () => void;
+  onInviteCollaborators?: () => void;
+}
+
+export function SimpleOnboardingFlow({
+  visible,
+  onClose,
+  onCreateProject: _onCreateProject,
+  onCreateQuest: _onCreateQuest,
+  onStartRecording: _onStartRecording,
+  onInviteCollaborators: _onInviteCollaborators
+}: SimpleOnboardingFlowProps) {
+  const { t } = useLocalization();
+  const insets = useSafeAreaInsets();
+  const setOnboardingDismissed = useLocalStore(
+    (state) => state.setOnboardingDismissed
+  );
+  const [step, setStep] = useState<OnboardingStep>('vision');
+  const [projectType, setProjectType] = useState<'bible' | 'other' | null>(
+    null
+  );
+  const [showBibleChapters, setShowBibleChapters] = useState(false);
+
+  const handleNext = () => {
+    if (step === 'vision') {
+      setStep('create-project-simple');
+    } else if (step === 'create-project-simple') {
+      // This shouldn't happen - type selection handles navigation
+      return;
+    } else if (step === 'bible-select-book') {
+      // First continue: show chapters below Genesis
+      if (!showBibleChapters) {
+        setShowBibleChapters(true);
+      } else {
+        // Second continue: move to recording step
+        setStep('record-audio');
+      }
+    } else if (step === 'create-quest') {
+      setStep('record-audio');
+    } else if (step === 'record-audio') {
+      setStep('invite-collaborators');
+    } else {
+      handleClose();
+    }
+  };
+
+  const handleBack = () => {
+    if (step === 'vision') {
+      // Can't go back from vision - close onboarding
+      handleClose();
+    } else if (step === 'bible-select-book') {
+      if (showBibleChapters) {
+        setShowBibleChapters(false);
+      } else {
+        setStep('create-project-simple');
+        setProjectType(null);
+      }
+    } else if (step === 'create-quest') {
+      setStep('create-project-simple');
+      setProjectType(null);
+    } else if (step === 'record-audio') {
+      if (projectType === 'bible') {
+        setStep('bible-select-book');
+        setShowBibleChapters(true); // Keep chapters visible when going back
+      } else {
+        setStep('create-quest');
+      }
+    } else if (step === 'invite-collaborators') {
+      setStep('record-audio');
+    } else if (step === 'create-project-simple') {
+      setStep('vision');
+    }
+  };
+
+  const handleClose = () => {
+    setStep('vision');
+    setProjectType(null);
+    setShowBibleChapters(false);
+    setOnboardingDismissed(true);
+    onClose();
+  };
+
+  const handleAction = () => {
+    // Just continue to next step - buttons are informational, not action buttons
+    handleNext();
+  };
+
+  const handleProjectTypeSelect = (type: 'bible' | 'other') => {
+    setProjectType(type);
+    setShowBibleChapters(false);
+    if (type === 'bible') {
+      setStep('bible-select-book');
+    } else {
+      setStep('create-quest');
+    }
+  };
+
+  if (!visible) return null;
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={false}
+      animationType="slide"
+      onRequestClose={handleClose}
+    >
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        className="flex-1 bg-background"
+        style={{ paddingTop: insets.top }}
+      >
+        {/* Progress Indicator */}
+        <OnboardingProgressIndicator currentStep={step} />
+
+        {/* Header */}
+        <View className="flex-row items-center justify-between border-b border-border px-6 py-4">
+          <View className="flex-1" />
+          <Pressable onPress={handleClose}>
+            <Icon as={XIcon} size={24} className="text-muted-foreground" />
+          </Pressable>
+        </View>
+
+        {/* Content */}
+        <ScrollView className="flex-1" contentContainerStyle={{ padding: 24 }}>
+          {/* Step 0: Vision Screen */}
+          {step === 'vision' && (
+            <View className="flex-1">
+              <VisionScreen />
+              <AnimatedStepContent delay={1200}>
+                <Button
+                  variant="default"
+                  size="lg"
+                  onPress={handleAction}
+                  className="mt-8 w-full"
+                >
+                  <Text className="text-primary-foreground">
+                    {t('onboardingContinue')}
+                  </Text>
+                </Button>
+              </AnimatedStepContent>
+            </View>
+          )}
+
+          {/* Step 1: Create Project - Type Selection */}
+          {step === 'create-project-simple' && (
+            <View className="flex-1 items-center justify-center gap-8">
+              <AnimatedStepContent>
+                <View className="items-center gap-4">
+                  <ProjectCreationAnimation />
+                  <Text variant="h2" className="text-center">
+                    {t('onboardingCreateProjectTitle')}
+                  </Text>
+                  <Text
+                    variant="default"
+                    className="text-center text-muted-foreground"
+                  >
+                    {t('onboardingCreateProjectSubtitle')}
+                  </Text>
+                </View>
+              </AnimatedStepContent>
+
+              <AnimatedStepContent delay={200}>
+                <View className="w-full gap-4">
+                  {/* Bible Project Card */}
+                  <Card className="w-full">
+                    <Pressable
+                      onPress={() => handleProjectTypeSelect('bible')}
+                      accessibilityRole="button"
+                    >
+                      <View className="flex-row items-center p-6">
+                        <View className="mr-6 h-16 w-16 items-center justify-center rounded-lg bg-muted">
+                          <Icon
+                            as={BookOpenIcon}
+                            size={32}
+                            className="text-primary"
+                          />
+                        </View>
+                        <View className="flex-1 flex-col items-start">
+                          <Text
+                            variant="h4"
+                            className="mb-1"
+                            numberOfLines={1}
+                            ellipsizeMode="tail"
+                          >
+                            {t('onboardingBible')}
+                          </Text>
+                          <Text
+                            className="text-sm text-muted-foreground"
+                            numberOfLines={2}
+                            ellipsizeMode="tail"
+                          >
+                            {t('onboardingCreateProjectDescription')}
+                          </Text>
+                        </View>
+                      </View>
+                    </Pressable>
+                  </Card>
+
+                  {/* Other Project Card */}
+                  <Card className="w-full">
+                    <Pressable
+                      onPress={() => handleProjectTypeSelect('other')}
+                      accessibilityRole="button"
+                    >
+                      <View className="flex-row items-center p-6">
+                        <View className="mr-6 h-16 w-16 items-center justify-center rounded-lg bg-muted">
+                          <Icon
+                            as={FolderIcon}
+                            size={32}
+                            className="text-primary"
+                          />
+                        </View>
+                        <View className="flex-1 flex-col items-start">
+                          <Text
+                            variant="h4"
+                            className="mb-1"
+                            numberOfLines={1}
+                            ellipsizeMode="tail"
+                          >
+                            {t('onboardingOther')}
+                          </Text>
+                          <Text
+                            className="text-sm text-muted-foreground"
+                            numberOfLines={2}
+                            ellipsizeMode="tail"
+                          >
+                            {t('onboardingCreateProjectDescription')}
+                          </Text>
+                        </View>
+                      </View>
+                    </Pressable>
+                  </Card>
+                </View>
+              </AnimatedStepContent>
+            </View>
+          )}
+
+          {/* Bible Flow: Step 2 - Select Book (with chapters on second continue) */}
+          {step === 'bible-select-book' && (
+            <View className="flex-1 items-center justify-center gap-8">
+              <AnimatedStepContent>
+                <View className="items-center gap-4">
+                  <AnimatedOnboardingIcon
+                    icon={BookOpenIcon}
+                    size={48}
+                    animationType="float"
+                  />
+                  <Text variant="h2" className="text-center">
+                    {showBibleChapters
+                      ? t('onboardingBibleCreateChapterTitle')
+                      : t('onboardingBibleSelectBookTitle')}
+                  </Text>
+                  <Text
+                    variant="default"
+                    className="text-center text-muted-foreground"
+                  >
+                    {showBibleChapters
+                      ? t('onboardingBibleCreateChapterSubtitle')
+                      : t('onboardingBibleSelectBookSubtitle')}
+                  </Text>
+                </View>
+              </AnimatedStepContent>
+
+              <AnimatedStepContent delay={200}>
+                <Card className="w-full p-6">
+                  <View className="gap-4">
+                    {/* Animated book list */}
+                    <View className="w-full gap-3">
+                      {/* Genesis with chapters below */}
+                      <View className="gap-2">
+                        <BibleBookListAnimation
+                          showChapters={showBibleChapters}
+                          renderGenesis={(
+                            genesisElement: React.ReactElement
+                          ) => (
+                            <View className="gap-2">
+                              {genesisElement}
+                              {/* Show chapters below Genesis when showBibleChapters is true */}
+                              {showBibleChapters && (
+                                <View className="ml-9 gap-2">
+                                  <BibleChapterGrid
+                                    visible={showBibleChapters}
+                                  />
+                                </View>
+                              )}
+                            </View>
+                          )}
+                        />
+                      </View>
+                    </View>
+                  </View>
+                </Card>
+              </AnimatedStepContent>
+
+              <AnimatedStepContent delay={400}>
+                <Button
+                  variant="default"
+                  size="lg"
+                  onPress={handleAction}
+                  className="w-full"
+                >
+                  <Text className="text-primary-foreground">
+                    {t('onboardingContinue')}
+                  </Text>
+                </Button>
+              </AnimatedStepContent>
+            </View>
+          )}
+
+          {/* Step 2: Create Quest */}
+          {step === 'create-quest' && (
+            <View className="flex-1 items-center justify-center gap-8">
+              <AnimatedStepContent>
+                <View className="items-center gap-4">
+                  <AnimatedOnboardingIcon
+                    icon={BookOpenIcon}
+                    size={48}
+                    animationType="float"
+                  />
+                  <Text variant="h2" className="text-center">
+                    {t('onboardingCreateQuestTitle')}
+                  </Text>
+                  <Text
+                    variant="default"
+                    className="text-center text-muted-foreground"
+                  >
+                    {t('onboardingCreateQuestSubtitle')}
+                  </Text>
+                </View>
+              </AnimatedStepContent>
+
+              <AnimatedStepContent delay={200}>
+                <Card className="w-full p-6">
+                  <View className="items-center gap-4">
+                    <QuestListAnimation />
+                    <View className="w-full gap-3">
+                      <View className="flex-row items-center gap-3">
+                        <Icon
+                          as={BookOpenIcon}
+                          size={24}
+                          className="text-primary"
+                        />
+                        <Text variant="default">
+                          {t('onboardingQuestExample1')}
+                        </Text>
+                      </View>
+                      <View className="flex-row items-center gap-3">
+                        <Icon
+                          as={BookOpenIcon}
+                          size={24}
+                          className="text-primary"
+                        />
+                        <Text variant="default">
+                          {t('onboardingQuestExample2')}
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                </Card>
+              </AnimatedStepContent>
+
+              <AnimatedStepContent delay={400}>
+                <Button
+                  variant="default"
+                  size="lg"
+                  onPress={handleAction}
+                  className="w-full"
+                >
+                  <Text className="text-primary-foreground">
+                    {t('onboardingContinue')}
+                  </Text>
+                </Button>
+              </AnimatedStepContent>
+            </View>
+          )}
+
+          {/* Step 3: Record Audio */}
+          {step === 'record-audio' && (
+            <View className="flex-1 items-center justify-center gap-8">
+              <AnimatedStepContent>
+                <View className="items-center gap-4">
+                  <View className="relative h-24 w-24 items-center justify-center">
+                    <RecordingAnimation size={96} />
+                    <View className="absolute h-24 w-24 items-center justify-center rounded-full bg-primary/10">
+                      <Icon as={MicIcon} size={48} className="text-primary" />
+                    </View>
+                  </View>
+                  <Text variant="h2" className="text-center">
+                    {t('onboardingRecordAudioTitle')}
+                  </Text>
+                  <Text
+                    variant="default"
+                    className="text-center text-muted-foreground"
+                  >
+                    {t('onboardingRecordAudioSubtitle')}
+                  </Text>
+                </View>
+              </AnimatedStepContent>
+
+              <AnimatedStepContent delay={200}>
+                <Card className="w-full p-6">
+                  <View className="gap-4">
+                    <View className="flex-row items-center gap-3">
+                      <Icon as={MicIcon} size={24} className="text-primary" />
+                      <Text variant="default">
+                        {t('onboardingRecordMethod1')}
+                      </Text>
+                    </View>
+                    <View className="flex-row items-center gap-3">
+                      <Icon as={MicIcon} size={24} className="text-primary" />
+                      <Text variant="default">
+                        {t('onboardingRecordMethod2')}
+                      </Text>
+                    </View>
+                  </View>
+                </Card>
+              </AnimatedStepContent>
+
+              <AnimatedStepContent delay={400}>
+                <Button
+                  variant="default"
+                  size="lg"
+                  onPress={handleAction}
+                  className="w-full"
+                >
+                  <Text className="text-primary-foreground">
+                    {t('onboardingContinue')}
+                  </Text>
+                </Button>
+              </AnimatedStepContent>
+            </View>
+          )}
+
+          {/* Step 4: Invite Collaborators */}
+          {step === 'invite-collaborators' && (
+            <View className="flex-1 items-center justify-center gap-8">
+              <AnimatedStepContent>
+                <View className="items-center gap-4">
+                  <AnimatedOnboardingIcon
+                    icon={UserPlusIcon}
+                    size={48}
+                    animationType="pulse"
+                  />
+                  <Text variant="h2" className="text-center">
+                    {t('onboardingInviteTitle')}
+                  </Text>
+                  <Text
+                    variant="default"
+                    className="text-center text-muted-foreground"
+                  >
+                    {t('onboardingInviteSubtitle')}
+                  </Text>
+                </View>
+              </AnimatedStepContent>
+
+              <AnimatedStepContent delay={200}>
+                <Card className="w-full p-6">
+                  <View className="items-center gap-6">
+                    <InviteAnimation />
+                    <View className="w-full gap-4">
+                      <View className="flex-row items-center gap-3">
+                        <Icon
+                          as={UserPlusIcon}
+                          size={24}
+                          className="text-primary"
+                        />
+                        <Text variant="default">
+                          {t('onboardingInviteBenefit1')}
+                        </Text>
+                      </View>
+                      <View className="flex-row items-center gap-3">
+                        <Icon
+                          as={HelpCircle}
+                          size={24}
+                          className="text-primary"
+                        />
+                        <Text variant="default">
+                          {t('onboardingInviteBenefit2')}
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                </Card>
+              </AnimatedStepContent>
+
+              <AnimatedStepContent delay={400}>
+                <Button
+                  variant="default"
+                  size="lg"
+                  onPress={handleAction}
+                  className="w-full"
+                >
+                  <Text className="text-primary-foreground">
+                    {t('onboardingContinue')}
+                  </Text>
+                </Button>
+              </AnimatedStepContent>
+            </View>
+          )}
+        </ScrollView>
+
+        {/* Footer with Back button */}
+        {step !== 'vision' && step !== 'create-project-simple' && (
+          <View className="border-t border-border px-6 py-4">
+            <Button variant="ghost" onPress={handleBack}>
+              <Text>{t('back')}</Text>
+            </Button>
+          </View>
+        )}
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}
diff --git a/views/new/onboarding/AnimatedOnboardingIcon.tsx b/views/new/onboarding/AnimatedOnboardingIcon.tsx
new file mode 100644
index 000000000..9fd29735c
--- /dev/null
+++ b/views/new/onboarding/AnimatedOnboardingIcon.tsx
@@ -0,0 +1,126 @@
+import { Icon } from '@/components/ui/icon';
+import { getThemeColor } from '@/utils/styleUtils';
+import { LucideIcon } from 'lucide-react-native';
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming
+} from 'react-native-reanimated';
+
+interface AnimatedOnboardingIconProps {
+  icon: LucideIcon;
+  size?: number;
+  className?: string;
+  animationType?: 'pulse' | 'float' | 'scale' | 'rotate';
+  delay?: number;
+}
+
+export function AnimatedOnboardingIcon({
+  icon: IconComponent,
+  size = 48,
+  className,
+  animationType = 'pulse',
+  delay = 0
+}: AnimatedOnboardingIconProps) {
+  const scale = useSharedValue(1);
+  const translateY = useSharedValue(0);
+  const rotate = useSharedValue(0);
+  const opacity = useSharedValue(0);
+
+  useEffect(() => {
+    // Fade in on mount
+    opacity.value = withTiming(1, {
+      duration: 500,
+      easing: Easing.out(Easing.ease)
+    });
+
+    // Start animation after delay
+    const timer = setTimeout(() => {
+      if (animationType === 'pulse') {
+        scale.value = withRepeat(
+          withSequence(
+            withTiming(1.1, {
+              duration: 1000,
+              easing: Easing.inOut(Easing.ease)
+            }),
+            withTiming(1, {
+              duration: 1000,
+              easing: Easing.inOut(Easing.ease)
+            })
+          ),
+          -1,
+          false
+        );
+      } else if (animationType === 'float') {
+        translateY.value = withRepeat(
+          withSequence(
+            withTiming(-8, {
+              duration: 1500,
+              easing: Easing.inOut(Easing.ease)
+            }),
+            withTiming(0, {
+              duration: 1500,
+              easing: Easing.inOut(Easing.ease)
+            })
+          ),
+          -1,
+          false
+        );
+      } else if (animationType === 'scale') {
+        scale.value = withRepeat(
+          withSequence(
+            withSpring(1.15, {
+              damping: 8,
+              stiffness: 100
+            }),
+            withSpring(1, {
+              damping: 8,
+              stiffness: 100
+            })
+          ),
+          -1,
+          false
+        );
+      } else if (animationType === 'rotate') {
+        rotate.value = withRepeat(
+          withTiming(360, {
+            duration: 3000,
+            easing: Easing.linear
+          }),
+          -1,
+          false
+        );
+      }
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [animationType, delay, opacity, scale, translateY, rotate]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        { scale: scale.value },
+        { translateY: translateY.value },
+        { rotate: `${rotate.value}deg` }
+      ],
+      opacity: opacity.value
+    };
+  });
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <View className="h-24 w-24 items-center justify-center rounded-full bg-primary/10">
+        <Icon as={IconComponent} size={size} className={className || 'text-primary'} />
+      </View>
+    </Animated.View>
+  );
+}
+
diff --git a/views/new/onboarding/AnimatedStepContent.tsx b/views/new/onboarding/AnimatedStepContent.tsx
new file mode 100644
index 000000000..b77c124bd
--- /dev/null
+++ b/views/new/onboarding/AnimatedStepContent.tsx
@@ -0,0 +1,49 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withTiming
+} from 'react-native-reanimated';
+
+interface AnimatedStepContentProps {
+  children: React.ReactNode;
+  delay?: number;
+}
+
+export function AnimatedStepContent({
+  children,
+  delay = 0
+}: AnimatedStepContentProps) {
+  const opacity = useSharedValue(0);
+  const translateY = useSharedValue(20);
+
+  useEffect(() => {
+    opacity.value = withDelay(
+      delay,
+      withTiming(1, {
+        duration: 600,
+        easing: Easing.out(Easing.ease)
+      })
+    );
+    translateY.value = withDelay(
+      delay,
+      withTiming(0, {
+        duration: 600,
+        easing: Easing.out(Easing.ease)
+      })
+    );
+  }, [delay, opacity, translateY]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+      transform: [{ translateY: translateY.value }]
+    };
+  });
+
+  return <Animated.View style={animatedStyle}>{children}</Animated.View>;
+}
+
diff --git a/views/new/onboarding/BibleBookListAnimation.tsx b/views/new/onboarding/BibleBookListAnimation.tsx
new file mode 100644
index 000000000..6e0675b62
--- /dev/null
+++ b/views/new/onboarding/BibleBookListAnimation.tsx
@@ -0,0 +1,90 @@
+import { BOOK_ICON_MAP } from '@/utils/BOOK_GRAPHICS';
+import { useThemeColor } from '@/utils/styleUtils';
+import React, { useEffect } from 'react';
+import { Image, View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withSpring,
+  withTiming
+} from 'react-native-reanimated';
+import { Text } from '@/components/ui/text';
+
+interface BibleBookListAnimationProps {
+  showChapters?: boolean;
+  renderGenesis?: (genesisElement: React.ReactElement) => React.ReactElement;
+}
+
+export function BibleBookListAnimation({
+  showChapters = false,
+  renderGenesis
+}: BibleBookListAnimationProps) {
+  const primaryColor = useThemeColor('primary');
+  const secondaryColor = useThemeColor('chart-2');
+  
+  const book1X = useSharedValue(-30);
+  const book2X = useSharedValue(-30);
+  const book1Opacity = useSharedValue(0);
+  const book2Opacity = useSharedValue(0);
+
+  useEffect(() => {
+    // Animate books sliding in
+    book1Opacity.value = withDelay(200, withTiming(1, { duration: 400 }));
+    book1X.value = withDelay(200, withSpring(0, { damping: 12, stiffness: 100 }));
+
+    book2Opacity.value = withDelay(400, withTiming(1, { duration: 400 }));
+    book2X.value = withDelay(400, withSpring(0, { damping: 12, stiffness: 100 }));
+  }, [book1X, book2X, book1Opacity, book2Opacity]);
+
+  const book1Style = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: book1X.value }],
+      opacity: book1Opacity.value
+    };
+  });
+
+  const book2Style = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: book2X.value }],
+      opacity: book2Opacity.value
+    };
+  });
+
+  const genesisElement = (
+    <Animated.View style={book1Style} className="flex-row items-center gap-3">
+      <Image
+        source={BOOK_ICON_MAP['gen']}
+        style={{
+          width: 24,
+          height: 24,
+          tintColor: primaryColor
+        }}
+        resizeMode="contain"
+      />
+      <Text variant="default">Genesis</Text>
+    </Animated.View>
+  );
+
+  return (
+    <>
+      {/* Genesis - can be wrapped by parent if needed */}
+      {renderGenesis ? renderGenesis(genesisElement) : genesisElement}
+      
+      {/* Matthew */}
+      <Animated.View style={book2Style} className="flex-row items-center gap-3">
+        <Image
+          source={BOOK_ICON_MAP['mat']}
+          style={{
+            width: 24,
+            height: 24,
+            tintColor: secondaryColor
+          }}
+          resizeMode="contain"
+        />
+        <Text variant="default">Matthew</Text>
+      </Animated.View>
+    </>
+  );
+}
+
diff --git a/views/new/onboarding/BibleChapterGrid.tsx b/views/new/onboarding/BibleChapterGrid.tsx
new file mode 100644
index 000000000..cb878e3a2
--- /dev/null
+++ b/views/new/onboarding/BibleChapterGrid.tsx
@@ -0,0 +1,87 @@
+import { Text } from '@/components/ui/text';
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withSpring,
+  withTiming
+} from 'react-native-reanimated';
+
+interface BibleChapterGridProps {
+  visible: boolean;
+}
+
+export function BibleChapterGrid({ visible }: BibleChapterGridProps) {
+  // Show chapters 1-6 in a grid, then "..."
+  const chapters = [1, 2, 3, 4, 5, 6];
+  const chapterOpacities = React.useMemo(
+    () => chapters.map(() => useSharedValue(0)),
+    []
+  );
+  const chapterScales = React.useMemo(
+    () => chapters.map(() => useSharedValue(0.8)),
+    []
+  );
+  const dotsOpacity = useSharedValue(0);
+
+  useEffect(() => {
+    if (visible) {
+      // Animate chapters appearing one by one
+      chapters.forEach((_, index) => {
+        chapterOpacities[index].value = withDelay(
+          200 + index * 50,
+          withTiming(1, { duration: 300 })
+        );
+        chapterScales[index].value = withDelay(
+          200 + index * 50,
+          withSpring(1, { damping: 10, stiffness: 100 })
+        );
+      });
+      // Animate dots appearing last
+      dotsOpacity.value = withDelay(600, withTiming(1, { duration: 300 }));
+    } else {
+      // Reset when hidden
+      chapters.forEach((_, index) => {
+        chapterOpacities[index].value = 0;
+        chapterScales[index].value = 0.8;
+      });
+      dotsOpacity.value = 0;
+    }
+  }, [visible, chapterOpacities, chapterScales, dotsOpacity]);
+
+  return (
+    <View className="w-full gap-3">
+      <View className="flex-row flex-wrap gap-2">
+        {chapters.map((chapterNum, index) => {
+          const chapterStyle = useAnimatedStyle(() => {
+            return {
+              opacity: chapterOpacities[index].value,
+              transform: [{ scale: chapterScales[index].value }]
+            };
+          });
+
+          return (
+            <Animated.View
+              key={chapterNum}
+              style={chapterStyle}
+              className="h-12 w-12 items-center justify-center rounded-lg border border-border bg-muted"
+            >
+              <Text className="text-sm font-semibold">{chapterNum}</Text>
+            </Animated.View>
+          );
+        })}
+        <Animated.View
+          style={useAnimatedStyle(() => ({
+            opacity: dotsOpacity.value
+          }))}
+          className="h-12 w-12 items-center justify-center"
+        >
+          <Text className="text-lg text-muted-foreground">...</Text>
+        </Animated.View>
+      </View>
+    </View>
+  );
+}
+
diff --git a/views/new/onboarding/InviteAnimation.tsx b/views/new/onboarding/InviteAnimation.tsx
new file mode 100644
index 000000000..d0ad018ae
--- /dev/null
+++ b/views/new/onboarding/InviteAnimation.tsx
@@ -0,0 +1,72 @@
+import { Icon } from '@/components/ui/icon';
+import { UserIcon, UserPlusIcon } from 'lucide-react-native';
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming
+} from 'react-native-reanimated';
+
+export function InviteAnimation() {
+  const user1X = useSharedValue(-40);
+  const user2X = useSharedValue(-40);
+  const plusOpacity = useSharedValue(0);
+  const user1Opacity = useSharedValue(0);
+  const user2Opacity = useSharedValue(0);
+
+  useEffect(() => {
+    // Simple: two users slide in with plus icon between
+    user1Opacity.value = withDelay(200, withTiming(1, { duration: 400 }));
+    user1X.value = withDelay(200, withSpring(0, { damping: 12, stiffness: 100 }));
+
+    plusOpacity.value = withDelay(400, withTiming(1, { duration: 300 }));
+
+    user2Opacity.value = withDelay(500, withTiming(1, { duration: 400 }));
+    user2X.value = withDelay(500, withSpring(0, { damping: 12, stiffness: 100 }));
+  }, [user1X, user2X, plusOpacity, user1Opacity, user2Opacity]);
+
+  const user1Style = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: user1X.value }],
+      opacity: user1Opacity.value
+    };
+  });
+
+  const user2Style = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: user2X.value }],
+      opacity: user2Opacity.value
+    };
+  });
+
+  const plusStyle = useAnimatedStyle(() => {
+    return {
+      opacity: plusOpacity.value
+    };
+  });
+
+  return (
+    <View className="flex-row items-center justify-center gap-3">
+      <Animated.View style={user1Style}>
+        <View className="h-14 w-14 items-center justify-center rounded-full bg-primary/10">
+          <Icon as={UserIcon} size={28} className="text-primary" />
+        </View>
+      </Animated.View>
+      <Animated.View style={plusStyle}>
+        <Icon as={UserPlusIcon} size={20} className="text-primary" />
+      </Animated.View>
+      <Animated.View style={user2Style}>
+        <View className="h-14 w-14 items-center justify-center rounded-full bg-primary/10">
+          <Icon as={UserIcon} size={28} className="text-primary" />
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
diff --git a/views/new/onboarding/ProjectCreationAnimation.tsx b/views/new/onboarding/ProjectCreationAnimation.tsx
new file mode 100644
index 000000000..40b43d2ce
--- /dev/null
+++ b/views/new/onboarding/ProjectCreationAnimation.tsx
@@ -0,0 +1,54 @@
+import { Icon } from '@/components/ui/icon';
+import { FolderPenIcon, PlusIcon } from 'lucide-react-native';
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming
+} from 'react-native-reanimated';
+
+export function ProjectCreationAnimation() {
+  const scale = useSharedValue(1);
+  const opacity = useSharedValue(0);
+
+  useEffect(() => {
+    // Simple fade in and gentle pulse
+    opacity.value = withTiming(1, { duration: 500 });
+    scale.value = withRepeat(
+      withSequence(
+        withTiming(1.05, {
+          duration: 1200,
+          easing: Easing.inOut(Easing.ease)
+        }),
+        withTiming(1, {
+          duration: 1200,
+          easing: Easing.inOut(Easing.ease)
+        })
+      ),
+      -1,
+      false
+    );
+  }, [scale, opacity]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ scale: scale.value }],
+      opacity: opacity.value
+    };
+  });
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <View className="h-24 w-24 items-center justify-center rounded-full bg-primary/10">
+        <Icon as={FolderPenIcon} size={48} className="text-primary" />
+      </View>
+    </Animated.View>
+  );
+}
+
diff --git a/views/new/onboarding/QuestListAnimation.tsx b/views/new/onboarding/QuestListAnimation.tsx
new file mode 100644
index 000000000..8c675a404
--- /dev/null
+++ b/views/new/onboarding/QuestListAnimation.tsx
@@ -0,0 +1,56 @@
+import { Icon } from '@/components/ui/icon';
+import { BookOpenIcon } from 'lucide-react-native';
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming
+} from 'react-native-reanimated';
+
+export function QuestListAnimation() {
+  const book1X = useSharedValue(-30);
+  const book2X = useSharedValue(-30);
+  const book1Opacity = useSharedValue(0);
+  const book2Opacity = useSharedValue(0);
+
+  useEffect(() => {
+    // Simple slide-in animation - just two quests sliding in from left
+    book1Opacity.value = withDelay(200, withTiming(1, { duration: 400 }));
+    book1X.value = withDelay(200, withSpring(0, { damping: 12, stiffness: 100 }));
+
+    book2Opacity.value = withDelay(400, withTiming(1, { duration: 400 }));
+    book2X.value = withDelay(400, withSpring(0, { damping: 12, stiffness: 100 }));
+  }, [book1X, book2X, book1Opacity, book2Opacity]);
+
+  const book1Style = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: book1X.value }],
+      opacity: book1Opacity.value
+    };
+  });
+
+  const book2Style = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: book2X.value }],
+      opacity: book2Opacity.value
+    };
+  });
+
+  return (
+    <View className="flex-row items-center justify-center gap-3">
+      <Animated.View style={book1Style}>
+        <Icon as={BookOpenIcon} size={28} className="text-primary" />
+      </Animated.View>
+      <Animated.View style={book2Style}>
+        <Icon as={BookOpenIcon} size={28} className="text-primary" />
+      </Animated.View>
+    </View>
+  );
+}
+
diff --git a/views/new/onboarding/RecordingAnimation.tsx b/views/new/onboarding/RecordingAnimation.tsx
new file mode 100644
index 000000000..e83c6f4eb
--- /dev/null
+++ b/views/new/onboarding/RecordingAnimation.tsx
@@ -0,0 +1,237 @@
+import { getThemeColor } from '@/utils/styleUtils';
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming
+} from 'react-native-reanimated';
+import Svg, { Circle } from 'react-native-svg';
+
+interface RecordingAnimationProps {
+  size?: number;
+}
+
+export function RecordingAnimation({ size = 96 }: RecordingAnimationProps) {
+  const scale1 = useSharedValue(1);
+  const scale2 = useSharedValue(1);
+  const scale3 = useSharedValue(1);
+  const opacity1 = useSharedValue(0.6);
+  const opacity2 = useSharedValue(0.4);
+  const opacity3 = useSharedValue(0.2);
+
+  useEffect(() => {
+    // Animate three concentric circles pulsing outward
+    scale1.value = withRepeat(
+      withSequence(
+        withTiming(1.5, {
+          duration: 1500,
+          easing: Easing.out(Easing.ease)
+        }),
+        withTiming(1, {
+          duration: 0
+        })
+      ),
+      -1,
+      false
+    );
+
+    opacity1.value = withRepeat(
+      withSequence(
+        withTiming(0, {
+          duration: 1500,
+          easing: Easing.out(Easing.ease)
+        }),
+        withTiming(0.6, {
+          duration: 0
+        })
+      ),
+      -1,
+      false
+    );
+
+    scale2.value = withRepeat(
+      withSequence(
+        withTiming(1, {
+          duration: 0
+        }),
+        withTiming(1.5, {
+          duration: 1500,
+          easing: Easing.out(Easing.ease)
+        }),
+        withTiming(1, {
+          duration: 0
+        })
+      ),
+      -1,
+      false
+    );
+
+    opacity2.value = withRepeat(
+      withSequence(
+        withTiming(0.4, {
+          duration: 0
+        }),
+        withTiming(0, {
+          duration: 1500,
+          easing: Easing.out(Easing.ease)
+        }),
+        withTiming(0.4, {
+          duration: 0
+        })
+      ),
+      -1,
+      false
+    );
+
+    scale3.value = withRepeat(
+      withSequence(
+        withTiming(1, {
+          duration: 0
+        }),
+        withTiming(1, {
+          duration: 500
+        }),
+        withTiming(1.5, {
+          duration: 1500,
+          easing: Easing.out(Easing.ease)
+        }),
+        withTiming(1, {
+          duration: 0
+        })
+      ),
+      -1,
+      false
+    );
+
+    opacity3.value = withRepeat(
+      withSequence(
+        withTiming(0.2, {
+          duration: 0
+        }),
+        withTiming(0.2, {
+          duration: 500
+        }),
+        withTiming(0, {
+          duration: 1500,
+          easing: Easing.out(Easing.ease)
+        }),
+        withTiming(0.2, {
+          duration: 0
+        })
+      ),
+      -1,
+      false
+    );
+  }, [scale1, scale2, scale3, opacity1, opacity2, opacity3]);
+
+  const circle1Style = useAnimatedStyle(() => {
+    return {
+      transform: [{ scale: scale1.value }],
+      opacity: opacity1.value
+    };
+  });
+
+  const circle2Style = useAnimatedStyle(() => {
+    return {
+      transform: [{ scale: scale2.value }],
+      opacity: opacity2.value
+    };
+  });
+
+  const circle3Style = useAnimatedStyle(() => {
+    return {
+      transform: [{ scale: scale3.value }],
+      opacity: opacity3.value
+    };
+  });
+
+  const center = size / 2;
+  const radius = size / 2 - 8;
+
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      {/* Wrap each circle in Animated.View for web compatibility */}
+      <Animated.View
+        style={[
+          {
+            position: 'absolute',
+            width: size,
+            height: size,
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          circle1Style
+        ]}
+      >
+        <Svg width={size} height={size}>
+          <Circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke={getThemeColor('primary')}
+            strokeWidth="2"
+          />
+        </Svg>
+      </Animated.View>
+      <Animated.View
+        style={[
+          {
+            position: 'absolute',
+            width: size,
+            height: size,
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          circle2Style
+        ]}
+      >
+        <Svg width={size} height={size}>
+          <Circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke={getThemeColor('primary')}
+            strokeWidth="2"
+          />
+        </Svg>
+      </Animated.View>
+      <Animated.View
+        style={[
+          {
+            position: 'absolute',
+            width: size,
+            height: size,
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          circle3Style
+        ]}
+      >
+        <Svg width={size} height={size}>
+          <Circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke={getThemeColor('primary')}
+            strokeWidth="2"
+          />
+        </Svg>
+      </Animated.View>
+    </View>
+  );
+}
+
diff --git a/views/new/onboarding/VisionScreen.tsx b/views/new/onboarding/VisionScreen.tsx
new file mode 100644
index 000000000..b2e0245bf
--- /dev/null
+++ b/views/new/onboarding/VisionScreen.tsx
@@ -0,0 +1,149 @@
+import { Text } from '@/components/ui/text';
+import { useLocalization } from '@/hooks/useLocalization';
+import { useColorScheme } from 'nativewind';
+import React, { useEffect } from 'react';
+import { Image, View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming
+} from 'react-native-reanimated';
+import { AnimatedStepContent } from './AnimatedStepContent';
+
+export function VisionScreen() {
+  const { t } = useLocalization();
+  const { colorScheme } = useColorScheme();
+  const logoScale = useSharedValue(0.8);
+  const logoOpacity = useSharedValue(0);
+  const logoRotation = useSharedValue(0);
+
+  // Determine which icon to use based on color scheme
+  const iconSource =
+    colorScheme === 'dark'
+      ? require('@/assets/icons/icon_dark.png')
+      : require('@/assets/icons/icon_light.png');
+
+  useEffect(() => {
+    // Fade in and scale up logo
+    logoOpacity.value = withDelay(
+      200,
+      withTiming(1, {
+        duration: 800,
+        easing: Easing.out(Easing.ease)
+      })
+    );
+
+    logoScale.value = withDelay(
+      200,
+      withSpring(1, {
+        damping: 12,
+        stiffness: 100
+      })
+    );
+
+    // Subtle rotation animation (very slow, barely noticeable)
+    logoRotation.value = withRepeat(
+      withSequence(
+        withTiming(2, {
+          duration: 3000,
+          easing: Easing.inOut(Easing.ease)
+        }),
+        withTiming(-2, {
+          duration: 3000,
+          easing: Easing.inOut(Easing.ease)
+        })
+      ),
+      -1,
+      false
+    );
+  }, [logoOpacity, logoScale, logoRotation]);
+
+  const logoStyle = useAnimatedStyle(() => ({
+    transform: [
+      { scale: logoScale.value },
+      { rotate: `${logoRotation.value}deg` }
+    ],
+    opacity: logoOpacity.value
+  }));
+
+  return (
+    <View className="flex-1 items-center justify-center gap-8 px-6">
+      {/* Animated Logo */}
+      <AnimatedStepContent delay={0}>
+        <Animated.View style={logoStyle}>
+          <View className="h-32 w-32 items-center justify-center">
+            <Image
+              source={iconSource}
+              style={{ width: 128, height: 128 }}
+              resizeMode="contain"
+            />
+          </View>
+        </Animated.View>
+      </AnimatedStepContent>
+
+      {/* Vision Statement */}
+      <AnimatedStepContent delay={400}>
+        <View className="items-center gap-6">
+          <Text
+            variant="h1"
+            className="text-center text-3xl font-bold leading-tight"
+          >
+            {t('onboardingVisionTitle') || 'Every language. Every culture. One vision.'}
+          </Text>
+        </View>
+      </AnimatedStepContent>
+
+      {/* Value Proposition */}
+      <AnimatedStepContent delay={600}>
+        <View className="w-full gap-4">
+          <Text
+            variant="default"
+            className="text-center text-lg leading-relaxed text-muted-foreground"
+          >
+            {t('onboardingVisionSubtitle') ||
+              'Collect text and audio language data quickly. Local-first, sync when connected. Collaborate, translate, validate.'}
+          </Text>
+        </View>
+      </AnimatedStepContent>
+
+      {/* Vision Details */}
+      <AnimatedStepContent delay={800}>
+        <View className="w-full gap-3">
+          <Text
+            variant="default"
+            className="text-center text-base leading-relaxed"
+          >
+            {t('onboardingVisionStatement1') ||
+              'Every language having access to the world\'s knowledge.'}
+          </Text>
+          <Text
+            variant="default"
+            className="text-center text-base leading-relaxed"
+          >
+            {t('onboardingVisionStatement2') ||
+              'Every culture sharing its meaning with the world.'}
+          </Text>
+        </View>
+      </AnimatedStepContent>
+
+      {/* CC0 Note */}
+      <AnimatedStepContent delay={1000}>
+        <View className="w-full">
+          <Text
+            variant="small"
+            className="text-center text-sm leading-relaxed text-muted-foreground/80"
+          >
+            {t('onboardingVisionCC0') ||
+              'CC0/public domain data ensures no party can stop this vision.'}
+          </Text>
+        </View>
+      </AnimatedStepContent>
+    </View>
+  );
+}
+

From 83086d6951f492cd28ef20de0e4d5b03882a5002 Mon Sep 17 00:00:00 2001
From: ryderwishart <ryderwishart@gmail.com>
Date: Fri, 14 Nov 2025 20:02:53 -0700
Subject: [PATCH 04/11] use apk in preview build

---
 eas.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/eas.json b/eas.json
index 0245c8602..0f0027436 100644
--- a/eas.json
+++ b/eas.json
@@ -23,7 +23,7 @@
       "autoIncrement": true,
       "channel": "preview",
       "environment": "preview",
-      "distribution": "store",
+      "distribution": "internal",
       "env": {
         "EXPO_PUBLIC_SITE_URL": "https://langquest.org",
         "EXPO_PUBLIC_APP_VARIANT": "preview"

From f5f3340db365e8cdf20b46526dd8d3bbf0df854d Mon Sep 17 00:00:00 2001
From: ryderwishart <ryderwishart@gmail.com>
Date: Fri, 14 Nov 2025 23:16:28 -0700
Subject: [PATCH 05/11] Add onboarding vision content and animation

- Introduced new localization entries for onboarding vision titles, subtitles, and statements in multiple languages.
- Created a new `VisionFlowAnimation` component for animated transitions between globe and user icons.
- Updated `VisionScreen` to incorporate the new animation and adjusted layout for improved visual hierarchy.
---
 services/localizations.ts                    |  42 +++
 views/new/onboarding/VisionFlowAnimation.tsx | 360 +++++++++++++++++++
 views/new/onboarding/VisionScreen.tsx        |  79 ++--
 3 files changed, 446 insertions(+), 35 deletions(-)
 create mode 100644 views/new/onboarding/VisionFlowAnimation.tsx

diff --git a/services/localizations.ts b/services/localizations.ts
index 635543bdb..0bad046f4 100644
--- a/services/localizations.ts
+++ b/services/localizations.ts
@@ -5577,6 +5577,48 @@ export const localizations = {
     brazilian_portuguese: 'Capítulo 2',
     tok_pisin: 'Kapitol 2',
     indonesian: 'Bab 2'
+  },
+  onboardingVisionTitle: {
+    english: 'Every language. Every culture. One vision.',
+    spanish: 'Cada idioma. Cada cultura. Una visión.',
+    brazilian_portuguese: 'Cada idioma. Cada cultura. Uma visão.',
+    tok_pisin: 'Olgeta tokples. Olgeta kalsa. Wanpela visen.',
+    indonesian: 'Setiap bahasa. Setiap budaya. Satu visi.'
+  },
+  onboardingVisionSubtitle: {
+    english: 'Collect text and audio language data quickly. Local-first, sync when connected. Collaborate, translate, validate.',
+    spanish: 'Recopila datos de texto y audio de idiomas rápidamente. Primero local, sincroniza cuando estés conectado. Colabora, traduce, valida.',
+    brazilian_portuguese: 'Colete dados de texto e áudio de idiomas rapidamente. Primeiro local, sincronize quando conectado. Colabore, traduza, valide.',
+    tok_pisin: 'Kisim ol text na audio bilong tokples kwiktaim. Stat long lokal, sync taim yu gat internet. Wok wantaim, tanim tokples, stretim.',
+    indonesian: 'Kumpulkan data bahasa teks dan audio dengan cepat. Lokal pertama, sinkronkan saat terhubung. Berkolaborasi, terjemahkan, validasi.'
+  },
+  onboardingVisionStatement1: {
+    english: 'Every language having access to the world\'s knowledge.',
+    spanish: 'Cada idioma con acceso al conocimiento del mundo.',
+    brazilian_portuguese: 'Cada idioma tendo acesso ao conhecimento do mundo.',
+    tok_pisin: 'Olgeta tokples i gat akses long save bilong wol.',
+    indonesian: 'Setiap bahasa memiliki akses ke pengetahuan dunia.'
+  },
+  onboardingVisionStatement2: {
+    english: 'Every culture sharing its meaning with the world.',
+    spanish: 'Cada cultura compartiendo su significado con el mundo.',
+    brazilian_portuguese: 'Cada cultura compartilhando seu significado com o mundo.',
+    tok_pisin: 'Olgeta kalsa i salim save bilong en i go long wol.',
+    indonesian: 'Setiap budaya berbagi maknanya dengan dunia.'
+  },
+  onboardingVisionCC0: {
+    english: 'CC0/public domain data ensures no party can stop this vision.',
+    spanish: 'Los datos CC0/dominio público garantizan que ninguna parte pueda detener esta visión.',
+    brazilian_portuguese: 'Dados CC0/domínio público garantem que nenhuma parte possa impedir esta visão.',
+    tok_pisin: 'CC0/pablik domain data i mekim olsem wanpela man o grup i no inap stopim dispela visen.',
+    indonesian: 'Data CC0/domain publik memastikan tidak ada pihak yang dapat menghentikan visi ini.'
+  },
+  onboardingOurVision: {
+    english: 'Our Vision',
+    spanish: 'Nuestra Visión',
+    brazilian_portuguese: 'Nossa Visão',
+    tok_pisin: 'Visen Bilong Mipela',
+    indonesian: 'Visi Kami'
   }
 } as const;
 
diff --git a/views/new/onboarding/VisionFlowAnimation.tsx b/views/new/onboarding/VisionFlowAnimation.tsx
new file mode 100644
index 000000000..3dc719720
--- /dev/null
+++ b/views/new/onboarding/VisionFlowAnimation.tsx
@@ -0,0 +1,360 @@
+import { Icon } from '@/components/ui/icon';
+import { GlobeIcon, UsersIcon } from 'lucide-react-native';
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withTiming
+} from 'react-native-reanimated';
+
+export function VisionFlowAnimation() {
+  // Globe animation
+  const globeOpacity = useSharedValue(0);
+  const globeScale = useSharedValue(0.8);
+
+  // Users animation
+  const usersOpacity = useSharedValue(0);
+  const usersScale = useSharedValue(0.8);
+
+  // Particles flowing from globe to users with arcing motion
+  // Each particle has X (horizontal) and Y (vertical arc) movement
+  const particle1X = useSharedValue(0);
+  const particle1Y = useSharedValue(0);
+  const particle1Opacity = useSharedValue(0);
+  
+  const particle2X = useSharedValue(0);
+  const particle2Y = useSharedValue(0);
+  const particle2Opacity = useSharedValue(0);
+  
+  const particle3X = useSharedValue(0);
+  const particle3Y = useSharedValue(0);
+  const particle3Opacity = useSharedValue(0);
+
+  // Particles flowing from users back to globe with arcing motion
+  const returnParticle1X = useSharedValue(0);
+  const returnParticle1Y = useSharedValue(0);
+  const returnParticle1Opacity = useSharedValue(0);
+  
+  const returnParticle2X = useSharedValue(0);
+  const returnParticle2Y = useSharedValue(0);
+  const returnParticle2Opacity = useSharedValue(0);
+  
+  const returnParticle3X = useSharedValue(0);
+  const returnParticle3Y = useSharedValue(0);
+  const returnParticle3Opacity = useSharedValue(0);
+
+  useEffect(() => {
+    // Animate globe in
+    globeOpacity.value = withDelay(200, withTiming(1, { duration: 500 }));
+    globeScale.value = withDelay(200, withTiming(1, { duration: 500, easing: Easing.out(Easing.ease) }));
+
+    // Animate users in
+    usersOpacity.value = withDelay(400, withTiming(1, { duration: 500 }));
+    usersScale.value = withDelay(400, withTiming(1, { duration: 500, easing: Easing.out(Easing.ease) }));
+
+    // Flow from globe to users with arcing paths
+    const flowToUsers = () => {
+      // Reset particles - start from globe position (shifted left)
+      particle1X.value = -100;
+      particle1Y.value = 0;
+      particle1Opacity.value = 0;
+      particle2X.value = -100;
+      particle2Y.value = 0;
+      particle2Opacity.value = 0;
+      particle3X.value = -100;
+      particle3Y.value = 0;
+      particle3Opacity.value = 0;
+
+      // Particle 1: Arc up then down
+      particle1Opacity.value = withSequence(
+        withTiming(1, { duration: 150 }),
+        withTiming(1, { duration: 900 }),
+        withTiming(0, { duration: 150 })
+      );
+      particle1X.value = withTiming(100, {
+        duration: 1200,
+        easing: Easing.out(Easing.ease)
+      });
+      particle1Y.value = withSequence(
+        withTiming(-12, { duration: 600, easing: Easing.out(Easing.ease) }),
+        withTiming(0, { duration: 600, easing: Easing.in(Easing.ease) })
+      );
+
+      // Particle 2: Arc down then up (different path)
+      particle2Opacity.value = withDelay(
+        300,
+        withSequence(
+          withTiming(1, { duration: 150 }),
+          withTiming(1, { duration: 900 }),
+          withTiming(0, { duration: 150 })
+        )
+      );
+      particle2X.value = withDelay(
+        300,
+        withTiming(100, {
+          duration: 1200,
+          easing: Easing.out(Easing.ease)
+        })
+      );
+      particle2Y.value = withDelay(
+        300,
+        withSequence(
+          withTiming(8, { duration: 600, easing: Easing.out(Easing.ease) }),
+          withTiming(0, { duration: 600, easing: Easing.in(Easing.ease) })
+        )
+      );
+
+      // Particle 3: Higher arc
+      particle3Opacity.value = withDelay(
+        600,
+        withSequence(
+          withTiming(1, { duration: 150 }),
+          withTiming(1, { duration: 900 }),
+          withTiming(0, { duration: 150 })
+        )
+      );
+      particle3X.value = withDelay(
+        600,
+        withTiming(100, {
+          duration: 1200,
+          easing: Easing.out(Easing.ease)
+        })
+      );
+      particle3Y.value = withDelay(
+        600,
+        withSequence(
+          withTiming(-16, { duration: 600, easing: Easing.out(Easing.ease) }),
+          withTiming(0, { duration: 600, easing: Easing.in(Easing.ease) })
+        )
+      );
+    };
+
+    // Flow from users back to globe with arcing paths
+    const flowToGlobe = () => {
+      // Reset return particles (start from users position - on the right)
+      returnParticle1X.value = 100;
+      returnParticle1Y.value = 0;
+      returnParticle1Opacity.value = 0;
+      returnParticle2X.value = 100;
+      returnParticle2Y.value = 0;
+      returnParticle2Opacity.value = 0;
+      returnParticle3X.value = 100;
+      returnParticle3Y.value = 0;
+      returnParticle3Opacity.value = 0;
+
+      // Return Particle 1: Arc up then down
+      returnParticle1Opacity.value = withSequence(
+        withTiming(1, { duration: 150 }),
+        withTiming(1, { duration: 900 }),
+        withTiming(0, { duration: 150 })
+      );
+      returnParticle1X.value = withTiming(-100, {
+        duration: 1200,
+        easing: Easing.out(Easing.ease)
+      });
+      returnParticle1Y.value = withSequence(
+        withTiming(-10, { duration: 600, easing: Easing.out(Easing.ease) }),
+        withTiming(0, { duration: 600, easing: Easing.in(Easing.ease) })
+      );
+
+      // Return Particle 2: Arc down then up
+      returnParticle2Opacity.value = withDelay(
+        400,
+        withSequence(
+          withTiming(1, { duration: 150 }),
+          withTiming(1, { duration: 900 }),
+          withTiming(0, { duration: 150 })
+        )
+      );
+      returnParticle2X.value = withDelay(
+        400,
+        withTiming(-100, {
+          duration: 1200,
+          easing: Easing.out(Easing.ease)
+        })
+      );
+      returnParticle2Y.value = withDelay(
+        400,
+        withSequence(
+          withTiming(12, { duration: 600, easing: Easing.out(Easing.ease) }),
+          withTiming(0, { duration: 600, easing: Easing.in(Easing.ease) })
+        )
+      );
+
+      // Return Particle 3: Lower arc
+      returnParticle3Opacity.value = withDelay(
+        800,
+        withSequence(
+          withTiming(1, { duration: 150 }),
+          withTiming(1, { duration: 900 }),
+          withTiming(0, { duration: 150 })
+        )
+      );
+      returnParticle3X.value = withDelay(
+        800,
+        withTiming(-100, {
+          duration: 1200,
+          easing: Easing.out(Easing.ease)
+        })
+      );
+      returnParticle3Y.value = withDelay(
+        800,
+        withSequence(
+          withTiming(-14, { duration: 600, easing: Easing.out(Easing.ease) }),
+          withTiming(0, { duration: 600, easing: Easing.in(Easing.ease) })
+        )
+      );
+    };
+
+    // Start flow to users
+    flowToUsers();
+    
+    // After particles reach users, start return flow
+    const returnDelay = setTimeout(() => {
+      flowToGlobe();
+    }, 1500);
+
+    // Repeat both flows continuously
+    const flowInterval = setInterval(() => {
+      flowToUsers();
+      setTimeout(() => {
+        flowToGlobe();
+      }, 1500);
+    }, 3000);
+
+    return () => {
+      clearTimeout(returnDelay);
+      clearInterval(flowInterval);
+    };
+  }, [
+    globeOpacity,
+    globeScale,
+    usersOpacity,
+    usersScale,
+    particle1X,
+    particle1Y,
+    particle1Opacity,
+    particle2X,
+    particle2Y,
+    particle2Opacity,
+    particle3X,
+    particle3Y,
+    particle3Opacity,
+    returnParticle1X,
+    returnParticle1Y,
+    returnParticle1Opacity,
+    returnParticle2X,
+    returnParticle2Y,
+    returnParticle2Opacity,
+    returnParticle3X,
+    returnParticle3Y,
+    returnParticle3Opacity
+  ]);
+
+  const globeStyle = useAnimatedStyle(() => ({
+    opacity: globeOpacity.value,
+    transform: [{ scale: globeScale.value }]
+  }));
+
+  const usersStyle = useAnimatedStyle(() => ({
+    opacity: usersOpacity.value,
+    transform: [{ scale: usersScale.value }]
+  }));
+
+  const particle1Style = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: particle1X.value },
+      { translateY: particle1Y.value }
+    ],
+    opacity: particle1Opacity.value
+  }));
+
+  const particle2Style = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: particle2X.value },
+      { translateY: particle2Y.value }
+    ],
+    opacity: particle2Opacity.value
+  }));
+
+  const particle3Style = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: particle3X.value },
+      { translateY: particle3Y.value }
+    ],
+    opacity: particle3Opacity.value
+  }));
+
+  const returnParticle1Style = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: returnParticle1X.value },
+      { translateY: returnParticle1Y.value }
+    ],
+    opacity: returnParticle1Opacity.value
+  }));
+
+  const returnParticle2Style = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: returnParticle2X.value },
+      { translateY: returnParticle2Y.value }
+    ],
+    opacity: returnParticle2Opacity.value
+  }));
+
+  const returnParticle3Style = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: returnParticle3X.value },
+      { translateY: returnParticle3Y.value }
+    ],
+    opacity: returnParticle3Opacity.value
+  }));
+
+  return (
+    <View className="relative h-24 w-full flex-row items-center justify-center px-8">
+      {/* Globe Icon (left) */}
+      <Animated.View style={globeStyle}>
+        <View className="h-14 w-14 items-center justify-center rounded-full bg-primary/10">
+          <Icon as={GlobeIcon} size={28} className="text-primary" />
+        </View>
+      </Animated.View>
+
+      {/* Flow particles arcing between globe and users */}
+      <View className="relative h-full flex-1 items-center justify-center">
+        {/* Particles flowing from globe to users */}
+        <Animated.View style={particle1Style} className="absolute">
+          <View className="h-2 w-2 rounded-full bg-primary" />
+        </Animated.View>
+        <Animated.View style={particle2Style} className="absolute">
+          <View className="h-1.5 w-1.5 rounded-full bg-primary/80" />
+        </Animated.View>
+        <Animated.View style={particle3Style} className="absolute">
+          <View className="h-2 w-2 rounded-full bg-primary" />
+        </Animated.View>
+        
+        {/* Particles flowing from users back to globe */}
+        <Animated.View style={returnParticle1Style} className="absolute">
+          <View className="h-2 w-2 rounded-full bg-primary" />
+        </Animated.View>
+        <Animated.View style={returnParticle2Style} className="absolute">
+          <View className="h-1.5 w-1.5 rounded-full bg-primary/80" />
+        </Animated.View>
+        <Animated.View style={returnParticle3Style} className="absolute">
+          <View className="h-2 w-2 rounded-full bg-primary" />
+        </Animated.View>
+      </View>
+
+      {/* Users Icon (right) */}
+      <Animated.View style={usersStyle}>
+        <View className="h-14 w-14 items-center justify-center rounded-full bg-primary/10">
+          <Icon as={UsersIcon} size={28} className="text-primary" />
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
diff --git a/views/new/onboarding/VisionScreen.tsx b/views/new/onboarding/VisionScreen.tsx
index b2e0245bf..02f17f6da 100644
--- a/views/new/onboarding/VisionScreen.tsx
+++ b/views/new/onboarding/VisionScreen.tsx
@@ -1,3 +1,4 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Text } from '@/components/ui/text';
 import { useLocalization } from '@/hooks/useLocalization';
 import { useColorScheme } from 'nativewind';
@@ -14,6 +15,7 @@ import Animated, {
   withTiming
 } from 'react-native-reanimated';
 import { AnimatedStepContent } from './AnimatedStepContent';
+import { VisionFlowAnimation } from './VisionFlowAnimation';
 
 export function VisionScreen() {
   const { t } = useLocalization();
@@ -72,14 +74,14 @@ export function VisionScreen() {
   }));
 
   return (
-    <View className="flex-1 items-center justify-center gap-8 px-6">
+    <View className="flex-1 items-center justify-center gap-4 px-6">
       {/* Animated Logo */}
       <AnimatedStepContent delay={0}>
         <Animated.View style={logoStyle}>
-          <View className="h-32 w-32 items-center justify-center">
+          <View className="h-24 w-24 items-center justify-center">
             <Image
               source={iconSource}
-              style={{ width: 128, height: 128 }}
+              style={{ width: 96, height: 96 }}
               resizeMode="contain"
             />
           </View>
@@ -87,59 +89,66 @@ export function VisionScreen() {
       </AnimatedStepContent>
 
       {/* Vision Statement */}
-      <AnimatedStepContent delay={400}>
-        <View className="items-center gap-6">
+      <AnimatedStepContent delay={300}>
+        <View className="items-center gap-2">
           <Text
-            variant="h1"
-            className="text-center text-3xl font-bold leading-tight"
+            variant="h2"
+            className="text-center text-2xl font-bold leading-tight"
           >
-            {t('onboardingVisionTitle') || 'Every language. Every culture. One vision.'}
+            {t('onboardingVisionTitle')}
           </Text>
         </View>
       </AnimatedStepContent>
 
       {/* Value Proposition */}
-      <AnimatedStepContent delay={600}>
-        <View className="w-full gap-4">
+      <AnimatedStepContent delay={500}>
+        <View className="w-full">
           <Text
             variant="default"
-            className="text-center text-lg leading-relaxed text-muted-foreground"
+            className="text-center text-base leading-relaxed text-muted-foreground"
           >
-            {t('onboardingVisionSubtitle') ||
-              'Collect text and audio language data quickly. Local-first, sync when connected. Collaborate, translate, validate.'}
+            {t('onboardingVisionSubtitle')}
           </Text>
         </View>
       </AnimatedStepContent>
 
-      {/* Vision Details */}
-      <AnimatedStepContent delay={800}>
-        <View className="w-full gap-3">
-          <Text
-            variant="default"
-            className="text-center text-base leading-relaxed"
-          >
-            {t('onboardingVisionStatement1') ||
-              'Every language having access to the world\'s knowledge.'}
-          </Text>
-          <Text
-            variant="default"
-            className="text-center text-base leading-relaxed"
-          >
-            {t('onboardingVisionStatement2') ||
-              'Every culture sharing its meaning with the world.'}
-          </Text>
-        </View>
+      {/* Vision Details - Highlighted Box */}
+      <AnimatedStepContent delay={700}>
+        <Card className="w-full border-primary/20 bg-primary/5">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-center text-base font-semibold text-primary">
+              {t('onboardingOurVision')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="gap-3 pt-0">
+            {/* Flow Animation */}
+            <View className="w-full items-center justify-center py-2">
+              <VisionFlowAnimation />
+            </View>
+            <Text
+              variant="default"
+              className="text-center text-base font-medium leading-relaxed"
+            >
+              {t('onboardingVisionStatement1')}
+            </Text>
+            <Text
+              variant="default"
+              className="text-center text-base font-medium leading-relaxed"
+            >
+              {t('onboardingVisionStatement2')}
+            </Text>
+          </CardContent>
+        </Card>
       </AnimatedStepContent>
 
       {/* CC0 Note */}
-      <AnimatedStepContent delay={1000}>
+      <AnimatedStepContent delay={900}>
         <View className="w-full">
           <Text
             variant="small"
-            className="text-center text-sm leading-relaxed text-muted-foreground/80"
+            className="text-center text-xs leading-relaxed text-muted-foreground/80"
           >
-            {t('onboardingVisionCC0') ||
-              'CC0/public domain data ensures no party can stop this vision.'}
+            {t('onboardingVisionCC0')}
           </Text>
         </View>
       </AnimatedStepContent>

From 8c67a428271528361cb47f6dc7bb772608f141fd Mon Sep 17 00:00:00 2001
From: ryderwishart <ryderwishart@gmail.com>
Date: Sat, 15 Nov 2025 09:28:00 -0700
Subject: [PATCH 06/11] Enhance onboarding flow and localization updates

- Added logic to trigger onboarding walkthrough after terms acceptance.
- Introduced new state management for onboarding completion.
- Updated `SimpleOnboardingFlow` to reset steps and mark completion.
- Improved localization entries for onboarding language selection and related content.
- Adjusted `AppView` and `NextGenProjectsView` to handle onboarding visibility based on terms acceptance.
---
 app/terms.tsx                                |   2 +
 components/OnboardingProgressIndicator.tsx   |   2 +
 components/language-select.tsx               |   5 +-
 services/localizations.ts                    | 100 +++++++++++++------
 store/localStore.ts                          |   4 +
 views/AppView.tsx                            |  30 ++++++
 views/new/NextGenProjectsView.tsx            |  14 +--
 views/new/SimpleOnboardingFlow.tsx           |  21 +++-
 views/new/onboarding/VisionFlowAnimation.tsx |  20 ++--
 9 files changed, 149 insertions(+), 49 deletions(-)

diff --git a/app/terms.tsx b/app/terms.tsx
index 2922ae7fe..f1040798c 100644
--- a/app/terms.tsx
+++ b/app/terms.tsx
@@ -24,6 +24,8 @@ function Terms() {
   const handleAcceptTerms = useCallback(() => {
     console.log('Accepting terms...');
     acceptTerms();
+    // After accepting terms, show the onboarding walkthrough
+    // The onboarding will show automatically when navigating to projects view
     router.navigate('/');
   }, [acceptTerms, router]);
 
diff --git a/components/OnboardingProgressIndicator.tsx b/components/OnboardingProgressIndicator.tsx
index 0ad6b3286..b586dad95 100644
--- a/components/OnboardingProgressIndicator.tsx
+++ b/components/OnboardingProgressIndicator.tsx
@@ -27,6 +27,7 @@ interface OnboardingProgressIndicatorProps {
 }
 
 // Simple onboarding steps (for minimal onboarding flow - Other path)
+// Language selection happens on terms page, so we start with vision
 const SIMPLE_STEP_ORDER: OnboardingStep[] = [
   'vision',
   'create-project-simple',
@@ -36,6 +37,7 @@ const SIMPLE_STEP_ORDER: OnboardingStep[] = [
 ];
 
 // Bible onboarding steps (bible-create-chapter is now part of bible-select-book)
+// Language selection happens on terms page, so we start with vision
 const BIBLE_STEP_ORDER: OnboardingStep[] = [
   'vision',
   'create-project-simple',
diff --git a/components/language-select.tsx b/components/language-select.tsx
index d60eea121..03a5362d2 100644
--- a/components/language-select.tsx
+++ b/components/language-select.tsx
@@ -151,10 +151,11 @@ export const LanguageSelect: React.FC<LanguageSelectProps> = ({
         if (!option) return;
         const lang = languages.find((l) => l.id === option.value);
         if (lang) {
-          // If onChange is provided, use it (controlled mode)
+          // Always save the language and set UI language
           setSavedLanguage(lang);
+          setUILanguage(lang);
+          // If onChange is provided, call it as well (for controlled mode)
           if (onChange) onChange(lang);
-          else setUILanguage(lang);
         }
       }}
     >
diff --git a/services/localizations.ts b/services/localizations.ts
index 0bad046f4..ff13f021a 100644
--- a/services/localizations.ts
+++ b/services/localizations.ts
@@ -4726,8 +4726,7 @@ export const localizations = {
       'La calibración falló. Por favor, inténtalo de nuevo en un entorno más silencioso.',
     brazilian_portuguese:
       'Calibração falhou. Por favor, tente novamente em um ambiente mais silencioso.',
-    tok_pisin:
-      'Em i no wok. Traim gen long ples i no gat tumas nois.',
+    tok_pisin: 'Em i no wok. Traim gen long ples i no gat tumas nois.',
     indonesian:
       'Kalibrasi gagal. Silakan coba lagi di lingkungan yang lebih tenang.'
   },
@@ -5406,9 +5405,11 @@ export const localizations = {
   onboardingCreateQuestSubtitle: {
     english: 'Add quests to break down your project into manageable pieces',
     spanish: 'Agrega misiones para dividir tu proyecto en partes manejables',
-    brazilian_portuguese: 'Adicione missões para dividir seu projeto em partes gerenciáveis',
+    brazilian_portuguese:
+      'Adicione missões para dividir seu projeto em partes gerenciáveis',
     tok_pisin: 'Putim kwest long brukim projek i go long liklik hap',
-    indonesian: 'Tambahkan quest untuk membagi proyek Anda menjadi bagian yang dapat dikelola'
+    indonesian:
+      'Tambahkan quest untuk membagi proyek Anda menjadi bagian yang dapat dikelola'
   },
   onboardingQuestExample1: {
     english: 'Story 1',
@@ -5440,10 +5441,14 @@ export const localizations = {
   },
   onboardingRecordAudioSubtitle: {
     english: 'Hold the button to record, or slide to record anytime you talk',
-    spanish: 'Mantén presionado el botón para grabar, o desliza para grabar cuando hables',
-    brazilian_portuguese: 'Mantenha pressionado o botão para gravar ou deslize para gravar quando falar',
-    tok_pisin: 'Holim button long rekodim, o slipim long rekodim taim yu toktok',
-    indonesian: 'Tahan tombol untuk merekam, atau geser untuk merekam kapan saja Anda berbicara'
+    spanish:
+      'Mantén presionado el botón para grabar, o desliza para grabar cuando hables',
+    brazilian_portuguese:
+      'Mantenha pressionado o botão para gravar ou deslize para gravar quando falar',
+    tok_pisin:
+      'Holim button long rekodim, o slipim long rekodim taim yu toktok',
+    indonesian:
+      'Tahan tombol untuk merekam, atau geser untuk merekam kapan saja Anda berbicara'
   },
   onboardingRecordMethod1: {
     english: 'Hold button to record',
@@ -5474,11 +5479,16 @@ export const localizations = {
     indonesian: 'Bekerja bersama'
   },
   onboardingInviteSubtitle: {
-    english: 'Invite others to collaborate. They\'ll receive a notification and see your project in their list',
-    spanish: 'Invita a otros a colaborar. Recibirán una notificación y verán tu proyecto en su lista',
-    brazilian_portuguese: 'Convide outros para colaborar. Eles receberão uma notificação e verão seu projeto em sua lista',
-    tok_pisin: 'Singim ol narapela long wok wantaim. Bai ol kisim notis na lukim projek bilong yu long list bilong ol',
-    indonesian: 'Undang orang lain untuk berkolaborasi. Mereka akan menerima notifikasi dan melihat proyek Anda di daftar mereka'
+    english:
+      "Invite others to collaborate. They'll receive a notification and see your project in their list",
+    spanish:
+      'Invita a otros a colaborar. Recibirán una notificación y verán tu proyecto en su lista',
+    brazilian_portuguese:
+      'Convide outros para colaborar. Eles receberão uma notificação e verão seu projeto em sua lista',
+    tok_pisin:
+      'Singim ol narapela long wok wantaim. Bai ol kisim notis na lukim projek bilong yu long list bilong ol',
+    indonesian:
+      'Undang orang lain untuk berkolaborasi. Mereka akan menerima notifikasi dan melihat proyek Anda di daftar mereka'
   },
   onboardingInviteBenefit1: {
     english: 'They receive a notification',
@@ -5559,8 +5569,10 @@ export const localizations = {
   },
   onboardingBibleCreateChapterSubtitle: {
     english: 'Each chapter becomes a quest you can work on',
-    spanish: 'Cada capítulo se convierte en una quest en la que puedes trabajar',
-    brazilian_portuguese: 'Cada capítulo se torna uma quest em que você pode trabalhar',
+    spanish:
+      'Cada capítulo se convierte en una quest en la que puedes trabajar',
+    brazilian_portuguese:
+      'Cada capítulo se torna uma quest em que você pode trabalhar',
     tok_pisin: 'Olgeta kapitol i kamap wanpela kwest yu ken wok long en',
     indonesian: 'Setiap bab menjadi quest yang dapat Anda kerjakan'
   },
@@ -5579,21 +5591,26 @@ export const localizations = {
     indonesian: 'Bab 2'
   },
   onboardingVisionTitle: {
-    english: 'Every language. Every culture. One vision.',
-    spanish: 'Cada idioma. Cada cultura. Una visión.',
-    brazilian_portuguese: 'Cada idioma. Cada cultura. Uma visão.',
-    tok_pisin: 'Olgeta tokples. Olgeta kalsa. Wanpela visen.',
-    indonesian: 'Setiap bahasa. Setiap budaya. Satu visi.'
+    english: 'Every language. Every culture.',
+    spanish: 'Cada idioma. Cada cultura.',
+    brazilian_portuguese: 'Cada idioma. Cada cultura.',
+    tok_pisin: 'Olgeta tokples. Olgeta kalsa.',
+    indonesian: 'Setiap bahasa. Setiap budaya.'
   },
   onboardingVisionSubtitle: {
-    english: 'Collect text and audio language data quickly. Local-first, sync when connected. Collaborate, translate, validate.',
-    spanish: 'Recopila datos de texto y audio de idiomas rápidamente. Primero local, sincroniza cuando estés conectado. Colabora, traduce, valida.',
-    brazilian_portuguese: 'Colete dados de texto e áudio de idiomas rapidamente. Primeiro local, sincronize quando conectado. Colabore, traduza, valide.',
-    tok_pisin: 'Kisim ol text na audio bilong tokples kwiktaim. Stat long lokal, sync taim yu gat internet. Wok wantaim, tanim tokples, stretim.',
-    indonesian: 'Kumpulkan data bahasa teks dan audio dengan cepat. Lokal pertama, sinkronkan saat terhubung. Berkolaborasi, terjemahkan, validasi.'
+    english:
+      'Collect text and audio language data quickly. Local-first, sync when connected. Collaborate, translate, validate.',
+    spanish:
+      'Recopila datos de texto y audio de idiomas rápidamente. Primero local, sincroniza cuando estés conectado. Colabora, traduce, valida.',
+    brazilian_portuguese:
+      'Colete dados de texto e áudio de idiomas rapidamente. Primeiro local, sincronize quando conectado. Colabore, traduza, valide.',
+    tok_pisin:
+      'Kisim ol text na audio bilong tokples kwiktaim. Stat long lokal, sync taim yu gat internet. Wok wantaim, tanim tokples, stretim.',
+    indonesian:
+      'Kumpulkan data bahasa teks dan audio dengan cepat. Lokal pertama, sinkronkan saat terhubung. Berkolaborasi, terjemahkan, validasi.'
   },
   onboardingVisionStatement1: {
-    english: 'Every language having access to the world\'s knowledge.',
+    english: "Every language having access to the world's knowledge.",
     spanish: 'Cada idioma con acceso al conocimiento del mundo.',
     brazilian_portuguese: 'Cada idioma tendo acesso ao conhecimento do mundo.',
     tok_pisin: 'Olgeta tokples i gat akses long save bilong wol.',
@@ -5602,16 +5619,21 @@ export const localizations = {
   onboardingVisionStatement2: {
     english: 'Every culture sharing its meaning with the world.',
     spanish: 'Cada cultura compartiendo su significado con el mundo.',
-    brazilian_portuguese: 'Cada cultura compartilhando seu significado com o mundo.',
+    brazilian_portuguese:
+      'Cada cultura compartilhando seu significado com o mundo.',
     tok_pisin: 'Olgeta kalsa i salim save bilong en i go long wol.',
     indonesian: 'Setiap budaya berbagi maknanya dengan dunia.'
   },
   onboardingVisionCC0: {
     english: 'CC0/public domain data ensures no party can stop this vision.',
-    spanish: 'Los datos CC0/dominio público garantizan que ninguna parte pueda detener esta visión.',
-    brazilian_portuguese: 'Dados CC0/domínio público garantem que nenhuma parte possa impedir esta visão.',
-    tok_pisin: 'CC0/pablik domain data i mekim olsem wanpela man o grup i no inap stopim dispela visen.',
-    indonesian: 'Data CC0/domain publik memastikan tidak ada pihak yang dapat menghentikan visi ini.'
+    spanish:
+      'Los datos CC0/dominio público garantizan que ninguna parte pueda detener esta visión.',
+    brazilian_portuguese:
+      'Dados CC0/domínio público garantem que nenhuma parte possa impedir esta visão.',
+    tok_pisin:
+      'CC0/pablik domain data i mekim olsem wanpela man o grup i no inap stopim dispela visen.',
+    indonesian:
+      'Data CC0/domain publik memastikan tidak ada pihak yang dapat menghentikan visi ini.'
   },
   onboardingOurVision: {
     english: 'Our Vision',
@@ -5619,6 +5641,22 @@ export const localizations = {
     brazilian_portuguese: 'Nossa Visão',
     tok_pisin: 'Visen Bilong Mipela',
     indonesian: 'Visi Kami'
+  },
+  onboardingSelectLanguageTitle: {
+    english: 'Choose Your Language',
+    spanish: 'Elige Tu Idioma',
+    brazilian_portuguese: 'Escolha Seu Idioma',
+    tok_pisin: 'Pilim Tokples Bilong Yu',
+    indonesian: 'Pilih Bahasa Anda'
+  },
+  onboardingSelectLanguageSubtitle: {
+    english: "Select the language you'd like to use for the app interface",
+    spanish:
+      'Selecciona el idioma que deseas usar para la interfaz de la aplicación',
+    brazilian_portuguese:
+      'Selecione o idioma que deseja usar para a interface do aplicativo',
+    tok_pisin: 'Pilim tokples yu laikim long yusim long app',
+    indonesian: 'Pilih bahasa yang ingin Anda gunakan untuk antarmuka aplikasi'
   }
 } as const;
 
diff --git a/store/localStore.ts b/store/localStore.ts
index 7b2b18b75..42b0d01ac 100644
--- a/store/localStore.ts
+++ b/store/localStore.ts
@@ -152,6 +152,8 @@ export interface LocalState {
   // Onboarding dismissal tracking
   onboardingDismissed: boolean;
   setOnboardingDismissed: (dismissed: boolean) => void;
+  onboardingCompleted: boolean;
+  setOnboardingCompleted: (completed: boolean) => void;
   triggerOnboarding: boolean;
   setTriggerOnboarding: (trigger: boolean) => void;
 
@@ -270,6 +272,8 @@ export const useLocalStore = create<LocalState>()(
       // Onboarding dismissal tracking
       onboardingDismissed: false,
       setOnboardingDismissed: (dismissed) => set({ onboardingDismissed: dismissed }),
+      onboardingCompleted: false,
+      setOnboardingCompleted: (completed) => set({ onboardingCompleted: completed }),
       triggerOnboarding: false,
       setTriggerOnboarding: (trigger) => set({ triggerOnboarding: trigger }),
 
diff --git a/views/AppView.tsx b/views/AppView.tsx
index f91876838..3d36867d1 100644
--- a/views/AppView.tsx
+++ b/views/AppView.tsx
@@ -40,6 +40,9 @@ const NextGenProjectsView = React.lazy(
 const ProjectDirectoryView = React.lazy(
   () => import('@/views/new/ProjectDirectoryView')
 );
+const SimpleOnboardingFlow = React.lazy(
+  () => import('@/views/new/SimpleOnboardingFlow').then(module => ({ default: module.SimpleOnboardingFlow }))
+);
 
 // Common UI Components
 import AppDrawer from '@/components/AppDrawer';
@@ -63,8 +66,11 @@ function AppViewContent() {
   const authView = useLocalStore((state) => state.authView);
   const setAuthView = useLocalStore((state) => state.setAuthView);
   const setTriggerOnboarding = useLocalStore((state) => state.setTriggerOnboarding);
+  const dateTermsAccepted = useLocalStore((state) => state.dateTermsAccepted);
+  const triggerOnboarding = useLocalStore((state) => state.triggerOnboarding);
   const [drawerIsVisible, setDrawerIsVisible] = useState(false);
   const [deferredView, setDeferredView] = useState(currentView);
+  const [showSimpleOnboarding, setShowSimpleOnboarding] = React.useState(false);
   const { isCloudLoading } = useCloudLoading();
   
   // Handler for onboarding button in header (only show on projects view)
@@ -74,6 +80,24 @@ function AppViewContent() {
     }
   }, [currentView, setTriggerOnboarding]);
 
+  // Show onboarding AFTER terms are accepted (one-time walkthrough)
+  // This ensures users see the walkthrough after accepting terms
+  const onboardingCompleted = useLocalStore((state) => state.onboardingCompleted);
+  React.useEffect(() => {
+    // Show onboarding if terms are accepted but onboarding hasn't been completed
+    if (dateTermsAccepted && !onboardingCompleted && !showSimpleOnboarding) {
+      setShowSimpleOnboarding(true);
+    }
+  }, [dateTermsAccepted, onboardingCompleted, showSimpleOnboarding]);
+
+  // Watch for trigger from AppHeader
+  React.useEffect(() => {
+    if (triggerOnboarding) {
+      setShowSimpleOnboarding(true);
+      setTriggerOnboarding(false);
+    }
+  }, [triggerOnboarding, setTriggerOnboarding]);
+
   // Memoize drawer toggle callback to prevent AppHeader re-renders
   const drawerToggleCallback = React.useCallback(
     () => setDrawerIsVisible((prev) => !prev),
@@ -218,6 +242,12 @@ function AppViewContent() {
               onClose={() => setAuthView(null)}
             />
           )}
+
+          {/* Onboarding Flow - shows globally until terms are accepted */}
+          <SimpleOnboardingFlow
+            visible={showSimpleOnboarding}
+            onClose={() => setShowSimpleOnboarding(false)}
+          />
         </Suspense>
       </View>
     </View>
diff --git a/views/new/NextGenProjectsView.tsx b/views/new/NextGenProjectsView.tsx
index 90cc02b2e..9271b7847 100644
--- a/views/new/NextGenProjectsView.tsx
+++ b/views/new/NextGenProjectsView.tsx
@@ -551,9 +551,6 @@ export default function NextGenProjectsView() {
     !isAuthenticated || activeTab === 'all' ? allProjects : myProjectsQuery;
   const { data: projectData, isLoading } = currentQuery;
 
-  const onboardingDismissed = useLocalStore(
-    (state) => state.onboardingDismissed
-  );
   const dateTermsAccepted = useLocalStore((state) => state.dateTermsAccepted);
   const triggerOnboarding = useLocalStore((state) => state.triggerOnboarding);
   const setTriggerOnboarding = useLocalStore(
@@ -562,12 +559,17 @@ export default function NextGenProjectsView() {
   const [showSimpleOnboarding, setShowSimpleOnboarding] = React.useState(false);
   const { goToProject } = useAppNavigation();
 
-  // Auto-show onboarding only if terms have NOT been accepted and not dismissed
+  // Show onboarding AFTER terms are accepted (one-time walkthrough)
+  // This ensures users see the walkthrough after accepting terms
+  const onboardingCompleted = useLocalStore(
+    (state) => state.onboardingCompleted
+  );
   React.useEffect(() => {
-    if (!dateTermsAccepted && !onboardingDismissed && !showSimpleOnboarding) {
+    // Show onboarding if terms are accepted but onboarding hasn't been completed
+    if (dateTermsAccepted && !onboardingCompleted && !showSimpleOnboarding) {
       setShowSimpleOnboarding(true);
     }
-  }, [dateTermsAccepted, onboardingDismissed, showSimpleOnboarding]);
+  }, [dateTermsAccepted, onboardingCompleted, showSimpleOnboarding]);
 
   // Watch for trigger from AppHeader
   React.useEffect(() => {
diff --git a/views/new/SimpleOnboardingFlow.tsx b/views/new/SimpleOnboardingFlow.tsx
index 00fa046ca..358259da6 100644
--- a/views/new/SimpleOnboardingFlow.tsx
+++ b/views/new/SimpleOnboardingFlow.tsx
@@ -14,6 +14,7 @@ import {
   UserPlusIcon,
   XIcon
 } from 'lucide-react-native';
+import { PortalHost } from '@rn-primitives/portal';
 import React, { useState } from 'react';
 import {
   KeyboardAvoidingView,
@@ -53,15 +54,20 @@ export function SimpleOnboardingFlow({
 }: SimpleOnboardingFlowProps) {
   const { t } = useLocalization();
   const insets = useSafeAreaInsets();
-  const setOnboardingDismissed = useLocalStore(
-    (state) => state.setOnboardingDismissed
-  );
+  // Always start with vision step - language selection happens on terms page
   const [step, setStep] = useState<OnboardingStep>('vision');
   const [projectType, setProjectType] = useState<'bible' | 'other' | null>(
     null
   );
   const [showBibleChapters, setShowBibleChapters] = useState(false);
 
+  // Reset step when modal opens - always start with vision
+  React.useEffect(() => {
+    if (visible) {
+      setStep('vision');
+    }
+  }, [visible]);
+
   const handleNext = () => {
     if (step === 'vision') {
       setStep('create-project-simple');
@@ -113,11 +119,15 @@ export function SimpleOnboardingFlow({
     }
   };
 
+  const setOnboardingCompleted = useLocalStore((state) => state.setOnboardingCompleted);
+  
   const handleClose = () => {
+    // Reset to initial step (vision)
     setStep('vision');
     setProjectType(null);
     setShowBibleChapters(false);
-    setOnboardingDismissed(true);
+    // Mark onboarding as completed so it doesn't show again
+    setOnboardingCompleted(true);
     onClose();
   };
 
@@ -150,6 +160,9 @@ export function SimpleOnboardingFlow({
         className="flex-1 bg-background"
         style={{ paddingTop: insets.top }}
       >
+        {/* PortalHost for Select dropdowns inside Modal */}
+        <PortalHost />
+        
         {/* Progress Indicator */}
         <OnboardingProgressIndicator currentStep={step} />
 
diff --git a/views/new/onboarding/VisionFlowAnimation.tsx b/views/new/onboarding/VisionFlowAnimation.tsx
index 3dc719720..2d96ab462 100644
--- a/views/new/onboarding/VisionFlowAnimation.tsx
+++ b/views/new/onboarding/VisionFlowAnimation.tsx
@@ -316,10 +316,14 @@ export function VisionFlowAnimation() {
 
   return (
     <View className="relative h-24 w-full flex-row items-center justify-center px-8">
-      {/* Globe Icon (left) */}
+      {/* Globe Icon (left) with background circle */}
       <Animated.View style={globeStyle}>
-        <View className="h-14 w-14 items-center justify-center rounded-full bg-primary/10">
-          <Icon as={GlobeIcon} size={28} className="text-primary" />
+        <View className="relative h-20 w-20 items-center justify-center">
+          {/* Semi-transparent background circle */}
+          <View className="absolute h-20 w-20 rounded-full bg-background/60 border border-border/50" />
+          <View className="relative h-14 w-14 items-center justify-center rounded-full bg-primary/10">
+            <Icon as={GlobeIcon} size={28} className="text-primary" />
+          </View>
         </View>
       </Animated.View>
 
@@ -348,10 +352,14 @@ export function VisionFlowAnimation() {
         </Animated.View>
       </View>
 
-      {/* Users Icon (right) */}
+      {/* Users Icon (right) with background circle */}
       <Animated.View style={usersStyle}>
-        <View className="h-14 w-14 items-center justify-center rounded-full bg-primary/10">
-          <Icon as={UsersIcon} size={28} className="text-primary" />
+        <View className="relative h-20 w-20 items-center justify-center">
+          {/* Semi-transparent background circle */}
+          <View className="absolute h-20 w-20 rounded-full bg-background/60 border border-border/50" />
+          <View className="relative h-14 w-14 items-center justify-center rounded-full bg-primary/10">
+            <Icon as={UsersIcon} size={28} className="text-primary" />
+          </View>
         </View>
       </Animated.View>
     </View>

From dad1d9467f2c9b7bd994440544267f0ab5a31b9a Mon Sep 17 00:00:00 2001
From: ryderwishart <ryderwishart@gmail.com>
Date: Sat, 15 Nov 2025 10:03:39 -0700
Subject: [PATCH 07/11] Refactor SimpleOnboardingFlow layout and improve button
 components

- Replaced Card components with Button components for project type selection to enhance user interaction.
- Adjusted layout for better responsiveness and visual appeal.
- Cleaned up code formatting for improved readability.
---
 views/new/SimpleOnboardingFlow.tsx | 106 +++++++++--------------------
 1 file changed, 33 insertions(+), 73 deletions(-)

diff --git a/views/new/SimpleOnboardingFlow.tsx b/views/new/SimpleOnboardingFlow.tsx
index 358259da6..aca39d80c 100644
--- a/views/new/SimpleOnboardingFlow.tsx
+++ b/views/new/SimpleOnboardingFlow.tsx
@@ -6,6 +6,7 @@ import { Icon } from '@/components/ui/icon';
 import { Text } from '@/components/ui/text';
 import { useLocalization } from '@/hooks/useLocalization';
 import { useLocalStore } from '@/store/localStore';
+import { PortalHost } from '@rn-primitives/portal';
 import {
   BookOpenIcon,
   FolderIcon,
@@ -14,7 +15,6 @@ import {
   UserPlusIcon,
   XIcon
 } from 'lucide-react-native';
-import { PortalHost } from '@rn-primitives/portal';
 import React, { useState } from 'react';
 import {
   KeyboardAvoidingView,
@@ -119,8 +119,10 @@ export function SimpleOnboardingFlow({
     }
   };
 
-  const setOnboardingCompleted = useLocalStore((state) => state.setOnboardingCompleted);
-  
+  const setOnboardingCompleted = useLocalStore(
+    (state) => state.setOnboardingCompleted
+  );
+
   const handleClose = () => {
     // Reset to initial step (vision)
     setStep('vision');
@@ -162,7 +164,7 @@ export function SimpleOnboardingFlow({
       >
         {/* PortalHost for Select dropdowns inside Modal */}
         <PortalHost />
-        
+
         {/* Progress Indicator */}
         <OnboardingProgressIndicator currentStep={step} />
 
@@ -214,76 +216,34 @@ export function SimpleOnboardingFlow({
               </AnimatedStepContent>
 
               <AnimatedStepContent delay={200}>
-                <View className="w-full gap-4">
-                  {/* Bible Project Card */}
-                  <Card className="w-full">
-                    <Pressable
-                      onPress={() => handleProjectTypeSelect('bible')}
-                      accessibilityRole="button"
-                    >
-                      <View className="flex-row items-center p-6">
-                        <View className="mr-6 h-16 w-16 items-center justify-center rounded-lg bg-muted">
-                          <Icon
-                            as={BookOpenIcon}
-                            size={32}
-                            className="text-primary"
-                          />
-                        </View>
-                        <View className="flex-1 flex-col items-start">
-                          <Text
-                            variant="h4"
-                            className="mb-1"
-                            numberOfLines={1}
-                            ellipsizeMode="tail"
-                          >
-                            {t('onboardingBible')}
-                          </Text>
-                          <Text
-                            className="text-sm text-muted-foreground"
-                            numberOfLines={2}
-                            ellipsizeMode="tail"
-                          >
-                            {t('onboardingCreateProjectDescription')}
-                          </Text>
-                        </View>
-                      </View>
-                    </Pressable>
-                  </Card>
+                <View className="w-full flex-row gap-4">
+                  {/* Bible Project Button */}
+                  <Button
+                    variant="outline"
+                    className="min-h-48 flex-1 flex-col gap-3 p-6"
+                    onPress={() => handleProjectTypeSelect('bible')}
+                  >
+                    <Icon
+                      as={BookOpenIcon}
+                      size={48}
+                      className="text-primary"
+                    />
+                    <Text variant="h4" className="text-center">
+                      {t('onboardingBible')}
+                    </Text>
+                  </Button>
 
-                  {/* Other Project Card */}
-                  <Card className="w-full">
-                    <Pressable
-                      onPress={() => handleProjectTypeSelect('other')}
-                      accessibilityRole="button"
-                    >
-                      <View className="flex-row items-center p-6">
-                        <View className="mr-6 h-16 w-16 items-center justify-center rounded-lg bg-muted">
-                          <Icon
-                            as={FolderIcon}
-                            size={32}
-                            className="text-primary"
-                          />
-                        </View>
-                        <View className="flex-1 flex-col items-start">
-                          <Text
-                            variant="h4"
-                            className="mb-1"
-                            numberOfLines={1}
-                            ellipsizeMode="tail"
-                          >
-                            {t('onboardingOther')}
-                          </Text>
-                          <Text
-                            className="text-sm text-muted-foreground"
-                            numberOfLines={2}
-                            ellipsizeMode="tail"
-                          >
-                            {t('onboardingCreateProjectDescription')}
-                          </Text>
-                        </View>
-                      </View>
-                    </Pressable>
-                  </Card>
+                  {/* Other Project Button */}
+                  <Button
+                    variant="outline"
+                    className="min-h-48 flex-1 flex-col gap-3 p-6"
+                    onPress={() => handleProjectTypeSelect('other')}
+                  >
+                    <Icon as={FolderIcon} size={48} className="text-primary" />
+                    <Text variant="h4" className="text-center">
+                      {t('onboardingOther')}
+                    </Text>
+                  </Button>
                 </View>
               </AnimatedStepContent>
             </View>

From 7eceb338d8cf7ac1affcf73273e49afa51b1847b Mon Sep 17 00:00:00 2001
From: ryderwishart <ryderwishart@gmail.com>
Date: Sat, 15 Nov 2025 10:31:09 -0700
Subject: [PATCH 08/11] =?UTF-8?q?Use=20=E2=80=98store=E2=80=99=20distribut?=
 =?UTF-8?q?ion=20for=20ios=20builds=20(keep=20android=20at=20=E2=80=98inte?=
 =?UTF-8?q?rnal=E2=80=99)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 eas.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/eas.json b/eas.json
index 0f0027436..e70921b96 100644
--- a/eas.json
+++ b/eas.json
@@ -24,6 +24,9 @@
       "channel": "preview",
       "environment": "preview",
       "distribution": "internal",
+      "ios": {
+        "distribution": "store"
+      },
       "env": {
         "EXPO_PUBLIC_SITE_URL": "https://langquest.org",
         "EXPO_PUBLIC_APP_VARIANT": "preview"

From 27b53bf73a16b01cb997850ecf7160cc590adb55 Mon Sep 17 00:00:00 2001
From: ryderwishart <ryderwishart@gmail.com>
Date: Sat, 15 Nov 2025 22:48:19 -0700
Subject: [PATCH 09/11] Enhance onboarding state management and visibility

- Added `onboardingIsOpen` state and corresponding setter to manage onboarding modal visibility.
- Updated `SimpleOnboardingFlow` to reflect visibility changes and reset state upon closing.
- Refactored `AppView` and `NextGenProjectsView` to utilize new onboarding state for improved user experience.
- Removed deprecated onboarding state handling from `NextGenProjectsView` to streamline logic.
---
 store/localStore.ts                           |  10 +-
 views/AppView.tsx                             |  52 ++++--
 views/new/NextGenProjectsView.tsx             |  45 +----
 views/new/SimpleOnboardingFlow.tsx            |  23 ++-
 views/new/onboarding/AnimatedStepContent.tsx  |   2 -
 .../new/onboarding/BibleBookListAnimation.tsx |  23 ++-
 views/new/onboarding/BibleChapterGrid.tsx     | 158 +++++++++++++-----
 views/new/onboarding/InviteAnimation.tsx      |  14 +-
 .../onboarding/ProjectCreationAnimation.tsx   |   5 +-
 views/new/onboarding/QuestListAnimation.tsx   |  14 +-
 views/new/onboarding/RecordingAnimation.tsx   |   1 -
 11 files changed, 221 insertions(+), 126 deletions(-)

diff --git a/store/localStore.ts b/store/localStore.ts
index 42b0d01ac..0f9a943eb 100644
--- a/store/localStore.ts
+++ b/store/localStore.ts
@@ -156,6 +156,8 @@ export interface LocalState {
   setOnboardingCompleted: (completed: boolean) => void;
   triggerOnboarding: boolean;
   setTriggerOnboarding: (trigger: boolean) => void;
+  onboardingIsOpen: boolean;
+  setOnboardingIsOpen: (isOpen: boolean) => void;
 
   setProjectSourceFilter: (filter: string) => void;
   setProjectTargetFilter: (filter: string) => void;
@@ -271,11 +273,15 @@ export const useLocalStore = create<LocalState>()(
 
       // Onboarding dismissal tracking
       onboardingDismissed: false,
-      setOnboardingDismissed: (dismissed) => set({ onboardingDismissed: dismissed }),
+      setOnboardingDismissed: (dismissed) =>
+        set({ onboardingDismissed: dismissed }),
       onboardingCompleted: false,
-      setOnboardingCompleted: (completed) => set({ onboardingCompleted: completed }),
+      setOnboardingCompleted: (completed) =>
+        set({ onboardingCompleted: completed }),
       triggerOnboarding: false,
       setTriggerOnboarding: (trigger) => set({ triggerOnboarding: trigger }),
+      onboardingIsOpen: false,
+      setOnboardingIsOpen: (isOpen) => set({ onboardingIsOpen: isOpen }),
 
       setAnalyticsOptOut: (optOut) => set({ analyticsOptOut: optOut }),
       setTheme: (theme) => {
diff --git a/views/AppView.tsx b/views/AppView.tsx
index 3d36867d1..b5597fb43 100644
--- a/views/AppView.tsx
+++ b/views/AppView.tsx
@@ -40,8 +40,10 @@ const NextGenProjectsView = React.lazy(
 const ProjectDirectoryView = React.lazy(
   () => import('@/views/new/ProjectDirectoryView')
 );
-const SimpleOnboardingFlow = React.lazy(
-  () => import('@/views/new/SimpleOnboardingFlow').then(module => ({ default: module.SimpleOnboardingFlow }))
+const SimpleOnboardingFlow = React.lazy(() =>
+  import('@/views/new/SimpleOnboardingFlow').then((module) => ({
+    default: module.SimpleOnboardingFlow
+  }))
 );
 
 // Common UI Components
@@ -65,14 +67,19 @@ function AppViewContent() {
   const { isAuthenticated } = useAuth();
   const authView = useLocalStore((state) => state.authView);
   const setAuthView = useLocalStore((state) => state.setAuthView);
-  const setTriggerOnboarding = useLocalStore((state) => state.setTriggerOnboarding);
+  const setTriggerOnboarding = useLocalStore(
+    (state) => state.setTriggerOnboarding
+  );
   const dateTermsAccepted = useLocalStore((state) => state.dateTermsAccepted);
   const triggerOnboarding = useLocalStore((state) => state.triggerOnboarding);
+  const onboardingIsOpen = useLocalStore((state) => state.onboardingIsOpen);
+  const setOnboardingIsOpen = useLocalStore(
+    (state) => state.setOnboardingIsOpen
+  );
   const [drawerIsVisible, setDrawerIsVisible] = useState(false);
   const [deferredView, setDeferredView] = useState(currentView);
-  const [showSimpleOnboarding, setShowSimpleOnboarding] = React.useState(false);
   const { isCloudLoading } = useCloudLoading();
-  
+
   // Handler for onboarding button in header (only show on projects view)
   const handleOnboardingPress = React.useCallback(() => {
     if (currentView === 'projects') {
@@ -82,21 +89,34 @@ function AppViewContent() {
 
   // Show onboarding AFTER terms are accepted (one-time walkthrough)
   // This ensures users see the walkthrough after accepting terms
-  const onboardingCompleted = useLocalStore((state) => state.onboardingCompleted);
+  const onboardingCompleted = useLocalStore(
+    (state) => state.onboardingCompleted
+  );
   React.useEffect(() => {
     // Show onboarding if terms are accepted but onboarding hasn't been completed
-    if (dateTermsAccepted && !onboardingCompleted && !showSimpleOnboarding) {
-      setShowSimpleOnboarding(true);
+    // Only set flag if not already open to prevent duplicate modals
+    if (dateTermsAccepted && !onboardingCompleted && !onboardingIsOpen) {
+      setOnboardingIsOpen(true);
     }
-  }, [dateTermsAccepted, onboardingCompleted, showSimpleOnboarding]);
+  }, [
+    dateTermsAccepted,
+    onboardingCompleted,
+    onboardingIsOpen,
+    setOnboardingIsOpen
+  ]);
 
   // Watch for trigger from AppHeader
   React.useEffect(() => {
-    if (triggerOnboarding) {
-      setShowSimpleOnboarding(true);
+    if (triggerOnboarding && !onboardingIsOpen) {
+      setOnboardingIsOpen(true);
       setTriggerOnboarding(false);
     }
-  }, [triggerOnboarding, setTriggerOnboarding]);
+  }, [
+    triggerOnboarding,
+    setTriggerOnboarding,
+    onboardingIsOpen,
+    setOnboardingIsOpen
+  ]);
 
   // Memoize drawer toggle callback to prevent AppHeader re-renders
   const drawerToggleCallback = React.useCallback(
@@ -218,7 +238,9 @@ function AppViewContent() {
           drawerToggleCallback={drawerToggleCallback}
           isCloudLoading={isCloudLoading}
           isNavigating={isNavigating}
-          onOnboardingPress={currentView === 'projects' ? handleOnboardingPress : undefined}
+          onOnboardingPress={
+            currentView === 'projects' ? handleOnboardingPress : undefined
+          }
         />
 
         {/* Debug Controls (DEV only) - uncomment to test OTA updates */}
@@ -245,8 +267,8 @@ function AppViewContent() {
 
           {/* Onboarding Flow - shows globally until terms are accepted */}
           <SimpleOnboardingFlow
-            visible={showSimpleOnboarding}
-            onClose={() => setShowSimpleOnboarding(false)}
+            visible={onboardingIsOpen}
+            onClose={() => setOnboardingIsOpen(false)}
           />
         </Suspense>
       </View>
diff --git a/views/new/NextGenProjectsView.tsx b/views/new/NextGenProjectsView.tsx
index 9271b7847..d739e35f8 100644
--- a/views/new/NextGenProjectsView.tsx
+++ b/views/new/NextGenProjectsView.tsx
@@ -37,7 +37,6 @@ import {
 import React, { useEffect } from 'react';
 import { ActivityIndicator, useWindowDimensions, View } from 'react-native';
 import { ProjectListItem } from './ProjectListItem';
-import { SimpleOnboardingFlow } from './SimpleOnboardingFlow';
 
 // New imports for bottom sheet + form
 import { LanguageCombobox } from '@/components/language-combobox';
@@ -551,34 +550,8 @@ export default function NextGenProjectsView() {
     !isAuthenticated || activeTab === 'all' ? allProjects : myProjectsQuery;
   const { data: projectData, isLoading } = currentQuery;
 
-  const dateTermsAccepted = useLocalStore((state) => state.dateTermsAccepted);
-  const triggerOnboarding = useLocalStore((state) => state.triggerOnboarding);
-  const setTriggerOnboarding = useLocalStore(
-    (state) => state.setTriggerOnboarding
-  );
-  const [showSimpleOnboarding, setShowSimpleOnboarding] = React.useState(false);
   const { goToProject } = useAppNavigation();
 
-  // Show onboarding AFTER terms are accepted (one-time walkthrough)
-  // This ensures users see the walkthrough after accepting terms
-  const onboardingCompleted = useLocalStore(
-    (state) => state.onboardingCompleted
-  );
-  React.useEffect(() => {
-    // Show onboarding if terms are accepted but onboarding hasn't been completed
-    if (dateTermsAccepted && !onboardingCompleted && !showSimpleOnboarding) {
-      setShowSimpleOnboarding(true);
-    }
-  }, [dateTermsAccepted, onboardingCompleted, showSimpleOnboarding]);
-
-  // Watch for trigger from AppHeader
-  React.useEffect(() => {
-    if (triggerOnboarding) {
-      setShowSimpleOnboarding(true);
-      setTriggerOnboarding(false);
-    }
-  }, [triggerOnboarding, setTriggerOnboarding]);
-
   // Get the first project for onboarding navigation
   const firstProject = React.useMemo(() => {
     if (Array.isArray(projectData) && projectData.length > 0) {
@@ -693,8 +666,8 @@ export default function NextGenProjectsView() {
 
   const dimensions = useWindowDimensions();
 
-  // Handlers for onboarding flow
-  const handleOnboardingCreateProject = () => {
+  // Handlers for onboarding flow (kept for potential future use)
+  const _handleOnboardingCreateProject = () => {
     if (currentUser) {
       setIsCreateOpen(true);
     } else {
@@ -703,7 +676,7 @@ export default function NextGenProjectsView() {
     }
   };
 
-  const handleOnboardingCreateQuest = () => {
+  const _handleOnboardingCreateQuest = () => {
     if (firstProject) {
       goToProject({
         id: firstProject.id,
@@ -714,7 +687,7 @@ export default function NextGenProjectsView() {
     }
   };
 
-  const handleOnboardingStartRecording = () => {
+  const _handleOnboardingStartRecording = () => {
     if (firstProject) {
       // Navigate to project - user can then navigate to a quest and start recording
       goToProject({
@@ -726,7 +699,7 @@ export default function NextGenProjectsView() {
     }
   };
 
-  const handleOnboardingInviteCollaborators = () => {
+  const _handleOnboardingInviteCollaborators = () => {
     if (firstProject) {
       goToProject({
         id: firstProject.id,
@@ -739,14 +712,6 @@ export default function NextGenProjectsView() {
 
   return (
     <>
-      <SimpleOnboardingFlow
-        visible={showSimpleOnboarding}
-        onClose={() => setShowSimpleOnboarding(false)}
-        onCreateProject={handleOnboardingCreateProject}
-        onCreateQuest={handleOnboardingCreateQuest}
-        onStartRecording={handleOnboardingStartRecording}
-        onInviteCollaborators={handleOnboardingInviteCollaborators}
-      />
       <Drawer
         open={isCreateOpen}
         onOpenChange={(open) => {
diff --git a/views/new/SimpleOnboardingFlow.tsx b/views/new/SimpleOnboardingFlow.tsx
index aca39d80c..6a0fe07d4 100644
--- a/views/new/SimpleOnboardingFlow.tsx
+++ b/views/new/SimpleOnboardingFlow.tsx
@@ -122,6 +122,20 @@ export function SimpleOnboardingFlow({
   const setOnboardingCompleted = useLocalStore(
     (state) => state.setOnboardingCompleted
   );
+  const setOnboardingIsOpen = useLocalStore(
+    (state) => state.setOnboardingIsOpen
+  );
+
+  // Mark as open when this instance becomes visible
+  // The parent component already prevents multiple instances by checking onboardingIsOpen
+  // before setting showSimpleOnboarding to true
+  React.useEffect(() => {
+    if (visible) {
+      setOnboardingIsOpen(true);
+    } else {
+      setOnboardingIsOpen(false);
+    }
+  }, [visible, setOnboardingIsOpen]);
 
   const handleClose = () => {
     // Reset to initial step (vision)
@@ -130,9 +144,16 @@ export function SimpleOnboardingFlow({
     setShowBibleChapters(false);
     // Mark onboarding as completed so it doesn't show again
     setOnboardingCompleted(true);
+    // Mark as closed in store
+    setOnboardingIsOpen(false);
     onClose();
   };
 
+  // Guard: Don't render if not visible
+  if (!visible) {
+    return null;
+  }
+
   const handleAction = () => {
     // Just continue to next step - buttons are informational, not action buttons
     handleNext();
@@ -148,8 +169,6 @@ export function SimpleOnboardingFlow({
     }
   };
 
-  if (!visible) return null;
-
   return (
     <Modal
       visible={visible}
diff --git a/views/new/onboarding/AnimatedStepContent.tsx b/views/new/onboarding/AnimatedStepContent.tsx
index b77c124bd..b9c36d2dc 100644
--- a/views/new/onboarding/AnimatedStepContent.tsx
+++ b/views/new/onboarding/AnimatedStepContent.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import { View } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -46,4 +45,3 @@ export function AnimatedStepContent({
 
   return <Animated.View style={animatedStyle}>{children}</Animated.View>;
 }
-
diff --git a/views/new/onboarding/BibleBookListAnimation.tsx b/views/new/onboarding/BibleBookListAnimation.tsx
index 6e0675b62..fae5cf6c7 100644
--- a/views/new/onboarding/BibleBookListAnimation.tsx
+++ b/views/new/onboarding/BibleBookListAnimation.tsx
@@ -1,7 +1,8 @@
+import { Text } from '@/components/ui/text';
 import { BOOK_ICON_MAP } from '@/utils/BOOK_GRAPHICS';
 import { useThemeColor } from '@/utils/styleUtils';
 import React, { useEffect } from 'react';
-import { Image, View } from 'react-native';
+import { Image } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -9,7 +10,6 @@ import Animated, {
   withSpring,
   withTiming
 } from 'react-native-reanimated';
-import { Text } from '@/components/ui/text';
 
 interface BibleBookListAnimationProps {
   showChapters?: boolean;
@@ -22,7 +22,7 @@ export function BibleBookListAnimation({
 }: BibleBookListAnimationProps) {
   const primaryColor = useThemeColor('primary');
   const secondaryColor = useThemeColor('chart-2');
-  
+
   const book1X = useSharedValue(-30);
   const book2X = useSharedValue(-30);
   const book1Opacity = useSharedValue(0);
@@ -31,10 +31,16 @@ export function BibleBookListAnimation({
   useEffect(() => {
     // Animate books sliding in
     book1Opacity.value = withDelay(200, withTiming(1, { duration: 400 }));
-    book1X.value = withDelay(200, withSpring(0, { damping: 12, stiffness: 100 }));
+    book1X.value = withDelay(
+      200,
+      withSpring(0, { damping: 12, stiffness: 100 })
+    );
 
     book2Opacity.value = withDelay(400, withTiming(1, { duration: 400 }));
-    book2X.value = withDelay(400, withSpring(0, { damping: 12, stiffness: 100 }));
+    book2X.value = withDelay(
+      400,
+      withSpring(0, { damping: 12, stiffness: 100 })
+    );
   }, [book1X, book2X, book1Opacity, book2Opacity]);
 
   const book1Style = useAnimatedStyle(() => {
@@ -54,7 +60,7 @@ export function BibleBookListAnimation({
   const genesisElement = (
     <Animated.View style={book1Style} className="flex-row items-center gap-3">
       <Image
-        source={BOOK_ICON_MAP['gen']}
+        source={BOOK_ICON_MAP.gen}
         style={{
           width: 24,
           height: 24,
@@ -70,11 +76,11 @@ export function BibleBookListAnimation({
     <>
       {/* Genesis - can be wrapped by parent if needed */}
       {renderGenesis ? renderGenesis(genesisElement) : genesisElement}
-      
+
       {/* Matthew */}
       <Animated.View style={book2Style} className="flex-row items-center gap-3">
         <Image
-          source={BOOK_ICON_MAP['mat']}
+          source={BOOK_ICON_MAP.mat}
           style={{
             width: 24,
             height: 24,
@@ -87,4 +93,3 @@ export function BibleBookListAnimation({
     </>
   );
 }
-
diff --git a/views/new/onboarding/BibleChapterGrid.tsx b/views/new/onboarding/BibleChapterGrid.tsx
index cb878e3a2..a46ff6a40 100644
--- a/views/new/onboarding/BibleChapterGrid.tsx
+++ b/views/new/onboarding/BibleChapterGrid.tsx
@@ -15,67 +15,148 @@ interface BibleChapterGridProps {
 
 export function BibleChapterGrid({ visible }: BibleChapterGridProps) {
   // Show chapters 1-6 in a grid, then "..."
-  const chapters = [1, 2, 3, 4, 5, 6];
+  const chapters = React.useMemo(() => [1, 2, 3, 4, 5, 6], []);
+
+  // Hooks must be called at the top level, not inside useMemo
+  const chapter1Opacity = useSharedValue(0);
+  const chapter2Opacity = useSharedValue(0);
+  const chapter3Opacity = useSharedValue(0);
+  const chapter4Opacity = useSharedValue(0);
+  const chapter5Opacity = useSharedValue(0);
+  const chapter6Opacity = useSharedValue(0);
+
+  const chapter1Scale = useSharedValue(0.8);
+  const chapter2Scale = useSharedValue(0.8);
+  const chapter3Scale = useSharedValue(0.8);
+  const chapter4Scale = useSharedValue(0.8);
+  const chapter5Scale = useSharedValue(0.8);
+  const chapter6Scale = useSharedValue(0.8);
+
+  const dotsOpacity = useSharedValue(0);
+
+  // Create arrays for easier iteration - memoized to avoid recreating on every render
   const chapterOpacities = React.useMemo(
-    () => chapters.map(() => useSharedValue(0)),
-    []
+    () => [
+      chapter1Opacity,
+      chapter2Opacity,
+      chapter3Opacity,
+      chapter4Opacity,
+      chapter5Opacity,
+      chapter6Opacity
+    ],
+    [
+      chapter1Opacity,
+      chapter2Opacity,
+      chapter3Opacity,
+      chapter4Opacity,
+      chapter5Opacity,
+      chapter6Opacity
+    ]
   );
   const chapterScales = React.useMemo(
-    () => chapters.map(() => useSharedValue(0.8)),
-    []
+    () => [
+      chapter1Scale,
+      chapter2Scale,
+      chapter3Scale,
+      chapter4Scale,
+      chapter5Scale,
+      chapter6Scale
+    ],
+    [
+      chapter1Scale,
+      chapter2Scale,
+      chapter3Scale,
+      chapter4Scale,
+      chapter5Scale,
+      chapter6Scale
+    ]
   );
-  const dotsOpacity = useSharedValue(0);
 
   useEffect(() => {
     if (visible) {
       // Animate chapters appearing one by one
       chapters.forEach((_, index) => {
-        chapterOpacities[index].value = withDelay(
-          200 + index * 50,
-          withTiming(1, { duration: 300 })
-        );
-        chapterScales[index].value = withDelay(
-          200 + index * 50,
-          withSpring(1, { damping: 10, stiffness: 100 })
-        );
+        const opacity = chapterOpacities[index];
+        const scale = chapterScales[index];
+        if (opacity && scale) {
+          opacity.value = withDelay(
+            200 + index * 50,
+            withTiming(1, { duration: 300 })
+          );
+          scale.value = withDelay(
+            200 + index * 50,
+            withSpring(1, { damping: 10, stiffness: 100 })
+          );
+        }
       });
       // Animate dots appearing last
       dotsOpacity.value = withDelay(600, withTiming(1, { duration: 300 }));
     } else {
       // Reset when hidden
       chapters.forEach((_, index) => {
-        chapterOpacities[index].value = 0;
-        chapterScales[index].value = 0.8;
+        const opacity = chapterOpacities[index];
+        const scale = chapterScales[index];
+        if (opacity && scale) {
+          opacity.value = 0;
+          scale.value = 0.8;
+        }
       });
       dotsOpacity.value = 0;
     }
-  }, [visible, chapterOpacities, chapterScales, dotsOpacity]);
+  }, [visible, chapterOpacities, chapterScales, dotsOpacity, chapters]);
+
+  // Create animated styles at the top level
+  const chapter1Style = useAnimatedStyle(() => ({
+    opacity: chapter1Opacity.value,
+    transform: [{ scale: chapter1Scale.value }]
+  }));
+  const chapter2Style = useAnimatedStyle(() => ({
+    opacity: chapter2Opacity.value,
+    transform: [{ scale: chapter2Scale.value }]
+  }));
+  const chapter3Style = useAnimatedStyle(() => ({
+    opacity: chapter3Opacity.value,
+    transform: [{ scale: chapter3Scale.value }]
+  }));
+  const chapter4Style = useAnimatedStyle(() => ({
+    opacity: chapter4Opacity.value,
+    transform: [{ scale: chapter4Scale.value }]
+  }));
+  const chapter5Style = useAnimatedStyle(() => ({
+    opacity: chapter5Opacity.value,
+    transform: [{ scale: chapter5Scale.value }]
+  }));
+  const chapter6Style = useAnimatedStyle(() => ({
+    opacity: chapter6Opacity.value,
+    transform: [{ scale: chapter6Scale.value }]
+  }));
+  const dotsStyle = useAnimatedStyle(() => ({
+    opacity: dotsOpacity.value
+  }));
+
+  const chapterStyles = [
+    chapter1Style,
+    chapter2Style,
+    chapter3Style,
+    chapter4Style,
+    chapter5Style,
+    chapter6Style
+  ];
 
   return (
     <View className="w-full gap-3">
       <View className="flex-row flex-wrap gap-2">
-        {chapters.map((chapterNum, index) => {
-          const chapterStyle = useAnimatedStyle(() => {
-            return {
-              opacity: chapterOpacities[index].value,
-              transform: [{ scale: chapterScales[index].value }]
-            };
-          });
-
-          return (
-            <Animated.View
-              key={chapterNum}
-              style={chapterStyle}
-              className="h-12 w-12 items-center justify-center rounded-lg border border-border bg-muted"
-            >
-              <Text className="text-sm font-semibold">{chapterNum}</Text>
-            </Animated.View>
-          );
-        })}
+        {chapters.map((chapterNum, index) => (
+          <Animated.View
+            key={chapterNum}
+            style={chapterStyles[index]}
+            className="h-12 w-12 items-center justify-center rounded-lg border border-border bg-muted"
+          >
+            <Text className="text-sm font-semibold">{chapterNum}</Text>
+          </Animated.View>
+        ))}
         <Animated.View
-          style={useAnimatedStyle(() => ({
-            opacity: dotsOpacity.value
-          }))}
+          style={dotsStyle}
           className="h-12 w-12 items-center justify-center"
         >
           <Text className="text-lg text-muted-foreground">...</Text>
@@ -84,4 +165,3 @@ export function BibleChapterGrid({ visible }: BibleChapterGridProps) {
     </View>
   );
 }
-
diff --git a/views/new/onboarding/InviteAnimation.tsx b/views/new/onboarding/InviteAnimation.tsx
index d0ad018ae..158e1a934 100644
--- a/views/new/onboarding/InviteAnimation.tsx
+++ b/views/new/onboarding/InviteAnimation.tsx
@@ -3,12 +3,9 @@ import { UserIcon, UserPlusIcon } from 'lucide-react-native';
 import React, { useEffect } from 'react';
 import { View } from 'react-native';
 import Animated, {
-  Easing,
   useAnimatedStyle,
   useSharedValue,
   withDelay,
-  withRepeat,
-  withSequence,
   withSpring,
   withTiming
 } from 'react-native-reanimated';
@@ -23,12 +20,18 @@ export function InviteAnimation() {
   useEffect(() => {
     // Simple: two users slide in with plus icon between
     user1Opacity.value = withDelay(200, withTiming(1, { duration: 400 }));
-    user1X.value = withDelay(200, withSpring(0, { damping: 12, stiffness: 100 }));
+    user1X.value = withDelay(
+      200,
+      withSpring(0, { damping: 12, stiffness: 100 })
+    );
 
     plusOpacity.value = withDelay(400, withTiming(1, { duration: 300 }));
 
     user2Opacity.value = withDelay(500, withTiming(1, { duration: 400 }));
-    user2X.value = withDelay(500, withSpring(0, { damping: 12, stiffness: 100 }));
+    user2X.value = withDelay(
+      500,
+      withSpring(0, { damping: 12, stiffness: 100 })
+    );
   }, [user1X, user2X, plusOpacity, user1Opacity, user2Opacity]);
 
   const user1Style = useAnimatedStyle(() => {
@@ -69,4 +72,3 @@ export function InviteAnimation() {
     </View>
   );
 }
-
diff --git a/views/new/onboarding/ProjectCreationAnimation.tsx b/views/new/onboarding/ProjectCreationAnimation.tsx
index 40b43d2ce..0185d31bf 100644
--- a/views/new/onboarding/ProjectCreationAnimation.tsx
+++ b/views/new/onboarding/ProjectCreationAnimation.tsx
@@ -1,15 +1,13 @@
 import { Icon } from '@/components/ui/icon';
-import { FolderPenIcon, PlusIcon } from 'lucide-react-native';
+import { FolderPenIcon } from 'lucide-react-native';
 import React, { useEffect } from 'react';
 import { View } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
   useSharedValue,
-  withDelay,
   withRepeat,
   withSequence,
-  withSpring,
   withTiming
 } from 'react-native-reanimated';
 
@@ -51,4 +49,3 @@ export function ProjectCreationAnimation() {
     </Animated.View>
   );
 }
-
diff --git a/views/new/onboarding/QuestListAnimation.tsx b/views/new/onboarding/QuestListAnimation.tsx
index 8c675a404..01486ef14 100644
--- a/views/new/onboarding/QuestListAnimation.tsx
+++ b/views/new/onboarding/QuestListAnimation.tsx
@@ -3,12 +3,9 @@ import { BookOpenIcon } from 'lucide-react-native';
 import React, { useEffect } from 'react';
 import { View } from 'react-native';
 import Animated, {
-  Easing,
   useAnimatedStyle,
   useSharedValue,
   withDelay,
-  withRepeat,
-  withSequence,
   withSpring,
   withTiming
 } from 'react-native-reanimated';
@@ -22,10 +19,16 @@ export function QuestListAnimation() {
   useEffect(() => {
     // Simple slide-in animation - just two quests sliding in from left
     book1Opacity.value = withDelay(200, withTiming(1, { duration: 400 }));
-    book1X.value = withDelay(200, withSpring(0, { damping: 12, stiffness: 100 }));
+    book1X.value = withDelay(
+      200,
+      withSpring(0, { damping: 12, stiffness: 100 })
+    );
 
     book2Opacity.value = withDelay(400, withTiming(1, { duration: 400 }));
-    book2X.value = withDelay(400, withSpring(0, { damping: 12, stiffness: 100 }));
+    book2X.value = withDelay(
+      400,
+      withSpring(0, { damping: 12, stiffness: 100 })
+    );
   }, [book1X, book2X, book1Opacity, book2Opacity]);
 
   const book1Style = useAnimatedStyle(() => {
@@ -53,4 +56,3 @@ export function QuestListAnimation() {
     </View>
   );
 }
-
diff --git a/views/new/onboarding/RecordingAnimation.tsx b/views/new/onboarding/RecordingAnimation.tsx
index e83c6f4eb..d0917ad45 100644
--- a/views/new/onboarding/RecordingAnimation.tsx
+++ b/views/new/onboarding/RecordingAnimation.tsx
@@ -234,4 +234,3 @@ export function RecordingAnimation({ size = 96 }: RecordingAnimationProps) {
     </View>
   );
 }
-

From 85842edcf021daa4965ff3403b27f9c69a5e77a9 Mon Sep 17 00:00:00 2001
From: ryderwishart <ryderwishart@gmail.com>
Date: Mon, 17 Nov 2025 08:58:46 -0700
Subject: [PATCH 10/11] Type fixes

---
 components/OnboardingProgressIndicator.tsx | 19 +++++++++++--------
 hooks/useLanguagesByRegion.ts              |  6 +-----
 hooks/useRegions.ts                        |  6 +-----
 3 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/components/OnboardingProgressIndicator.tsx b/components/OnboardingProgressIndicator.tsx
index b586dad95..bc9637bf8 100644
--- a/components/OnboardingProgressIndicator.tsx
+++ b/components/OnboardingProgressIndicator.tsx
@@ -1,13 +1,12 @@
-import { cn } from '@/utils/styleUtils';
-import { getThemeColor } from '@/utils/styleUtils';
+import { Text } from '@/components/ui/text';
+import { cn, getThemeColor } from '@/utils/styleUtils';
+import { useEffect } from 'react';
+import { View } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withSpring
 } from 'react-native-reanimated';
-import { useEffect } from 'react';
-import { View } from 'react-native';
-import { Text } from '@/components/ui/text';
 
 export type OnboardingStep =
   | 'vision'
@@ -77,7 +76,6 @@ const STEP_LABELS: Record<OnboardingStep, string> = {
   'create-project': 'Create',
   'create-project-simple': 'Project',
   'bible-select-book': 'Book',
-  'bible-create-chapter': 'Chapter',
   'create-quest': 'Quest',
   'record-audio': 'Record',
   'invite-collaborators': 'Invite'
@@ -112,7 +110,10 @@ export function OnboardingProgressIndicator({
       {/* Steps container */}
       <View className="relative flex-row items-center justify-between">
         {/* Progress bar background */}
-        <View className="absolute left-0 right-0 top-0 h-0.5 bg-muted" style={{ top: 12 }}>
+        <View
+          className="absolute left-0 right-0 top-0 h-0.5 bg-muted"
+          style={{ top: 12 }}
+        >
           {/* Animated progress fill */}
           <Animated.View
             style={[
@@ -146,7 +147,9 @@ export function OnboardingProgressIndicator({
                 )}
               >
                 {isCompleted ? (
-                  <Text className="text-xs font-semibold text-primary-foreground">✓</Text>
+                  <Text className="text-xs font-semibold text-primary-foreground">
+                    ✓
+                  </Text>
                 ) : (
                   <Text
                     className={cn(
diff --git a/hooks/useLanguagesByRegion.ts b/hooks/useLanguagesByRegion.ts
index 38e10ccf2..57cf2fa3f 100644
--- a/hooks/useLanguagesByRegion.ts
+++ b/hooks/useLanguagesByRegion.ts
@@ -1,7 +1,5 @@
 import { system } from '@/db/powersync/system';
 import { useHybridData } from '@/views/new/useHybridData';
-import { toCompilableQuery } from '@powersync/drizzle-driver';
-import { sql } from 'drizzle-orm';
 
 export interface Languoid {
   id: string;
@@ -29,9 +27,7 @@ export function useLanguagesByRegion(regionId: string | null) {
     
     // Note: languoid and languoid_region tables don't exist in local SQLite
     // Use a dummy offline query that returns empty array
-    offlineQuery: toCompilableQuery(
-      sql`SELECT '' as id, '' as name, '' as level, '' as parent_id, '' as region_id, '' as region_name, 0 as active, '' as created_at, '' as last_updated WHERE 1 = 0`
-    ),
+    offlineQuery: `SELECT '' as id, '' as name, '' as level, '' as parent_id, '' as region_id, '' as region_name, 0 as active, '' as created_at, '' as last_updated WHERE 1 = 0`,
     
     // Cloud query - fetch languoids filtered by region
     cloudQueryFn: async () => {
diff --git a/hooks/useRegions.ts b/hooks/useRegions.ts
index 46ab608f9..e4855cd50 100644
--- a/hooks/useRegions.ts
+++ b/hooks/useRegions.ts
@@ -1,7 +1,5 @@
 import { system } from '@/db/powersync/system';
 import { useHybridData } from '@/views/new/useHybridData';
-import { toCompilableQuery } from '@powersync/drizzle-driver';
-import { sql } from 'drizzle-orm';
 
 export interface Region {
   id: string;
@@ -24,9 +22,7 @@ export function useRegions(levels: ('continent' | 'nation')[] = ['continent', 'n
     
     // Note: region table doesn't exist in local SQLite, so we'll only query cloud
     // Use a dummy offline query that returns empty array
-    offlineQuery: toCompilableQuery(
-      sql`SELECT '' as id, '' as name, '' as level, '' as parent_id, 0 as active, '' as created_at, '' as last_updated WHERE 1 = 0`
-    ),
+    offlineQuery: `SELECT '' as id, '' as name, '' as level, '' as parent_id, 0 as active, '' as created_at, '' as last_updated WHERE 1 = 0`,
     
     // Cloud query - fetch regions from Supabase
     cloudQueryFn: async () => {

From 4a1750207330371a2aa8a2ca4f64cbc036c23da9 Mon Sep 17 00:00:00 2001
From: ryderwishart <ryderwishart@gmail.com>
Date: Mon, 17 Nov 2025 08:59:02 -0700
Subject: [PATCH 11/11] chore: format

---
 components/AppHeader.tsx                      |   2 +-
 components/LanguageListSkeleton.tsx           |   1 -
 components/WaveformVisualization.tsx          |   7 +-
 hooks/useLanguagesByRegion.ts                 |  25 ++--
 hooks/useMicrophoneEnergy.ts                  |   4 +-
 hooks/useProjectsByLanguage.ts                |  36 +++--
 hooks/useRegions.ts                           |  13 +-
 utils/fileUtils.ts                            |  49 +++---
 .../new/onboarding/AnimatedOnboardingIcon.tsx |   7 +-
 views/new/onboarding/VisionFlowAnimation.tsx  |  27 ++--
 views/new/onboarding/VisionScreen.tsx         |   1 -
 .../components/VADSettingsDrawer.tsx          | 139 +++++++++++-------
 views/new/recording/hooks/useVADRecording.ts  |  37 +++--
 13 files changed, 210 insertions(+), 138 deletions(-)

diff --git a/components/AppHeader.tsx b/components/AppHeader.tsx
index 6b37ea4d1..65fc7125e 100644
--- a/components/AppHeader.tsx
+++ b/components/AppHeader.tsx
@@ -240,7 +240,7 @@ export default function AppHeader({
             variant="ghost"
             size="icon"
             onPress={onOnboardingPress}
-            className="relative size-8 mr-2"
+            className="relative mr-2 size-8"
             hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
           >
             <Icon as={HelpCircle} size={24} className="text-muted-foreground" />
diff --git a/components/LanguageListSkeleton.tsx b/components/LanguageListSkeleton.tsx
index a6e128896..dcf921cee 100644
--- a/components/LanguageListSkeleton.tsx
+++ b/components/LanguageListSkeleton.tsx
@@ -18,4 +18,3 @@ export function LanguageListSkeleton() {
     </View>
   );
 }
-
diff --git a/components/WaveformVisualization.tsx b/components/WaveformVisualization.tsx
index fb4cfe144..d51e903c7 100644
--- a/components/WaveformVisualization.tsx
+++ b/components/WaveformVisualization.tsx
@@ -105,8 +105,11 @@ export const WaveformVisualization: React.FC<WaveformVisualizationProps> = ({
       // But values can be higher, so normalize similar to VADSettingsDrawer
       // Using MAX_ENERGY = 20.0 to match VADSettingsDrawer normalization
       const MAX_ENERGY = 20.0;
-      const normalizedRaw = Math.min(1.0, Math.max(0, currentEnergy / MAX_ENERGY));
-      
+      const normalizedRaw = Math.min(
+        1.0,
+        Math.max(0, currentEnergy / MAX_ENERGY)
+      );
+
       // Scale relative to threshold for visualization
       // Threshold is already normalized (0-1), so we compare normalized values
       const normalizedEnergy = Math.max(
diff --git a/hooks/useLanguagesByRegion.ts b/hooks/useLanguagesByRegion.ts
index 57cf2fa3f..8df96a337 100644
--- a/hooks/useLanguagesByRegion.ts
+++ b/hooks/useLanguagesByRegion.ts
@@ -24,19 +24,20 @@ export function useLanguagesByRegion(regionId: string | null) {
   return useHybridData<LanguageByRegion>({
     dataType: 'languages-by-region',
     queryKeyParams: [regionId || ''],
-    
+
     // Note: languoid and languoid_region tables don't exist in local SQLite
     // Use a dummy offline query that returns empty array
     offlineQuery: `SELECT '' as id, '' as name, '' as level, '' as parent_id, '' as region_id, '' as region_name, 0 as active, '' as created_at, '' as last_updated WHERE 1 = 0`,
-    
+
     // Cloud query - fetch languoids filtered by region
     cloudQueryFn: async () => {
       if (!regionId) return [];
-      
+
       // Query languoids via languoid_region join
       const { data, error } = await system.supabaseConnector.client
         .from('languoid_region')
-        .select(`
+        .select(
+          `
           languoid_id,
           region_id,
           languoid:languoid_id (
@@ -51,17 +52,18 @@ export function useLanguagesByRegion(regionId: string | null) {
           region:region_id (
             name
           )
-        `)
+        `
+        )
         .eq('region_id', regionId)
         .eq('active', true);
-      
+
       if (error) throw error;
-      
+
       // Transform the nested data structure
       const languages: LanguageByRegion[] = (data || []).map((item: any) => {
         const languoid = item.languoid;
         const region = item.region;
-        
+
         return {
           id: languoid.id,
           name: languoid.name,
@@ -74,15 +76,14 @@ export function useLanguagesByRegion(regionId: string | null) {
           region_name: region?.name || ''
         };
       });
-      
+
       // Sort by name
       languages.sort((a, b) => a.name.localeCompare(b.name));
-      
+
       return languages;
     },
-    
+
     enableCloudQuery: !!regionId,
     enableOfflineQuery: false // Languoid tables don't exist locally
   });
 }
-
diff --git a/hooks/useMicrophoneEnergy.ts b/hooks/useMicrophoneEnergy.ts
index 7d0bfee6b..3e25b4309 100644
--- a/hooks/useMicrophoneEnergy.ts
+++ b/hooks/useMicrophoneEnergy.ts
@@ -50,7 +50,9 @@ export function useMicrophoneEnergy(): UseMicrophoneEnergy {
         console.error('❌ [JS] Microphone energy error received from native:');
         console.error('   Message:', error.message);
         if (error.code !== undefined) {
-          console.error(`   Code: ${error.code}, Domain: ${error.domain ?? 'unknown'}`);
+          console.error(
+            `   Code: ${error.code}, Domain: ${error.domain ?? 'unknown'}`
+          );
         }
         console.error('   Full error object:', error);
         setState((prev) => ({ ...prev, error: error.message }));
diff --git a/hooks/useProjectsByLanguage.ts b/hooks/useProjectsByLanguage.ts
index 9834e5a5c..556a7ebc8 100644
--- a/hooks/useProjectsByLanguage.ts
+++ b/hooks/useProjectsByLanguage.ts
@@ -17,14 +17,17 @@ type Project = typeof project.$inferSelect;
 export function useProjectsByLanguage(languageId: string | null) {
   const { currentUser } = useAuth();
   const userId = currentUser?.id;
-  
+
   const showInvisibleContent = useLocalStore(
     (state) => state.showHiddenContent
   );
 
-  const {
-    data: restrictions
-  } = useUserRestrictions('project', true, true, false);
+  const { data: restrictions } = useUserRestrictions(
+    'project',
+    true,
+    true,
+    false
+  );
 
   const blockContentIds = (restrictions.blockedContentIds ?? []).map(
     (c) => c.content_id
@@ -35,8 +38,12 @@ export function useProjectsByLanguage(languageId: string | null) {
 
   return useHybridData<Project>({
     dataType: 'projects-by-language',
-    queryKeyParams: [languageId || '', userId || '', showInvisibleContent ? 'show-hidden' : ''],
-    
+    queryKeyParams: [
+      languageId || '',
+      userId || '',
+      showInvisibleContent ? 'show-hidden' : ''
+    ],
+
     // Offline query - get projects by target language
     offlineQuery: toCompilableQuery(
       system.db
@@ -47,7 +54,9 @@ export function useProjectsByLanguage(languageId: string | null) {
         .where(
           and(
             ...[
-              languageId ? eq(project.target_language_id, languageId) : undefined,
+              languageId
+                ? eq(project.target_language_id, languageId)
+                : undefined,
               eq(project.active, true),
               // Exclude projects user is already a member of
               userId &&
@@ -63,18 +72,20 @@ export function useProjectsByLanguage(languageId: string | null) {
                 userId ? eq(project.creator_id, userId) : undefined
               ),
               // Blocked users filter
-              blockUserIds.length > 0 && notInArray(project.creator_id, blockUserIds),
+              blockUserIds.length > 0 &&
+                notInArray(project.creator_id, blockUserIds),
               // Blocked content filter
-              blockContentIds.length > 0 && notInArray(project.id, blockContentIds)
+              blockContentIds.length > 0 &&
+                notInArray(project.id, blockContentIds)
             ].filter(Boolean)
           )
         )
     ),
-    
+
     // Cloud query - get projects by target language
     cloudQueryFn: async () => {
       if (!languageId) return [];
-      
+
       // Get projects user is already a member of (to exclude)
       const userProjectIds = userId
         ? await system.supabaseConnector.client
@@ -118,9 +129,8 @@ export function useProjectsByLanguage(languageId: string | null) {
       if (error) throw error;
       return data || [];
     },
-    
+
     enableCloudQuery: !!languageId,
     enableOfflineQuery: !!languageId
   });
 }
-
diff --git a/hooks/useRegions.ts b/hooks/useRegions.ts
index e4855cd50..2a2bc5bc2 100644
--- a/hooks/useRegions.ts
+++ b/hooks/useRegions.ts
@@ -15,15 +15,17 @@ export interface Region {
  * Hook to query regions from the region table
  * Filters by level (continent or nation)
  */
-export function useRegions(levels: ('continent' | 'nation')[] = ['continent', 'nation']) {
+export function useRegions(
+  levels: ('continent' | 'nation')[] = ['continent', 'nation']
+) {
   return useHybridData<Region>({
     dataType: 'regions',
     queryKeyParams: [levels.join(',')],
-    
+
     // Note: region table doesn't exist in local SQLite, so we'll only query cloud
     // Use a dummy offline query that returns empty array
     offlineQuery: `SELECT '' as id, '' as name, '' as level, '' as parent_id, 0 as active, '' as created_at, '' as last_updated WHERE 1 = 0`,
-    
+
     // Cloud query - fetch regions from Supabase
     cloudQueryFn: async () => {
       const { data, error } = await system.supabaseConnector.client
@@ -32,13 +34,12 @@ export function useRegions(levels: ('continent' | 'nation')[] = ['continent', 'n
         .in('level', levels)
         .eq('active', true)
         .order('name');
-      
+
       if (error) throw error;
       return data as Region[];
     },
-    
+
     enableCloudQuery: true,
     enableOfflineQuery: false // Region table doesn't exist locally
   });
 }
-
diff --git a/utils/fileUtils.ts b/utils/fileUtils.ts
index fa0e78612..779c0e9c1 100644
--- a/utils/fileUtils.ts
+++ b/utils/fileUtils.ts
@@ -22,11 +22,15 @@ export function getDirectory(uri: string) {
   if (uri.startsWith('file://')) {
     const pathWithoutProtocol = uri.replace(/^file:\/\//, ''); // Remove file:// or file:///
     // Remove any trailing slashes or path components like '/..'
-    const cleanPath = pathWithoutProtocol.replace(/\/\.\.?\/?$/, '').replace(/\/+$/, '');
+    const cleanPath = pathWithoutProtocol
+      .replace(/\/\.\.?\/?$/, '')
+      .replace(/\/+$/, '');
     if (!cleanPath || cleanPath === '') {
       return 'file:///';
     }
-    const parts = cleanPath.split('/').filter(p => p !== '' && p !== '.' && p !== '..');
+    const parts = cleanPath
+      .split('/')
+      .filter((p) => p !== '' && p !== '.' && p !== '..');
     if (parts.length === 0) {
       return 'file:///';
     }
@@ -35,7 +39,9 @@ export function getDirectory(uri: string) {
   }
   // Remove any trailing slashes or path components like '/..'
   const cleanPath = uri.replace(/\/\.\.?\/?$/, '').replace(/\/+$/, '');
-  const parts = cleanPath.split('/').filter(p => p !== '' && p !== '.' && p !== '..');
+  const parts = cleanPath
+    .split('/')
+    .filter((p) => p !== '' && p !== '.' && p !== '..');
   if (parts.length === 0) {
     return '/';
   }
@@ -86,7 +92,7 @@ export async function writeFile(
  */
 export function normalizeFileUri(uri: string): string {
   let normalized = uri.trim();
-  
+
   // Handle file:// URIs
   if (normalized.startsWith('file://')) {
     // Normalize to file:/// (three slashes) if needed
@@ -95,13 +101,13 @@ export function normalizeFileUri(uri: string): string {
     } else if (!normalized.startsWith('file:///')) {
       normalized = normalized.replace(/^file:\/\//, 'file:///');
     }
-    
+
     // Remove path traversal components (/.. and /.)
     normalized = normalized.replace(/\/\.\.?(\/|$)/g, '/');
-    
+
     // Remove trailing slashes (but keep file:///)
     normalized = normalized.replace(/\/+$/, '');
-    
+
     // Remove double slashes in the path part (after file:///)
     normalized = normalized.replace(/file:\/\/(.+)/, (match, path) => {
       const cleanPath = path.replace(/\/+/g, '/');
@@ -114,7 +120,7 @@ export function normalizeFileUri(uri: string): string {
     normalized = normalized.replace(/\/+$/, '');
     normalized = normalized.replace(/\/\/+/g, '/');
   }
-  
+
   return normalized;
 }
 
@@ -122,11 +128,11 @@ export async function moveFile(sourceUri: string, targetUri: string) {
   // On iOS Simulator, FileSystem.moveAsync has a bug where it appends /.. to paths
   // Workaround: Use copy + delete instead of move
   // This is more reliable across platforms and avoids the simulator bug
-  
+
   // Normalize both URIs to ensure they're properly formatted
   let fromUri = normalizeFileUri(sourceUri);
   let toUri = normalizeFileUri(targetUri);
-  
+
   try {
     // Try moveAsync first (faster on real devices)
     await FileSystem.moveAsync({ from: fromUri, to: toUri });
@@ -144,7 +150,8 @@ export async function moveFile(sourceUri: string, targetUri: string) {
       } catch (deleteError) {
         // If deletion fails (common on iOS Simulator with temp files), log but don't fail
         // Temp files will be cleaned up automatically by the OS
-        const isTempFile = deleteUri.includes('/tmp/') || deleteUri.includes('/tmp');
+        const isTempFile =
+          deleteUri.includes('/tmp/') || deleteUri.includes('/tmp');
         if (isTempFile) {
           console.log(
             `⚠️ Failed to delete temp file (will be cleaned up automatically): ${deleteUri}`
@@ -229,25 +236,25 @@ export async function saveAudioLocally(uri: string) {
   // Normalize the source URI - remove any path traversal components and trailing slashes
   // Handle both file:// URIs and regular paths
   const cleanSourceUri = normalizeFileUri(uri);
-  
+
   // Extract extension before further processing
   const extension = cleanSourceUri.split('.').pop() || 'wav';
-  
+
   const newUri = `local/${uuid.v4()}.${extension}`;
   console.log('🔍 Saving audio file locally:', cleanSourceUri, newUri);
-  
+
   // Retry logic for file existence - iOS Simulator can have timing issues
   // where the file isn't immediately available after Swift writes it
   const maxRetries = 5;
   const retryDelayMs = 100;
   let fileExistsNow = false;
-  
+
   for (let attempt = 0; attempt < maxRetries; attempt++) {
     fileExistsNow = await fileExists(cleanSourceUri);
     if (fileExistsNow) {
       break;
     }
-    
+
     if (attempt < maxRetries - 1) {
       console.log(
         `⏳ File not found yet (attempt ${attempt + 1}/${maxRetries}), retrying in ${retryDelayMs}ms...`
@@ -255,7 +262,7 @@ export async function saveAudioLocally(uri: string) {
       await new Promise((resolve) => setTimeout(resolve, retryDelayMs));
     }
   }
-  
+
   if (!fileExistsNow) {
     // Get file info for better error message
     const fileInfo = await getFileInfo(cleanSourceUri);
@@ -263,10 +270,10 @@ export async function saveAudioLocally(uri: string) {
     console.error('❌', errorMsg);
     throw new Error(errorMsg);
   }
-  
+
   const newPath = getLocalUri(getLocalFilePathSuffix(newUri));
   await ensureDir(getDirectory(newPath));
-  
+
   // Debug: Log the URIs before moving
   console.log('📦 Moving file:', {
     from: cleanSourceUri,
@@ -274,7 +281,7 @@ export async function saveAudioLocally(uri: string) {
     fromLength: cleanSourceUri.length,
     toLength: newPath.length
   });
-  
+
   try {
     await moveFile(cleanSourceUri, newPath);
   } catch (error) {
@@ -288,7 +295,7 @@ export async function saveAudioLocally(uri: string) {
     });
     throw error;
   }
-  
+
   console.log(
     '✅ Audio file saved locally:',
     `${getLocalUri(getLocalFilePathSuffix('local'))}/${newUri}`
diff --git a/views/new/onboarding/AnimatedOnboardingIcon.tsx b/views/new/onboarding/AnimatedOnboardingIcon.tsx
index 9fd29735c..7144f3941 100644
--- a/views/new/onboarding/AnimatedOnboardingIcon.tsx
+++ b/views/new/onboarding/AnimatedOnboardingIcon.tsx
@@ -118,9 +118,12 @@ export function AnimatedOnboardingIcon({
   return (
     <Animated.View style={animatedStyle}>
       <View className="h-24 w-24 items-center justify-center rounded-full bg-primary/10">
-        <Icon as={IconComponent} size={size} className={className || 'text-primary'} />
+        <Icon
+          as={IconComponent}
+          size={size}
+          className={className || 'text-primary'}
+        />
       </View>
     </Animated.View>
   );
 }
-
diff --git a/views/new/onboarding/VisionFlowAnimation.tsx b/views/new/onboarding/VisionFlowAnimation.tsx
index 2d96ab462..d142c5d05 100644
--- a/views/new/onboarding/VisionFlowAnimation.tsx
+++ b/views/new/onboarding/VisionFlowAnimation.tsx
@@ -26,11 +26,11 @@ export function VisionFlowAnimation() {
   const particle1X = useSharedValue(0);
   const particle1Y = useSharedValue(0);
   const particle1Opacity = useSharedValue(0);
-  
+
   const particle2X = useSharedValue(0);
   const particle2Y = useSharedValue(0);
   const particle2Opacity = useSharedValue(0);
-  
+
   const particle3X = useSharedValue(0);
   const particle3Y = useSharedValue(0);
   const particle3Opacity = useSharedValue(0);
@@ -39,11 +39,11 @@ export function VisionFlowAnimation() {
   const returnParticle1X = useSharedValue(0);
   const returnParticle1Y = useSharedValue(0);
   const returnParticle1Opacity = useSharedValue(0);
-  
+
   const returnParticle2X = useSharedValue(0);
   const returnParticle2Y = useSharedValue(0);
   const returnParticle2Opacity = useSharedValue(0);
-  
+
   const returnParticle3X = useSharedValue(0);
   const returnParticle3Y = useSharedValue(0);
   const returnParticle3Opacity = useSharedValue(0);
@@ -51,11 +51,17 @@ export function VisionFlowAnimation() {
   useEffect(() => {
     // Animate globe in
     globeOpacity.value = withDelay(200, withTiming(1, { duration: 500 }));
-    globeScale.value = withDelay(200, withTiming(1, { duration: 500, easing: Easing.out(Easing.ease) }));
+    globeScale.value = withDelay(
+      200,
+      withTiming(1, { duration: 500, easing: Easing.out(Easing.ease) })
+    );
 
     // Animate users in
     usersOpacity.value = withDelay(400, withTiming(1, { duration: 500 }));
-    usersScale.value = withDelay(400, withTiming(1, { duration: 500, easing: Easing.out(Easing.ease) }));
+    usersScale.value = withDelay(
+      400,
+      withTiming(1, { duration: 500, easing: Easing.out(Easing.ease) })
+    );
 
     // Flow from globe to users with arcing paths
     const flowToUsers = () => {
@@ -213,7 +219,7 @@ export function VisionFlowAnimation() {
 
     // Start flow to users
     flowToUsers();
-    
+
     // After particles reach users, start return flow
     const returnDelay = setTimeout(() => {
       flowToGlobe();
@@ -320,7 +326,7 @@ export function VisionFlowAnimation() {
       <Animated.View style={globeStyle}>
         <View className="relative h-20 w-20 items-center justify-center">
           {/* Semi-transparent background circle */}
-          <View className="absolute h-20 w-20 rounded-full bg-background/60 border border-border/50" />
+          <View className="absolute h-20 w-20 rounded-full border border-border/50 bg-background/60" />
           <View className="relative h-14 w-14 items-center justify-center rounded-full bg-primary/10">
             <Icon as={GlobeIcon} size={28} className="text-primary" />
           </View>
@@ -339,7 +345,7 @@ export function VisionFlowAnimation() {
         <Animated.View style={particle3Style} className="absolute">
           <View className="h-2 w-2 rounded-full bg-primary" />
         </Animated.View>
-        
+
         {/* Particles flowing from users back to globe */}
         <Animated.View style={returnParticle1Style} className="absolute">
           <View className="h-2 w-2 rounded-full bg-primary" />
@@ -356,7 +362,7 @@ export function VisionFlowAnimation() {
       <Animated.View style={usersStyle}>
         <View className="relative h-20 w-20 items-center justify-center">
           {/* Semi-transparent background circle */}
-          <View className="absolute h-20 w-20 rounded-full bg-background/60 border border-border/50" />
+          <View className="absolute h-20 w-20 rounded-full border border-border/50 bg-background/60" />
           <View className="relative h-14 w-14 items-center justify-center rounded-full bg-primary/10">
             <Icon as={UsersIcon} size={28} className="text-primary" />
           </View>
@@ -365,4 +371,3 @@ export function VisionFlowAnimation() {
     </View>
   );
 }
-
diff --git a/views/new/onboarding/VisionScreen.tsx b/views/new/onboarding/VisionScreen.tsx
index 02f17f6da..5cce42b69 100644
--- a/views/new/onboarding/VisionScreen.tsx
+++ b/views/new/onboarding/VisionScreen.tsx
@@ -155,4 +155,3 @@ export function VisionScreen() {
     </View>
   );
 }
-
diff --git a/views/new/recording/components/VADSettingsDrawer.tsx b/views/new/recording/components/VADSettingsDrawer.tsx
index 19201c5ac..44ce8ca4e 100644
--- a/views/new/recording/components/VADSettingsDrawer.tsx
+++ b/views/new/recording/components/VADSettingsDrawer.tsx
@@ -70,27 +70,27 @@ interface InputPill {
 const generateInputPills = (): InputPill[] => {
   const NUM_PILLS = 10;
   const pills: InputPill[] = [];
-  
+
   // Use exponential distribution: each pill covers an exponentially larger dB range
   // Total range: DB_MIN (-60) to DB_MAX (0) = 60 dB
   // We'll use a logarithmic distribution
-  
+
   for (let i = 0; i < NUM_PILLS; i++) {
     // Normalize position (0 to 1)
     const normalizedPos = i / NUM_PILLS;
     const normalizedNextPos = (i + 1) / NUM_PILLS;
-    
+
     // Apply exponential curve: earlier positions map to smaller dB ranges
     // Use power curve: position^1.4 for less aggressive distribution
     // Goal: ambient noise (-3 to -2 dB) should fill pills 7-8, not pill 9
     // Pill 9 should only fill for very loud sounds close to 0 dB
     const logStart = Math.pow(normalizedPos, 1.4);
     const logEnd = Math.pow(normalizedNextPos, 1.4);
-    
+
     // Map back to dB range
     const minDb = DB_MIN + logStart * (DB_MAX - DB_MIN);
     const maxDb = DB_MIN + logEnd * (DB_MAX - DB_MIN);
-    
+
     // Color gradient: Blue -> Green -> Yellow -> Red
     const colorProgress = i / (NUM_PILLS - 1);
     let color: string;
@@ -107,14 +107,14 @@ const generateInputPills = (): InputPill[] => {
       const t = (colorProgress - 0.66) / 0.34;
       color = `rgba(${234 + (239 - 234) * t}, ${179 + (68 - 179) * t}, ${8 + (68 - 8) * t}, ${0.9 + 0.1 * t})`;
     }
-    
+
     pills.push({
       minDb,
       maxDb,
       color
     });
   }
-  
+
   return pills;
 };
 
@@ -210,10 +210,12 @@ export function VADSettingsDrawer({
   > | null>(null);
   // Ref to track latest energy value for calibration sampling
   const latestEnergyRef = React.useRef<number>(0);
-  
+
   // Refs for logging statistics
   const energySamplesRef = React.useRef<number[]>([]);
-  const loggingIntervalRef = React.useRef<ReturnType<typeof setInterval> | null>(null);
+  const loggingIntervalRef = React.useRef<ReturnType<
+    typeof setInterval
+  > | null>(null);
 
   const currentEnergy = energyResult?.energy ?? 0;
 
@@ -251,24 +253,25 @@ export function VADSettingsDrawer({
   // Since pills are equal width, each pill is 10% of the visual space
   const dbToVisualPosition = (db: number): number => {
     const clampedDb = Math.max(DB_MIN, Math.min(DB_MAX, db));
-    
+
     // Find which pill contains this dB value
     for (let i = 0; i < INPUT_PILLS.length; i++) {
       const pill = INPUT_PILLS[i]!;
-      
+
       if (clampedDb >= pill.minDb && clampedDb <= pill.maxDb) {
         // This is the pill - calculate position within it
-        const positionInPill = (clampedDb - pill.minDb) / (pill.maxDb - pill.minDb);
+        const positionInPill =
+          (clampedDb - pill.minDb) / (pill.maxDb - pill.minDb);
         const pillStartPercent = i * 10; // Each pill is 10% wide
         return pillStartPercent + positionInPill * 10;
       }
     }
-    
+
     // If above max, return 100%
     if (clampedDb >= INPUT_PILLS[INPUT_PILLS.length - 1]!.maxDb) {
       return 100;
     }
-    
+
     // Fallback (shouldn't happen)
     return 0;
   };
@@ -278,7 +281,7 @@ export function VADSettingsDrawer({
   // Cumulative fill: all pills below current dB are fully filled, current pill is partially filled
   const getActivePills = (db: number) => {
     const clampedDb = Math.max(DB_MIN, Math.min(DB_MAX, db));
-    
+
     return INPUT_PILLS.map((pill, index) => {
       if (clampedDb < pill.minDb) {
         // Below this pill's range - empty
@@ -288,8 +291,13 @@ export function VADSettingsDrawer({
         return { ...pill, isActive: true, fillPercent: 100 };
       } else {
         // Within this pill's range - calculate fill percentage
-        const fillPercent = ((clampedDb - pill.minDb) / (pill.maxDb - pill.minDb)) * 100;
-        return { ...pill, isActive: true, fillPercent: Math.min(100, Math.max(0, fillPercent)) };
+        const fillPercent =
+          ((clampedDb - pill.minDb) / (pill.maxDb - pill.minDb)) * 100;
+        return {
+          ...pill,
+          isActive: true,
+          fillPercent: Math.min(100, Math.max(0, fillPercent))
+        };
       }
     });
   };
@@ -298,20 +306,23 @@ export function VADSettingsDrawer({
   // Since pills are equal width, each pill is 10% of the visual space
   const visualPositionToDb = (percent: number): number => {
     const clampedPercent = Math.max(0, Math.min(100, percent));
-    
+
     // Each pill is 10% wide
     const pillIndex = Math.floor(clampedPercent / 10);
     const positionInPill = (clampedPercent % 10) / 10;
-    
+
     // Clamp to valid pill range
-    const safePillIndex = Math.max(0, Math.min(INPUT_PILLS.length - 1, pillIndex));
+    const safePillIndex = Math.max(
+      0,
+      Math.min(INPUT_PILLS.length - 1, pillIndex)
+    );
     const pill = INPUT_PILLS[safePillIndex]!;
-    
+
     // If at the end of the last pill, use maxDb
     if (pillIndex >= INPUT_PILLS.length - 1 && positionInPill >= 0.99) {
       return pill.maxDb;
     }
-    
+
     // Calculate dB within this pill's range
     const dbInPill = pill.minDb + positionInPill * (pill.maxDb - pill.minDb);
     return dbInPill;
@@ -352,21 +363,22 @@ export function VADSettingsDrawer({
     if (isOpen && isActive) {
       // Collect energy samples
       energySamplesRef.current = [];
-      
+
       // Log statistics every 3 seconds
       loggingIntervalRef.current = setInterval(() => {
         const samples = energySamplesRef.current;
         if (samples.length > 0) {
           const min = Math.min(...samples);
           const max = Math.max(...samples);
-          const avg = samples.reduce((sum, val) => sum + val, 0) / samples.length;
+          const avg =
+            samples.reduce((sum, val) => sum + val, 0) / samples.length;
           const currentDb = energyToDb(avg);
           const thresholdDb = energyToDb(threshold);
-          
+
           const normalizedMin = normalizeEnergy(min);
           const normalizedMax = normalizeEnergy(max);
           const normalizedAvg = normalizeEnergy(avg);
-          
+
           // Find which pill the current dB falls into
           let activePillIndex = -1;
           let activePillFill = 0;
@@ -374,32 +386,36 @@ export function VADSettingsDrawer({
             const pill = INPUT_PILLS[i]!;
             if (currentDb >= pill.minDb && currentDb < pill.maxDb) {
               activePillIndex = i;
-              activePillFill = ((currentDb - pill.minDb) / (pill.maxDb - pill.minDb)) * 100;
+              activePillFill =
+                ((currentDb - pill.minDb) / (pill.maxDb - pill.minDb)) * 100;
               break;
             }
           }
-          
+
           // Log pill ranges for debugging
-          const pillRanges = INPUT_PILLS.map((p, i) => 
-            `P${i}: ${p.minDb.toFixed(1)} to ${p.maxDb.toFixed(1)} dB`
+          const pillRanges = INPUT_PILLS.map(
+            (p, i) => `P${i}: ${p.minDb.toFixed(1)} to ${p.maxDb.toFixed(1)} dB`
           ).join(', ');
-          
+
           console.log('📊 VAD Energy Stats:', {
             samples: samples.length,
             rawAvg: avg.toFixed(4),
             normalizedAvg: normalizedAvg.toFixed(4),
             avgDb: currentDb.toFixed(1),
-            activePill: activePillIndex >= 0 ? `Pill ${activePillIndex} (${activePillFill.toFixed(1)}% filled)` : 'None',
+            activePill:
+              activePillIndex >= 0
+                ? `Pill ${activePillIndex} (${activePillFill.toFixed(1)}% filled)`
+                : 'None',
             threshold: threshold.toFixed(4),
             thresholdDb: thresholdDb.toFixed(1),
             pillRanges
           });
-          
+
           // Reset samples for next interval
           energySamplesRef.current = [];
         }
       }, 3000); // Every 3 seconds
-      
+
       return () => {
         if (loggingIntervalRef.current) {
           clearInterval(loggingIntervalRef.current);
@@ -469,7 +485,11 @@ export function VADSettingsDrawer({
     const sampleInterval = setInterval(() => {
       // Use ref to get latest energy value (updated from useEffect)
       const currentEnergy = latestEnergyRef.current;
-      if (currentEnergy !== undefined && !isNaN(currentEnergy) && currentEnergy > 0) {
+      if (
+        currentEnergy !== undefined &&
+        !isNaN(currentEnergy) &&
+        currentEnergy > 0
+      ) {
         calibrationSamplesRef.current.push(currentEnergy);
       }
     }, CALIBRATION_SAMPLE_INTERVAL_MS);
@@ -499,7 +519,10 @@ export function VADSettingsDrawer({
       // Normalize the average energy to 0-1 range (matching visualization)
       // Swift/Android send raw RMS energy values that need normalization
       const MAX_ENERGY = 20.0;
-      const normalizedAverage = Math.min(1.0, Math.max(0, average / MAX_ENERGY));
+      const normalizedAverage = Math.min(
+        1.0,
+        Math.max(0, average / MAX_ENERGY)
+      );
 
       // Check for reasonable noise level (only check if too quiet - allow loud environments)
       if (normalizedAverage < 0.0001) {
@@ -528,13 +551,7 @@ export function VADSettingsDrawer({
     }, totalDuration);
 
     calibrationTimeoutRef.current = timeout;
-  }, [
-    isCalibrating,
-    isActive,
-    startEnergyDetection,
-    onThresholdChange,
-    t
-  ]);
+  }, [isCalibrating, isActive, startEnergyDetection, onThresholdChange, t]);
 
   // Cleanup calibration on unmount
   React.useEffect(() => {
@@ -691,9 +708,9 @@ export function VADSettingsDrawer({
           <View className="gap-3">
             <View className="flex-row items-center gap-2">
               <Icon as={Mic} size={18} className="text-foreground" />
-            <Text className="text-sm font-medium text-foreground">
+              <Text className="text-sm font-medium text-foreground">
                 {t('vadCurrentLevel')}
-            </Text>
+              </Text>
             </View>
 
             {/* Input Level Pills - Horizontal Row (10 equal-width pills) */}
@@ -704,9 +721,9 @@ export function VADSettingsDrawer({
                     {/* Pill background */}
                     <View className="h-full w-full overflow-hidden rounded-full bg-muted/50">
                       {/* Pill fill */}
-              <Animated.View
-                style={[
-                  {
+                      <Animated.View
+                        style={[
+                          {
                             width: `${Math.min(100, pill.fillPercent)}%`,
                             height: '100%'
                           },
@@ -723,7 +740,7 @@ export function VADSettingsDrawer({
                   </View>
                 );
               })}
-              
+
               {/* Threshold marker spanning all pills vertically */}
               <View
                 style={{
@@ -751,8 +768,8 @@ export function VADSettingsDrawer({
             <View className="flex-row items-center justify-between">
               <View className="flex-row items-center gap-2">
                 <Icon as={Volume1} size={18} className="text-foreground" />
-            <Text className="text-sm font-medium text-foreground">
-              {t('vadThreshold')}
+                <Text className="text-sm font-medium text-foreground">
+                  {t('vadThreshold')}
                 </Text>
               </View>
               <Button
@@ -814,8 +831,14 @@ export function VADSettingsDrawer({
                     const newDb = visualPositionToDb(newPos);
                     // Convert dB back to energy (0-1), clamp dB to valid range first
                     const clampedDb = Math.max(DB_MIN, Math.min(DB_MAX, newDb));
-                    const newEnergy = clampedDb <= DB_MIN ? THRESHOLD_MIN : Math.pow(10, clampedDb / 20);
-                    const newThreshold = Math.max(THRESHOLD_MIN, Math.min(THRESHOLD_MAX, newEnergy));
+                    const newEnergy =
+                      clampedDb <= DB_MIN
+                        ? THRESHOLD_MIN
+                        : Math.pow(10, clampedDb / 20);
+                    const newThreshold = Math.max(
+                      THRESHOLD_MIN,
+                      Math.min(THRESHOLD_MAX, newEnergy)
+                    );
                     onThresholdChange(Number(newThreshold.toFixed(4)));
                   }}
                   disabled={threshold <= THRESHOLD_MIN}
@@ -834,8 +857,14 @@ export function VADSettingsDrawer({
                     const newDb = visualPositionToDb(newPos);
                     // Convert dB back to energy (0-1), clamp dB to valid range first
                     const clampedDb = Math.max(DB_MIN, Math.min(DB_MAX, newDb));
-                    const newEnergy = clampedDb <= DB_MIN ? THRESHOLD_MIN : Math.pow(10, clampedDb / 20);
-                    const newThreshold = Math.max(THRESHOLD_MIN, Math.min(THRESHOLD_MAX, newEnergy));
+                    const newEnergy =
+                      clampedDb <= DB_MIN
+                        ? THRESHOLD_MIN
+                        : Math.pow(10, clampedDb / 20);
+                    const newThreshold = Math.max(
+                      THRESHOLD_MIN,
+                      Math.min(THRESHOLD_MAX, newEnergy)
+                    );
                     onThresholdChange(Number(newThreshold.toFixed(4)));
                   }}
                   disabled={threshold >= THRESHOLD_MAX}
diff --git a/views/new/recording/hooks/useVADRecording.ts b/views/new/recording/hooks/useVADRecording.ts
index 0b3133c3b..e2a4c27d8 100644
--- a/views/new/recording/hooks/useVADRecording.ts
+++ b/views/new/recording/hooks/useVADRecording.ts
@@ -86,16 +86,23 @@ export function useVADRecording({
       // Native module returns raw RMS (0-20 range), so threshold must match that format
       const MAX_ENERGY = 20.0;
       const rawThreshold = threshold * MAX_ENERGY;
-      
+
       // CRITICAL: The native module multiplies threshold by onsetMultiplier (0.25) for onset detection
       // So if user wants final threshold of X, we need to send X / 0.25 = 4X
       // This ensures: (4X) * 0.25 = X (the desired threshold)
       // The threshold value represents the FINAL effective threshold, not the base
       const ONSET_MULTIPLIER = 0.25;
       const baseThreshold = rawThreshold / ONSET_MULTIPLIER;
-      
-      console.log('🔧 Configuring VAD | normalized:', threshold, '→ raw:', rawThreshold.toFixed(4), '→ base (accounting for onsetMultiplier):', baseThreshold.toFixed(4));
-      
+
+      console.log(
+        '🔧 Configuring VAD | normalized:',
+        threshold,
+        '→ raw:',
+        rawThreshold.toFixed(4),
+        '→ base (accounting for onsetMultiplier):',
+        baseThreshold.toFixed(4)
+      );
+
       await MicrophoneEnergyModule.configureVAD({
         threshold: baseThreshold,
         silenceDuration,
@@ -134,10 +141,10 @@ export function useVADRecording({
             // This ensures the correct threshold is set before VAD begins monitoring
             await configureVAD();
             console.log('✅ VAD configured, starting energy detection...');
-            
+
             await startEnergyDetection();
             console.log('✅ Energy detection started, enabling VAD...');
-            
+
             await MicrophoneEnergyModule.enableVAD();
             // Log threshold values for debugging
             const MAX_ENERGY = 20.0;
@@ -145,16 +152,22 @@ export function useVADRecording({
             const rawThreshold = threshold * MAX_ENERGY;
             const baseThreshold = rawThreshold / ONSET_MULTIPLIER;
             const effectiveOnsetThreshold = baseThreshold * ONSET_MULTIPLIER;
-            console.log('✅ VAD enabled | normalized:', threshold, '| raw (effective):', rawThreshold.toFixed(4), '| base (sent to native):', baseThreshold.toFixed(4), '| effective onset:', effectiveOnsetThreshold.toFixed(4));
-            
+            console.log(
+              '✅ VAD enabled | normalized:',
+              threshold,
+              '| raw (effective):',
+              rawThreshold.toFixed(4),
+              '| base (sent to native):',
+              baseThreshold.toFixed(4),
+              '| effective onset:',
+              effectiveOnsetThreshold.toFixed(4)
+            );
+
             // Update refs after successful activation
             prevThresholdRef.current = threshold;
             prevSilenceDurationRef.current = silenceDuration;
           } catch (error) {
-            console.error(
-              '❌ Failed to activate VAD mode:',
-              error
-            );
+            console.error('❌ Failed to activate VAD mode:', error);
             // Error details should already be logged via onError event listener
             // But log here for visibility in this specific context
           }