making media and perf tabs toggleable

added two config options in the dashboard section to enable/disable the
media tab and the performance tab. if both are disabled, the tab bar in
the dashboard is hidden.

still a bit of jerkiness when config values resolve, not sure how to fix
that. also, the way i'm conditionally showing panels is kinda janky, i'm
sure there are better ways to do this...

Author: mhydock

config/DashboardConfig.qml

@@ -7,6 +7,9 @@ JsonObject {
     property int dragThreshold: 50
     property Sizes sizes: Sizes {}
 
+    property bool enableMedia: true
+    property bool enablePerformance: true
+
     component Sizes: JsonObject {
         readonly property int tabIndicatorHeight: 3
         readonly property int tabIndicatorSpacing: 5

modules/dashboard/Content.qml

@@ -9,34 +9,43 @@ import QtQuick.Layouts
 
 Item {
     id: root
-
+    
     required property PersistentProperties visibilities
     required property PersistentProperties state
     readonly property real nonAnimWidth: view.implicitWidth + viewWrapper.anchors.margins * 2
+    readonly property bool showTabs: Config.dashboard.enableMedia || Config.dashboard.enablePerformance
 
     implicitWidth: nonAnimWidth
-    implicitHeight: tabs.implicitHeight + tabs.anchors.topMargin + view.implicitHeight + viewWrapper.anchors.margins * 2
+    implicitHeight: (showTabs ? tabs.implicitHeight + tabs.anchors.topMargin : 0) + view.implicitHeight + viewWrapper.anchors.margins * 2
 
-    Tabs {
+    Loader {
         id: tabs
-
+        asynchronous: true
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.topMargin: Appearance.padding.normal
         anchors.margins: Appearance.padding.large
 
-        nonAnimWidth: root.nonAnimWidth - anchors.margins * 2
-        state: root.state
+        sourceComponent: showTabs ? tabsComponent : null
+    }
+
+    Component {
+        id: tabsComponent
+        Tabs {
+            nonAnimWidth: root.nonAnimWidth - parent.anchors.margins * 2
+            state: root.state
+        }
     }
 
     ClippingRectangle {
         id: viewWrapper
 
-        anchors.top: tabs.bottom
+        anchors.top: showTabs ? tabs.bottom : parent.top
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom
+        anchors.topMargin: !showTabs ? Appearance.padding.normal : Appearance.padding.large
         anchors.margins: Appearance.padding.large
 
         radius: Appearance.rounding.normal
@@ -46,19 +55,42 @@ Item {
             id: view
 
             readonly property int currentIndex: root.state.currentTab
-            readonly property Item currentItem: row.children[currentIndex]
-
+            readonly property Item currentItem: panelGenerator.count > 0 ? panelGenerator.itemAt(currentIndex) : null
+            property list<Component> panelModel: [
+                dash,
+                Config.dashboard.enableMedia ? media : null,
+                Config.dashboard.enablePerformance ? performance : null
+            ].filter(panel => panel != null)
+            
             anchors.fill: parent
 
             flickableDirection: Flickable.HorizontalFlick
 
-            implicitWidth: currentItem.implicitWidth
-            implicitHeight: currentItem.implicitHeight
+            implicitWidth: currentItem?.implicitWidth ?? 0
+            implicitHeight: currentItem?.implicitHeight ?? 0
 
-            contentX: currentItem.x
+            contentX: currentItem?.x ?? 0
             contentWidth: row.implicitWidth
             contentHeight: row.implicitHeight
 
+            Component {
+                id: dash
+                Dash {
+                    visibilities: root.visibilities
+                    state: root.state
+                }
+            }
+
+            Component {
+                id: media
+                Media { visibilities: root.visibilities }
+            }
+
+            Component {
+                id: performance
+                Performance {}
+            }
+
             onContentXChanged: {
                 if (!moving)
                     return;
@@ -80,25 +112,20 @@ Item {
                     contentX = Qt.binding(() => currentItem.x);
             }
 
+            onPanelModelChanged: {
+                panelGenerator.model = panelModel
+            }
+
             RowLayout {
                 id: row
-
-                Pane {
-                    sourceComponent: Dash {
-                        visibilities: root.visibilities
-                        state: root.state
+                
+                Repeater {
+                    id: panelGenerator
+                    delegate: Pane {
+                        required property Component modelData
+                        sourceComponent: modelData
                     }
-                }
-
-                Pane {
-                    sourceComponent: Media {
-                        visibilities: root.visibilities
-                    }
-                }
-
-                Pane {
-                    sourceComponent: Performance {}
-                }
+                }                
             }
 
             Behavior on contentX {

modules/dashboard/Tabs.qml

@@ -15,6 +15,11 @@ Item {
     required property real nonAnimWidth
     required property PersistentProperties state
     readonly property alias count: bar.count
+    property list<var> tabsModel: [
+        {  iconName: "dashboard", tabtext: qsTr("Dashboard") },
+        Config.dashboard.enableMedia ? { iconName: "queue_music", tabtext: qsTr("Media") } : null,
+        Config.dashboard.enablePerformance ? { iconName: "speed", tabtext: qsTr("Performance") } : null,
+    ].filter(tab => tab != null) 
 
     implicitHeight: bar.implicitHeight + indicator.implicitHeight + indicator.anchors.topMargin + separator.implicitHeight
 
@@ -29,20 +34,13 @@ Item {
         background: null
 
         onCurrentIndexChanged: root.state.currentTab = currentIndex
-
-        Tab {
-            iconName: "dashboard"
-            text: qsTr("Dashboard")
-        }
-
-        Tab {
-            iconName: "queue_music"
-            text: qsTr("Media")
-        }
-
-        Tab {
-            iconName: "speed"
-            text: qsTr("Performance")
+        
+        Repeater {
+            model: tabsModel
+            Tab {
+                required property string tabtext
+                text: tabtext
+            }
         }
 
         // Tab {
@@ -57,13 +55,13 @@ Item {
         anchors.top: bar.bottom
         anchors.topMargin: Config.dashboard.sizes.tabIndicatorSpacing
 
-        implicitWidth: bar.currentItem.implicitWidth
+        implicitWidth: count > 0 ? bar.currentItem.implicitWidth : 0
         implicitHeight: Config.dashboard.sizes.tabIndicatorHeight
 
         x: {
             const tab = bar.currentItem;
             const width = (root.nonAnimWidth - bar.spacing * (bar.count - 1)) / bar.count;
-            return width * tab.TabBar.index + (width - tab.implicitWidth) / 2;
+            return width * (tab?.TabBar.index ?? 0) + (width - (tab?.implicitWidth ?? 0)) / 2;
         }
 
         clip: true