feat: Add sharing notes to help transcript and improve shared item UX

  - Add system notes to help transcript when items are shared between users
  - Display 'Shared by [user] on [date]' in recipient's help panel
  - Make system notes clickable to load the shared task
  - Show user icon indicator for items received via sharing
  - Clear taskId on share and regenerate when recipient loads item
  - Style system notes with subtle gray background
  - Exclude current user from share dialog selection

Author: jeffdyer

src/components/HelpPanel.tsx

@@ -1304,9 +1304,10 @@ export const HelpPanel = ({
 
   // Function to prepare messages for display
   const prepareMessagesForDisplay = () => {
-    // Find all user messages in chronological order (oldest to newest)
+    // Find all user and system messages in chronological order (oldest to newest)
+    // Include both user messages and system messages (e.g., sharing notes)
     const userMessages = help
-      .filter(item => item.type === 'user')
+      .filter(item => item.type === 'user' || item.role === 'system')
       .map((msg, idx) => ({
         ...msg,
         index: help.indexOf(msg)
@@ -2044,7 +2045,7 @@ export const HelpPanel = ({
                           </button>
 
                           <div
-                            className={`bg-blue-100 rounded-lg p-3 overflow-hidden ${isPending ? 'border-2 border-blue-300' : ''} ${message.taskId && message.taskId === taskId ? 'border-2 border-blue-500' : ''} ${message.taskId && onLoadTaskFromHelp ? 'cursor-pointer hover:bg-blue-200 transition-colors' : ''}`}
+                            className={`${message.role === 'system' ? 'bg-gray-100' : 'bg-blue-100'} rounded-lg p-3 overflow-hidden ${isPending ? 'border-2 border-blue-300' : ''} ${message.role !== 'system' && message.taskId && message.taskId === taskId ? 'border-2 border-blue-500' : ''} ${message.taskId && onLoadTaskFromHelp ? `cursor-pointer ${message.role === 'system' ? 'hover:bg-gray-200' : 'hover:bg-blue-200'} transition-colors` : ''}`}
                             onClick={() => {
                               if (message.taskId && onLoadTaskFromHelp) {
                                 onLoadTaskFromHelp(message.taskId);
@@ -2117,7 +2118,7 @@ export const HelpPanel = ({
                               }
                             }}
                           >
-                            {message.user}
+                            {message.role === 'system' ? message.content : message.user}
                           </ReactMarkdown>
                             </div>
                           </div>

src/components/ItemsNav.tsx

@@ -256,8 +256,8 @@ export default function ItemsNav({ items, selectedItemId, onSelectItem, onUpdate
                   >
                     <span className="truncate">{item.name}</span>
                     {/* Show icon if item was shared with the user */}
-                    {item.name.includes('(from ') && (
-                      <UserIcon className="h-3 w-3 ml-1 text-gray-400 flex-shrink-0" title="Shared with you" />
+                    {item.sharedFrom && (
+                      <UserIcon className="h-3 w-3 ml-1 text-gray-400 flex-shrink-0" title={`Shared from ${item.sharedFrom}`} />
                     )}
                   </button>
                   { item.id === showId &&

src/pages/api/resolvers.ts

@@ -525,18 +525,22 @@ export async function getItems({ auth, lang, mark }) {
       // Get the sharedWith list for this item
       const sharedWith = sharedItemsData[doc.id]?.sharedWith || [];
 
-      items.push({
+      const item = {
         id: doc.id,
-        ...data,
+        name: data.name,
         taskId, // Include the potentially new taskId
+        lang: data.lang,
         mark: data.mark || 1, // Default to mark 1 if not set
         help: help || "[]",
         code: code || "",
         isPublic: data.isPublic || false,
         created: String(data.created),
         updated: data.updated ? String(data.updated) : String(data.created),
         sharedWith: sharedWith,
-      });
+        sharedFrom: data.sharedFrom || null, // Include sharedFrom field if present
+      };
+
+      items.push(item);
     }
     return items;
   } catch (error) {
@@ -611,11 +615,35 @@ export async function shareItem({ auth, itemId, targetUserId }) {
     const newItemId = targetItemRef.id;
     const timestamp = Date.now();
 
+    // Add a note to the help transcript about where the item was shared from
+    let updatedHelp = itemData.help || "[]";
+    try {
+      const helpArray = JSON.parse(updatedHelp);
+      // Add a note at the end of the help transcript (since display is reversed)
+      helpArray.push({
+        role: "system",
+        content: `Shared by ${auth.uid} on ${new Date(timestamp).toISOString().split('T')[0]}`,
+        timestamp: timestamp,
+        taskId: itemData.taskId // Include the original task ID for clickability
+      });
+      updatedHelp = JSON.stringify(helpArray);
+    } catch (error) {
+      // If help is not valid JSON, create a new array with the note
+      updatedHelp = JSON.stringify([{
+        role: "system",
+        content: `Shared by ${auth.uid} on ${new Date(timestamp).toISOString().split('T')[0]}`,
+        timestamp: timestamp,
+        taskId: itemData.taskId // Include the original task ID for clickability
+      }]);
+    }
+
     const sharedItem = {
       ...itemData,
       id: newItemId,
       taskId: null, // Clear the task ID - it will be created when the user loads the item
-      name: `${itemData.name} (from ${auth.uid})`,
+      name: itemData.name,
+      help: updatedHelp,
+      sharedFrom: auth.uid, // Track who shared this item
       created: timestamp,
       updated: timestamp,
       // Don't copy the isPublic flag - let the recipient decide