Implement smooth source select with Loaders, implement vertical tabbar for settings, add header

QYRComponents/Button.qml

@@ -3,12 +3,13 @@ import QtQuick.Controls 6.8
 import QtQuick.Controls.Basic 6.8
 
 Button {
+    property bool outlined: false
     implicitHeight: 36
 
     contentItem: Text {
         text: parent.text
         font.family: Colors.fontFamily
-        font.pointSize: Colors.fontSize.base
+        font.pointSize: Colors.fontSize.button
         opacity: enabled ? 1.0 : 0.3
         color: Colors.text;
         horizontalAlignment: Text.AlignHCenter
@@ -17,7 +18,9 @@ Button {
     }
 
     background: Rectangle {
-        color: parent.hovered ? Colors.primaryAlt : Colors.primary
+        color: parent.outlined ? "transparent" : (parent.hovered ? Colors.primaryAlt : Colors.primary)
+        border.color: (parent.hovered ? "#555" : "#777")
+        border.width: parent.outlined ? 2 : 0
         opacity: enabled ? 1 : 0.3
         radius: 5
     }

QYRComponents/Colors.qml

@@ -37,8 +37,9 @@ Item {
         h4: 16,
         h5: 13,
         h6: 10,
-        p: 12,
-        base: 12
+        p: 14,
+        base: 14,
+        button: 12
     })
 
     property var currentTheme: themes.dark

QYRComponents/TabButton.qml

@@ -10,7 +10,7 @@ TabButton {
     contentItem: Text {
         text: parent.text
         font.family: Colors.fontFamily
-        font.pointSize: Colors.fontSize.base
+        font.pointSize: Colors.fontSize.button
         opacity: enabled ? 1.0 : 0.3
         color: Colors.text;
         horizontalAlignment: Text.AlignHCenter