feat(core): add status to pdf viewer (#12349)

Closes: [BS-3439](https://linear.app/affine-design/issue/BS-3439/pdf-独立页面split-view-中的-status-组件)
Related to: [BS-3143](https://linear.app/affine-design/issue/BS-3143/更新-loading-和错误样式)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added a dedicated error handling and reload interface for PDF attachments, allowing users to retry loading PDFs when errors occur.

- **Refactor**
  - Improved PDF viewer interface with clearer loading and error states.
  - Enhanced attachment type detection for better performance and maintainability.
  - Streamlined attachment preview logic for more direct and efficient model retrieval.
  - Simplified internal PDF metadata handling and control flow for improved clarity.
  - Clarified conditional rendering logic in attachment viewer components.
  - Introduced explicit loading state management and refined rendering logic in attachment pages.

- **Style**
  - Updated and added styles for PDF viewer controls and error status display.

- **Tests**
  - Added end-to-end tests validating PDF preview error handling and attachment not-found scenarios.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

tests/affine-local/e2e/attachment-preview.spec.ts

@@ -355,7 +355,6 @@ test('should re-render pdf viewer', async ({ page }) => {
 
   const title = getBlockSuiteEditorTitle(page);
   await title.click();
-  await page.keyboard.type('PDF preview');
 
   await page.keyboard.press('Enter');
 
@@ -386,3 +385,78 @@ test('should re-render pdf viewer', async ({ page }) => {
 
   expect(portalId).not.toEqual(newPortalId);
 });
+
+test('should display status when an error is thrown in peek view', async ({
+  context,
+  page,
+}) => {
+  await openHomePage(page);
+  await clickNewPageButton(page);
+  await waitForEmptyEditor(page);
+
+  const title = getBlockSuiteEditorTitle(page);
+  await title.click();
+
+  await page.keyboard.press('Enter');
+
+  await importAttachment(page, 'lorem-ipsum.pdf');
+
+  const attachment = page.locator('affine-attachment');
+  await attachment.click();
+
+  const toolbar = locateToolbar(page);
+
+  // Switches to embed view
+  await toolbar.getByLabel('Switch view').click();
+  await toolbar.getByLabel('Embed view').click();
+
+  await context.setOffline(true);
+
+  await attachment.dblclick();
+
+  // Peek view
+  const pdfViewer = page.getByTestId('pdf-viewer');
+  await expect(pdfViewer).toBeHidden();
+
+  const statusWrapper = page.getByTestId('pdf-viewer-status-wrapper');
+  await expect(statusWrapper).toBeVisible();
+});
+
+test('should display 404 when attachment is not found', async ({ page }) => {
+  await openHomePage(page);
+  await clickNewPageButton(page);
+  await waitForEmptyEditor(page);
+
+  const title = getBlockSuiteEditorTitle(page);
+  await title.click();
+
+  await page.keyboard.press('Enter');
+
+  await importAttachment(page, 'lorem-ipsum.pdf');
+
+  const attachment = page.locator('affine-attachment');
+  await attachment.click();
+
+  const toolbar = locateToolbar(page);
+
+  // Switches to embed view
+  await toolbar.getByLabel('Switch view').click();
+  await toolbar.getByLabel('Embed view').click();
+
+  await attachment.dblclick();
+
+  // Peek view
+  const pdfViewer = page.getByTestId('pdf-viewer');
+  await expect(pdfViewer).toBeVisible();
+
+  const statusWrapper = page.getByTestId('pdf-viewer-status-wrapper');
+  await expect(statusWrapper).toBeHidden();
+
+  await clickPeekViewControl(page, 1);
+
+  await page.goto(page.url() + 'test');
+
+  await expect(pdfViewer).toBeHidden();
+
+  await expect(page.getByTestId('not-found')).toBeVisible();
+});