chore(breadcrumb_badges): fake backlink widget

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."
   }
 }

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;

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 (
         <div className="breadcrumb-badges">
             <ReadOnlyBadge />
             <ShareBadge />
+            <BacklinksBadge />
         </div>
     );
 }
@@ -63,7 +65,16 @@ function ShareBadge() {
     );
 }
 
-function Badge({ icon, className, children, tooltip, onClick, href }: { icon: string, className: string, tooltip: string, children: ComponentChildren, onClick?: MouseEventHandler<HTMLDivElement>, href?: string }) {
+function BacklinksBadge() {
+    const count = 1;
+    return (
+        <Badge className="backlinks-badge" icon="bx bx-revision" tooltip={t("breadcrumb_badges.backlinks_description", { count })}>
+            {t("breadcrumb_badges.backlinks", { count })}
+        </Badge>
+    );
+}
+
+function Badge({ icon, className, children, tooltip, onClick, href }: { icon?: string, className: string, tooltip: string, children: ComponentChildren, onClick?: MouseEventHandler<HTMLDivElement>, href?: string }) {
     const containerRef = useRef<HTMLDivElement>(null);
     useStaticTooltip(containerRef, {
         placement: "bottom",
@@ -74,7 +85,7 @@ function Badge({ icon, className, children, tooltip, onClick, href }: { icon: st
     });
 
     const content = <>
-        <Icon icon={icon} />&nbsp;
+        {icon && <><Icon icon={icon} />&nbsp;</>}
         {children}
     </>;