feat: Add syncing with link

make tests pass

scripts/build.ts

@@ -29,6 +29,16 @@ const builds: (BuildOptions & { entryPoints: [string] })[] = [
     sourcemap,
     target,
   },
+  {
+    bundle: true,
+    entryPoints: ['src/content/prefs/dialog.tsx'],
+    external: ['components/*', 'react', 'react-dom'],
+    format: 'iife',
+    globalName: 'notero',
+    outdir: 'build/content/prefs',
+    sourcemap,
+    target,
+  },
 ];
 
 Promise.all(

shell.nix

@@ -0,0 +1,10 @@
+{ pkgs ? import <nixpkgs> {} }:
+
+pkgs.mkShell {
+
+  buildInputs = [
+    pkgs.nodejs
+    pkgs.pnpm
+  ];
+
+}

src/bootstrap.ts

@@ -8,6 +8,8 @@ function log(msg: string) {
   Zotero.debug(`${LOG_PREFIX}${msg}`);
   Zotero.log(`${LOG_PREFIX}${msg}`, 'info');
 }
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+let chromeHandle;
 
 /**
  *
@@ -40,7 +42,16 @@ async function startup(
 ) {
   log(`Starting v${version}`);
 
+  Zotero.log(rootURI);
   Services.scriptloader.loadSubScript(rootURI + 'content/notero.js');
+  // @ts-expect-error - `Zotero.Notero` is not defined in the Zotero namespace
+  const aomStartup = Components.classes[
+    '@mozilla.org/addons/addon-manager-startup;1'
+  ].getService(Components.interfaces.amIAddonManagerStartup);
+  const manifestURI = Services.io.newURI(rootURI + 'manifest.json');
+  chromeHandle = aomStartup.registerChrome(manifestURI, [
+    ['content', 'notero', rootURI + 'content/'],
+  ]);
 
   await Zotero.Notero?.startup({ pluginID: id, rootURI, version });
 }

src/content/prefs/collection-sync-config.ts

@@ -5,6 +5,7 @@ import { getNoteroPref, NoteroPref, setNoteroPref } from './notero-pref';
 export type CollectionSyncConfig = {
   notionOptionID?: string;
   syncEnabled: boolean;
+  associatedLink?: string;
 };
 
 export type CollectionSyncConfigsRecord = Record<

src/content/prefs/dialog.tsx

@@ -0,0 +1,72 @@
+import { isFullPage } from '@notionhq/client';
+
+import { getGlobalNotero, getXULElementById } from '../utils';
+import { setMenuItems } from '../utils/elements';
+
+import { getNoteroPref, NoteroPref } from './notero-pref';
+
+type DialogArguments = {
+  accepted: boolean;
+  associatedLink: string;
+  syncEnabled: boolean;
+};
+
+class Dialog {
+  private collectionDialogContainer!: XUL.XULElement;
+  private associatedLinkElement!: XUL.MenuListElement;
+  private syncEnabledElement!: XUL.CheckboxElement;
+  private params!: DialogArguments;
+
+  public async init(): Promise<void> {
+    await Zotero.uiReadyPromise;
+
+    /* eslint-disable @typescript-eslint/no-non-null-assertion */
+    this.params = window.arguments![0]! as DialogArguments;
+
+    /* eslint-disable @typescript-eslint/no-non-null-assertion */
+    this.collectionDialogContainer = getXULElementById(
+      'notero-collection-dialog',
+    )!;
+    this.associatedLinkElement = getXULElementById('notero-associatedLink')!;
+
+    const notero = getGlobalNotero();
+    const pref = getNoteroPref(NoteroPref.linkedCollectionID);
+    if (pref) {
+      const client = await notero.getNotionClient();
+      const res = await client.databases.query({ database_id: pref });
+      const results = res.results
+        .map((result: (typeof res.results)[0]) => {
+          if (isFullPage(result)) {
+            return {
+              value: result.id,
+              label: Object.values(result.properties).find(
+                (prop) => prop.type === 'title',
+              )?.title[0]!.plain_text,
+            };
+          }
+        })
+        .filter((item) => item != undefined);
+      setMenuItems(this.associatedLinkElement, results);
+    }
+
+    this.associatedLinkElement.value = this.params.associatedLink;
+    this.syncEnabledElement = getXULElementById('notero-syncEnabled')!;
+    this.syncEnabledElement.checked = this.params.syncEnabled;
+    document.addEventListener('dialogaccept', () => {
+      return this.accept();
+    });
+  }
+  accept(): boolean {
+    // @ts-expect-error dataOut is not defined in the type
+    window.arguments![0]!.dataOut = {
+      associatedLink: this.associatedLinkElement.value,
+      syncEnabled: this.syncEnabledElement.checked,
+      accepted: true,
+    };
+    return true;
+  }
+}
+
+module.exports = {
+  dialog: new Dialog(),
+};

