Add a button for quitting the running app

app/gui/AppView.qml

@@ -66,7 +66,7 @@ GridView {
 
         Image {
             id: appIcon
-            anchors.horizontalCenter: parent.horizontalCenter;
+            anchors.horizontalCenter: parent.horizontalCenter
             y: 20
             source: model.boxart
             sourceSize {
@@ -80,6 +80,7 @@ GridView {
 
         Image {
             id: runningIcon
+            anchors.verticalCenterOffset: -45
             anchors.centerIn: appIcon
             visible: model.running
             source: "qrc:/res/baseline-play_circle_filled_white-48px.svg"
@@ -87,6 +88,32 @@ GridView {
                 width: 75
                 height: 75
             }
+            MouseArea {
+                anchors.fill: parent
+                acceptedButtons: Qt.LeftButton
+                onClicked: {
+                   launchOrResumeSelectedApp()
+                }
+            }
+        }
+
+        Image {
+            id: quitIcon
+            anchors.verticalCenterOffset: 45
+            anchors.centerIn: appIcon
+            visible: model.running
+            source: "qrc:/res/baseline-cancel-24px.svg"
+            sourceSize {
+                width: 75
+                height: 75
+            }
+            MouseArea {
+                anchors.fill: parent
+                acceptedButtons: Qt.LeftButton
+                onClicked: {
+                    doQuitGame()
+                }
+            }
         }
 
         Label {
@@ -125,29 +152,20 @@ GridView {
         }
 
         onClicked: {
-            // Nothing is running or this app is running
-            launchOrResumeSelectedApp()
-        }
-
-        MouseArea {
-            anchors.fill: parent
-            acceptedButtons: Qt.RightButton
-            onClicked: {
-                // popup() ensures the menu appears under the mouse cursor
-                if (appContextMenu.popup) {
-                    appContextMenu.popup()
-                }
-                else {
-                    // Qt 5.9 doesn't have popup()
-                    appContextMenu.open()
-                }
+            if (model.running) {
+                // This will primarily be keyboard/gamepad driven so use
+                // open() instead of popup()
+                appContextMenu.open()
+            }
+            else {
+                launchOrResumeSelectedApp()
             }
         }
 
-        Keys.onMenuPressed: {
-            // We must use open() here so the menu is positioned on
-            // the ItemDelegate and not where the mouse cursor is
-            appContextMenu.open()
+        function doQuitGame() {
+            quitAppDialog.appName = appModel.getRunningAppName()
+            quitAppDialog.segueToStream = false
+            quitAppDialog.open()
         }
 
         Menu {
@@ -161,11 +179,7 @@ GridView {
             }
             NavigableMenuItem {
                 text: "Quit Game"
-                onTriggered: {
-                    quitAppDialog.appName = appModel.getRunningAppName()
-                    quitAppDialog.segueToStream = false
-                    quitAppDialog.open()
-                }
+                onTriggered: doQuitGame()
                 visible: model.running
             }
         }

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fff"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

app/resources.qrc

@@ -8,6 +8,7 @@
         <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/baseline-cancel-24px.svg</file>
         <file>res/no_app_image.png</file>
         <file>res/settings.svg</file>
         <file>res/arrow_left.svg</file>