🎨(frontend) standalone component DocTagPublic

We want to rerender the public tag when we update
the visibility of a document. The problem is that
the public tag is not a standalone component, so
to have it rerender we needed to rerender the whole
document, it is not visually nice.
We created a standalone component for
the public tag, so when we update the visibility
of a document, only the public tag will be rerender.

src/frontend/apps/e2e/__tests__/app-impress/common.ts

@@ -67,6 +67,12 @@ export const createDoc = async (
       await page.locator('.c__modal__backdrop').click({
         position: { x: 0, y: 0 },
       });
+
+      await expect(
+        page
+          .getByLabel('It is the card information about the document.')
+          .getByText('Public'),
+      ).toBeVisible();
     }
   }
 

src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx

@@ -13,6 +13,7 @@ import {
 import { ModalVersion, Versions } from '@/features/docs/doc-versioning';
 import { useDate } from '@/hook';
 
+import { DocTagPublic } from './DocTagPublic';
 import { DocToolBox } from './DocToolBox';
 
 interface DocHeaderProps {
@@ -84,18 +85,7 @@ export const DocHeader = ({ doc, versionId }: DocHeaderProps) => {
           $wrap="wrap"
         >
           <Box $direction="row" $align="center" $gap="0.5rem 2rem" $wrap="wrap">
-            {doc.is_public && (
+            <DocTagPublic />
-              <Text
-                $weight="bold"
-                $background={colorsTokens()['primary-600']}
-                $color="white"
-                $padding="xtiny"
-                $radius="3px"
-                $size="s"
-              >
-                {t('Public')}
-              </Text>
-            )}
             <Text $size="s" $display="inline">
               {t('Created at')} <strong>{formatDate(doc.created_at)}</strong>
             </Text>

src/frontend/apps/impress/src/features/docs/doc-header/components/DocTagPublic.tsx

@@ -0,0 +1,39 @@
+import { useRouter } from 'next/router';
+import { useTranslation } from 'react-i18next';
+
+import { Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { KEY_DOC_VISIBILITY, useDoc } from '@/features/docs/doc-management';
+
+export const DocTagPublic = () => {
+  const { colorsTokens } = useCunninghamTheme();
+  const { t } = useTranslation();
+  const {
+    query: { id },
+  } = useRouter();
+
+  const { data: doc } = useDoc(
+    { id: id as string },
+    {
+      enabled: !!id,
+      queryKey: [KEY_DOC_VISIBILITY, { id }],
+    },
+  );
+
+  if (!doc?.is_public) {
+    return null;
+  }
+
+  return (
+    <Text
+      $weight="bold"
+      $background={colorsTokens()['primary-600']}
+      $color="white"
+      $padding="xtiny"
+      $radius="3px"
+      $size="s"
+    >
+      {t('Public')}
+    </Text>
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-management/api/useDoc.tsx

@@ -19,6 +19,7 @@ export const getDoc = async ({ id }: DocParams): Promise<Doc> => {
 };
 
 export const KEY_DOC = 'doc';
+export const KEY_DOC_VISIBILITY = 'doc-visibility';
 
 export function useDoc(
   param: DocParams,

src/frontend/apps/impress/src/features/docs/doc-management/components/DocVisibility.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Box, Card, IconBG } from '@/components';
 
-import { KEY_DOC, KEY_LIST_DOC, useUpdateDoc } from '../api';
+import { KEY_DOC_VISIBILITY, KEY_LIST_DOC, useUpdateDoc } from '../api';
 import { Doc } from '../types';
 
 interface DocVisibilityProps {
@@ -30,7 +30,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
         },
       );
     },
-    listInvalideQueries: [KEY_LIST_DOC],
+    listInvalideQueries: [KEY_LIST_DOC, KEY_DOC_VISIBILITY],
   });
 
   return (