First rendering of the categories, still drafty

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%;

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);
 
         });
     });

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">