Keep image selector preview centered

default/quickshell/background-switcher.qml

@@ -60,8 +60,6 @@ ShellRoot {
     if (index === selectedIndex && immediate !== true) return
 
     selectedIndex = index
-    list.currentIndex = index
-    list.centerSelected(immediate === true)
   }
 
   function applySelected() {
@@ -90,7 +88,7 @@ ShellRoot {
     root.select(root.selectedImageIndex(), true)
     root.imagesLoaded = true
     root.opened = true
-    list.forceActiveFocus()
+    carousel.forceActiveFocus()
   }
 
   function openSelector(nextImageDirs, nextImageRows, nextSelectedImage, nextSelectionFile, nextDoneFile, nextColorsFile, nextColorsRaw, nextShowLabels) {
@@ -105,7 +103,6 @@ ShellRoot {
       loadColors(nextColorsRaw)
     imageModel.clear()
     selectedIndex = 0
-    list.currentIndex = 0
     imagesLoaded = false
     opened = false
     if (imageRows) {
@@ -116,13 +113,7 @@ ShellRoot {
     }
   }
 
-  ListModel {
-    id: imageModel
-    onCountChanged: {
-      if (count > 0 && list.currentIndex < 0)
-        root.select(0)
-    }
-  }
+  ListModel { id: imageModel }
 
   function addImage(path, thumbnailPath) {
     if (!path) return
@@ -242,37 +233,19 @@ ShellRoot {
 
       MouseArea { anchors.fill: parent; onClicked: {} }
 
-      ListView {
-        id: list
+      Item {
+        id: carousel
         anchors.top: parent.top
         anchors.topMargin: 30
         anchors.bottom: parent.bottom
         anchors.bottomMargin: root.showLabels ? 74 : 30
         anchors.horizontalCenter: parent.horizontalCenter
         width: root.expandedWidth + 13 * (root.sliceWidth + root.sliceSpacing)
-        orientation: ListView.Horizontal
-        model: imageModel
-        spacing: root.sliceSpacing
         clip: false
         focus: true
-        currentIndex: 0
-        preferredHighlightBegin: (width - root.expandedWidth) / 2
-        preferredHighlightEnd: (width + root.expandedWidth) / 2
-        highlightRangeMode: ListView.NoHighlightRange
-        highlightMoveDuration: 120
-        highlight: Item {}
-        header: Item { width: (list.width - root.expandedWidth) / 2; height: 1 }
-        footer: Item { width: (list.width - root.expandedWidth) / 2; height: 1 }
 
-        function centerSelected(immediate) {
-          var center = function() {
-            list.contentX = Math.max(0, root.selectedIndex * (root.sliceWidth + root.sliceSpacing))
-          }
-
-          center()
-          if (immediate)
-            Qt.callLater(center)
-        }
+        readonly property real itemStep: root.sliceWidth + root.sliceSpacing
+        readonly property real previewX: (width - root.expandedWidth) / 2
 
         Keys.priority: Keys.BeforeItem
         Keys.onPressed: function(event) {
@@ -293,6 +266,9 @@ ShellRoot {
 
         Component.onCompleted: forceActiveFocus()
 
+        Repeater {
+          model: imageModel
+
           delegate: Item {
             id: item
             required property int index
@@ -300,11 +276,15 @@ ShellRoot {
             required property string fileName
             required property string thumbnailPath
 
-          readonly property bool selected: index === root.selectedIndex
+            readonly property int relativeIndex: index - root.selectedIndex
+            readonly property bool selected: relativeIndex === 0
+            readonly property bool nearby: Math.abs(relativeIndex) <= 16
 
+            visible: nearby
+            x: selected ? carousel.previewX : (relativeIndex < 0 ? carousel.previewX + relativeIndex * carousel.itemStep : carousel.previewX + root.expandedWidth + root.sliceSpacing + (relativeIndex - 1) * carousel.itemStep)
             width: selected ? root.expandedWidth : root.sliceWidth
-          height: list.height
-          z: selected ? 100 : 50 - Math.min(Math.abs(index - root.selectedIndex), 40)
+            height: carousel.height
+            z: selected ? 100 : 50 - Math.min(Math.abs(relativeIndex), 40)
 
             readonly property real skAbs: Math.abs(root.skewOffset)
             readonly property real topLeft: root.skewOffset >= 0 ? skAbs : 0
@@ -367,7 +347,7 @@ ShellRoot {
               Image {
                 id: image
                 anchors.fill: parent
-              source: root.fileUrl(item.thumbnailPath)
+                source: item.nearby ? root.fileUrl(item.thumbnailPath) : ""
                 fillMode: Image.PreserveAspectCrop
                 asynchronous: false
                 cache: true
@@ -404,12 +384,13 @@ ShellRoot {
             }
           }
         }
+      }
 
       Text {
         visible: root.showLabels
-        anchors.top: list.bottom
+        anchors.top: carousel.bottom
         anchors.topMargin: 16
-        anchors.horizontalCenter: list.horizontalCenter
+        anchors.horizontalCenter: carousel.horizontalCenter
         width: root.expandedWidth
         text: root.currentLabel()
         color: root.foreground