From 9d3e1767739873efc05ef9641de8f4dd422094f4 Mon Sep 17 00:00:00 2001
From: aewing <aewing@cardoza.construction>
Date: Sun, 11 Jan 2026 21:28:41 +0000
Subject: [PATCH] Restructure note card layout for shared notes

- Type bubble (colored dot) now appears only on shared notes below timestamp
- Type bubble positioned on far right, below the timestamp
- Shared with capsules display below type bubble on the right side
- Non-shared notes show meta info and attachment icons as before
- Cleaner visual hierarchy: timestamp/type on top, content in middle, details at bottom
---
 index.html | 36 ++++++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index b51b6f2..657d80b 100644
--- a/index.html
+++ b/index.html
@@ -1883,29 +1883,41 @@
           .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];
+              return `<span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-green-200 border border-green-400 text-green-900">${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="flex flex-col items-end gap-1 flex-shrink-0">
+              <div class="text-xs text-gray-500">${formatDateShort(note.created)}</div>
+              ${note.shared ? `<div class="flex items-center gap-1.5">${typeBubble}${sharedWithDisplay}</div>` : ''}
+            </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>
+            <span>${note.shared ? '' : escapeHtml(meta)}</span>
             <div class="flex items-center gap-1">
-              ${attachmentIcons}
-              ${typeBadge}
+              ${note.shared ? '' : attachmentIcons}
             </div>
           </div>
         `;