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

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

@@ -9,7 +9,7 @@ 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,
@@ -24,6 +24,7 @@ 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;
@@ -216,27 +217,25 @@ export const DocSubPageItem = (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;
@@ -259,7 +258,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
               />
             )}
           </Box>
-        </BoxButton>
+        </StyledLink>
       </TreeViewItem>
     </Box>
   );