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/styles/bookmark-page.css

@@ -15,7 +15,7 @@
     grid-gap: var(--unit-9);
   }
 
-  [ld-tag-modal-trigger] {
+  [ld-filter-drawer-trigger] {
     display: none;
   }
 
@@ -24,7 +24,7 @@
       display: none;
     }
 
-    [ld-tag-modal-trigger] {
+    [ld-filter-drawer-trigger] {
       display: inline-block;
     }
   }
@@ -38,7 +38,7 @@
       display: none;
     }
 
-    [ld-tag-modal-trigger] {
+    [ld-filter-drawer-trigger] {
       display: inline-block;
     }
   }

bookmarks/styles/components.css

@@ -2,7 +2,8 @@
 
 /* Content area component */
 section.content-area {
-  h2 {
+  h2,
+  h3 {
     font-size: var(--font-size-lg);
   }
 
@@ -14,7 +15,8 @@ section.content-area {
     padding-bottom: var(--unit-2);
     margin-bottom: var(--unit-4);
 
-    h2 {
+    h2,
+    h3 {
       flex: 0 0 auto;
       line-height: var(--unit-9);
       margin: 0;

bookmarks/styles/theme/base.css

@@ -10,7 +10,6 @@ html {
   font-size: var(--html-font-size);
   line-height: var(--html-line-height);
   -webkit-tap-highlight-color: transparent;
-  scrollbar-gutter: stable;
 }
 
 /* Reserve space for vert. scrollbar to avoid layout shifting when scrollbars are added */

bookmarks/styles/theme/modals.css

@@ -62,13 +62,14 @@
   gap: var(--unit-4);
   max-height: 75vh;
   max-width: var(--control-width-md);
-  padding: var(--unit-6);
   width: 100%;
 
   & .modal-header {
     display: flex;
     align-items: flex-start;
     gap: var(--unit-2);
+    padding: var(--unit-6);
+    padding-bottom: 0;
     color: var(--text-color);
 
     & h2 {
@@ -95,10 +96,53 @@
 
   & .modal-body {
     overflow-y: auto;
-    position: relative;
+    padding: 0 var(--unit-6);
+  }
+
+  & .modal-body:not(:has(+ .modal-footer)) {
+    margin-bottom: var(--unit-6);
   }
 
   & .modal-footer {
+    padding: var(--unit-6);
+    padding-top: 0;
     text-align: right;
   }
 }
+
+.modal.drawer {
+  display: block;
+
+  & .modal-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 400px;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    border: none;
+    border-left: solid 1px var(--modal-container-border-color);
+    border-radius: 0;
+    transform: translateX(100%);
+    animation: fade-in 0.25s ease 1;
+    transition: transform 0.25s ease;
+  }
+
+  &.active {
+    & .modal-container {
+      transform: translateX(0);
+    }
+  }
+
+  &.active.closing {
+    & .modal-container {
+      animation: fade-out 0.25s ease 1;
+      transform: translateX(100%);
+    }
+  }
+}
+
+.scroll-lock {
+  overflow: hidden !important;
+}