✨(frontend) implement document search functionality

- Added a new DocSearchModal component for searching documents.
- Introduced DocSearchItem component to display individua
 document results.
- Enhanced the useDocs API to support title-based searching.
- Implemented e2e tests for document search visibility and
functionality.
- Included an empty state illustration for no search results.
- Updated the LeftPanelHeader to open the document search modal.

src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts

@@ -0,0 +1,114 @@
+import { expect, test } from '@playwright/test';
+import { DateTime } from 'luxon';
+
+import { createDoc, verifyDocName } from './common';
+
+type SmallDoc = {
+  id: string;
+  title: string;
+  updated_at: string;
+};
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test.describe('Document search', () => {
+  test('it checks all elements are visible', async ({ page }) => {
+    await page.getByRole('button', { name: 'search' }).click();
+    await expect(
+      page.getByRole('img', { name: 'No active search' }),
+    ).toBeVisible();
+
+    await expect(
+      page.getByLabel('Search modal').getByText('search'),
+    ).toBeVisible();
+
+    await expect(
+      page.getByPlaceholder('Type the name of a document'),
+    ).toBeVisible();
+  });
+
+  test('it checks search for a document', async ({ page, browserName }) => {
+    const id = Math.random().toString(36).substring(7);
+
+    const doc1 = await createDoc(page, `My super ${id} doc`, browserName, 1);
+    await verifyDocName(page, doc1[0]);
+    await page.goto('/');
+    const doc2 = await createDoc(
+      page,
+      `My super ${id} very doc`,
+      browserName,
+      1,
+    );
+    await verifyDocName(page, doc2[0]);
+    await page.goto('/');
+    await page.getByRole('button', { name: 'search' }).click();
+    await page.getByPlaceholder('Type the name of a document').click();
+    await page
+      .getByPlaceholder('Type the name of a document')
+      .fill(`My super ${id}`);
+
+    let responsePromisePage = page.waitForResponse(
+      (response) =>
+        response.url().includes(`/documents/?page=1&title=My+super+${id}`) &&
+        response.status() === 200,
+    );
+    let response = await responsePromisePage;
+    let result = (await response.json()) as { results: SmallDoc[] };
+    let docs = result.results;
+    expect(docs.length).toEqual(2);
+
+    await Promise.all(
+      docs.map(async (doc: SmallDoc) => {
+        await expect(
+          page.getByTestId(`doc-search-item-${doc.id}`),
+        ).toBeVisible();
+        const updatedAt = DateTime.fromISO(doc.updated_at ?? DateTime.now())
+          .setLocale('en')
+          .toRelative();
+        await expect(
+          page.getByTestId(`doc-search-item-${doc.id}`).getByText(updatedAt!),
+        ).toBeVisible();
+      }),
+    );
+
+    const firstDoc = docs[0];
+
+    await expect(
+      page
+        .getByTestId(`doc-search-item-${firstDoc.id}`)
+        .getByText('keyboard_return'),
+    ).toBeVisible();
+
+    await page
+      .getByPlaceholder('Type the name of a document')
+      .press('ArrowDown');
+
+    const secondDoc = docs[1];
+    await expect(
+      page
+        .getByTestId(`doc-search-item-${secondDoc.id}`)
+        .getByText('keyboard_return'),
+    ).toBeVisible();
+
+    await page.getByPlaceholder('Type the name of a document').click();
+    await page
+      .getByPlaceholder('Type the name of a document')
+      .fill(`My super ${id} doc`);
+
+    responsePromisePage = page.waitForResponse(
+      (response) =>
+        response
+          .url()
+          .includes(`/documents/?page=1&title=My+super+${id}+doc`) &&
+        response.status() === 200,
+    );
+
+    response = await responsePromisePage;
+    result = (await response.json()) as { results: SmallDoc[] };
+    docs = result.results;
+
+    expect(docs.length).toEqual(1);
+  });
+});