cm tabs add tooltips and selected color

flutter/lib/desktop/pages/server_page.dart

@@ -126,6 +126,20 @@ class ConnectionManagerState extends State<ConnectionManager> {
             controller: serverModel.tabController,
             maxLabelWidth: 100,
             tail: buildScrollJumper(),
+            selectedTabBackgroundColor:
+                Theme.of(context).hintColor.withOpacity(0.2),
+            tabBuilder: (key, icon, label, themeConf) {
+              return Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  icon,
+                  Tooltip(
+                      message: key,
+                      waitDuration: Duration(seconds: 1),
+                      child: label),
+                ],
+              );
+            },
             pageViewBuilder: (pageView) => Row(children: [
                   Expanded(child: pageView),
                   Consumer<ChatModel>(

flutter/lib/desktop/widgets/tabbar_widget.dart

@@ -178,6 +178,9 @@ typedef TabBuilder = Widget Function(
     String key, Widget icon, Widget label, TabThemeConf themeConf);
 typedef LabelGetter = Rx<String> Function(String key);
 
+/// [_lastClickTime], help to handle double click
+int _lastClickTime = DateTime.now().millisecondsSinceEpoch;
+
 class DesktopTab extends StatelessWidget {
   final Function(String)? onTabClose;
   final bool showTabBar;
@@ -192,15 +195,14 @@ class DesktopTab extends StatelessWidget {
   final TabBuilder? tabBuilder;
   final LabelGetter? labelGetter;
   final double? maxLabelWidth;
+  final Color? selectedTabBackgroundColor;
+  final Color? unSelectedTabBackgroundColor;
 
   final DesktopTabController controller;
   Rx<DesktopTabState> get state => controller.state;
   final isMaximized = false.obs;
   final _scrollDebounce = Debouncer(delay: Duration(milliseconds: 50));
 
-  /// [_lastClickTime], help to handle double click
-  int _lastClickTime = DateTime.now().millisecondsSinceEpoch;
-
   late final DesktopTabType tabType;
   late final bool isMainWindow;
 
@@ -220,6 +222,8 @@ class DesktopTab extends StatelessWidget {
     this.tabBuilder,
     this.labelGetter,
     this.maxLabelWidth,
+    this.selectedTabBackgroundColor,
+    this.unSelectedTabBackgroundColor,
   }) : super(key: key) {
     tabType = controller.tabType;
     isMainWindow =
@@ -364,7 +368,11 @@ class DesktopTab extends StatelessWidget {
                                 onTabClose: onTabClose,
                                 tabBuilder: tabBuilder,
                                 labelGetter: labelGetter,
-                                maxLabelWidth: maxLabelWidth))),
+                                maxLabelWidth: maxLabelWidth,
+                                selectedTabBackgroundColor:
+                                    selectedTabBackgroundColor,
+                                unSelectedTabBackgroundColor:
+                                    unSelectedTabBackgroundColor))),
                   ],
                 ))),
         WindowActionPanel(
@@ -617,6 +625,8 @@ class _ListView extends StatelessWidget {
   final TabBuilder? tabBuilder;
   final LabelGetter? labelGetter;
   final double? maxLabelWidth;
+  final Color? selectedTabBackgroundColor;
+  final Color? unSelectedTabBackgroundColor;
 
   Rx<DesktopTabState> get state => controller.state;
 
@@ -625,7 +635,9 @@ class _ListView extends StatelessWidget {
       required this.onTabClose,
       this.tabBuilder,
       this.labelGetter,
-      this.maxLabelWidth});
+      this.maxLabelWidth,
+      this.selectedTabBackgroundColor,
+      this.unSelectedTabBackgroundColor});
 
   /// Check whether to show ListView
   ///
@@ -667,7 +679,7 @@ class _ListView extends StatelessWidget {
                   onSelected: () => controller.jumpTo(index),
                   tabBuilder: tabBuilder == null
                       ? null
-                      : (Widget icon, Widget labelWidget,
+                      : (String key, Widget icon, Widget labelWidget,
                           TabThemeConf themeConf) {
                           return tabBuilder!(
                             tab.label,
@@ -677,6 +689,8 @@ class _ListView extends StatelessWidget {
                           );
                         },
                   maxLabelWidth: maxLabelWidth,
+                  selectedTabBackgroundColor: selectedTabBackgroundColor,
+                  unSelectedTabBackgroundColor: unSelectedTabBackgroundColor,
                 );
               }).toList()));
   }
@@ -691,9 +705,10 @@ class _Tab extends StatefulWidget {
   final int selected;
   final Function() onClose;
   final Function() onSelected;
-  final Widget Function(Widget icon, Widget label, TabThemeConf themeConf)?
+  final TabBuilder? tabBuilder;
-      tabBuilder;
   final double? maxLabelWidth;
+  final Color? selectedTabBackgroundColor;
+  final Color? unSelectedTabBackgroundColor;
 
   const _Tab({
     Key? key,
@@ -707,6 +722,8 @@ class _Tab extends StatefulWidget {
     required this.onClose,
     required this.onSelected,
     this.maxLabelWidth,
+    this.selectedTabBackgroundColor,
+    this.unSelectedTabBackgroundColor,
   }) : super(key: key);
 
   @override
@@ -753,8 +770,8 @@ class _TabState extends State<_Tab> with RestorationMixin {
         ],
       );
     } else {
-      return widget.tabBuilder!(
+      return widget.tabBuilder!(widget.label.value, icon, labelWidget,
-          icon, labelWidget, TabThemeConf(iconSize: _kIconSize));
+          TabThemeConf(iconSize: _kIconSize));
     }
   }
 
@@ -771,32 +788,36 @@ class _TabState extends State<_Tab> with RestorationMixin {
           restoreHover.value = value;
         },
         onTap: () => widget.onSelected(),
-        child: Row(
+        child: Container(
-          children: [
+            color: isSelected
-            SizedBox(
+                ? widget.selectedTabBackgroundColor
-                height: _kTabBarHeight,
+                : widget.unSelectedTabBackgroundColor,
-                child: Row(
+            child: Row(
-                    crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
-                    children: [
+                SizedBox(
-                      _buildTabContent(),
+                    height: _kTabBarHeight,
-                      Obx((() => _CloseButton(
+                    child: Row(
-                            visiable: hover.value && widget.closable,
+                        crossAxisAlignment: CrossAxisAlignment.center,
-                            tabSelected: isSelected,
+                        children: [
-                            onClose: () => widget.onClose(),
+                          _buildTabContent(),
-                          )))
+                          Obx((() => _CloseButton(
-                    ])).paddingSymmetric(horizontal: 10),
+                                visiable: hover.value && widget.closable,
-            Offstage(
+                                tabSelected: isSelected,
-              offstage: !showDivider,
+                                onClose: () => widget.onClose(),
-              child: VerticalDivider(
+                              )))
-                width: 1,
+                        ])).paddingSymmetric(horizontal: 10),
-                indent: _kDividerIndent,
+                Offstage(
-                endIndent: _kDividerIndent,
+                  offstage: !showDivider,
-                color: MyTheme.tabbar(context).dividerColor,
+                  child: VerticalDivider(
-                thickness: 1,
+                    width: 1,
-              ),
+                    indent: _kDividerIndent,
-            )
+                    endIndent: _kDividerIndent,
-          ],
+                    color: MyTheme.tabbar(context).dividerColor,
-        ),
+                    thickness: 1,
+                  ),
+                )
+              ],
+            )),
       ),
     );
   }