chore(react/collections/board): render items

apps/client/src/widgets/collections/board/index.tsx

@@ -3,6 +3,8 @@ import { ViewModeProps } from "../interface";
 import "./index.css";
 import { ColumnMap, getBoardData } from "./data";
 import { useNoteLabel } from "../../react/hooks";
+import FNote from "../../../entities/fnote";
+import FBranch from "../../../entities/fbranch";
 
 export interface BoardViewData {
     columns?: BoardColumnData[];
@@ -37,15 +39,15 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
     return (
         <div className="board-view">
             <div className="board-view-container">
-                {columns?.map(column => (
-                    <Column column={column} />
+                {byColumn && columns?.map(column => (
+                    <Column column={column} columnItems={byColumn.get(column)} />
                 ))}
             </div>
         </div>
     )
 }
 
-function Column({ column }: { column: string }) {
+function Column({ column, columnItems }: { column: string, columnItems?: { note: FNote, branch: FBranch }[] }) {
     return (
         <div className="board-column">
             <h3>
@@ -54,6 +56,21 @@ function Column({ column }: { column: string }) {
                     className="edit-icon icon bx bx-edit-alt"
                     title="Click to edit column title" />
             </h3>
+
+            {(columnItems ?? []).map(({ note, branch }) => (
+                <Card note={note} branch={branch} column={column} />
+            ))}
+        </div>
+    )
+}
+
+function Card({ note }: { note: FNote, branch: FBranch, column: string }) {
+    const colorClass = note.getColorClass() || '';
+
+    return (
+        <div className={`board-note ${colorClass}`}>
+            <span class={`icon ${note.getIcon()}`} />
+            {note.title}
         </div>
     )
 }

apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts

@@ -345,14 +345,6 @@ export class DifferentialBoardRenderer {
         this.dragHandler.setupNoteDropZone($columnEl, column);
         this.dragHandler.setupColumnDropZone($columnEl);
 
-        // Add cards
-        for (const item of columnItems) {
-            if (item.note) {
-                const $noteEl = this.createCard(item.note, item.branch, column);
-                $columnEl.append($noteEl);
-            }
-        }
-
         // Add "New item" button
         const $newItemEl = $("<div>")
             .addClass("board-new-item")
@@ -366,26 +358,6 @@ export class DifferentialBoardRenderer {
     }
 
     private createCard(note: any, branch: any, column: string): JQuery<HTMLElement> {
-        const $iconEl = $("<span>")
-            .addClass("icon")
-            .addClass(note.getIcon());
-
-        const colorClass = note.getColorClass() || '';
-
-        const $noteEl = $("<div>")
-            .addClass("board-note")
-            .attr("data-note-id", note.noteId)
-            .attr("data-branch-id", branch.branchId)
-            .attr("data-current-column", column)
-            .attr("data-icon-class", note.getIcon())
-            .attr("data-color-class", colorClass)
-            .text(note.title);
-
-        // Add color class to the card if it exists
-        if (colorClass) {
-            $noteEl.addClass(colorClass);
-        }
-
         $noteEl.prepend($iconEl);
         $noteEl.on("click", () => appContext.triggerCommand("openInPopup", { noteIdOrPath: note.noteId }));