Initial replacement of status text with status icons on the PC view

app/gui/PcView.qml

@@ -98,6 +98,18 @@ GridView {
             }
         }
 
+        Image {
+            // TODO: Tooltip
+            id: stateIcon
+            anchors.centerIn: pcIcon // TODO: Center within screen
+            visible: !model.addPc && (!model.online || !model.paired)
+            source: !model.online ? "qrc:/res/baseline-warning-24px.svg" : "qrc:/res/baseline-lock-24px.svg"
+            sourceSize {
+                width: 50
+                height: 50
+            }
+        }
+
         Text {
             id: pcNameText
             text: model.name
@@ -110,38 +122,6 @@ GridView {
             wrapMode: Text.Wrap
         }
 
-        Text {
-            function getStatusText(model)
-            {
-                if (model.online) {
-                    var text = "<font color=\"green\">Online</font>"
-                    text += "<font color=\"white\"> - </font>"
-                    if (model.paired) {
-                        text += "<font color=\"skyblue\">Paired</font>"
-                    }
-                    else if (model.busy) {
-                        text += "<font color=\"red\">Busy</font>"
-                    }
-                    else {
-                        text += "<font color=\"red\">Not Paired</font>"
-                    }
-                    return text
-                }
-                else {
-                    return "<font color=\"red\">Offline</font>";
-                }
-            }
-
-            id: pcPairedText
-            text: getStatusText(model)
-            visible: !model.addPc
-
-            width: parent.width
-            anchors.top: pcNameText.bottom
-            font.pointSize: 24
-            horizontalAlignment: Text.AlignHCenter
-        }
-
         Menu {
             id: pcContextMenu
             MenuItem {

app/res/baseline-lock-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
+</svg>

app/res/baseline-play_circle_filled_white-48px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="#fff">
+    <path d="M0 0h48v48H0z" fill="none"/>
+    <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/>
+</svg>

app/res/baseline-warning-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
+</svg>

app/resources.qrc

@@ -5,6 +5,9 @@
         <file>res/ic_videogame_asset_white_48px.svg</file>
         <file>res/ic_tv_white_48px.svg</file>
         <file>res/ic_add_to_queue_white_48px.svg</file>
+        <file>res/baseline-lock-24px.svg</file>
+        <file>res/baseline-play_circle_filled_white-48px.svg</file>
+        <file>res/baseline-warning-24px.svg</file>
         <file>res/no_app_image.png</file>
         <file>res/settings.svg</file>
         <file>res/arrow_left.svg</file>