refactor(highlights): extract highlights panel components

- Create useFilteredHighlights hook for highlight filtering
- Extract HighlightsPanelCollapsed component
- Extract HighlightsPanelHeader component
- Reduce HighlightsPanel.tsx from 232 lines to 118 lines

src/components/HighlightsPanel.tsx

@@ -1,8 +1,11 @@
-import React, { useMemo, useState } from 'react'
+import React, { useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faHighlighter, faEye, faEyeSlash, faRotate, faUser, faUserGroup, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
+import { faHighlighter } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
 import { HighlightItem } from './HighlightItem'
+import { useFilteredHighlights } from '../hooks/useFilteredHighlights'
+import HighlightsPanelCollapsed from './HighlightsPanel/HighlightsPanelCollapsed'
+import HighlightsPanelHeader from './HighlightsPanel/HighlightsPanelHeader'
 
 export interface HighlightVisibility {
   nostrverse: boolean
@@ -51,153 +54,36 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
     onToggleHighlights?.(newValue)
   }
   
-  // Filter highlights based on visibility levels and URL
-  const filteredHighlights = useMemo(() => {
-    if (!selectedUrl) return highlights
-    
-    let urlFiltered = highlights
-    
-    // For Nostr articles (URL starts with "nostr:"), we don't need to filter by URL
-    // because we already fetched highlights specifically for this article
-    if (!selectedUrl.startsWith('nostr:')) {
-      // For web URLs, filter by URL matching
-      const normalizeUrl = (url: string) => {
-        try {
-          const urlObj = new URL(url.startsWith('http') ? url : `https://${url}`)
-          return `${urlObj.hostname.replace(/^www\./, '')}${urlObj.pathname}`.replace(/\/$/, '').toLowerCase()
-        } catch {
-          return url.replace(/^https?:\/\//, '').replace(/^www\./, '').replace(/\/$/, '').toLowerCase()
-        }
-      }
-      
-      const normalizedSelected = normalizeUrl(selectedUrl)
-      
-      urlFiltered = highlights.filter(h => {
-        if (!h.urlReference) return false
-        const normalizedRef = normalizeUrl(h.urlReference)
-        return normalizedSelected === normalizedRef || 
-               normalizedSelected.includes(normalizedRef) ||
-               normalizedRef.includes(normalizedSelected)
-      })
-    }
-    
-    // Classify and filter by visibility levels
-    return urlFiltered
-      .map(h => {
-        // Classify highlight level
-        let level: 'mine' | 'friends' | 'nostrverse' = 'nostrverse'
-        if (h.pubkey === currentUserPubkey) {
-          level = 'mine'
-        } else if (followedPubkeys.has(h.pubkey)) {
-          level = 'friends'
-        }
-        return { ...h, level }
-      })
-      .filter(h => {
-        // Filter by visibility settings
-        if (h.level === 'mine') return highlightVisibility.mine
-        if (h.level === 'friends') return highlightVisibility.friends
-        return highlightVisibility.nostrverse
-      })
-  }, [highlights, selectedUrl, highlightVisibility, currentUserPubkey, followedPubkeys])
+  const filteredHighlights = useFilteredHighlights({
+    highlights,
+    selectedUrl,
+    highlightVisibility,
+    currentUserPubkey,
+    followedPubkeys
+  })
   
   if (isCollapsed) {
-    const hasHighlights = filteredHighlights.length > 0
-    
     return (
-      <div className="highlights-container collapsed">
-        <button
-          onClick={onToggleCollapse}
-          className={`toggle-highlights-btn with-icon ${hasHighlights ? 'has-highlights' : ''}`}
-          title="Expand highlights panel"
-          aria-label="Expand highlights panel"
-        >
-          <FontAwesomeIcon icon={faHighlighter} className={hasHighlights ? 'glow' : ''} />
-          <FontAwesomeIcon icon={faChevronRight} />
-        </button>
-      </div>
+      <HighlightsPanelCollapsed 
+        hasHighlights={filteredHighlights.length > 0} 
+        onToggleCollapse={onToggleCollapse}
+      />
     )
   }
 
   return (
     <div className="highlights-container">
-      <div className="highlights-header">
-        <div className="highlights-actions">
-          <div className="highlights-actions-left">
-            {onHighlightVisibilityChange && (
-              <div className="highlight-level-toggles">
-                <button
-                  onClick={() => onHighlightVisibilityChange({ 
-                    ...highlightVisibility, 
-                    nostrverse: !highlightVisibility.nostrverse 
-                  })}
-                  className={`level-toggle-btn ${highlightVisibility.nostrverse ? 'active' : ''}`}
-                  title="Toggle nostrverse highlights"
-                  aria-label="Toggle nostrverse highlights"
-                  style={{ color: highlightVisibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }}
-                >
-                  <FontAwesomeIcon icon={faNetworkWired} />
-                </button>
-                <button
-                  onClick={() => onHighlightVisibilityChange({ 
-                    ...highlightVisibility, 
-                    friends: !highlightVisibility.friends 
-                  })}
-                  className={`level-toggle-btn ${highlightVisibility.friends ? 'active' : ''}`}
-                  title={currentUserPubkey ? "Toggle friends highlights" : "Login to see friends highlights"}
-                  aria-label="Toggle friends highlights"
-                  style={{ color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined }}
-                  disabled={!currentUserPubkey}
-                >
-                  <FontAwesomeIcon icon={faUserGroup} />
-                </button>
-                <button
-                  onClick={() => onHighlightVisibilityChange({ 
-                    ...highlightVisibility, 
-                    mine: !highlightVisibility.mine 
-                  })}
-                  className={`level-toggle-btn ${highlightVisibility.mine ? 'active' : ''}`}
-                  title={currentUserPubkey ? "Toggle my highlights" : "Login to see your highlights"}
-                  aria-label="Toggle my highlights"
-                  style={{ color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined }}
-                  disabled={!currentUserPubkey}
-                >
-                  <FontAwesomeIcon icon={faUser} />
-                </button>
-              </div>
-            )}
-            {onRefresh && (
-              <button
-                onClick={onRefresh}
-                className="refresh-highlights-btn"
-                title="Refresh highlights"
-                aria-label="Refresh highlights"
-                disabled={loading}
-              >
-                <FontAwesomeIcon icon={faRotate} spin={loading} />
-              </button>
-            )}
-            {filteredHighlights.length > 0 && (
-              <button
-                onClick={handleToggleHighlights}
-                className="toggle-highlight-display-btn"
-                title={showHighlights ? 'Hide highlights' : 'Show highlights'}
-                aria-label={showHighlights ? 'Hide highlights' : 'Show highlights'}
-              >
-                <FontAwesomeIcon icon={showHighlights ? faEye : faEyeSlash} />
-              </button>
-            )}
-          </div>
-          <button
-            onClick={onToggleCollapse}
-            className="toggle-highlights-btn"
-            title="Collapse highlights panel"
-            aria-label="Collapse highlights panel"
-          >
-            <FontAwesomeIcon icon={faChevronRight} rotation={180} />
-          </button>
-        </div>
-      </div>
+      <HighlightsPanelHeader
+        loading={loading}
+        hasHighlights={filteredHighlights.length > 0}
+        showHighlights={showHighlights}
+        highlightVisibility={highlightVisibility}
+        currentUserPubkey={currentUserPubkey}
+        onToggleHighlights={handleToggleHighlights}
+        onRefresh={onRefresh}
+        onToggleCollapse={onToggleCollapse}
+        onHighlightVisibilityChange={onHighlightVisibilityChange}
+      />
 
       {loading && filteredHighlights.length === 0 ? (
         <div className="highlights-loading">

src/components/HighlightsPanel/HighlightsPanelCollapsed.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHighlighter, faChevronRight } from '@fortawesome/free-solid-svg-icons'
+
+interface HighlightsPanelCollapsedProps {
+  hasHighlights: boolean
+  onToggleCollapse: () => void
+}
+
+const HighlightsPanelCollapsed: React.FC<HighlightsPanelCollapsedProps> = ({
+  hasHighlights,
+  onToggleCollapse
+}) => {
+  return (
+    <div className="highlights-container collapsed">
+      <button
+        onClick={onToggleCollapse}
+        className={`toggle-highlights-btn with-icon ${hasHighlights ? 'has-highlights' : ''}`}
+        title="Expand highlights panel"
+        aria-label="Expand highlights panel"
+      >
+        <FontAwesomeIcon icon={faHighlighter} className={hasHighlights ? 'glow' : ''} />
+        <FontAwesomeIcon icon={faChevronRight} />
+      </button>
+    </div>
+  )
+}
+
+export default HighlightsPanelCollapsed
+

src/components/HighlightsPanel/HighlightsPanelHeader.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronRight, faEye, faEyeSlash, faRotate, faUser, faUserGroup, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
+import { HighlightVisibility } from '../HighlightsPanel'
+
+interface HighlightsPanelHeaderProps {
+  loading: boolean
+  hasHighlights: boolean
+  showHighlights: boolean
+  highlightVisibility: HighlightVisibility
+  currentUserPubkey?: string
+  onToggleHighlights: () => void
+  onRefresh?: () => void
+  onToggleCollapse: () => void
+  onHighlightVisibilityChange?: (visibility: HighlightVisibility) => void
+}
+
+const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
+  loading,
+  hasHighlights,
+  showHighlights,
+  highlightVisibility,
+  currentUserPubkey,
+  onToggleHighlights,
+  onRefresh,
+  onToggleCollapse,
+  onHighlightVisibilityChange
+}) => {
+  return (
+    <div className="highlights-header">
+      <div className="highlights-actions">
+        <div className="highlights-actions-left">
+          {onHighlightVisibilityChange && (
+            <div className="highlight-level-toggles">
+              <button
+                onClick={() => onHighlightVisibilityChange({ 
+                  ...highlightVisibility, 
+                  nostrverse: !highlightVisibility.nostrverse 
+                })}
+                className={`level-toggle-btn ${highlightVisibility.nostrverse ? 'active' : ''}`}
+                title="Toggle nostrverse highlights"
+                aria-label="Toggle nostrverse highlights"
+                style={{ color: highlightVisibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }}
+              >
+                <FontAwesomeIcon icon={faNetworkWired} />
+              </button>
+              <button
+                onClick={() => onHighlightVisibilityChange({ 
+                  ...highlightVisibility, 
+                  friends: !highlightVisibility.friends 
+                })}
+                className={`level-toggle-btn ${highlightVisibility.friends ? 'active' : ''}`}
+                title={currentUserPubkey ? "Toggle friends highlights" : "Login to see friends highlights"}
+                aria-label="Toggle friends highlights"
+                style={{ color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined }}
+                disabled={!currentUserPubkey}
+              >
+                <FontAwesomeIcon icon={faUserGroup} />
+              </button>
+              <button
+                onClick={() => onHighlightVisibilityChange({ 
+                  ...highlightVisibility, 
+                  mine: !highlightVisibility.mine 
+                })}
+                className={`level-toggle-btn ${highlightVisibility.mine ? 'active' : ''}`}
+                title={currentUserPubkey ? "Toggle my highlights" : "Login to see your highlights"}
+                aria-label="Toggle my highlights"
+                style={{ color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined }}
+                disabled={!currentUserPubkey}
+              >
+                <FontAwesomeIcon icon={faUser} />
+              </button>
+            </div>
+          )}
+          {onRefresh && (
+            <button
+              onClick={onRefresh}
+              className="refresh-highlights-btn"
+              title="Refresh highlights"
+              aria-label="Refresh highlights"
+              disabled={loading}
+            >
+              <FontAwesomeIcon icon={faRotate} spin={loading} />
+            </button>
+          )}
+          {hasHighlights && (
+            <button
+              onClick={onToggleHighlights}
+              className="toggle-highlight-display-btn"
+              title={showHighlights ? 'Hide highlights' : 'Show highlights'}
+              aria-label={showHighlights ? 'Hide highlights' : 'Show highlights'}
+            >
+              <FontAwesomeIcon icon={showHighlights ? faEye : faEyeSlash} />
+            </button>
+          )}
+        </div>
+        <button
+          onClick={onToggleCollapse}
+          className="toggle-highlights-btn"
+          title="Collapse highlights panel"
+          aria-label="Collapse highlights panel"
+        >
+          <FontAwesomeIcon icon={faChevronRight} rotation={180} />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default HighlightsPanelHeader
+

src/hooks/useFilteredHighlights.ts

@@ -0,0 +1,68 @@
+import { useMemo } from 'react'
+import { Highlight } from '../types/highlights'
+import { HighlightVisibility } from '../components/HighlightsPanel'
+
+/**
+ * Normalize URL for comparison
+ */
+function normalizeUrl(url: string): string {
+  try {
+    const urlObj = new URL(url.startsWith('http') ? url : `https://${url}`)
+    return `${urlObj.hostname.replace(/^www\./, '')}${urlObj.pathname}`.replace(/\/$/, '').toLowerCase()
+  } catch {
+    return url.replace(/^https?:\/\//, '').replace(/^www\./, '').replace(/\/$/, '').toLowerCase()
+  }
+}
+
+interface UseFilteredHighlightsParams {
+  highlights: Highlight[]
+  selectedUrl?: string
+  highlightVisibility: HighlightVisibility
+  currentUserPubkey?: string
+  followedPubkeys: Set<string>
+}
+
+export const useFilteredHighlights = ({
+  highlights,
+  selectedUrl,
+  highlightVisibility,
+  currentUserPubkey,
+  followedPubkeys
+}: UseFilteredHighlightsParams) => {
+  return useMemo(() => {
+    if (!selectedUrl) return highlights
+    
+    let urlFiltered = highlights
+    
+    // For Nostr articles, we already fetched highlights specifically for this article
+    if (!selectedUrl.startsWith('nostr:')) {
+      const normalizedSelected = normalizeUrl(selectedUrl)
+      
+      urlFiltered = highlights.filter(h => {
+        if (!h.urlReference) return false
+        const normalizedRef = normalizeUrl(h.urlReference)
+        return normalizedSelected === normalizedRef || 
+               normalizedSelected.includes(normalizedRef) ||
+               normalizedRef.includes(normalizedSelected)
+      })
+    }
+    
+    // Classify and filter by visibility levels
+    return urlFiltered
+      .map(h => {
+        let level: 'mine' | 'friends' | 'nostrverse' = 'nostrverse'
+        if (h.pubkey === currentUserPubkey) {
+          level = 'mine'
+        } else if (followedPubkeys.has(h.pubkey)) {
+          level = 'friends'
+        }
+        return { ...h, level }
+      })
+      .filter(h => {
+        if (h.level === 'mine') return highlightVisibility.mine
+        if (h.level === 'friends') return highlightVisibility.friends
+        return highlightVisibility.nostrverse
+      })
+  }, [highlights, selectedUrl, highlightVisibility, currentUserPubkey, followedPubkeys])
+}
+