From 749aba93fe3b266796466fdb2e7888067f8e30f2 Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Mon, 25 Nov 2019 23:28:00 +0100
Subject: [PATCH 1/6] Propagate API changes + improve semantics before actually
 working on app categories implementation

---
 src/js/yunohost/controllers/apps.js           | 159 +++++++++---------
 .../{app_list_install.ms => app_catalog.ms}   |   6 +-
 src/views/app/app_info.ms                     |   4 +-
 src/views/app/app_install.ms                  |   2 +-
 src/views/app/app_list.ms                     |   4 +-
 5 files changed, 86 insertions(+), 89 deletions(-)
 rename src/views/app/{app_list_install.ms => app_catalog.ms} (95%)

diff --git a/src/js/yunohost/controllers/apps.js b/src/js/yunohost/controllers/apps.js
index 17c91e10..dacd8ef1 100644
--- a/src/js/yunohost/controllers/apps.js
+++ b/src/js/yunohost/controllers/apps.js
@@ -10,7 +10,7 @@
 
     // List installed apps
     app.get('#/apps', function (c) {
-        c.api('GET', '/apps?installed', {}, function(data) {
+        c.api('GET', '/apps?full', {}, function(data) {
             var apps = data['apps'];
             c.arraySortById(apps);
             c.view('app/app_list', {apps: apps});
@@ -107,101 +107,98 @@
         }
     }
 
-    // List available apps
-    app.get('#/apps/install', function (c) {
-        c.api('GET', '/apps', {}, function (data) {
-            c.api('GET', '/apps?raw', {}, function (dataraw) {
-                var apps = []
-                $.each(data['apps'], function(k, v) {
-                    app = dataraw[v['id']];
-                    app.level = parseInt(app.level);
+    // Display app catalog
+    app.get('#/apps/catalog', function (c) {
+        c.api('GET', '/appscatalog?full&with_categories', {}, function (data) {
+            var apps = []
+            $.each(data['apps'], function(name, app) {
 
-                    if (app.high_quality && app.level > 7)
-                    {
-                        app.state = "high-quality";
-                    }
-                    if ( app.maintained === false )
-                    {
-                        app.maintained = "orphaned";
-                    }
-                    else if ( app.maintained === true )
-                    {
-                        app.maintained = "maintained";
-                    }
+                // Ignore not working apps
+                if (app.state === 'notworking') { return; }
 
-                    app.manifest.maintainer = extractMaintainer(app.manifest);
-                    var isWorking = (app.state === 'working' || app.state === "high-quality") && app.level > 0;
+                app.id = app.manifest.id;
+                app.level = parseInt(app.level);
 
-                    // Keep only the first instance of each app and remove not working apps
-                    if (!v['id'].match(/__[0-9]{1,5}$/) && (app.state !== 'notworking')) {
+                if (app.high_quality && app.level > 7)
+                {
+                    app.state = "high-quality";
+                }
+                if ( app.maintained === false )
+                {
+                    app.maintained = "orphaned";
+                }
+                else if ( app.maintained === true )
+                {
+                    app.maintained = "maintained";
+                }
 
-                        app.installable = (!v.installed || app.manifest.multi_instance)
-                        app.levelFormatted = isNaN(app.level) ? '?' : app.level;
+                app.manifest.maintainer = extractMaintainer(app.manifest);
+                var isWorking = (app.state === 'working' || app.state === "high-quality") && app.level > 0;
 
-                        app.levelColor = levelToColor(app.level);
-                        app.stateColor = stateToColor(app.state);
-                        app.maintainedColor = maintainedStateToColor(app.maintained);
-                        app.installColor = combineColors(app.stateColor, app.levelColor);
+                app.installable = (!app.installed || app.manifest.supports_multi_instance)
+                app.levelFormatted = isNaN(app.level) ? '?' : app.level;
 
-                        app.updateDate = app.lastUpdate * 1000 || 0;
-                        app.isSafe = (app.installColor !== 'danger');
-                        app.isWorking = isWorking ? "isworking" : "notFullyWorking";
-                        app.isHighQuality = (app.state === "high-quality") ? "isHighQuality" : "";
-                        app.decentQuality = (app.level > 4)?"decentQuality":"badQuality";
+                app.levelColor = levelToColor(app.level);
+                app.stateColor = stateToColor(app.state);
+                app.maintainedColor = maintainedStateToColor(app.maintained);
+                app.installColor = combineColors(app.stateColor, app.levelColor);
 
-                        jQuery.extend(app, v);
-                        apps.push(app);
-                    }
+                app.updateDate = app.lastUpdate * 1000 || 0;
+                app.isSafe = (app.installColor !== 'danger');
+                app.isWorking = isWorking ? "isworking" : "notFullyWorking";
+                app.isHighQuality = (app.state === "high-quality") ? "isHighQuality" : "";
+                app.decentQuality = (app.level > 4)?"decentQuality":"badQuality";
+
+                apps.push(app);
+            });
+
+            // Sort app list
+            c.arraySortById(apps);
+
+            // setup filtering of apps once the view is loaded
+            function  setupFilterEvents () {
+                // Uses plugin isotope to filter apps (we could had ordering to)
+                var cardGrid = jQuery('.grid').isotope({
+                  itemSelector: '.app-card',
+                  layoutMode: 'fitRows',
+                  transitionDuration: 200
                 });
 
-                // Sort app list
-                c.arraySortById(apps);
+                filterByClassAndName = function () {
+                  var input = jQuery("#filter-app-cards").val().toLowerCase();
+                  var inputMatch = (jQuery(this).find('.app-title').text().toLowerCase().indexOf(input) > -1);
 
-                // setup filtering of apps once the view is loaded
-                function  setupFilterEvents () {
-                    // Uses plugin isotope to filter apps (we could had ordering to)
-                    var cardGrid = jQuery('.grid').isotope({
-                      itemSelector: '.app-card',
-                      layoutMode: 'fitRows',
-                      transitionDuration: 200
-                    });
+                  var filterClass = jQuery("#dropdownFilter").attr("data-filter");
+                  var classMatch = (filterClass === '*') ? true : jQuery(this).hasClass(filterClass);
+                  return inputMatch && classMatch;
+                },
 
-                    filterByClassAndName = function () {
-                      var input = jQuery("#filter-app-cards").val().toLowerCase();
-                      var inputMatch = (jQuery(this).find('.app-title').text().toLowerCase().indexOf(input) > -1);
+                // Default filter is 'decent quality apps'
+                cardGrid.isotope({ filter: '.decentQuality' });
 
-                      var filterClass = jQuery("#dropdownFilter").attr("data-filter");
-                      var classMatch = (filterClass === '*') ? true : jQuery(this).hasClass(filterClass);
-                      return inputMatch && classMatch;
-                    },
+                jQuery('.dropdownFilter').on('click', function() {
+                    // change dropdown label
+                    jQuery('#app-cards-list-filter-text').text(jQuery(this).find('.menu-item').text());
+                     // change filter attribute
+                    jQuery('#dropdownFilter').attr("data-filter", jQuery(this).attr("data-filter"));
+                    // filter !
+                    cardGrid.isotope({ filter: filterByClassAndName });
+                });
 
-                    // Default filter is 'decent quality apps'
-                    cardGrid.isotope({ filter: '.decentQuality' });
+                jQuery("#filter-app-cards").on("keyup", function() {
+                    cardGrid.isotope({ filter: filterByClassAndName });
+                });
+            };
 
-                    jQuery('.dropdownFilter').on('click', function() {
-                        // change dropdown label
-                        jQuery('#app-cards-list-filter-text').text(jQuery(this).find('.menu-item').text());
-                         // change filter attribute
-                        jQuery('#dropdownFilter').attr("data-filter", jQuery(this).attr("data-filter"));
-                        // filter !
-                        cardGrid.isotope({ filter: filterByClassAndName });
-                    });
+            // render
+            c.view('app/app_catalog', {apps: apps}, setupFilterEvents);
 
-                    jQuery("#filter-app-cards").on("keyup", function() {
-                        cardGrid.isotope({ filter: filterByClassAndName });
-                    });
-                };
-
-                // render
-                c.view('app/app_list_install', {apps: apps}, setupFilterEvents);
-
-            });
         });
     });
 
     // Get app information
     app.get('#/apps/:app', function (c) {
-        c.api('GET', '/apps/'+c.params['app']+'?raw', {}, function(data) {
+        c.api('GET', '/apps/'+c.params['app']+'?full', {}, function(data) {
         c.api('GET', '/users/permissions', {}, function(data_permissions) {
 
             // Permissions
@@ -506,9 +503,9 @@
 
     // App installation form
     app.get('#/apps/install/:app', function (c) {
-        c.api('GET', '/apps?raw', {}, function(data) {
+        c.api('GET', '/appscatalog?full', {}, function(data) {
             var app_name = c.params["app"];
-            var app_infos = data[app_name];
+            var app_infos = data["apps"][app_name];
             if (app_infos['state'] === "validated")
             {
                 app_infos['state'] = "official";
@@ -535,7 +532,7 @@
             {
                 c.appInstallForm(
                     c.params['app'],
-                    data[c.params['app']].manifest,
+                    app_infos.manifest,
                     c.params
                 );
             }
@@ -622,7 +619,7 @@
 
     // Get app change label page
     app.get('#/apps/:app/changelabel', function (c) {
-        c.api('GET', '/apps/'+c.params['app']+'?raw', {}, function(app_data) {
+        c.api('GET', '/apps/'+c.params['app']+'?full', {}, function(app_data) {
             data = {
                 id: c.params['app'],
                 label: app_data.settings.label,
@@ -641,7 +638,7 @@
 
     // Get app change URL page
     app.get('#/apps/:app/changeurl', function (c) {
-            c.api('GET', '/apps/'+c.params['app']+'?raw', {}, function(app_data) {
+            c.api('GET', '/apps/'+c.params['app']+'?full', {}, function(app_data) {
                 c.api('GET', '/domains', {}, function(domain_data) {
 
                 // Display a list of available domains
diff --git a/src/views/app/app_list_install.ms b/src/views/app/app_catalog.ms
similarity index 95%
rename from src/views/app/app_list_install.ms
rename to src/views/app/app_catalog.ms
index e0ce26b0..e1754446 100644
--- a/src/views/app/app_list_install.ms
+++ b/src/views/app/app_catalog.ms
@@ -28,13 +28,13 @@
 {{#apps}}
   <div class="app-card panel panel-default {{status}} {{state}} {{isWorking}} {{isHighQuality}} {{decentQuality}} {{level}}-level">
         <div class="panel-body">
-            <h2 class="app-title">{{name}}</h2>
+            <h2 class="app-title">{{manifest.name}}</h2>
             <div class="category">
               <span class="label label-{{stateColor}} label-as-badge app-state" title="{{t (concat 'app_state_' state '_explanation') }}">{{t (concat 'app_state_' state) }}</span>
               <a target="_BLANK" href="https://yunohost.org/#/packaging_apps_levels"><span class="label label-{{levelColor}} label-as-badge app-level" title="{{t 'app_level'}}">{{t 'level'}} {{levelFormatted}}</span></a>
               <span class="label label-{{maintainedColor}} label-as-badge maintained-status" title="{{t (concat maintained '_details') }}"> {{t maintained}}</span>
             </div>
-            <div class="app-card-desc">{{description}}</div>
+            <div class="app-card-desc">{{manifest.description}}</div>
         </div>
             <div class="app-card-date-maintainer">
                 <i class="fa-refresh"></i> {{formatDate updateDate day="numeric" month="long" year="numeric"}} -
@@ -48,7 +48,7 @@
                     <i class="fa-book"></i> Readme
                 </a>
                 {{#installable}}
-                <a href="#/apps/install/{{id}}" type="button" role="button" class="btn btn-{{installColor}} col-xs-4 active">
+                <a href="#/apps/install/{{manifest.id}}" type="button" role="button" class="btn btn-{{installColor}} col-xs-4 active">
                     <i class="fa-plus"></i> {{t 'install'}}{{^isSafe}} <i class="fa-warning"></i>{{/isSafe}}
                 </a>
                 {{/installable}}
diff --git a/src/views/app/app_info.ms b/src/views/app/app_info.ms
index 7c972a0e..b8da64da 100644
--- a/src/views/app/app_info.ms
+++ b/src/views/app/app_info.ms
@@ -22,7 +22,7 @@
             <dt>{{t 'version'}}</dt>
             <dd>{{version}}</dd>
             <dt>{{t 'multi_instance'}}</dt>
-            <dd>{{manifest.multi_instance}}</dd>
+            <dd>{{supports_multi_instance}}</dd>
             <dt>{{t 'install_time'}}</dt>
             <dd>{{formatTime install_time day="numeric" month="long" year="numeric" hour="numeric" minute="numeric"}}</dd>
             {{#if settings.domain}}
@@ -64,7 +64,7 @@
         <hr>
         <div class="container">
             <p>{{t 'app_info_changeurl_desc' settings.domain}}</p>
-            {{#if change_url}}
+            {{#if supports_change_url}}
                 <a href="#/apps/{{settings.id}}/changeurl" role="button" class="btn btn-info slide">
                     <span class="fa-exchange"></span> {{t 'app_change_url'}}
                 </a>
diff --git a/src/views/app/app_install.ms b/src/views/app/app_install.ms
index dcf8e017..05dcfb46 100644
--- a/src/views/app/app_install.ms
+++ b/src/views/app/app_install.ms
@@ -18,7 +18,7 @@
             <dt>{{t 'id'}}</dt>
             <dd>{{id}}</dd>
             <dt>{{t 'description'}}</dt>
-            <dd>{{description}}</dd>
+            <dd>{{manifest.description}}</dd>
             {{#displayLicense}}
             <dt>{{t 'license'}}</dt>
             <dd>{{manifest.license}}</dd>
diff --git a/src/views/app/app_list.ms b/src/views/app/app_list.ms
index 2840f2a9..bf658106 100644
--- a/src/views/app/app_list.ms
+++ b/src/views/app/app_list.ms
@@ -4,7 +4,7 @@
 </div>
 
 <div class="actions-group">
-    <a role="button" href="#/apps/install" class="btn btn-success slide">
+    <a role="button" href="#/apps/catalog" class="btn btn-success slide">
         <span class="fa-plus"></span> {{t 'install'}}
     </a>
 </div>
@@ -16,7 +16,7 @@
     <a href="#/apps/{{id}}" class="list-group-item slide" title="{{t 'infos'}}">
         <span class="fa-chevron-right pull-right"></span>
         <h2 class="list-group-item-heading">
-            {{label}} <small>{{name}}</small>
+            {{settings.label}} <small>{{name}}</small>
         </h2>
         <p class="list-group-item-text">{{description}}</p>
     </a>

From 8ec78160decb231344e9793cddb9dba90e620b66 Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Tue, 26 Nov 2019 00:38:02 +0100
Subject: [PATCH 2/6] First rendering of the categories, still drafty

---
 src/css/style.less                  | 22 +++++++++++++++++-----
 src/js/yunohost/controllers/apps.js | 10 ++++++++--
 src/views/app/app_catalog.ms        | 15 ++++++++++++++-
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/css/style.less b/src/css/style.less
index 3c8322c2..0eaa0f21 100644
--- a/src/css/style.less
+++ b/src/css/style.less
@@ -631,8 +631,12 @@ input[type='radio'].nice-radio {
     background-color: darkorchid;
 }
 
+.app-category-card {
+    text-align: center;
+}
+
 // only one card for small screens
-.app-card {
+.app-card, .app-category-card {
 	width: 100%;
 	.btn-group {
 		width: 100%;
@@ -654,12 +658,12 @@ input[type='radio'].nice-radio {
 }
 
 
-.app-title {
+.app-title, .app-category-title {
     margin-top: 5px;
     font-weight: 600;
 }
 
-.app-card-desc {
+.app-card-desc, .app-category-card-desc {
     height: 6rem;
     overflow: hidden;
 }
@@ -697,6 +701,14 @@ input[type='radio'].nice-radio {
     }
 }
 
+.app-category-card .panel-body {
+    padding: 2em;
+    height: 10em;
+}
+
+.app-category-title {
+    line-height: 0.5em;
+}
 
 /** Groups View **/
 #view-groups {
@@ -806,7 +818,7 @@ input[type='radio'].nice-radio {
     }
 
     // display 2 cards between 640 and 992px
-    .app-card {
+    .app-card, .app-category-card {
       width: 47.9%;
       margin: 1%;
     }
@@ -908,7 +920,7 @@ input[type='radio'].nice-radio {
 
 // bootstrap breakpoint for large screen is 992px
 @media screen and (min-width: 992px) {
-    .app-card {
+    .app-card, .app-category-card {
       // display 3 cards by row
       width: 31.3%;
       margin: 1%;
diff --git a/src/js/yunohost/controllers/apps.js b/src/js/yunohost/controllers/apps.js
index dacd8ef1..694ca9f6 100644
--- a/src/js/yunohost/controllers/apps.js
+++ b/src/js/yunohost/controllers/apps.js
@@ -158,12 +158,18 @@
             // setup filtering of apps once the view is loaded
             function  setupFilterEvents () {
                 // Uses plugin isotope to filter apps (we could had ordering to)
-                var cardGrid = jQuery('.grid').isotope({
+                var cardGrid = jQuery('#apps').isotope({
                   itemSelector: '.app-card',
                   layoutMode: 'fitRows',
                   transitionDuration: 200
                 });
 
+                var categoryGrid = jQuery('#app-categories').isotope({
+                  itemSelector: '.app-category-card',
+                  layoutMode: 'fitRows',
+                  transitionDuration: 200
+                });
+
                 filterByClassAndName = function () {
                   var input = jQuery("#filter-app-cards").val().toLowerCase();
                   var inputMatch = (jQuery(this).find('.app-title').text().toLowerCase().indexOf(input) > -1);
@@ -191,7 +197,7 @@
             };
 
             // render
-            c.view('app/app_catalog', {apps: apps}, setupFilterEvents);
+            c.view('app/app_catalog', {apps: apps, categories: data["categories"]}, setupFilterEvents);
 
         });
     });
diff --git a/src/views/app/app_catalog.ms b/src/views/app/app_catalog.ms
index e1754446..4d444f0d 100644
--- a/src/views/app/app_catalog.ms
+++ b/src/views/app/app_catalog.ms
@@ -24,7 +24,20 @@
 
 <div class="separator"></div>
 
-<div class="list-group grid">
+<div id="app-categories" class="list-group grid">
+  {{#categories}}
+  <div class="app-category-card panel panel-default">
+        <div class="panel-body">
+            <h2 class="app-category-title"><span class="fa-fw fa-{{icon}}"></span> {{title}}</h2>
+            <h3 class="app-category-card-desc">{{description}}</h3>
+        </div>
+  </div>
+  {{/categories}}
+</div>
+
+<div class="separator"></div>
+
+<div id="apps" class="list-group grid">
 {{#apps}}
   <div class="app-card panel panel-default {{status}} {{state}} {{isWorking}} {{isHighQuality}} {{decentQuality}} {{level}}-level">
         <div class="panel-body">

From 2e8f2990a297e221ca08b7bf5ca1ac73db8378aa Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Wed, 27 Nov 2019 03:37:01 +0100
Subject: [PATCH 3/6] Implement category and subtags filtering

---
 src/css/style.less                  |  2 +-
 src/js/yunohost/controllers/apps.js | 91 +++++++++++++++++++++++++----
 src/views/app/app_catalog.ms        | 36 +++++++++---
 src/views/app/app_install.ms        |  2 +-
 4 files changed, 108 insertions(+), 23 deletions(-)

diff --git a/src/css/style.less b/src/css/style.less
index 0eaa0f21..f7b0e207 100644
--- a/src/css/style.less
+++ b/src/css/style.less
@@ -707,7 +707,7 @@ input[type='radio'].nice-radio {
 }
 
 .app-category-title {
-    line-height: 0.5em;
+    line-height: 1em;
 }
 
 /** Groups View **/
diff --git a/src/js/yunohost/controllers/apps.js b/src/js/yunohost/controllers/apps.js
index 694ca9f6..c62477d5 100644
--- a/src/js/yunohost/controllers/apps.js
+++ b/src/js/yunohost/controllers/apps.js
@@ -164,35 +164,102 @@
                   transitionDuration: 200
                 });
 
-                var categoryGrid = jQuery('#app-categories').isotope({
+                // Default filter is 'decent quality apps'
+                cardGrid.isotope({ filter: '.decentQuality' });
+
+                var categoryGrid = jQuery('#category-selector').isotope({
                   itemSelector: '.app-category-card',
                   layoutMode: 'fitRows',
                   transitionDuration: 200
                 });
 
-                filterByClassAndName = function () {
+                $("#category-selector").show();
+                $("#current-category-filter").hide();
+                $("#current-category-separator").hide();
+                $("#back-to-category-selection").hide();
+                $(".subtag-selector").hide();
+
+                $("#category-selector button").on("click", function() {
+                    var category = $(this).data("category");
+                    var title = $("h2", this).html();
+
+                    // Feed info and display the selecter category next to the search bar
+                    $("#current-category-filter").html(title);
+                    $("#current-category-filter").data("category", category);
+                    $("#current-category-filter").show();
+                    $("#back-to-category-selection").show();
+                    $("#current-category-separator").show();
+
+                    // Hide the category selector
+                    $("#category-selector").hide();
+
+                    // Display the subtags selector
+                    $(".subtag-selector").hide();
+                    $(".subtag-selector[data-app-category='"+category+"']").show();
+                    cardGrid.isotope({ filter: filterApps });
+                });
+
+                $("#back-to-category-selection").on("click", function() {
+
+                    // Hide / reset selected cateory next to the search bar
+                    $("#current-category-filter").hide();
+                    $("#current-category-filter").data("category", "");
+                    $("#back-to-category-selection").hide();
+                    $("#current-category-separator").hide();
+
+                    // Display the category selector
+                    $("#category-selector").show();
+
+                    // Hide subtag selector
+                    $(".subtag-selector").hide();
+                    cardGrid.isotope({ filter: filterApps });
+                });
+
+                $(".subtag-selector button").on("click", function() {
+                    var selector = $(this).parent();
+                    var category = selector.data("app-category");
+                    $("button", selector).removeClass("active");
+                    $(this).addClass("active");
+                    cardGrid.isotope({ filter: filterApps });
+                });
+
+
+                filterApps = function () {
+
+                  // Check text search
                   var input = jQuery("#filter-app-cards").val().toLowerCase();
-                  var inputMatch = (jQuery(this).find('.app-title').text().toLowerCase().indexOf(input) > -1);
+                  if (jQuery(this).find('.app-title').text().toLowerCase().indexOf(input) <= -1) return false;
 
-                  var filterClass = jQuery("#dropdownFilter").attr("data-filter");
-                  var classMatch = (filterClass === '*') ? true : jQuery(this).hasClass(filterClass);
-                  return inputMatch && classMatch;
+                  // Check category
+                  var category = $("#current-category-filter").data("category");
+                  if ((category !== '') && (jQuery(this).data("category") !== category)) return false;
+
+                  // Check subtags
+                  var subtag = $(".subtag-selector[data-app-category='"+category+"'] button.active").data("subtag");
+                  var this_subtags = jQuery(this).data("subtags");
+                  if ((subtag !== undefined) && (subtag !== "all")) {
+                      if ((subtag === "others") && (this_subtags !== "")) return false;
+                      if ((subtag !== "others") && (this_subtags.split(",").indexOf(subtag) <= -1)) return false;
+                  }
+
+                  // Check quality criteria
+                  var class_ = jQuery("#dropdownFilter").data("filter");
+                  if ((class_ !== '*') && (! jQuery(this).hasClass(class_))) return false;
+
+                  return true;
                 },
 
-                // Default filter is 'decent quality apps'
-                cardGrid.isotope({ filter: '.decentQuality' });
-
                 jQuery('.dropdownFilter').on('click', function() {
                     // change dropdown label
                     jQuery('#app-cards-list-filter-text').text(jQuery(this).find('.menu-item').text());
                      // change filter attribute
-                    jQuery('#dropdownFilter').attr("data-filter", jQuery(this).attr("data-filter"));
+                    jQuery('#dropdownFilter').data("filter", jQuery(this).data("filter"));
                     // filter !
-                    cardGrid.isotope({ filter: filterByClassAndName });
+                    cardGrid.isotope({ filter: filterApps });
                 });
 
                 jQuery("#filter-app-cards").on("keyup", function() {
-                    cardGrid.isotope({ filter: filterByClassAndName });
+                    cardGrid.isotope({ filter: filterApps });
                 });
             };
 
diff --git a/src/views/app/app_catalog.ms b/src/views/app/app_catalog.ms
index 4d444f0d..aac34205 100644
--- a/src/views/app/app_catalog.ms
+++ b/src/views/app/app_catalog.ms
@@ -1,16 +1,19 @@
 <div class="btn-breadcrumb">
     <a href="#/" ><i class="fa-home"></i><span class="sr-only">{{t 'home'}}</span></a>
     <a href="#/apps">{{t 'applications'}}</a>
-    <a href="#/apps/install">{{t 'install'}}</a>
+    <a href="#/apps/catalog">{{t 'install'}}</a>
 </div>
 
 <div class="separator"></div>
 
 <div class="input-group" id="app-filter-input">
-    <span class="input-group-addon"><i class="fas fa-search"></i></span>
+    <div id="back-to-category-selection" class="input-group-btn"><button class="btn btn-primary"><i class="fa-arrow-left"></i></button></div>
+    <span id="current-category-filter" class="input-group-addon"></span>
+    <span id="current-category-separator" class="input-group-addon" style="background: white;border: none;">&nbsp;</span>
+    <span class="input-group-addon"><i class="fa-search"></i></span>
     <input type="text" id="filter-app-cards" class="form-control" role="textbox"  placeholder="{{t 'search_for_apps'}}" aria-describedby="basic-addon0"/>
     <div class="input-group-btn">
-        <button type="button" role="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <span id="app-cards-list-filter-text">{{t 'only_decent_quality_apps'}}</span> <span class="caret"></span>
         </button>
         <ul id="dropdownFilter" class="dropdown-menu" data-filter="decentQuality" role="menu">
@@ -24,22 +27,37 @@
 
 <div class="separator"></div>
 
-<div id="app-categories" class="list-group grid">
+<div id="category-selector" class="list-group grid">
   {{#categories}}
-  <div class="app-category-card panel panel-default">
+  <button class="app-category-card panel panel-default" data-category="{{id}}">
         <div class="panel-body">
-            <h2 class="app-category-title"><span class="fa-fw fa-{{icon}}"></span> {{title}}</h2>
-            <h3 class="app-category-card-desc">{{description}}</h3>
+            <h2 class="app-category-title" style="white-space: normal"><span class="fa-fw fa-{{icon}}"></span> {{title}}</h2>
+            <h3 class="app-category-card-desc" style="white-space: normal">{{description}}</h3>
         </div>
-  </div>
+  </button>
   {{/categories}}
 </div>
 
+{{#categories}}
+<div class="subtag-selector" data-app-category="{{id}}" style="text-align: center">
+    {{#if subtags}}
+    <button class="btn btn-default active" data-subtag="all">All</button>
+    {{/if}}
+    {{#subtags}}
+    <button class="btn btn-default" data-subtag="{{.}}">{{.}}</button>
+    {{/subtags}}
+    {{#if subtags}}
+    <button class="btn btn-default" data-subtag="others">Others</button>
+    {{/if}}
+</div>
+{{/categories}}
+
+
 <div class="separator"></div>
 
 <div id="apps" class="list-group grid">
 {{#apps}}
-  <div class="app-card panel panel-default {{status}} {{state}} {{isWorking}} {{isHighQuality}} {{decentQuality}} {{level}}-level">
+  <div class="app-card panel panel-default {{status}} {{state}} {{isWorking}} {{isHighQuality}} {{decentQuality}} {{level}}-level" data-category="{{category}}" data-subtags="{{#subtags}}{{.}}{{#unless @last}},{{/unless}}{{/subtags}}">
         <div class="panel-body">
             <h2 class="app-title">{{manifest.name}}</h2>
             <div class="category">
diff --git a/src/views/app/app_install.ms b/src/views/app/app_install.ms
index 05dcfb46..0031cc4d 100644
--- a/src/views/app/app_install.ms
+++ b/src/views/app/app_install.ms
@@ -1,7 +1,7 @@
 <div class="btn-breadcrumb">
     <a href="#/" ><i class="fa-home"></i><span class="sr-only">{{t 'home'}}</span></a>
     <a href="#/apps">{{t 'applications'}}</a>
-    <a href="#/apps/install">{{t 'install'}}</a>
+    <a href="#/apps/catalog">{{t 'install'}}</a>
     <a href="#/apps/install/{{id}}">{{manifest.name}}</a>
 </div>
 

From 9636c200ac7e9f35dc4a878ebcaf06ca2e3ed569 Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Fri, 29 Nov 2019 04:39:53 +0100
Subject: [PATCH 4/6] Rework the look and info displayed in app cards ... let's
 be less crazy about all those tags and stuff

---
 src/css/style.less                  |  5 +++++
 src/js/yunohost/controllers/apps.js |  2 +-
 src/locales/en.json                 |  8 +++++---
 src/views/app/app_catalog.ms        | 25 +++++++++++++++----------
 4 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/css/style.less b/src/css/style.less
index f7b0e207..4719e7bd 100644
--- a/src/css/style.less
+++ b/src/css/style.less
@@ -657,6 +657,9 @@ input[type='radio'].nice-radio {
 	}
 }
 
+.app-state {
+    font-size: 10px;
+}
 
 .app-title, .app-category-title {
     margin-top: 5px;
@@ -674,6 +677,7 @@ input[type='radio'].nice-radio {
     margin-bottom: 3px;
     margin-right: 7px;
     margin-top: -5px;
+    height: 18px;
 }
 
 .auto-width {
@@ -690,6 +694,7 @@ input[type='radio'].nice-radio {
 
 .app-card .panel-body {
     padding: 1.5rem;
+    padding-bottom: 0.5rem;
 
     h3 {
       margin-top: 0;
diff --git a/src/js/yunohost/controllers/apps.js b/src/js/yunohost/controllers/apps.js
index c62477d5..246aa04d 100644
--- a/src/js/yunohost/controllers/apps.js
+++ b/src/js/yunohost/controllers/apps.js
@@ -70,7 +70,7 @@
         }
         else
         {
-            return 'success';
+            return 'info';
         }
     }
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 35145778..76319c71 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -23,10 +23,12 @@
     "app_no_actions": "This application doesn't have any actions",
     "app_repository": "Application origin: ",
     "app_state": "Application state: ",
-    "app_state_inprogress": "in progress",
+    "app_state_inprogress": "not yet working",
     "app_state_inprogress_explanation": "This maintainer of this app declared that this application is not ready yet for production use. BE CAREFUL!",
     "app_state_notworking": "not working",
     "app_state_notworking_explanation": "This maintainer of this app declared it as 'not working'. IT WILL BREAK YOUR SYSTEM!",
+    "app_state_low_quality": "low quality",
+    "app_state_low_quality_explanation": "This app may be functional, but may still contain issues, or is not fully integrated with YunoHost, or it does not respect the good practices.",
     "app_state_high-quality": "high quality",
     "app_state_high-quality_explanation": "This app is well-integrated with YunoHost. It has been (and is!) peer-reviewed by the YunoHost app team. It can be expected to be safe and maintained on the long-term.",
     "app_state_working": "working",
@@ -218,8 +220,8 @@
     "only_decent_quality_apps": "Only decent quality apps",
     "open": "Open",
     "operations": "Operations",
-    "orphaned": "not maintained",
-    "orphaned_details": "This app is not maintained anymore. It may still be working but won't receive any upgrade. Feel free to come and revive it!",
+    "orphaned": "Not maintained",
+    "orphaned_details": "This app has not been maintained for quite some time. It may still be working, but won't receive any upgrade until somebody volunteers to take care of it. Feel free to contribute to revive it!",
     "password": "Password",
     "password_confirmation": "Password confirmation",
     "password_description": "Password must be at least %s characters long.",
diff --git a/src/views/app/app_catalog.ms b/src/views/app/app_catalog.ms
index aac34205..209dc177 100644
--- a/src/views/app/app_catalog.ms
+++ b/src/views/app/app_catalog.ms
@@ -57,23 +57,28 @@
 
 <div id="apps" class="list-group grid">
 {{#apps}}
-  <div class="app-card panel panel-default {{status}} {{state}} {{isWorking}} {{isHighQuality}} {{decentQuality}} {{level}}-level" data-category="{{category}}" data-subtags="{{#subtags}}{{.}}{{#unless @last}},{{/unless}}{{/subtags}}">
+  <div class="app-card panel panel-default {{state}} {{isWorking}} {{isHighQuality}} {{decentQuality}} {{level}}-level" data-category="{{category}}" data-subtags="{{#subtags}}{{.}}{{#unless @last}},{{/unless}}{{/subtags}}">
         <div class="panel-body">
-            <h2 class="app-title">{{manifest.name}}</h2>
-            <div class="category">
-              <span class="label label-{{stateColor}} label-as-badge app-state" title="{{t (concat 'app_state_' state '_explanation') }}">{{t (concat 'app_state_' state) }}</span>
-              <a target="_BLANK" href="https://yunohost.org/#/packaging_apps_levels"><span class="label label-{{levelColor}} label-as-badge app-level" title="{{t 'app_level'}}">{{t 'level'}} {{levelFormatted}}</span></a>
-              <span class="label label-{{maintainedColor}} label-as-badge maintained-status" title="{{t (concat maintained '_details') }}"> {{t maintained}}</span>
-            </div>
+            <h2 class="app-title">
+            {{manifest.name}}
+            {{#if (eq state 'working') }}
+            {{#if (eq decentQuality 'badQuality')}}
+            <span class="label label-warning label-as-badge app-state" title="{{t 'app_state_low_quality_explanation' }}">{{t 'app_state_low_quality' }}</span>
+            {{/if}}
+            {{else}}
+            <span class="label label-{{stateColor}} label-as-badge app-state" title="{{t (concat 'app_state_' state '_explanation') }}">{{t (concat 'app_state_' state) }}</span>
+            {{/if}}
+            </h2>
             <div class="app-card-desc">{{manifest.description}}</div>
         </div>
             <div class="app-card-date-maintainer">
-                <i class="fa-refresh"></i> {{formatDate updateDate day="numeric" month="long" year="numeric"}} -
-                <span title="{{t 'current_maintainer_title'}}" class="maintained"></span><i class="fa-user"></i> {{manifest.maintainer}}</span>
+              {{#if (eq maintainedColor 'danger') }}
+              <span class="text text-warning maintained-status" title="{{t (concat maintained '_details') }}"><i class="fa-warning"></i> {{t maintained}}</span>
+              {{/if}}
             </div>
             <div class="btn-group" role="group">
                 <a href="{{git.url}}" target="_BLANK" type="button" role="button" class="btn btn-default col-xs-4">
-                    <i class="fa-globe"></i> Code
+                    <i class="fa-code"></i> Code
                 </a>
                 <a href="{{git.url}}/blob/master/README.md" target="_BLANK" type="button" role="button" class="btn btn-default col-xs-4">
                     <i class="fa-book"></i> Readme

From 4f9c47eab5780a4e887098c37367d4ed7f8501aa Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Fri, 29 Nov 2019 21:25:55 +0100
Subject: [PATCH 5/6] Split category selection and app browsing into two
 separate pages

---
 src/css/style.less                            | 19 ++++
 src/js/yunohost/controllers/apps.js           | 90 +++++++------------
 src/locales/en.json                           |  1 +
 ...app_catalog.ms => app_catalog_category.ms} | 47 ++++------
 src/views/app/app_catalog_home.ms             | 23 +++++
 src/views/app/app_install.ms                  |  4 +-
 6 files changed, 94 insertions(+), 90 deletions(-)
 rename src/views/app/{app_catalog.ms => app_catalog_category.ms} (74%)
 create mode 100644 src/views/app/app_catalog_home.ms

diff --git a/src/css/style.less b/src/css/style.less
index 4719e7bd..c52302a7 100644
--- a/src/css/style.less
+++ b/src/css/style.less
@@ -709,12 +709,31 @@ input[type='radio'].nice-radio {
 .app-category-card .panel-body {
     padding: 2em;
     height: 10em;
+    color: #333 !important;
+}
+
+.subtag-selector {
+    text-align: center;
+}
+
+.app-category-card {
+    text-decoration: none !important;
+}
+
+.app-category-card:hover {
+    border-color: #777;
 }
 
 .app-category-title {
     line-height: 1em;
+    white-space: normal;
 }
 
+.app-category-card-desc {
+    white-space: normal;
+}
+
+
 /** Groups View **/
 #view-groups {
     .panel-heading a {
diff --git a/src/js/yunohost/controllers/apps.js b/src/js/yunohost/controllers/apps.js
index 246aa04d..aa8d2c3d 100644
--- a/src/js/yunohost/controllers/apps.js
+++ b/src/js/yunohost/controllers/apps.js
@@ -107,15 +107,34 @@
         }
     }
 
-    // Display app catalog
+
+    // Display catalog home page where users chooses to browse a specific category
     app.get('#/apps/catalog', function (c) {
         c.api('GET', '/appscatalog?full&with_categories', {}, function (data) {
-            var apps = []
+            c.view('app/app_catalog_home', {categories: data["categories"]}, function() {
+                // Configure layout / rendering for app-category-cards
+                $('#category-selector').isotope({
+                    itemSelector: '.app-category-card',
+                    layoutMode: 'fitRows',
+                    transitionDuration: 200
+                });
+            });
+        });
+    });
+
+    // Display app catalog for a specific category
+    app.get('#/apps/catalog/:category', function (c) {
+        var category_id = c.params['category'];
+        c.api('GET', '/appscatalog?full&with_categories', {}, function (data) {
+            var apps = [];
             $.each(data['apps'], function(name, app) {
 
                 // Ignore not working apps
                 if (app.state === 'notworking') { return; }
 
+                // Ignore apps not in this category
+                if ((category_id !== "all") && (app.category !== category_id)) { return; }
+
                 app.id = app.manifest.id;
                 app.level = parseInt(app.level);
 
@@ -152,6 +171,15 @@
                 apps.push(app);
             });
 
+            var category = undefined;
+            $.each(data['categories'], function(i, this_category) {
+                if (this_category.id === category_id) { category = this_category; }
+            });
+
+            if (category_id === "all") {
+                category = {title:  y18n.t("all_apps"), icon: "search"};
+            }
+
             // Sort app list
             c.arraySortById(apps);
 
@@ -167,75 +195,21 @@
                 // Default filter is 'decent quality apps'
                 cardGrid.isotope({ filter: '.decentQuality' });
 
-                var categoryGrid = jQuery('#category-selector').isotope({
-                  itemSelector: '.app-category-card',
-                  layoutMode: 'fitRows',
-                  transitionDuration: 200
-                });
-
-                $("#category-selector").show();
-                $("#current-category-filter").hide();
-                $("#current-category-separator").hide();
-                $("#back-to-category-selection").hide();
-                $(".subtag-selector").hide();
-
-                $("#category-selector button").on("click", function() {
-                    var category = $(this).data("category");
-                    var title = $("h2", this).html();
-
-                    // Feed info and display the selecter category next to the search bar
-                    $("#current-category-filter").html(title);
-                    $("#current-category-filter").data("category", category);
-                    $("#current-category-filter").show();
-                    $("#back-to-category-selection").show();
-                    $("#current-category-separator").show();
-
-                    // Hide the category selector
-                    $("#category-selector").hide();
-
-                    // Display the subtags selector
-                    $(".subtag-selector").hide();
-                    $(".subtag-selector[data-app-category='"+category+"']").show();
-                    cardGrid.isotope({ filter: filterApps });
-                });
-
-                $("#back-to-category-selection").on("click", function() {
-
-                    // Hide / reset selected cateory next to the search bar
-                    $("#current-category-filter").hide();
-                    $("#current-category-filter").data("category", "");
-                    $("#back-to-category-selection").hide();
-                    $("#current-category-separator").hide();
-
-                    // Display the category selector
-                    $("#category-selector").show();
-
-                    // Hide subtag selector
-                    $(".subtag-selector").hide();
-                    cardGrid.isotope({ filter: filterApps });
-                });
-
                 $(".subtag-selector button").on("click", function() {
                     var selector = $(this).parent();
-                    var category = selector.data("app-category");
                     $("button", selector).removeClass("active");
                     $(this).addClass("active");
                     cardGrid.isotope({ filter: filterApps });
                 });
 
-
                 filterApps = function () {
 
                   // Check text search
                   var input = jQuery("#filter-app-cards").val().toLowerCase();
                   if (jQuery(this).find('.app-title').text().toLowerCase().indexOf(input) <= -1) return false;
 
-                  // Check category
-                  var category = $("#current-category-filter").data("category");
-                  if ((category !== '') && (jQuery(this).data("category") !== category)) return false;
-
                   // Check subtags
-                  var subtag = $(".subtag-selector[data-app-category='"+category+"'] button.active").data("subtag");
+                  var subtag = $(".subtag-selector button.active").data("subtag");
                   var this_subtags = jQuery(this).data("subtags");
                   if ((subtag !== undefined) && (subtag !== "all")) {
                       if ((subtag === "others") && (this_subtags !== "")) return false;
@@ -264,7 +238,7 @@
             };
 
             // render
-            c.view('app/app_catalog', {apps: apps, categories: data["categories"]}, setupFilterEvents);
+            c.view('app/app_catalog_category', {apps: apps, category: category}, setupFilterEvents);
 
         });
     });
diff --git a/src/locales/en.json b/src/locales/en.json
index 76319c71..adec9878 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -53,6 +53,7 @@
     "begin": "Begin",
     "both": "Both",
     "cancel": "Cancel",
+    "catalog": "Catalog",
     "check": "Check",
     "close": "Close",
     "configuration": "Configuration",
diff --git a/src/views/app/app_catalog.ms b/src/views/app/app_catalog_category.ms
similarity index 74%
rename from src/views/app/app_catalog.ms
rename to src/views/app/app_catalog_category.ms
index 209dc177..4dc7647c 100644
--- a/src/views/app/app_catalog.ms
+++ b/src/views/app/app_catalog_category.ms
@@ -1,15 +1,16 @@
 <div class="btn-breadcrumb">
     <a href="#/" ><i class="fa-home"></i><span class="sr-only">{{t 'home'}}</span></a>
     <a href="#/apps">{{t 'applications'}}</a>
-    <a href="#/apps/catalog">{{t 'install'}}</a>
+    <a href="#/apps/catalog">{{t 'catalog'}}</a>
+    <a href="#/apps/catalog/{{category.id}}">{{category.title}}</a>
 </div>
 
 <div class="separator"></div>
 
 <div class="input-group" id="app-filter-input">
-    <div id="back-to-category-selection" class="input-group-btn"><button class="btn btn-primary"><i class="fa-arrow-left"></i></button></div>
-    <span id="current-category-filter" class="input-group-addon"></span>
-    <span id="current-category-separator" class="input-group-addon" style="background: white;border: none;">&nbsp;</span>
+    <div class="input-group-btn"><a class="btn btn-primary" href="#/apps/catalog"><i class="fa-arrow-left"></i></a></div>
+    <span class="input-group-addon"><i class="fa-fw fa-{{category.icon}}"></i> {{category.title}}</span>
+    <span class="input-group-addon" style="background: white;border: none;">&nbsp;</span>
     <span class="input-group-addon"><i class="fa-search"></i></span>
     <input type="text" id="filter-app-cards" class="form-control" role="textbox"  placeholder="{{t 'search_for_apps'}}" aria-describedby="basic-addon0"/>
     <div class="input-group-btn">
@@ -27,37 +28,23 @@
 
 <div class="separator"></div>
 
-<div id="category-selector" class="list-group grid">
-  {{#categories}}
-  <button class="app-category-card panel panel-default" data-category="{{id}}">
-        <div class="panel-body">
-            <h2 class="app-category-title" style="white-space: normal"><span class="fa-fw fa-{{icon}}"></span> {{title}}</h2>
-            <h3 class="app-category-card-desc" style="white-space: normal">{{description}}</h3>
-        </div>
-  </button>
-  {{/categories}}
-</div>
-
-{{#categories}}
-<div class="subtag-selector" data-app-category="{{id}}" style="text-align: center">
-    {{#if subtags}}
+<div class="subtag-selector">
+    {{#if category.subtags}}
     <button class="btn btn-default active" data-subtag="all">All</button>
     {{/if}}
-    {{#subtags}}
+    {{#category.subtags}}
     <button class="btn btn-default" data-subtag="{{.}}">{{.}}</button>
-    {{/subtags}}
-    {{#if subtags}}
+    {{/category.subtags}}
+    {{#if category.subtags}}
     <button class="btn btn-default" data-subtag="others">Others</button>
     {{/if}}
 </div>
-{{/categories}}
-
 
 <div class="separator"></div>
 
 <div id="apps" class="list-group grid">
 {{#apps}}
-  <div class="app-card panel panel-default {{state}} {{isWorking}} {{isHighQuality}} {{decentQuality}} {{level}}-level" data-category="{{category}}" data-subtags="{{#subtags}}{{.}}{{#unless @last}},{{/unless}}{{/subtags}}">
+  <div class="app-card panel panel-default {{state}} {{isWorking}} {{isHighQuality}} {{decentQuality}} {{level}}-level" data-subtags="{{#subtags}}{{.}}{{#unless @last}},{{/unless}}{{/subtags}}">
         <div class="panel-body">
             <h2 class="app-title">
             {{manifest.name}}
@@ -73,19 +60,19 @@
         </div>
             <div class="app-card-date-maintainer">
               {{#if (eq maintainedColor 'danger') }}
-              <span class="text text-warning maintained-status" title="{{t (concat maintained '_details') }}"><i class="fa-warning"></i> {{t maintained}}</span>
+              <span class="text text-warning maintained-status" title="{{t (concat maintained '_details') }}"><i class="fa-fw fa-warning"></i> {{t maintained}}</span>
               {{/if}}
             </div>
             <div class="btn-group" role="group">
                 <a href="{{git.url}}" target="_BLANK" type="button" role="button" class="btn btn-default col-xs-4">
-                    <i class="fa-code"></i> Code
+                    <i class="fa-fw fa-code"></i> Code
                 </a>
                 <a href="{{git.url}}/blob/master/README.md" target="_BLANK" type="button" role="button" class="btn btn-default col-xs-4">
-                    <i class="fa-book"></i> Readme
+                    <i class="fa-fw fa-book"></i> Readme
                 </a>
                 {{#installable}}
                 <a href="#/apps/install/{{manifest.id}}" type="button" role="button" class="btn btn-{{installColor}} col-xs-4 active">
-                    <i class="fa-plus"></i> {{t 'install'}}{{^isSafe}} <i class="fa-warning"></i>{{/isSafe}}
+                    <i class="fa-fw fa-plus"></i> {{t 'install'}}{{^isSafe}} <i class="fa-fw fa-warning"></i>{{/isSafe}}
                 </a>
                 {{/installable}}
                 {{^installable}}
@@ -102,7 +89,7 @@
     </div>
     <div class="panel-body">
         <p class="alert alert-warning">
-            <span class="fa-warning"></span>
+            <span class="fa-fw fa-warning"></span>
             {{t 'confirm_install_custom_app'}}
         </p>
         <form action="#/apps/install/custom" method="POST" class="form-horizontal">
@@ -111,7 +98,7 @@
                 <div class="col-sm-12">
                     <input type="url" id="url" name="url" class="form-control" value="" placeholder="https://github.com/USER/REPOSITORY" required pattern="^https://github.com/[a-zA-Z0-9-_.]+/[a-zA-Z0-9-_.]+[/]?$">
                     <p class="text-warning">
-                        <span class="fa-github"></span> {{t 'custom_app_url_only_github'}}
+                        <span class="fa-fw fa-github"></span> {{t 'custom_app_url_only_github'}}
                     </p>
                 </div>
             </div>
diff --git a/src/views/app/app_catalog_home.ms b/src/views/app/app_catalog_home.ms
new file mode 100644
index 00000000..bb96b3c4
--- /dev/null
+++ b/src/views/app/app_catalog_home.ms
@@ -0,0 +1,23 @@
+<div class="btn-breadcrumb">
+    <a href="#/" ><i class="fa-home"></i><span class="sr-only">{{t 'home'}}</span></a>
+    <a href="#/apps">{{t 'applications'}}</a>
+    <a href="#/apps/catalog">{{t 'catalog'}}</a>
+</div>
+
+<div class="separator"></div>
+
+<div id="category-selector" class="list-group grid">
+  {{#categories}}
+  <a class="app-category-card panel panel-default" href="#/apps/catalog/{{id}}">
+        <div class="panel-body">
+            <h2 class="app-category-title"><span class="fa-fw fa-{{icon}}"></span> {{title}}</h2>
+            <h3 class="app-category-card-desc">{{description}}</h3>
+        </div>
+  </a>
+  {{/categories}}
+  <a class="app-category-card" href="#/apps/catalog/all">
+        <div class="panel-body">
+            <h2 class="app-category-title" style="padding-top: 3em'"><span class="fa-fw fa-search"></span> {{t 'all_apps'}}</h2>
+        </div>
+  </a>
+</div>
diff --git a/src/views/app/app_install.ms b/src/views/app/app_install.ms
index 0031cc4d..b5ec27dd 100644
--- a/src/views/app/app_install.ms
+++ b/src/views/app/app_install.ms
@@ -1,8 +1,8 @@
 <div class="btn-breadcrumb">
     <a href="#/" ><i class="fa-home"></i><span class="sr-only">{{t 'home'}}</span></a>
     <a href="#/apps">{{t 'applications'}}</a>
-    <a href="#/apps/catalog">{{t 'install'}}</a>
-    <a href="#/apps/install/{{id}}">{{manifest.name}}</a>
+    <a href="#/apps/catalog">{{t 'catalog'}}</a>
+    <a href="#/apps/install/{{id}}">{{t 'install_name' manifest.name}}</a>
 </div>
 
 <div class="separator"></div>

From 5815cbe40ad1a1b2dd5e401781f1b0df8e2ad190 Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Sat, 30 Nov 2019 18:15:38 +0100
Subject: [PATCH 6/6] i18n and proper display names for subtags list

---
 src/locales/en.json                   | 2 ++
 src/views/app/app_catalog_category.ms | 6 +++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index adec9878..9e5f6fd8 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -5,6 +5,7 @@
     "advanced": "Advanced",
     "remove": "Remove",
     "administration_password": "Administration password",
+    "all": "All",
     "all_apps": "All apps",
     "api_not_responding": "The YunoHost API is not responding. Maybe 'yunohost-api' is down or got restarted?",
     "app_change_label": "Change Label",
@@ -223,6 +224,7 @@
     "operations": "Operations",
     "orphaned": "Not maintained",
     "orphaned_details": "This app has not been maintained for quite some time. It may still be working, but won't receive any upgrade until somebody volunteers to take care of it. Feel free to contribute to revive it!",
+    "others": "Others",
     "password": "Password",
     "password_confirmation": "Password confirmation",
     "password_description": "Password must be at least %s characters long.",
diff --git a/src/views/app/app_catalog_category.ms b/src/views/app/app_catalog_category.ms
index 4dc7647c..fd3ac12e 100644
--- a/src/views/app/app_catalog_category.ms
+++ b/src/views/app/app_catalog_category.ms
@@ -30,13 +30,13 @@
 
 <div class="subtag-selector">
     {{#if category.subtags}}
-    <button class="btn btn-default active" data-subtag="all">All</button>
+    <button class="btn btn-default active" data-subtag="all">{{t 'all'}}</button>
     {{/if}}
     {{#category.subtags}}
-    <button class="btn btn-default" data-subtag="{{.}}">{{.}}</button>
+    <button class="btn btn-default" data-subtag="{{id}}">{{title}}</button>
     {{/category.subtags}}
     {{#if category.subtags}}
-    <button class="btn btn-default" data-subtag="others">Others</button>
+    <button class="btn btn-default" data-subtag="others">{{t 'others'}}</button>
     {{/if}}
 </div>