💄(frontend) Use StyledLink for sub doc tree

Replace ButtonBox by StyledLink in DocSubPageItem
so ctrl+click on the sub document title open a new browser tab

Signed-off-by: Paul Vernin <paul.vernin@gmail.com>

Author: pvrnn

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to
 - ♿(frontend) use aria-haspopup menu on DropButton triggers #2126
 - ♿️(frontend) add contextual browser tab titles for docs routes #2120
 - ♿️(frontend) fix empty heading before section titles in HTML export #2125
+- 💄(frontend) Use StyledLink for sub doc tree #2100
 
 ### Fixed
 

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx

@@ -1,17 +1,15 @@
 import {
-  Spinner,
   TreeViewDataType,
   TreeViewItem,
   TreeViewNodeProps,
-  TreeViewNodeTypeEnum,
   useTreeContext,
 } from '@gouvfr-lasuite/ui-kit';
 import { useRouter } from 'next/navigation';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { Box, BoxButton, Icon, Text } from '@/components';
+import { Box, Icon, StyledLink, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import {
   Doc,
@@ -22,12 +20,11 @@ import {
 import { useLeftPanelStore } from '@/features/left-panel';
 import { useResponsiveStore } from '@/stores';
 
-import { isDocNode } from '../utils';
-
 import SubPageIcon from './../assets/sub-page-logo.svg';
 import { DocTreeItemActions } from './DocTreeItemActions';
 
 const ItemTextCss = css`
+  font-weight: normal;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: initial;
@@ -38,65 +35,6 @@ const ItemTextCss = css`
 `;
 
 export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
-  if (props.node.data.value.nodeType === TreeViewNodeTypeEnum.VIEW_MORE) {
-    return <DocSubPageLoadMore {...props} />;
-  }
-
-  if (!isDocNode(props.node.data.value)) {
-    return <TreeViewItem {...props} />;
-  }
-
-  return <DocSubPageItemContent {...props} />;
-};
-
-const DocSubPageLoadMore = (props: TreeViewNodeProps<Doc>) => {
-  const treeContext = useTreeContext<Doc>();
-  const loaderRef = useRef<HTMLDivElement>(null);
-  const inFlightRef = useRef<boolean>(false);
-
-  /**
-   * Use IntersectionObserver to trigger loading more children when the "Load More" item comes into view.
-   * This allows for infinite scrolling of child nodes without needing a "Load More" button click.
-   * The observer is disconnected when the component unmounts to prevent memory leaks.
-   */
-  useEffect(() => {
-    const el = loaderRef.current;
-    const parentKey = props.node.data.parentKey;
-    if (!el || !parentKey) {
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (!entry.isIntersecting || inFlightRef.current) {
-          return;
-        }
-        inFlightRef.current = true;
-        void treeContext?.treeData.handleLoadChildren(parentKey).finally(() => {
-          inFlightRef.current = false;
-        });
-      },
-      { threshold: 0.1 },
-    );
-
-    observer.observe(el);
-    return () => observer.disconnect();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <Box
-      ref={loaderRef}
-      $align="center"
-      $justify="center"
-      $padding={{ vertical: 'xs' }}
-    >
-      <Spinner size="sm" />
-    </Box>
-  );
-};
-
-const DocSubPageItemContent = (props: TreeViewNodeProps<Doc>) => {
   const doc = props.node.data.value as Doc;
   const treeContext = useTreeContext<Doc>();
   const { untitledDocument } = useTrans();
@@ -279,27 +217,25 @@ const DocSubPageItemContent = (props: TreeViewNodeProps<Doc>) => {
             buttonOptionRef={buttonOptionRef}
           />
         </Box>
-        <BoxButton
+        <StyledLink
+          href={`/docs/${doc.id}`}
           onClick={(e) => {
             e.stopPropagation();
+            e.preventDefault();
             handleActivate();
           }}
           tabIndex={-1}
-          $width="100%"
-          $direction="row"
-          $gap={spacingsTokens['xs']}
-          $align="center"
-          $minHeight="24px"
           data-testid={`doc-sub-page-item-${doc.id}`}
           aria-label={`${t('Open document {{title}}', { title: docTitle })}`}
           $css={css`
-            text-align: left;
-            min-width: 0;
+            width: 100%;
           `}
         >
           <Box
             $direction="row"
             $align="center"
+            $gap={spacingsTokens['xs']}
+            $minHeight="24px"
             $css={css`
               display: flex;
               flex-direction: row;
@@ -322,7 +258,7 @@ const DocSubPageItemContent = (props: TreeViewNodeProps<Doc>) => {
               />
             )}
           </Box>
-        </BoxButton>
+        </StyledLink>
       </TreeViewItem>
     </Box>
   );