v0.4.0: Dashboard navigation, enhanced Today's Prayers, fresh compose form

package.json

@@ -1,6 +1,6 @@
 {
   "name": "prayer",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": true,
   "type": "module",
   "scripts": {

src/app/page.tsx

@@ -30,6 +30,14 @@ interface Prayer {
   prayedDates?: string[]; // Array of dates when prayed for
 }
 
+const getLocalISODate = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const day = String(now.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
 export default function Home() {
   const [activeTab, setActiveTab] = useState<'home' | 'compose' | 'journal' | 'answered' | 'praying' | 'reflections' | 'about'>('home');
   const [prayers, setPrayers] = useState<Prayer[]>([]);
@@ -38,7 +46,7 @@ export default function Home() {
   const [mostPrayedFor, setMostPrayedFor] = useState<string>('');
   
   // Form state
-  const [date, setDate] = useState(new Date().toISOString().split('T')[0]);
+  const [date, setDate] = useState(getLocalISODate());
   const [text, setText] = useState('');
   const [prayFor, setPrayFor] = useState('');
   const [answered, setAnswered] = useState(false);
@@ -79,53 +87,6 @@ export default function Home() {
     fetchPrayerStatistics();
   }, [user]);
 
-  // Load draft from Firebase
-  useEffect(() => {
-    if (!user) return;
-
-    const loadDraft = async () => {
-      try {
-        const draftRef = doc(db, 'users', user.uid, 'drafts', 'currentPrayer');
-        const draftSnap = await getDoc(draftRef);
-        
-        if (draftSnap.exists()) {
-          const draftData = draftSnap.data();
-          setDate(draftData.date || new Date().toISOString().split('T')[0]);
-          setText(draftData.text || '');
-          setPrayFor(draftData.prayFor || '');
-        }
-      } catch (error: any) {
-        // Silently fail if offline
-        if (error?.code !== 'unavailable') {
-          console.error('Error loading draft:', error);
-        }
-      }
-    };
-
-    loadDraft();
-  }, [user]);
-
-  // Save draft to Firebase
-  useEffect(() => {
-    if (!user) return;
-
-    const saveDraft = async () => {
-      try {
-        const draftRef = doc(db, 'users', user.uid, 'drafts', 'currentPrayer');
-        await setDoc(draftRef, { date, text, prayFor, updatedAt: new Date().toISOString() }, { merge: true });
-      } catch (error: any) {
-        // Silently fail if offline - will sync when connection is restored
-        if (error?.code !== 'unavailable') {
-          console.error('Error saving draft:', error);
-        }
-      }
-    };
-
-    // Debounce the save to avoid too many writes
-    const timeoutId = setTimeout(saveDraft, 1000);
-    return () => clearTimeout(timeoutId);
-  }, [date, text, prayFor, user]);
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -172,15 +133,11 @@ export default function Home() {
       }
 
       // Reset form
-      setDate(new Date().toISOString().split('T')[0]);
+      setDate(getLocalISODate());
       setText('');
       setPrayFor('');
-      
+      setAnswered(false);
-      // Clear draft from Firebase
+      setAnswerDetails('');
-      if (user) {
-        const draftRef = doc(db, 'users', user.uid, 'drafts', 'currentPrayer');
-        await setDoc(draftRef, { date: new Date().toISOString().split('T')[0], text: '', prayFor: '' });
-      }
     } catch (error) {
       console.error('Error saving prayer:', error);
       toast.error('Failed to save prayer');
@@ -262,18 +219,14 @@ export default function Home() {
     if (!user) return;
     
     try {
-      const today = new Date().toISOString().split('T')[0];
+      const today = getLocalISODate();
       const prayer = prayers.find(p => p.id === prayerId);
       
       if (!prayer) return;
       
       // Get existing prayed dates or initialize array
       const existingDates = prayer.prayedDates || [];
-      
+      const updatedDates = [...existingDates, today];
-      // Add today's date if not already in the array
-      const updatedDates = existingDates.includes(today) 
-        ? existingDates 
-        : [...existingDates, today];
       
       await updateDoc(doc(db, 'prayers', prayerId), {
         lastPrayedFor: today,
@@ -377,9 +330,12 @@ export default function Home() {
       {activeTab === 'home' && (
         <HomePage
           prayers={prayers}
-          todayCount={prayers.filter(p => p.date === new Date().toISOString().split('T')[0]).length}
           onStartPraying={() => setActiveTab('compose')}
           onSelectPrayer={handleSelectPrayer}
+          onGoToPraying={() => setActiveTab('praying')}
+          onGoToAnswered={() => setActiveTab('answered')}
+          onGoToJournal={() => setActiveTab('journal')}
+          onGoToReflections={() => setActiveTab('reflections')}
           userName={user.displayName || user.email || undefined}
           mostPrayedFor={mostPrayedFor}
         />

src/components/HomePage.tsx

@@ -4,6 +4,14 @@ import { useState, useEffect } from 'react';
 import Clock from './Clock';
 import { HandHeart, CheckCircle2, PenSquare, BookOpen, Sparkles, Flame, BarChart3, MessageSquare } from 'lucide-react';
 
+const getLocalISODate = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const day = String(now.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
 interface Prayer {
   id: string;
   userId: string;
@@ -19,21 +27,48 @@ interface Prayer {
 
 interface HomePageProps {
   prayers: Prayer[];
-  todayCount: number;
   onStartPraying: () => void;
   onSelectPrayer: (prayer: Prayer) => void;
+  onGoToPraying: () => void;
+  onGoToAnswered: () => void;
+  onGoToJournal: () => void;
+  onGoToReflections: () => void;
   userName?: string;
   mostPrayedFor?: string;
 }
 
-export default function HomePage({ prayers, todayCount, onStartPraying, onSelectPrayer, userName, mostPrayedFor }: HomePageProps) {
+export default function HomePage({ prayers, onStartPraying, onSelectPrayer, onGoToPraying, onGoToAnswered, onGoToJournal, onGoToReflections, userName, mostPrayedFor }: HomePageProps) {
-  const today = new Date().toISOString().split('T')[0];
+  const today = getLocalISODate();
-  const todayPrayers = prayers.filter(p => p.date === today);
   const recentPrayers = prayers.slice(0, 5);
   const totalPrayers = prayers.length;
   const uniqueDays = new Set(prayers.map(p => p.date)).size;
   const answeredPrayers = prayers.filter(p => p.answered).length;
 
+  const prayedTodayDetails = prayers
+    .map(prayer => {
+      const dates = prayer.prayedDates && prayer.prayedDates.length > 0
+        ? prayer.prayedDates
+        : prayer.lastPrayedFor
+          ? [prayer.lastPrayedFor]
+          : [];
+
+      const todayOccurrences = dates.filter(d => d === today).length;
+      if (todayOccurrences === 0) return null;
+
+      return {
+        id: prayer.id,
+        title: prayer.prayFor || prayer.text || 'Prayer',
+        count: todayOccurrences,
+      };
+    })
+    .filter(Boolean) as { id: string; title: string; count: number }[];
+
+  const todaysUniquePrayers = prayedTodayDetails.length;
+  const todaysTotalTaps = prayedTodayDetails.reduce((sum, item) => sum + item.count, 0);
+  const topTodayPrayers = [...prayedTodayDetails]
+    .sort((a, b) => b.count - a.count || a.title.localeCompare(b.title))
+    .slice(0, 3);
+  
   // Get greeting based on time of day
   const getGreeting = () => {
     const hour = new Date().getHours();
@@ -57,12 +92,15 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
   const activePrayerCount = prayers.filter(p => !p.answered).length;
   
   // Count how many active prayers were prayed for today
-  const prayedTodayCount = prayers.filter(p => 
+  const prayedTodayCount = prayers.filter(p => {
-    !p.answered && (
+    if (p.answered) return false;
-      p.prayedDates?.includes(today) || 
+    const dates = p.prayedDates && p.prayedDates.length > 0
-      p.lastPrayedFor === today
+      ? p.prayedDates
-    )
+      : p.lastPrayedFor
-  ).length;
+        ? [p.lastPrayedFor]
+        : [];
+    return dates.some(d => d === today);
+  }).length;
   
   // Calculate actual streak - consecutive days with prayers
   const calculateStreak = () => {
@@ -162,37 +200,99 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
         <div className="max-w-md mx-auto mb-12">
           {/* Today's Prayers - Featured */}
           <div className="mb-4 bg-gradient-to-br from-blue-600 to-blue-700 rounded-2xl p-6 shadow-xl border border-blue-500/20 backdrop-blur-lg">
-            <div className="flex items-end justify-between">
+            <div className="flex items-start justify-between">
               <div>
-                <div className="text-blue-200 text-sm font-semibold mb-2">Today's Prayers</div>
+                <div className="text-blue-200 text-sm font-semibold mb-1">Today's Prayers</div>
-                <div className="text-5xl font-bold text-white">{todayCount}</div>
+                <div className="text-5xl font-bold text-white">{todaysUniquePrayers}</div>
+                <div className="text-sm text-blue-100/80">unique prayed items</div>
+              </div>
+              <div className="text-right">
+                <div className="text-xs text-blue-100/70">Total taps</div>
+                <div className="text-2xl font-semibold text-white">{todaysTotalTaps}</div>
               </div>
-              <HandHeart className="w-10 h-10 text-white opacity-20" />
             </div>
+
+            {topTodayPrayers.length > 0 ? (
+              <div className="mt-4 space-y-2">
+                {topTodayPrayers.map(item => (
+                  <div key={item.id} className="flex items-center justify-between bg-white/5 border border-white/10 rounded-lg px-3 py-2">
+                    <div className="flex items-center gap-2 min-w-0">
+                      <HandHeart className="w-4 h-4 text-blue-100" />
+                      <div className="text-sm text-white truncate" title={item.title}>{item.title}</div>
+                    </div>
+                    <div className="text-xs text-blue-100/80 whitespace-nowrap">{item.count} {item.count === 1 ? 'tap' : 'taps'}</div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="mt-4 text-sm text-blue-100/80 flex items-center gap-2">
+                <HandHeart className="w-4 h-4" /> Mark a prayer as prayed to see it here.
+              </div>
+            )}
           </div>
 
+          {/* Things to Pray For - Active Requests */}
+          {(() => {
+            const pendingPrayers = prayers.filter(p => !p.answered);
+            if (pendingPrayers.length > 0) {
+              return (
+                <button
+                  onClick={onGoToPraying}
+                  className="w-full text-left mb-4 bg-amber-900/20 backdrop-blur-xl rounded-2xl p-6 border border-amber-500/30 hover:border-amber-400/50 transition-all focus:outline-none focus:ring-2 focus:ring-amber-300 focus:ring-offset-2 focus:ring-offset-slate-900"
+                >
+                  <div className="flex items-start justify-between">
+                    <div>
+                      <div className="text-amber-200 text-sm font-semibold mb-1 flex items-center gap-2">
+                        <HandHeart className="w-4 h-4" /> Things to Pray For
+                      </div>
+                      <div className="text-4xl font-bold text-amber-200">{pendingPrayers.length}</div>
+                      <div className="text-sm text-amber-200/80">active prayer requests</div>
+                    </div>
+                    <div className="text-xs font-semibold text-amber-200/90 flex items-center gap-1">
+                      <span>Tap to review</span>
+                      <span>→</span>
+                    </div>
+                  </div>
+                </button>
+              );
+            }
+            return null;
+          })()}
+
           {/* Main Stats Grid */}
           <div className="grid grid-cols-2 gap-4 mb-8">
             {/* Total Prayers */}
-            <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
+            <button
+              onClick={onGoToReflections}
+              className="text-left bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all w-full focus:outline-none focus:ring-2 focus:ring-blue-400/60 focus:ring-offset-2 focus:ring-offset-slate-900"
+            >
               <div className="text-slate-400 text-xs font-semibold mb-2">Total Prayers</div>
               <div className="text-3xl font-bold text-white">{totalPrayers}</div>
               <div className="text-xs text-slate-500 mt-2">All time</div>
-            </div>
+              <div className="text-[11px] text-blue-300 mt-1 flex items-center gap-1">Go to Reflections →</div>
+            </button>
 
             {/* Days Prayed */}
-            <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
+            <button
+              onClick={onGoToJournal}
+              className="text-left bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all w-full focus:outline-none focus:ring-2 focus:ring-blue-400/60 focus:ring-offset-2 focus:ring-offset-slate-900"
+            >
               <div className="text-slate-400 text-xs font-semibold mb-2">Days Prayed</div>
               <div className="text-3xl font-bold text-white">{uniqueDays}</div>
               <div className="text-xs text-slate-500 mt-2">Consistent</div>
-            </div>
+              <div className="text-[11px] text-blue-300 mt-1 flex items-center gap-1">Open Journal →</div>
+            </button>
 
             {/* Answered Prayers */}
-            <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
+            <button
+              onClick={onGoToAnswered}
+              className="text-left bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all w-full focus:outline-none focus:ring-2 focus:ring-blue-400/60 focus:ring-offset-2 focus:ring-offset-slate-900"
+            >
               <div className="text-slate-400 text-xs font-semibold mb-2 inline-flex items-center gap-1.5"><CheckCircle2 className="w-4 h-4" /> Answered</div>
               <div className="text-3xl font-bold text-green-400">{answeredPrayers}</div>
               <div className="text-xs text-slate-500 mt-2">{answeredPercentage}% answered</div>
-            </div>
+              <div className="text-[11px] text-green-300 mt-1 flex items-center gap-1">See answers →</div>
+            </button>
 
             {/* Streak */}
             <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
@@ -240,69 +340,6 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
           </button>
         </div>
 
-        {/* Things to Pray For - Active Requests */}
-        {(() => {
-          const pendingPrayers = prayers.filter(p => !p.answered);
-          if (pendingPrayers.length > 0) {
-            return (
-              <div className="max-w-md mx-auto mb-12">
-                <h2 className="text-lg font-bold text-amber-400 mb-4 flex items-center gap-2">
-                  <HandHeart className="w-5 h-5" /> Things to Pray For
-                </h2>
-                <div className="bg-amber-900/20 backdrop-blur-xl rounded-xl p-5 border border-amber-500/30 hover:border-amber-400/50 transition-all">
-                  <div className="text-3xl font-bold text-amber-300 mb-2">{pendingPrayers.length}</div>
-                  <div className="text-sm text-amber-200 mb-4">active prayer requests</div>
-                  <button
-                    onClick={() => {
-                      const fakeEvent = { target: { value: 'praying' } } as any;
-                      // Navigate to praying tab by triggering parent
-                    }}
-                    className="text-xs font-semibold text-amber-300 hover:text-amber-200 transition-colors flex items-center gap-1 group"
-                  >
-                    <span>View All</span>
-                    <span className="group-hover:translate-x-1 transition-transform">→</span>
-                  </button>
-                </div>
-              </div>
-            );
-          }
-          return null;
-        })()}
-
-        {/* Recent Prayers */}
-        {recentPrayers.length > 0 && (
-          <div className="max-w-md mx-auto mb-12">
-            <h2 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
-              <BookOpen className="w-5 h-5" /> Recent Prayers
-            </h2>
-            <div className="space-y-3">
-              {recentPrayers.map((prayer, idx) => (
-                <button
-                  key={prayer.id}
-                  onClick={() => onSelectPrayer(prayer)}
-                  className="w-full text-left group bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 shadow-md border border-slate-700/50 hover:border-blue-500/50 transition-all hover:shadow-xl hover:bg-slate-800/80 transform hover:translate-x-1"
-                >
-                  <div className="flex items-start gap-3">
-                    <div className="text-2xl">{prayer.answered ? <CheckCircle2 className="w-6 h-6 text-green-400" /> : <PenSquare className="w-6 h-6 text-blue-400" />}</div>
-                    <div className="flex-1 min-w-0">
-                      {prayer.prayFor && (
-                        <div className="text-xs font-bold text-blue-400 mb-1 uppercase tracking-wider inline-flex items-center gap-1.5">
-                          <HandHeart className="w-3.5 h-3.5" /> {prayer.prayFor}
-                        </div>
-                      )}
-                      <p className="text-sm text-slate-300 line-clamp-2 group-hover:text-slate-200">{prayer.text}</p>
-                      <div className="text-xs text-slate-500 mt-2 flex items-center justify-between">
-                        <span>{new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
-                        <span className="text-blue-400 opacity-0 group-hover:opacity-100 transition-opacity">Click to edit →</span>
-                      </div>
-                    </div>
-                  </div>
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-
         {/* Recent Answered Prayers */}
         {recentAnswered.length > 0 && (
           <div className="max-w-md mx-auto mb-12">

src/lib/version.ts

@@ -1,8 +1,8 @@
-export const APP_VERSION = '0.3.0';
+export const APP_VERSION = '0.4.0';
 
 export const WHATS_NEW_BRIEF: string[] = [
-  'Firebase Migration: all data now syncs across devices',
+  'Dashboard Navigation: tap stat cards to jump to relevant sections',
-  'Calendar: persistent prayer tracking with multi-day support',
+  'Today\'s Prayers: shows unique prayers + total taps with details',
-  'Loading UX: smooth auth and data loading transitions',
+  'Fresh Compose: no draft persistence, clean slate every time',
-  'Offline Support: IndexedDB persistence for reliability'
+  'Quick Access: Things to Pray For card now tappable'
 ];