Fix: crashing columns, infinite loops and things!

src/lib/stores/preferences.ts

@@ -259,13 +259,13 @@ function createPreferences() {
         getColumnOrder(tableId: string): TeamPreferences['order'] {
             const columnOrder = teamPreferences?.columnOrder?.[tableId] ?? [];
             safePrefsKeyForOrder(columnOrder, '$uid', '$id');
-            return columnOrder;
+            return Array.from(new Set(columnOrder));
         },
 
         async saveColumnOrder(orgId: string, tableId: string, columnIds: TeamPreferences['order']) {
             teamPreferences = ensureObjectProperty(teamPreferences, 'columnOrder');
 
-            teamPreferences.columnOrder[tableId] = columnIds;
+            teamPreferences.columnOrder[tableId] = Array.from(new Set(columnIds));
 
             for (const tableOrder of Object.values(teamPreferences.columnOrder)) {
                 safePrefsKeyForOrder(tableOrder, '$id', '$uid');

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte

@@ -141,9 +141,7 @@
     let selectedRowForDelete: Models.Row['$id'] | null = null;
 
     onMount(async () => {
-        columnsOrder.set(preferences.getColumnOrder(tableId));
-        columnsWidth.set(preferences.getColumnWidths(tableId));
-
+        setupColumns();
         makeTableColumns();
         sortState.set(data.currentSort as SortState);
 
@@ -160,6 +158,29 @@
 
     onDestroy(() => ($showCreateColumnSheet.show = false));
 
+    function setupColumns() {
+        const order = preferences.getColumnOrder(tableId);
+        const systemColumns = new Set(['$id', 'actions']);
+
+        const validColumnKeys = new Set([
+            ...$table.columns.map((col) => col.key),
+            '$createdAt' /* allowed for reordering */,
+            '$updatedAt' /* allowed for reordering */
+        ]);
+
+        const seen = new Set<string>();
+        const cleanOrder = order.filter((columnId) => {
+            if (systemColumns.has(columnId)) return false;
+            if (seen.has(columnId)) return false;
+            if (!validColumnKeys.has(columnId)) return false;
+            seen.add(columnId);
+            return true;
+        });
+
+        columnsOrder.set(cleanOrder);
+        columnsWidth.set(preferences.getColumnWidths(tableId));
+    }
+
     function makeTableColumns() {
         const selectedColumnsToHide = preferences.getCustomTableColumns(tableId);
 
@@ -225,17 +246,13 @@
             }
         ];
 
-        const groupedColumns: Column[] = [
-            staticColumns[0],
-            ...baseColumns,
-            staticColumns[1],
-            staticColumns[2]
-        ];
+        const fixedLeftColumn = staticColumns[0];
+        const fixedRightColumn = staticColumns[3];
 
-        const actionsColumn = staticColumns[3];
+        const reorderableColumns = [...baseColumns, staticColumns[1], staticColumns[2]];
+        const reorderedColumns = reorderItems(reorderableColumns, $columnsOrder);
 
-        const reorderedNonActions = reorderItems(groupedColumns, $columnsOrder);
-        const finalColumns = [...reorderedNonActions, actionsColumn];
+        const finalColumns = [fixedLeftColumn, ...reorderedColumns, fixedRightColumn];
 
         tableColumns.set(finalColumns);
     }

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table.svelte

@@ -66,7 +66,7 @@
     allowSelection={$canWriteTables}
     {onDelete}>
     {#snippet header(root)}
-        {#each $tableViewColumns as { id, title }}
+        {#each $tableViewColumns as { id, title } (id)}
             <Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
         {/each}
     {/snippet}