feat: rebuild the interface after Haruna

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/qml/PlaylistItem.qml

@@ -0,0 +1,152 @@
+// SPDX-FileCopyrightText: 2020 George Florea Bănuș <georgefb899@gmail.com>
+// SPDX-FileCopyrightText: 2026 Tri Vo Khac
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import org.kde.ki18n
+import org.kde.kirigami as Kirigami
+
+// One row of the playlist: row number, playing icon and file name.
+Item {
+    id: root
+
+    required property int index
+    required property url url
+    required property string name
+    required property bool isPlaying
+    required property PlaylistModel playlist
+    required property MpvItem mpv
+    property real alpha: QtPotatoSettings.playlistOverlayVideo ? 0.6 : 1
+
+    readonly property bool hovered: hoverHandler.hovered
+    readonly property real fontSize: Kirigami.Theme.defaultFont.pointSize
+
+    function labelColor(): color {
+        if (root.isPlaying && !root.hovered) {
+            return Kirigami.Theme.highlightedTextColor
+        }
+        return Kirigami.Theme.textColor
+    }
+
+    implicitWidth: ListView.view.width
+    implicitHeight: fontSize * 3
+
+    HoverHandler {
+        id: hoverHandler
+    }
+
+    TapHandler {
+        acceptedButtons: Qt.LeftButton
+        onDoubleTapped: root.playlist.play(root.index)
+    }
+
+    TapHandler {
+        acceptedButtons: Qt.RightButton
+        onTapped: contextMenu.popup()
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        Kirigami.Theme.colorSet: Kirigami.Theme.View
+        color: {
+            if (root.isPlaying && !root.hovered) {
+                return Qt.alpha(Kirigami.Theme.highlightColor, root.alpha)
+            }
+            if (root.hovered) {
+                return Qt.alpha(Kirigami.Theme.hoverColor, root.alpha)
+            }
+            return Qt.alpha(Kirigami.Theme.backgroundColor, root.alpha)
+        }
+
+        RowLayout {
+            anchors.fill: parent
+            spacing: Kirigami.Units.largeSpacing
+
+            Label {
+                text: root.index + 1
+                color: root.labelColor()
+                visible: QtPotatoSettings.playlistShowRowNumber
+                font.pointSize: root.fontSize
+                font.features: { "tnum": 1 }
+                horizontalAlignment: Qt.AlignHCenter
+                Layout.leftMargin: Kirigami.Units.largeSpacing
+                Layout.preferredWidth: rowNumberMetrics.width
+            }
+
+            TextMetrics {
+                id: rowNumberMetrics
+                font.pointSize: root.fontSize
+                text: String(root.playlist.count).replace(/./g, "0")
+            }
+
+            Rectangle {
+                color: Qt.alpha(Kirigami.Theme.textColor, 0.2)
+                visible: QtPotatoSettings.playlistShowRowNumber
+                Layout.preferredWidth: 1
+                Layout.fillHeight: true
+                Layout.topMargin: Kirigami.Units.smallSpacing
+                Layout.bottomMargin: Kirigami.Units.smallSpacing
+            }
+
+            Kirigami.Icon {
+                source: "media-playback-start"
+                color: root.labelColor()
+                visible: root.isPlaying
+                Layout.leftMargin: QtPotatoSettings.playlistShowRowNumber ? 0 : Kirigami.Units.largeSpacing
+                Layout.preferredWidth: Kirigami.Units.iconSizes.small
+                Layout.preferredHeight: Kirigami.Units.iconSizes.small
+            }
+
+            LabelWithTooltip {
+                text: root.name
+                toolTipText: root.url.toString().startsWith("file://") ? decodeURIComponent(root.url.toString().substring(7)) : root.url
+                color: root.labelColor()
+                elide: Text.ElideRight
+                font.pointSize: root.fontSize
+                verticalAlignment: Qt.AlignVCenter
+                Layout.fillWidth: true
+                Layout.leftMargin: !QtPotatoSettings.playlistShowRowNumber && !root.isPlaying ? Kirigami.Units.largeSpacing : 0
+                Layout.rightMargin: Kirigami.Units.largeSpacing
+            }
+        }
+    }
+
+    Menu {
+        id: contextMenu
+
+        MenuItem {
+            text: KI18n.i18nc("@action:inmenu", "Play")
+            icon.name: "media-playback-start"
+            onTriggered: root.playlist.play(root.index)
+        }
+        MenuItem {
+            text: KI18n.i18nc("@action:inmenu", "Open Containing Folder")
+            icon.name: "folder-open"
+            enabled: root.url.toString().startsWith("file://")
+            onTriggered: {
+                const path = root.url.toString()
+                Qt.openUrlExternally(path.substring(0, path.lastIndexOf("/")))
+            }
+        }
+        MenuSeparator {}
+        MenuItem {
+            text: KI18n.i18nc("@action:inmenu", "Move Up")
+            icon.name: "go-up"
+            enabled: root.index > 0
+            onTriggered: root.playlist.move(root.index, root.index - 1)
+        }
+        MenuItem {
+            text: KI18n.i18nc("@action:inmenu", "Move Down")
+            icon.name: "go-down"
+            enabled: root.index < root.playlist.count - 1
+            onTriggered: root.playlist.move(root.index, root.index + 1)
+        }
+        MenuItem {
+            text: KI18n.i18nc("@action:inmenu", "Remove from Playlist")
+            icon.name: "list-remove"
+            onTriggered: root.playlist.remove(root.index)
+        }
+    }
+}