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' && (