use pad titles in home page table

customize.dist/index.html

@@ -46,9 +46,9 @@
         table.scroll thead { display: block; }
 
         table.scroll tbody {
-            max-height: 100px;
+         /* max-height: 100px;
             overflow-y: auto;
-            overflow-x: hidden;
+            overflow-x: hidden; */
         }
 
         tbody { border-top: 2px solid black; }
@@ -68,6 +68,7 @@
 
         .remove {
             cursor: pointer;
+            color: #ab0000;
         }
     </style>
     <script src="/bower_components/requirejs/require.js"></script>
@@ -163,6 +164,7 @@
                     '/code/': 'Code'
                 };
 
+                var makeRecentPadsTable = function () {
                     recentPads.length && recentPads.some(function (pad, index) {
                         if (!pad) return true;
 
@@ -177,6 +179,8 @@
                         // derive the name
                         var name = padTypes[uri.path()];
 
+                        var title = pad[2] || '';
+
                         var date = new Date(pad[1]).toLocaleDateString();
                         if (date === now.toLocaleDateString()) {
                             date = new Date(pad[1]).toLocaleTimeString().replace(/ /g, '');
@@ -185,9 +189,10 @@
                         var id = 'pad-'+index;
                         $tbody.append('<tr id="'+id+'">' +
                            '<td>' + name + '</td>' +
-                       '<td><a href="' + pad[0] + '"' + '">' + pad[0] + '</a></td>' +
+                           '<td>' + title + '</td>' +
+                           '<td><a href="' + pad[0] + '">' + pad[0] + '</a></td>' +
                            '<td>' + date + '</td>' +
-                       '<td class="remove">remove</td>'+
+                           '<td class="remove">✖</td>'+
                            '</tr>');
 
                         var $row = $('#'+id);
@@ -203,6 +208,15 @@
                             });
                         });
                     });
+                };
+
+                if (recentPads.length) {
+                    recentPads.sort(function (a, b) {
+                        // b - a
+                        return new Date(b[1]).getTime() - new Date(a[1]).getTime();
+                    });
+                    makeRecentPadsTable();
+                }
 
                 var setTableHeight = function () {
                     if (recentPads.length < 5) {