♻️(frontend) reduce props drilling

- Reduce proprs drilling
- Improve state rerendering with useIsCollaborativeEditable

src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx

@@ -54,11 +54,7 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
           $padding={{ horizontal: isDesktop ? '54px' : 'base' }}
           className="--docs--doc-editor-header"
         >
-          {isVersion ? (
+          {isVersion ? <DocVersionHeader /> : <DocHeader doc={doc} />}
-            <DocVersionHeader title={doc.title} />
-          ) : (
-            <DocHeader doc={doc} />
-          )}
         </Box>
 
         <Box

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

@@ -13,6 +13,7 @@ import {
   KEY_DOC,
   KEY_LIST_DOC,
   KEY_SUB_PAGE,
+  useDocStore,
   useTrans,
   useUpdateDoc,
 } from '@/docs/doc-management';
@@ -24,18 +25,15 @@ interface DocTitleProps {
 
 export const DocTitle = ({ doc }: DocTitleProps) => {
   if (!doc.abilities.partial_update) {
-    return <DocTitleText title={doc.title} />;
+    return <DocTitleText />;
   }
 
   return <DocTitleInput doc={doc} />;
 };
 
-interface DocTitleTextProps {
+export const DocTitleText = () => {
-  title?: string;
-}
-
-export const DocTitleText = ({ title }: DocTitleTextProps) => {
   const { isMobile } = useResponsiveStore();
+  const { currentDoc } = useDocStore();
   const { untitledDocument } = useTrans();
 
   return (
@@ -45,7 +43,7 @@ export const DocTitleText = ({ title }: DocTitleTextProps) => {
       $size={isMobile ? 'h4' : 'h2'}
       $variation="1000"
     >
-      {title || untitledDocument}
+      {currentDoc?.title || untitledDocument}
     </Text>
   );
 };

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

@@ -5,11 +5,7 @@ import { useCunninghamTheme } from '@/cunningham';
 
 import { DocTitleText } from './DocTitle';
 
-interface DocVersionHeaderProps {
+export const DocVersionHeader = () => {
-  title?: string;
-}
-
-export const DocVersionHeader = ({ title }: DocVersionHeaderProps) => {
   const { spacingsTokens } = useCunninghamTheme();
 
   const { t } = useTranslation();
@@ -23,7 +19,7 @@ export const DocVersionHeader = ({ title }: DocVersionHeaderProps) => {
         aria-label={t('It is the document title')}
         className="--docs--doc-version-header"
       >
-        <DocTitleText title={title} />
+        <DocTitleText />
         <HorizontalSeparator />
       </Box>
     </>