refactor(print/list): use separate file

apps/client/src/widgets/collections/NoteList.tsx

@@ -2,7 +2,7 @@ import { allViewTypes, ViewModeMedia, ViewModeProps, ViewTypeOptions } from "./i
 import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useTriliumEvent } from "../react/hooks";
 import FNote from "../../entities/fnote";
 import "./NoteList.css";
-import { ListView, GridView, ListPrintView } from "./legacy/ListOrGridView";
+import { ListView, GridView } from "./legacy/ListOrGridView";
 import { useEffect, useRef, useState } from "preact/hooks";
 import GeoView from "./geomap";
 import ViewModeStorage from "./view_mode_storage";
@@ -13,6 +13,7 @@ import { subscribeToMessages, unsubscribeToMessage as unsubscribeFromMessage } f
 import { WebSocketMessage } from "@triliumnext/commons";
 import froca from "../../services/froca";
 import PresentationView from "./presentation";
+import { ListPrintView } from "./legacy/ListPrintView";
 
 interface NoteListProps {
     note: FNote | null | undefined;

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

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import FNote from "../../../entities/fnote";
 import Icon from "../../react/Icon";
 import { ViewModeProps } from "../interface";
@@ -11,9 +11,7 @@ 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 { useFilteredNoteIds } from "./utils";
-import { RawHtmlBlock } from "../../react/RawHtml";
-import { escapeHtml } from "../../../services/utils";
 
 export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
     const [ isExpanded ] = useNoteLabelBoolean(note, "expanded");
@@ -37,82 +35,6 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
     );
 }
 
-interface NotesWithContent {
-    note: FNote;
-    content: string;
-}
-
-export function ListPrintView({ note, noteIds: unfilteredNoteIds, 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, depth: number) {
-                const content = await content_renderer.getRenderedContent(note, {
-                    trim: false,
-                    noChildrenList: true
-                });
-
-                const contentEl = content.$renderedContent[0];
-
-                // Create page title element
-                const pageTitleEl = document.createElement("h1");
-                pageTitleEl.textContent = note.title;
-                contentEl.prepend(pageTitleEl);
-
-                // Rewrite heading tags to ensure proper hierarchy in print view.
-                const headings = contentEl.querySelectorAll("h1, h2, h3, h4, h5, h6")
-                for (const headingEl of headings) {
-                    const currentLevel = parseInt(headingEl.tagName.substring(1), 10);
-                    const newLevel = Math.min(currentLevel + depth, 6);
-                    const newHeadingEl = document.createElement(`h${newLevel}`);
-                    newHeadingEl.innerHTML = headingEl.innerHTML;
-                    headingEl.replaceWith(newHeadingEl);
-                }
-
-                notesWithContent.push({ note, content: contentEl.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, depth + 1);
-                    }
-                }
-            }
-
-            for (const note of notes) {
-                await processNote(note, 1);
-            }
-            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">
-                        <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);
@@ -252,17 +174,6 @@ function NoteChildren({ note, parentNote, highlightedTokens }: { note: FNote, pa
     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

apps/client/src/widgets/collections/legacy/ListPrintView.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useLayoutEffect, useState } from "preact/hooks";
+import { RawHtmlBlock } from "../../react/RawHtml";
+import froca from "../../../services/froca";
+import type FNote from "../../../entities/fnote";
+import content_renderer from "../../../services/content_renderer";
+import type { ViewModeProps } from "../interface";
+import { useFilteredNoteIds } from "./utils";
+
+interface NotesWithContent {
+    note: FNote;
+    content: string;
+}
+
+export function ListPrintView({ note, noteIds: unfilteredNoteIds, 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, depth: number) {
+                const content = await content_renderer.getRenderedContent(note, {
+                    trim: false,
+                    noChildrenList: true
+                });
+
+                const contentEl = content.$renderedContent[0];
+
+                // Create page title element
+                const pageTitleEl = document.createElement("h1");
+                pageTitleEl.textContent = note.title;
+                contentEl.prepend(pageTitleEl);
+
+                // Rewrite heading tags to ensure proper hierarchy in print view.
+                const headings = contentEl.querySelectorAll("h1, h2, h3, h4, h5, h6")
+                for (const headingEl of headings) {
+                    const currentLevel = parseInt(headingEl.tagName.substring(1), 10);
+                    const newLevel = Math.min(currentLevel + depth, 6);
+                    const newHeadingEl = document.createElement(`h${newLevel}`);
+                    newHeadingEl.innerHTML = headingEl.innerHTML;
+                    headingEl.replaceWith(newHeadingEl);
+                }
+
+                notesWithContent.push({ note, content: contentEl.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, depth + 1);
+                    }
+                }
+            }
+
+            for (const note of notes) {
+                await processNote(note, 1);
+            }
+            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">
+                        <RawHtmlBlock html={content} />
+                    </section>
+                ))}
+            </div>
+        </div>
+    );
+}

apps/client/src/widgets/collections/legacy/utils.ts

@@ -0,0 +1,13 @@
+import { useMemo } from "preact/hooks";
+import FNote from "../../../entities/fnote";
+
+/**
+ * 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.
+ */
+export 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);
+}