diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index e404651e6..2482503f8 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2144,6 +2144,10 @@
"go-back": "Go back to previous note",
"go-forward": "Go forward to next note"
},
+ "breadcrumb": {
+ "hoisted_badge": "Hoisted",
+ "hoisted_badge_title": "Unhoist"
+ },
"breadcrumb_badges": {
"read_only_explicit": "Read-only",
"read_only_explicit_description": "This note has been manually set to read-only.\nClick to edit it temporarily.",
diff --git a/apps/client/src/widgets/layout/Breadcrumb.css b/apps/client/src/widgets/layout/Breadcrumb.css
index 16e9ea2bc..436b9cb0f 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.css
+++ b/apps/client/src/widgets/layout/Breadcrumb.css
@@ -8,6 +8,12 @@
gap: 0.25em;
flex-wrap: nowrap;
overflow: hidden;
+ --badge-radius: 6px;
+
+ .badge-hoisted {
+ --color: var(--input-background-color);
+ color: var(--main-text-color);
+ }
> span,
> span > span {
diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx
index fbda95391..dfcf2239d 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.tsx
+++ b/apps/client/src/widgets/layout/Breadcrumb.tsx
@@ -1,6 +1,6 @@
import "./Breadcrumb.css";
-import { useMemo, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
import { Fragment } from "preact/jsx-runtime";
import appContext from "../../components/app_context";
@@ -8,10 +8,13 @@ import NoteContext from "../../components/note_context";
import FNote from "../../entities/fnote";
import link_context_menu from "../../menus/link_context_menu";
import froca from "../../services/froca";
+import hoisted_note from "../../services/hoisted_note";
+import { t } from "../../services/i18n";
import ActionButton from "../react/ActionButton";
+import { Badge } from "../react/Badge";
import Dropdown from "../react/Dropdown";
import { FormListItem } from "../react/FormList";
-import { useChildNotes, useNote, useNoteLabel, useNoteProperty } from "../react/hooks";
+import { useChildNotes, useNoteProperty } from "../react/hooks";
import Icon from "../react/Icon";
import NoteLink from "../react/NoteLink";
@@ -76,13 +79,22 @@ function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined
);
}
- // Hoisted workspace shows both text and icon.
+ // Hoisted workspace shows both text and icon and a way to exit easily out of the hoisting.
return (
-
+ <>
+ hoisted_note.unhoist()}
+ />
+
+ >
);
}