diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index d5b69b37f..dfce263d0 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -2140,6 +2140,10 @@ "shared_publicly": "Shared publicly", "shared_publicly_description": "This note has been published online at {{- link}}, and is publicly accessible.\n\nClick to navigate to the shared note or right click for more options.", "shared_locally": "Shared locally", - "shared_locally_description": "This note is shared on the local network only at {{- link}}.\n\nClick to navigate to the shared note or right click for more options." + "shared_locally_description": "This note is shared on the local network only at {{- link}}.\n\nClick to navigate to the shared note or right click for more options.", + "backlinks_one": "{{count}} backlink", + "backlinks_other": "{{count}} backlinks", + "backlinks_description_one": "This note is linked from {{count}} other note.\n\nClick to view the list of backlinks.", + "backlinks_description_other": "This note is linked from {{count}} other notes.\n\nClick to view the list of backlinks." } } diff --git a/apps/client/src/widgets/BreadcrumbBadges.css b/apps/client/src/widgets/BreadcrumbBadges.css index f9f42612f..0e0a564e8 100644 --- a/apps/client/src/widgets/BreadcrumbBadges.css +++ b/apps/client/src/widgets/BreadcrumbBadges.css @@ -30,6 +30,7 @@ &.temporarily-editable-badge { --color: #4fa52b; } &.read-only-badge { --color: #e33f3b; } &.share-badge { --color: #3b82f6; } + &.backlinks-badge { color: var(--badge-text-color); } a { color: inherit; diff --git a/apps/client/src/widgets/BreadcrumbBadges.tsx b/apps/client/src/widgets/BreadcrumbBadges.tsx index 8e79aeaff..8945b447b 100644 --- a/apps/client/src/widgets/BreadcrumbBadges.tsx +++ b/apps/client/src/widgets/BreadcrumbBadges.tsx @@ -1,18 +1,20 @@ import "./BreadcrumbBadges.css"; +import clsx from "clsx"; import { ComponentChildren, MouseEventHandler } from "preact"; +import { useRef } from "preact/hooks"; + +import { t } from "../services/i18n"; import { useIsNoteReadOnly, useNoteContext, useStaticTooltip } from "./react/hooks"; import Icon from "./react/Icon"; import { useShareInfo } from "./shared_info"; -import clsx from "clsx"; -import { t } from "../services/i18n"; -import { useRef } from "preact/hooks"; export default function BreadcrumbBadges() { return (
+
); } @@ -63,7 +65,16 @@ function ShareBadge() { ); } -function Badge({ icon, className, children, tooltip, onClick, href }: { icon: string, className: string, tooltip: string, children: ComponentChildren, onClick?: MouseEventHandler, href?: string }) { +function BacklinksBadge() { + const count = 1; + return ( + + {t("breadcrumb_badges.backlinks", { count })} + + ); +} + +function Badge({ icon, className, children, tooltip, onClick, href }: { icon?: string, className: string, tooltip: string, children: ComponentChildren, onClick?: MouseEventHandler, href?: string }) { const containerRef = useRef(null); useStaticTooltip(containerRef, { placement: "bottom", @@ -74,7 +85,7 @@ function Badge({ icon, className, children, tooltip, onClick, href }: { icon: st }); const content = <> -   + {icon && <> } {children} ;