feat: separate prayer compose and calendar into different tabs

src/app/page.tsx

@@ -23,7 +23,7 @@ interface Prayer {
 }
 
 export default function Home() {
-  const [activeTab, setActiveTab] = useState<'home' | 'journal' | 'reflections' | 'settings'>('home');
+  const [activeTab, setActiveTab] = useState<'home' | 'compose' | 'journal' | 'reflections' | 'settings'>('home');
   const [prayers, setPrayers] = useState<Prayer[]>([]);
   const [editingPrayer, setEditingPrayer] = useState<Prayer | null>(null);
   
@@ -194,26 +194,25 @@ export default function Home() {
         <HomePage
           prayers={prayers}
           todayCount={prayers.filter(p => p.date === new Date().toISOString().split('T')[0]).length}
-          onStartPraying={() => setActiveTab('journal')}
+          onStartPraying={() => setActiveTab('compose')}
+        />
+      )}
+
+      {activeTab === 'compose' && (
+        <DailyEntry
+          date={date}
+          onDateChange={setDate}
+          text={text}
+          onTextChange={setText}
+          prayFor={prayFor}
+          onPrayForChange={setPrayFor}
+          onSubmit={handleSubmit}
+          isEditing={!!editingPrayer}
         />
       )}
 
       {activeTab === 'journal' && (
-        <>
-          <DailyEntry
-            date={date}
-            onDateChange={setDate}
-            text={text}
-            onTextChange={setText}
-            prayFor={prayFor}
-            onPrayForChange={setPrayFor}
-            onSubmit={handleSubmit}
-            isEditing={!!editingPrayer}
-          />
-          <div className="max-w-md mx-auto p-4">
-            <CalendarView prayers={prayers} onDayClick={handleDateClick} />
-          </div>
-        </>
+        <CalendarView prayers={prayers} onDayClick={handleDateClick} />
       )}
 
       {activeTab === 'reflections' && (

src/components/BottomNav.tsx

@@ -4,8 +4,8 @@ import React from 'react';
 import { useAuth } from '@/context/AuthContext';
 
 interface BottomNavProps {
-  activeTab: 'home' | 'journal' | 'reflections' | 'settings';
-  onTabChange: (tab: 'home' | 'journal' | 'reflections' | 'settings') => void;
+  activeTab: 'home' | 'compose' | 'journal' | 'reflections' | 'settings';
+  onTabChange: (tab: 'home' | 'compose' | 'journal' | 'reflections' | 'settings') => void;
 }
 
 export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
@@ -13,6 +13,7 @@ export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
 
   const navItems = [
     { id: 'home' as const, label: 'Home', icon: '🏠' },
+    { id: 'compose' as const, label: 'Compose', icon: '✍️' },
     { id: 'journal' as const, label: 'Journal', icon: '📅' },
     { id: 'reflections' as const, label: 'Reflections', icon: '📖' },
     { id: 'settings' as const, label: 'Settings', icon: '⚙️' },