feat: Improved folders tab search suggestions and UI, b=no-bug, c=common, folders

Author: mr-cheffy

src/zen/common/styles/zen-panel-ui.css

@@ -3,21 +3,24 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-panel[type='arrow'][animate='open'] {
+panel[type='arrow'] {
   @media (-moz-platform: macos) and (-moz-panel-animations) {
     -moz-window-transform: scale(0.3);
-    animation: zen-jello-animation-macos 0.4s ease-out forwards;
-    &[side='bottom'] {
-      /* Animate from the bottom */
-      -zen-window-transform-origin: 0 100%;
-    }
-    :root[zen-right-side='true'] & {
-      /* Animate from the right */
-      -zen-window-transform-origin: 100% 0;
 
+    &[animate='open'] {
+      animation: zen-jello-animation-macos 0.4s ease-out forwards;
       &[side='bottom'] {
-        /* Animate from the bottom right */
-        -zen-window-transform-origin: 100% 100%;
+        /* Animate from the bottom */
+        -zen-window-transform-origin: 0 100%;
+      }
+      :root[zen-right-side='true'] & {
+        /* Animate from the right */
+        -zen-window-transform-origin: 100% 0;
+
+        &[side='bottom'] {
+          /* Animate from the bottom right */
+          -zen-window-transform-origin: 100% 100%;
+        }
       }
     }
   }

src/zen/folders/ZenFolders.mjs

@@ -698,7 +698,7 @@
           items.forEach((item) => item.removeAttribute('selected'));
           const targetItem = items[index];
           targetItem.setAttribute('selected', 'true');
-          targetItem.scrollIntoView({ block: 'nearest' });
+          targetItem.scrollIntoView({ block: 'start', behavior: 'smooth' });
         } else if (event.key === 'Enter') {
           // Enter to select the currently highlighted item
           const highlightedItem = tabsList.querySelector('.folders-tabs-list-item[selected]');
@@ -801,6 +801,13 @@
           this.#popup.hidePopup();
         });
 
+        item.addEventListener('mouseenter', () => {
+          for (const sibling of tabsList.children) {
+            sibling.removeAttribute('selected');
+          }
+          item.setAttribute('selected', 'true');
+        });
+
         tabsList.appendChild(item);
       }
     }

src/zen/folders/zen-folders.css

@@ -360,8 +360,10 @@ zen-folder {
   outline: none !important;
 }
 
-#zen-folder-tabs-popup #zen-folder-tabs-list {
-  padding: 4px;
+#zen-folder-tabs-list {
+  padding: 0 4px;
+  max-height: 248px;
+  overflow-y: auto;
 }
 
 #zen-folder-tabs-popup .zen-folder-tabs-list-search-icon {
@@ -424,8 +426,8 @@ zen-folder {
   direction: ltr;
   padding: 0 var(--tab-inline-padding);
   border-radius: 4px;
+  margin: 2px 0;
 
-  &:hover,
   .folders-tabs-list-item[selected] & {
     background-color: color-mix(in srgb, currentColor, transparent 90%);
   }