From 0fe108545729a3d17d4366a482ada4b6a260fd56 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 20:18:06 +0100
Subject: [PATCH] feat: always show friends and user highlight buttons

- Show friends and user highlight buttons regardless of login status
- Disable buttons when user is not logged in (instead of hiding them)
- Add helpful tooltips indicating login is required
- Add disabled state styling with reduced opacity and not-allowed cursor
---
 src/components/HighlightsPanel.tsx | 30 +++++++++++++++---------------
 src/index.css                      |  9 +++++++++
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/HighlightsPanel.tsx b/src/components/HighlightsPanel.tsx
index 5c496bd7..f615f64a 100644
--- a/src/components/HighlightsPanel.tsx
+++ b/src/components/HighlightsPanel.tsx
@@ -143,26 +143,26 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
                   friends: !highlightVisibility.friends 
                 })}
                 className={`level-toggle-btn ${highlightVisibility.friends ? 'active' : ''}`}
-                title="Toggle friends highlights"
+                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>
-              {currentUserPubkey && (
-                <button
-                  onClick={() => onHighlightVisibilityChange({ 
-                    ...highlightVisibility, 
-                    mine: !highlightVisibility.mine 
-                  })}
-                  className={`level-toggle-btn ${highlightVisibility.mine ? 'active' : ''}`}
-                  title="Toggle my highlights"
-                  aria-label="Toggle my highlights"
-                  style={{ color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined }}
-                >
-                  <FontAwesomeIcon icon={faUser} />
-                </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 && (
diff --git a/src/index.css b/src/index.css
index cea0dd7a..9d8e29e6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1326,6 +1326,15 @@ body {
   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-underlines-btn,
 .toggle-highlights-btn {