♻️(frontend) better handling css doc states

We simplify the way we handle different doc
states (deleted / readonly) in the CSS, we avoid
props drilling and are more component focused.

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

@@ -119,6 +119,10 @@ test.describe('Doc Trashbin', () => {
     await row.getByText(subDocName).click();
     await verifyDocName(page, subDocName);
 
+    await expect(
+      page.locator('.--docs--editor-container.--docs--doc-deleted'),
+    ).toBeVisible();
+
     await expect(page.getByLabel('Alert deleted document')).toBeVisible();
     await expect(page.getByRole('button', { name: 'Share' })).toBeDisabled();
     await expect(page.locator('.bn-editor')).toHaveAttribute(

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

@@ -260,6 +260,10 @@ test.describe('Doc Visibility: Public', () => {
     await expect(card).toBeVisible();
     await expect(card.getByText('Reader')).toBeVisible();
 
+    await expect(
+      otherPage.locator('.--docs--editor-container.--docs--doc-readonly'),
+    ).toBeVisible();
+
     const otherEditor = await getEditor({ page: otherPage });
     await expect(otherEditor).toHaveAttribute('contenteditable', 'false');
     await expect(otherEditor.getByText('Hello Public Viewonly')).toBeVisible();