feat(note_info): integrate near the note title

apps/client/src/widgets/Breadcrumb.tsx

@@ -14,6 +14,7 @@ import NoteLink from "./react/NoteLink";
 import link_context_menu from "../menus/link_context_menu";
 import { TitleEditor } from "./collections/board";
 import server from "../services/server";
+import { NoteInfoBadge } from "./BreadcrumbBadges";
 
 const COLLAPSE_THRESHOLD = 5;
 const INITIAL_ITEMS = 2;
@@ -119,7 +120,10 @@ function BreadcrumbItem({ index, notePath, noteContext, notePathLength }: { inde
     }
 
     if (index === notePathLength - 1) {
-        return <BreadcrumbLastItem notePath={notePath} />;
+        return <>
+            <BreadcrumbLastItem notePath={notePath} />
+            <NoteInfoBadge note={noteContext?.note} />
+        </>;
     }
 
     return <BreadcrumbLink notePath={notePath} />;

apps/client/src/widgets/BreadcrumbBadges.css

@@ -9,8 +9,9 @@
     flex-shrink: 1;
     overflow: hidden;
     --badge-radius: 12px;
+}
 
-    .breadcrumb-badge {
+.breadcrumb-badge {
     display: flex;
     align-items: center;
     padding: 2px 6px;
@@ -35,7 +36,7 @@
     &.backlinks-badge { color: var(--badge-text-color); }
 
     a {
-            color: inherit;
+        color: inherit !important;
         text-decoration: none;
     }
 
@@ -45,9 +46,9 @@
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-    }
+}
 
-    .dropdown {
+.breadcrumb-dropdown-badge {
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -58,18 +59,7 @@
         min-width: 500px;
     }
 
-        .breadcrumb-badge {
-            border-radius: 0;
-        }
-
-        .btn {
-            border: 0;
-            margin: 0;
-            padding: 0;
-        }
-    }
-
-    .dropdown-note-info-badge {
+    &.dropdown-note-info-badge {
         .dropdown-menu.show ul {
             list-style-type: none;
             padding: 0.5em;
@@ -93,4 +83,13 @@
         }
     }
 
+    .breadcrumb-badge {
+        border-radius: 0;
+    }
+
+    .btn {
+        border: 0;
+        margin: 0;
+        padding: 0;
+    }
 }

apps/client/src/widgets/BreadcrumbBadges.tsx

@@ -12,6 +12,7 @@ import { useIsNoteReadOnly, useNoteContext, useStaticTooltip } from "./react/hoo
 import Icon from "./react/Icon";
 import { NoteSizeWidget, useNoteMetadata } from "./ribbon/NoteInfoTab";
 import { useShareInfo } from "./shared_info";
+import FNote from "../entities/fnote";
 
 export default function BreadcrumbBadges() {
     return (
@@ -19,13 +20,11 @@ export default function BreadcrumbBadges() {
             <ReadOnlyBadge />
             <ShareBadge />
             <BacklinksBadge />
-            <NoteInfoBadge />
         </div>
     );
 }
 
-function NoteInfoBadge() {
-    const { note } = useNoteContext();
+export function NoteInfoBadge({ note }: { note: FNote | null | undefined }) {
     const { metadata, ...sizeProps } = useNoteMetadata(note);
 
     return (note &&
@@ -156,7 +155,7 @@ function BadgeWithDropdown({ children, tooltip, className, dropdownOptions, ...p
 }) {
     return (
         <Dropdown
-            className={`dropdown-${className}`}
+            className={`breadcrumb-dropdown-badge dropdown-${className}`}
             text={<Badge className={className} {...props} />}
             noDropdownListStyle
             noSelectButtonStyle