diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index ec2d9a57f..991ee6711 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -2147,7 +2147,8 @@ "breadcrumb": { "hoisted_badge": "Hoisted", "hoisted_badge_title": "Unhoist", - "workspace_badge": "Workspace" + "workspace_badge": "Workspace", + "scroll_to_top_title": "Jump to the beginning of the note" }, "breadcrumb_badges": { "read_only_explicit": "Read-only", diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx index e0f045d97..511ed2de0 100644 --- a/apps/client/src/widgets/layout/Breadcrumb.tsx +++ b/apps/client/src/widgets/layout/Breadcrumb.tsx @@ -1,6 +1,6 @@ import "./Breadcrumb.css"; -import { useState } from "preact/hooks"; +import { useRef, useState } from "preact/hooks"; import { Fragment } from "preact/jsx-runtime"; import appContext from "../../components/app_context"; @@ -15,7 +15,7 @@ import ActionButton from "../react/ActionButton"; import { Badge } from "../react/Badge"; import Dropdown from "../react/Dropdown"; import { FormListItem } from "../react/FormList"; -import { useChildNotes, useNote, useNoteIcon, useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../react/hooks"; +import { useChildNotes, useNote, useNoteIcon, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useStaticTooltip } from "../react/hooks"; import Icon from "../react/Icon"; import NoteLink from "../react/NoteLink"; @@ -114,14 +114,20 @@ function BreadcrumbHoistedNoteRoot({ noteId }: { noteId: string }) { } function BreadcrumbLastItem({ notePath }: { notePath: string }) { + const linkRef = useRef(null); const noteId = notePath.split("/").at(-1); const [ note ] = useState(() => froca.getNoteFromCache(noteId!)); const title = useNoteProperty(note, "title"); + useStaticTooltip(linkRef, { + placement: "top", + title: t("breadcrumb.scroll_to_top_title") + }); if (!note) return null; return ( {