feat: nicer smart filters & folders theme (#795)

* fix: color add button and drop

* fix: color scrollbars

* fix: remove infinite scroll and fix scrollbars

* fix: plus icon center

* fix: navigation padding, structure simplif and naming

* fix: simplify scrollbars

* fix: scroll bar simplif + scheme in macos

* fix: magic variables to const

* refactor: extract panel ref state

* refactor: remove dead code, simple macos theme

app/assets/stylesheets/_main.scss

@@ -203,11 +203,6 @@ $footer-height: 2rem;
     position: relative;
     overflow: hidden;
 
-    .scrollable {
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-
     > .content {
       height: 100%;
       max-height: 100%;

app/assets/stylesheets/_navigation.scss

@@ -1,9 +1,13 @@
-#tags-column {
-  width: 100%;
+@import './scrollbar';
+
+#navigation .scrollable {
+  @include minimal_scrollbar();
+  height: 100%;
+  background-color: var(--sn-stylekit-background-color);
 }
 
-.tags {
-  width: 180px;
+#navigation {
+  width: 100%;
   flex-grow: 0;
 
   user-select: none;
@@ -12,42 +16,21 @@
   -webkit-user-select: none;
 
   &,
-  #tags-content {
-    background-color: var(--sn-stylekit-secondary-background-color);
+  #navigation-content {
     display: flex;
     flex-direction: column;
+    background-color: var(--sn-stylekit-secondary-background-color);
   }
 
-  .tags-title-section {
+  .section-title-bar {
     color: var(--sn-stylekit-secondary-foreground-color);
     padding-top: 15px;
     padding-bottom: 8px;
-    padding-left: 12px;
-    padding-right: 12px;
+    padding-left: 14px;
+    padding-right: 14px;
     font-size: 12px;
   }
 
-  .scrollable {
-    height: 100%;
-  }
-
-  .infinite-scroll {
-    overflow-x: hidden;
-    height: inherit;
-
-    // Autohide scrollbar on Windows.
-    @at-root {
-      .windows-web &,
-      .windows-desktop & {
-        overflow-y: hidden;
-        &:hover {
-          overflow-y: auto;
-          overflow-y: overlay; // overlay is not supported on ff, so keep previous statement up
-        }
-      }
-    }
-  }
-
   .no-tags-placeholder {
     padding: 0px 12px;
     font-size: 12px;
@@ -80,12 +63,13 @@
     }
   }
 
-  .tag {
+  .tag,
+  .root-drop {
     font-size: 14px;
     line-height: 18px;
 
     min-height: 30px;
-    padding: 5px 12px;
+    padding: 5px 14px;
     cursor: pointer;
     transition: height 0.1s ease-in-out;
     position: relative;

app/assets/stylesheets/_notes.scss

@@ -1,3 +1,5 @@
+@import './scrollbar';
+
 notes-view {
   width: 350px;
 }
@@ -101,25 +103,10 @@ notes-view {
     }
   }
 
-  .scrollable {
-    height: 100%;
-  }
-
   .infinite-scroll {
-    overflow-x: hidden;
+    @include minimal_scrollbar();
     height: inherit;
-
-    // Autohide scrollbar on Windows.
-    @at-root {
-      .windows-web &,
-      .windows-desktop & {
-        overflow-y: hidden;
-        &:hover {
-          overflow-y: auto;
-          overflow-y: overlay; // overlay is not supported on ff, so keep previous statement up
-        }
-      }
-    }
+    background-color: var(--sn-stylekit-background-color);
   }
 
   .note {

app/assets/stylesheets/_scrollbar.scss

@@ -0,0 +1,9 @@
+@mixin minimal_scrollbar() {
+  overflow-x: hidden;
+  overflow-y: hidden;
+
+  &:hover {
+    overflow-y: auto;
+    overflow-y: overlay;
+  }
+}

app/assets/stylesheets/index.css.scss

@@ -2,7 +2,7 @@
 @import 'main';
 @import 'ui';
 @import 'footer';
-@import 'tags';
+@import 'navigation';
 @import 'notes';
 @import 'editor';
 @import 'menus';