Update more sidebar settings nav

Modals/Settings/SettingsContent.qml

@@ -2,12 +2,11 @@ import QtQuick
 import qs.Common
 import qs.Modules.Settings
 
-FocusScope {
+Item {
     id: root
 
     property int currentIndex: 0
     property var parentModal: null
-    focus: true
 
     Rectangle {
         anchors.fill: parent
@@ -23,7 +22,6 @@ FocusScope {
             anchors.fill: parent
             active: root.currentIndex === 0
             visible: active
-            asynchronous: true
 
             sourceComponent: Component {
                 PersonalizationTab {
@@ -40,7 +38,6 @@ FocusScope {
             anchors.fill: parent
             active: root.currentIndex === 1
             visible: active
-            asynchronous: true
 
             sourceComponent: TimeWeatherTab {
             }
@@ -53,7 +50,6 @@ FocusScope {
             anchors.fill: parent
             active: root.currentIndex === 2
             visible: active
-            asynchronous: true
 
             sourceComponent: DankBarTab {
                 parentModal: root.parentModal
@@ -67,7 +63,6 @@ FocusScope {
             anchors.fill: parent
             active: root.currentIndex === 3
             visible: active
-            asynchronous: true
 
             sourceComponent: WidgetTweaksTab {
             }
@@ -80,7 +75,6 @@ FocusScope {
             anchors.fill: parent
             active: root.currentIndex === 4
             visible: active
-            asynchronous: true
 
             sourceComponent: Component {
                 DockTab {
@@ -96,7 +90,6 @@ FocusScope {
             anchors.fill: parent
             active: root.currentIndex === 5
             visible: active
-            asynchronous: true
 
             sourceComponent: DisplaysTab {
             }
@@ -109,7 +102,6 @@ FocusScope {
             anchors.fill: parent
             active: root.currentIndex === 6
             visible: active
-            asynchronous: true
 
             sourceComponent: LauncherTab {
             }
@@ -122,7 +114,6 @@ FocusScope {
             anchors.fill: parent
             active: root.currentIndex === 7
             visible: active
-            asynchronous: true
 
             sourceComponent: ThemeColorsTab {
             }
@@ -135,7 +126,6 @@ FocusScope {
             anchors.fill: parent
             active: root.currentIndex === 8
             visible: active
-            asynchronous: true
 
             sourceComponent: PowerSettings {
             }
@@ -148,7 +138,6 @@ FocusScope {
             anchors.fill: parent
             active: root.currentIndex === 9
             visible: active
-            asynchronous: true
 
             sourceComponent: PluginsTab {
                 parentModal: root.parentModal
@@ -162,7 +151,6 @@ FocusScope {
             anchors.fill: parent
             active: root.currentIndex === 10
             visible: active
-            asynchronous: true
 
             sourceComponent: AboutTab {
             }

Modals/Settings/SettingsModal.qml

@@ -13,6 +13,7 @@ DankModal {
 
     property Component settingsContent
     property alias profileBrowser: profileBrowser
+    property int currentTabIndex: 0
 
     signal closingModal()
 
@@ -40,6 +41,25 @@ DankModal {
         return hide();
     }
     content: settingsContent
+    onOpened: () => {
+        Qt.callLater(() => modalFocusScope.forceActiveFocus())
+    }
+    modalFocusScope.Keys.onPressed: event => {
+        const tabCount = 11
+        if (event.key === Qt.Key_Down) {
+            currentTabIndex = (currentTabIndex + 1) % tabCount
+            event.accepted = true
+        } else if (event.key === Qt.Key_Up) {
+            currentTabIndex = (currentTabIndex - 1 + tabCount) % tabCount
+            event.accepted = true
+        } else if (event.key === Qt.Key_Tab && !event.modifiers) {
+            currentTabIndex = (currentTabIndex + 1) % tabCount
+            event.accepted = true
+        } else if (event.key === Qt.Key_Backtab || (event.key === Qt.Key_Tab && event.modifiers & Qt.ShiftModifier)) {
+            currentTabIndex = (currentTabIndex - 1 + tabCount) % tabCount
+            event.accepted = true
+        }
+    }
 
     IpcHandler {
         function open(): string {
@@ -111,15 +131,9 @@ DankModal {
     }
 
     settingsContent: Component {
-        FocusScope {
+        Item {
             id: rootScope
             anchors.fill: parent
-            focus: true
-
-            Keys.onEscapePressed: event => {
-                settingsModal.hide()
-                event.accepted = true
-            }
 
             Column {
                 anchors.fill: parent
@@ -178,8 +192,10 @@ DankModal {
                         id: sidebar
 
                         parentModal: settingsModal
-                        focus: true
+                        currentIndex: settingsModal.currentTabIndex
-                        onCurrentIndexChanged: content.currentIndex = currentIndex
+                        onCurrentIndexChanged: {
+                            settingsModal.currentTabIndex = currentIndex
+                        }
                     }
 
                     SettingsContent {
@@ -188,7 +204,7 @@ DankModal {
                         width: parent.width - sidebar.width
                         height: parent.height
                         parentModal: settingsModal
-                        currentIndex: sidebar.currentIndex
+                        currentIndex: settingsModal.currentTabIndex
                     }
 
                 }

Modals/Settings/SettingsSidebar.qml

@@ -1,15 +1,15 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import qs.Common
 import qs.Modals.Settings
 import qs.Widgets
 
-FocusScope {
+Rectangle {
     id: sidebarContainer
 
     property int currentIndex: 0
     property var parentModal: null
-
-    activeFocusOnTab: true
     readonly property var sidebarItems: [{
         "text": I18n.tr("Personalization"),
         "icon": "person"
@@ -55,57 +55,9 @@ FocusScope {
 
     width: 270
     height: parent.height
-
-    Component.onCompleted: {
-        forceActiveFocus()
-    }
-
-    Timer {
-        id: refocusTimer
-        interval: 50
-        onTriggered: sidebarContainer.forceActiveFocus()
-    }
-
-    Connections {
-        target: parentModal
-        function onOpened() {
-            refocusTimer.restart()
-        }
-    }
-
-    Keys.onPressed: event => {
-        if (event.key === Qt.Key_Down) {
-            navigateNext()
-            Qt.callLater(() => sidebarContainer.forceActiveFocus())
-            event.accepted = true
-        } else if (event.key === Qt.Key_Up) {
-            navigatePrevious()
-            Qt.callLater(() => sidebarContainer.forceActiveFocus())
-            event.accepted = true
-        } else if (event.key === Qt.Key_Tab && !event.modifiers) {
-            navigateNext()
-            Qt.callLater(() => sidebarContainer.forceActiveFocus())
-            event.accepted = true
-        } else if (event.key === Qt.Key_Backtab || (event.key === Qt.Key_Tab && event.modifiers & Qt.ShiftModifier)) {
-            navigatePrevious()
-            Qt.callLater(() => sidebarContainer.forceActiveFocus())
-            event.accepted = true
-        }
-    }
-
-    Rectangle {
-        anchors.fill: parent
     color: Theme.surfaceContainer
     radius: Theme.cornerRadius
 
-        MouseArea {
-            anchors.fill: parent
-            onPressed: mouse => {
-                sidebarContainer.forceActiveFocus()
-                mouse.accepted = false
-            }
-        }
-
     Column {
         anchors.fill: parent
         anchors.leftMargin: Theme.spacingS
@@ -135,7 +87,10 @@ FocusScope {
 
             model: sidebarContainer.sidebarItems
 
-            Rectangle {
+            delegate: Rectangle {
+                required property int index
+                required property var modelData
+
                 property bool isActive: sidebarContainer.currentIndex === index
 
                 width: parent.width - Theme.spacingS * 2
@@ -192,5 +147,3 @@ FocusScope {
     }
 
 }
-
-}