From e4b0d6d1cdaff2e47407d47d63eee69a72454e6c Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 14 Oct 2025 00:50:52 +0200
Subject: [PATCH] refactor: unify button styles across sidebars using
 IconButton

- Convert HighlightsPanel buttons to use IconButton component
- Add style prop support to IconButton for custom styling
- Remove redundant CSS for old button classes (level-toggle-btn, refresh-highlights-btn, etc.)
- Keep only highlight-level-toggles container styling
- Consistent button appearance across left and right sidebars
- DRY: Single IconButton component handles all sidebar buttons
---
 .../HighlightsPanel/HighlightsPanelHeader.tsx | 74 +++++++++----------
 src/components/IconButton.tsx                 |  6 +-
 src/styles/layout/highlights.css              | 32 --------
 3 files changed, 39 insertions(+), 73 deletions(-)

diff --git a/src/components/HighlightsPanel/HighlightsPanelHeader.tsx b/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
index 2faffc05..fa156592 100644
--- a/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
+++ b/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
@@ -1,7 +1,7 @@
 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'
+import IconButton from '../IconButton'
 
 interface HighlightsPanelHeaderProps {
   loading: boolean
@@ -32,76 +32,72 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
         <div className="highlights-actions-left">
           {onHighlightVisibilityChange && (
             <div className="highlight-level-toggles">
-              <button
+              <IconButton
+                icon={faNetworkWired}
                 onClick={() => onHighlightVisibilityChange({ 
                   ...highlightVisibility, 
                   nostrverse: !highlightVisibility.nostrverse 
                 })}
-                className={`level-toggle-btn ${highlightVisibility.nostrverse ? 'active' : ''}`}
                 title="Toggle nostrverse highlights"
-                aria-label="Toggle nostrverse highlights"
+                ariaLabel="Toggle nostrverse highlights"
+                variant={highlightVisibility.nostrverse ? 'primary' : 'ghost'}
                 style={{ color: highlightVisibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }}
-              >
-                <FontAwesomeIcon icon={faNetworkWired} />
-              </button>
-              <button
+              />
+              <IconButton
+                icon={faUserGroup}
                 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 }}
+                ariaLabel="Toggle friends highlights"
+                variant={highlightVisibility.friends ? 'primary' : 'ghost'}
                 disabled={!currentUserPubkey}
-              >
-                <FontAwesomeIcon icon={faUserGroup} />
-              </button>
-              <button
+                style={{ color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined }}
+              />
+              <IconButton
+                icon={faUser}
                 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 }}
+                ariaLabel="Toggle my highlights"
+                variant={highlightVisibility.mine ? 'primary' : 'ghost'}
                 disabled={!currentUserPubkey}
-              >
-                <FontAwesomeIcon icon={faUser} />
-              </button>
+                style={{ color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined }}
+              />
             </div>
           )}
           {onRefresh && (
-            <button
+            <IconButton
+              icon={faRotate}
               onClick={onRefresh}
-              className="refresh-highlights-btn"
               title="Refresh highlights"
-              aria-label="Refresh highlights"
+              ariaLabel="Refresh highlights"
+              variant="ghost"
               disabled={loading}
-            >
-              <FontAwesomeIcon icon={faRotate} spin={loading} />
-            </button>
+              spin={loading}
+            />
           )}
           {hasHighlights && (
-            <button
+            <IconButton
+              icon={showHighlights ? faEye : faEyeSlash}
               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>
+              ariaLabel={showHighlights ? 'Hide highlights' : 'Show highlights'}
+              variant="ghost"
+            />
           )}
         </div>
-        <button
+        <IconButton
+          icon={faChevronRight}
           onClick={onToggleCollapse}
-          className="toggle-highlights-btn"
           title="Collapse highlights panel"
-          aria-label="Collapse highlights panel"
-        >
-          <FontAwesomeIcon icon={faChevronRight} rotation={180} />
-        </button>
+          ariaLabel="Collapse highlights panel"
+          variant="ghost"
+          style={{ transform: 'rotate(180deg)' }}
+        />
       </div>
     </div>
   )
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index 8b046d28..bbde52a3 100644
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -12,6 +12,7 @@ interface IconButtonProps {
   disabled?: boolean
   spin?: boolean
   className?: string
+  style?: React.CSSProperties
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
@@ -23,7 +24,8 @@ const IconButton: React.FC<IconButtonProps> = ({
   size = 33,
   disabled = false,
   spin = false,
-  className = ''
+  className = '',
+  style
 }) => {
   return (
     <button
@@ -31,7 +33,7 @@ const IconButton: React.FC<IconButtonProps> = ({
       onClick={onClick}
       title={title}
       aria-label={ariaLabel || title}
-      style={{ width: size, height: size }}
+      style={{ width: size, height: size, ...style }}
       disabled={disabled}
     >
       <FontAwesomeIcon icon={icon} spin={spin} />
diff --git a/src/styles/layout/highlights.css b/src/styles/layout/highlights.css
index 1d11d2fe..73473a3f 100644
--- a/src/styles/layout/highlights.css
+++ b/src/styles/layout/highlights.css
@@ -74,38 +74,6 @@
 
 /* Three-level highlight toggles */
 .highlight-level-toggles { display: flex; gap: 0.25rem; padding: 0.25rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px; }
-.highlight-level-toggles .level-toggle-btn { background: none; border: none; color: rgb(161 161 170); /* zinc-400 */ cursor: pointer; padding: 0.375rem 0.5rem; border-radius: 3px; transition: all 0.2s; font-size: 0.9rem; }
-.highlight-level-toggles .level-toggle-btn:hover { background: rgba(255, 255, 255, 0.1); }
-.highlight-level-toggles .level-toggle-btn.active { background: rgba(255, 255, 255, 0.1); opacity: 1; }
-.highlight-level-toggles .level-toggle-btn:not(.active) { opacity: 0.4; }
-.highlight-level-toggles .level-toggle-btn:disabled { opacity: 0.3; cursor: not-allowed; }
-.highlight-level-toggles .level-toggle-btn:disabled:hover { background: none; }
-
-.refresh-highlights-btn,
-.toggle-highlight-display-btn,
-.toggle-highlights-btn {
-  background: transparent;
-  color: rgb(228 228 231); /* zinc-200 */
-  border: 1px solid rgb(82 82 91); /* zinc-600 */
-  padding: 0;
-  border-radius: 6px;
-  cursor: pointer;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-}
-
-.refresh-highlights-btn:hover,
-.toggle-highlight-display-btn:hover,
-.toggle-highlights-btn:hover { background: rgb(39 39 42); /* zinc-800 */ color: rgb(255 255 255); /* white */ }
-.refresh-highlights-btn:active,
-.toggle-highlight-display-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: rgb(228 228 231); /* zinc-200 */ }
 
 .highlights-loading,
 .highlights-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; color: rgb(161 161 170); /* zinc-400 */ text-align: center; gap: 0.5rem; }