From 810ff060f8823501c7ed81726e703620c45e4342 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 14 Oct 2025 01:11:14 +0200
Subject: [PATCH] feat: make relay status indicator circular FAB on mobile

- Default to collapsed (icon only) on mobile
- Expand to show details when tapped on mobile
- Circular 56px FAB when collapsed, matching highlight button style
- Desktop always shows expanded with details
- Hide on scroll via showOnMobile prop (matches sidepanel buttons)
---
 src/components/RelayStatusIndicator.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/RelayStatusIndicator.tsx b/src/components/RelayStatusIndicator.tsx
index 2fff9ab3..4c8792e7 100644
--- a/src/components/RelayStatusIndicator.tsx
+++ b/src/components/RelayStatusIndicator.tsx
@@ -70,8 +70,12 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({
     }
   }
 
+  // On mobile, default to collapsed (icon only). On desktop, always show details.
   const showDetails = !isMobile || isExpanded
   
+  // On mobile when collapsed, make it circular like the highlight button
+  const isCollapsedOnMobile = isMobile && !isExpanded
+  
   return (
     <div 
       className={`relay-status-indicator ${isConnecting ? 'connecting' : ''} ${isMobile ? 'mobile' : ''} ${isExpanded ? 'expanded' : ''} ${isMobile && !showOnMobile ? 'hidden' : 'visible'}`}
@@ -92,12 +96,14 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({
         zIndex: 1000,
         display: 'flex',
         alignItems: 'center',
-        gap: '0.5rem',
-        padding: showDetails ? '0.75rem 1rem' : '0.75rem',
+        gap: showDetails ? '0.5rem' : '0',
+        padding: isCollapsedOnMobile ? '0.875rem' : (showDetails ? '0.75rem 1rem' : '0.75rem'),
+        width: isCollapsedOnMobile ? '56px' : 'auto',
+        height: isCollapsedOnMobile ? '56px' : 'auto',
         backgroundColor: 'rgba(39, 39, 42, 0.9)',
         backdropFilter: 'blur(8px)',
         border: '1px solid rgb(82, 82, 91)',
-        borderRadius: '12px',
+        borderRadius: isCollapsedOnMobile ? '50%' : '12px',
         color: 'rgb(228, 228, 231)',
         fontSize: '0.875rem',
         fontWeight: 500,
@@ -106,7 +112,8 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({
         opacity: isMobile && !showOnMobile ? 0 : 1,
         visibility: isMobile && !showOnMobile ? 'hidden' : 'visible',
         transition: 'all 0.3s ease',
-        userSelect: 'none'
+        userSelect: 'none',
+        justifyContent: isCollapsedOnMobile ? 'center' : 'flex-start'
       }}
     >
       <div className="relay-status-icon">