Merge lp:~verzegnassi-stefano/openstore/redesign into lp:openstore

[Stefano Verzegnassi]

Full UI redesign of the application:
* Added a 'Discover' tab
* Added a 'My Apps' tab
* Search and categories
* Redesigned AppDetails page

Full UI redesign of the application:
* Added a 'Discover' tab
* Added a 'My Apps' tab
* Search and categories
* Redesigned AppDetails page

Please note in DiscoverTab.qml that data are fetched from:
https://gist.githubusercontent.com/sverzegnassi/e6cdcfc44785ce90e5904c5fa1f9441f/raw/ddb35eb91186d36ea131ab8b99604b8a40890939/DiscoverData.json

[lp:~verzegnassi-stefano/openstore/redesign]

29. By Stefano Verzegnassi on 2017-05-04

Bump SDK version, we're using now 'automaticHeight' property in UITK Headers

30. By Stefano Verzegnassi on 2017-05-04

DiscoverTab app tiles: Show label if application is already installed or an update is available

31. By Stefano Verzegnassi on 2017-05-04

Fixed a few visual issues in AppDetails page, and be sure we don't get false positives for the 'unconfined' alert

[Michael Zanetti (mzanetti)]

The CategoryModel.qml has high potential to drift apart from the server categories. I'd vote for adding an API to the server that allows grabbing the categories.

====================

+ var dataUrl = "https://gist.githubusercontent.com/sverzegnassi/e6cdcfc44785ce90e5904c5fa1f9441f/raw/ddb35eb91186d36ea131ab8b99604b8a40890939/DiscoverData.json"

This looks very odd... I guess the intention is to have a file defining the "featured items" etc, that contributors can modify/update. That's fair, but please keep it somewhere on the infrastructure. E.g. put this Json file into the app repository here, or host it somewhere on the openstore server.

==================

1974 + // TODO: Is this really necessary?
1975 + // buildInstalledClickList();

what's up with this?

Apart from that, code looks ok to me!

review: Needs Information

[Stefano Verzegnassi (verzegnassi-stefano)]

Ok, first 2 questions are up to you guys. I just kept the file I uploaded on my gist since I got no other input.

Answering to the third question, well, that's something I forgot to remove when I've been testing the app on the desktop. I'm on xenial and click tools are a bit broken: I did a few changes to the code in order to make OpenStore believe I have some package installed. Forgot to remove those few bits. :P

[lp:~verzegnassi-stefano/openstore/redesign]

32. By Stefano Verzegnassi on 2017-05-04

Remove i18n from printSize

33. By Stefano Verzegnassi on 2017-05-04

Remove dirty bits

34. By Stefano Verzegnassi on 2017-05-04

Remove 'Packager/Publisher' entry from AppDetailsPage

35. By Stefano Verzegnassi on 2017-05-04

Use the brand new Discover API from the OpenStore server

36. By Stefano Verzegnassi on 2017-05-04

Use the brand new Categories API from the OpenStore server

37. By Stefano Verzegnassi on 2017-05-04

Move categories GET request in Main.qml, since it makes no sense to download definitions every time we open the hamburger menu. Also, there's the risk that categories are not in sync with the repo manifest

38. By Stefano Verzegnassi on 2017-05-05

The icon is now called 'find', not 'search'...

39. By Stefano Verzegnassi on 2017-05-08

Re-add 'packager/publisher' field

=== modified file 'manifest.json.in'
--- manifest.json.in	2016-08-24 13:25:35 +0000
+++ manifest.json.in	2017-05-08 18:42:06 +0000
@@ -13,5 +13,5 @@
     },
     "version": "0.103",
     "maintainer": "OpenStore Team <[e-mail]>",
-    "framework": "ubuntu-sdk-15.04.3"
+    "framework": "ubuntu-sdk-15.04.6"
 }

