refactor DesktopTab impl for cm

flutter/lib/desktop/pages/server_page.dart

@@ -79,6 +79,8 @@ class ConnectionManagerState extends State<ConnectionManager> {
   @override
   void initState() {
     gFFI.serverModel.updateClientState();
+    gFFI.serverModel.tabController.onSelected = (index) =>
+        gFFI.chatModel.changeCurrentID(gFFI.serverModel.clients[index].id);
     // test
     // gFFI.serverModel.clients.forEach((client) {
     //   DesktopTabBar.onAdd(
@@ -103,38 +105,20 @@ class ConnectionManagerState extends State<ConnectionManager> {
               ),
             ],
           )
-        : Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              SizedBox(
-                height: kTextTabBarHeight,
-                child: Obx(() => DesktopTabBar(
-                      dark: isDarkTheme(),
-                      mainTab: true,
-                      tabs: serverModel.tabs,
-                      showTitle: false,
-                      showMaximize: false,
-                      showMinimize: false,
-                      onSelected: (index) => gFFI.chatModel
-                          .changeCurrentID(serverModel.clients[index].id),
-                    )),
-              ),
-              Expanded(
-                child: Row(children: [
-                  Expanded(
-                      child: PageView(
-                          controller: DesktopTabBar.controller.value,
-                          children: serverModel.clients
-                              .map((client) => buildConnectionCard(client))
-                              .toList(growable: false))),
+        : DesktopTab(
+            theme: isDarkTheme() ? TarBarTheme.dark() : TarBarTheme.light(),
+            showTitle: false,
+            showMaximize: false,
+            showMinimize: false,
+            controller: serverModel.tabController,
+            isMainWindow: true,
+            pageViewBuilder: (pageView) => Row(children: [
+                  Expanded(child: pageView),
                   Consumer<ChatModel>(
                       builder: (_, model, child) => model.isShowChatPage
                           ? Expanded(child: Scaffold(body: ChatPage()))
                           : Offstage())
-                ]),
-              )
-            ],
-          );
+                ]));
   }
 
   Widget buildTitleBar(Widget middle) {
@@ -156,23 +140,6 @@ class ConnectionManagerState extends State<ConnectionManager> {
     );
   }
 
