cheatsheet: use toolbar tabbar

dots/.config/quickshell/ii/modules/cheatsheet/Cheatsheet.qml

@@ -31,7 +31,6 @@ Scope { // Scope
         sourceComponent: PanelWindow { // Window
             id: cheatsheetRoot
             visible: cheatsheetLoader.active
-            property int selectedTab: 0
 
             anchors {
                 top: true
@@ -86,16 +85,16 @@ Scope { // Scope
                     }
                     if (event.modifiers === Qt.ControlModifier) {
                         if (event.key === Qt.Key_PageDown) {
-                            cheatsheetRoot.selectedTab = Math.min(cheatsheetRoot.selectedTab + 1, root.tabButtonList.length - 1);
+                            tabBar.incrementCurrentIndex();
                             event.accepted = true;
                         } else if (event.key === Qt.Key_PageUp) {
-                            cheatsheetRoot.selectedTab = Math.max(cheatsheetRoot.selectedTab - 1, 0);
+                            tabBar.decrementCurrentIndex();
                             event.accepted = true;
                         } else if (event.key === Qt.Key_Tab) {
-                            cheatsheetRoot.selectedTab = (cheatsheetRoot.selectedTab + 1) % root.tabButtonList.length;
+                            tabBar.setCurrentIndex((tabBar.currentIndex + 1) % root.tabButtonList.length);
                             event.accepted = true;
                         } else if (event.key === Qt.Key_Backtab) {
-                            cheatsheetRoot.selectedTab = (cheatsheetRoot.selectedTab - 1 + root.tabButtonList.length) % root.tabButtonList.length;
+                            tabBar.setCurrentIndex((tabBar.currentIndex - 1 + root.tabButtonList.length) % root.tabButtonList.length);
                             event.accepted = true;
                         }
                     }
@@ -141,11 +140,14 @@ Scope { // Scope
                         }
                         text: Translation.tr("Cheat sheet")
                     }
-                    PrimaryTabBar { // Tab strip
-                        id: tabBar
-                        tabButtonList: root.tabButtonList
-                        Synchronizer on currentIndex {
-                            property alias source: cheatsheetRoot.selectedTab
+
+                    Toolbar {
+                        Layout.alignment: Qt.AlignHCenter
+                        enableShadow: false
+                        ToolbarTabBar {
+                            id: tabBar
+                            tabButtonList: root.tabButtonList
+                            currentIndex: swipeView.currentIndex
                         }
                     }
 
@@ -154,26 +156,11 @@ Scope { // Scope
                         Layout.topMargin: 5
                         Layout.fillWidth: true
                         Layout.fillHeight: true
+                        currentIndex: tabBar.currentIndex
                         spacing: 10
 
-                        Behavior on implicitWidth {
-                            id: contentWidthBehavior
-                            enabled: false
-                            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-                        }
-                        Behavior on implicitHeight {
-                            id: contentHeightBehavior
-                            enabled: false
-                            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-                        }
-
-                        currentIndex: cheatsheetRoot.selectedTab
-                        onCurrentIndexChanged: {
-                            contentWidthBehavior.enabled = true;
-                            contentHeightBehavior.enabled = true;
-                            tabBar.enableIndicatorAnimation = true;
-                            cheatsheetRoot.selectedTab = currentIndex;
-                        }
+                        implicitWidth: Math.max.apply(null, contentChildren.map(child => child.implicitWidth || 0))
+                        implicitHeight: Math.max.apply(null, contentChildren.map(child => child.implicitHeight || 0))
 
                         clip: true
                         layer.enabled: true

dots/.config/quickshell/ii/modules/cheatsheet/CheatsheetPeriodicTable.qml

@@ -11,6 +11,7 @@ Item {
 
     Column {
         id: mainLayout
+        anchors.centerIn: parent
         spacing: root.spacing
 
         Repeater { // Main table rows

dots/.config/quickshell/ii/modules/cheatsheet/ElementTile.qml

@@ -7,8 +7,8 @@ RippleButton {
     id: root
     required property var element
     opacity: element.type != "empty" ? 1 : 0
-    implicitHeight: 60
-    implicitWidth: 60
+    implicitHeight: 70
+    implicitWidth: 70
     colBackground: Appearance.colors.colLayer2
     buttonRadius: Appearance.rounding.small