🩹(frontend) small ui improvement

- center initial loader before app load
- add name on input to remove warning
- fix hover on interlinking link

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

@@ -880,14 +880,15 @@ test.describe('Doc Editor', () => {
     // Wait for the interlink to be created and rendered
     const editor = await getEditor({ page });
 
-    const interlinkChild2 = editor.getByRole('button', {
-      name: docChild2,
-    });
+    const interlinkChild = editor
+      .locator('.--docs--interlinking-link-inline-content')
+      .first();
 
-    await expect(interlinkChild2).toBeVisible({ timeout: 10000 });
-    await expect(interlinkChild2).toContainText('😀');
-    await expect(interlinkChild2.locator('svg').first()).toBeHidden();
-    await interlinkChild2.click();
+    await expect(interlinkChild).toBeVisible({ timeout: 10000 });
+    await expect(interlinkChild).toContainText('😀');
+    await expect(interlinkChild).toContainText(docChild2);
+    await expect(interlinkChild.locator('svg').first()).toBeHidden();
+    await interlinkChild.click();
 
     await verifyDocName(page, docChild2);
 
@@ -897,11 +898,9 @@ test.describe('Doc Editor', () => {
     await input.fill(docChild1);
     await searchContainer.getByText(docChild1).click();
 
-    const interlinkChild1 = editor.getByRole('button', {
-      name: docChild1,
-    });
-    await expect(interlinkChild1).toBeVisible({ timeout: 10000 });
-    await expect(interlinkChild1.locator('svg').first()).toBeVisible();
+    await expect(interlinkChild).toContainText(docChild1);
+    await expect(interlinkChild).toBeVisible({ timeout: 10000 });
+    await expect(interlinkChild.locator('svg').first()).toBeVisible();
 
     await page.keyboard.press('@');
 

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

@@ -527,7 +527,7 @@ test.describe('Doc Export', () => {
 
     await verifyDocName(page, docChild);
 
-    await page.locator('.bn-block-outer').last().fill('/');
+    const editor = await openSuggestionMenu({ page });
     await page.getByText('Link a doc').first().click();
 
     const input = page.locator(
@@ -544,12 +544,11 @@ test.describe('Doc Export', () => {
     await searchContainer.getByText(randomDoc).click();
 
     // Search the interlinking link in the editor (not in the document tree)
-    const editor = page.locator('.ProseMirror.bn-editor');
-    const interlink = editor.getByRole('button', {
-      name: randomDoc,
-    });
+    const interlink = editor
+      .locator('.--docs--interlinking-link-inline-content')
+      .first();
 
-    await expect(interlink).toBeVisible();
+    await expect(interlink).toContainText(randomDoc);
 
     const downloadPromise = page.waitForEvent('download', (download) => {
       return download.suggestedFilename().includes(`${docChild}.pdf`);
@@ -593,7 +592,7 @@ test.describe('Doc Export', () => {
 
     await verifyDocName(page, docChild);
 
-    await page.locator('.bn-block-outer').last().fill('/');
+    const editor = await openSuggestionMenu({ page });
     await page.getByText('Link a doc').first().click();
 
     const input = page.locator(
@@ -610,12 +609,11 @@ test.describe('Doc Export', () => {
     await searchContainer.getByText(randomDoc).click();
 
     // Search the interlinking link in the editor (not in the document tree)
-    const editor = page.locator('.ProseMirror.bn-editor');
-    const interlink = editor.getByRole('button', {
-      name: randomDoc,
-    });
+    const interlink = editor
+      .locator('.--docs--interlinking-link-inline-content')
+      .first();
 
-    await expect(interlink).toBeVisible();
+    await expect(interlink).toContainText(randomDoc);
 
     await page
       .getByRole('button', {

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx

@@ -79,10 +79,12 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => {
 
   return (
     <BoxButton
+      as="span"
+      className="--docs--interlinking-link-inline-content"
       onClick={handleClick}
       draggable="false"
       $css={css`
-        display: contents;
+        display: inline;
         padding: 0.1rem 0.4rem;
         border-radius: 4px;
         & svg {
@@ -91,7 +93,9 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => {
           margin-right: 0.2rem;
         }
         &:hover {
-          background-color: ${colorsTokens['gray-100']};
+          background-color: var(
+            --c--contextuals--background--semantic--contextual--primary
+          );
         }
         transition: background-color var(--c--globals--transitions--duration)
           var(--c--globals--transitions--ease-out);

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx

@@ -171,6 +171,7 @@ export const SearchPage = ({
         {trigger}
         <Box
           as="input"
+          name="doc-search-input"
           $padding={{ left: '3px' }}
           $css={inputStyle}
           ref={inputRef}

src/frontend/apps/impress/src/pages/globals.css

@@ -10,6 +10,12 @@ body {
   padding: 0;
 }
 
+/* stylelint-disable-next-line selector-id-pattern */
+body > #__next > .c__app > div:has(> .c__loader) {
+  min-height: 100vh;
+  width: 100vw;
+}
+
 * {
   box-sizing: border-box;
 }