diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index c86af5e0f..ebd0f2662 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -2162,6 +2162,7 @@ "attachments_title_other": "This note has {{count}} attachments. Click to open the list of attachments in a new tab.", "attributes_one": "{{count}} attribute", "attributes_other": "{{count}} attributes", - "attributes_title": "Click to open a dedicated pane to edit this note's owned attributes, as well as to see the list of inherited attributes." + "attributes_title": "Click to open a dedicated pane to edit this note's owned attributes, as well as to see the list of inherited attributes.", + "note_paths_title": "Click to see the paths where this note is placed into the tree." } } diff --git a/apps/client/src/widgets/layout/StatusBar.tsx b/apps/client/src/widgets/layout/StatusBar.tsx index 4eb36d859..3b0450021 100644 --- a/apps/client/src/widgets/layout/StatusBar.tsx +++ b/apps/client/src/widgets/layout/StatusBar.tsx @@ -27,17 +27,19 @@ import { NoteSizeWidget, useNoteMetadata } from "../ribbon/NoteInfoTab"; import { useAttachments } from "../type_widgets/Attachment"; import { useProcessedLocales } from "../type_widgets/options/components/LocaleSelector"; import Breadcrumb from "./Breadcrumb"; +import NotePathsTab, { useSortedNotePaths } from "../ribbon/NotePathsTab"; interface StatusBarContext { note: FNote; noteContext: NoteContext; viewScope?: ViewScope; + hoistedNoteId?: string; } export default function StatusBar() { - const { note, noteContext, viewScope } = useActiveNoteContext(); + const { note, noteContext, viewScope, hoistedNoteId } = useActiveNoteContext(); const [ attributesShown, setAttributesShown ] = useState(false); - const context: StatusBarContext | undefined | null = note && noteContext && { note, noteContext, viewScope }; + const context: StatusBarContext | undefined | null = note && noteContext && { note, noteContext, viewScope, hoistedNoteId }; const attributesContext: AttributesProps | undefined | null = context && { ...context, attributesShown, setAttributesShown }; return ( @@ -49,6 +51,7 @@ export default function StatusBar() {
+ @@ -307,3 +310,19 @@ function AttributesPane({ note, noteContext, attributesShown, setAttributesShown ); } //#endregion + +//#region Note paths +function NotePaths({ note, hoistedNoteId }: StatusBarContext) { + const sortedNotePaths = useSortedNotePaths(note, hoistedNoteId); + + return ( + + + + ) +} +//#endregion diff --git a/apps/client/src/widgets/ribbon/NotePathsTab.tsx b/apps/client/src/widgets/ribbon/NotePathsTab.tsx index 0b997cfb2..29e85e452 100644 --- a/apps/client/src/widgets/ribbon/NotePathsTab.tsx +++ b/apps/client/src/widgets/ribbon/NotePathsTab.tsx @@ -3,30 +3,13 @@ import { t } from "../../services/i18n"; import Button from "../react/Button"; import { useTriliumEvent } from "../react/hooks"; import { useEffect, useMemo, useState } from "preact/hooks"; -import { NotePathRecord } from "../../entities/fnote"; +import FNote, { NotePathRecord } from "../../entities/fnote"; import NoteLink from "../react/NoteLink"; import { joinElements } from "../react/react_utils"; import { NOTE_PATH_TITLE_SEPARATOR } from "../../services/tree"; export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabContext) { - const [ sortedNotePaths, setSortedNotePaths ] = useState(); - - function refresh() { - if (!note) return; - setSortedNotePaths(note - .getSortedNotePathRecords(hoistedNoteId) - .filter((notePath) => !notePath.isHidden)); - } - - useEffect(refresh, [ note?.noteId ]); - useTriliumEvent("entitiesReloaded", ({ loadResults }) => { - const noteId = note?.noteId; - if (!noteId) return; - if (loadResults.getBranchRows().find((branch) => branch.noteId === noteId) - || loadResults.isNoteReloaded(noteId)) { - refresh(); - } - }); + const sortedNotePaths = useSortedNotePaths(note, hoistedNoteId); return (
@@ -53,6 +36,29 @@ export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabConte ) } +export function useSortedNotePaths(note: FNote | null | undefined, hoistedNoteId?: string) { + const [ sortedNotePaths, setSortedNotePaths ] = useState(); + + function refresh() { + if (!note) return; + setSortedNotePaths(note + .getSortedNotePathRecords(hoistedNoteId) + .filter((notePath) => !notePath.isHidden)); + } + + useEffect(refresh, [ note?.noteId ]); + useTriliumEvent("entitiesReloaded", ({ loadResults }) => { + const noteId = note?.noteId; + if (!noteId) return; + if (loadResults.getBranchRows().find((branch) => branch.noteId === noteId) + || loadResults.isNoteReloaded(noteId)) { + refresh(); + } + }); + + return sortedNotePaths; +} + function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: string | null, notePathRecord?: NotePathRecord }) { const notePath = notePathRecord?.notePath ?? []; const notePathString = useMemo(() => notePath.join("/"), [ notePath ]);