From 2ebfa1efbf45c7c4672d94b2750c39bb0ad3c498 Mon Sep 17 00:00:00 2001
From: Paul Vernin <paul.vernin@gmail.com>
Date: Wed, 1 Apr 2026 15:55:04 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20Use=20StyledLink=20for?=
 =?UTF-8?q?=20sub=20doc=20tree?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                                  |  1 +
 .../__tests__/app-impress/doc-tree.spec.ts    |  2 +-
 .../doc-tree/components/DocSubPageItem.tsx    | 19 ++++++++-----------
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e007e56a1..f43e7106f 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts
index a383c1522..3fe255c5b 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts
+++ b/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();
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
index 8f13ffee8..4345834e2 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
+++ b/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>
   );