refactor(#48): address code review findings

- super-table.vue: wire filterValidColumnDisplays to drop overrides
  whose root field has been deleted from the collection (mirrors the
  existing filterValidFields / filterValidSort guards).
- super-table.vue + options.vue: drop the window-event refresh path.
  The watch on layoutOptions.columnDisplays with flush: 'post' is
  sufficient for the prop round-trip from the sidebar slot, removing
  ~25 LOC of duplicated refresh wiring and a 250ms timer.
- index.ts: dedupe availableFieldChoices by root key so a column shown
  in two languages collapses to one picker entry.
- tests/unit/utils/adjustFieldsForDisplays.test.ts: top-level
  beforeEach(vi.resetModules) so the module-level store cache cannot
  leak between tests.

Author: smartlabsAT

index.ts

@@ -27,18 +27,20 @@ const layoutConfig = {
     // components (options sidebar). Each entry uses the *root* field key as id
     // (translations.title rather than translations.title:de-DE) so all
     // language variants of the same root field share a single override entry.
+    // Multiple language columns of the same root collapse into one picker entry.
     const availableFieldChoices = computed(() => {
       const layoutFields: string[] = props.layoutQuery?.fields ?? [];
       const customFieldNames: Record<string, string> = props.layoutOptions?.customFieldNames ?? {};
-      return layoutFields.map((key: string) => {
-        // Storage key: strip language suffix so translations roll up to a
-        // single override entry per root field.
+      const seen = new Map<string, { key: string; label: string }>();
+      for (const key of layoutFields) {
         const rootKey = key.includes(':') ? key.split(':')[0] : key;
+        if (seen.has(rootKey)) continue;
         const root = rootKey.split('.')[0];
         const fieldData = fieldsStore.getField(props.collection, root);
         const fallbackName = fieldData?.name ?? formatTitle(rootKey);
-        return { key: rootKey, label: customFieldNames[key] ?? fallbackName };
-      });
+        seen.set(rootKey, { key: rootKey, label: customFieldNames[key] ?? fallbackName });
+      }
+      return Array.from(seen.values());
     });
 
     return {

src/options.vue

@@ -83,21 +83,9 @@ const {
 
 function onSet(payload: { fieldKey: string; display: ColumnDisplay }) {
   setOverride(payload.fieldKey, payload.display);
-  scheduleTableRefresh();
 }
 function onRemove(fieldKey: string) {
   removeOverride(fieldKey);
-  scheduleTableRefresh();
-}
-
-// After mutating columnDisplays we need the table to refetch with the new
-// override-driven deep paths. Reactivity propagates through the parent layout
-// asynchronously, so we dispatch a window event after the next tick — super-table.vue
-// listens for it and calls getItems() with fresh aliasedFields.
-function scheduleTableRefresh() {
-  setTimeout(() => {
-    window.dispatchEvent(new CustomEvent('super-layout-table:refresh'));
-  }, 0);
 }
 
 // Issue #48: read setters from `props.layoutOptions` instead of the synced ref.

src/super-table.vue

@@ -273,24 +273,14 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  ref,
-  computed,
-  toRefs,
-  watch,
-  unref,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  type Ref,
-} from 'vue';
+import { ref, computed, toRefs, watch, unref, onMounted, onUnmounted, type Ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { debounce } from 'lodash';
 import { useStores, useCollection, useSync, useApi } from '@directus/extensions-sdk';
 import { formatTitle } from '@directus/format-title';
 import { getDefaultDisplayForType } from './utils/getDefaultDisplayForType';
-import { filterValidFields } from './utils/fieldValidity';
+import { filterValidFields, filterValidColumnDisplays } from './utils/fieldValidity';
 import { useTableApi } from './composables/api';
 import { useAliasFields } from './composables/useAliasFields';
 import { useLanguageSelector } from './composables/useLanguageSelector';
@@ -485,8 +475,16 @@ const fieldsForAliasing = computed(() => {
 // Use alias fields for proper relational data handling.
 // Issue #48: forward the columnDisplays override map so the API query expands
 // override template paths (e.g. `{{ user.first_name }}`) into deep field
-// requests via `adjustFieldsForDisplays`.
-const columnDisplaysRef = computed(() => (layoutOptions.value as any)?.columnDisplays ?? {});
+// requests via `adjustFieldsForDisplays`. Drop entries that point at fields
+// the user has since deleted from the collection (mirrors filterValidFields).
+type ColumnDisplayShape = { template: string; display?: string };
+const columnDisplaysRef = computed(() =>
+  filterValidColumnDisplays<ColumnDisplayShape>(
+    (layoutOptions.value as any)?.columnDisplays,
+    collection.value,
+    fieldsStore
+  )
+);
 
 const { aliasedFields, aliasQuery, getFromAliasedItem } = useAliasFields(
   fieldsForAliasing,
@@ -941,32 +939,18 @@ async function handleQuickFilterSaved(event: any) {
   }
 }
 
-// Issue #48: when columnDisplays change locally, our own reactive chain handles
-// the rebuild AND the watch on fieldsWithRelational fires. But when the change
-// originates in options.vue (a sibling slot), the prop round-trip through the
-// parent layout takes a few ticks. We watch our own layoutOptions for changes
-// to the columnDisplays map and force a refetch after nextTick so aliasedFields
-// has fully settled.
+// Issue #48: when columnDisplays change in options.vue (sibling slot), the prop
+// round-trip through the parent layout takes a few ticks. flush: 'post' makes
+// the watcher run after the DOM update so aliasedFields has fully settled
+// before we refetch.
 watch(
   () => (layoutOptions.value as any)?.columnDisplays,
-  async () => {
-    await nextTick();
+  () => {
     getItems();
   },
-  { deep: true }
+  { deep: true, flush: 'post' }
 );
 
-// Window-event fallback: options.vue dispatches this after setOverride/removeOverride.
-// Helps in cases where the prop sync hasn't propagated by the time our local
-// watch (above) would have fired. Both paths converge on the same getItems call;
-// directus' API layer dedupes in-flight requests so this isn't a double-fetch.
-function handleColumnDisplaysChanged() {
-  // 250ms ≈ enough for the options.vue → parent layout → super-table.vue prop
-  // round-trip to land. Microtask-precise nextTick is too eager here because
-  // the round-trip spans a full event-loop turn (parent re-render).
-  setTimeout(() => getItems(), 250);
-}
-
 // Setup event listeners on mount
 onMounted(() => {
   // Load presets from layoutOptions (no localStorage needed)
@@ -977,12 +961,10 @@ onMounted(() => {
 
   // Listen for save events from actions
   window.addEventListener('quick-filter-saved', handleQuickFilterSaved);
-  window.addEventListener('super-layout-table:refresh', handleColumnDisplaysChanged);
 });
 
 onUnmounted(() => {
   window.removeEventListener('quick-filter-saved', handleQuickFilterSaved);
-  window.removeEventListener('super-layout-table:refresh', handleColumnDisplaysChanged);
 });
 
 // Update manual filters when props.filter changes (from native filter interface)

tests/unit/utils/adjustFieldsForDisplays.test.ts

@@ -4,6 +4,11 @@ import { vi } from 'vitest';
 // Note: adjustFieldsForDisplays uses useStores() at runtime which we mock in
 // tests/setup.ts. With those mocks, calling it with no overrides should return
 // the original fields unchanged when the store has no field metadata.
+// Reset modules before every test so the module-level store cache in
+// adjustFieldsForDisplays.ts cannot leak between tests.
+beforeEach(() => {
+  vi.resetModules();
+});
 
 describe('adjustFieldsForDisplays', () => {
   it('accepts overrides as an optional third parameter', async () => {