From 77312dfdad4bade640b170f4f4cf33c579992cca Mon Sep 17 00:00:00 2001
From: aewing <aewing@cardoza.construction>
Date: Sun, 11 Jan 2026 06:30:21 +0000
Subject: [PATCH] Add share note functionality with multiselect field support
 and adjust layout spacing

- Added share note input field with comma-separated name parsing
- Integrated shared_with and shared boolean fields to note payload
- Reduced form spacing (space-y-4 to space-y-2.5) to accommodate new field
- Adjusted container positioning: noteContainer translateY(-33px), notesListContainer translateY(-24px)
- Share functionality now working with PocketBase multiselect field validation
- Note cards will display green background when shared=true
---
 index.html | 147 +++++++++++++++++++----------------------------------
 1 file changed, 51 insertions(+), 96 deletions(-)

diff --git a/index.html b/index.html
index b17cb8e..b51b6f2 100644
--- a/index.html
+++ b/index.html
@@ -369,7 +369,7 @@
   </div>
 
   <!-- Notes List Container -->
-  <div id="notesListContainer" class="hidden flex flex-col bg-purple-100 rounded-2xl shadow-2xl border border-purple-200 max-w-5xl w-full p-6 gap-4 max-h-[calc(100vh-136px)] overflow-hidden mt-6 mb-3">
+  <div id="notesListContainer" class="hidden flex flex-col bg-purple-100 rounded-2xl shadow-2xl border border-purple-200 max-w-5xl w-full p-6 gap-4 max-h-[calc(100vh-136px)] overflow-hidden mb-3" style="transform: translateY(-24px);">
     <div class="flex-shrink-0">
       <div class="flex flex-row items-center justify-between gap-3">
         <div>
@@ -439,12 +439,12 @@
   </div>
 
   <!-- Note + Audio Container -->
-  <div id="noteContainer" class="hidden self-center bg-white rounded-2xl shadow-2xl max-w-xl w-full py-[8px] px-8 space-y-6 mt-4">
+  <div id="noteContainer" class="hidden self-center bg-white rounded-2xl shadow-2xl max-w-xl w-full py-[8px] px-8 space-y-2 mt-4" style="transform: translateY(-33px);">
     <div class="flex items-center gap-2 flex-wrap">
       <button id="backToListBtn" class="px-2 sm:px-3 py-1 sm:py-2 text-xs sm:text-sm rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button>
       <h2 class="text-lg sm:text-2xl font-bold text-gray-800">New Note</h2>
     </div>
-    <div class="space-y-4">
+    <div class="space-y-2.5">
       <div>
         <label for="noteTitle" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
         <div class="relative">
@@ -478,12 +478,9 @@
         <input type="text" id="jobNumber" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter job number (required)">
       </div>
       <div>
-        <label class="block text-sm font-medium text-gray-700 mb-2">Share Note</label>
-        <div class="flex gap-2 mb-3">
-          <input type="text" id="userSearchInput" class="flex-1 rounded-lg border border-gray-300 p-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Search users by name...">
-          <div id="userSuggestions" class="hidden absolute top-full left-0 right-0 mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-48 overflow-y-auto z-20"></div>
-        </div>
-        <div id="selectedUsersContainer" class="flex flex-wrap gap-2 mb-3">
+        <label for="shareNoteInput" class="block text-sm font-medium text-gray-700 mb-2">Share Note (comma-separated names)</label>
+        <input type="text" id="shareNoteInput" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter names separated by commas (e.g., John, Sarah, Mike)">
+        <div id="selectedUsersContainer" class="flex flex-wrap gap-2 mt-3">
           <!-- Selected user capsules will appear here -->
         </div>
       </div>
@@ -1811,7 +1808,7 @@
       document.getElementById('noteType').value = 'personal';
       document.getElementById('jobNumber').value = '';
       document.getElementById('jobNumberContainer').classList.add('hidden');
-      document.getElementById('userSearchInput').value = '';
+      document.getElementById('shareNoteInput').value = '';
       selectedUsers = [];
       renderSelectedUsers();
       clearAudio();
