chore(react/collections/board): render empty columns

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

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "preact/hooks";
+import { ViewModeProps } from "../interface";
+import "./index.css";
+import { ColumnMap, getBoardData } from "./data";
+import { useNoteLabel } from "../../react/hooks";
+
+export interface BoardViewData {
+    columns?: BoardColumnData[];
+}
+
+export interface BoardColumnData {
+    value: string;
+}
+
+export default function BoardView({ note: parentNote, noteIds, viewConfig, saveConfig }: ViewModeProps<BoardViewData>) {
+    const [ statusAttribute ] = useNoteLabel(parentNote, "board:groupBy");
+    const [ byColumn, setByColumn ] = useState<ColumnMap>();
+    const [ columns, setColumns ] = useState<string[]>();
+
+    useEffect(() => {
+        getBoardData(parentNote, statusAttribute ?? "status", viewConfig ?? {}).then(({ byColumn, newPersistedData }) => {
+            setByColumn(byColumn);
+
+            if (newPersistedData) {
+                viewConfig = { ...newPersistedData };
+                saveConfig(newPersistedData);
+            }
+
+            // Use the order from persistedData.columns, then add any new columns found
+            const orderedColumns = viewConfig?.columns?.map(col => col.value) || [];
+            const allColumns = Array.from(byColumn.keys());
+            const newColumns = allColumns.filter(col => !orderedColumns.includes(col));
+            setColumns([...orderedColumns, ...newColumns]);
+        });
+    }, [ parentNote ]);
+
+    return (
+        <div className="board-view">
+            <div className="board-view-container">
+                {columns?.map(column => (
+                    <Column column={column} />
+                ))}
+            </div>
+        </div>
+    )
+}
+
+function Column({ column }: { column: string }) {
+    return (
+        <div className="board-column">
+            <h3>
+                <span>{column}</span>
+                <span
+                    className="edit-icon icon bx bx-edit-alt"
+                    title="Click to edit column title" />
+            </h3>
+        </div>
+    )
+}