feat: find ID

Signed-off-by: Kingtous <kingtous@qq.com>

flutter/lib/desktop/pages/connection_page.dart

@@ -977,6 +977,9 @@ class _PeerTabbedPageState extends State<_PeerTabbedPage>
   // hard code for now
   void _handleTabSelection() {
     if (_tabController.indexIsChanging) {
+      // reset search text
+      peerSearchText.value = "";
+      peerSearchTextController.clear();
       _tabIndex.value = _tabController.index;
       switch (_tabController.index) {
         case 0:
@@ -1063,7 +1066,31 @@ class _PeerTabbedPageState extends State<_PeerTabbedPage>
   }
 
   _createSearchBar(BuildContext context) {
-    return Offstage();
+    return Container(
+      width: 175,
+      height: 30,
+      margin: EdgeInsets.only(right: 16),
+      decoration: BoxDecoration(color: Colors.white),
+      child: Obx(
+        () => TextField(
+          controller: peerSearchTextController,
+          onChanged: (searchText) {
+            peerSearchText.value = searchText;
+          },
+          decoration: InputDecoration(
+            prefixIcon: Icon(
+              Icons.search,
+              size: 20,
+            ),
+            contentPadding: EdgeInsets.zero,
+            hintText: translate("Search ID"),
+            hintStyle: TextStyle(fontSize: 14),
+            border: OutlineInputBorder(),
+            isDense: true,
+          ),
+        ),
+      ),
+    );
   }
 
   _createPeerViewTypeSwitch(BuildContext context) {
@@ -1082,6 +1109,7 @@ class _PeerTabbedPageState extends State<_PeerTabbedPage>
                 child: Icon(
                   Icons.grid_view_rounded,
                   size: 20,
+                  color: Colors.black54,
                 )),
           ),
         ),
@@ -1096,11 +1124,12 @@ class _PeerTabbedPageState extends State<_PeerTabbedPage>
                 },
                 child: Icon(
                   Icons.list,
-                  size: 20,
+                  size: 24,
+                  color: Colors.black54,
                 )),
           ),
         ),
       ],
-    );
+    ).paddingOnly(right: 16.0);
   }
 }

flutter/lib/desktop/widgets/peer_widget.dart

@@ -15,10 +15,16 @@ import 'peercard_widget.dart';
 typedef OffstageFunc = bool Function(Peer peer);
 typedef PeerCardWidgetFunc = Widget Function(Peer peer);
 
+/// for peer search text, global obs value
+final peerSearchText = "".obs;
+final peerSearchTextController =
+    TextEditingController(text: peerSearchText.value);
+
 class _PeerWidget extends StatefulWidget {
   late final _peers;
   late final OffstageFunc _offstageFunc;
   late final PeerCardWidgetFunc _peerCardWidgetFunc;
+
   _PeerWidget(Peers peers, OffstageFunc offstageFunc,
       PeerCardWidgetFunc peerCardWidgetFunc,
       {Key? key})
@@ -72,15 +78,24 @@ class _PeerWidgetState extends State<_PeerWidget> with WindowListener {
 
   @override
   Widget build(BuildContext context) {
-    final space = 8.0;
+    final space = 12.0;
     return ChangeNotifierProvider<Peers>(
       create: (context) => super.widget._peers,
-      child: SingleChildScrollView(
+      child: Consumer<Peers>(
-          child: Consumer<Peers>(
+          builder: (context, peers, child) => peers.peers.isEmpty
-              builder: (context, peers, child) => Wrap(
+              ? Center(
-                  children: () {
+                  child: Text(translate("Empty")),
+                )
+              : SingleChildScrollView(
+                  child: ObxValue<RxString>((searchText) {
                     final cards = <Widget>[];
-                    peers.peers.forEach((peer) {
+                    peers.peers.where((peer) {
+                      if (searchText.isEmpty) {
+                        return true;
+                      } else {
+                        return peer.id.contains(peerSearchText.value);
+                      }
+                    }).forEach((peer) {
                       cards.add(Offstage(
                           offstage: super.widget._offstageFunc(peer),
                           child: Obx(
@@ -105,10 +120,10 @@ class _PeerWidgetState extends State<_PeerWidget> with WindowListener {
                             ),
                           )));
                     });
-                    return cards;
+                    return Wrap(
-                  }(),
+                        children: cards, spacing: space, runSpacing: space);
-                  spacing: space,
+                  }, peerSearchText),
-                  runSpacing: space))),
+                )),
     );
   }