💄(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>

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to
 ### Changed
 
 - ♻️(backend) do not paginate threads list response #2186
+- 💄(frontend) Use StyledLink for sub doc tree #2188
 
 ### Fixed
 

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

@@ -135,7 +135,7 @@ test.describe('Doc Tree', () => {
     await expect(docTree).toBeVisible();
     await docTree.getByText('keyboard_arrow_right').click();
     await docTree
-      .getByRole('button', {
+      .getByRole('link', {
         name: `Open document ${titleChild}`,
       })
       .click();

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

@@ -12,7 +12,7 @@ import { useEffect, 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,
@@ -283,17 +283,12 @@ const DocSubPageItemContent = (props: TreeViewNodeProps<Doc>) => {
             buttonOptionRef={buttonOptionRef}
           />
         </Box>
-        <BoxButton
-          onClick={(e) => {
-            e.stopPropagation();
-            handleActivate();
+        <StyledLink
+          href={`/docs/${doc.id}`}
+          onClick={() => {
+            treeContext?.treeData.setSelectedNode(doc);
           }}
           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`
@@ -304,6 +299,8 @@ const DocSubPageItemContent = (props: TreeViewNodeProps<Doc>) => {
           <Box
             $direction="row"
             $align="center"
+            $gap={spacingsTokens['xs']}
+            $minHeight="24px"
             $css={css`
               display: flex;
               flex-direction: row;
@@ -326,7 +323,7 @@ const DocSubPageItemContent = (props: TreeViewNodeProps<Doc>) => {
               />
             )}
           </Box>
-        </BoxButton>
+        </StyledLink>
       </TreeViewItem>
     </Box>
   );