From 26b94cc715f7d26a3e5ad87d5047a8bdaaa00717 Mon Sep 17 00:00:00 2001
From: milonekrone <milonekrone@noreply.localhost>
Date: Wed, 14 Jan 2026 16:02:52 +0100
Subject: [PATCH] Add qml/CategoryStrip.qml

---
 qml/CategoryStrip.qml | 62 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 qml/CategoryStrip.qml

diff --git a/qml/CategoryStrip.qml b/qml/CategoryStrip.qml
new file mode 100644
index 0000000..3a78bff
--- /dev/null
+++ b/qml/CategoryStrip.qml
@@ -0,0 +1,62 @@
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    id: cs
+    property alias model: lv.model
+    property int currentIndex: 0
+    signal activated(int idx)
+
+    function positionViewAtIndex(i, mode) { lv.positionViewAtIndex(i, mode) }
+
+    ListView {
+        id: lv
+        anchors.fill: parent
+        orientation: ListView.Horizontal
+        spacing: 26
+        boundsBehavior: Flickable.StopAtBounds
+        highlightMoveDuration: 180
+        highlightRangeMode: ListView.ApplyRange
+        preferredHighlightBegin: width * 0.35
+        preferredHighlightEnd: width * 0.65
+        currentIndex: cs.currentIndex
+
+        delegate: Item {
+            width: 180
+            height: parent.height
+
+            property bool focused: (index === lv.currentIndex)
+
+            Column {
+                anchors.centerIn: parent
+                spacing: 10
+
+                Image {
+                    width: focused ? 78 : 64
+                    height: focused ? 78 : 64
+                    source: modelData.icon
+                    fillMode: Image.PreserveAspectFit
+                    smooth: true
+                    Behavior on width { NumberAnimation { duration: 160; easing.type: Easing.OutCubic } }
+                    Behavior on height { NumberAnimation { duration: 160; easing.type: Easing.OutCubic } }
+                }
+
+                Text {
+                    text: modelData.title
+                    color: "white"
+                    opacity: focused ? 1.0 : 0.70
+                    font.pixelSize: focused ? 22 : 18
+                    horizontalAlignment: Text.AlignHCenter
+                    width: parent.width
+                    Behavior on opacity { NumberAnimation { duration: 160 } }
+                    Behavior on font.pixelSize { NumberAnimation { duration: 160 } }
+                }
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: cs.activated(index)
+            }
+        }
+    }
+}