gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-12 02:14:25 +01:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

feat(breadcrumb): basic navigation in separator

Browse Source
This commit is contained in:
Elian Doran 2025-12-08 16:34:40 +02:00
parent a02235f2bd
commit c4285772b3
No known key found for this signature in database
3 changed files with 39 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/client/src/widgets/Breadcrumb.css
View File

@ -10,4 +10,11 @@
color: inherit;
text-decoration: none;
}
ul {
flex-direction: column;
list-style-type: none;
margin: 0;
padding: 0;
}
}

31
apps/client/src/widgets/Breadcrumb.tsx
View File

@ -1,10 +1,11 @@
import { Fragment } from "preact/jsx-runtime";
import "./Breadcrumb.css";
import ActionButton from "./react/ActionButton";
import { useNoteContext } from "./react/hooks";
import { useChildNotes, useNoteContext } from "./react/hooks";
import NoteLink from "./react/NoteLink";
import Dropdown from "./react/Dropdown";
import Icon from "./react/Icon";
import { FormListItem } from "./react/FormList";
import NoteContext from "../components/note_context";
export default function Breadcrumb() {
const { noteContext } = useNoteContext();
@ -15,7 +16,7 @@ export default function Breadcrumb() {
{notePath.map(item => (
<Fragment key={item}>
<BreadcrumbItem notePath={item} />
<BreadcrumbSeparator notePath={item} />
<BreadcrumbSeparator notePath={item} noteContext={noteContext} />
</Fragment>
))}
</div>
@ -31,7 +32,7 @@ function BreadcrumbItem({ notePath }: { notePath: string }) {
)
}
function BreadcrumbSeparator({ notePath }: { notePath: string}) {
function BreadcrumbSeparator({ notePath, noteContext }: { notePath: string, noteContext: NoteContext | undefined }) {
return (
<Dropdown
text={<Icon icon="bx bx-chevron-right" />}
@ -39,11 +40,31 @@ function BreadcrumbSeparator({ notePath }: { notePath: string}) {
buttonClassName="icon-action"
hideToggleArrow
>
Content goes here.
<BreadcrumbSeparatorDropdownContent notePath={notePath} noteContext={noteContext} />
</Dropdown>
)
}
function BreadcrumbSeparatorDropdownContent({ notePath, noteContext }: { notePath: string, noteContext: NoteContext | undefined }) {
const notePathComponents = notePath.split("/");
const parentNoteId = notePathComponents.pop();
const childNotes = useChildNotes(parentNoteId);
const notePathPrefix = notePathComponents.join("/"); // last item was removed already.
return (
<ul class="breadcrumb-child-list">
{childNotes.map((note) => (
<li key={note.noteId}>
<FormListItem
icon={note.getIcon()}
onClick={() => noteContext?.setNote(`${notePathPrefix}/${note.noteId}`)}
>{note.title}</FormListItem>
</li>
))}
</ul>
)
}
function buildNotePaths(notePathArray: string[] | undefined) {
if (!notePathArray) return [];

9
apps/client/src/widgets/react/hooks.tsx
View File

@ -886,12 +886,15 @@ async function isNoteReadOnly(note: FNote, noteContext: NoteContext) {
return true;
}
export function useChildNotes(parentNoteId: string) {
export function useChildNotes(parentNoteId: string | undefined) {
const [ childNotes, setChildNotes ] = useState<FNote[]>([]);
useEffect(() => {
(async function() {
const parentNote = await froca.getNote(parentNoteId);
const childNotes = await parentNote?.getChildNotes();
let childNotes: FNote[] | undefined;
if (parentNoteId) {
const parentNote = await froca.getNote(parentNoteId);
childNotes = await parentNote?.getChildNotes();
}
setChildNotes(childNotes ?? []);
})();
}, [ parentNoteId ]);