fix(views/board): column desynchronising due to API management

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

@@ -133,6 +133,29 @@ export default class BoardApi {
         await this.viewStorage.store(this.persistedData);
     }
 
+    async refresh(parentNote: FNote) {
+        // Refresh the API data by re-fetching from the parent note
+        const statusAttribute = parentNote.getLabelValue("board:groupBy") ?? "status";
+        this._statusAttribute = statusAttribute;
+
+        let persistedData = await this.viewStorage.restore() ?? {};
+        const { byColumn, newPersistedData } = await getBoardData(parentNote, statusAttribute, persistedData);
+        
+        // Update internal state
+        this.byColumn = byColumn;
+        
+        if (newPersistedData) {
+            this.persistedData = newPersistedData;
+            this.viewStorage.store(this.persistedData);
+        }
+
+        // Use the order from persistedData.columns, then add any new columns found
+        const orderedColumns = this.persistedData.columns?.map(col => col.value) || [];
+        const allColumns = Array.from(byColumn.keys());
+        const newColumns = allColumns.filter(col => !orderedColumns.includes(col));
+        this._columns = [...orderedColumns, ...newColumns];
+    }
+
     static async build(parentNote: FNote, viewStorage: ViewModeStorage<BoardData>) {
         const statusAttribute = parentNote.getLabelValue("board:groupBy") ?? "status";
 

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

@@ -107,10 +107,6 @@ export class ColumnDragHandler implements BaseDragHandler {
         });
     }
 
-    updateApi(newApi: BoardApi) {
-        this.api = newApi;
-    }
-
     cleanup() {
         this.cleanupColumnDropIndicators();
         this.context.draggedColumn = null;

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

@@ -21,6 +21,7 @@ export class DifferentialBoardRenderer {
     private pendingUpdate = false;
     private parentNote: FNote;
     private viewStorage: ViewModeStorage<BoardData>;
+    private onRefreshApi: () => Promise<void>;
 
     constructor(
         $container: JQuery<HTMLElement>,
@@ -28,7 +29,8 @@ export class DifferentialBoardRenderer {
         dragHandler: BoardDragHandler,
         onCreateNewItem: (column: string) => void,
         parentNote: FNote,
-        viewStorage: ViewModeStorage<BoardData>
+        viewStorage: ViewModeStorage<BoardData>,
+        onRefreshApi: () => Promise<void>
     ) {
         this.$container = $container;
         this.api = api;
@@ -36,13 +38,13 @@ export class DifferentialBoardRenderer {
         this.onCreateNewItem = onCreateNewItem;
         this.parentNote = parentNote;
         this.viewStorage = viewStorage;
+        this.onRefreshApi = onRefreshApi;
     }
 
     async renderBoard(refreshApi = false): Promise<void> {
         // Refresh API data if requested
         if (refreshApi) {
-            this.api = await BoardApi.build(this.parentNote, this.viewStorage);
+            await this.onRefreshApi();
-            this.dragHandler.updateApi(this.api);
         }
 
         // Debounce rapid updates

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

@@ -35,12 +35,6 @@ export class BoardDragHandler {
         this.columnDragHandler.setupColumnDropZone($columnEl);
     }
 
-    // Common methods
-    updateApi(newApi: BoardApi) {
-        this.noteDragHandler.updateApi(newApi);
-        this.columnDragHandler.updateApi(newApi);
-    }
-
     cleanup() {
         this.noteDragHandler.cleanup();
         this.columnDragHandler.cleanup();

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

@@ -8,5 +8,4 @@ export interface DragContext {
 
 export interface BaseDragHandler {
     cleanup(): void;
-    updateApi(api: any): void;
 }

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

@@ -337,7 +337,8 @@ export default class BoardView extends ViewMode<BoardData> {
             this.dragHandler,
             (column: string) => this.createNewItem(column),
             this.parentNote,
-            this.viewStorage
+            this.viewStorage,
+            () => this.refreshApi()
         );
 
         setupContextMenu({
@@ -350,6 +351,14 @@ export default class BoardView extends ViewMode<BoardData> {
         this.setupBoardInteractions();
     }
 
+    private async refreshApi(): Promise<void> {
+        if (!this.api) {
+            throw new Error("API not initialized");
+        }
+        
+        await this.api.refresh(this.parentNote);
+    }
+
     private setupBoardInteractions() {
         // Handle column title editing with click detection that works with dragging
         this.$container.on('mousedown', 'h3[data-column-value]', (e) => {

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

@@ -67,10 +67,6 @@ export class NoteDragHandler implements BaseDragHandler {
         });
     }
 
-    updateApi(newApi: BoardApi) {
-        this.api = newApi;
-    }
-
     cleanup() {
         this.cleanupAllDropIndicators();
         this.$container.find('.board-column').removeClass('drag-over');