Add unarchive functionality and show archived status in admin dropdown

pages/index.vue

@@ -38,7 +38,7 @@
         </div>
         <div class="text-center mt-6">
           <h1 class="text-3xl font-bold text-gray-900">
-            Welcome to New Life! Please choose the sermon you'd like to see.
+            Welcome to New Life!
           </h1>
         </div>
       </div>
@@ -46,46 +46,31 @@
 
     <!-- Main Content -->
     <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-      <!-- Recent Sermons (Last 3 months) -->
-      <div v-if="recentSermons.length > 0">
-        <h2 class="text-2xl font-semibold text-gray-900 mb-6">Recent Sermons</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
-          <SermonCard 
-            v-for="sermon in recentSermons" 
-            :key="sermon.id" 
-            :sermon="sermon" 
-          />
+      <!-- Most Recent Sermon -->
+      <div v-if="mostRecentSermon">
+        <h2 class="text-2xl font-semibold text-gray-900 mb-6">{{ sermonHeading }}</h2>
+        <div class="max-w-md mx-auto">
+          <SermonCard :sermon="mostRecentSermon" />
         </div>
       </div>
 
-      <!-- Older Sermons Dropdown -->
-      <div v-if="olderSermons.length > 0" class="mt-8">
-        <button
-          @click="showOlder = !showOlder"
-          class="w-full bg-white border border-gray-300 rounded-lg px-6 py-4 text-left hover:bg-gray-50 transition-colors flex items-center justify-between"
+      <!-- Previous Sermons Dropdown -->
+      <div v-if="previousSermons.length > 0" class="mt-12 max-w-2xl mx-auto">
+        <p class="text-center text-gray-700 mb-4">Use the dropdown below to view a previous sermon</p>
+        <select
+          v-model="selectedSermonSlug"
+          @change="navigateToSermon"
+          class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base"
         >
-          <span class="text-lg font-medium text-gray-900">View Older Sermons</span>
-          <svg 
-            :class="['w-5 h-5 text-gray-500 transition-transform', showOlder ? 'rotate-180' : '']"
-            fill="none" 
-            stroke="currentColor" 
-            viewBox="0 0 24 24"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-          </svg>
-        </button>
-        
-        <div v-if="showOlder" class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <SermonCard 
-            v-for="sermon in olderSermons" 
-            :key="sermon.id" 
-            :sermon="sermon" 
-          />
-        </div>
+          <option value="">-- Select a previous sermon --</option>
+          <option v-for="sermon in previousSermons" :key="sermon.id" :value="sermon.slug">
+            {{ sermon.title }} ({{ formatDate(sermon.date) }})
+          </option>
+        </select>
       </div>
 
       <!-- Empty State -->
-      <div v-if="recentSermons.length === 0 && olderSermons.length === 0" class="text-center py-12">
+      <div v-if="!mostRecentSermon" class="text-center py-12">
         <p class="text-gray-500 text-lg">No sermons available yet.</p>
       </div>
     </main>
@@ -93,39 +78,59 @@
 </template>
 
 <script setup lang="ts">
-const showOlder = ref(false)
-
 // Check authentication status
 const { data: authData } = await useFetch('/api/auth/verify')
 const isAuthenticated = computed(() => authData.value?.authenticated || false)
 
-// Fetch all sermons
-const { data: allSermons } = await useFetch('/api/sermons')
+// Fetch non-archived sermons only
+const { data: allSermons } = await useFetch('/api/sermons?includeArchived=false')
 
-// Calculate date 3 months ago
-const threeMonthsAgo = new Date()
-threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3)
+const selectedSermonSlug = ref('')
 
-// Split sermons into recent and older
-const recentSermons = computed(() => {
-  if (!allSermons.value) return []
-  return allSermons.value.filter((sermon: any) => {
-    const sermonDate = new Date(sermon.date)
-    return sermonDate >= threeMonthsAgo
-  })
+// Get most recent sermon
+const mostRecentSermon = computed(() => {
+  if (!allSermons.value || allSermons.value.length === 0) return null
+  return allSermons.value[0]
 })
 
-const olderSermons = computed(() => {
-  if (!allSermons.value) return []
-  return allSermons.value.filter((sermon: any) => {
-    const sermonDate = new Date(sermon.date)
-    return sermonDate < threeMonthsAgo
-  })
+// Get all previous sermons (excluding the most recent)
+const previousSermons = computed(() => {
+  if (!allSermons.value || allSermons.value.length <= 1) return []
+  return allSermons.value.slice(1)
 })
 
+// Check if most recent sermon is today
+const sermonHeading = computed(() => {
+  if (!mostRecentSermon.value) return 'Recent Sermon'
+  
+  const sermonDate = new Date(mostRecentSermon.value.date)
+  const today = new Date()
+  
+  // Compare dates (ignoring time)
+  const isToday = sermonDate.getFullYear() === today.getFullYear() &&
+                  sermonDate.getMonth() === today.getMonth() &&
+                  sermonDate.getDate() === today.getDate()
+  
+  return isToday ? "Today's Sermon" : 'Most Recent Sermon'
+})
+
+function formatDate(dateString: string) {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', { 
+    year: 'numeric', 
+    month: '2-digit', 
+    day: '2-digit' 
+  })
+}
+
+function navigateToSermon() {
+  if (selectedSermonSlug.value) {
+    navigateTo(`/${selectedSermonSlug.value}`)
+  }
+}
+
 async function handleLogout() {
   await $fetch('/api/auth/logout', { method: 'POST' })
-  // Refresh the page to update authentication state
   window.location.reload()
 }
 </script>