--- a/web/TiledHome.ts	Fri May 17 17:39:40 2024 -0700
+++ b/web/TiledHome.ts	Fri May 17 17:48:26 2024 -0700
@@ -6,15 +6,10 @@
 import { createRoot } from "react-dom/client";
 import { getTopGraph } from "./RdfdbSyncedGraph";
 import { SyncedGraph } from "./SyncedGraph";
-import { Patch } from "./patch";
-import { SimpleLayout, fullLayout, persistedLayout, simpleLayout } from "./tiledLayoutPersistence";
-import { NamedNode } from "n3";
 export { RdfdbSyncedGraph } from "./RdfdbSyncedGraph";
 export { Light9CollectorUi } from "./collector/Light9CollectorUi";
 export { Light9FadeUi } from "./fade/Light9FadeUi";
 export { Light9DeviceSettings } from "./live/Light9DeviceSettings";
-import { showRoot } from "./show_specific";
-import { HandlerFunc } from "./AutoDependencies";
 const log = debug("home");
 
 const config: FlexLayout.IJsonModel = {
@@ -27,11 +22,51 @@
 
 // see https://github.com/lit/lit/tree/main/packages/labs/react
 
+// Store flexlayout panels in per-browser localstorage.
+class PersistentLayout {
+  key = "light9.home.layout";
+  defaultLayout: FlexLayout.IJsonRowNode = {
+    type: "row",
+    children: [
+      {
+        type: "tabset",
+        weight: 50,
+        children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
+      },
+      {
+        type: "tabset",
+        weight: 50,
+        children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
+      },
+    ],
+  };
+  getOrDefault(): FlexLayout.IJsonRowNode {
+    let savedLayout = localStorage.getItem(this.key);
+    if (savedLayout === null) {
+      return this.defaultLayout;
+    }
+    return JSON.parse(savedLayout);
+  }
+
+  save(layout: FlexLayout.IJsonRowNode) {
+    localStorage.setItem(this.key, JSON.stringify(layout));
+  }
+}
+
 class Main extends React.Component {
-  state: { model: FlexLayout.Model };
+  state: { model: FlexLayout.Model; persistence: PersistentLayout };
   constructor(props: any) {
     super(props);
-    this.state = { model: FlexLayout.Model.fromJson(config) };
+    const persistence = new PersistentLayout();
+    const config = {
+      global: {
+        tabEnableRename: false,
+      },
+      borders: [],
+      layout: persistence.getOrDefault(),
+    };
+
+    this.state = { model: FlexLayout.Model.fromJson(config), persistence: persistence };
   }
 
   factory = (node: any) => {
@@ -43,9 +78,14 @@
     return React.createElement(FlexLayout.Layout, {
       model: this.state.model,
       realtimeResize: true,
+      onModelChange: this.onModelChange.bind(this),
       factory: this.factory,
     });
   }
+
+  onModelChange() {
+    this.state.persistence.save(this.state.model.toJson().layout);
+  }
 }
 
 @customElement("light9-home-status")
@@ -59,40 +99,8 @@
     super();
     getTopGraph().then((g) => {
       this.graph = g;
-      runHandlerAfterGraphLoads(this.graph, this.homeLayout.bind(this), "homeLayout");
     });
   }
-  homeLayout(patch?: Patch) {
-    const U = this.graph.U();
-    const s = U(":homeLayout");
-    const p = U(":config");
-    let cfg;
-
-    try {
-      cfg = this.graph.stringValue(s, p);
-    } catch (e) {
-      const ctx = new NamedNode(showRoot + "/homeLayout");
-      log(`no config in graph- adding one to `, ctx);
-      cfg = JSON.stringify(persistedLayout);
-      this.graph.patchObject(s, p, this.graph.Literal(cfg), ctx);
-    }
-    const fl = fullLayout(JSON.parse(cfg) as SimpleLayout);
-    log("got config", fl);
-  }
-}
-
-function runHandlerAfterGraphLoads(graph: SyncedGraph, handler: HandlerFunc, label: string) {
-  let patchesSeen = 0;
-  const wrapHandler = (patch?: Patch) => {
-    patchesSeen += 1;
-    if (patchesSeen == 2) {
-      handler(patch);
-    } else {
-      graph.objects(null, null);
-    }
-  };
-
-  graph.runHandler(wrapHandler, label);
 }
 
 const root = createRoot(document.getElementById("container")!);