From 5e788b002692bc76f69438cd6f23fe979fd14043 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 22:04:01 +0100
Subject: [PATCH] style(highlights): move collapse button to far right of
 highlights header

---
 src/components/HighlightsPanel.tsx | 116 +++++++++++++++--------------
 src/index.css                      |  15 +++-
 2 files changed, 72 insertions(+), 59 deletions(-)

diff --git a/src/components/HighlightsPanel.tsx b/src/components/HighlightsPanel.tsx
index d8293aa8..9dd16896 100644
--- a/src/components/HighlightsPanel.tsx
+++ b/src/components/HighlightsPanel.tsx
@@ -123,69 +123,71 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
     <div className="highlights-container">
       <div className="highlights-header">
         <div className="highlights-actions">
-          {onHighlightVisibilityChange && (
-            <div className="highlight-level-toggles">
+          <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={faGlobe} />
+                </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={() => 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 }}
+                onClick={onRefresh}
+                className="refresh-highlights-btn"
+                title="Refresh highlights"
+                aria-label="Refresh highlights"
+                disabled={loading}
               >
-                <FontAwesomeIcon icon={faGlobe} />
+                <FontAwesomeIcon icon={faRotate} spin={loading} />
               </button>
+            )}
+            {filteredHighlights.length > 0 && (
               <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}
+                onClick={handleToggleUnderlines}
+                className="toggle-underlines-btn"
+                title={showUnderlines ? 'Hide underlines' : 'Show underlines'}
+                aria-label={showUnderlines ? 'Hide underlines' : 'Show underlines'}
               >
-                <FontAwesomeIcon icon={faUserGroup} />
+                <FontAwesomeIcon icon={showUnderlines ? faEye : faEyeSlash} />
               </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={handleToggleUnderlines}
-              className="toggle-underlines-btn"
-              title={showUnderlines ? 'Hide underlines' : 'Show underlines'}
-              aria-label={showUnderlines ? 'Hide underlines' : 'Show underlines'}
-            >
-              <FontAwesomeIcon icon={showUnderlines ? faEye : faEyeSlash} />
-            </button>
-          )}
+            )}
+          </div>
           <button
             onClick={onToggleCollapse}
             className="toggle-highlights-btn"
diff --git a/src/index.css b/src/index.css
index a1d93534..6da19b73 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1248,8 +1248,19 @@ body {
   justify-content: space-between;
   padding: 0.75rem 1rem;
   border-bottom: 1px solid #333;
-  background: #1e1e1e;
-  border-radius: 12px 12px 0 0;
+}
+
+.highlights-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.highlights-actions-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .highlights-title {