feat(client): use chevrons to display note path

This commit is contained in:
Elian Doran 2025-12-09 14:49:19 +02:00
parent 7ee060b228
commit 5c8132088f
No known key found for this signature in database
2 changed files with 9 additions and 6 deletions

View File

@ -4,6 +4,8 @@ import froca from "./froca.js";
import hoistedNoteService from "./hoisted_note.js";
import appContext from "../components/app_context.js";
export const NOTE_PATH_TITLE_SEPARATOR = " ";
async function resolveNotePath(notePath: string, hoistedNoteId = "root") {
const runPath = await resolveNotePathToSegments(notePath, hoistedNoteId);
@ -254,7 +256,7 @@ async function getNotePathTitle(notePath: string) {
const titlePath = await getNotePathTitleComponents(notePath);
return titlePath.join(" / ");
return titlePath.join(NOTE_PATH_TITLE_SEPARATOR);
}
async function getNoteTitleWithPathAsSuffix(notePath: string) {

View File

@ -6,6 +6,7 @@ import { useEffect, useMemo, useState } from "preact/hooks";
import { 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<NotePathRecord[]>();
@ -33,7 +34,7 @@ export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabConte
<div className="note-path-intro">
{sortedNotePaths?.length ? t("note_paths.intro_placed") : t("note_paths.intro_not_placed")}
</div>
<ul className="note-path-list">
{sortedNotePaths?.length ? sortedNotePaths.map(sortedNotePath => (
<NotePath
@ -42,7 +43,7 @@ export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabConte
/>
)) : undefined}
</ul>
<Button
triggerCommand="cloneNoteIdsTo"
text={t("note_paths.clone_button")}
@ -55,7 +56,7 @@ export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabConte
function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: string | null, notePathRecord?: NotePathRecord }) {
const notePath = notePathRecord?.notePath ?? [];
const notePathString = useMemo(() => notePath.join("/"), [ notePath ]);
const [ classes, icons ] = useMemo(() => {
const classes: string[] = [];
const icons: { icon: string, title: string }[] = [];
@ -95,11 +96,11 @@ function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: strin
<li class={classes}>
{joinElements(fullNotePaths.map(notePath => (
<NoteLink notePath={notePath} noPreview />
)), " / ")}
)), NOTE_PATH_TITLE_SEPARATOR)}
{icons.map(({ icon, title }) => (
<span class={icon} title={title} />
))}
</li>
)
}
}