Enable in-place column sync, caching & reload

components/column-selector/index.js

@@ -34,6 +34,14 @@ export default class ColumnSelector extends HTMLElement {
     connectedCallback() {
         TPEN.attachAuthentication(this)
         this._unsubProject = onProjectReady(this, this.authgate)
+
+        // Listen for column updates to refresh selector
+        this.cleanup.onEvent(eventDispatcher, "tpen-columns-updated", (event) => {
+            // Only refresh if the update is for the current page
+            if (event.detail?.pageId === TPEN.screen.pageInQuery) {
+                this.refreshFromProject()
+            }
+        })
     }
 
     /**
@@ -55,7 +63,7 @@ export default class ColumnSelector extends HTMLElement {
     }
 
     async findColumnsData() {
-        const pageId = new URLSearchParams(location.search).get("pageID")
+        const pageId = TPEN.screen.pageInQuery
         const page = TPEN.activeProject?.layers?.flatMap(layer => layer.pages || []).find(p => p.id.split('/').pop() === pageId)
         this.columns = page?.columns || []
 
@@ -80,6 +88,37 @@ export default class ColumnSelector extends HTMLElement {
         this.render()
     }
 
+    refreshFromProject() {
+        const pageId = TPEN.screen.pageInQuery
+        const page = TPEN.activeProject?.layers?.flatMap(layer => layer.pages || []).find(p => p.id.split('/').pop() === pageId)
+        this.columns = page?.columns || []
+
+        if (this.columns.length < 1) {
+            this.remove()
+            return
+        }
+
+        this.columns = this.columns.map((col, i) => {
+            const isAuto = col.label.startsWith("Column ") &&
+                /^[a-f\d]{24}$/i.test(col.label.slice(7))
+            return { ...col, label: isAuto ? `Unnamed ${i + 1}` : col.label }
+        })
+
+        if (!this.#page) {
+            this.findColumnsData()
+            return
+        }
+
+        const { orderedItems, columnsInPage, allColumnLines } = orderPageItemsByColumns(
+            { columns: this.columns, items: page?.items },
+            this.#page
+        )
+        this.columns = columnsInPage
+        this.allLinesInColumns = allColumnLines
+        this.#page.items = orderedItems
+        this.render()
+    }
+
     getLabel(data) {
         if (typeof data.label === "string") {
             return data.label