WIP to setup the keys event

Jellyfin.qml

@@ -1,19 +1,32 @@
 import QtQuick 2.5
 import fbx.application 1.0
-import "Views" 1.0
+import "Views" as View
 
 Application {
-    Image {
+    Row {
-        source: "icon.png"
+        anchors.fill: parent
+        spacing: 10
+
+        Rectangle {
+            width: parent.width / 3 - 5
+            height: parent.height
+
+            View.Logo {}
         }
-    Text {
+        Rectangle {
-        text: "Connect to Jellifyn server"
+            width: parent.width / 3 * 2 - 5
+            height: parent.height
+
+            color: "#000B25"
+
+            focus: true
+
+            View.Login {}
         }
 
-    GridView {
+        Component.onCompleted: {
-        model: ViewLogin {}
+            // Setup the login view to be focus on start
-        delegate: Column {
+            columnLogin.updateSelection();
-                Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
         }
     }
 }

Views/Login.qml

@@ -0,0 +1,75 @@
+import QtQuick 2.5
+
+Column {
+    // Liste des labels et types
+    property var fields: [
+        {label: "Server", type: "text"},
+        {label: "User", type: "text"},
+        {label: "Password", type: "password"}
+    ]
+
+    property int currentIndex: 0
+
+    id: columnLogin
+
+    //anchors.centerIn: parent
+    anchors.verticalCenter: parent.verticalCenter
+    anchors.margins: 20
+    spacing: 15
+    width: parent.width * 0.8
+
+    function updateSelection() {
+        for (let i = 0; i < repeater.count; i++) {
+            repeater.itemAt(i).color = i === columnLogin.currentIndex ? "lightblue" : "transparent";
+        }
+    }
+
+    // Repeater pour générer les champs basés sur la liste des labels et types
+    Repeater {
+        model: fields
+
+        Row {
+            spacing: 10
+
+            Text {
+                width: parent.width / 2 - 5
+                text: modelData.label + ":"
+                color: "white"
+                font.pixelSize: 16
+            }
+
+            // TextInput pour les champs Server et User, et mode Password pour Password
+            Rectangle {
+                width: 200
+                height: 20
+                color: "white"
+                //border.color: "black"
+                //border.width: 3
+                //radius: 5
+
+                TextInput {
+                    font.pixelSize: 16
+                    color: "black"
+                    text: modelData.label
+
+                    // Détermine le mode de saisie en fonction du type
+                    echoMode: modelData.type === "password" ? TextInput.Password : TextInput.Normal
+                }
+            }
+        }
+
+        Keys.onPressed: {
+            if (event.key === Qt.Key_Up) {
+                if (currentIndex > 0) {
+                    currentIndex--;
+                    updateSelection();
+                }
+            } else if (event.key == Qt.Key_Down) {
+                if (currentIndex < repeater.children.length - 1) {
+                    currentIndex++;
+                    updateSelection()
+                }
+            }
+        }
+    }
+}

Views/Logo.qml

@@ -0,0 +1,14 @@
+import QtQuick 2.5
+
+// Display the logo
+Rectangle {
+    width: parent.width
+    height: parent.height
+
+    color: "#000B25"
+
+    Image {
+        anchors.centerIn: parent
+        source: "../icon.png"
+    }
+}

Views/ViewLogin.qml

@@ -1,13 +0,0 @@
-import QtQuick 2.5
-
-ListModel {
-    ListElement {
-        name: "Server"
-    }
-    ListElement {
-        name: "Username"
-    }
-    ListElement {
-        name: "Password"
-    }
-}

manifest.json

@@ -4,7 +4,7 @@
     "description": "Jellyfin for Freebox",
     "icon": "icon.png",
     "capabilities": {
-        "net_wan": "required",
+        "net_wan": "required"
     },
     "entryPoints": {
         "main": {