Add title input field, capture email/displayName, auto-generate title from first 4 words if empty

index.html

@@ -58,6 +58,10 @@
       <span id="graphStatus" class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-600">Graph: checking…</span>
     </div>
     <div class="space-y-4">
+      <div>
+        <label for="noteTitle" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
+        <input type="text" id="noteTitle" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter note title (optional)">
+      </div>
       <div class="flex items-center justify-between">
         <label class="block text-sm font-medium text-gray-700">Note Text</label>
         <button id="voiceBtn" class="flex items-center gap-2 px-3 py-1 rounded bg-purple-600 text-white text-sm font-semibold hover:bg-purple-700 transition-colors" title="Click to speak">
@@ -126,6 +130,7 @@
     const NOTE_BODY_PLAIN_FIELD = 'body_plain';
     const NOTE_USERNAME_FIELD = 'Username';
     let displayNameCache = 'Unknown User';
+    let userEmailCache = '';
     let mediaRecorder = null;
     let recordedChunks = [];
     let recordedBlob = null;
@@ -407,6 +412,7 @@
           const displayName = record?.name || model?.name || meta?.name || record?.email || model?.email || meta?.email || 'Unknown User';
           const email = record?.email || model?.email || meta?.email || '(no email)';
           displayNameCache = displayName;
+          userEmailCache = email;
           document.getElementById('userDisplayName').textContent = displayName;
           document.getElementById('userEmailValue').textContent = email;
           console.log('User record:', record);
@@ -455,6 +461,7 @@
         const displayName = record?.name || model?.name || meta?.name || record?.email || model?.email || meta?.email || 'Unknown User';
         const email = record?.email || model?.email || meta?.email || '(no email)';
         displayNameCache = displayName;
+        userEmailCache = email;
         document.getElementById('userDisplayName').textContent = displayName;
         document.getElementById('userEmailValue').textContent = email;
         console.log('User record:', record);
@@ -591,6 +598,7 @@
       const statusEl = document.getElementById('submitStatus');
       statusEl.textContent = '';
       const noteText = document.getElementById('noteText').value.trim();
+      let noteTitle = document.getElementById('noteTitle').value.trim();
       if (!pb.authStore.isValid) {
         statusEl.textContent = 'Not authenticated.';
         return;
@@ -599,13 +607,22 @@
         statusEl.textContent = 'Please enter note text.';
         return;
       }
+      
+      // Generate title if empty: "Untitled: first 4 words..."
+      if (!noteTitle) {
+        const words = noteText.split(/\s+/).filter(w => w.length > 0);
+        const firstFour = words.slice(0, 4).join(' ');
+        noteTitle = 'Untitled: ' + (firstFour || 'note');
+      }
+      
       try {
-        // Create note record with display name and timestamp
+        // Create note record with display name, email, and title
-        const timestamp = new Date().toISOString();
         const noteRecord = await pb.collection(NOTES_COLLECTION).create({
           [NOTE_BODY_HTML_FIELD]: plainTextToHTML(noteText),
           [NOTE_BODY_PLAIN_FIELD]: noteText,
-          [NOTE_USERNAME_FIELD]: `${displayNameCache} - ${timestamp}`,
+          [NOTE_USERNAME_FIELD]: displayNameCache,
+          email: userEmailCache,
+          title: noteTitle,
           userId: pb.authStore.model?.id || pb.authStore.record?.id,
         });
         let attachmentRecord = null;
@@ -619,6 +636,7 @@
         statusEl.textContent = `Saved note ${noteRecord.id}` + (attachmentRecord ? ` with audio ${attachmentRecord.id}` : '');
         clearAudio();
         document.getElementById('noteText').value = '';
+        document.getElementById('noteTitle').value = '';
       } catch (e) {
         console.error(e);
         statusEl.textContent = `Error saving: ${e.message}`;