Trilium/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx

import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
import FNote from "../../../entities/fnote";
import Icon from "../../react/Icon";
import { ViewModeProps } from "../interface";
import {  useNoteLabelBoolean, useImperativeSearchHighlighlighting } from "../../react/hooks";
import NoteLink from "../../react/NoteLink";
import "./ListOrGridView.css";
import content_renderer from "../../../services/content_renderer";
import { Pager, usePagination } from "../Pagination";
import tree from "../../../services/tree";
import link from "../../../services/link";
import { t } from "../../../services/i18n";
import attribute_renderer from "../../../services/attribute_renderer";
import froca from "../../../services/froca";
import { RawHtmlBlock } from "../../react/RawHtml";

export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
    const [ isExpanded ] = useNoteLabelBoolean(note, "expanded");
    const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
    const { pageNotes, ...pagination } = usePagination(note, noteIds);

    return (
        <div class="note-list list-view">
            { noteIds.length > 0 && <div class="note-list-wrapper">
                <Pager {...pagination} />

                <div class="note-list-container use-tn-links">
                    {pageNotes?.map(childNote => (
                        <ListNoteCard note={childNote} parentNote={note} expand={isExpanded} highlightedTokens={highlightedTokens} />
                    ))}
                </div>

                <Pager {...pagination} />
            </div>}
        </div>
    );
}

interface NotesWithContent {
    note: FNote;
    content: string;
}

export function ListPrintView({ note, noteIds: unfilteredNoteIds, highlightedTokens, onReady }: ViewModeProps<{}>) {
    const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
    const [ notesWithContent, setNotesWithContent ] = useState<NotesWithContent[]>();

    useLayoutEffect(() => {
        froca.getNotes(noteIds).then(async (notes) => {
            const notesWithContent: NotesWithContent[] = [];

            async function processNote(note: FNote) {
                const content = await content_renderer.getRenderedContent(note, {
                    trim: false,
                    noChildrenList: true
                });

                notesWithContent.push({ note, content: content.$renderedContent[0].innerHTML });

                if (note.hasChildren()) {
                    const imageLinks = note.getRelations("imageLink");
                    const childNotes = await note.getChildNotes();
                    const filteredChildNotes = childNotes.filter((childNote) => !imageLinks.find((rel) => rel.value === childNote.noteId));
                    for (const childNote of filteredChildNotes) {
                        await processNote(childNote);
                    }
                }
            }

            for (const note of notes) {
                await processNote(note);
            }
            setNotesWithContent(notesWithContent);
        });
    }, [noteIds]);

    useEffect(() => {
        if (notesWithContent && onReady) {
            onReady();
        }
    }, [ notesWithContent, onReady ]);

    return (
        <div class="note-list list-print-view">
            <div class="note-list-container use-tn-links">
                <h1>{note.title}</h1>

                {notesWithContent?.map(({ note: childNote, content }) => (
                    <section id={`note-${childNote.noteId}`} class="note">
                        <h1>{childNote.title}</h1>
                        <RawHtmlBlock html={content} />
                    </section>
                ))}
            </div>
        </div>
    );
}

export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
    const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
    const { pageNotes, ...pagination } = usePagination(note, noteIds);

    return (
        <div class="note-list grid-view">
            <div class="note-list-wrapper">
                <Pager {...pagination} />

                <div class="note-list-container use-tn-links">
                    {pageNotes?.map(childNote => (
                        <GridNoteCard note={childNote} parentNote={note} highlightedTokens={highlightedTokens} />
                    ))}
                </div>

                <Pager {...pagination} />
            </div>
        </div>
    );
}

function ListNoteCard({ note, parentNote, expand, highlightedTokens }: { note: FNote, parentNote: FNote, expand?: boolean, highlightedTokens: string[] | null | undefined }) {
    const [ isExpanded, setExpanded ] = useState(expand);
    const notePath = getNotePath(parentNote, note);

    // Reset expand state if switching to another note, or if user manually toggled expansion state.
    useEffect(() => setExpanded(expand), [ note, expand ]);

    return (
        <div
            className={`note-book-card no-tooltip-preview ${isExpanded ? "expanded" : ""} ${note.isArchived ? "archived" : ""}`}
            data-note-id={note.noteId}
        >
            <h5 className="note-book-header">
                <span
                    className={`note-expander ${isExpanded ? "bx bx-chevron-down" : "bx bx-chevron-right"}`}
                    onClick={() => setExpanded(!isExpanded)}
                />

                <Icon className="note-icon" icon={note.getIcon()} />
                <NoteLink className="note-book-title" notePath={notePath} noPreview showNotePath={parentNote.type === "search"} highlightedTokens={highlightedTokens} />
                <NoteAttributes note={note} />
            </h5>

            {isExpanded && <>
                <NoteContent note={note} highlightedTokens={highlightedTokens} noChildrenList />
                <NoteChildren note={note} parentNote={parentNote} highlightedTokens={highlightedTokens} />
            </>}
        </div>
    )
}

