✨(frontend) improve mobile UX by showing subdocs count

helps users notice root documents have children in mobile view

Signed-off-by: Cyril <c.gromoff@gmail.com>

CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to
 - ✨(frontend) create skeleton component for DocEditor #1491
 - ✨(frontend) add an EmojiPicker in the document tree and title #1381
 - ✨(frontend) ajustable left panel #1456
+- ✨(frontend) improve mobile UX by showing subdocs count #1540
 
 ### Changed
 

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

@@ -1,23 +1,20 @@
 import { useTranslation } from 'react-i18next';
 
-import { Box, HorizontalSeparator, Text } from '@/components';
+import { Box, HorizontalSeparator } from '@/components';
-import { useConfig } from '@/core';
 import { useCunninghamTheme } from '@/cunningham';
 import {
   Doc,
   LinkReach,
-  Role,
   getDocLinkReach,
   useIsCollaborativeEditable,
-  useTrans,
 } from '@/docs/doc-management';
-import { useDate } from '@/hook';
 import { useResponsiveStore } from '@/stores';
 
 import { AlertNetwork } from './AlertNetwork';
 import { AlertPublic } from './AlertPublic';
 import { AlertRestore } from './AlertRestore';
 import { BoutonShare } from './BoutonShare';
+import { DocHeaderInfo } from './DocHeaderInfo';
 import { DocTitle } from './DocTitle';
 import { DocToolBox } from './DocToolBox';
 
@@ -29,27 +26,11 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
   const { spacingsTokens } = useCunninghamTheme();
   const { isDesktop } = useResponsiveStore();
   const { t } = useTranslation();
-  const { transRole } = useTrans();
   const { isEditable } = useIsCollaborativeEditable(doc);
   const docIsPublic = getDocLinkReach(doc) === LinkReach.PUBLIC;
   const docIsAuth = getDocLinkReach(doc) === LinkReach.AUTHENTICATED;
-  const { relativeDate, calculateDaysLeft } = useDate();
-  const { data: config } = useConfig();
   const isDeletedDoc = !!doc.deleted_at;
 
-  let dateToDisplay = t('Last update: {{update}}', {
-    update: relativeDate(doc.updated_at),
-  });
-
-  if (config?.TRASHBIN_CUTOFF_DAYS && doc.deleted_at) {
-    const daysLeft = calculateDaysLeft(
-      doc.deleted_at,
-      config.TRASHBIN_CUTOFF_DAYS,
-    );
-
-    dateToDisplay = `${t('Days remaining:')} ${daysLeft} ${t('days', { count: daysLeft })}`;
-  }
-
   return (
     <>
       <Box
@@ -80,33 +61,8 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
           >
             <Box $gap={spacingsTokens['3xs']} $overflow="auto">
               <DocTitle doc={doc} />
-
               <Box $direction="row">
-                {isDesktop && (
+                <DocHeaderInfo doc={doc} />
-                  <>
-                    <Text
-                      $variation="600"
-                      $size="s"
-                      $weight="bold"
-                      $theme={isEditable ? 'greyscale' : 'warning'}
-                    >
-                      {transRole(
-                        isEditable
-                          ? doc.user_role || doc.link_role
-                          : Role.READER,
-                      )}
-                      &nbsp;·&nbsp;
-                    </Text>
-                    <Text $variation="600" $size="s">
-                      {dateToDisplay}
-                    </Text>
-                  </>
-                )}
-                {!isDesktop && (
-                  <Text $variation="400" $size="s">
-                    {dateToDisplay}
-                  </Text>
-                )}
               </Box>
             </Box>
             {!isDeletedDoc && <DocToolBox doc={doc} />}

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

@@ -0,0 +1,80 @@
+import { t } from 'i18next';
+import React from 'react';
+
+import { Text } from '@/components';
+import { useConfig } from '@/core';
+import { useDate } from '@/hook';
+import { useResponsiveStore } from '@/stores';
+
+import {
+  Doc,
+  Role,
+  useIsCollaborativeEditable,
+  useTrans,
+} from '../../doc-management';
+
+interface DocHeaderInfoProps {
+  doc: Doc;
+}
+
+export const DocHeaderInfo = ({ doc }: DocHeaderInfoProps) => {
+  const { isDesktop } = useResponsiveStore();
+  const { transRole } = useTrans();
+  const { isEditable } = useIsCollaborativeEditable(doc);
+  const { relativeDate, calculateDaysLeft } = useDate();
+  const { data: config } = useConfig();
+
+  const childrenCount = doc.numchild ?? 0;
+
+  const relativeOnly = relativeDate(doc.updated_at);
+
+  let dateToDisplay = t('Last update: {{update}}', {
+    update: relativeOnly,
+  });
+
+  if (config?.TRASHBIN_CUTOFF_DAYS && doc.deleted_at) {
+    const daysLeft = calculateDaysLeft(
+      doc.deleted_at,
+      config.TRASHBIN_CUTOFF_DAYS,
+    );
+
+    dateToDisplay = `${t('Days remaining:')} ${daysLeft} ${t('days', { count: daysLeft })}`;
+  }
+
+  const hasChildren = childrenCount > 0;
+
+  if (isDesktop) {
+    return (
+      <>
+        <Text
+          $variation="600"
+          $size="s"
+          $weight="bold"
+          $theme={isEditable ? 'greyscale' : 'warning'}
+        >
+          {transRole(isEditable ? doc.user_role || doc.link_role : Role.READER)}
+          &nbsp;·&nbsp;
+        </Text>
+        <Text $variation="600" $size="s">
+          {dateToDisplay}
+        </Text>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Text $variation="400" $size="s">
+        {hasChildren ? relativeOnly : dateToDisplay}
+      </Text>
+      {hasChildren && (
+        <Text $variation="400" $size="s">
+          &nbsp;•&nbsp;
+          {t('Contains {{count}} sub-documents', {
+            count: childrenCount,
+          })}
+        </Text>
+      )}
+    </>
+  );
+};