feat: add refresh button to highlights panel

- Add refresh button with rotate icon to highlights header
- Button spins while loading highlights
- Disabled state when already loading
- Positioned before toggle underlines button
- Calls handleFetchHighlights to refetch from relays
- Add CSS styles for refresh button with disabled state

Users can now manually refresh highlights to see newly
created highlights without reloading the page.

src/components/Bookmarks.tsx

@@ -139,6 +139,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
           selectedUrl={selectedUrl}
           onToggleUnderlines={setShowUnderlines}
           selectedHighlightId={selectedHighlightId}
+          onRefresh={handleFetchHighlights}
         />
       </div>
     </div>

src/components/HighlightsPanel.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faChevronLeft, faHighlighter, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faChevronLeft, faHighlighter, faEye, faEyeSlash, faRotate } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
 import { HighlightItem } from './HighlightItem'
 
@@ -13,6 +13,7 @@ interface HighlightsPanelProps {
   selectedUrl?: string
   onToggleUnderlines?: (show: boolean) => void
   selectedHighlightId?: string
+  onRefresh?: () => void
 }
 
 export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
@@ -23,7 +24,8 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
   onSelectUrl,
   selectedUrl,
   onToggleUnderlines,
-  selectedHighlightId
+  selectedHighlightId,
+  onRefresh
 }) => {
   const [showUnderlines, setShowUnderlines] = useState(true)
   
@@ -81,6 +83,17 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
           {!loading && <span className="count">({filteredHighlights.length})</span>}
         </div>
         <div className="highlights-actions">
+          {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={handleToggleUnderlines}

src/index.css

@@ -1142,6 +1142,7 @@ body {
   gap: 0.5rem;
 }
 
+.refresh-highlights-btn,
 .toggle-underlines-btn,
 .toggle-highlights-btn {
   background: transparent;
@@ -1158,17 +1159,29 @@ body {
   transition: all 0.2s ease;
 }
 
+.refresh-highlights-btn:hover,
 .toggle-underlines-btn:hover,
 .toggle-highlights-btn:hover {
   background: #2a2a2a;
   color: #fff;
 }
 
+.refresh-highlights-btn:active,
 .toggle-underlines-btn:active,
 .toggle-highlights-btn:active {
   transform: translateY(1px);
 }
 
+.refresh-highlights-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.refresh-highlights-btn:disabled:hover {
+  background: transparent;
+  color: #ddd;
+}
+
 .highlights-loading,
 .highlights-empty {
   display: flex;