diff --git a/apps/client/src/widgets/view_widgets/board_view/index.ts b/apps/client/src/widgets/view_widgets/board_view/index.ts
index 0589845d2..45be8a654 100644
--- a/apps/client/src/widgets/view_widgets/board_view/index.ts
+++ b/apps/client/src/widgets/view_widgets/board_view/index.ts
@@ -8,17 +8,26 @@ const TPL = /*html*/`
overflow: hidden;
position: relative;
height: 100%;
+ padding: 1em;
user-select: none;
}
.board-view-container {
height: 100%;
+ display: flex;
+ gap: 1em;
+ }
+
+ .board-view-container .board-column {
+ min-width: 200px;
+ }
+
+ .board-view-container .board-column h3 {
+ font-size: 1.2em;
}
-
- Board view goes here.
-
+
`;
@@ -40,14 +49,32 @@ export default class BoardView extends ViewMode {
}
async renderList(): Promise | undefined> {
- // this.$container.empty();
+ this.$container.empty();
this.renderBoard(this.$container[0]);
+
return this.$root;
}
private async renderBoard(el: HTMLElement) {
const data = await getBoardData(this.noteIds, "status");
- console.log("Board data:", data);
+
+ for (const column of data.byColumn.keys()) {
+ const columnNotes = data.byColumn.get(column);
+ if (!columnNotes) {
+ continue;
+ }
+
+ const $columnEl = $("")
+ .addClass("board-column")
+ .append($("
").text(column));
+
+ for (const note of columnNotes) {
+ const $noteEl = $("
").addClass("board-note").text(note.title); // Assuming FNote has a title property
+ $columnEl.append($noteEl);
+ }
+
+ $(el).append($columnEl);
+ }
}
}