From 5e34b1498ae705e2fea2739baef280ffaaa0abd4 Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Sun, 30 Jun 2024 16:24:17 +0800
Subject: [PATCH] add: persist link creator collections list width

add: link creator collections list splitter
resolve: #1012
---
 .../content/styles/linkCreator/notePicker.css |  4 --
 src/elements/linkCreator/notePicker.ts        | 59 +++++++++++++++++++
 src/elements/workspace/detailsPane.ts         |  2 -
 src/utils/linkCreator.ts                      |  2 +-
 4 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/addon/chrome/content/styles/linkCreator/notePicker.css b/addon/chrome/content/styles/linkCreator/notePicker.css
index d9bee6d..5a29447 100644
--- a/addon/chrome/content/styles/linkCreator/notePicker.css
+++ b/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);
   }
diff --git a/src/elements/linkCreator/notePicker.ts b/src/elements/linkCreator/notePicker.ts
index d1a9fca..3d12439 100644
--- a/src/elements/linkCreator/notePicker.ts
+++ b/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;
+    }
+  }
 }
diff --git a/src/elements/workspace/detailsPane.ts b/src/elements/workspace/detailsPane.ts
index e578241..246889c 100644
--- a/src/elements/workspace/detailsPane.ts
+++ b/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);
   }
diff --git a/src/utils/linkCreator.ts b/src/utils/linkCreator.ts
index 51b5e1a..2110760 100644
--- a/src/utils/linkCreator.ts
+++ b/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,
   );