From c0de624fe68efb1f8b18d3d82b95a5ec8a64dc4b Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 4 Oct 2025 20:41:26 +0100
Subject: [PATCH] refactor: use applesauce helpers for highlight parsing

- Replace manual tag parsing with applesauce-core helper functions
- Use getHighlightText, getHighlightContext, getHighlightComment, etc.
- Add support for highlight comments in UI
- Extract author from attributions using proper helper
- Handle both event and address pointers correctly
- Add styling for highlight comments

This follows applesauce best practices and makes the code more robust.
---
 src/components/HighlightItem.tsx |  6 ++++
 src/index.css                    | 11 +++++++
 src/services/highlightService.ts | 51 +++++++++++++++++++-------------
 src/types/highlights.ts          |  1 +
 4 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/src/components/HighlightItem.tsx b/src/components/HighlightItem.tsx
index 4dbb1542..faffc2b5 100644
--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -37,6 +37,12 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
           {highlight.content}
         </blockquote>
         
+        {highlight.comment && (
+          <div className="highlight-comment">
+            {highlight.comment}
+          </div>
+        )}
+        
         {highlight.context && (
           <details className="highlight-context">
             <summary>Show context</summary>
diff --git a/src/index.css b/src/index.css
index a8c59beb..f367fb37 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1229,6 +1229,17 @@ body {
   font-size: 0.95rem;
 }
 
+.highlight-comment {
+  margin-top: 0.5rem;
+  padding: 0.75rem;
+  background: rgba(100, 108, 255, 0.1);
+  border-left: 3px solid #646cff;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  color: #ddd;
+  line-height: 1.5;
+}
+
 .highlight-context {
   margin-top: 0.5rem;
 }
diff --git a/src/services/highlightService.ts b/src/services/highlightService.ts
index 7683c547..c3bcc8d6 100644
--- a/src/services/highlightService.ts
+++ b/src/services/highlightService.ts
@@ -1,17 +1,17 @@
 import { RelayPool, completeOnEose } from 'applesauce-relay'
 import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
+import { NostrEvent } from 'nostr-tools'
+import {
+  getHighlightText,
+  getHighlightContext,
+  getHighlightComment,
+  getHighlightSourceEventPointer,
+  getHighlightSourceAddressPointer,
+  getHighlightSourceUrl,
+  getHighlightAttributions
+} from 'applesauce-core/helpers'
 import { Highlight } from '../types/highlights'
 
-interface NostrEvent {
-  id: string
-  pubkey: string
-  created_at: number
-  kind: number
-  tags: string[][]
-  content: string
-  sig: string
-}
-
 /**
  * Deduplicate highlight events by ID
  * Since highlights can come from multiple relays, we need to ensure
@@ -51,22 +51,33 @@ export const fetchHighlights = async (
     console.log('📊 Unique highlight events after deduplication:', uniqueEvents.length)
     
     const highlights: Highlight[] = uniqueEvents.map((event: NostrEvent) => {
-      // Extract relevant tags
-      const eventRef = event.tags.find(t => t[0] === 'e' || t[0] === 'a')?.[1]
-      const urlRef = event.tags.find(t => t[0] === 'r')?.[1]
-      const authorTag = event.tags.find(t => t[0] === 'p' && t[3] === 'author')
-      const contextTag = event.tags.find(t => t[0] === 'context')
+      // Use applesauce helpers to extract highlight data
+      const highlightText = getHighlightText(event)
+      const context = getHighlightContext(event)
+      const comment = getHighlightComment(event)
+      const sourceEventPointer = getHighlightSourceEventPointer(event)
+      const sourceAddressPointer = getHighlightSourceAddressPointer(event)
+      const sourceUrl = getHighlightSourceUrl(event)
+      const attributions = getHighlightAttributions(event)
+      
+      // Get author from attributions
+      const author = attributions.find(a => a.role === 'author')?.pubkey
+      
+      // Get event reference (prefer event pointer, fallback to address pointer)
+      const eventReference = sourceEventPointer?.id || 
+        (sourceAddressPointer ? `${sourceAddressPointer.kind}:${sourceAddressPointer.pubkey}:${sourceAddressPointer.identifier}` : undefined)
       
       return {
         id: event.id,
         pubkey: event.pubkey,
         created_at: event.created_at,
-        content: event.content,
+        content: highlightText,
         tags: event.tags,
-        eventReference: eventRef,
-        urlReference: urlRef,
-        author: authorTag?.[1],
-        context: contextTag?.[1]
+        eventReference,
+        urlReference: sourceUrl,
+        author,
+        context,
+        comment
       }
     })
     
diff --git a/src/types/highlights.ts b/src/types/highlights.ts
index 05fc663e..faec449c 100644
--- a/src/types/highlights.ts
+++ b/src/types/highlights.ts
@@ -10,5 +10,6 @@ export interface Highlight {
   urlReference?: string // 'r' tag
   author?: string // 'p' tag with 'author' role
   context?: string // surrounding text context
+  comment?: string // optional comment about the highlight
 }