feat: DEV-1536: user created labels for Taxonomy (#483)

* fix Taxonomy styles

* display tree structure even on search

* feat: add userLabels to annotation and Taxonomy

* Add user labels to Taxonomy

* Add styles to user labels in taxonomy

* Add new label form into every subtree; add styles

* Distinguish labels from current and prev sessions

Labels from current session can be renamed or removed
Add `origin` to UserLabels store to keep track of them
Color session labels in blue

* Add dropdown to every label with "Add Inside"

That's the only action for now to add new labels
Changed UX of this small form - correct blur, saving and cancelling

* some comments

* Fix top level "add new label" form - button+styles

* Allow to delete session labels

also fix styles of right extra block - count and actions

* Hide user labels behind feature flag

* fix style of taxonomy selected items

* fix crash during search in deep trees

* fix appearance on search: open all, hide extra

- don't show counts and context menu
- don't show +Add button
- always open all the levels

* fix jumping when user select first item

Author: hlomzik

src/assets/icons/chevron.svg

@@ -7,45 +7,49 @@
   position: relative;
 
   & > span {
-    display: inline-block;
-    line-height: 32px;
-    padding: 0 5px; // 4px padding + 1px border to stay on the same indent as selected
+    display: flex;
+    align-items: center;
+    line-height: 30px;
+    padding: 0 4px; // 4px padding to stay on the same indent as selected
     margin-bottom: 4px; // also replaces padding to be consistent with selected divs
     white-space: nowrap;
     cursor: pointer;
-
-    &::after {
-      content: "";
-      display: inline-block;
-      margin-left: 6px;
-      border-width: 9px 5px 0;
-      border-color: #444 transparent transparent;
-      border-style: solid;
-    }
   }
 }
 
-.taxonomy_open > span::after {
+.taxonomy > span > svg {
   transform: rotate(-180deg);
 }
+.taxonomy_open > span > svg {
+  transform: none;
+}
 
 .taxonomy__selected {
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
+  min-height: 28px; // 24px button + 4px margin
 
   div {
-    margin: 0 4px 4px 0;
-    background: #f4f4f4;
-    padding: 2px 4px;
-    border: 1px solid #d9d9d9;
+    margin: 0 2px 4px 0;
+    background: hsl(0, 0%, 95%);
+    padding: 0; // all the right space should be a clickable button, so no padding
+    padding-left: 8px;
     border-radius: 4px;
+    display: flex;
+    align-items: center;
   }
 
   input[type=button] {
     border: none;
     background: none;
     cursor: pointer;
-    padding: 6px 0 6px 12px;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    line-height: 1;
+    font-weight: 500;
+    font-size: 20px;
+    color: #09f;
 
     &:hover {
       color: red;
@@ -58,15 +62,14 @@
   z-index: 10;
   background: white;
   border-radius: 6px;
-  padding: 8px;
   max-height: 60vh;
   overflow-y: auto;
   left: -1px;
   width: max-content;
   min-width: 100%;
   max-width: 50vw; // 100% is not enough
-  margin-top: 9px; // 4px padding + 1px border + 4px gap
-  box-shadow: 0 0 4px #d9d9d9;
+  border: 1px solid #e2e2e2;
+  box-shadow: 0 4px 10px rgb(0 0 0 / 12%);
 
   input[type=checkbox] {
     margin-right: 4px;
@@ -85,14 +88,21 @@
 
 .taxonomy__search {
   width: 100%;
-  border: 1px solid #d9d9d9;
-  border-radius: 3px;
+  border: none;
+  border-bottom: 1px solid #e2e2e2;
+  border-radius: 3px 3px 0 0;
   padding: 6px 16px;
   margin-bottom: 4px;
   box-shadow: 0 -2px 0 6px white; // white background over scrolled items
   position: sticky;
   top: 0;
   z-index: 1;
+
+  &:focus,
+  &:focus-visible {
+    outline: 1px solid #09f;
+    border-bottom-color: #09f;
+  }
 }
 
 .taxonomy__item ~ div {
@@ -106,29 +116,110 @@
   &:focus-within {
     background: #eee;
   }
+
+  &_user,
+  &_session {
+    font-style: italic;
+  }
+
+  &_session {
+    color: #09f;
+  }
 }
 
 .taxonomy__item label {
   flex-grow: 1;
   flex-shrink: 0;
   line-height: 2em;
+  padding-right: 8px;
 }
 
 .taxonomy__grouping {
   font-family: monospace;
   font-size: 16px;
   display: inline-block;
-  width: 20px;
-  margin-left: -2px;
+  width: 24px;
+  height: 24px;
+  margin-left: 3px;
   text-align: center;
   user-select: none;
   flex-shrink: 0;
 
+  svg {
+    transition: transform 0.1s; // visible rotation of arrow
+  }
+
   &:not(:empty) {
     cursor: pointer;
   }
 }
 
+.taxonomy__extra {
+  margin-left: auto;
+  opacity: 0.6;
+  padding: 0 12px;
+  min-width: 40px; // 24px padding + 16px width for count/dots
+  text-align: right;
+
+  &_actions {
+    display: none;
+    font-weight: bold;
+    cursor: pointer;
+    text-align: center;
+  }
+
+  .taxonomy__item:hover &_count:not(:last-child) {
+    display: none;
+  }
+  .taxonomy__item:hover &_actions {
+    display: block;
+  }
+}
+
+.taxonomy__action {
+  zoom: 1; // something to apply this class
+}
+
+.taxonomy__add {
+  margin-left: 27px; // chevron 24px + 3px margin
+  display: flex;
+  align-items: center;
+  opacity: 0.6;
+
+  &::before {
+    content: "+";
+    width: 16px; // as checkbox
+    padding: 4px 0;
+    text-align: center;
+    font-size: 18px;
+    line-height: 0;
+  }
+
+  button {
+    flex-grow: 1;
+    border: none;
+    padding: 1px 4px;
+    font-weight: normal;
+    text-align: left;
+  }
+}
+
+.taxonomy__newitem {
+  display: flex;
+
+  [name=taxonomy__add] {
+    padding: 1px 2px;
+    border: none;
+    flex-grow: 1;
+    margin-left: 45px;
+    margin-right: 8px;
+    font: inherit;
+    font-style: italic;
+    color: #09f;
+    background: rgba(0,0,0,0.03);
+  }
+}
+
 .taxonomy__collapsable {
   cursor: pointer;
 }