Redesign note card layout for shared notes

- Type bubble (colored dot) appears inline with body text, far right, only on shared notes
- Shared with capsules displayed in bottom right with consistent person-based colors
- Attachment icons in bottom left
- Body text truncated to single line to maintain consistent card heights
- Added color palette for person names (8 distinct colors) with hash-based consistency
- Removed metadata display from card footer
- Cleaner visual hierarchy with all key info visible at a glance

index.html

@@ -1835,6 +1835,35 @@
     }
 
     function renderNotesList(items) {
+      // Color palette for shared with person names (different from green)
+      const personColorPalette = [
+        { bg: 'bg-blue-200', border: 'border-blue-400', text: 'text-blue-900' },
+        { bg: 'bg-purple-200', border: 'border-purple-400', text: 'text-purple-900' },
+        { bg: 'bg-indigo-200', border: 'border-indigo-400', text: 'text-indigo-900' },
+        { bg: 'bg-cyan-200', border: 'border-cyan-400', text: 'text-cyan-900' },
+        { bg: 'bg-teal-200', border: 'border-teal-400', text: 'text-teal-900' },
+        { bg: 'bg-sky-200', border: 'border-sky-400', text: 'text-sky-900' },
+        { bg: 'bg-lime-200', border: 'border-lime-400', text: 'text-lime-900' },
+        { bg: 'bg-rose-200', border: 'border-rose-400', text: 'text-rose-900' },
+      ];
+      
+      // Map to store consistent colors for each person
+      const personColorMap = {};
+      
+      function getPersonColor(name) {
+        if (!personColorMap[name]) {
+          // Generate consistent hash-based color index for this person
+          let hash = 0;
+          for (let i = 0; i < name.length; i++) {
+            hash = ((hash << 5) - hash) + name.charCodeAt(i);
+            hash = hash & hash; // Convert to 32-bit integer
+          }
+          const colorIndex = Math.abs(hash) % personColorPalette.length;
+          personColorMap[name] = personColorPalette[colorIndex];
+        }
+        return personColorMap[name];
+      }
+      
       const grid = document.getElementById('notesGrid');
       const empty = document.getElementById('notesEmpty');
       grid.innerHTML = '';
@@ -1883,29 +1912,44 @@
           .map(iconBtnHtml)
           .join('');
         
-        // Only create type indicator badge for shared notes
-        let typeBadge = '';
+        // Create type bubble and shared with capsules for shared notes only
+        let typeBubble = '';
+        let sharedWithDisplay = '';
         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' },
+            personal: { bg: 'bg-amber-300', border: 'border-amber-400' },
+            manager: { bg: 'bg-orange-400', border: 'border-orange-500' },
+            job: { bg: 'bg-pink-400', border: 'border-pink-500' },
           };
-          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>`;
+          const typeColor = typeColorMap[type] || { bg: 'bg-gray-300', border: 'border-gray-400' };
+          typeBubble = `<span class="inline-block w-3 h-3 rounded-full ${typeColor.bg} ${typeColor.border} border flex-shrink-0" title="${escapeHtml(type)}"></span>`;
+          
+          if (note.shared_with && note.shared_with.length > 0) {
+            const sharedNames = Array.isArray(note.shared_with) ? note.shared_with : (typeof note.shared_with === 'string' ? note.shared_with.split(',').map(n => n.trim()) : []);
+            const capsules = sharedNames.map(name => {
+              const firstName = name.split(' ')[0];
+              const colors = getPersonColor(name);
+              return `<span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold ${colors.bg} ${colors.border} border ${colors.text}">${escapeHtml(firstName)}</span>`;
+            }).join('');
+            sharedWithDisplay = `<div class="flex items-center flex-wrap gap-1 justify-end">${capsules}</div>`;
+          }
         }
         
         card.innerHTML = `
-          <div class="flex items-center justify-between gap-2">
+          <div class="flex items-start 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 class="text-xs text-gray-500 flex-shrink-0">${formatDateShort(note.created)}</div>
           </div>
-          <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-start gap-2 flex-1">
+            <div class="text-sm text-gray-700 line-clamp-1 flex-1">${escapeHtml(snippet || '(empty)')}</div>
+            ${note.shared ? `<div class="flex items-center gap-1 flex-shrink-0">${typeBubble}</div>` : ''}
+          </div>
+          <div class="flex items-center justify-between text-xs text-gray-600 w-full">
             <div class="flex items-center gap-1">
               ${attachmentIcons}
-              ${typeBadge}
+            </div>
+            <div class="flex items-center gap-1">
+              ${note.shared ? sharedWithDisplay : ''}
             </div>
           </div>
         `;