Render saved search editor dialog and bookmark controls

Previous commits added the components for the saved search editor dialog
and bookmark controls. This commit renders those controls component (which then renders the dialog component)

The controls only appear for authenticated users.

Author: jcscottiii

frontend/src/static/js/components/webstatus-overview-filters.ts

@@ -22,6 +22,7 @@ import {
   css,
   html,
   PropertyValueMap,
+  nothing,
 } from 'lit';
 import {customElement, property, state} from 'lit/decorators.js';
 import {type components} from 'webstatus.dev-backend';
@@ -62,9 +63,11 @@ import {Toast} from '../utils/toast.js';
 import {navigateToUrl} from '../utils/app-router.js';
 import {
   AppBookmarkInfo,
+  SavedSearchScope,
   savedSearchHelpers,
 } from '../contexts/app-bookmark-info-context.js';
-import {VOCABULARY} from '../utils/constants.js';
+import {UserSavedSearch, VOCABULARY} from '../utils/constants.js';
+import {User, firebaseUserContext} from '../contexts/firebase-user-context.js';
 
 const WEBSTATUS_FEATURE_OVERVIEW_CSV_FILENAME =
   'webstatus-feature-overview.csv';
@@ -82,8 +85,14 @@ export class WebstatusOverviewFilters extends LitElement {
   @property({type: Object})
   appBookmarkInfo?: AppBookmarkInfo;
 
+  @consume({context: firebaseUserContext, subscribe: true})
+  @state()
+  user: User | null | undefined;
+
   _activeQuery: string = '';
 
+  _activeUserSavedSearch?: UserSavedSearch | undefined;
+
   // Whether the export button should be enabled based on export status.
   @state()
   exportDataStatus: TaskStatus = TaskStatus.INITIAL;
@@ -159,6 +168,13 @@ export class WebstatusOverviewFilters extends LitElement {
         this.appBookmarkInfo,
         this.location,
       );
+      const search = savedSearchHelpers.getCurrentSavedSearch(
+        this.appBookmarkInfo,
+        this.location,
+      );
+      if (search?.scope === SavedSearchScope.UserSavedSearch) {
+        this._activeUserSavedSearch = search.value;
+      }
     }
   }
 
@@ -367,6 +383,35 @@ export class WebstatusOverviewFilters extends LitElement {
           <sl-icon slot="prefix" name="search"></sl-icon>
         </sl-button>
       </webstatus-typeahead>
+      ${this.user && this.apiClient
+        ? this.renderSavedSearchControls(this.user, this.apiClient)
+        : nothing}
+    `;
+  }
+
+  renderSavedSearchControls(user: User, apiClient: APIClient): TemplateResult {
+    if (this.typeaheadRef.value === undefined) {
+      return html``;
+    }
+    return html`
+      <sl-popup
+        placement="top-end"
+        autoSize="horizontal"
+        distance="5"
+        active
+        .anchor=${this.typeaheadRef.value}
+      >
+        <div slot="anchor" class="popup-anchor saved-search-controls"></div>
+        <div class="popup-content">
+          <webstatus-saved-search-controls
+            .user=${user}
+            .apiClient=${apiClient}
+            .savedSearch=${this._activeUserSavedSearch}
+            .location=${this.location}
+            .overviewPageQueryInput=${this.typeaheadRef.value}
+          ></webstatus-saved-search-controls>
+        </div>
+      </sl-popup>
     `;
   }