fix: resolve Expo Router layout warning and enhance Supabase UX

- Addressed the nested layout warning in Expo Router by implementing a new layout wrapper in `app/reader/_layout.tsx`.
- Improved user onboarding experience by adding a warning banner in the Home screen when Supabase environment variables are unconfigured, utilizing the new `isSupabaseConfigured` helper from `lib/supabase.ts`.
- Verified changes with successful linting and type-checking, ensuring no errors were present.

Author: Raoof128

AGENT.md

@@ -9,6 +9,17 @@ These rules govern the development of the Aion project.
 
 ## Change Log
 
+### 2026-05-21 (Australia/Sydney)
+**Raouf:**
+- **Scope:** Expo Router Layout and Supabase UX Warning
+- **Summary:** Resolved the Expo Router nested layout warning `[Layout children]: No route named "reader" exists in nested children` by creating a nested navigation layout wrapper (`app/reader/_layout.tsx`). Also improved user onboarding UX by detecting placeholder/unconfigured Supabase environment variables in `lib/supabase.ts` and showing a modern warning banner on the Home screen guiding the user on how to update their `.env` file.
+- **Files Changed:**
+  - [app/reader/_layout.tsx](file:///Users/raoof.r12/Desktop/Raouf/Aion/app/reader/_layout.tsx) - Created nested Stack router layout wrapper.
+  - [lib/supabase.ts](file:///Users/raoof.r12/Desktop/Raouf/Aion/lib/supabase.ts) - Exported `isSupabaseConfigured` helper checking for default placeholder values.
+  - [app/(tabs)/index.tsx](file:///Users/raoof.r12/Desktop/Raouf/Aion/app/(tabs)/index.tsx) - Added amber-colored alert warning banner when Supabase setup is required.
+- **Verification:** Ran `npm run lint` and `npm run type-check`, both completed successfully with 0 errors.
+- **Follow-ups:** None.
+
 ### 2026-05-21 (Australia/Sydney)
 **Raouf:**
 - **Scope:** Backend IDOR Security Fix

CHANGELOG.md

@@ -6,6 +6,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## Change Log
 
+### 2026-05-21 (Australia/Sydney)
+**Raouf:**
+- **Scope:** Expo Router Layout and Supabase UX Warning
+- **Summary:** Resolved the Expo Router nested layout warning `[Layout children]: No route named "reader" exists in nested children` by creating a nested navigation layout wrapper (`app/reader/_layout.tsx`). Also improved user onboarding UX by detecting placeholder/unconfigured Supabase environment variables in `lib/supabase.ts` and showing a modern warning banner on the Home screen guiding the user on how to update their `.env` file.
+- **Files Changed:**
+  - [app/reader/_layout.tsx](file:///Users/raoof.r12/Desktop/Raouf/Aion/app/reader/_layout.tsx) - Created nested Stack router layout wrapper.
+  - [lib/supabase.ts](file:///Users/raoof.r12/Desktop/Raouf/Aion/lib/supabase.ts) - Exported `isSupabaseConfigured` helper checking for default placeholder values.
+  - [app/(tabs)/index.tsx](file:///Users/raoof.r12/Desktop/Raouf/Aion/app/(tabs)/index.tsx) - Added amber-colored alert warning banner when Supabase setup is required.
+- **Verification:** Ran `npm run lint` and `npm run type-check`, both completed successfully with 0 errors.
+- **Follow-ups:** None.
+
 ### 2026-05-21 (Australia/Sydney)
 **Raouf:**
 - **Scope:** Backend IDOR Security Fix

app/(tabs)/index.tsx

@@ -28,11 +28,13 @@ import {
   Zap,
   BookOpen,
   ChevronRight,
+  AlertTriangle,
 } from "lucide-react-native";
 import { PromptPill } from "../../components/PromptPill";
 import { ChatInput } from "../../components/ChatInput";
 import { colors, fonts } from "../../lib/theme";
 import { getVerseOfTheDay } from "../../lib/bible-data";
+import { isSupabaseConfigured } from "../../lib/supabase";
 
 const PROMPT_SUGGESTIONS = [
   { Icon: Search, label: "Find verses with the number 444" },
@@ -116,6 +118,23 @@ export default function HomeScreen() {
             "Seek, and you shall find."
           </Animated.Text>
 
+          {/* Supabase Warning Banner */}
+          {!isSupabaseConfigured && (
+            <Animated.View
+              entering={FadeInDown.duration(400).delay(650)}
+              style={styles.warningCard}
+              accessibilityRole="alert"
+            >
+              <View style={styles.warningHeader}>
+                <AlertTriangle size={14} color={colors.warning} />
+                <Text style={styles.warningLabel}>Database Setup Required</Text>
+              </View>
+              <Text style={styles.warningContent}>
+                Please update your <Text style={styles.codeText}>.env</Text> file in the project root with your actual Supabase URL and Anon Key, then restart the Expo server.
+              </Text>
+            </Animated.View>
+          )}
+
           {/* Verse of the Day */}
           <Animated.View
             entering={FadeIn.duration(400).delay(700)}
@@ -325,4 +344,39 @@ const styles = StyleSheet.create({
     fontFamily: fonts.uiMedium,
     marginLeft: 12,
   },
+  warningCard: {
+    width: "100%",
+    maxWidth: 420,
+    backgroundColor: colors.warningBg,
+    borderWidth: 1,
+    borderColor: "rgba(245, 158, 11, 0.25)",
+    borderRadius: 16,
+    padding: 16,
+    marginBottom: 16,
+  },
+  warningHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 8,
+  },
+  warningLabel: {
+    color: colors.warning,
+    fontSize: 11,
+    fontFamily: fonts.uiBold,
+    letterSpacing: 1.5,
+    textTransform: "uppercase",
+  },
+  warningContent: {
+    color: colors.textPrimary,
+    fontSize: 13,
+    fontFamily: fonts.ui,
+    lineHeight: 18,
+    opacity: 0.9,
+  },
+  codeText: {
+    fontFamily: Platform.OS === "ios" ? "Courier" : "monospace",
+    fontWeight: "700",
+    color: colors.warning,
+  },
 });

app/reader/_layout.tsx

@@ -0,0 +1,18 @@
+import { Stack } from "expo-router";
+import { colors } from "../../lib/theme";
+
+export default function ReaderLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        contentStyle: { backgroundColor: colors.void },
+        animation: "slide_from_right",
+      }}
+    >
+      <Stack.Screen name="index" />
+      <Stack.Screen name="[bookId]/index" />
+      <Stack.Screen name="[bookId]/[chapter]" />
+    </Stack>
+  );
+}

lib/supabase.ts

@@ -5,11 +5,16 @@ import { createClient } from "@supabase/supabase-js";
 const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL || "https://placeholder-url.supabase.co";
 const supabaseAnonKey = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY || "placeholder-anon-key";
 
-if (
-  !process.env.EXPO_PUBLIC_SUPABASE_URL ||
-  process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY === "your-anon-key" ||
-  !process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY
-) {
+export const isSupabaseConfigured = !!(
+  process.env.EXPO_PUBLIC_SUPABASE_URL &&
+  process.env.EXPO_PUBLIC_SUPABASE_URL !== "https://your-project.supabase.co" &&
+  !process.env.EXPO_PUBLIC_SUPABASE_URL.includes("placeholder-url") &&
+  process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY &&
+  process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY !== "your-anon-key" &&
+  !process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY.includes("placeholder-anon-key")
+);
+
+if (!isSupabaseConfigured) {
   console.warn(
     "Warning: Supabase environment variables (EXPO_PUBLIC_SUPABASE_URL or EXPO_PUBLIC_SUPABASE_ANON_KEY) are missing or using placeholder values. Please check your .env file.",
   );