Table page: fix tableSettings not updating

src/atoms/utils.ts

@@ -1,4 +1,8 @@
+import { useEffect } from "react";
+import { useSetAtom } from "jotai";
 import { useAtomsDebugValue } from "jotai/devtools";
+import useMemoValue from "use-memo-value";
+import { isEqual } from "lodash-es";
 
 export function DebugAtoms(
   options: NonNullable<Parameters<typeof useAtomsDebugValue>[0]>
@@ -6,3 +10,26 @@ export function DebugAtoms(
   useAtomsDebugValue(options);
   return null;
 }
+
+/**
+ * Sets an atom’s value when the `value` prop changes.
+ * Useful when setting an atom’s initialValue and you want to keep it in sync.
+ */
+export function SyncAtomValue<T>({
+  atom,
+  scope,
+  value,
+}: {
+  atom: Parameters<typeof useSetAtom>[0];
+  scope: Parameters<typeof useSetAtom>[1];
+  value: T;
+}) {
+  const memoized = useMemoValue(value, isEqual);
+  const setAtom = useSetAtom(atom, scope);
+
+  useEffect(() => {
+    setAtom(memoized);
+  }, [setAtom, memoized]);
+
+  return null;
+}

src/pages/Table/ProvidedTablePage.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useMemo } from "react";
+import { Suspense } from "react";
 import { useAtom, Provider } from "jotai";
 import { DebugAtoms } from "@src/atoms/utils";
 import { useParams, useOutlet } from "react-router-dom";
@@ -25,6 +25,7 @@ import {
   tableIdAtom,
   tableSettingsAtom,
 } from "@src/atoms/tableScope";
+import { SyncAtomValue } from "@src/atoms/utils";
 import useDocumentTitle from "@src/hooks/useDocumentTitle";
 
 /**
@@ -39,7 +40,7 @@ export default function ProvidedTablePage() {
   const [projectSettings] = useAtom(projectSettingsAtom, projectScope);
   const [tables] = useAtom(tablesAtom, projectScope);
 
-  const tableSettings = useMemo(() => find(tables, ["id", id]), [tables, id]);
+  const tableSettings = find(tables, ["id", id]);
   useDocumentTitle(projectId, tableSettings ? tableSettings.name : "Not found");
 
   if (!tableSettings) {
@@ -75,6 +76,12 @@ export default function ProvidedTablePage() {
           ]}
         >
           <DebugAtoms scope={tableScope} />
+          <SyncAtomValue
+            atom={tableSettingsAtom}
+            scope={tableScope}
+            value={tableSettings}
+          />
+
           <TableSourceFirestore />
           <Suspense
             fallback={