add: persist link creator collections list width

add: link creator collections list splitter
resolve: #1012

addon/chrome/content/styles/linkCreator/notePicker.css

@@ -9,10 +9,6 @@ bn-note-picker {
     user-select: none;
   }
 
-  #zotero-collections-tree-container {
-    border-right: var(--material-border);
-  }
-
   #zotero-collections-tree {
     background: var(--material-sidepane);
   }

src/elements/linkCreator/notePicker.ts

@@ -1,23 +1,35 @@
 import { config } from "../../../package.json";
 import { VirtualizedTableHelper } from "zotero-plugin-toolkit/dist/helpers/virtualizedTable";
 import { PluginCEBase } from "../base";
+import {
+  getPrefJSON,
+  registerPrefObserver,
+  setPref,
+  unregisterPrefObserver,
+} from "../../utils/prefs";
 
 const _require = window.require;
 const CollectionTree = _require("chrome://zotero/content/collectionTree.js");
 const ItemTree = _require("chrome://zotero/content/itemTree.js");
 const { getCSSItemTypeIcon } = _require("components/icons");
 
+const persistKey = "persist.notePicker";
+
 export class NotePicker extends PluginCEBase {
   itemsView!: _ZoteroTypes.ItemTree;
   collectionsView!: _ZoteroTypes.CollectionTree;
   openedNotesView!: VirtualizedTableHelper;
 
+  _collectionsList!: XUL.Box;
+
   openedNotes: Zotero.Item[] = [];
 
   activeSelectionType: "library" | "tabs" | "none" = "none";
 
   uid = Zotero.Utilities.randomString(8);
 
+  _prefObserverID!: symbol;
+
   get content() {
     return MozXULElement.parseXULToFragment(`
 <linkset>
@@ -41,6 +53,7 @@ export class NotePicker extends PluginCEBase {
         >
           <html:div id="zotero-collections-tree"></html:div>
         </vbox>
+        <splitter id="collections-items-splitter" orient="horizontal" collapse="after"></splitter>
         <hbox
           id="zotero-items-pane-content"
           class="virtualized-table-container"
@@ -75,11 +88,30 @@ export class NotePicker extends PluginCEBase {
     window.addEventListener("unload", () => {
       this.destroy();
     });
+
+    this._collectionsList = this.querySelector(
+      "#zotero-collections-tree-container",
+    ) as XUL.Box;
+
+    this._restoreState();
+
+    this.querySelector("#collections-items-splitter")?.addEventListener(
+      "mouseup",
+      () => {
+        this._persistState();
+      },
+    );
+
+    this._prefObserverID = registerPrefObserver(
+      persistKey,
+      this._restoreState.bind(this),
+    );
   }
 
   destroy(): void {
     this.collectionsView.unregister();
     if (this.itemsView) this.itemsView.unregister();
+    unregisterPrefObserver(this._prefObserverID);
   }
 
   async load() {
@@ -304,4 +336,31 @@ export class NotePicker extends PluginCEBase {
       (selection || this.openedNotesView.treeInstance.selection).selected,
     ).map((index) => this.openedNotes[index]);
   }
+
+  _persistState() {
+    let state = getPrefJSON(persistKey);
+
+    const collectionsListWidth = getComputedStyle(this._collectionsList).width;
+    if (state?.collectionsListWidth === collectionsListWidth) {
+      return;
+    }
+
+    state = {
+      ...state,
+      collectionsListWidth,
+    };
+
+    setPref(persistKey, JSON.stringify(state));
+  }
+
+  _restoreState() {
+    const state = getPrefJSON(persistKey);
+    if (
+      typeof state.collectionsListWidth === "string" &&
+      state.collectionsListWidth !==
+        Number(getComputedStyle(this._collectionsList).width)
+    ) {
+      this._collectionsList.style.width = state.collectionsListWidth;
+    }
+  }
 }

src/elements/workspace/detailsPane.ts

@@ -92,8 +92,6 @@ export class DetailsPane extends ItemDetails {
   _restoreState() {
     const state = getPrefJSON(persistKey);
 
-    console.trace("Restore State", state);
-
     this.pinnedPane = state?.pinnedPane;
     this.scrollToPane(this.pinnedPane);
   }

src/utils/linkCreator.ts

@@ -25,7 +25,7 @@ async function openLinkCreator(
   } as any;
   Zotero.getMainWindow().openDialog(
     `chrome://${config.addonRef}/content/linkCreator.xhtml`,
-    "_blank",
+    `${config.addonRef}-linkCreator`,
     "chrome,modal,centerscreen,resizable=yes",
     io,
   );