fix(page-templates): show a template marker icon in the page tree (#38)

Template pages were toggleable but indistinguishable in the sidebar tree.
Render an IconTemplate next to the title when node.isTemplate is true, wrapped
in a Tooltip(label='Template') with an aria-label + role='img' for AT. The
icon is a child of the row Link so clicks navigate as normal; pointer events
stay enabled so the tooltip's hover handlers fire. Adds the 'Template' i18n
key to en-US and ru-RU (other locales fall back to en-US).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
claude code agent 227
2026-06-20 21:15:43 +03:00
parent b53b0c651e
commit 859223db1a
3 changed files with 23 additions and 1 deletions

View File

@@ -183,6 +183,7 @@
"Successfully imported": "Successfully imported",
"Successfully restored": "Successfully restored",
"System settings": "System settings",
"Template": "Template",
"Templates": "Templates",
"Theme": "Theme",
"To change your email, you have to enter your password and new email.": "To change your email, you have to enter your password and new email.",

View File

@@ -183,6 +183,7 @@
"Successfully imported": "Успешно импортировано",
"Successfully restored": "Успешно восстановлено",
"System settings": "Системные настройки",
"Template": "Шаблон",
"Templates": "Шаблоны",
"Theme": "Тема",
"To change your email, you have to enter your password and new email.": "Чтобы изменить электронную почту, вам нужно ввести пароль и новый адрес.",

View File

@@ -2,13 +2,14 @@ import { useRef } from "react";
import { Link, useParams } from "react-router-dom";
import { useAtom } from "jotai";
import { useTranslation } from "react-i18next";
import { ActionIcon, rem } from "@mantine/core";
import { ActionIcon, rem, Tooltip } from "@mantine/core";
import {
IconChevronDown,
IconChevronRight,
IconFileDescription,
IconPlus,
IconPointFilled,
IconTemplate,
} from "@tabler/icons-react";
import EmojiPicker from "@/components/ui/emoji-picker.tsx";
@@ -171,6 +172,25 @@ export function SpaceTreeRow({
<span className={classes.text}>{node.name || t("untitled")}</span>
{node.isTemplate === true && (
<Tooltip label={t("Template")} withArrow>
<IconTemplate
size={14}
stroke={1.5}
// Visual-only indicator: subtle and never shrinks. Pointer events
// stay enabled so the Tooltip's hover handlers fire; clicks fall
// through to the row link since no stopPropagation is used.
style={{
flexShrink: 0,
marginLeft: rem(4),
color: "var(--mantine-color-dimmed)",
}}
aria-label={t("Template")}
role="img"
/>
</Tooltip>
)}
<div className={classes.actions}>
<NodeMenu node={node} canEdit={canEdit} />