@@ -1886,24 +1883,30 @@
           .map(iconBtnHtml)
           .join('');
         
-        // Create type indicator badge with matching card background colors
-        const typeColorMap = {
-          personal: { bg: 'bg-amber-200', border: 'border-amber-400', text: 'text-amber-900' },
-          manager: { bg: 'bg-orange-300', border: 'border-orange-500', text: 'text-orange-900' },
-          job: { bg: 'bg-pink-300', border: 'border-pink-500', text: 'text-pink-900' },
-        };
-        const typeColor = typeColorMap[type] || { bg: 'bg-gray-200', border: 'border-gray-400', text: 'text-gray-900' };
-        const typeBadge = `<span class="inline-block px-2 py-1 rounded-full text-xs font-semibold ${typeColor.bg} ${typeColor.border} border ${typeColor.text}">${escapeHtml(type)}</span>`;
+        // Only create type indicator badge for shared notes
+        let typeBadge = '';
+        if (note.shared) {
+          const typeColorMap = {
+            personal: { bg: 'bg-amber-200', border: 'border-amber-400', text: 'text-amber-900' },
+            manager: { bg: 'bg-orange-300', border: 'border-orange-500', text: 'text-orange-900' },
+            job: { bg: 'bg-pink-300', border: 'border-pink-500', text: 'text-pink-900' },
+          };
+          const typeColor = typeColorMap[type] || { bg: 'bg-gray-200', border: 'border-gray-400', text: 'text-gray-900' };
+          typeBadge = `<span class="inline-block px-2 py-1 rounded-full text-xs font-semibold ${typeColor.bg} ${typeColor.border} border ${typeColor.text}">${escapeHtml(type)}</span>`;
+        }
         
         card.innerHTML = `
           <div class="flex items-center justify-between gap-2">
             <div class="font-semibold text-gray-900 truncate">${escapeHtml(title)}</div>
             <div class="text-xs text-gray-500">${formatDateShort(note.created)}</div>
           </div>
-          <div class="text-sm text-gray-700 line-clamp-2 flex-1">${escapeHtml(snippet || '(empty)')}</div>
-          <div class="flex items-center justify-between gap-2">
-            <div class="flex items-center gap-1">${attachmentIcons}</div>
-            ${typeBadge}
+          <div class="text-sm text-gray-700 line-clamp-3 flex-1">${escapeHtml(snippet || '(empty)')}</div>
+          <div class="flex items-center justify-between text-xs text-gray-600">
+            <span>${escapeHtml(meta)}</span>
+            <div class="flex items-center gap-1">
+              ${attachmentIcons}
+              ${typeBadge}
+            </div>
           </div>
         `;
         frag.appendChild(card);
@@ -2541,97 +2544,45 @@
     });
 
     // --- Share Note Logic ---
-    let selectedUsers = []; // { id, displayName, firstName }
-    const userSearchInput = document.getElementById('userSearchInput');
-    const userSuggestions = document.getElementById('userSuggestions');
+    let selectedUsers = []; // { name }
+    const shareNoteInput = document.getElementById('shareNoteInput');
     const selectedUsersContainer = document.getElementById('selectedUsersContainer');
 
