feat(status_bar): integrate backlinks

apps/client/src/translations/en/translation.json

@@ -2146,10 +2146,6 @@
     "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.",
-    "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.",
     "clipped_note": "Web clip",
     "clipped_note_description": "This note was originally taken from {{url}}.\n\nClick to navigate to the source webpage.",
     "execute_script": "Run script",
@@ -2159,6 +2155,9 @@
   },
   "status_bar": {
     "language_title": "Change the language of the entire content",
-    "note_info_title": "View information about this note such as the creation/modification date or the note size."
+    "note_info_title": "View information about this note such as the creation/modification date or the note size.",
+    "backlinks": "{{count}}",
+    "backlinks_title_one": "This note is linked from {{count}} other note.\n\nClick to view the list of backlinks.",
+    "backlinks_title_other": "This note is linked from {{count}} other notes.\n\nClick to view the list of backlinks."
   }
 }

apps/client/src/widgets/BreadcrumbBadges.css

@@ -34,7 +34,6 @@
     &.read-only-badge { --color: #e33f3b; }
     &.share-badge { --color: #3b82f6; }
     &.clipped-note-badge { --color: #57a2a5; }
-    &.backlinks-badge { color: var(--badge-text-color); }
     &.execute-badge { --color: #f59e0b; }
 
     a {

apps/client/src/widgets/BreadcrumbBadges.tsx

@@ -5,7 +5,6 @@ import { ComponentChildren, MouseEventHandler } from "preact";
 import { useRef } from "preact/hooks";
 
 import { t } from "../services/i18n";
-import { BacklinksList, useBacklinkCount } from "./FloatingButtonsDefinitions";
 import Dropdown, { DropdownProps } from "./react/Dropdown";
 import { useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean, useStaticTooltip } from "./react/hooks";
 import Icon from "./react/Icon";
@@ -16,7 +15,6 @@ export default function BreadcrumbBadges() {
         <div className="breadcrumb-badges">
             <ReadOnlyBadge />
             <ShareBadge />
-            <BacklinksBadge />
             <ClippedNoteBadge />
             <ExecuteBadge />
         </div>
@@ -66,24 +64,6 @@ function ShareBadge() {
     );
 }
 
-function BacklinksBadge() {
-    const { note, viewScope } = useNoteContext();
-    const count = useBacklinkCount(note, viewScope?.viewMode === "default");
-    return (note && count > 0 &&
-        <BadgeWithDropdown
-            className="backlinks-badge backlinks-widget"
-            icon="bx bx-revision"
-            text={t("breadcrumb_badges.backlinks", { count })}
-            tooltip={t("breadcrumb_badges.backlinks_description", { count })}
-            dropdownOptions={{
-                dropdownContainerClassName: "backlinks-items"
-            }}
-        >
-            <BacklinksList note={note} />
-        </BadgeWithDropdown>
-    );
-}
-
 function ClippedNoteBadge() {
     const { note } = useNoteContext();
     const [ pageUrl ] = useNoteLabel(note, "pageUrl");

apps/client/src/widgets/layout/StatusBar.tsx

@@ -6,10 +6,13 @@ import { type ComponentChildren } from "preact";
 import { createPortal } from "preact/compat";
 import { useState } from "preact/hooks";
 
+import NoteContext from "../../components/note_context";
 import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
+import { ViewScope } from "../../services/link";
 import { openInAppHelpFromUrl } from "../../services/utils";
 import { formatDateTime } from "../../utils/formatters";
+import { BacklinksList, useBacklinkCount } from "../FloatingButtonsDefinitions";
 import Dropdown, { DropdownProps } from "../react/Dropdown";
 import { FormDropdownDivider, FormListItem } from "../react/FormList";
 import { useActiveNoteContext } from "../react/hooks";
@@ -18,16 +21,16 @@ import { ContentLanguagesModal, useLanguageSwitcher } from "../ribbon/BasicPrope
 import { NoteSizeWidget, useNoteMetadata } from "../ribbon/NoteInfoTab";
 import { useProcessedLocales } from "../type_widgets/options/components/LocaleSelector";
 import Breadcrumb from "./Breadcrumb";
-import NoteContext from "../../components/note_context";
 
 interface StatusBarContext {
     note: FNote;
     noteContext: NoteContext;
+    viewScope: ViewScope;
 }
 
 export default function StatusBar() {
-    const { note, noteContext } = useActiveNoteContext();
+    const { note, noteContext, viewScope } = useActiveNoteContext();
-    const context = note && noteContext && { note, noteContext } satisfies StatusBarContext;
+    const context = note && noteContext && { note, noteContext, viewScope } satisfies StatusBarContext;
 
     return (
         <div className="status-bar">
@@ -37,6 +40,7 @@ export default function StatusBar() {
                 </div>
 
                 <div className="actions-row">
+                    <BacklinksBadge {...context} />
                     <LanguageSwitcher {...context} />
                     <NoteInfoBadge {...context} />
                 </div>
@@ -154,3 +158,20 @@ function NoteInfoValue({ text, title, value }: { text: string; title?: string, v
     );
 }
 //#endregion
+
+//#region Backlinks
+function BacklinksBadge({ note, viewScope }: StatusBarContext) {
+    const count = useBacklinkCount(note, viewScope?.viewMode === "default");
+    return (note && count > 0 &&
+        <StatusBarDropdown
+            className="backlinks-badge backlinks-widget"
+            icon="bx bx-revision"
+            text={t("status_bar.backlinks", { count })}
+            title={t("status_bar.backlinks_title", { count })}
+            dropdownContainerClassName="backlinks-items"
+        >
+            <BacklinksList note={note} />
+        </StatusBarDropdown>
+    );
+}
+//#endregion