function GridNoteCard({ note, parentNote, highlightedTokens }: { note: FNote, parentNote: FNote, highlightedTokens: string[] | null | undefined }) {
    const titleRef = useRef<HTMLSpanElement>(null);
    const [ noteTitle, setNoteTitle ] = useState<string>();
    const notePath = getNotePath(parentNote, note);
    const highlightSearch = useImperativeSearchHighlighlighting(highlightedTokens);

    useEffect(() => {
        tree.getNoteTitle(note.noteId, parentNote.noteId).then(setNoteTitle);
    }, [ note ]);

    useEffect(() => highlightSearch(titleRef.current), [ noteTitle, highlightedTokens ]);

    return (
        <div
            className={`note-book-card no-tooltip-preview block-link ${note.isArchived ? "archived" : ""}`}
            data-href={`#${notePath}`}
            data-note-id={note.noteId}
            onClick={(e) => link.goToLink(e)}
        >
            <h5 className="note-book-header">
                <Icon className="note-icon" icon={note.getIcon()} />
                <span ref={titleRef} className="note-book-title">{noteTitle}</span>
                <NoteAttributes note={note} />
            </h5>
            <NoteContent
                note={note}
                trim
                highlightedTokens={highlightedTokens}
            />
        </div>
    )
}

function NoteAttributes({ note }: { note: FNote }) {
    const ref = useRef<HTMLSpanElement>(null);
    useEffect(() => {
        attribute_renderer.renderNormalAttributes(note).then(({$renderedAttributes}) => {
            ref.current?.replaceChildren(...$renderedAttributes);
        });
    }, [ note ]);

    return <span className="note-list-attributes" ref={ref} />
}

function NoteContent({ note, trim, noChildrenList, highlightedTokens }: { note: FNote, trim?: boolean, noChildrenList?: boolean, highlightedTokens: string[] | null | undefined }) {
    const contentRef = useRef<HTMLDivElement>(null);
    const highlightSearch = useImperativeSearchHighlighlighting(highlightedTokens);

    useEffect(() => {
        content_renderer.getRenderedContent(note, {
            trim,
            noChildrenList
        })
            .then(({ $renderedContent, type }) => {
                if (!contentRef.current) return;
                if ($renderedContent[0].innerHTML) {
                    contentRef.current.replaceChildren(...$renderedContent);
                } else {
                    contentRef.current.replaceChildren();
                }
                contentRef.current.classList.add(`type-${type}`);
                highlightSearch(contentRef.current);
            })
            .catch(e => {
                console.warn(`Caught error while rendering note '${note.noteId}' of type '${note.type}'`);
                console.error(e);
                contentRef.current?.replaceChildren(t("collections.rendering_error"));
            })
    }, [ note, highlightedTokens ]);

    return <div ref={contentRef} className="note-book-content" />;
}

function NoteChildren({ note, parentNote, highlightedTokens }: { note: FNote, parentNote: FNote, highlightedTokens: string[] | null | undefined }) {
    const imageLinks = note.getRelations("imageLink");
    const [ childNotes, setChildNotes ] = useState<FNote[]>();

    useEffect(() => {
        note.getChildNotes().then(childNotes => {
            const filteredChildNotes = childNotes.filter((childNote) => !imageLinks.find((rel) => rel.value === childNote.noteId));
            setChildNotes(filteredChildNotes);
        });
    }, [ note ]);

    return childNotes?.map(childNote => <ListNoteCard note={childNote} parentNote={parentNote} highlightedTokens={highlightedTokens} />)
}

/**
 * Filters the note IDs for the legacy view to filter out subnotes that are already included in the note content such as images, included notes.
 */
function useFilteredNoteIds(note: FNote, noteIds: string[]) {
    return useMemo(() => {
        const includedLinks = note ? note.getRelations().filter((rel) => rel.name === "imageLink" || rel.name === "includeNoteLink") : [];
        const includedNoteIds = new Set(includedLinks.map((rel) => rel.value));
        return noteIds.filter((noteId) => !includedNoteIds.has(noteId) && noteId !== "_hidden");
    }, noteIds);
}

function getNotePath(parentNote: FNote, childNote: FNote) {
    if (parentNote.type === "search") {
        // for search note parent, we want to display a non-search path
        return childNote.noteId;
    } else {
        return `${parentNote.noteId}/${childNote.noteId}`
    }
}