-  Widget buildConnectionCard(Client client) {
-    return Column(
-      mainAxisAlignment: MainAxisAlignment.start,
-      crossAxisAlignment: CrossAxisAlignment.start,
-      key: ValueKey(client.id),
-      children: [
-        _CmHeader(client: client),
-        client.isFileTransfer ? Offstage() : _PrivilegeBoard(client: client),
-        Expanded(
-            child: Align(
-          alignment: Alignment.bottomCenter,
-          child: _CmControlPanel(client: client),
-        ))
-      ],
-    ).paddingSymmetric(vertical: 8.0, horizontal: 8.0);
-  }
-
   Widget buildTab(Client client) {
     return Tab(
       child: Row(
@@ -191,6 +158,23 @@ class ConnectionManagerState extends State<ConnectionManager> {
   }
 }
 
+Widget buildConnectionCard(Client client) {
+  return Column(
+    mainAxisAlignment: MainAxisAlignment.start,
+    crossAxisAlignment: CrossAxisAlignment.start,
+    key: ValueKey(client.id),
+    children: [
+      _CmHeader(client: client),
+      client.isFileTransfer ? Offstage() : _PrivilegeBoard(client: client),
+      Expanded(
+          child: Align(
+        alignment: Alignment.bottomCenter,
+        child: _CmControlPanel(client: client),
+      ))
+    ],
+  ).paddingSymmetric(vertical: 8.0, horizontal: 8.0);
+}
+
 class _AppIcon extends StatelessWidget {
   const _AppIcon({Key? key}) : super(key: key);
 
@@ -421,9 +405,11 @@ class _CmControlPanel extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return client.authorized
-        ? buildAuthorized(context)
-        : buildUnAuthorized(context);
+    return Consumer<ServerModel>(builder: (_, model, child) {
+      return client.authorized
+          ? buildAuthorized(context)
+          : buildUnAuthorized(context);
+    });
   }
 
   buildAuthorized(BuildContext context) {

flutter/lib/desktop/widgets/tabbar_widget.dart

@@ -51,6 +51,8 @@ class DesktopTabController {
   /// index, key
   Function(int, String)? onRemove;
 
+  Function(int)? onSelected;
+
   void add(TabInfo tab) {
     if (!isDesktop) return;
     final index = state.value.tabs.indexWhere((e) => e.key == tab.key);
@@ -96,8 +98,7 @@ class DesktopTabController {
       val.pageController.jumpToPage(index);
       val.scrollController.scrollToItem(index, center: true, animate: true);
     });
-
-    // onSelected callback
+    onSelected?.call(index);
   }
 
   void closeBy(String? key) {
@@ -172,7 +173,6 @@ class DesktopTab extends StatelessWidget {
   }
 
   Widget _buildPageView() {
-    debugPrint("_buildPageView: ${state.value.tabs.length}");
     return Obx(() => PageView(
         controller: state.value.pageController,
         children:

flutter/lib/models/chat_model.dart

@@ -200,6 +200,7 @@ class ChatModel with ChangeNotifier {
     if (!_isShowChatPage) {
       toggleCMChatPage(id);
     }
+    _ffi.target?.serverModel.jumpTo(id);
 
     late final chatUser;
     if (id == clientModeID) {

flutter/lib/models/server_model.dart

@@ -4,10 +4,10 @@ import 'dart:io';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_hbb/models/platform_model.dart';
-import 'package:get/get_rx/src/rx_types/rx_types.dart';
 import 'package:wakelock/wakelock.dart';
 
 import '../common.dart';
+import '../desktop/pages/server_page.dart' as Desktop;
 import '../desktop/widgets/tabbar_widget.dart';
 import '../mobile/pages/server_page.dart';
 import 'model.dart';
@@ -32,7 +32,7 @@ class ServerModel with ChangeNotifier {
   late final TextEditingController _serverId;
   final _serverPasswd = TextEditingController(text: "");
 
-  RxList<TabInfo> tabs = RxList<TabInfo>.empty(growable: true);
+  final tabController = DesktopTabController();
 
   List<Client> _clients = [];
 
@@ -352,16 +352,15 @@ class ServerModel with ChangeNotifier {
         exit(0);
       }
       _clients.clear();
-      tabs.clear();
+      tabController.state.value.tabs.clear();
       for (var clientJson in clientsJson) {
         final client = Client.fromJson(clientJson);
         _clients.add(client);
-        DesktopTabBar.onAdd(
-            tabs,
-            TabInfo(
-                key: client.id.toString(),
-                label: client.name,
-                closable: false));
+        tabController.add(TabInfo(
+            key: client.id.toString(),
+            label: client.name,
+            closable: false,
+            page: Desktop.buildConnectionCard(client)));
       }
       notifyListeners();
     } catch (e) {
@@ -376,10 +375,11 @@ class ServerModel with ChangeNotifier {
         return;
       }
       _clients.add(client);
-      DesktopTabBar.onAdd(
-          tabs,
-          TabInfo(
-              key: client.id.toString(), label: client.name, closable: false));
+      tabController.add(TabInfo(
+          key: client.id.toString(),
+          label: client.name,
+          closable: false,
+          page: Desktop.buildConnectionCard(client)));
       scrollToBottom();
       notifyListeners();
       if (isAndroid) showLoginDialog(client);
@@ -456,7 +456,7 @@ class ServerModel with ChangeNotifier {
       bind.cmLoginRes(connId: client.id, res: res);
       parent.target?.invokeMethod("cancel_notification", client.id);
       final index = _clients.indexOf(client);
-      DesktopTabBar.remove(tabs, index);
+      tabController.remove(index);
       _clients.remove(client);
     }
   }
@@ -471,10 +471,11 @@ class ServerModel with ChangeNotifier {
       } else {
         _clients[index].authorized = true;
       }
-      DesktopTabBar.onAdd(
-          tabs,
-          TabInfo(
-              key: client.id.toString(), label: client.name, closable: false));
+      tabController.add(TabInfo(
+          key: client.id.toString(),
+          label: client.name,
+          closable: false,
+          page: Desktop.buildConnectionCard(client)));
       scrollToBottom();
       notifyListeners();
     } catch (e) {}
@@ -486,7 +487,7 @@ class ServerModel with ChangeNotifier {
       if (_clients.any((c) => c.id == id)) {
         final index = _clients.indexWhere((client) => client.id == id);
         _clients.removeAt(index);
-        DesktopTabBar.remove(tabs, index);
+        tabController.remove(index);
         parent.target?.dialogManager.dismissByTag(getLoginDialogTag(id));
         parent.target?.invokeMethod("cancel_notification", id);
       }
@@ -501,7 +502,12 @@ class ServerModel with ChangeNotifier {
       bind.cmCloseConnection(connId: client.id);
     });
     _clients.clear();
-    tabs.clear();
+    tabController.state.value.tabs.clear();
+  }
+
+  void jumpTo(int id) {
+    final index = _clients.indexWhere((client) => client.id == id);
+    tabController.jumpTo(index);
   }
 }