chore(react/collections/list): display note content

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

@@ -117,10 +117,6 @@
     border: 1px solid transparent;
 }
 
-.note-list.grid-view .note-expander {
-    display: none;
-}
-
 .note-list.grid-view .note-book-card {
     max-height: 300px;
 }

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

@@ -1,10 +1,12 @@
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import FNote from "../../../entities/fnote";
 import Icon from "../../react/Icon";
 import { ViewModeProps } from "../interface";
-import { useNoteLabel, useNoteLabelBoolean } from "../../react/hooks";
+import { useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../../react/hooks";
 import froca from "../../../services/froca";
 import NoteLink from "../../react/NoteLink";
+import "./ListOrGridView.css";
+import content_renderer from "../../../services/content_renderer";
 
 export default function ListView({ note, noteIds }: ViewModeProps) {
     const [ isExpanded ] = useNoteLabelBoolean(note, "expanded");
@@ -34,6 +36,7 @@ export default function ListView({ note, noteIds }: ViewModeProps) {
 }
 
 function NoteCard({ note, expand }: { note: FNote, expand?: boolean }) {
+    const [ isExpanded, setExpanded ] = useState(expand);
     const isSearch = note.type === "search";
     const notePath = isSearch
         ? note.noteId // for search note parent, we want to display a non-search path
@@ -41,17 +44,42 @@ function NoteCard({ note, expand }: { note: FNote, expand?: boolean }) {
 
     return (
         <div
-            className="note-book-card no-tooltip-preview"
-            data-note-id={note.noteId}
+            className={`note-book-card no-tooltip-preview ${isExpanded ? "expanded" : ""}`}
+            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 notePath={notePath} noPreview showNotePath={isSearch} />
+                <NoteContent note={note} />
             </h5>
         </div>
     )
 }
 
+function NoteContent({ note, trim }: { note: FNote, trim?: boolean }) {
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        content_renderer.getRenderedContent(note, { trim })
+            .then(({ $renderedContent, type }) => {
+                contentRef.current?.replaceChildren(...$renderedContent);
+                contentRef.current?.classList.add(`type-${type}`);
+            })
+            .catch(e => {
+                console.warn(`Caught error while rendering note '${note.noteId}' of type '${note.type}'`);
+                console.error(e);
+                contentRef.current?.replaceChildren("rendering error");
+            })
+    }, [ note ]);
+
+    return <div ref={contentRef} className="note-book-content" />;
+}
+
 function usePagination(note: FNote, noteIds: string[]) {
     const [ page, setPage ] = useState(1);
     const [ pageNotes, setPageNotes ] = useState<FNote[]>();

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

@@ -1,6 +1,5 @@
 import linkService from "../../services/link.js";
 import contentRenderer from "../../services/content_renderer.js";
-import froca from "../../services/froca.js";
 import attributeRenderer from "../../services/attribute_renderer.js";
 import treeService from "../../services/tree.js";
 import utils from "../../services/utils.js";
@@ -130,22 +129,12 @@ class ListOrGridView extends ViewMode<{}> {
 
         const $expander = $card.find("> .note-book-header .note-expander");
 
-        if (expand || this.viewType === "grid") {
-            $card.addClass("expanded");
-            $expander.addClass("bx-chevron-down").removeClass("bx-chevron-right");
-        } else {
-            $card.removeClass("expanded");
-            $expander.addClass("bx-chevron-right").removeClass("bx-chevron-down");
-        }
-
-        if ((expand || this.viewType === "grid") && $card.find(".note-book-content").length === 0) {
+        if ((this.viewType === "grid")) {
             $card.append(await this.renderNoteContent(note));
         }
     }
 
     async renderNoteContent(note: FNote) {
-        const $content = $('<div class="note-book-content">');
-
         try {
             const { $renderedContent, type } = await contentRenderer.getRenderedContent(note, {
                 trim: this.viewType === "grid" // for grid only short content is needed
@@ -158,14 +147,6 @@ class ListOrGridView extends ViewMode<{}> {
                     className: "ck-find-result"
                 });
             }
-
-            $content.append($renderedContent);
-            $content.addClass(`type-${type}`);
-        } catch (e) {
-            console.warn(`Caught error while rendering note '${note.noteId}' of type '${note.type}'`);
-            console.error(e);
-
-            $content.append("rendering error");
         }
 
         if (this.viewType === "list") {