diff --git a/apps/client/src/widgets/Breadcrumb.tsx b/apps/client/src/widgets/Breadcrumb.tsx
index 83ff966b8..c218f7cea 100644
--- a/apps/client/src/widgets/Breadcrumb.tsx
+++ b/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 ;
+ return <>
+
+
+ >;
}
return ;
diff --git a/apps/client/src/widgets/BreadcrumbBadges.css b/apps/client/src/widgets/BreadcrumbBadges.css
index 919cb6353..a8fcd6657 100644
--- a/apps/client/src/widgets/BreadcrumbBadges.css
+++ b/apps/client/src/widgets/BreadcrumbBadges.css
@@ -9,67 +9,57 @@
flex-shrink: 1;
overflow: hidden;
--badge-radius: 12px;
+}
- .breadcrumb-badge {
- display: flex;
- align-items: center;
- padding: 2px 6px;
- border-radius: var(--badge-radius);
- font-size: 0.75em;
- background-color: var(--color, transparent);
- color: white;
- min-width: 0;
- flex-shrink: 1;
+.breadcrumb-badge {
+ display: flex;
+ align-items: center;
+ padding: 2px 6px;
+ border-radius: var(--badge-radius);
+ font-size: 0.75em;
+ background-color: var(--color, transparent);
+ color: white;
+ min-width: 0;
+ flex-shrink: 1;
- &.clickable {
- cursor: pointer;
+ &.clickable {
+ cursor: pointer;
- &:hover {
- 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;
+ &:hover {
+ background-color: color-mix(in srgb, var(--color, --badge-background-color) 80%, black);
}
}
- .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 {
- min-width: 500px;
- }
+.breadcrumb-dropdown-badge {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ border-radius: var(--badge-radius);
- .breadcrumb-badge {
- border-radius: 0;
- }
-
- .btn {
- border: 0;
- margin: 0;
- padding: 0;
- }
+ &.dropdown-backlinks-badge .dropdown-menu {
+ min-width: 500px;
}
- .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;
+ }
}
diff --git a/apps/client/src/widgets/BreadcrumbBadges.tsx b/apps/client/src/widgets/BreadcrumbBadges.tsx
index a50eab5fe..51c346749 100644
--- a/apps/client/src/widgets/BreadcrumbBadges.tsx
+++ b/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() {
-
);
}
-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 (
}
noDropdownListStyle
noSelectButtonStyle