src/content/prefs/dialog.xhtml

@@ -0,0 +1,48 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet
+href="chrome://zotero/skin/zotero.css" type="text/css"?> <?xml-stylesheet
+href="chrome://zotero-platform/content/zotero.css" type="text/css"?>
+
+<window
+  type="child"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  xmlns:html="http://www.w3.org/1999/xhtml"
+  style="width: 100px; height: 100px"
+  buttons="cancel,accept"
+  onload="notero.dialog.init();"
+>
+  <script>
+    Services.scriptloader.loadSubScript(
+      'chrome://zotero/content/customElements.js',
+      this,
+    );
+
+    Services.scriptloader.loadSubScript(
+      'chrome://notero/content/prefs/dialog.js',
+      this,
+    );
+  </script>
+  <dialog
+    id="notero-collection-dialog"
+    title="Collection Properties"
+    onload="notero.dialog.init();"
+  >
+    <div>
+      <label>Collection Settings</label>
+      <grid>
+        <rows>
+          <row>
+            <label value="Associated Link:" />
+            <menulist id="notero-associatedLink">
+              <menupopup />
+            </menulist>
+          </row>
+          <row>
+            <label value="Sync Enabled:" />
+            <checkbox id="notero-syncEnabled" />
+          </row>
+        </rows>
+      </grid>
+    </div>
+  </dialog>
+</window>

src/content/prefs/notero-pref.ts

