Ability to collapse comment and TOC columns in rich text

www/pad/app-pad.less

@@ -22,14 +22,40 @@ body.cp-app-pad {
         overflow: hidden;
     }
 
+    #cp-app-pad-toc, #cp-app-pad-comments {
+        .cp-pad-show, .cp-pad-hide {
+            position: absolute;
+            cursor: pointer;
+            height: 28px;
+            line-height: 28px;
+            .fa { margin: 0 !important; }
+        }
+        &.hidden {
+            width: auto !important;
+            .cp-pad-show {
+                position: relative;
+            }
+            & > :not(.cp-pad-show) {
+                display: none;
+            }
+        }
+        &:not(.hidden) {
+            .cp-pad-show { display: none; }
+        }
+    }
     #cp-app-pad-toc {
         @toc-level-indent: 15px;
 
         overflow-y: auto;
         margin-top: 10px;
         margin-left: 10px;
+        margin-right: 10px;
         width: 200px;
         color: @cryptpad_text_col;
+        position: relative;
+        .cp-pad-show, .cp-pad-hide {
+            right: 0;
+        }
         h2 {
             font-size: 1.5rem;
         }
@@ -117,7 +143,15 @@ body.cp-app-pad {
             order: 3;
             width: 330px;
             //background-color: white;
-            margin: 0px 20px;
+            margin: 10px;
+            position: relative;
+            .cp-pad-show, .cp-pad-hide {
+                left: 0;
+            }
+            h2 {
+                font-size: 1.5rem;
+                text-align: right;
+            }
             .comments_main();
         }
         &.cke_body_width {

www/pad/comments.js

@@ -298,6 +298,30 @@ define([
 
         // Remove everything
         Env.$container.html('');
+        var hideBtn = h('button.cp-pad-hide.btn.btn-default.fa.fa-chevron-right');
+        var showBtn = h('button.cp-pad-show.btn.btn-default', {
+            title: Messages.poll_comment_list
+        }, [
+            h('i.fa.fa-comment')
+        ]);
+        var store = window.cryptpadStore;
+        var key = 'hide-pad-comments';
+        if (store.store[key] === '1') {
+            Env.$container.addClass('hidden');
+        }
+        $(hideBtn).click(function () {
+            Env.$container.addClass('hidden');
+            if (store) { store.put(key, '1'); }
+        });
+        $(showBtn).click(function () {
+            Env.$container.removeClass('hidden');
+            if (store) { store.put(key, '0'); }
+        });
+        Env.$container.append([
+            showBtn,
+            hideBtn,
+            h('h2', Messages.poll_comment_list)
+        ]);
 
         // "show" tells us if we need to display the "comments" column or not
         var show = false;

www/pad/inner.js

@@ -457,6 +457,11 @@ define([
                 $tocButton.addClass('cp-toolbar-button-active');
             }
         });
+        var store = window.cryptpadStore;
+        var key = 'hide-pad-toc';
+        if (store.store[key] === '1') {
+            $toc.addClass('hidden');
+        }
     };
 
     var displayMediaTags = function(framework, dom, mediaTagMap) {
@@ -683,7 +688,30 @@ define([
                     title: Util.stripTags($(el).text())
                 });
             });
-            var content = [h('h2', Messages.markdown_toc)];
+            var hideBtn = h('button.btn.btn-default.cp-pad-hide.fa.fa-chevron-left');
+            var showBtn = h('button.btn.btn-default.cp-pad-show', {
+                title: Messages.pad_tocHide
+            }, [
+                h('i.fa.fa-list-ul')
+            ]);
+            var content = [
+                hideBtn,
+                showBtn,
+                h('h2', Messages.markdown_toc)
+            ];
+            var store = window.cryptpadStore;
+            var key = 'hide-pad-toc';
+            if (store.store[key] === '1') {
+                $toc.addClass('hidden');
+            }
+            $(hideBtn).click(function () {
+                $toc.addClass('hidden');
+                if (store) { store.put(key, '1'); }
+            });
+            $(showBtn).click(function () {
+                $toc.removeClass('hidden');
+                if (store) { store.put(key, '0'); }
+            });
             toc.forEach(function (obj) {
                 var title = (obj.title || "").trim();
                 if (!title) { return; }