feat: make recent prayers clickable to edit from dashboard

src/app/page.tsx

@@ -204,6 +204,7 @@ export default function Home() {
           prayers={prayers}
           todayCount={prayers.filter(p => p.date === new Date().toISOString().split('T')[0]).length}
           onStartPraying={() => setActiveTab('compose')}
+          onSelectPrayer={handleSelectPrayer}
         />
       )}
 

src/components/HomePage.tsx

@@ -16,9 +16,10 @@ interface HomePageProps {
   prayers: Prayer[];
   todayCount: number;
   onStartPraying: () => void;
+  onSelectPrayer: (prayer: Prayer) => void;
 }
 
-export default function HomePage({ prayers, todayCount, onStartPraying }: HomePageProps) {
+export default function HomePage({ prayers, todayCount, onStartPraying, onSelectPrayer }: HomePageProps) {
   const today = new Date().toISOString().split('T')[0];
   const todayPrayers = prayers.filter(p => p.date === today);
   const recentPrayers = prayers.slice(0, 5);
@@ -117,9 +118,10 @@ export default function HomePage({ prayers, todayCount, onStartPraying }: HomePa
             </h2>
             <div className="space-y-3">
               {recentPrayers.map((prayer, idx) => (
-                <div
+                <button
                   key={prayer.id}
-                  className="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"
+                  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 ? '✅' : '📝'}</div>
@@ -130,12 +132,13 @@ export default function HomePage({ prayers, todayCount, onStartPraying }: HomePa
                         </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">
-                        {new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+                      <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>
-                </div>
+                </button>
               ))}
             </div>
           </div>