chore(react/collections/view): first implementation

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

@@ -2,7 +2,7 @@ import { allViewTypes, ViewModeProps, ViewTypeOptions } from "./interface";
 import { useNoteContext, useNoteLabel, useTriliumEvent } from "../react/hooks";
 import FNote from "../../entities/fnote";
 import "./NoteList.css";
-import ListView from "./legacy/ListView";
+import { ListView, GridView } from "./legacy/ListView";
 import { useEffect, useState } from "preact/hooks";
 
 interface NoteListProps {
@@ -34,6 +34,8 @@ function getComponentByViewType(note: FNote, noteIds: string[], viewType: ViewTy
     switch (viewType) {
         case "list":
             return <ListView {...props} />;
+        case "grid":
+            return <GridView {...props} />;
     }
 }
 

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

@@ -52,7 +52,6 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
         <div class="note-list-pager">
             {children}
 
-            // no need to distinguish "note" vs "notes" since in case of one result, there's no paging at all
             <span className="note-list-pager-total-count">({t("pagination.total_notes", { count: totalNotes })})</span>
         </div>
     )

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

@@ -17,7 +17,6 @@
 }
 
 .note-book-card:not(.expanded) .note-book-content {
-    display: none !important;
     padding: 10px
 }
 

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

@@ -7,25 +7,22 @@ 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";
 
