Convert tag modal into drawer (#977)

* change tag modal into drawer

* improve scroll handling

* teleport all side bar content

* improve naming

* fix focus trap in filter drawer

bookmarks/templates/bookmarks/archive.html

@@ -14,8 +14,7 @@
         <div class="header-controls">
           {% bookmark_search bookmark_list.search mode='archived' %}
           {% include 'bookmarks/bulk_edit/toggle.html' %}
-          <button ld-tag-modal-trigger class="btn ml-2">Tags
-          </button>
+          <button ld-filter-drawer-trigger class="btn ml-2">Filters</button>
         </div>
       </div>
 

bookmarks/templates/bookmarks/index.html

@@ -14,7 +14,7 @@
         <div class="header-controls">
           {% bookmark_search bookmark_list.search %}
           {% include 'bookmarks/bulk_edit/toggle.html' %}
-          <button ld-tag-modal-trigger class="btn ml-2">Tags</button>
+          <button ld-filter-drawer-trigger class="btn ml-2">Filters</button>
         </div>
       </div>
 

bookmarks/templates/bookmarks/shared.html

@@ -13,8 +13,7 @@
         <h2>Shared bookmarks</h2>
         <div class="header-controls">
           {% bookmark_search bookmark_list.search mode='shared' %}
-          <button ld-tag-modal-trigger class="btn ml-2">Tags
-          </button>
+          <button ld-filter-drawer-trigger class="btn ml-2">Filters</button>
         </div>
       </div>
 

bookmarks/templates/settings/general.html

@@ -127,11 +127,11 @@
         <div class="form-group">
           <label for="{{ form.collapse_side_panel.id_for_label }}" class="form-checkbox">
             {{ form.collapse_side_panel }}
-            <i class="form-icon"></i> Collapse tags
+            <i class="form-icon"></i> Collapse side panel
           </label>
           <div class="form-input-hint">
             When enabled, the tags side panel will be collapsed by default to give more space to the bookmark list.
-            Instead, the tags can be shown in a modal dialog by clicking the tags button in the bookmark list header.
+            Instead, the tags are shown in an expandable drawer.
           </div>
         </div>
         <div class="form-group">