add filter button to browse

blocks/browse/da-list/da-list.css

@@ -71,6 +71,29 @@ da-list-item.is-expanded::after {
   justify-content: start;
 }
 
+.da-browse-filter {
+  cursor: pointer;
+  background: none;
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px;
+  height: 18px;
+}
+
+.da-browse-filter img {
+  opacity: 0.4;
+}
+
+.da-browse-filter.selected img {
+  opacity: 1;
+}
+
+.da-browse-filter:hover img {
+  opacity: 1;
+}
+
 .da-browse-header-name {
   position: relative;
   margin: 0;
@@ -79,11 +102,41 @@ da-list-item.is-expanded::after {
   background: none;
   text-transform: uppercase;
   line-height: 18px;
+  font-size: 14px;
   color: var(--s2-gray-700);
+  font-family: var(--body-font-family);
   font-weight: 700;
   cursor: pointer;
 }
 
+.da-browse-header-container input {
+  padding: 0;
+  border: none;
+  display: none;
+  font-family: var(--body-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  color: var(--s2-gray-800);
+}
+
+.da-browse-header-container input::placeholder {
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #8f8f8f;
+}
+
+.da-browse-header-container .hide {
+  display: none;
+}
+
+.da-browse-header-container input.show {
+  display: block;
+}
+
+.da-browse-header-container input:focus {
+  outline: none;
+}
+
 .da-browse-header-name:hover::after {
   position: absolute;
   content: '';
@@ -100,7 +153,6 @@ da-list-item.is-expanded::after {
   position: absolute;
   content: '';
   right: -20px;
-  top: 0;
   width: 18px;
   height: 18px;
   filter: invert(26%) sepia(0%) saturate(946%) hue-rotate(145deg) brightness(102%) contrast(81%);

blocks/browse/da-list/da-list.js

@@ -28,6 +28,8 @@ export default class DaList extends LitElement {
     newItem: { attribute: false },
     _permissions: { state: true },
     _listItems: { state: true },
+    _filter: { state: true },
+    _showFilter: { state: true },
     _selectedItems: { state: true },
     _dropFiles: { state: true },
     _dropMessage: { state: true },
@@ -39,6 +41,7 @@ export default class DaList extends LitElement {
     this._dropFiles = [];
     this._dropMessage = 'Drop content here';
     this._lastCheckedIndex = null;
+    this._filter = '';
   }
 
   connectedCallback() {
@@ -378,6 +381,28 @@ export default class DaList extends LitElement {
     this.handleSort(this._sortDate, 'lastModified');
   }
 
+  toggleFilterView() {
+    this._filter = '';
+    this._showFilter = !this._showFilter;
+    const filterInput = this.shadowRoot?.querySelector('input[name="filter"]');
+    filterInput.value = '';
+    if (this._showFilter) {
+      this.wait(1).then(() => { filterInput.focus(); });
+    }
+  }
+
+  handleFilterBlur(e) {
+    if (e.target.value === '') {
+      this._showFilter = false;
+    }
+  }
+
+  handleNameFilter(e) {
+    this._sortName = undefined;
+    this._sortDate = undefined;
+    this._filter = e.target.value;
+  }
+
   get isSelectAll() {
     const selectCount = this._listItems.filter((item) => item.isChecked).length;
     return selectCount === this._listItems.length && this._listItems.length !== 0;
@@ -440,21 +465,33 @@ export default class DaList extends LitElement {
   }
 
   render() {
+    const filteredItems = this._listItems.filter((item) => item.name.includes(this._filter));
+
     return html`
       <div class="da-browse-panel-header">
         ${this.renderCheckBox()}
         <div class="da-browse-sort">
-          <span></span>
+          <!-- Toggle button is split into 2 buttons (enable/disable) to prevent bug re-toggling on blur event -->
+          ${!this._showFilter ? html`
+            <button class="da-browse-filter" name="toggle-filter" @click=${() => this.toggleFilterView()}>
+              <img class="toggle-icon-dark" width="20" src="/blocks/browse/da-browse/img/Filter20.svg" />
+            </button>
+          ` : html`
+            <button class="da-browse-filter selected" name="toggle-filter" @click=${() => this.toggleFilterView()}>
+              <img class="toggle-icon-dark" width="20" src="/blocks/browse/da-browse/img/Filter20.svg" />
+            </button>
+          `}
           <div class="da-browse-header-container">
-            <button class="da-browse-header-name ${this._sortName}" @click=${this.handleNameSort}>Name</button>
+            <input @blur=${this.handleFilterBlur} name="filter" class=${this._showFilter ? 'show' : nothing} @change=${this.handleNameFilter} @keyup=${this.handleNameFilter} type="text" placeholder="Filter">
+            <button class="da-browse-header-name ${this._sortName} ${this._showFilter ? 'hide' : ''}" @click=${this.handleNameSort}>Name</button>
           </div>
           <div class="da-browse-header-container">
             <button class="da-browse-header-name ${this._sortDate}" @click=${this.handleDateSort}>Modified</button>
           </div>
         </div>
       </div>
       <div class="da-browse-panel" @dragenter=${this.drag ? this.dragenter : nothing} @dragleave=${this.drag ? this.dragleave : nothing}>
-        ${this._listItems?.length > 0 ? this.renderList(this._listItems, true) : this.renderEmpty()}
+        ${filteredItems?.length > 0 ? this.renderList(filteredItems, true) : this.renderEmpty()}
         ${this.drag ? this.renderDropArea() : nothing}
       </div>
       <da-actionbar