-export default function ListView({ note, noteIds }: ViewModeProps) {
+export function ListView({ note, noteIds: unfilteredNoteIds }: ViewModeProps) {
     const [ isExpanded ] = useNoteLabelBoolean(note, "expanded");
-    const filteredNoteIds = useMemo(() => {
+    const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
-        // 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.
+    const { pageNotes, ...pagination } = usePagination(note, noteIds);
-        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);
-    const { pageNotes, ...pagination } = usePagination(note, filteredNoteIds);
 
     return (
-        <div class="note-list">
+        <div class="note-list list-view">
             <div class="note-list-wrapper">
                 <Pager {...pagination} />
 
                 <div class="note-list-container use-tn-links">
-                    {pageNotes?.map(note => (
+                    {pageNotes?.map(childNote => (
-                        <NoteCard note={note} expand={isExpanded} />
+                        <ListNoteCard note={childNote} parentNote={note} expand={isExpanded} />
                     ))}
                 </div>
 
@@ -35,12 +32,30 @@ export default function ListView({ note, noteIds }: ViewModeProps) {
     );
 }
 
-function NoteCard({ note, expand }: { note: FNote, expand?: boolean }) {
+export function GridView({ note, noteIds: unfilteredNoteIds }: 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} />
+                    ))}
+                </div>
+
+                <Pager {...pagination} />
+            </div>
+        </div>
+    );
+}
+
+function ListNoteCard({ note, parentNote, expand }: { note: FNote, parentNote: FNote, expand?: boolean }) {
     const [ isExpanded, setExpanded ] = useState(expand);
-    const isSearch = note.type === "search";
+    const notePath = getNotePath(parentNote, note);
-    const notePath = isSearch
-        ? note.noteId // for search note parent, we want to display a non-search path
-        : `${note.noteId}/${note.noteId}`;
 
     return (
         <div
@@ -54,16 +69,40 @@ function NoteCard({ note, expand }: { note: FNote, expand?: boolean }) {
                 />
 
                 <Icon className="note-icon" icon={note.getIcon()} />
-                <NoteLink className="note-book-title" notePath={notePath} noPreview showNotePath={isSearch} />
+                <NoteLink className="note-book-title" notePath={notePath} noPreview showNotePath={note.type === "search"} />
                 {isExpanded && <>
                     <NoteContent note={note} />
-                    <NoteChildren note={note} />
+                    <NoteChildren note={note} parentNote={parentNote} />
                 </>}
             </h5>
         </div>
     )
 }
 
+function GridNoteCard({ note, parentNote }: { note: FNote, parentNote: FNote }) {
+    const [ noteTitle, setNoteTitle ] = useState<string>();
+    const notePath = getNotePath(parentNote, note);
+
+    useEffect(() => {
+        tree.getNoteTitle(note.noteId, parentNote.noteId).then(setNoteTitle);
+    }, [ note ]);
+
+    return (
+        <div
+            className={`note-book-card no-tooltip-preview block-link`}
+            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 className="note-book-title">{noteTitle}</span>
+            </h5>
+            <NoteContent note={note} trim />
+        </div>
+    )
+}
+
 function NoteContent({ note, trim }: { note: FNote, trim?: boolean }) {
     const contentRef = useRef<HTMLDivElement>(null);
 
@@ -83,7 +122,7 @@ function NoteContent({ note, trim }: { note: FNote, trim?: boolean }) {
     return <div ref={contentRef} className="note-book-content" />;
 }
 
-function NoteChildren({ note }: { note: FNote}) {
+function NoteChildren({ note, parentNote }: { note: FNote, parentNote: FNote }) {
     const imageLinks = note.getRelations("imageLink");
     const [ childNotes, setChildNotes ] = useState<FNote[]>();
 
@@ -94,5 +133,25 @@ function NoteChildren({ note }: { note: FNote}) {
         });
     }, [ note ]);
 
-    return childNotes?.map(childNote => <NoteCard note={childNote} />)
+    return childNotes?.map(childNote => <ListNoteCard note={childNote} parentNote={parentNote} />)
+}
+
+/**
+ * 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}`
+    }
 }

apps/client/src/widgets/view_widgets/list_or_grid_view.ts

@@ -13,7 +13,6 @@ class ListOrGridView extends ViewMode<{}> {
     private filteredNoteIds!: string[];
     private page?: number;
     private pageSize?: number;
-    private showNotePath?: boolean;
     private highlightRegex?: RegExp | null;
 
     constructor(viewType: ViewTypeOptions, args: ViewModeArgs) {
@@ -45,25 +44,6 @@ class ListOrGridView extends ViewMode<{}> {
     async renderNote(note: FNote, expand: boolean = false) {
         const { $renderedAttributes } = await attributeRenderer.renderNormalAttributes(note);
 
-        const $card = $('<div class="note-book-card">')
-            .append(
-                $('<h5 class="note-book-header">')
-                    .append(
-                        this.viewType === "grid"
-                            ? $('<span class="note-book-title">').text(await treeService.getNoteTitle(note.noteId, this.parentNote.noteId))
-                    )
-                    .append($renderedAttributes)
-            );
-
-        if (this.viewType === "grid") {
-            $card
-                .addClass("block-link")
-                .attr("data-href", `#${notePath}`)
-                .on("click", (e) => linkService.goToLink(e));
-        }
-
-        $expander.on("click", () => this.toggleContent($card, note, !$card.hasClass("expanded")));
-
         if (this.highlightRegex) {
             const Mark = new (await import("mark.js")).default($card.find(".note-book-title")[0]);
             Mark.markRegExp(this.highlightRegex, {
@@ -71,26 +51,12 @@ class ListOrGridView extends ViewMode<{}> {
                 className: "ck-find-result"
             });
         }
-
-        await this.toggleContent($card, note, expand);
-
-        return $card;
-    }
-
-    async toggleContent($card: JQuery<HTMLElement>, note: FNote, expand: boolean) {
-        if (this.viewType === "list" && ((expand && $card.hasClass("expanded")) || (!expand && !$card.hasClass("expanded")))) {
-            return;
-        }
-
-        if ((this.viewType === "grid")) {
-            $card.append(await this.renderNoteContent(note));
-        }
     }
 
     async renderNoteContent(note: FNote) {
         try {
             const { $renderedContent, type } = await contentRenderer.getRenderedContent(note, {
-                trim: this.viewType === "grid" // for grid only short content is needed
+                trim: this.viewType === "grid"
             });
 
             if (this.highlightRegex) {