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,6 +788,10 @@ class _TabState extends State<_Tab> with RestorationMixin {
           restoreHover.value = value;
         },
         onTap: () => widget.onSelected(),
+        child: Container(
+            color: isSelected
+                ? widget.selectedTabBackgroundColor
+                : widget.unSelectedTabBackgroundColor,
             child: Row(
               children: [
                 SizedBox(
@@ -796,7 +817,7 @@ class _TabState extends State<_Tab> with RestorationMixin {
                   ),
                 )
               ],
-        ),
+            )),
       ),
     );
   }