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()} + /> + + ); }