feat(breadcrumb): make the root note clickable

This commit is contained in:
Elian Doran 2025-12-08 22:46:04 +02:00
parent 4cfa403657
commit eca2116adc
No known key found for this signature in database

View File

@ -1,11 +1,14 @@
import { Fragment } from "preact/jsx-runtime"; import { Fragment } from "preact/jsx-runtime";
import "./Breadcrumb.css"; import "./Breadcrumb.css";
import { useChildNotes, useNoteContext } from "./react/hooks"; import { useChildNotes, useNoteContext, useNoteLabel, useNoteProperty, useStaticTooltip } from "./react/hooks";
import NoteLink from "./react/NoteLink"; import NoteLink from "./react/NoteLink";
import Dropdown from "./react/Dropdown"; import Dropdown from "./react/Dropdown";
import Icon from "./react/Icon"; import Icon from "./react/Icon";
import { FormListItem } from "./react/FormList"; import { FormListItem } from "./react/FormList";
import NoteContext from "../components/note_context"; import NoteContext from "../components/note_context";
import ActionButton from "./react/ActionButton";
import { useMemo } from "preact/hooks";
import froca from "../services/froca";
export default function Breadcrumb() { export default function Breadcrumb() {
const { note, noteContext } = useNoteContext(); const { note, noteContext } = useNoteContext();
@ -15,7 +18,10 @@ export default function Breadcrumb() {
<div className="breadcrumb"> <div className="breadcrumb">
{notePath.map((item, index) => ( {notePath.map((item, index) => (
<Fragment key={item}> <Fragment key={item}>
<BreadcrumbItem notePath={item} activeNotePath={noteContext?.notePath ?? ""} /> {index === 0 && notePath.length > 1
? <BreadcrumbRoot noteContext={noteContext} />
: <BreadcrumbItem notePath={item} activeNotePath={noteContext?.notePath ?? ""} />
}
{(index < notePath.length - 1 || note?.hasChildren()) && {(index < notePath.length - 1 || note?.hasChildren()) &&
<BreadcrumbSeparator notePath={item} activeNotePath={notePath[index+1]} noteContext={noteContext} />} <BreadcrumbSeparator notePath={item} activeNotePath={notePath[index+1]} noteContext={noteContext} />}
</Fragment> </Fragment>
@ -24,6 +30,20 @@ export default function Breadcrumb() {
) )
} }
function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined }) {
const note = useMemo(() => froca.getNoteFromCache("root"), []);
useNoteLabel(note, "iconClass");
const title = useNoteProperty(note, "title");
return (note &&
<ActionButton
icon={note.getIcon()}
text={title ?? ""}
onClick={() => noteContext?.setNote("root")}
/>
)
}
function BreadcrumbItem({ notePath, activeNotePath }: { notePath: string, activeNotePath: string }) { function BreadcrumbItem({ notePath, activeNotePath }: { notePath: string, activeNotePath: string }) {
const isRootNote = (notePath === "root"); const isRootNote = (notePath === "root");
return ( return (