From 4b69ece608d6d21f94768c963409a65cba7b4878 Mon Sep 17 00:00:00 2001
From: Kingtous <kingtous@qq.com>
Date: Tue, 31 May 2022 16:27:54 +0800
Subject: [PATCH] add: tab logic

Signed-off-by: Kingtous <kingtous@qq.com>
---
 .../lib/desktop/pages/connection_page.dart    |   1 +
 .../desktop/pages/connection_tab_page.dart    | 104 ++++++++++++++----
 2 files changed, 82 insertions(+), 23 deletions(-)

diff --git a/flutter/lib/desktop/pages/connection_page.dart b/flutter/lib/desktop/pages/connection_page.dart
index 703d0a79a..6659986d8 100644
--- a/flutter/lib/desktop/pages/connection_page.dart
+++ b/flutter/lib/desktop/pages/connection_page.dart
@@ -53,6 +53,7 @@ class _ConnectionPageState extends State<ConnectionPage> {
           children: <Widget>[
             getUpdateUI(),
             Row(
+              mainAxisAlignment: MainAxisAlignment.start,
               children: [
                 getSearchBarUI(),
               ],
diff --git a/flutter/lib/desktop/pages/connection_tab_page.dart b/flutter/lib/desktop/pages/connection_tab_page.dart
index ca53224f1..5ebf7b54e 100644
--- a/flutter/lib/desktop/pages/connection_tab_page.dart
+++ b/flutter/lib/desktop/pages/connection_tab_page.dart
@@ -1,8 +1,9 @@
 import 'dart:convert';
+import 'dart:math';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_hbb/desktop/pages/remote_page.dart';
-import 'package:flutter_hbb/models/model.dart';
+import 'package:flutter_hbb/desktop/widgets/titlebar_widget.dart';
 import 'package:flutter_hbb/utils/multi_window_manager.dart';
 
 class ConnectionTabPage extends StatefulWidget {
@@ -18,11 +19,13 @@ class _ConnectionTabPageState extends State<ConnectionTabPage>
     with SingleTickerProviderStateMixin {
   // refactor List<int> when using multi-tab
   // this singleton is only for test
-  late String connectionId;
-  late TabController tabController;
+  List<String> connectionIds = List.empty(growable: true);
+  var initialIndex = 0;
 
   _ConnectionTabPageState(Map<String, dynamic> params) {
-    connectionId = params['id'] ?? "";
+    if (params['id'] != null) {
+      connectionIds.add(params['id']);
+    }
   }
 
   @override
@@ -34,33 +37,88 @@ class _ConnectionTabPageState extends State<ConnectionTabPage>
       // for simplify, just replace connectionId
       if (call.method == "new_remote_desktop") {
         setState(() {
-          FFI.close();
-          connectionId = jsonDecode(call.arguments)["id"];
+          final args = jsonDecode(call.arguments);
+          final id = args['id'];
+          final indexOf = connectionIds.indexOf(id);
+          if (indexOf >= 0) {
+            setState(() {
+              initialIndex = indexOf;
+            });
+          } else {
+            connectionIds.add(id);
+            setState(() {
+              initialIndex = connectionIds.length - 1;
+            });
+          }
         });
       }
     });
-    tabController = TabController(length: 1, vsync: this);
   }
 
   @override
   Widget build(BuildContext context) {
-    return Column(
-      children: [
-        TabBar(
-            controller: tabController,
-            isScrollable: true,
-            labelColor: Colors.black87,
-            physics: NeverScrollableScrollPhysics(),
-            tabs: [
-              Tab(
-                text: connectionId,
+    return Scaffold(
+      body: DefaultTabController(
+        initialIndex: initialIndex,
+        length: connectionIds.length,
+        animationDuration: Duration.zero,
+        child: Column(
+          children: [
+            SizedBox(
+              height: 50,
+              child: DesktopTitleBar(
+                child: TabBar(
+                    isScrollable: true,
+                    labelColor: Colors.white,
+                    physics: NeverScrollableScrollPhysics(),
+                    indicatorColor: Colors.white,
+                    tabs: connectionIds
+                        .map((e) => Tab(
+                              child: Row(
+                                mainAxisSize: MainAxisSize.min,
+                                crossAxisAlignment: CrossAxisAlignment.center,
+                                children: [
+                                  Text(e),
+                                  SizedBox(
+                                    width: 4,
+                                  ),
+                                  InkWell(
+                                      onTap: () {
+                                        onRemoveId(e);
+                                      },
+                                      child: Icon(
+                                        Icons.highlight_remove,
+                                        size: 20,
+                                      ))
+                                ],
+                              ),
+                            ))
+                        .toList()),
               ),
-            ]),
-        Expanded(
-            child: TabBarView(controller: tabController, children: [
-          RemotePage(key: ValueKey(connectionId), id: connectionId)
-        ]))
-      ],
+            ),
+            Expanded(
+              child: TabBarView(
+                  children: connectionIds
+                      .map((e) => Container(
+                          child: RemotePage(
+                              key: ValueKey(e),
+                              id: e))) //RemotePage(key: ValueKey(e), id: e))
+                      .toList()),
+            )
+          ],
+        ),
+      ),
     );
   }
+
+  void onRemoveId(String id) {
+    final indexOf = connectionIds.indexOf(id);
+    if (indexOf == -1) {
+      return;
+    }
+    setState(() {
+      connectionIds.removeAt(indexOf);
+      initialIndex = max(0, initialIndex - 1);
+    });
+  }
 }