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,67 +9,57 @@
     flex-shrink: 1;
     overflow: hidden;
     --badge-radius: 12px;
+}
 
-    .breadcrumb-badge {
+.breadcrumb-badge {
-        display: flex;
+    display: flex;
-        align-items: center;
+    align-items: center;
-        padding: 2px 6px;
+    padding: 2px 6px;
-        border-radius: var(--badge-radius);
+    border-radius: var(--badge-radius);
-        font-size: 0.75em;
+    font-size: 0.75em;
-        background-color: var(--color, transparent);
+    background-color: var(--color, transparent);
-        color: white;
+    color: white;
-        min-width: 0;
+    min-width: 0;
-        flex-shrink: 1;
+    flex-shrink: 1;
 
-        &.clickable {
+    &.clickable {
-            cursor: pointer;
+        cursor: pointer;
 
-            &:hover {
+        &:hover {
-                background-color: color-mix(in srgb, var(--color, --badge-background-color) 80%, black);
+            background-color: color-mix(in srgb, var(--color, --badge-background-color) 80%, black);
-            }
-        }
-
-        &.temporarily-editable-badge { --color: #4fa52b; }
-        &.read-only-badge { --color: #e33f3b; }
-        &.share-badge { --color: #3b82f6; }
-        &.backlinks-badge { color: var(--badge-text-color); }
-
-        a {
-            color: inherit;
-            text-decoration: none;
-        }
-
-        > * {
-            min-width: 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
         }
     }
 
-    .dropdown {
+    &.temporarily-editable-badge { --color: #4fa52b; }
+    &.read-only-badge { --color: #e33f3b; }
+    &.share-badge { --color: #3b82f6; }
+    &.backlinks-badge { color: var(--badge-text-color); }
+
+    a {
+        color: inherit !important;
+        text-decoration: none;
+    }
+
+    > * {
         min-width: 0;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        border-radius: var(--badge-radius);
+    }
+}
 
-        &.dropdown-backlinks-badge .dropdown-menu {
+.breadcrumb-dropdown-badge {
-            min-width: 500px;
+    min-width: 0;
-        }
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-radius: var(--badge-radius);
 
-        .breadcrumb-badge {
+    &.dropdown-backlinks-badge .dropdown-menu {
-            border-radius: 0;
+        min-width: 500px;
-        }
-
-        .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() {
+export function NoteInfoBadge({ note }: { note: FNote | null | undefined }) {
-    const { note } = useNoteContext();
     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