From 4f03a2c2767741991c450ea3d2ad7cd393e36ddc Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 15 Oct 2025 12:17:44 +0200
Subject: [PATCH] fix: hide highlights button when scrolled to the top

- Highlights button now hidden when at the very top of the page
- Tracks scroll position and hides button when scrollY <= 10px
- Bookmark button remains visible as always
- Highlights button appears when scrolling up from below
- Improves UX by reducing visual clutter at page top
---
 src/components/ThreePaneLayout.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/ThreePaneLayout.tsx b/src/components/ThreePaneLayout.tsx
index 4b86290c..4c77362f 100644
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBookmark, faHighlighter } from '@fortawesome/free-solid-svg-icons'
 import { RelayPool } from 'applesauce-relay'
@@ -105,14 +105,30 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
   const highlightsRef = useRef<HTMLDivElement>(null)
   const mainPaneRef = useRef<HTMLDivElement>(null)
   
-  // Detect scroll direction to hide/show mobile buttons
+  // Detect scroll direction and position to hide/show mobile buttons
   // Only hide on scroll down when viewing article content
   const isViewingArticle = !!(props.selectedUrl)
   const scrollDirection = useScrollDirection({ 
     threshold: 10, 
     enabled: isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && isViewingArticle
   })
-  const showMobileButtons = scrollDirection !== 'down'
+  
+  // Track if we're at the top of the page
+  const [isAtTop, setIsAtTop] = useState(true)
+  useEffect(() => {
+    if (!isMobile || !isViewingArticle) return
+    
+    const handleScroll = () => {
+      setIsAtTop(window.scrollY <= 10)
+    }
+    
+    handleScroll() // Check initial position
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [isMobile, isViewingArticle])
+  
+  const showMobileButtons = scrollDirection !== 'down' && !isAtTop
 
   // Lock body scroll when mobile sidebar or highlights is open
   useEffect(() => {