@@ -3,6 +3,7 @@ import { MissingPrefError } from '../errors';
 
 export enum NoteroPref {
   collectionSyncConfigs = 'collectionSyncConfigs',
+  linkedCollectionID = 'linkedCollectionID',
   notionDatabaseID = 'notionDatabaseID',
   notionToken = 'notionToken',
   pageTitleFormat = 'pageTitleFormat',
@@ -37,6 +38,7 @@ export const PAGE_TITLE_FORMAT_L10N_IDS: Record<
 
 type NoteroPrefValue = Partial<{
   [NoteroPref.collectionSyncConfigs]: string;
+  [NoteroPref.linkedCollectionID]: string;
   [NoteroPref.notionDatabaseID]: string;
   [NoteroPref.notionToken]: string;
   [NoteroPref.pageTitleFormat]: PageTitleFormat;
@@ -84,6 +86,7 @@ function convertRawPrefValue<P extends NoteroPref>(
 
   return {
     [NoteroPref.collectionSyncConfigs]: stringPref,
+    [NoteroPref.linkedCollectionID]: stringPref,
     [NoteroPref.notionDatabaseID]: stringPref,
     [NoteroPref.notionToken]: stringPref,
     [NoteroPref.pageTitleFormat]: pageTitleFormatPref,

src/content/prefs/preferences.tsx

@@ -4,48 +4,24 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import type { createRoot } from 'react-dom/client';
 
-import type { FluentMessageId } from '../../locale/fluent-types';
 import type { NotionAuthManager } from '../auth';
 import { LocalizableError } from '../errors';
 import type { EventManager } from '../services';
 import { getNotionClient } from '../sync/notion-client';
 import { isNotionErrorWithCode, normalizeID } from '../sync/notion-utils';
 import {
-  createXULElement,
   getGlobalNotero,
   getLocalizedErrorMessage,
   getXULElementById,
   logger,
 } from '../utils';
+import { MenuItem, setMenuItems } from '../utils/elements';
 
 import { PAGE_TITLE_FORMAT_L10N_IDS, PageTitleFormat } from './notero-pref';
 import { SyncConfigsTable } from './sync-configs-table';
 
 type ReactDOMClient = typeof ReactDOM & { createRoot: typeof createRoot };
 
-type MenuItem = {
-  disabled?: boolean;
-  l10nId?: FluentMessageId;
-  label?: string;
-  value: string;
-};
-
-function setMenuItems(menuList: XUL.MenuListElement, items: MenuItem[]): void {
-  menuList.menupopup.replaceChildren();
-
-  items.forEach(({ disabled, l10nId, label, value }) => {
-    const item = createXULElement(document, 'menuitem');
-    item.value = value;
-    item.disabled = Boolean(disabled);
-    if (l10nId) {
-      document.l10n.setAttributes(item, l10nId);
-    } else {
-      item.label = label || value;
-    }
-    menuList.menupopup.append(item);
-  });
-}
-
 class Preferences {
   private eventManager!: EventManager;
   private notionAuthManager!: NotionAuthManager;
@@ -54,6 +30,7 @@ class Preferences {
   private notionConnectButton!: XUL.ButtonElement;
   private notionUpgradeConnectionButton!: XUL.ButtonElement;
   private notionDatabaseMenu!: XUL.MenuListElement;
+  private notionLinkedDatabaseMenu!: XUL.MenuListElement;
   private notionError!: XUL.LabelElement;
   private notionWorkspaceLabel!: XUL.LabelElement;
   private pageTitleFormatMenu!: XUL.MenuListElement;
@@ -77,6 +54,9 @@ class Preferences {
     )!;
     this.notionWorkspaceLabel = getXULElementById('notero-notionWorkspace')!;
     this.notionDatabaseMenu = getXULElementById('notero-notionDatabase')!;
+    this.notionLinkedDatabaseMenu = getXULElementById(
+      'notero-notionLinkedDatabase',
+    )!;
     this.notionError = getXULElementById('notero-notionError')!;
     this.pageTitleFormatMenu = getXULElementById('notero-pageTitleFormat')!;
     /* eslint-enable @typescript-eslint/no-non-null-assertion */
@@ -133,9 +113,13 @@ class Preferences {
     const syncEnabled = await document.l10n.formatValue(
       'notero-preferences-sync-enabled-column',
     );
+    const associatedLink = await document.l10n.formatValue(
+      'notero-preferences-associatedLink-column',
+    );
     const columnLabels = {
       collectionFullName: collection || 'Collection',
       syncEnabled: syncEnabled || 'Sync Enabled',
+      associatedLink: associatedLink || 'Associated Link',
     };
 
     (ReactDOM as ReactDOMClient)
@@ -215,6 +199,7 @@ class Preferences {
     let menuItems: MenuItem[] = [];
 
     this.notionDatabaseMenu.disabled = true;
+    this.notionLinkedDatabaseMenu.disabled = true;
 
     try {
       const databases = await this.retrieveNotionDatabases(notion);
@@ -231,8 +216,10 @@ class Preferences {
       });
 
       this.notionDatabaseMenu.disabled = false;
+      this.notionLinkedDatabaseMenu.disabled = false;
     } finally {
       setMenuItems(this.notionDatabaseMenu, menuItems);
+      setMenuItems(this.notionLinkedDatabaseMenu, menuItems);
     }
   }
 

src/content/prefs/preferences.xhtml

@@ -47,6 +47,20 @@
         <menupopup />
       </menulist>
     </hbox>
+    <hbox align="center">
+      <label
+        control="notero-notionLinkedDatabase"
+        data-l10n-id="notero-preferences-notion-linked-database"
+      />
+      <menulist
+        id="notero-notionLinkedDatabase"
+        disabled="true"
+        native="true"
+        preference="extensions.notero.linkedCollectionID"
+      >
+        <menupopup />
+      </menulist>
+    </hbox>
   </vbox>
   <label class="notero-error" hidden="true" id="notero-notionError" />
 </groupbox>