feat: apply 'my highlights' color to collapsed highlights button

- Update HighlightsPanelCollapsed to accept settings prop
- Apply highlightColorMine to the expand button icon and text
- Pass settings through HighlightsPanel and ThreePaneLayout

src/components/HighlightsPanel.tsx

@@ -8,6 +8,7 @@ import HighlightsPanelCollapsed from './HighlightsPanel/HighlightsPanelCollapsed
 import HighlightsPanelHeader from './HighlightsPanel/HighlightsPanelHeader'
 import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
+import { UserSettings } from '../services/settingsService'
 
 export interface HighlightVisibility {
   nostrverse: boolean
@@ -32,6 +33,7 @@ interface HighlightsPanelProps {
   followedPubkeys?: Set<string>
   relayPool?: RelayPool | null
   eventStore?: IEventStore | null
+  settings?: UserSettings
 }
 
 export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
@@ -50,7 +52,8 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
   onHighlightVisibilityChange,
   followedPubkeys = new Set(),
   relayPool,
-  eventStore
+  eventStore,
+  settings
 }) => {
   const [showHighlights, setShowHighlights] = useState(true)
   const [localHighlights, setLocalHighlights] = useState(highlights)
@@ -90,6 +93,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
       <HighlightsPanelCollapsed 
         hasHighlights={filteredHighlights.length > 0} 
         onToggleCollapse={onToggleCollapse}
+        settings={settings}
       />
     )
   }

src/components/HighlightsPanel/HighlightsPanelCollapsed.tsx

@@ -1,16 +1,21 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHighlighter, faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { UserSettings } from '../../services/settingsService'
 
 interface HighlightsPanelCollapsedProps {
   hasHighlights: boolean
   onToggleCollapse: () => void
+  settings?: UserSettings
 }
 
 const HighlightsPanelCollapsed: React.FC<HighlightsPanelCollapsedProps> = ({
   hasHighlights,
-  onToggleCollapse
+  onToggleCollapse,
+  settings
 }) => {
+  const highlightColor = settings?.highlightColorMine || '#ffff00'
+  
   return (
     <div className="highlights-container collapsed">
       <button
@@ -18,6 +23,7 @@ const HighlightsPanelCollapsed: React.FC<HighlightsPanelCollapsedProps> = ({
         className={`toggle-highlights-btn with-icon ${hasHighlights ? 'has-highlights' : ''}`}
         title="Expand highlights panel"
         aria-label="Expand highlights panel"
+        style={{ color: highlightColor }}
       >
         <FontAwesomeIcon icon={faHighlighter} className={hasHighlights ? 'glow' : ''} />
         <FontAwesomeIcon icon={faChevronRight} />

src/components/ThreePaneLayout.tsx

@@ -355,6 +355,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             followedPubkeys={props.followedPubkeys}
             relayPool={props.relayPool}
             eventStore={props.eventStore}
+            settings={props.settings}
           />
         </div>
       </div>