Notes!

pages/[slug].vue

@@ -95,6 +95,41 @@
           </div>
         </section>
 
+        <!-- Notes Section -->
+        <section class="mb-8">
+          <h2 class="text-2xl font-semibold text-gray-900 mb-4">My Notes</h2>
+          <ClientOnly>
+            <div v-if="isAuthenticated">
+              <textarea
+                v-model="notes"
+                @input="handleNotesChange"
+                placeholder="Take notes during the sermon..."
+                class="w-full h-64 px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-y"
+                :class="fontSizeClasses"
+              ></textarea>
+              <div class="mt-2 flex items-center justify-between">
+                <p v-if="saveStatus" class="text-sm" :class="saveStatus === 'Saved' ? 'text-green-600' : 'text-gray-500'">
+                  {{ saveStatus }}
+                </p>
+                <p v-else class="text-sm text-gray-500">Notes are automatically saved</p>
+              </div>
+            </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">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+              </svg>
+              <h3 class="text-lg font-medium text-gray-900 mb-2">Want to take notes?</h3>
+              <p class="text-gray-600 mb-4">Log in or create an account to save your sermon notes!</p>
+              <NuxtLink 
+                to="/login"
+                class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium"
+              >
+                Log In / Sign Up
+              </NuxtLink>
+            </div>
+          </ClientOnly>
+        </section>
+
         <!-- Back Button -->
         <div class="border-t pt-6">
           <NuxtLink 
@@ -134,10 +169,55 @@ const route = useRoute()
 const slug = route.params.slug as string
 
 const { data: sermon } = await useFetch(`/api/sermons/${slug}`)
+const { data: authData } = await useFetch('/api/auth/verify')
+const isAuthenticated = computed(() => authData.value?.authenticated || false)
 
 // Font size state
 const fontSize = ref('medium')
 
+// Notes state
+const notes = ref('')
+const saveStatus = ref('')
+let saveTimeout: NodeJS.Timeout | null = null
+
+// Load notes when sermon is loaded and user is authenticated
+watch([sermon, isAuthenticated], async ([sermonData, authenticated]) => {
+  if (sermonData && authenticated) {
+    try {
+      const response = await $fetch(`/api/notes/${sermonData.id}`)
+      notes.value = response.notes || ''
+    } catch (error) {
+      console.error('Failed to load notes:', error)
+    }
+  }
+}, { immediate: true })
+
+function handleNotesChange() {
+  saveStatus.value = 'Saving...'
+  
+  // Clear existing timeout
+  if (saveTimeout) {
+    clearTimeout(saveTimeout)
+  }
+  
+  // Set new timeout to save after 1 second of no typing
+  saveTimeout = setTimeout(async () => {
+    try {
+      await $fetch(`/api/notes/${sermon.value!.id}`, {
+        method: 'POST',
+        body: { notes: notes.value }
+      })
+      saveStatus.value = 'Saved'
+      setTimeout(() => {
+        saveStatus.value = ''
+      }, 2000)
+    } catch (error) {
+      saveStatus.value = 'Failed to save'
+      console.error('Failed to save notes:', error)
+    }
+  }, 1000)
+}
+
 const bibleReferences = computed(() => {
   if (!sermon.value?.bible_references) return []
   try {