Initial prototype

Basic UI outline with keyboard control. Python database
object is exposed to QML and data can be queried from its methods.
This should provide a generic structure that different UI themes
can be built around.

layouts/components/Sidebar.qml

@@ -0,0 +1,38 @@
+import QtQuick 2.12
+
+import Ikinuki.Client 1.0
+
+Rectangle {
+    property var providers
+    default property int selectedElement: 2
+    property var max_elements: providers.length
+    width: parent.width * 0.3
+    height: parent.height
+    color: "#22282A"
+    Column {
+        anchors.fill: parent
+        // header
+        SidebarHeader {}
+        Repeater {
+            model: providers
+            SidebarElement {
+                name: modelData.Name
+                selected: (index == selectedElement) ? true : false
+            }
+        }
+
+    }
+    function mod(n, m) {
+        return ((n % m) + m) % m;
+    }
+    Keys.onPressed: (event)=> {
+        if (event.key == Qt.Key_Down) {
+            selectedElement = mod(selectedElement + 1, max_elements);
+        }
+        else if (event.key == Qt.Key_Up) {
+            selectedElement = mod(selectedElement - 1, max_elements);
+        }
+        console.log(selectedElement)
+        event.accepted = true;
+    }
+}

layouts/components/SidebarElement.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.12
+
+Rectangle {
+    property string name
+    default property bool selected: false
+    color: selected ? "#E4A10D" : "#22282A"
+    width: parent.width
+    height: parent.height * 0.08
+    Row {
+        anchors.verticalCenter: parent.verticalCenter
+        //Item { width: 50; height: 100}
+        Text {
+            font.pointSize: 15
+            text: name
+        }
+    }
+}

layouts/components/SidebarHeader.qml

@@ -0,0 +1,14 @@
+import QtQuick 2.12
+
+Rectangle {
+    width: parent.width
+    height: parent.height * 0.06
+    color: "#22282A"
+    Row {
+        spacing: parent.width * 0.2
+        anchors.verticalCenter: parent.verticalCenter
+        Text { text: "ohea0"}
+        Text { text: "ohea1"}
+        Text { text: "ohea2"}
+    }
+}