From 6ea8c0d40ea33b8c5d16927d51f53d0dce8ce37b Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 08:53:17 +0200
Subject: [PATCH] feat: make relay status indicator smaller and hide on scroll

- Reduce overall size of indicator on desktop (smaller padding, font sizes)
- On mobile, match size with sidebar toggle buttons (var(--min-touch-target))
- Auto-collapse on mobile (collapsed by default, tap to expand)
- Hide when scrolling down on mobile, show when scrolling up
- Match behavior of other mobile UI controls for consistency
---
 src/components/RelayStatusIndicator.tsx |  8 ++++--
 src/components/ThreePaneLayout.tsx      |  5 +++-
 src/index.css                           | 38 +++++++++++++++++--------
 3 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/components/RelayStatusIndicator.tsx b/src/components/RelayStatusIndicator.tsx
index ddc8e13c..4e27efae 100644
--- a/src/components/RelayStatusIndicator.tsx
+++ b/src/components/RelayStatusIndicator.tsx
@@ -8,9 +8,13 @@ import { useIsMobile } from '../hooks/useMediaQuery'
 
 interface RelayStatusIndicatorProps {
   relayPool: RelayPool | null
+  showOnMobile?: boolean // Control visibility based on scroll
 }
 
-export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ relayPool }) => {
+export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ 
+  relayPool,
+  showOnMobile = true
+}) => {
   // Poll frequently for responsive offline indicator (5s instead of default 20s)
   const relayStatuses = useRelayStatus({ relayPool, pollingInterval: 5000 })
   const [isConnecting, setIsConnecting] = useState(true)
@@ -70,7 +74,7 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ rela
   
   return (
     <div 
-      className={`relay-status-indicator ${isConnecting ? 'connecting' : ''} ${isMobile ? 'mobile' : ''} ${isExpanded ? 'expanded' : ''}`}
+      className={`relay-status-indicator ${isConnecting ? 'connecting' : ''} ${isMobile ? 'mobile' : ''} ${isExpanded ? 'expanded' : ''} ${isMobile && !showOnMobile ? 'hidden' : 'visible'}`}
       title={
         !isMobile ? (
           isConnecting
diff --git a/src/components/ThreePaneLayout.tsx b/src/components/ThreePaneLayout.tsx
index ce8c6577..bb598226 100644
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -366,7 +366,10 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
           highlightColor={props.settings.highlightColorMine || '#ffff00'}
         />
       )}
-      <RelayStatusIndicator relayPool={props.relayPool} />
+      <RelayStatusIndicator 
+        relayPool={props.relayPool}
+        showOnMobile={showMobileButtons}
+      />
       {props.toastMessage && (
         <Toast
           message={props.toastMessage}
diff --git a/src/index.css b/src/index.css
index a5217673..8b19cbb1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3182,13 +3182,13 @@ body.mobile-sidebar-open {
 /* Relay Status Indicator */
 .relay-status-indicator {
   position: fixed;
-  bottom: 1.5rem;
-  left: 1.5rem;
+  bottom: 1rem;
+  left: 1rem;
   z-index: 999;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
   background: rgba(245, 158, 11, 0.95);
   border: 1px solid rgba(245, 158, 11, 0.4);
   border-radius: 8px;
@@ -3196,12 +3196,13 @@ body.mobile-sidebar-open {
   backdrop-filter: blur(10px);
   transition: all 0.3s ease;
   cursor: default;
+  font-size: 0.875rem;
 }
 
-/* Mobile compact mode - just show icon */
+/* Mobile compact mode - just show icon, match sidebar button size */
 @media (max-width: 768px) {
   .relay-status-indicator.mobile {
-    padding: 0.5rem;
+    padding: 0;
     width: var(--min-touch-target);
     height: var(--min-touch-target);
     display: flex;
@@ -3209,12 +3210,13 @@ body.mobile-sidebar-open {
     justify-content: center;
     bottom: 1rem;
     left: 1rem;
+    gap: 0;
   }
 
   .relay-status-indicator.mobile.expanded {
     width: auto;
-    padding: 0.75rem 1rem;
-    gap: 0.75rem;
+    padding: 0.5rem 0.75rem;
+    gap: 0.5rem;
   }
 
   .relay-status-indicator.mobile .relay-status-icon {
@@ -3224,6 +3226,18 @@ body.mobile-sidebar-open {
   .relay-status-indicator.mobile:active {
     transform: scale(0.95);
   }
+
+  /* Hide/show on scroll */
+  .relay-status-indicator.mobile.hidden {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .relay-status-indicator.mobile.visible {
+    opacity: 1;
+    visibility: visible;
+  }
 }
 
 .relay-status-indicator.connecting {
@@ -3250,7 +3264,7 @@ body.mobile-sidebar-open {
 }
 
 .relay-status-icon {
-  font-size: 1.25rem;
+  font-size: 1rem;
   color: #1a1a1a;
   display: flex;
   align-items: center;
@@ -3260,18 +3274,18 @@ body.mobile-sidebar-open {
 .relay-status-text {
   display: flex;
   flex-direction: column;
-  gap: 0.15rem;
+  gap: 0.1rem;
 }
 
 .relay-status-title {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 600;
   color: #1a1a1a;
   line-height: 1.2;
 }
 
 .relay-status-subtitle {
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
   color: rgba(26, 26, 26, 0.8);
   line-height: 1.2;
 }