explorer: Failed query notices don't disappear

Resolves #1716

explorer/src/lib/components/__tests__/Navbar.spec.js

@@ -10,6 +10,22 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({
   unobserve: vi.fn(),
 }));
 
+/** @param {HTMLElement} container */
+const getNotificationElement = (container) =>
+  container.querySelector(".dusk-navbar__menu--search-notification");
+
+/** @param {HTMLElement} container */
+async function showSearchNotification(container) {
+  const form = /** @type {HTMLFormElement} */ (container.querySelector("form"));
+  const searchInput = /** @type {HTMLInputElement} */ (
+    form.querySelector("input[type='text']")
+  );
+
+  searchInput.value = "foobar"; // invalid search
+
+  await fireEvent.submit(form);
+}
+
 describe("Navbar", () => {
   /** @type {(navigation: import("@sveltejs/kit").AfterNavigate) => void} */
   let afterNavigateCallback;
@@ -61,4 +77,39 @@ describe("Navbar", () => {
     expect(menu).toHaveClass("dusk-navbar__menu--hidden");
     expect(btnMenuToggle).toHaveAttribute("aria-expanded", "false");
   });
+
+  it("should hide the search notification when its close button is clicked", async () => {
+    const { container } = render(Navbar);
+
+    expect(getNotificationElement(container)).toBeNull();
+
+    await showSearchNotification(container);
+
+    expect(getNotificationElement(container)).toBeInTheDocument();
+
+    const btnClose = /** @type {HTMLButtonElement} */ (
+      container.querySelector(".search-notification__header-action")
+    );
+
+    await fireEvent.click(btnClose);
+
+    expect(getNotificationElement(container)).toBeNull();
+  });
+
+  it("should hide the search notification after a navigation event", async () => {
+    const { container } = render(Navbar);
+
+    expect(getNotificationElement(container)).toBeNull();
+
+    await showSearchNotification(container);
+
+    expect(getNotificationElement(container)).toBeInTheDocument();
+
+    await act(() => {
+      // @ts-expect-error we don't care for navigation details
+      afterNavigateCallback();
+    });
+
+    expect(getNotificationElement(container)).toBeNull();
+  });
 });

explorer/src/lib/components/navbar/Navbar.svelte

@@ -58,6 +58,7 @@
 
   afterNavigate(() => {
     hidden = true;
+    showSearchNotification = false;
   });
 </script>