web: clear query when search is closed (#7700)

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

apps/web/__e2e__/search.test.ts

@@ -0,0 +1,55 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { test, expect } from "@playwright/test";
+import { AppModel } from "./models/app.model";
+import { getTestId } from "./utils";
+
+test("closing search via close button should clear query", async ({ page }) => {
+  const app = new AppModel(page);
+  await app.goto();
+  let searchinput = page.locator(getTestId("search-input"));
+  const searchButton = page.locator(getTestId("search-button"));
+  const openSearch = page.locator(getTestId("open-search"));
+
+  await openSearch.click();
+  await page.keyboard.type("test");
+  await page.waitForTimeout(500);
+  await searchButton.click();
+  await openSearch.click();
+
+  expect(await searchinput.inputValue()).toBe("");
+});
+
+test("closing search via keyboard escape button should not clear query", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const searchinput = page.locator(getTestId("search-input"));
+  const openSearch = page.locator(getTestId("open-search"));
+
+  await openSearch.click();
+  await page.keyboard.type("test");
+  await page.waitForTimeout(500);
+  await page.keyboard.press("Escape");
+  await openSearch.click();
+
+  expect(await searchinput.inputValue()).toBe("test");
+});

apps/web/src/components/route-container/index.tsx

@@ -110,10 +110,29 @@ function Header(props: RouteContainerProps) {
             onClick: () =>
               useSearchStore.setState({
                 isSearching: false,
-                searchType: undefined
+                searchType: undefined,
+                query: undefined
               })
           }}
         />
+        {!isMobile && buttons?.create && (
+          <Button
+            {...buttons.create}
+            data-test-id={`${type}-action-button`}
+            sx={{ p: 0 }}
+          >
+            <Plus
+              color="accentForeground"
+              size={18}
+              sx={{
+                height: 24,
+                width: 24,
+                bg: "accent",
+                borderRadius: 100
+              }}
+            />
+          </Button>
+        )}
       </Flex>
     );