Enable importing bookmarks into zen folders

src/browser/base/content/zen-assets.inc.xhtml

@@ -21,6 +21,7 @@
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-workspaces.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-decks.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-folders.css" />
+<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-import-bookmarks.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-glance.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-popup.css" />
 
@@ -50,6 +51,7 @@
 
 <script type="module" src="chrome://browser/content/zen-components/ZenMediaController.mjs"></script>
 <script type="module" src="chrome://browser/content/zen-components/ZenWorkspaceCreation.mjs"></script>
+<script type="module" src="chrome://browser/content/zen-components/ZenImportBookmarks.mjs"></script>
 <script type="module" src="chrome://browser/content/zen-components/ZenGlanceManager.mjs"></script>
 <script type="module" src="chrome://browser/content/zen-components/ZenPinnedTabManager.mjs"></script>
 <script type="module" src="chrome://browser/content/zen-components/ZenViewSplitter.mjs"></script>

src/browser/base/content/zen-panels/popups.inc

@@ -37,6 +37,7 @@
 <menupopup id="zenFolderActions">
   <menuitem id="context_zenFolderRename" data-l10n-id="zen-folders-panel-rename-folder"/>
   <menuitem id="context_zenFolderChangeIcon" data-l10n-id="zen-folders-panel-change-icon-folder"/>
+  <menuitem id="context_zenFolderImportFromBookmarks" data-l10n-id="zen-folders-panel-import-bookmarks"/>
   <menuseparator />
   <menuitem id="context_zenFolderUnloadAll" data-l10n-id="zen-folders-unload-folder"/>
   <menuitem id="context_zenFolderNewSubfolder" data-l10n-id="zen-folders-new-subfolder"/>

src/zen/folders/ZenFolder.mjs

@@ -274,6 +274,73 @@ class ZenFolder extends MozTabbrowserTabGroup {
     } while (current);
     return rootMost;
   }
+
+  /**
+   * Opens the dialogue to import bookmarks into this folder.
+   * @returns void
+   */
+  async openImportBookmarksPopup(event) {
+    console.debug('openImportBookmarksPopup', this);
+
+    // Find or create the panel
+    let panel = document.getElementById('PanelUI-zen-import-bookmarks');
+    let importBookmarks;
+
+    if (!panel) {
+      panel = document.createXULElement('panel');
+      panel.id = 'PanelUI-zen-import-bookmarks';
+      panel.setAttribute('flip', 'side');
+      panel.setAttribute('type', 'arrow');
+      panel.setAttribute('popupalign', 'center');
+      panel.setAttribute('orient', 'vertical');
+      panel.setAttribute('position', 'bottomright topright');
+      panel.setAttribute('mainview', 'true');
+      panel.setAttribute('side', 'left');
+
+      const panelMultiView = document.createXULElement('panelmultiview');
+      panelMultiView.id = 'PanelUI-zen-import-bookmarks-multiview';
+      panelMultiView.setAttribute('mainViewId', 'PanelUI-zen-import-bookmarks-view');
+
+      const panelView = document.createXULElement('panelview');
+      panelView.id = 'PanelUI-zen-import-bookmarks-view';
+      panelView.classList.add('PanelUI-subView');
+      panelView.setAttribute('flex', '1');
+
+      importBookmarks = document.createXULElement('zen-import-bookmarks');
+      importBookmarks.setAttribute('folder-id', this.id);
+
+      panelView.appendChild(importBookmarks);
+      panelMultiView.appendChild(panelView);
+      panel.appendChild(panelMultiView);
+      document.getElementById('mainPopupSet').appendChild(panel);
+
+      console.debug('Created new panel with import bookmarks', importBookmarks);
+    } else {
+      // Update folder ID for existing panel and reset it
+      importBookmarks = panel.querySelector('zen-import-bookmarks');
+      if (importBookmarks) {
+        // Remove and recreate to trigger connectedCallback
+        const panelView = panel.querySelector('panelview');
+        importBookmarks.remove();
+        importBookmarks = document.createXULElement('zen-import-bookmarks');
+        importBookmarks.setAttribute('folder-id', this.id);
+        panelView.appendChild(importBookmarks);
+        console.debug('Recreated import bookmarks for panel', importBookmarks);
+      }
+    }
+
+    // Wait for the component to render before opening the panel
+    console.debug('Waiting for import bookmarks to render');
+    await importBookmarks.promiseRendered;
+    console.debug('Import bookmarks rendered, opening panel');
+
+    // Open the panel next to the sidebar (use TabsToolbar as anchor)
+    const anchor = document.getElementById('TabsToolbar');
+    PanelMultiView.openPopup(panel, anchor, {
+      position: 'topright topleft',
+      triggerEvent: event,
+    });
+  }
 }
 
 customElements.define('zen-folder', ZenFolder);

src/zen/folders/ZenFolders.mjs

@@ -137,6 +137,7 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
     );
 
     folderActionsMenu.addEventListener('command', (event) => {
+      console.log('Folder action command:', event.target.id, 'Last folder:', this.#lastFolderContextMenu);
       if (!this.#lastFolderContextMenu) return;
       switch (event.target.id) {
         case 'context_zenFolderRename':
@@ -160,6 +161,10 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
         case 'context_zenFolderChangeIcon':
           this.changeFolderUserIcon(this.#lastFolderContextMenu);
           break;
+        case 'context_zenFolderImportFromBookmarks':
+          console.log('Triggering import bookmarks popup');
+          this.#lastFolderContextMenu.openImportBookmarksPopup();
+          break;
       }
     });
   }