feat: add 'Mark Prayed' button for prayer items with streak tracking

src/app/page.tsx

@@ -39,7 +39,6 @@ export default function Home() {
   const [prayFor, setPrayFor] = useState('');
   const [answered, setAnswered] = useState(false);
   const [answerDetails, setAnswerDetails] = useState('');
-  const [prayFrequency, setPrayFrequency] = useState(1); // 1-7 times per week
 
   const { user, loading: authLoading } = useAuth();
 
@@ -109,8 +108,6 @@ export default function Home() {
         prayFor: prayFor || undefined,
         answered,
         answerDetails: answerDetails || undefined,
-        prayFrequency,
-        lastPrayedFor: answered ? undefined : new Date().toISOString().split('T')[0],
       };
 
       if (editingPrayer) {
@@ -147,7 +144,6 @@ export default function Home() {
     setPrayFor(prayer.prayFor || '');
     setAnswered(prayer.answered || false);
     setAnswerDetails(prayer.answerDetails || '');
-    setPrayFrequency(prayer.prayFrequency || 1);
     setActiveTab('compose');
   };
 
@@ -161,6 +157,25 @@ export default function Home() {
     }
   };
 
+  const handleMarkPrayed = async (prayerId: string) => {
+    if (!user) return;
+    
+    try {
+      const today = new Date().toISOString().split('T')[0];
+      await updateDoc(doc(db, 'prayers', prayerId), {
+        lastPrayedFor: today,
+      });
+      
+      setPrayers(prev =>
+        prev.map(p => (p.id === prayerId ? { ...p, lastPrayedFor: today } : p))
+      );
+      toast.success('Prayed! 🙏');
+    } catch (error) {
+      console.error('Error marking prayed:', error);
+      toast.error('Failed to update');
+    }
+  };
+
   if (authLoading) {
     return (
       <div className="min-h-screen bg-gradient-to-br from-slate-900 via-black to-slate-800 flex items-center justify-center p-4">
@@ -227,8 +242,6 @@ export default function Home() {
           onAnsweredChange={setAnswered}
           answerDetails={answerDetails}
           onAnswerDetailsChange={setAnswerDetails}
-          prayFrequency={prayFrequency}
-          onPrayFrequencyChange={setPrayFrequency}
           onSubmit={handleSubmit}
           isEditing={!!editingPrayer}
         />
@@ -243,7 +256,7 @@ export default function Home() {
       )}
 
       {activeTab === 'praying' && (
-        <ThingsToPrayFor prayers={prayers.filter(p => !p.answered)} onEdit={handleSelectPrayer} />
+        <ThingsToPrayFor prayers={prayers.filter(p => !p.answered)} onEdit={handleSelectPrayer} onMarkPrayed={handleMarkPrayed} />
       )}
 
       {activeTab === 'reflections' && (

src/components/DailyEntry.tsx

@@ -14,8 +14,6 @@ interface DailyEntryProps {
   onAnsweredChange?: (answered: boolean) => void;
   answerDetails?: string;
   onAnswerDetailsChange?: (details: string) => void;
-  prayFrequency?: number;
-  onPrayFrequencyChange?: (frequency: number) => void;
   onSubmit: (e: React.FormEvent) => void;
   loading?: boolean;
   isEditing?: boolean;
@@ -32,8 +30,6 @@ export default function DailyEntry({
   onAnsweredChange,
   answerDetails = '',
   onAnswerDetailsChange,
-  prayFrequency = 1,
-  onPrayFrequencyChange,
   onSubmit,
   loading = false,
   isEditing = false,
@@ -120,28 +116,6 @@ export default function DailyEntry({
             </label>
           </div>
 
-          {/* Prayer Frequency Slider */}
-          <div className="bg-slate-800/40 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50">
-            <div className="mb-3">
-              <label className="block text-sm font-semibold text-slate-300 mb-2">📅 Pray For (times per week)</label>
-              <div className="flex items-center justify-between">
-                <input
-                  type="range"
-                  min="1"
-                  max="7"
-                  value={prayFrequency}
-                  onChange={(e) => onPrayFrequencyChange?.(parseInt(e.target.value))}
-                  className="flex-1 h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-500"
-                />
-                <span className="ml-4 text-lg font-bold text-blue-400 min-w-[50px]">{prayFrequency}x</span>
-              </div>
-              <div className="flex justify-between text-xs text-slate-500 mt-2">
-                <span>1× week</span>
-                <span>Daily</span>
-              </div>
-            </div>
-          </div>
-
           {/* Answer Details */}
           {answered && (
             <div className="bg-green-900/20 backdrop-blur-xl rounded-xl p-4 border border-green-500/30 animate-in fade-in-50 duration-300">

src/components/HomePage.tsx

@@ -34,16 +34,25 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
   const calculateStreak = () => {
     if (prayers.length === 0) return 0;
     
-    const prayerDates = Array.from(new Set(prayers.map(p => p.date))).sort().reverse();
+    // Get all dates where user either created a prayer OR marked something as prayed for
+    const activityDates = new Set<string>();
+    prayers.forEach(p => {
+      activityDates.add(p.date); // Date prayer was created
+      if (p.lastPrayedFor) {
+        activityDates.add(p.lastPrayedFor); // Date marked as prayed for
+      }
+    });
+    
+    const sortedDates = Array.from(activityDates).sort().reverse();
     let streak = 0;
     let checkDate = new Date(today);
     
     for (let i = 0; i < 365; i++) {
       const dateStr = checkDate.toISOString().split('T')[0];
-      if (prayerDates.includes(dateStr)) {
+      if (sortedDates.includes(dateStr)) {
         streak++;
       } else if (i === 0) {
-        // If today has no prayer, streak is broken (unless we haven't prayed today yet, which is ok)
+        // If today has no activity, streak is broken
         break;
       } else {
         break;
@@ -54,23 +63,7 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
     return streak;
   };
   
-  // Calculate frequency compliance - how many active items being prayed for
-  const frequencyCompliance = () => {
-    const activePrayers = prayers.filter(p => !p.answered && p.prayFrequency);
-    if (activePrayers.length === 0) return 0;
-    
-    // Check today's date
-    const todayPrayers = prayers.filter(p => p.date === today);
-    return {
-      total: activePrayers.length,
-      prayedToday: activePrayers.filter(ap => 
-        todayPrayers.some(tp => tp.prayFor === ap.prayFor || tp.id === ap.id)
-      ).length,
-    };
-  };
-  
   const streak = calculateStreak();
-  const frequencyStats = frequencyCompliance();
   
   // Calculate more stats
   const avgPrayerLength = totalPrayers > 0 

src/components/ThingsToPrayFor.tsx

@@ -17,9 +17,10 @@ interface Prayer {
 interface ThingsToPrayForProps {
   prayers: Prayer[];
   onEdit: (prayer: Prayer) => void;
+  onMarkPrayed: (prayerId: string) => void;
 }
 
-export default function ThingsToPrayFor({ prayers, onEdit }: ThingsToPrayForProps) {
+export default function ThingsToPrayFor({ prayers, onEdit, onMarkPrayed }: ThingsToPrayForProps) {
   // Filter for unanswered prayers
   const thingsToPrayFor = prayers.filter(p => !p.answered).sort((a, b) => 
     new Date(b.date).getTime() - new Date(a.date).getTime()
@@ -78,52 +79,50 @@ export default function ThingsToPrayFor({ prayers, onEdit }: ThingsToPrayForProp
                     const daysAgo = Math.floor(
                       (new Date().getTime() - new Date(prayer.date).getTime()) / (1000 * 60 * 60 * 24)
                     );
+                    const today = new Date().toISOString().split('T')[0];
+                    const prayedToday = prayer.lastPrayedFor === today;
                     
                     return (
-                      <button
+                      <div
                         key={prayer.id}
-                        onClick={() => onEdit(prayer)}
-                        className="w-full text-left group bg-slate-800/60 backdrop-blur-xl rounded-xl p-5 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-2"
+                        className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-5 shadow-md border border-slate-700/50 transition-all hover:shadow-xl hover:bg-slate-800/80"
                       >
                         <div className="flex items-start gap-3">
                           <div className="text-3xl mt-0.5">🙏</div>
                           <div className="flex-1 min-w-0">
-                            <p className="text-base text-slate-200 group-hover:text-white line-clamp-3">
+                            <p className="text-base text-slate-200 line-clamp-3 mb-3">
                               {prayer.text}
                             </p>
-                            <div className="mt-3 space-y-2">
-                              <div className="flex items-center justify-between text-xs">
-                                <span className="text-slate-500">
-                                  {daysAgo === 0 ? 'Today' : daysAgo === 1 ? 'Yesterday' : `${daysAgo} days ago`}
-                                </span>
-                                <span className="text-blue-400 opacity-0 group-hover:opacity-100 transition-opacity">
-                                  Edit →
-                                </span>
+                            <div className="flex items-center justify-between gap-3">
+                              <span className="text-xs text-slate-500">
+                                {daysAgo === 0 ? 'Today' : daysAgo === 1 ? 'Yesterday' : `${daysAgo} days ago`}
+                              </span>
+                              <div className="flex items-center gap-2">
+                                <button
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    onMarkPrayed(prayer.id);
+                                  }}
+                                  disabled={prayedToday}
+                                  className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${
+                                    prayedToday
+                                      ? 'bg-green-900/40 text-green-300 border border-green-500/30 cursor-not-allowed'
+                                      : 'bg-blue-900/40 text-blue-300 border border-blue-500/30 hover:bg-blue-900/60 hover:border-blue-400/50'
+                                  }`}
+                                >
+                                  {prayedToday ? '✓ Prayed Today' : '🙏 Mark Prayed'}
+                                </button>
+                                <button
+                                  onClick={() => onEdit(prayer)}
+                                  className="px-3 py-1.5 rounded-lg text-xs font-semibold bg-slate-700/50 text-slate-300 border border-slate-600/50 hover:bg-slate-700/80 hover:border-slate-500/50 transition-all"
+                                >
+                                  Edit
+                                </button>
                               </div>
-                              {prayer.prayFrequency && (
-                                <div className="flex items-center gap-2">
-                                  <div className="text-xs font-semibold text-amber-400">Pray:</div>
-                                  <div className="flex gap-1">
-                                    {Array.from({ length: prayer.prayFrequency }).map((_, i) => (
-                                      <div
-                                        key={i}
-                                        className="w-2 h-2 rounded-full bg-amber-400/60"
-                                      />
-                                    ))}
-                                    {Array.from({ length: 7 - prayer.prayFrequency }).map((_, i) => (
-                                      <div
-                                        key={`empty-${i}`}
-                                        className="w-2 h-2 rounded-full bg-slate-600/40"
-                                      />
-                                    ))}
-                                  </div>
-                                  <span className="text-xs text-slate-400">× per week</span>
-                                </div>
-                              )}
                             </div>
                           </div>
                         </div>
-                      </button>
+                      </div>
                     );
                   })}
                 </div>