linux: Use kirigami mouse handling if available

Qt6 changed the mouse scroll wheel handling for QtQuick to a type that mimics how touch pads/screens work, which most people find feels very poor. KDE fixes this by creating a custom type which re-implements the QtWidgets handling (see https://invent.kde.org/frameworks/kirigami/-/merge_requests/415).

On Matrix Nico has expressed a desire not to have to deal with compiling Kirigami for Windows and Mac, which is understandable. Linux users on the other hand almost always have kirigami available in their package repos which sidesteps that particular issue. We can search for Kirigami at build time and if present define a QML context property to allow it to be used, which should fix this issue for Linux users at least.

Helps with nheko-reborn/nheko#1819 (which won't be completely resolved until this is working for Windows and Mac as well).

Signed-off-by: Reilly Brogan <reilly@reillybrogan.com>

CMakeLists.txt

@@ -277,6 +277,20 @@ else()
     find_package(KDSingleApplication-qt6 REQUIRED)
 endif()
 
+if(UNIX)
+    set(KF_MIN_VERSION "6.0.0")
+    find_package(ECM ${KF_MIN_VERSION})
+    if(ECM_FOUND)
+        list(APPEND CMAKE_MODULE_PATH ${ECM_MODULE_PATH})
+        find_package(KF6 COMPONENTS
+            Kirigami
+        )
+        if(KF6_FOUND)
+            add_compile_definitions(NHEKO_USE_KIRIGAMI)
+        endif()
+    endif()
+endif()
+
 if(Qt6Widgets_FOUND)
     if(Qt6Widgets_VERSION VERSION_LESS 6.5.0)
         message(STATUS "Qt version ${Qt6Widgets_VERSION}")
@@ -821,12 +835,20 @@ set(QML_SOURCES
     resources/qml/delegates/EncryptionEnabled.qml
     resources/qml/ui/TimelineEffects.qml
 )
+set(QML_DEPENDENCIES
+    QtQuick
+    QtQml.Models
+)
+if(KF6_FOUND)
+    list(APPEND QML_SOURCES "resources/qml/components/KirigamiWheelHandler.qml")
+    list(APPEND QML_DEPENDENCIES "org.kde.kirigami")
+endif()
 qt_add_qml_module(nheko
     URI im.nheko
     NO_RESOURCE_TARGET_PATH
     RESOURCE_PREFIX "/"
     VERSION 1.1
-    DEPENDENCIES QtQuick QtQml.Models
+    DEPENDENCIES ${QML_DEPENDENCIES}
     QML_FILES
     ${QML_SOURCES}
     SOURCES

resources/qml/CommunitiesList.qml

@@ -38,6 +38,10 @@ Page {
         model: Communities.filtered()
         boundsBehavior: Flickable.StopAtBounds
 
+        Loader {
+            source: NHEKO_USE_KIRIGAMI ? "components/KirigamiWheelHandler.qml" : ""
+        }
+
         ScrollBar.vertical: ScrollBar {
             id: scrollbar
 

resources/qml/Completer.qml

@@ -93,6 +93,10 @@ Control {
     contentItem: ListView {
         id: listView
 
+        Loader {
+            source: NHEKO_USE_KIRIGAMI ? "components/KirigamiWheelHandler.qml" : ""
+        }
+
         clip: true
         displayMarginBeginning: height / 2
         displayMarginEnd: height / 2

resources/qml/MessageView.qml

@@ -65,6 +65,10 @@ Item {
         spacing: 2
         verticalLayoutDirection: ListView.BottomToTop
 
+        Loader {
+            source: NHEKO_USE_KIRIGAMI ? "components/KirigamiWheelHandler.qml" : ""
+        }
+
         property int lastScrollPos: 0
 
         // Fixup the scroll position when the height changes. Without this, the view is kept around the center of the currently visible content, while we usually want to stick to the bottom.

resources/qml/RoomList.qml

@@ -446,6 +446,10 @@ Page {
         model: Rooms
         boundsBehavior: Flickable.StopAtBounds
 
+        Loader {
+            source: NHEKO_USE_KIRIGAMI ? "components/KirigamiWheelHandler.qml" : ""
+        }
+
         //reuseItems: true
         ScrollBar.vertical: ScrollBar {
             id: scrollbar

resources/qml/UploadBox.qml

@@ -22,6 +22,10 @@ Page {
     contentItem: ListView {
         id: uploadsList
 
+        Loader {
+            source: NHEKO_USE_KIRIGAMI ? "components/KirigamiWheelHandler.qml" : ""
+        }
+
         anchors.horizontalCenter: parent.horizontalCenter
         boundsBehavior: Flickable.StopAtBounds
         model: room ? room.input.uploads : undefined

resources/qml/components/AdaptiveLayout.qml

@@ -122,6 +122,10 @@ Container {
     contentItem: ListView {
         id: view
 
+        Loader {
+            source: NHEKO_USE_KIRIGAMI ? "KirigamiWheelHandler.qml" : ""
+        }
+
         model: container.contentModel
         snapMode: ListView.SnapOneItem
         orientation: ListView.Horizontal

resources/qml/components/KirigamiWheelHandler.qml

@@ -0,0 +1,12 @@
+// SPDX-FileCopyrightText: Nheko Contributors
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import org.kde.kirigami as Kirigami
+
+Kirigami.WheelHandler {
+    id: wheelHandler
+    target: parent
+    filterMouseEvents: true
+    keyNavigationEnabled: true
+}

resources/qml/components/ReorderableListview.qml

@@ -100,6 +100,10 @@ Item {
         ListView {
             id: view
 
+            Loader {
+                source: NHEKO_USE_KIRIGAMI ? "KirigamiWheelHandler.qml" : ""
+            }
+
             clip: true
 
             anchors { fill: parent; margins: 2 }

resources/qml/dialogs/AliasEditor.qml

@@ -52,6 +52,9 @@ ApplicationWindow {
 
             clip: true
 
+            Loader {
+                source: NHEKO_USE_KIRIGAMI ? "../components/KirigamiWheelHandler.qml" : ""
+            }
 
             model: editingModel
             spacing: 4

resources/qml/dialogs/AllowedRoomsSettingsDialog.qml

@@ -51,6 +51,9 @@ ApplicationWindow {
 
             clip: true
 
+            Loader {
+                source: NHEKO_USE_KIRIGAMI ? "../components/KirigamiWheelHandler.qml" : ""
+            }
 
             model: roomSettings.allowedRoomsModel
             spacing: 4

resources/qml/dialogs/IgnoredUsers.qml

@@ -26,6 +26,10 @@ Window {
         spacing: Nheko.paddingMedium
         footerPositioning: ListView.OverlayFooter
 
+        Loader {
+            source: NHEKO_USE_KIRIGAMI ? "../components/KirigamiWheelHandler.qml" : ""
+        }
+
         model: TimelineManager.ignoredUsers
         header: ColumnLayout {
             Text {

resources/qml/dialogs/ImagePackEditorDialog.qml

@@ -49,6 +49,9 @@ ApplicationWindow {
 
                 model: imagePack
 
+                Loader {
+                    source: NHEKO_USE_KIRIGAMI ? "../components/KirigamiWheelHandler.qml" : ""
+                }
 
                 header: AvatarListTile {
                     title: imagePack.packname

resources/qml/dialogs/ImagePackSettingsDialog.qml

@@ -59,7 +59,9 @@ ApplicationWindow {
                 model: packlist
                 clip: true
 
-                
+                Loader {
+                    source: NHEKO_USE_KIRIGAMI ? "../components/KirigamiWheelHandler.qml" : ""
+                }
 
                 footer: ColumnLayout {
                     Button {

resources/qml/dialogs/InviteDialog.qml

@@ -166,6 +166,9 @@ ApplicationWindow {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
                 clip: true
+                Loader {
+                    source: NHEKO_USE_KIRIGAMI ? "../components/KirigamiWheelHandler.qml" : ""
+                }
                 delegate: UserListRow {
                     id: del2
                     width: ListView.view.width
@@ -192,6 +195,10 @@ ApplicationWindow {
                 clip: true
                 visible: inviteDialogRoot.width >= 500
 
+                Loader {
+                    source: NHEKO_USE_KIRIGAMI ? "../components/KirigamiWheelHandler.qml" : ""
+                }
+
                 delegate: UserListRow {
                     id: del
                     hoverEnabled: true

resources/qml/dialogs/PowerLevelSpacesApplyDialog.qml

@@ -86,6 +86,10 @@ ApplicationWindow {
             spacing: 4
             cacheBuffer: 50
 
+            Loader {
+                source: NHEKO_USE_KIRIGAMI ? "../components/KirigamiWheelHandler.qml" : ""
+            }
+
             delegate: RowLayout {
                 anchors.left: parent.left
                 anchors.right: parent.right

resources/qml/dialogs/ReadReceipts.qml

@@ -54,6 +54,10 @@ ApplicationWindow {
                 boundsBehavior: Flickable.StopAtBounds
                 model: readReceipts
 
+                Loader {
+                    source: NHEKO_USE_KIRIGAMI ? "../components/KirigamiWheelHandler.qml" : ""
+                }
+
                 delegate: ItemDelegate {
                     id: del
 

resources/qml/dialogs/RoomDirectory.qml

@@ -34,6 +34,10 @@ ApplicationWindow {
         anchors.fill: parent
         model: publicRooms
 
+        Loader {
+            source: NHEKO_USE_KIRIGAMI ? "../components/KirigamiWheelHandler.qml" : ""
+        }
+
         delegate: Rectangle {
             id: roomDirDelegate
 

resources/qml/dialogs/RoomMembers.qml

@@ -108,6 +108,9 @@ ApplicationWindow {
                 boundsBehavior: Flickable.StopAtBounds
                 model: members
 
+                Loader {
+                    source: NHEKO_USE_KIRIGAMI ? "../components/KirigamiWheelHandler.qml" : ""
+                }
 
                 delegate: ItemDelegate {
                     id: del

resources/qml/dialogs/UserProfile.qml

@@ -45,6 +45,10 @@ ApplicationWindow {
         anchors.margins: 10
         footerPositioning: ListView.OverlayFooter
 
+        Loader {
+            source: NHEKO_USE_KIRIGAMI ? "../components/KirigamiWheelHandler.qml" : ""
+        }
+
         header: ColumnLayout {
             id: contentL
 

resources/qml/emoji/StickerPicker.qml

@@ -116,6 +116,10 @@ Menu {
                 clip: true
                 currentIndex: -1 // prevent sorting from stealing focus
 
+                Loader {
+                    source: NHEKO_USE_KIRIGAMI ? "../components/KirigamiWheelHandler.qml" : ""
+                }
+
                 section.property: "packname"
                 section.criteria: ViewSection.FullString
                 section.delegate: Rectangle {

src/MainWindow.cpp

@@ -4,6 +4,7 @@
 
 #include <QApplication>
 #include <QMessageBox>
+#include <QQmlContext>
 
 #include <mtx/events/collections.hpp>
 #include <mtx/requests.hpp>
@@ -123,6 +124,12 @@ MainWindow::registerQmlTypes()
             nhlog::ui()->warn("Could not connect to D-Bus!");
     }
 #endif
+
+#ifdef NHEKO_USE_KIRIGAMI
+    engine()->rootContext()->setContextProperty("NHEKO_USE_KIRIGAMI", QVariant(true));
+#else
+    engine()->rootContext()->setContextProperty("NHEKO_USE_KIRIGAMI", QVariant(false));
+#endif
 }
 
 void