Saving notes and username fixes

pages/[slug].vue

@@ -158,6 +158,9 @@
           <h2 class="text-2xl font-semibold text-gray-900 mb-4">My Notes</h2>
           <ClientOnly>
             <div v-if="isAuthenticated">
+              <p class="mb-3 text-sm text-red-600 font-medium">
+                ⚠️ Notes are deleted if a Sermon is deleted by an admin. Please email or download notes to have a copy sent to you.
+              </p>
               <textarea
                 v-model="notes"
                 @input="handleNotesChange"
@@ -171,6 +174,28 @@
                 </p>
                 <p v-else class="text-sm text-gray-500">Notes are automatically saved</p>
               </div>
+              <div class="mt-4 flex gap-3">
+                <button
+                  @click="emailNotes"
+                  :disabled="emailStatus === 'sending'"
+                  class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed font-medium transition-colors"
+                >
+                  <span v-if="emailStatus === 'sending'">Sending...</span>
+                  <span v-else>📧 Email Notes</span>
+                </button>
+                <button
+                  @click="downloadNotes"
+                  class="flex-1 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium transition-colors"
+                >
+                  📥 Download Notes
+                </button>
+              </div>
+              <p v-if="emailStatus === 'success'" class="mt-2 text-sm text-green-600">
+                Email sent successfully!
+              </p>
+              <p v-if="emailStatus === 'error'" class="mt-2 text-sm text-red-600">
+                Failed to send email. Please try again.
+              </p>
             </div>
             <div v-else class="bg-gray-50 rounded-lg p-8 text-center border-2 border-dashed border-gray-300">
               <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -236,6 +261,7 @@ const fontSize = ref('medium')
 // Notes state
 const notes = ref('')
 const saveStatus = ref('')
+const emailStatus = ref('')
 let saveTimeout: NodeJS.Timeout | null = null
 
 // Load notes when sermon is loaded and user is authenticated
@@ -354,4 +380,40 @@ function formatDateRange(sermon: any) {
   // Format all dates and join with " - "
   return dates.map(formatWithDayName).join(' - ')
 }
+
+// Email notes function
+const emailNotes = async () => {
+  if (!sermon.value) return
+  
+  emailStatus.value = 'sending'
+  
+  try {
+    await $fetch(`/api/notes/email/${sermon.value.id}`, {
+      method: 'POST'
+    })
+    emailStatus.value = 'success'
+    setTimeout(() => {
+      emailStatus.value = ''
+    }, 3000)
+  } catch (error) {
+    console.error('Failed to email notes:', error)
+    emailStatus.value = 'error'
+    setTimeout(() => {
+      emailStatus.value = ''
+    }, 3000)
+  }
+}
+
+// Download notes function
+const downloadNotes = () => {
+  if (!sermon.value) return
+  
+  // Create a link and trigger download
+  const link = document.createElement('a')
+  link.href = `/api/notes/download/${sermon.value.id}`
+  link.download = `sermon-notes-${sermon.value.slug}.txt`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
 </script>

pages/admin.vue

@@ -609,7 +609,7 @@ async function handleUnarchive() {
 async function handleDelete() {
   if (!selectedSermonId.value) return
   
-  if (!confirm('Are you sure you want to permanently delete this sermon?')) {
+  if (!confirm('Are you sure you want to permanently delete this sermon?\n\n⚠️ WARNING: Deleting this sermon will also delete everyone\'s sermon notes for this sermon. This action cannot be undone.')) {
     return
   }