diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index 3fa23b05a..cd016eee1 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -767,7 +767,7 @@ body.mobile .fancytree-node > span { background: var(--left-pane-item-hover-background); } -#left-pane span.fancytree-node.shared .fancytree-title::after { +#left-pane .note-indicator-icon.shared-indicator { opacity: 0.5; } diff --git a/apps/client/src/stylesheets/tree.css b/apps/client/src/stylesheets/tree.css index 6b400315d..7131f6ab0 100644 --- a/apps/client/src/stylesheets/tree.css +++ b/apps/client/src/stylesheets/tree.css @@ -148,29 +148,28 @@ span.fancytree-node.protected > span.fancytree-custom-icon { filter: drop-shadow(2px 2px 2px var(--main-text-color)); } -span.fancytree-node.multiple-parents.shared .fancytree-title::after { +/* Note indicator icons (clone, shared) - real DOM elements for tooltip support */ +.note-indicator-icon { font-family: "boxicons" !important; font-size: smaller; - content: " \eb3d \ec03"; + margin-inline-start: 4px; + opacity: 0.8; + cursor: help; } -span.fancytree-node.multiple-parents .fancytree-title::after { - font-family: "boxicons" !important; - font-size: smaller; - content: " \eb3d"; /* lookup code for "link-alt" in boxicons.css */ +.note-indicator-icon.clone-indicator::before { + content: "\eb3d"; /* bx-link-alt */ } -body.experimental-feature-new-layout span.fancytree-node.multiple-parents .fancytree-title::after { - content: " \ed82"; +.note-indicator-icon.shared-indicator::before { + content: "\ec03"; /* bx-share-alt */ +} + +body.experimental-feature-new-layout .note-indicator-icon.clone-indicator::before { + content: "\ed82"; opacity: 0.5; } -span.fancytree-node.shared .fancytree-title::after { - font-family: "boxicons" !important; - font-size: smaller; - content: " \ec03"; /* lookup code for "share-alt" in boxicons.css */ -} - span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-title { font-weight: bold; } diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index 7712ee91a..3cfc4ef1c 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -1769,7 +1769,11 @@ "create-child-note": "Create child note", "unhoist": "Unhoist", "toggle-sidebar": "Toggle sidebar", - "dropping-not-allowed": "Dropping notes into this location is not allowed." + "dropping-not-allowed": "Dropping notes into this location is not allowed.", + "clone-indicator-tooltip": "This note has {{- count}} parents: {{- parents}}", + "clone-indicator-tooltip-single": "This note is cloned (1 additional parent: {{- parent}})", + "shared-indicator-tooltip": "This note is shared publicly", + "shared-indicator-tooltip-with-url": "This note is shared publicly at: {{- url}}" }, "title_bar_buttons": { "window-on-top": "Keep Window on Top" diff --git a/apps/client/src/widgets/note_tree.ts b/apps/client/src/widgets/note_tree.ts index 0a907895c..9a2c61d22 100644 --- a/apps/client/src/widgets/note_tree.ts +++ b/apps/client/src/widgets/note_tree.ts @@ -624,6 +624,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget { const $span = $(node.span); $span.find(".tree-item-button").remove(); + $span.find(".note-indicator-icon").remove(); const isHoistedNote = activeNoteContext && activeNoteContext.hoistedNoteId === note.noteId && note.noteId !== "root"; @@ -664,6 +665,34 @@ export default class NoteTreeWidget extends NoteContextAwareWidget { $span.append($unhoistButton); } + + // Add clone indicator with tooltip if note has multiple parents + const parentNotes = note.getParentNotes(); + const realParents = parentNotes.filter( + (parent) => !["_share", "_lbBookmarks"].includes(parent.noteId) && parent.type !== "search" + ); + + if (realParents.length > 1) { + const parentTitles = realParents.map((p) => p.title).join(", "); + const tooltipText = realParents.length === 2 + ? t("note_tree.clone-indicator-tooltip-single", { parent: realParents[1].title }) + : t("note_tree.clone-indicator-tooltip", { count: realParents.length, parents: parentTitles }); + + const $cloneIndicator = $(``); + $cloneIndicator.attr("title", tooltipText); + $span.find(".fancytree-title").append($cloneIndicator); + } + + // Add shared indicator with tooltip if note is shared + if (note.isShared()) { + const shareId = note.getOwnedLabelValue("shareAlias") || note.noteId; + const shareUrl = `${location.origin}${location.pathname}share/${shareId}`; + const tooltipText = t("note_tree.shared-indicator-tooltip-with-url", { url: shareUrl }); + + const $sharedIndicator = $(``); + $sharedIndicator.attr("title", tooltipText); + $span.find(".fancytree-title").append($sharedIndicator); + } }, // this is done to automatically lazy load all expanded notes after tree load loadChildren: (event, data) => {