Add info boxes for the different categories

www/file/file.css

@@ -192,6 +192,12 @@ li {
     background: #ddddff;
     border: 1px solid #bbb;
     border-radius: 5px;
+    margin-bottom: 10px;
+}
+#content .info-box span {
+    cursor: pointer;
+    margin-left: 10px;
+    float: right;
 }
 
 .topButtonContainer {
@@ -257,13 +263,10 @@ li {
     flex: 1;
 }
 
-#content .list li.file-header {
-    margin-top: 20px;
-}
-
 #content .list li.header {
     cursor: default;
     color: #008;
+    margin-top: 10px;
 }
 #content .list li.header .element span:not(.fa) {
     border-right: 1px solid #CCC;

www/file/main.js

@@ -213,6 +213,7 @@ define([
         var $gridIcon = $('<span>', {"class": "fa fa-th"});
         var $sortAscIcon = $('<span>', {"class": "fa fa-angle-up"});
         var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down"});
+        var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
 
         if (!APP.readOnly) {
             setEditable(true);
@@ -708,10 +709,19 @@ define([
                 default:
                     msg = undefined;
             }
-            if (!msg) {
+            if (!msg || Cryptpad.getLSAttribute('hide-info-' + path[0]) === '1') {
                 $box.hide();
             } else {
                 $box.text(msg);
+                var $close = $closeIcon.clone().css({
+                    'cursor': 'pointer',
+                    'margin-left': '10px',
+                    title: Messages.fm_closeInfoBox
+                }).on('click', function () {
+                    $box.hide();
+                    Cryptpad.setLSAttribute('hide-info-' + path[0], '1');
+                });
+                $box.prepend($close);
             }
             return $box;
         };