From 90d5a4e1b48e2060aed5b1006ac145f8eea8b7ff Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Fri, 14 Nov 2025 07:32:57 -0500
Subject: [PATCH] refactor: simplify peers section UI

- Change add friend button to icon-only (UserPlus icon)
- Remove X close button from peers header
- Make onClose prop optional in PeersView interface
- Maintain tooltip for accessibility
---
 ui/desktop/src/components/peers/PeersView.tsx | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/ui/desktop/src/components/peers/PeersView.tsx b/ui/desktop/src/components/peers/PeersView.tsx
index e840db2d20..7affd640a9 100644
--- a/ui/desktop/src/components/peers/PeersView.tsx
+++ b/ui/desktop/src/components/peers/PeersView.tsx
@@ -24,7 +24,7 @@ import { MatrixUser } from '../../services/MatrixService';
 import MatrixAuth from './MatrixAuth';
 
 interface PeersViewProps {
-  onClose: () => void;
+  onClose?: () => void;
 }
 
 const StatusIndicator: React.FC<{ status?: string }> = ({ status }) => {
@@ -419,10 +419,10 @@ const PeersView: React.FC<PeersViewProps> = ({ onClose }) => {
             whileTap={{ scale: 0.95 }}
             onClick={() => setShowAddFriendModal(true)}
             disabled={!isConnected}
-            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-background-accent text-text-on-accent hover:bg-background-accent/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            className="p-2 rounded-lg bg-background-accent text-text-on-accent hover:bg-background-accent/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            title="Add Friend"
           >
-            <UserPlus className="w-4 h-4" />
-            Add Friend
+            <UserPlus className="w-5 h-5" />
           </motion.button>
 
           <button
@@ -432,13 +432,6 @@ const PeersView: React.FC<PeersViewProps> = ({ onClose }) => {
           >
             <Settings className="w-5 h-5" />
           </button>
-
-          <button
-            onClick={onClose}
-            className="p-2 rounded-lg hover:bg-background-medium transition-colors"
-          >
-            <X className="w-5 h-5" />
-          </button>
         </div>
       </div>