NTabBar + NTabBarButton

Modules/Settings/Tabs/BarTab.qml

@@ -124,18 +124,21 @@ ColumnLayout {
   }
 
   // Monitor tabs - only visible when not syncing
-  TabBar {
+  NTabBar {
     id: monitorTabBar
     Layout.fillWidth: true
     visible: !Settings.data.bar.syncAcrossMonitors
+    currentIndex: currentMonitorIndex
+    onCurrentIndexChanged: currentMonitorIndex = currentIndex
 
     Repeater {
       model: Quickshell.screens
-      TabButton {
+      NTabButton {
         required property var modelData
         required property int index
         text: modelData.name
-        onClicked: currentMonitorIndex = index
+        tabIndex: index
+        checked: monitorTabBar.currentIndex === index
       }
     }
   }
@@ -150,6 +153,7 @@ ColumnLayout {
   NToggle {
     Layout.fillWidth: true
     visible: !Settings.data.bar.syncAcrossMonitors
+    //TODO TRANSLATE
     label: `Show bar on ${currentMonitorName}`
     description: `Enable or disable the bar on this monitor`
     checked: (Settings.data.bar.monitors || []).length === 0 || (Settings.data.bar.monitors || []).indexOf(currentMonitorName) !== -1

Modules/Wallpaper/WallpaperPanel.qml

@@ -222,7 +222,7 @@ NPanel {
       }
 
       // Monitor tabs
-      TabBar {
+      NTabBar {
         id: screenTabBar
         visible: !Settings.data.wallpaper.setWallpaperOnAllMonitors || Settings.data.wallpaper.enableMultiMonitorDirectories
         Layout.fillWidth: true
@@ -230,56 +230,14 @@ NPanel {
         onCurrentIndexChanged: currentScreenIndex = currentIndex
         spacing: Style.marginM
 
-        background: Rectangle {
-          color: Color.transparent
-        }
-
         Repeater {
           model: Quickshell.screens
-          delegate: TabButton {
+          NTabButton {
+            required property var modelData
+            required property int index
             text: modelData.name || `Screen ${index + 1}`
-            width: implicitWidth + Style.marginS * 2
-
-            background: Rectangle {
-              color: screenTabBar.currentIndex === index ? Color.mSecondary : Color.transparent
-              radius: Style.radiusS
-              border.width: screenTabBar.currentIndex === index ? 0 : Style.borderS
-              border.color: Color.mOutline
-
-              Behavior on color {
-                ColorAnimation {
-                  duration: Style.animationFast
-                }
-              }
-            }
-
-            contentItem: NText {
-              text: parent.text
-              pointSize: Style.fontSizeL
-              font.weight: screenTabBar.currentIndex === index ? Style.fontWeightBold : Style.fontWeightRegular
-              family: Settings.data.ui.fontDefault
-              color: screenTabBar.currentIndex === index ? Color.mOnSecondary : Color.mOnSurfaceVariant
-              horizontalAlignment: Text.AlignHCenter
-              verticalAlignment: Text.AlignVCenter
-            }
-
-            // Add hover effect
-            HoverHandler {
-              id: tabHover
-            }
-
-            Rectangle {
-              anchors.fill: parent
-              color: Color.mOnSurface
-              opacity: tabHover.hovered && screenTabBar.currentIndex !== index ? 0.08 : 0
-              radius: Style.radiusS
-
-              Behavior on opacity {
-                NumberAnimation {
-                  duration: Style.animationFast
-                }
-              }
-            }
+            tabIndex: index
+            checked: screenTabBar.currentIndex === index
           }
         }
       }