=== modified file 'openstore/AppDetailsPage.qml'
--- openstore/AppDetailsPage.qml	2016-08-24 13:25:35 +0000
+++ openstore/AppDetailsPage.qml	2017-05-08 18:42:06 +0000
@@ -22,417 +22,572 @@
 
 
 Page {
+    id: appDetailsPage
     header: PageHeader {
         title: app ? app.name : "App details"
+        automaticHeight: false
     }
 
     property var app: null
 
 
-    Flickable {
+    ScrollView {
+        id: scrollView
         anchors.fill: parent
         anchors.topMargin: parent.header.height
-        contentHeight: mainColumn.height + units.gu(2)
-        interactive: contentHeight > height - topMargin
 
         Column {
             id: mainColumn
-            anchors { left: parent.left; top: parent.top; right: parent.right }
-            anchors.margins: units.gu(2)
-            spacing: units.gu(1)
-            height: childrenRect.height
-
-            RowLayout {
-                anchors { left: parent.left; right: parent.right }
-                height: units.gu(10)
-                spacing: units.gu(1)
-
-                UbuntuShape {
-                    Layout.fillHeight: true
-                    Layout.preferredWidth: height
-
-                    image: Image {
+            width: scrollView.width
+            //spacing: units.gu(1)
+
+            ListItem {
+                height: units.gu(16)
+
+                ListItemLayout {
+                    anchors.fill: parent
+                    title.text: app.name
+                    subtitle.text: app.author
+                    summary.text: printSize(app.fileSize)
+
+                    UbuntuShape {
+                        SlotsLayout.position: SlotsLayout.Leading
+                        width: units.gu(12); height: width
+                        aspect: UbuntuShape.Flat
+
+                        image: Image {
+                            height: parent.height
+                            width: parent.width
+                            source: app ? app.icon : ""
+                        }
+                    }
+                }
+            }
+
+            ListItem {
+                height: units.gu(8)
+
+                RowLayout {
+                    id: buttonsRow
+                    anchors.fill: parent
+                    anchors.margins: units.gu(2)
+                    spacing: units.gu(2)
+                    visible: !appModel.installer.busy
+
+                    Button {
+                        Layout.fillWidth: true
+                        text: app.installed ? i18n.tr("Upgrade") : i18n.tr("Install")
+                        visible: !app.installed || (app.installed && app.installedVersion < app.version)
+                        color: UbuntuColors.green
+                        onClicked: {
+                            appModel.installer.installPackage(app.packageUrl)
+                        }
+                    }
+
+                    Button {
+                        Layout.fillWidth: true
+                        text: i18n.tr("Remove")
+                        visible: app.installed
+                        color: UbuntuColors.red
+                        onClicked: {
+                            appModel.installer.removePackage(app.appId, app.version)
+                        }
+                    }
+                }
+
+                ProgressBar {
+                    id: installerProgressBar
+                    anchors {
+                        left: parent.left; leftMargin: units.gu(2)
+                        right: parent.right; rightMargin: units.gu(2)
+                        verticalCenter: parent.verticalCenter
+                    }
+                    maximumValue: app ? app.fileSize : 0
+                    value: appModel.installer.downloadProgress
+                    visible: appModel.installer.busy
+                    indeterminate: appModel.installer.downloadProgress == 0
+                }
+            }
+
+            ListItem {
+                visible: {
+                    for (var i=0; i<app.hooksCount; ++i) {
+                        if (includesUnconfinedLocations(app.readPaths(i)))
+                            return true
+                        if (includesUnconfinedLocations(app.writePaths(i)))
+                            return true
+                        if (app.apparmorTemplate(i).indexOf("unconfined") >= 0)
+                            return true
+                    }
+                    return false
+                }
+                ListItemLayout {
+                    anchors.centerIn: parent
+                    subtitle.text: i18n.tr("This software requires extra privileges. See below for details.")
+                    subtitle.color: UbuntuColors.red
+                    subtitle.maximumLineCount: 2
+                    subtitle.wrapMode: Text.WordWrap
+
+                    Icon {
+                        SlotsLayout.position: SlotsLayout.Leading
+                        width: units.gu(4); height: width
+                        name: "security-alert"
+                    }
+                }
+            }
+
+            ListItem {
+                height: units.gu(32)
+                visible: screenshotsView.count
+
+                ListView {
+                    id: screenshotsView
+                    anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter }
+                    leftMargin: units.gu(2)
+                    rightMargin: units.gu(2)
+                    clip: true
+                    height: count > 0 ? units.gu(24) : 0
+                    visible: count > 0
+                    spacing: units.gu(1)
+                    orientation: ListView.Horizontal
+                    model: app.screenshots
+                    delegate: UbuntuShape {
                         height: parent.height
-                        width: parent.width
-                        source: app ? app.icon : ""
-                    }
-                }
-
-                ColumnLayout {
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-                    spacing: units.gu(1)
-                    Label {
-                        text: app.name
-                        Layout.fillWidth: true
-                        fontSize: "large"
-                    }
-                    Label {
-                        text: app.author
-                        Layout.fillWidth: true
-                    }
-                }
-            }
-            ThinDivider { }
-            Label {
-                anchors { left: parent.left; right: parent.right }
-                text: app.tagline
-                wrapMode: Text.WordWrap
-            }
-
-            ListView {
-                anchors { left: parent.left; right: parent.right; margins: -units.gu(2) }
-                leftMargin: units.gu(2)
-                rightMargin: units.gu(2)
-                clip: true
-                height: count > 0 ? units.gu(20) : 0
-                visible: count > 0
-                spacing: units.gu(1)
-                orientation: ListView.Horizontal
-                model: app.screenshots
-                delegate: UbuntuShape {
-                    height: parent.height
-                    // sh : lv.h = sw : x
-                    width: screenshot.sourceSize.width * height / screenshot.sourceSize.height
-                    sourceFillMode: UbuntuShape.PreserveAspectFit
-                    source: Image {
-                        id: screenshot
-                        source: modelData
-                    }
-
-                    AbstractButton {
-                        id: screenShotButton
-                        anchors.fill: parent
-                        onClicked: {
-                            print("opening at:", screenShotButton.mapToItem(root, 0, 0).x)
-                            zoomIn.createObject(root, {x: screenShotButton.mapToItem(root, 0, 0).x, y: screenShotButton.mapToItem(root, 0, 0).y, itemScale: screenShotButton.height / root.height, imageSource: modelData});
-//                            zoomIn.createObject(root, {x: 100, y: 100});
-                        }
-                    }
-
-                    Component {
-                        id: zoomIn
-                        Rectangle {
-                            id: zI
-                            width: parent.width
-                            height: parent.height
-                            color: "black"
-
-                            property real itemScale: 1
-                            property string imageSource
-                            transform: Scale {
-                                origin.x: 0
-                                origin.y: 0
-                                xScale: zI.itemScale
-                                yScale: zI.itemScale
-                            }
-
-                            ParallelAnimation {
-                                id: scaleInAnimation
-                                onStarted: {
-                                    hideAnimation.initialScale = itemScale;
-                                    hideAnimation.initialX = x;
-                                    hideAnimation.initialY = y;
-                                }
-
-                                UbuntuNumberAnimation { target: zI; property: "itemScale"; to: 1 }
-                                UbuntuNumberAnimation { target: zI; properties: "x,y"; to: 0 }
-                            }
-
-
-                            Component.onCompleted: {
-                                scaleInAnimation.start();
-                            }
-
-                            Image {
-                                anchors.fill: parent
-                                source: zI.imageSource
-                                fillMode: Image.PreserveAspectFit
-                            }
-
-                            AbstractButton {
-                                anchors.fill: parent
-                                onClicked: {
-                                    hideAnimation.start()
-                                }
-                            }
-
-                            ParallelAnimation {
-                                id: hideAnimation
-                                property real initialScale: 1
-                                property int initialX: 0
-                                property int initialY: 0
-
-
-                                UbuntuNumberAnimation { target: zI; property: "itemScale"; to: hideAnimation.initialScale }
-                                UbuntuNumberAnimation { target: zI; property: "x"; to: hideAnimation.initialX }
-                                UbuntuNumberAnimation { target: zI; property: "y"; to: hideAnimation.initialY }
-                                onStopped: {
-                                    script: zI.destroy()
-                                }
-
-                            }
-                        }
-                    }
-                }
-            }
-
-            Label {
-                anchors { left: parent.left; right: parent.right }
-                text: app.description
-                wrapMode: Text.WordWrap
-            }
-
-            ThinDivider { }
-
-            Label {
-                text: "<b>Packager/Publisher:</b> " + (app.maintainer ? app.maintainer : "Openstore team")
-            }
-
-            Label {
-                anchors { left: parent.left; right: parent.right }
-                text: "Installed version: " + (app.installedVersion ? app.installedVersion : "None")
-                wrapMode: Text.WordWrap
-            }
-
-            Label {
-                anchors { left: parent.left; right: parent.right }
-                text: "Latest available version: " + app.version
-                wrapMode: Text.WordWrap
-            }
-
-            Label {
-                anchors { left: parent.left; right: parent.right }
-                text: "Changelog:"
-                wrapMode: Text.WordWrap
-                visible: app.changelog
-            }
-
-            Label {
-                anchors { left: parent.left; right: parent.right }
-                text: app.changelog
-                wrapMode: Text.WordWrap
-                visible: app.changelog
-            }
-
-            ThinDivider {}
-
-            ProgressBar {
-                Layout.fillWidth: true
-                maximumValue: app ? app.fileSize : 0
-                value: appModel.installer.downloadProgress
-                visible: appModel.installer.busy
-                indeterminate: appModel.installer.downloadProgress == 0
-            }
-
-            RowLayout {
-                width: parent.width
-                spacing: units.gu(1)
-                visible: !appModel.installer.busy
-
-                Button {
-                    text: app.installed ? "Upgrade" : "Install"
-                    visible: !app.installed || (app.installed && app.installedVersion < app.version)
-                    color: "#DD4814"
-                    onClicked: {
-                        appModel.installer.installPackage(app.packageUrl)
-                    }
-                }
-
-                Button {
-                    text: "Remove"
-                    visible: app.installed
-                    color: UbuntuColors.red
-                    onClicked: {
-                        appModel.installer.removePackage(app.appId, app.version)
-                    }
-                }
-            }
-
-            ThinDivider {}
-
-            Label {
-                anchors { left: parent.left; right: parent.right }
-                text: "Package contents:"
-                font.bold: true
+                        // sh : lv.h = sw : x
+                        width: screenshot.sourceSize.width * height / screenshot.sourceSize.height
+                        aspect: UbuntuShape.Flat
+                        sourceFillMode: UbuntuShape.PreserveAspectFit
+                        source: Image {
+                            id: screenshot
+                            source: modelData
+                            smooth: true
+                            antialiasing: true
+                        }
+
+                        AbstractButton {
+                            id: screenShotButton
+                            anchors.fill: parent
+                            onClicked: {
+                                print("opening at:", screenShotButton.mapToItem(root, 0, 0).x)
+                                zoomIn.createObject(root, {x: screenShotButton.mapToItem(root, 0, 0).x, y: screenShotButton.mapToItem(root, 0, 0).y, itemScale: screenShotButton.height / root.height, imageSource: modelData});
+                                //                            zoomIn.createObject(root, {x: 100, y: 100});
+                            }
+                        }
+
+                        Component {
+                            id: zoomIn
+                            Rectangle {
+                                id: zI
+                                width: parent.width
+                                height: parent.height
+                                color: "black"
+
+                                property real itemScale: 1
+                                property string imageSource
+                                transform: Scale {
+                                    origin.x: 0
+                                    origin.y: 0
+                                    xScale: zI.itemScale
+                                    yScale: zI.itemScale
+                                }
+
+                                ParallelAnimation {
+                                    id: scaleInAnimation
+                                    onStarted: {
+                                        hideAnimation.initialScale = itemScale;
+                                        hideAnimation.initialX = x;
+                                        hideAnimation.initialY = y;
+                                    }
+
+                                    UbuntuNumberAnimation { target: zI; property: "itemScale"; to: 1 }
+                                    UbuntuNumberAnimation { target: zI; properties: "x,y"; to: 0 }
+                                }
+
+
+                                Component.onCompleted: {
+                                    scaleInAnimation.start();
+                                }
+
+                                Image {
+                                    anchors.fill: parent
+                                    source: zI.imageSource
+                                    fillMode: Image.PreserveAspectFit
+                                }
+
+                                AbstractButton {
+                                    anchors.fill: parent
+                                    onClicked: {
+                                        hideAnimation.start()
+                                    }
+                                }
+
+                                ParallelAnimation {
+                                    id: hideAnimation
+                                    property real initialScale: 1
+                                    property int initialX: 0
+                                    property int initialY: 0
+
+
+                                    UbuntuNumberAnimation { target: zI; property: "itemScale"; to: hideAnimation.initialScale }
+                                    UbuntuNumberAnimation { target: zI; property: "x"; to: hideAnimation.initialX }
+                                    UbuntuNumberAnimation { target: zI; property: "y"; to: hideAnimation.initialY }
+                                    onStopped: {
+                                        script: zI.destroy()
+                                    }
+
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            ListItem {
+                height: descLayout.height
+                onClicked: descLayout.showAll = !descLayout.showAll
+                ListItemLayout {
+                    id: descLayout
+                    property bool showAll: false
+                    title.text: app.tagline || i18n.tr("Description")
+                    subtitle.text: app.description
+                    subtitle.textSize: Label.Small
+                    subtitle.wrapMode: Text.WordWrap
+                    subtitle.maximumLineCount: showAll ? Number.MAX_VALUE : 5
+
+                    Icon {
+                        width: units.gu(2); height: width
+                        SlotsLayout.position: SlotsLayout.Last
+                        name: descLayout.showAll ? "go-up" : "go-down"
+                    }
+                }
+            }
+
+            ListItem {
+                height: changelogLayout.height
+                visible: app.changelog
+                onClicked: changelogLayout.showAll = !changelogLayout.showAll
+                ListItemLayout {
+                    id: changelogLayout
+                    property bool showAll: false
+                    title.text: i18n.tr("What's New")
+                    subtitle.text: app.changelog
+                    subtitle.textSize: Label.Small
+                    subtitle.wrapMode: Text.WordWrap
+                    subtitle.maximumLineCount: showAll ? Number.MAX_VALUE : 5
+                    
+                    Icon {
+                        width: units.gu(2); height: width
+                        SlotsLayout.position: SlotsLayout.Last
+                        name: changelogLayout.showAll ? "go-up" : "go-down"
+                    }
+                }
+            }
+            
+            ListItem {
+                divider.visible: false
+                ListItemLayout {
+                    anchors.centerIn: parent
+                    title.text: i18n.tr("Packager/Publisher")
+                    subtitle.text: app.maintainer || i18n.tr("OpenStore team")
+                }
+            }
+
+            ListItem {
+                divider.visible: false
+                ListItemLayout {
+                    anchors.centerIn: parent
+                    title.text: i18n.tr("Installed version")
+                    subtitle.text: app.installedVersion || "None"
+                }
+            }
+            
+            ListItem {
+                divider.visible: false
+                ListItemLayout {
+                    anchors.centerIn: parent
+
+                    title.text: i18n.tr("Latest available version")
+                    subtitle.text: app.version
+                }
+            }
+            
+            ListItem {
+                divider.visible: false
+                ListItemLayout {
+                    anchors.centerIn: parent
+                    title.text: i18n.tr("License") || i18n.tr("<i>N/A</i>")
+                    subtitle.text: app.license
+                }
+            }
+
+            ListItem {
+                onClicked: Qt.openUrlExternally(app.source)
+                ListItemLayout {
+                    anchors.centerIn: parent
+                    title.text: i18n.tr("Source Code") || i18n.tr("<i>N/A</i>")
+                    subtitle.text: app.source
+                    ProgressionSlot { visible: app.source }
+                }
+            }
+
+            ListItem {
+                onClicked: {
+                    // FIXME: I don't like this heuristic, but there's no other way to get a reference
+                    // to the page that pushed 'appDetailsPage' into the stack.
+                    // The parent node is actually the PageWrapper that created this page, 'parentPage' is one of its properties.
+                    //var realParentPage = appDetailsPage.parentNode.parentPage
+
+                    var pageProps = {
+                        title: app.author,
+                        filterPattern: new RegExp(app.author),
+                        filterProperty: "author"
+                    }
+
+                    appDetailsPage.pageStack.addPageToCurrentColumn(/*realParentPage*/ appDetailsPage, filteredAppPageComponent, pageProps)
+                }
+                ListItemLayout {
+                    anchors.centerIn: parent
+                    title.text: i18n.tr("More from %1").arg(app.author)
+                    ProgressionSlot {}
+                }
+            }
+
+            ListItem {
+                onClicked: {
+                    // FIXME: I don't like this heuristic, but there's no other way to get a reference
+                    // to the page that pushed 'appDetailsPage' into the stack.
+                    // The parent node is actually the PageWrapper that created this page, 'parentPage' is one of its properties.
+                    //var realParentPage = appDetailsPage.parentNode.parentPage
+
+                    var pageProps = {
+                        title: app.category,
+                        filterPattern: new RegExp(app.category),
+                        filterProperty: "category"
+                    }
+
+                    appDetailsPage.pageStack.addPageToCurrentColumn(/*realParentPage*/ appDetailsPage, filteredAppPageComponent, pageProps)
+                }
+                ListItemLayout {
+                    anchors.centerIn: parent
+                    // FIXME: app.category is not localized.
+                    title.text: i18n.tr("Other apps in %1").arg(app.category)
+                    ProgressionSlot {}
+                }
+            }
+
+            SectionDivider {
+                text: i18n.tr("Package contents")
             }
 
             Repeater {
                 model: app.hooksCount
 
-                delegate: Column {
-                    width: parent.width
+                delegate: ListItem {
+                    height: hookDelLayout.height + units.gu(3)
+
                     property var hooks: app.hooks(index)
                     property string permissions: app.permissions(index)
                     property string readpaths: app.readPaths(index)
                     property string writepaths: app.writePaths(index)
                     property string hookName: app.hookName(index)
                     property string apparmorTemplate: app.apparmorTemplate(index)
-                    spacing: units.gu(1)
-
-                    RowLayout {
-                        width: parent.width
-
-                        Label {
-                            text: hookName
-                            Layout.fillWidth: true
-                            font.bold: true
-                        }
-                        HookIcon {
-                            Layout.preferredHeight: units.gu(4)
-                            Layout.preferredWidth: units.gu(4)
-                            name: "stock_application"
-                            visible: (hooks & ApplicationItem.HookDesktop)
-                        }
-                        HookIcon {
-                            Layout.preferredHeight: units.gu(4)
-                            Layout.preferredWidth: units.gu(4)
-                            name: "search"
-                            visible: (hooks & ApplicationItem.HookScope)
-                        }
-                        HookIcon {
-                            Layout.preferredHeight: units.gu(4)
-                            Layout.preferredWidth: units.gu(4)
-                            name: "stock_website"
-                            visible: (hooks & ApplicationItem.HookUrls)
-                        }
-                        HookIcon {
-                            Layout.preferredHeight: units.gu(4)
-                            Layout.preferredWidth: units.gu(4)
-                            name: "share"
-                            visible: (hooks & ApplicationItem.HookContentHub)
-                        }
-                        HookIcon {
-                            Layout.preferredHeight: units.gu(4)
-                            Layout.preferredWidth: units.gu(4)
-                            name: "notification"
-                            visible: (hooks & ApplicationItem.HookPushHelper)
-                        }
-                        HookIcon {
-                            Layout.preferredHeight: units.gu(4)
-                            Layout.preferredWidth: units.gu(4)
-                            name: "contact-group"
-                            visible: (hooks & ApplicationItem.HookAccountService)
-                        }
-                    }
-                    RowLayout {
-                        anchors { left: parent.left; right: parent.right }
-                        spacing: units.gu(1)
-                        Icon {
-                            Layout.preferredHeight: units.gu(3)
-                            Layout.preferredWidth: units.gu(3)
-                            implicitHeight: height
-                            implicitWidth: width
-                            name: "security-alert"
-                            visible: apparmorTemplate.indexOf("unconfined") >= 0
-                        }
-
-                        Label {
-                            id: templateLabel
-                            Layout.fillWidth: true
-                            text: "Apparmor profile: " + apparmorTemplate
-                            visible: apparmorTemplate
-                            color: apparmorTemplate.indexOf("unconfined") >= 0 ? UbuntuColors.red : permissionLabel.color
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-                    }
-
-
-                    Row {
-                        anchors { left: parent.left; right: parent.right }
-                        spacing: units.gu(1)
-                        visible: permissions.length > 0
-
-                        Icon {
-                            Layout.preferredHeight: units.gu(3)
-                            Layout.preferredWidth: units.gu(3)
-                            implicitHeight: height
-                            implicitWidth: width
-                            name: "security-alert"
-                        }
-
-                        Label {
-                            id: permissionLabel
-                            text: "Permissions: " + (permissions ? permissions : "<i>none</i>")
+
+                    Column {
+                        id: hookDelLayout
+                        anchors { left: parent.left; right: parent.right; margins: units.gu(2) }
+                        y: units.gu(1)
+                        spacing: units.gu(1)
+
+                        RowLayout {
                             width: parent.width
-                            wrapMode: Text.WordWrap
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-                    }
-
-                    RowLayout {
-                        anchors { left: parent.left; right: parent.right }
-                        spacing: units.gu(1)
-                        visible: readpaths.length > 0
-                        Icon {
-                            Layout.preferredHeight: units.gu(3)
-                            Layout.preferredWidth: units.gu(3)
-                            implicitHeight: height
-                            implicitWidth: width
-                            name: "security-alert"
-                        }
-                        Label {
-                            text: "Read paths: " + readpaths
-                            Layout.fillWidth: true
-                            wrapMode: Text.WordWrap
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-                    }
-                    RowLayout {
-                        anchors { left: parent.left; right: parent.right }
-                        spacing: units.gu(1)
-                        visible: writepaths.length > 0
-                        Icon {
-                            Layout.preferredHeight: units.gu(3)
-                            Layout.preferredWidth: units.gu(3)
-                            implicitHeight: height
-                            implicitWidth: width
-                            name: "security-alert"
-                        }
-
-                        Label {
-                            text: "Write paths: " + writepaths
-                            Layout.fillWidth: true
-                            wrapMode: Text.WordWrap
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-                    }
-
-                    Button {
-                        anchors { left: parent.left }
-                        text: "Open"
-                        color: UbuntuColors.green
-                        visible: app.installed &&  (hooks & ApplicationItem.HookDesktop)
-                        onClicked: Qt.openUrlExternally("appid://" + app.appId + "/" + hookName + "/" + app.installedVersion)
-                    }
-                }
-            }
-            ThinDivider { }
-
-            Label {
-                anchors { left: parent.left; right: parent.right }
-                text: "License: " + app.license
-                wrapMode: Text.WordWrap
-            }
-            Label {
-                anchors { left: parent.left; right: parent.right }
-                text: "Source code:"
-                wrapMode: Text.WordWrap
-            }
-            AbstractButton {
-                anchors { left: parent.left; right: parent.right }
-                height: linkLabel.implicitHeight
-                Label {
-                    id: linkLabel
-                    anchors { left: parent.left; right: parent.right }
-                    text: app.source
-                    wrapMode: Text.WordWrap
-                    color: "blue"
-                }
-                onClicked: {
-                    Qt.openUrlExternally(app.source)
-                }
-            }
-        }
+                            height: units.gu(4)
+
+                            Label {
+                                text: hookName
+                                Layout.fillWidth: true
+                            }
+
+                            HookIcon {
+                                Layout.preferredHeight: units.gu(4)
+                                Layout.preferredWidth: units.gu(4)
+                                name: "stock_application"
+                                visible: (hooks & ApplicationItem.HookDesktop)
+                            }
+                            HookIcon {
+                                Layout.preferredHeight: units.gu(4)
+                                Layout.preferredWidth: units.gu(4)
+                                name: "search"
+                                visible: (hooks & ApplicationItem.HookScope)
+                            }
+                            HookIcon {
+                                Layout.preferredHeight: units.gu(4)
+                                Layout.preferredWidth: units.gu(4)
+                                name: "stock_website"
+                                visible: (hooks & ApplicationItem.HookUrls)
+                            }
+                            HookIcon {
+                                Layout.preferredHeight: units.gu(4)
+                                Layout.preferredWidth: units.gu(4)
+                                name: "share"
+                                visible: (hooks & ApplicationItem.HookContentHub)
+                            }
+                            HookIcon {
+                                Layout.preferredHeight: units.gu(4)
+                                Layout.preferredWidth: units.gu(4)
+                                name: "notification"
+                                visible: (hooks & ApplicationItem.HookPushHelper)
+                            }
+                            HookIcon {
+                                Layout.preferredHeight: units.gu(4)
+                                Layout.preferredWidth: units.gu(4)
+                                name: "contact-group"
+                                visible: (hooks & ApplicationItem.HookAccountService)
+                            }
+                        }
+
+                        ListItemLayout {
+                            anchors { left: parent.left; right: parent.right }
+                            anchors.leftMargin: units.gu(-2)
+                            height: units.gu(6)
+                            Icon {
+                                SlotsLayout.position: SlotsLayout.Leading
+                                width: units.gu(4); height: width
+                                name: "security-alert"
+                                visible: apparmorTemplate.indexOf("unconfined") >= 0
+                            }
+
+                            title.text: i18n.tr("AppArmor profile")
+                            subtitle.text: apparmorTemplate || "Ubuntu confined app"
+                            subtitle.color: apparmorTemplate.indexOf("unconfined") >= 0 ? UbuntuColors.red : theme.palette.normal.backgroundSecondaryText
+                            subtitle.maximumLineCount: Number.MAX_VALUE
+                        }
+
+
+                        ListItemLayout {
+                            anchors { left: parent.left; right: parent.right }
+                            anchors.leftMargin: units.gu(-2)
+                            height: units.gu(6)
+                            visible: permissions.length > 0
+
+                            Icon {
+                                property var restrictedPerms: ["bluetooth", "calendar", "contacts", "debug", "history", "music_files", "picture_files", "video_files"]
+                                SlotsLayout.position: SlotsLayout.Leading
+                                width: units.gu(4); height: width
+                                name: "security-alert"
+                                visible: {
+                                    var length = restrictedPerms.length;
+                                    while(length--) {
+                                       if (permissions.indexOf(restrictedPerms[length]) > -1)
+                                           return true
+                                    }
+                                    return false
+                                }
+                            }
+
+                            title.text: i18n.tr("Permissions")
+                            subtitle.maximumLineCount: Number.MAX_VALUE
+                            subtitle.text: {
+                                if (permissions) {
+                                    return permissions.replace("bluetooth", "<font color=\"#ED3146\">bluetooth</font>")
+                                                      .replace("calendar", "<font color=\"#ED3146\">calendar</font>")
+                                                      .replace("contacts", "<font color=\"#ED3146\">contacts</font>")
+                                                      .replace("debug", "<font color=\"#ED3146\">debug</font>")
+                                                      .replace("history", "<font color=\"#ED3146\">history</font>")
+                                                      .replace("music_files_read", "<font color=\"#ED3146\">music_files_read</font>")
+                                                      .replace("picture_files_read", "<font color=\"#ED3146\">music_files_read</font>")
+                                                      .replace("video_files_read", "<font color=\"#ED3146\">music_files_read</font>")
+                                                      .replace("music_files", "<font color=\"#ED3146\">music_files_read</font>")
+                                                      .replace("picture_files", "<font color=\"#ED3146\">music_files_read</font>")
+                                                      .replace("video_files", "<font color=\"#ED3146\">music_files_read</font>")
+                                }
+
+                                return i18n.tr("<i>none required</i>")
+                            }
+                        }
+
+                        ListItemLayout {
+                            anchors { left: parent.left; right: parent.right }
+                            anchors.leftMargin: units.gu(-2)
+                            height: units.gu(6)
+                            visible: readpaths.length > 0
+
+                            Icon {
+                                SlotsLayout.position: SlotsLayout.Leading
+                                width: units.gu(4); height: width
+                                name: "security-alert"
+                                visible: includesUnconfinedLocations(readpaths)
+                            }
+
+                            title.text: i18n.tr("Read paths")
+                            subtitle.text: readpaths || i18n.tr("<i>none</i>")
+                            subtitle.maximumLineCount: Number.MAX_VALUE
+                        }
+
+                        ListItemLayout {
+                            anchors { left: parent.left; right: parent.right }
+                            anchors.leftMargin: units.gu(-2)
+                            height: units.gu(6)
+                            visible: writepaths.length > 0
+                            Icon {
+                                SlotsLayout.position: SlotsLayout.Leading
+                                width: units.gu(4); height: width
+                                name: "security-alert"
+                                visible: includesUnconfinedLocations(writepaths)
+                            }
+
+                            title.text: i18n.tr("Write paths")
+                            subtitle.text: writepaths || i18n.tr("<i>none</i>")
+                            subtitle.maximumLineCount: Number.MAX_VALUE
+                        }
+
+                        Button {
+                            anchors { right: parent.right }
+                            text: "Open"
+                            color: UbuntuColors.green
+                            visible: app.installed &&  (hooks & ApplicationItem.HookDesktop)
+                            onClicked: Qt.openUrlExternally("appid://" + app.appId + "/" + hookName + "/" + app.installedVersion)
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    function printSize(size) {
+        var s
+
+        s = 1024 * 1024 * 1024
+        if (size >= s)
+            // TRANSLATORS: %1 is the size of a file, expressed in GB
+            return i18n.tr("%1 GB").arg((size / s).toFixed(2));
+
+        s = 1024 * 1024
+        if (size >= s)
+            // TRANSLATORS: %1 is the size of a file, expressed in MB
+            return i18n.tr("%1 MB").arg((size / s).toFixed(2));
+
+        s = 1024
+        if (size >= s)
+            // TRANSLATORS: %1 is the size of a file, expressed in kB
+            return i18n.tr("%1 kB").arg(parseInt(size / s));
+
+        // TRANSLATORS: %1 is the size of a file, expressed in byte
+        return i18n.tr("%1 byte").arg(size);
+    }
+
+    function includesUnconfinedLocations(paths) {
+        var p = paths.split(",")
+        var j = 0
+
+        for (var i=0; i < p.length; ++i) {
+            var x = p[i]
+            if (x.match(/[^\w\s]/)) {
+                if (x.indexOf("/home/phablet/.cache/" + app.appId) == -1 && x.indexOf("/home/phablet/.config/" + app.appId) == -1) {
+                    ++j
+                }
+            }
+        }
+
+        return (j > 0)
     }
 }

=== added file 'openstore/CategoriesPage.qml'
--- openstore/CategoriesPage.qml	1970-01-01 00:00:00 +0000
+++ openstore/CategoriesPage.qml	2017-05-08 18:42:06 +0000
@@ -0,0 +1,60 @@
+/*
+ * Copyright (C) 2017 - Stefano Verzegnassi <[e-mail]>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+
+Page {
+    id: categoryPage
+
+    header: PageHeader {
+        title: i18n.tr("Categories")
+        leadingActionBar.actions: Action {
+            iconName: "close"
+            onTriggered: categoryPage.pageStack.removePages(categoryPage)
+        }
+    }
+
+    signal categoryClicked(var name, var code)
+
+    onCategoryClicked: {
+        var pageProps = {
+            title: name,
+            filterPattern: new RegExp(code.toString()),
+            filterProperty: "category"
+        }
+        categoryPage.pageStack.addPageToNextColumn(categoryPage, filteredAppPageComponent, pageProps)
+    }
+
+    ScrollView {
+        anchors.fill: parent
+        anchors.topMargin: categoryPage.header.height
+
+        ListView {
+            id: categoryView
+            anchors.fill: parent
+            model: categories.list
+            delegate: ListItem {
+                onClicked: categoryPage.categoryClicked(modelData, modelData)
+                ListItemLayout {
+                    anchors.centerIn: parent
+                    title.text: modelData
+                    ProgressionSlot {}
+                }
+            }
+        }
+    }
+}

=== added file 'openstore/DiscoverTab.qml'
--- openstore/DiscoverTab.qml	1970-01-01 00:00:00 +0000
+++ openstore/DiscoverTab.qml	2017-05-08 18:42:06 +0000
@@ -0,0 +1,165 @@
+/*
+ * Copyright (C) 2017 - Stefano Verzegnassi <[e-mail]>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+import OpenStore 1.0
+
+ScrollView {
+    id: rootItem
+    anchors.fill: parent
+    anchors.topMargin: parent.header ? parent.header.height : 0
+
+    property var discoverData
+    property string discoverApiEndPoint: "https://open.uappexplorer.com/api/v1/apps/discover"
+    property AppModel storeModel
+
+    signal appDetailsRequired(var appId)
+    signal categoryViewRequired(var name, var categoryCode)
+
+    Component.onCompleted: {
+        var doc = new XMLHttpRequest();
+        doc.onreadystatechange = function() {
+            if (doc.readyState == 4 && doc.status == 200) {
+                var reply = JSON.parse(doc.responseText)
+
+                if (reply.success) {
+                    rootItem.discoverData = reply.data
+                } else {
+                    console.log("Unable to fetch discover data from server (success = false).")
+                }
+            }
+        }
+
+        doc.open("GET", discoverApiEndPoint, true);
+        doc.send();
+    }
+
+    ListView {
+        id: view
+        anchors.fill: parent
+
+        header: AbstractButton {
+            id: highlightAppControl
+            property var appItem: storeModel.app(storeModel.findApp(discoverData.highlighted_id))
+            width: parent.width
+            height: Math.min(units.gu(28), width * 9 / 16)
+
+            onClicked: rootItem.appDetailsRequired(discoverData.highlighted_id)
+
+            Image {
+                anchors.fill: parent
+                anchors.bottomMargin: units.gu(4)
+                source: highlightAppControl.appItem.icon
+                fillMode: Image.PreserveAspectCrop
+            }
+
+            ListItemLayout {
+                anchors.centerIn: parent
+
+                title.text: highlightAppControl.appItem.name
+                title.font.pixelSize: units.gu(3)
+                title.color: "white"
+
+                subtitle.text: highlightAppControl.appItem.tagline || highlightAppControl.appItem.description
+                subtitle.font.pixelSize: units.gu(1.5)
+                subtitle.color: "white"
+            }
+        }
+
+        model: discoverData ? rootItem.discoverData.categories : null
+        delegate: Column {
+            width: parent.width
+            spacing: units.gu(1)
+
+            ListItem {
+                divider.visible: false
+                onClicked: {
+                    if (modelData.referral) {
+                        rootItem.categoryViewRequired(modelData.name, modelData.referral)
+                    }
+                }
+
+                ListItemLayout {
+                    anchors.centerIn: parent
+                    title.text: modelData.name
+                    subtitle.text: modelData.tagline
+
+                    ProgressionSlot {
+                        visible: modelData.referral != ""
+                    }
+                }
+            }
+
+            ListView {
+                anchors { left: parent.left; right: parent.right }
+                leftMargin: units.gu(2)
+                rightMargin: units.gu(2)
+                clip: true
+                height: count > 0 ? units.gu(24) : 0
+                visible: count > 0
+                spacing: units.gu(2)
+                orientation: ListView.Horizontal
+                model: modelData.ids
+                delegate: AbstractButton {
+                    id: appDel
+                    property var appItem: storeModel.app(storeModel.findApp(modelData))
+                    height: parent.height
+                    width: units.gu(16)
+
+                    onClicked: rootItem.appDetailsRequired(modelData)
+
+                    Column {
+                        anchors.fill: parent
+
+                        UbuntuShape {
+                            width: parent.width
+                            height: width
+                            aspect: UbuntuShape.Flat
+                            sourceFillMode: UbuntuShape.PreserveAspectFit
+                            source: Image {
+                                source: appDel.appItem.icon
+                            }
+                        }
+
+                        ListItemLayout {
+                            anchors {
+                                left: parent.left; leftMargin: units.gu(-1)
+                                right: parent.right
+                            }
+
+                            height: units.gu(4)
+                            title {
+                                text: appDel.appItem.name
+                                textSize: Label.Small
+                                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                                maximumLineCount: 2
+                            }
+
+                            subtitle {
+                                text: appDel.appItem.author
+                                textSize: Label.XSmall
+                            }
+
+                            summary.text: appDel.appItem.installed ? appDel.appItem.updateAvailable ? i18n.tr("Update available") : i18n.tr("Installed") : ""
+                            summary.textSize: Label.XSmall
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

=== added file 'openstore/EmptyState.qml'
--- openstore/EmptyState.qml	1970-01-01 00:00:00 +0000
+++ openstore/EmptyState.qml	2017-05-08 18:42:06 +0000
@@ -0,0 +1,74 @@
+/*
+ * Copyright (C) 2014, 2015, 2016 Canonical Ltd
+ *
+ * This file is part of Ubuntu Clock App
+ *
+ * Ubuntu Clock App is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * Ubuntu Clock App is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+
+/*
+ Component which displays an empty state (approved by design). It offers an
+ icon, title and subtitle to describe the empty state.
+*/
+
+Column {
+    id: emptyState
+    spacing: units.gu(2)
+    width: units.gu(36)
+
+    // Public APIs
+    default property alias iconPlaceholder: iconContainer.data
+    property alias iconName: emptyIcon.name
+    property alias title: emptyLabel.text
+    property alias subTitle: emptySublabel.text
+
+    Item {
+        width: childrenRect.width
+        height: childrenRect.height + units.gu(2)
+        Icon {
+            id: emptyIcon
+            height: visible ? units.gu(10) : 0
+            width: visible ? height : 0
+            color: "#BBBBBB"
+            visible: name || source
+        }
+        Row {
+            id: iconContainer
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
+    Label {
+        id: emptyLabel
+        width: parent.width
+        horizontalAlignment: Text.AlignLeft
+        textSize: Label.XLarge
+
+        elide: Text.ElideRight
+        wrapMode: Text.WordWrap
+        maximumLineCount: 2
+    }
+
+    Label {
+        id: emptySublabel
+        width: parent.width
+        horizontalAlignment: Text.AlignLeft
+        textSize: Label.Medium
+
+        elide: Text.ElideRight
+        wrapMode: Text.WordWrap
+    }
+}

=== added file 'openstore/FilteredAppView.qml'
--- openstore/FilteredAppView.qml	1970-01-01 00:00:00 +0000
+++ openstore/FilteredAppView.qml	2017-05-08 18:42:06 +0000
@@ -0,0 +1,108 @@
+/*
+ * Copyright (C) 2015 Michael Zanetti <[e-mail]>
+ * Copyright (C) 2017 Stefano Verzegnassi <[e-mail]>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+
+ScrollView {
+    id: rootItem
+    anchors.fill: parent
+    anchors.topMargin: parent.header ? parent.header.height : 0
+
+    property var filterPattern: new RegExp()
+    property string filterProperty
+
+    property string sortProperty
+    property int sortOrder
+
+    property alias model: sortedFilteredAppModel.model
+    property alias view: view
+
+    property bool showTicks: true
+
+    signal appDetailsRequired(var appId)
+
+    ListView {
+        id: view
+        model: SortFilterModel {
+            id: sortedFilteredAppModel
+
+            filter.pattern: rootItem.filterPattern
+            filter.property: rootItem.filterProperty
+
+            sort.property: rootItem.sortProperty
+            sort.order: rootItem.sortOrder
+        }
+
+        // TODO: Move it in Main.qml or elsewhere
+        onCountChanged: {
+            if (count > 0 && root.appIdToOpen != "") {
+                var index = appModel.findApp(root.appIdToOpen)
+                if (index >= 0) {
+                    pageStack.addPageToNextColumn(mainPage, Qt.resolvedUrl("AppDetailsPage.qml"), {app: appModel.app(index)})
+                    root.appIdToOpen = "";
+                }
+            }
+        }
+
+        delegate: ListItem {
+            height: layout.height + divider.height
+
+            ListItemLayout {
+                id: layout
+                title.text: model.name
+                summary.text: model.tagline
+
+                UbuntuShape {
+                    SlotsLayout.position: SlotsLayout.Leading
+                    aspect: UbuntuShape.Flat
+                    image: Image {
+                        source: model.icon
+                        height: parent.height
+                        width: parent.width
+                    }
+                }
+                Icon {
+                    SlotsLayout.position: SlotsLayout.Trailing
+                    height: units.gu(2)
+                    width: height
+                    implicitHeight: height
+                    implicitWidth: width
+                    visible: model.installed && rootItem.showTicks
+                    name: "tick"
+                    color: model.updateAvailable ? UbuntuColors.orange : UbuntuColors.green
+                }
+
+                ProgressionSlot {}
+            }
+            onClicked: {
+                rootItem.appDetailsRequired(model.appId)
+            }
+        }
+
+        Loader {
+            anchors.centerIn: parent
+            active: view.count == 0
+            sourceComponent: EmptyState {
+                title: rootItem.filterProperty == "category" ? i18n.tr("Nothing here yet") : i18n.tr("No result found.").arg(rootItem.filterPattern)
+                subTitle: rootItem.filterProperty == "category" ? i18n.tr("No app has been released in this department yet.") : i18n.tr("Try with a different search.")
+                iconName: rootItem.filterProperty == "category" ? "ubuntu-store-symbolic" : "search"
+                anchors.centerIn: parent
+            }
+        }
+    }
+}

=== modified file 'openstore/Main.qml'
--- openstore/Main.qml	2016-08-21 10:29:12 +0000
+++ openstore/Main.qml	2017-05-08 18:42:06 +0000
@@ -20,6 +20,7 @@
 import QtQuick.Layouts 1.1
 import Qt.labs.settings 1.0
 import Ubuntu.Content 1.3
+import QtQml.Models 2.1
 
 MainView {
     id: root
@@ -82,6 +83,7 @@
     AppModel {
         id: appModel
         installer: installer
+        onRepositoryListFetched: repoFetchingIndicator.visible = false
     }
 
     ServiceRegistry {
@@ -89,6 +91,31 @@
         clickInstaller: installer
     }
 
+    QtObject {
+        id: categories
+
+        property string categoriesApiEndPoint: "https://open.uappexplorer.com/api/v1/categories"
+        property var list
+
+        Component.onCompleted: {
+            var doc = new XMLHttpRequest();
+            doc.onreadystatechange = function() {
+                if (doc.readyState == 4 && doc.status == 200) {
+                    var reply = JSON.parse(doc.responseText)
+                    if (reply.success) {
+                        list = reply.data
+                    } else {
+                        console.log("Unable to fetch categories from server (success = false).")
+                    }
+                }
+            }
+
+            doc.open("GET", categoriesApiEndPoint, true);
+            doc.send();
+        }
+
+    }
+
     property bool contentHubInstallInProgress: false
     Connections {
         target: ContentHub
@@ -113,54 +140,171 @@
             id: mainPage
             header: PageHeader {
                 title: i18n.tr("Open Store")
+                automaticHeight: false
+
+                leadingActionBar.actions: Action {
+                    iconName: "navigation-menu"
+                    text: i18n.tr("Categories")
+                    onTriggered: mainPage.pageStack.addPageToCurrentColumn(mainPage, Qt.resolvedUrl("CategoriesPage.qml"), {})
+                }
+
+                trailingActionBar.actions: Action {
+                    iconName: "find"
+                    text: i18n.tr("Search")
+                    onTriggered: {
+                        mainPage.pageStack.addPageToCurrentColumn(mainPage, searchPageComponent, {})
+                    }
+                }
+
+                sections {
+                    model: [ i18n.tr("Discover"), i18n.tr("My Apps") ]
+                    selectedIndex: 0   // Should always match "Discover"
+                    onSelectedIndexChanged: {
+                        // Current section has changed, if there was an opened page
+                        // in the second column, it is not anymore related to the
+                        // new current section. Remove it.
+                        mainPage.pageStack.removePages(mainPage)
+                    }
+                }
             }
 
-
             ListView {
-                anchors.fill: parent
-                anchors.topMargin: mainPage.header.height
+                id: view
+                anchors {
+                    top: mainPage.header.bottom
+                    bottom: parent.bottom
+                    left: parent.left
+                    right: parent.right
+                }
+
+                clip: true
+                orientation: ListView.Horizontal
+                interactive: false
+                snapMode: ListView.SnapOneItem
+                highlightMoveDuration: 0
+                currentIndex: mainPage.header.sections.selectedIndex
+
+                model: ObjectModel {
+                    Loader {
+                        id: discoverTabLoader
+                        width: view.width
+                        height: view.height
+                        asynchronous: true
+                        source: Qt.resolvedUrl("DiscoverTab.qml")
+
+                        active: false
+                        Connections {
+                            target: appModel
+                            onRepositoryListFetched: discoverTabLoader.active = true
+                        }
+
+                        onLoaded: {
+                            item.storeModel = appModel
+
+                            item.appDetailsRequired.connect(function(appId) {
+                                var pageProps = {
+                                    app: appModel.app(appModel.findApp(appId))
+                                }
+                                mainPage.pageStack.addPageToNextColumn(mainPage, Qt.resolvedUrl("AppDetailsPage.qml"), pageProps)
+                            })
+
+                            item.categoryViewRequired.connect(function(name, code) {
+                                var pageProps = {
+                                    title: name,
+                                    filterPattern: new RegExp(code.toString()),
+                                    filterProperty: "category"
+                                }
+
+                                mainPage.pageStack.removePages(mainPage)
+                                mainPage.pageStack.addPageToCurrentColumn(mainPage, filteredAppPageComponent, pageProps)
+                            })
+                        }
+                    }
+                    Loader {
+                        width: view.width
+                        height: view.height
+                        asynchronous: true
+                        source: Qt.resolvedUrl("FilteredAppView.qml")
+
+                        onLoaded: {
+                            item.model = appModel
+
+                            item.filterProperty = "installed"
+                            item.filterPattern = new RegExp("true")
+
+                            item.sortProperty = "updateAvailable"
+                            item.sortOrder = Qt.DescendingOrder
+
+                            item.view.section.property = "updateAvailable"
+                            item.view.section.delegate = updateDivider
+
+                            item.showTicks = false
+
+                            item.appDetailsRequired.connect(function(appId) {
+                                var pageProps = {
+                                    app: appModel.app(appModel.findApp(appId))
+                                }
+                                mainPage.pageStack.addPageToNextColumn(mainPage, Qt.resolvedUrl("AppDetailsPage.qml"), pageProps)
+                            })
+                        }
+
+                        Component {
+                            id: updateDivider
+                            SectionDivider {
+                                text: section == "true" ? i18n.tr("Available updates") : i18n.tr("Installed apps")
+                            }
+                        }
+                    }
+                }
+            }
+
+            Column {
+                id: repoFetchingIndicator
+                anchors.centerIn: parent
+                anchors.verticalCenterOffset: mainPage.header.height * 0.4
+                spacing: units.gu(1)
+                ActivityIndicator {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    running: visible
+                }
+                Label {
+                    textSize: Label.Small
+                    text: i18n.tr("Fetching package list...")
+                }
+            }
+        }
+    }
+
+    Component {
+        id: searchPageComponent
+
+        SearchPage {
+            id: searchPage
+            model: appModel
+
+            onAppDetailsRequired: {
+                var pageProps = { app: appModel.app(appModel.findApp(appId)) }
+                searchPage.pageStack.addPageToNextColumn(searchPage, Qt.resolvedUrl("AppDetailsPage.qml"), pageProps)
+            }
+        }
+    }
+
+    Component {
+        id: filteredAppPageComponent
+        Page {
+            id: filteredAppPage
+            property alias filterPattern: filteredAppView.filterPattern
+            property alias filterProperty: filteredAppView.filterProperty
+            header: PageHeader {
+                title: filteredAppPage.title
+                automaticHeight: false
+            }
+            FilteredAppView {
+                id: filteredAppView
                 model: appModel
-
-                onCountChanged: {
-                    if (count > 0 && root.appIdToOpen != "") {
-                        var index = appModel.findApp(root.appIdToOpen)
-                        if (index >= 0) {
-                            pageStack.addPageToNextColumn(mainPage, Qt.resolvedUrl("AppDetailsPage.qml"), {app: appModel.app(index)})
-                            root.appIdToOpen = "";
-                        }
-                    }
-                }
-
-                delegate: ListItem {
-                    height: layout.height + divider.height
-
-                    ListItemLayout {
-                        id: layout
-                        title.text: model.name
-                        summary.text: model.tagline
-
-                        UbuntuShape {
-                            SlotsLayout.position: SlotsLayout.Leading
-                            image: Image {
-                                source: model.icon
-                                height: parent.height
-                                width: parent.width
-                            }
-                        }
-                        Icon {
-                            SlotsLayout.position: SlotsLayout.Trailing
-                            height: units.gu(2)
-                            width: height
-                            implicitHeight: height
-                            implicitWidth: width
-                            visible: model.installed
-                            name: "tick"
-                            color: model.installedVersion >= model.version ? UbuntuColors.green : UbuntuColors.orange
-                        }
-                    }
-                    onClicked: {
-                        pageStack.addPageToNextColumn(mainPage, Qt.resolvedUrl("AppDetailsPage.qml"), {app: appModel.app(index)})
-                    }
+                onAppDetailsRequired: {
+                    var pageProps = { app: appModel.app(appModel.findApp(appId)) }
+                    filteredAppPage.pageStack.addPageToNextColumn(filteredAppPage, Qt.resolvedUrl("AppDetailsPage.qml"), pageProps)
                 }
             }
         }

=== added file 'openstore/SearchPage.qml'
--- openstore/SearchPage.qml	1970-01-01 00:00:00 +0000
+++ openstore/SearchPage.qml	2017-05-08 18:42:06 +0000
@@ -0,0 +1,87 @@
+/*
+ * Copyright (C) 2017 - Stefano Verzegnassi <[e-mail]>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+
+Page {
+    id: searchPage
+
+    property alias model: view.model
+    property alias query: searchField.text
+
+    signal appDetailsRequired(var appId)
+
+    header: PageHeader {
+        title: i18n.tr("Search")
+        automaticHeight: false
+        leadingActionBar.actions: null
+        trailingActionBar {
+            anchors.rightMargin: 0
+            delegate: TextualButtonStyle {}
+
+            actions: Action {
+                text: i18n.tr("Cancel")
+
+                onTriggered: {
+                    // Clear the search
+                    searchField.text = ""
+                    searchPage.pageStack.removePages(searchPage)
+                }
+            }
+        }
+
+        contents: TextField {
+            id: searchField
+            anchors {
+                left: parent.left
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+
+            primaryItem: Icon {
+                height: units.gu(2); width: height
+                name: "search"
+            }
+
+            placeholderText: i18n.tr("search in OpenStore...")
+            onTextChanged: view.search(text)
+            Component.onCompleted: view.search(text)
+
+            // Disable predictive text
+            inputMethodHints: Qt.ImhNoPredictiveText
+
+            onVisibleChanged: forceActiveFocus()
+        }
+    }
+
+    FilteredAppView {
+        id: view
+
+        // FIXME: TODO: Use "number of downloads" or "last updated" when they'll be available
+        sortOrder: Qt.AscendingOrder
+        sortProperty: "name"
+        filterProperty: "searchHackishString"
+        //filterPattern: new RegExp("$a") // A kind way to say SortFilterModel not to match anything until searchField is filled.
+
+        function search(text) {
+            //view.filterPattern = text ? new RegExp(text, 'i') : new RegExp("$a")
+            view.filterPattern = new RegExp(text, 'i')
+        }
+
+        onAppDetailsRequired: searchPage.appDetailsRequired(appId)
+    }
+}

=== added file 'openstore/SectionDivider.qml'
--- openstore/SectionDivider.qml	1970-01-01 00:00:00 +0000
+++ openstore/SectionDivider.qml	2017-05-08 18:42:06 +0000
@@ -0,0 +1,52 @@
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+
+Rectangle {
+    id: rootItem
+
+    property alias text: sectionLabel.text
+    property alias iconName: icon.name
+
+    anchors { left: parent.left; right: parent.right }
+    height: units.gu(4)
+
+    color: theme.palette.normal.foreground
+
+    Row {
+        anchors {
+            left: parent.left
+            right: parent.right
+            margins: units.gu(2)
+            verticalCenter: parent.verticalCenter
+        }
+        spacing: units.gu(1)
+
+        Icon {
+            id: icon
+            height: units.gu(2)
+            width: name ? units.gu(2) : 0
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Label {
+            id: sectionLabel
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+
+    Rectangle {
+        anchors {
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+
+        height: units.dp(2)
+        gradient: Gradient {
+            GradientStop { position: 0.0;  color: Qt.rgba(0, 0, 0, 0.1) }
+            GradientStop { position: 0.49; color: Qt.rgba(0, 0, 0, 0.1) }
+            GradientStop { position: 0.5;  color: Qt.rgba(1, 1, 1, 0.4) }
+            GradientStop { position: 1.0;  color: Qt.rgba(1, 1, 1, 0.4) }
+        }
+    }
+}

=== added file 'openstore/TextualButtonStyle.qml'
--- openstore/TextualButtonStyle.qml	1970-01-01 00:00:00 +0000
+++ openstore/TextualButtonStyle.qml	2017-05-08 18:42:06 +0000
@@ -0,0 +1,67 @@
+/*
+ * Copyright (C) 2016 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+
+Component {
+    id: textualButton
+    AbstractButton {
+        id: button
+        action: modelData
+        width: layout.width + units.gu(4)
+        height: parent.height
+        Rectangle {
+            color: UbuntuColors.slate
+            opacity: 0.1
+            anchors.fill: parent
+            visible: button.pressed
+        }
+        Row {
+            id: layout
+            anchors.centerIn: parent
+            spacing: units.gu(1)
+            Icon {
+                anchors.verticalCenter: parent.verticalCenter
+                width: visible ? units.gu(2) : 0
+                height: width
+                name: action.iconName
+                source: action.iconSource
+                visible: (name != "") || (source != "")
+                color: {
+                    if (button.enabled)
+                        return text === i18n.tr("Pick") ? theme.palette.selected.backgroundText : theme.palette.normal.backgroundText
+
+                    return theme.palette.disabled.backgroundText
+                }
+            }
+            Label {
+                anchors.verticalCenter: parent.verticalCenter
+                text: action.text
+                font.weight: text === i18n.tr("Pick") ? Font.Normal : Font.Light
+                // Hide text from overflow button of ActionBar
+                visible: text !== "More"
+                width: visible ? paintedWidth : 0
+                color: {
+                    if (button.enabled)
+                        return text === i18n.tr("Pick") ? theme.palette.selected.backgroundText : theme.palette.normal.backgroundText
+
+                    return theme.palette.disabled.backgroundText
+                }
+            }
+        }
+    }
+}

=== modified file 'openstore/appmodel.cpp'
--- openstore/appmodel.cpp	2016-08-21 10:29:12 +0000
+++ openstore/appmodel.cpp	2017-05-08 18:42:06 +0000
@@ -49,6 +49,8 @@
     switch (role) {
     case RoleName:
         return m_list.at(index.row())->name();
+    case RoleAppId:
+        return m_list.at(index.row())->appId();
     case RoleIcon:
         return m_list.at(index.row())->icon();
     case RoleAuthor:
@@ -57,6 +59,8 @@
         return m_list.at(index.row())->tagline();
     case RoleDescription:
         return m_list.at(index.row())->description();
+    case RoleCategory:
+        return m_list.at(index.row())->category();
     case RoleScreenshots:
         return m_list.at(index.row())->screenshots();
     case RoleChangelog:
@@ -69,8 +73,12 @@
         return m_list.at(index.row())->installed();
     case RoleInstalledVersion:
         return m_list.at(index.row())->installedVersion();
+    case RoleUpdateAvailable:
+        return bool(m_list.at(index.row())->installedVersion() < m_list.at(index.row())->version());
     case RoleMaintainer:
         return m_list.at(index.row())->maintainer();
+    case RoleSearchHackishString:
+        return QString(m_list.at(index.row())->name()) + QString(m_list.at(index.row())->appId()) + QString(m_list.at(index.row())->author());
     }
     return QVariant();
 }
@@ -79,17 +87,21 @@
 {
     QHash<int, QByteArray> roles;
     roles.insert(RoleName, "name");
+    roles.insert(RoleAppId, "appId");
     roles.insert(RoleIcon, "icon");
     roles.insert(RoleAuthor, "author");
     roles.insert(RoleTagline, "tagline");
     roles.insert(RoleDescription, "description");
+    roles.insert(RoleCategory, "category");
     roles.insert(RoleScreenshots, "screenshots");
     roles.insert(RoleChangelog, "changelog");
     roles.insert(RolePackageUrl, "packageUrl");
     roles.insert(RoleVersion, "version");
     roles.insert(RoleInstalled, "installed");
     roles.insert(RoleInstalledVersion, "installedVersion");
+    roles.insert(RoleUpdateAvailable, "updateAvailable");
     roles.insert(RoleMaintainer, "maintainer");
+    roles.insert(RoleSearchHackishString, "searchHackishString");
     return roles;
 }
 
@@ -199,6 +211,7 @@
         item->setMaintainer(packageMap.value("maintainer_name").toString());
         item->setTagline(packageMap.value("tagline").toString());
         item->setDescription(packageMap.value("description").toString());
+        item->setCategory(packageMap.value("category").toString());
         item->setScreenshots(packageMap.value("screenshots").toStringList());
         item->setChangelog(packageMap.value("changelog").toString());
         item->setVersion(packageMap.value("version").toString());
@@ -257,6 +270,8 @@
         m_list.append(item);
     }
     endResetModel();
+
+    Q_EMIT repositoryListFetched();
 }
 
 void AppModel::buildInstalledClickList()

=== modified file 'openstore/appmodel.h'
--- openstore/appmodel.h	2016-08-21 10:29:12 +0000
+++ openstore/appmodel.h	2017-05-08 18:42:06 +0000
@@ -16,6 +16,7 @@
     Q_PROPERTY(QString author READ author CONSTANT)
     Q_PROPERTY(QString tagline READ tagline CONSTANT)
     Q_PROPERTY(QString description READ description CONSTANT)
+    Q_PROPERTY(QString category READ category CONSTANT)
     Q_PROPERTY(QStringList screenshots READ screenshots CONSTANT)
     Q_PROPERTY(QString changelog READ changelog CONSTANT)
     Q_PROPERTY(QString version READ version CONSTANT)
@@ -74,6 +75,9 @@
     QString description() const { return m_description; }
     void setDescription(const QString &description) { m_description = description; }
 
+    QString category() const { return m_category; }
+    void setCategory(const QString &category) { m_category = category; }
+
     QStringList screenshots() const { return m_screenshots; }
     void setScreenshots(const QStringList &screenshots) { m_screenshots = screenshots; }
 
@@ -123,6 +127,7 @@
     QString m_author;
     QString m_tagline;
     QString m_description;
+    QString m_category;
     QStringList m_screenshots;
     QString m_changelog;
     QString m_packageUrl;
@@ -144,17 +149,21 @@
 public:
     enum Roles {
         RoleName,
+        RoleAppId,
         RoleIcon,
         RoleAuthor,
         RoleTagline,
         RoleDescription,
+        RoleCategory,
         RoleScreenshots,
         RoleChangelog,
         RolePackageUrl,
         RoleVersion,
         RoleInstalled,
         RoleInstalledVersion,
-        RoleMaintainer
+        RoleUpdateAvailable,
+        RoleMaintainer,
+        RoleSearchHackishString
     };
 
     explicit AppModel(QObject *parent = 0);
@@ -182,6 +191,7 @@
 
 Q_SIGNALS:
     void installerChanged();
+    void repositoryListFetched();
 
 private:
     QList<ApplicationItem*> m_list;

=== modified file 'openstore/openstore.qrc'
--- openstore/openstore.qrc	2015-09-08 21:41:14 +0000
+++ openstore/openstore.qrc	2017-05-08 18:42:06 +0000
@@ -3,5 +3,12 @@
         <file>Main.qml</file>
         <file>AppDetailsPage.qml</file>
         <file>HookIcon.qml</file>
+        <file>DiscoverTab.qml</file>
+        <file>CategoriesPage.qml</file>
+        <file>FilteredAppView.qml</file>
+        <file>EmptyState.qml</file>
+        <file>SectionDivider.qml</file>
+        <file>SearchPage.qml</file>
+        <file>TextualButtonStyle.qml</file>
     </qresource>
 </RCC>