diff --git a/apps/client/src/widgets/note_tree.css b/apps/client/src/widgets/note_tree.css new file mode 100644 index 000000000..31e2b0142 --- /dev/null +++ b/apps/client/src/widgets/note_tree.css @@ -0,0 +1,10 @@ +.note-indicator-icon.subtree-hidden-badge { + font-family: inherit !important; + margin-inline-start: 0.5em; + background: var(--left-pane-item-action-button-background); + color: var(--left-pane-item-action-button-color); + padding: 0.25em; + border-radius: 0.5em; + font-size: 0.7rem; + font-weight: normal; +} diff --git a/apps/client/src/widgets/note_tree.ts b/apps/client/src/widgets/note_tree.ts index 24e02286c..45c0a98c6 100644 --- a/apps/client/src/widgets/note_tree.ts +++ b/apps/client/src/widgets/note_tree.ts @@ -3,13 +3,13 @@ import "jquery.fancytree/dist/modules/jquery.fancytree.dnd5.js"; import "jquery.fancytree/dist/modules/jquery.fancytree.clones.js"; import "jquery.fancytree/dist/modules/jquery.fancytree.filter.js"; import "../stylesheets/tree.css"; +import "./note_tree.css"; import appContext, { type CommandListenerData, type EventData } from "../components/app_context.js"; import type { SetNoteOpts } from "../components/note_context.js"; import type { TouchBarItem } from "../components/touch_bar.js"; import type FBranch from "../entities/fbranch.js"; import type FNote from "../entities/fnote.js"; -import type { NoteType } from "../entities/fnote.js"; import contextMenu from "../menus/context_menu.js"; import type { TreeCommandNames } from "../menus/tree_context_menu.js"; import branchService from "../services/branches.js"; @@ -1887,5 +1887,11 @@ function buildEnhanceTitle() { $sharedIndicator.attr("title", tooltipText); $span.find(".fancytree-title").append($sharedIndicator); } + + // Add a badge with the number of items if it hides children. + if (note.hasLabel("subtreeHidden")) { + const $badge = $(`${note.getChildNoteIds().length}`); + $span.find(".fancytree-title").append($badge); + } }; }