-    userSearchInput.addEventListener('input', async (e) => {
-      const query = e.target.value.trim().toLowerCase();
-      userSuggestions.innerHTML = '';
+    shareNoteInput.addEventListener('input', (e) => {
+      const input = e.target.value;
+      const names = input.split(',')
+        .map(name => name.trim())
+        .filter(name => name.length > 0);
       
-      if (!query) {
-        userSuggestions.classList.add('hidden');
-        return;
-      }
-
-      try {
-        const allUsers = await pb.collection('users').getFullList({
-          sort: 'displayName'
-        });
-        
-        const matching = allUsers.filter(u => 
-          u.displayName?.toLowerCase().includes(query) || 
-          u.firstName?.toLowerCase().includes(query) ||
-          u.email?.toLowerCase().includes(query)
-        ).filter(u => !selectedUsers.find(su => su.id === u.id));
-
-        if (matching.length === 0) {
-          userSuggestions.innerHTML = '<div class="px-4 py-2 text-sm text-gray-500">No users found</div>';
-        } else {
-          matching.forEach(user => {
-            const option = document.createElement('button');
-            option.type = 'button';
-            option.className = 'w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition';
-            option.innerHTML = `<div class="font-medium">${escapeHtml(user.displayName || user.email)}</div><div class="text-xs text-gray-500">${escapeHtml(user.email)}</div>`;
-            option.addEventListener('click', (ev) => {
-              ev.preventDefault();
-              selectUser(user);
-              userSearchInput.value = '';
-              userSuggestions.classList.add('hidden');
-            });
-            userSuggestions.appendChild(option);
-          });
-        }
-        userSuggestions.classList.remove('hidden');
-      } catch (err) {
-        console.error('Failed to load users:', err);
-        userSuggestions.innerHTML = '<div class="px-4 py-2 text-sm text-red-500">Failed to load users</div>';
-      }
+      selectedUsers = names.map(name => ({
+        name: name,
+        firstName: name.split(' ')[0]
+      }));
+      
+      renderSelectedUsers();
     });
 
-    function selectUser(user) {
-      if (selectedUsers.find(u => u.id === user.id)) return;
-      
-      selectedUsers.push({
-        id: user.id,
-        displayName: user.displayName || user.email,
-        firstName: user.firstName || (user.displayName?.split(' ')[0] || 'User')
-      });
-      
-      renderSelectedUsers();
-    }
-
-    function removeUser(userId) {
-      selectedUsers = selectedUsers.filter(u => u.id !== userId);
-      renderSelectedUsers();
-    }
-
     function renderSelectedUsers() {
       selectedUsersContainer.innerHTML = '';
-      selectedUsers.forEach(user => {
+      selectedUsers.forEach((user, index) => {
         const capsule = document.createElement('div');
         capsule.className = 'inline-flex items-center gap-2 px-3 py-1 rounded-full bg-green-100 border border-green-300 text-sm text-gray-800';
         capsule.innerHTML = `
           <span>${escapeHtml(user.firstName)}</span>
-          <button type="button" class="text-gray-600 hover:text-gray-800 font-bold" data-remove-user="${user.id}">×</button>
+          <button type="button" class="text-gray-600 hover:text-gray-800 font-bold" data-remove-user="${index}">×</button>
         `;
         const removeBtn = capsule.querySelector('[data-remove-user]');
         removeBtn.addEventListener('click', (e) => {
           e.preventDefault();
-          removeUser(user.id);
+          selectedUsers = selectedUsers.filter((_, i) => i !== index);
+          const remaining = selectedUsers.map(u => u.name).join(', ');
+          shareNoteInput.value = remaining;
+          renderSelectedUsers();
         });
         selectedUsersContainer.appendChild(capsule);
       });
     }
 
-    // Close suggestions when clicking outside
-    document.addEventListener('click', (e) => {
-      if (!e.target.closest('#userSearchInput') && !e.target.closest('#userSuggestions')) {
-        userSuggestions.classList.add('hidden');
-      }
-    });
-
     // --- Submit note ---
     async function submitNote() {
       const statusEl = document.getElementById('submitStatus');
@@ -2681,8 +2632,8 @@
           job_note: jobNoteValue === 'yes',
           type: noteType,
           userId: pb.authStore.model?.id || pb.authStore.record?.id,
-          shared: selectedUsers.length > 0,
-          shared_with: selectedUsers.map(u => u.id),
+          shared: selectedUsers.length > 0 ? true : false,
+          shared_with: selectedUsers.map(u => u.name),
         };
         
         // Only include job_number if it has a value
@@ -2747,7 +2698,11 @@
         loadNotesList();
         showNotesList();
       } catch (e) {
-        console.error(e);
+        console.error('Error creating note:', e);
+        console.error('Full error:', JSON.stringify(e, null, 2));
+        if (e.response) {
+          console.error('Response data:', e.response);
+        }
         statusEl.textContent = `Error saving: ${e.message}`;
       }
     }