✨(frontend) implement document favorites feature

- Added functionality to mark documents as favorites, including new
hooks `useMakeFavoriteDoc` and `useRemoveFavoriteDoc` for managing
favorite status.
- Enhanced the document management API to support favorite filtering
with the `is_favorite` parameter.
- Created a new e2e test for the favorite workflow to ensure proper
functionality.
- Updated the UI components to reflect favorite status, including
changes in `DocsGridActions`, `DocsGridItem`, and the new
`LeftPanelFavorites` component for displaying pinned documents.
- Adjusted SVG assets for better visual representation of pinned
documents.

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

@@ -0,0 +1,74 @@
+import { expect, test } from '@playwright/test';
+
+import { createDoc, verifyDocName } from './common';
+
+type SmallDoc = {
+  id: string;
+  title: string;
+};
+
+test.describe('Document favorite', () => {
+  test('it check the favorite workflow', async ({ page, browserName }) => {
+    const id = Math.random().toString(7);
+    await page.goto('/');
+
+    // Create document
+    const createdDoc = await createDoc(page, `Doc ${id}`, browserName, 1);
+    await verifyDocName(page, createdDoc[0]);
+
+    // Reload page
+    await page.reload();
+    await page.goto('/');
+
+    // Get all documents
+    let docs: SmallDoc[] = [];
+    const response = await page.waitForResponse(
+      (response) =>
+        response.url().endsWith('documents/?page=1') &&
+        response.status() === 200,
+    );
+    const result = await response.json();
+    docs = result.results as SmallDoc[];
+    await page.getByRole('heading', { name: 'All docs' }).click();
+    await expect(page.getByText(`Doc ${id}`)).toBeVisible();
+    const doc = docs.find((doc) => doc.title === createdDoc[0]) as SmallDoc;
+
+    // Check document
+    expect(doc).not.toBeUndefined();
+    expect(doc?.title).toBe(createdDoc[0]);
+
+    // Open document actions
+    const button = page.getByTestId(`docs-grid-actions-button-${doc.id}`);
+    await expect(button).toBeVisible();
+    await button.click();
+
+    // Pin document
+    const pinButton = page.getByTestId(`docs-grid-actions-pin-${docs[0].id}`);
+    await expect(pinButton).toBeVisible();
+    await pinButton.click();
+
+    // Check response
+    const responsePin = await page.waitForResponse(
+      (response) =>
+        response.url().includes(`documents/${doc.id}/favorite/`) &&
+        response.status() === 201,
+    );
+    expect(responsePin.ok()).toBeTruthy();
+
+    // Check left panel favorites
+    const leftPanelFavorites = page.getByTestId('left-panel-favorites');
+    await expect(leftPanelFavorites).toBeVisible();
+    await expect(leftPanelFavorites.getByText(`Doc ${id}`)).toBeVisible();
+
+    //
+    await button.click();
+    const unpinButton = page.getByTestId(
+      `docs-grid-actions-unpin-${docs[0].id}`,
+    );
+    await expect(unpinButton).toBeVisible();
+    await unpinButton.click();
+
+    // Check left panel favorites
+    await expect(leftPanelFavorites.getByText(`Doc ${id}`)).toBeHidden();
+  });
+});

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

@@ -96,7 +96,7 @@ test.describe('Document grid item options', () => {
     let docs: SmallDoc[] = [];
     const response = await page.waitForResponse(
       (response) =>
-        response.url().includes('documents/?page=1') &&
+        response.url().endsWith('documents/?page=1') &&
         response.status() === 200,
     );
     const result = await response.json();
@@ -124,7 +124,7 @@ test.describe('Document grid item options', () => {
 
     const refetchResponse = await page.waitForResponse(
       (response) =>
-        response.url().includes('documents/?page=1') &&
+        response.url().endsWith('documents/?page=1') &&
         response.status() === 200,
     );
 
@@ -189,7 +189,7 @@ test.describe('Documents filters', () => {
     await expect(page.getByTestId('docs-grid-loader')).toBeVisible();
     const response = await page.waitForResponse(
       (response) =>
-        response.url().includes('documents/?page=1') &&
+        response.url().endsWith('documents/?page=1') &&
         response.status() === 200,
     );
     const result = await response.json();
@@ -230,7 +230,7 @@ test.describe('Documents filters', () => {
     await expect(page.getByTestId('docs-grid-loader')).toBeVisible();
     const responseMyDocs = await page.waitForResponse(
       (response) =>
-        response.url().includes('documents/?page=1&is_creator_me=true') &&
+        response.url().endsWith('documents/?page=1&is_creator_me=true') &&
         response.status() === 200,
     );
     const resultMyDocs = await responseMyDocs.json();
@@ -268,7 +268,7 @@ test.describe('Documents Grid', () => {
 
     const response = await page.waitForResponse(
       (response) =>
-        response.url().includes('documents/?page=1') &&
+        response.url().endsWith('documents/?page=1') &&
         response.status() === 200,
     );
     const result = await response.json();
@@ -294,13 +294,13 @@ test.describe('Documents Grid', () => {
     let docs: SmallDoc[] = [];
     const responsePromisePage1 = page.waitForResponse(
       (response) =>
-        response.url().includes(`/documents/?page=1`) &&
+        response.url().endsWith(`/documents/?page=1`) &&
         response.status() === 200,
     );
 
     const responsePromisePage2 = page.waitForResponse(
       (response) =>
-        response.url().includes(`/documents/?page=2`) &&
+        response.url().endsWith(`/documents/?page=2`) &&
         response.status() === 200,
     );