# HG changeset patch
# User drewp@bigasterisk.com
# Date 2024-05-18 00:34:45
# Node ID d8950f9b46be4fc5153d9a6a39224b1877998fd2
# Parent  1d3594ffd14bce11a2ac407a3b9f3fec1dfff653

store panels layout in localStorage

diff --git a/web/TiledHome.ts b/web/TiledHome.ts
--- a/web/TiledHome.ts
+++ b/web/TiledHome.ts
@@ -12,8 +12,6 @@ export { RdfdbSyncedGraph } from "./Rdfd
 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 = {
@@ -41,11 +39,51 @@ const config: FlexLayout.IJsonModel = {
 
 // 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) => {
@@ -57,9 +95,14 @@ class Main extends React.Component {
     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")