feat: Allow showing specific folders instead of recent

kewisch · Aug 27, 2023 · 0ce381c · 0ce381c
1 parent a2664e3
commit 0ce381c
Show file tree

Hide file tree

Showing 12 changed files with 249 additions and 55 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "quickmove",
   "description": "Quick Folder Move",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "private": true,
   "author": "Philipp Kewisch <[email protected]>",
   "license": "MPL-2.0",

diff --git a/src/background.js b/src/background.js
@@ -63,6 +63,23 @@ async function applyTags(tag) {
   await Promise.all(ops);
 }
 
+async function updateSpecificFolders(origFolder, newFolder) {
+  let { defaultFolders } = await browser.storage.local.get({ defaultFolders: [] });
+
+  let foundFolder = defaultFolders.find((folder) => {
+    return folder.accountId == origFolder.accountId && folder.path == origFolder.path;
+  });
+
+  if (foundFolder) {
+    foundFolder.accountId = newFolder.accountId;
+    foundFolder.path = newFolder.path;
+    await browser.storage.local.set({ defaultFolders });
+  }
+}
+
+browser.folders.onRenamed.addListener(updateSpecificFolders);
+browser.folders.onMoved.addListener(updateSpecificFolders);
+
 browser.runtime.onInstalled.addListener(({ reason, previousVersion }) => {
   if (previousVersion && previousVersion.startsWith("1.")) {
     browser.quickmove.migrateShortcut();

diff --git a/src/popup/foldernode.js → src/common/foldernode.js b/src/popup/foldernode.js → src/common/foldernode.js
@@ -93,7 +93,7 @@ export class FolderNode extends BaseNode {
     let parts = path.split("/");
     let node = this; // eslint-disable-line consistent-this
     for (let part of parts) {
-      node = node.child(part);
+      node = node.child(part, create);
     }
     return node;
   }

diff --git a/src/manifest.json b/src/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_extensionName__",
   "description": "__MSG_extensionDescription__",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "default_locale": "en",
   "author": "Philipp Kewisch",
   "browser_specific_settings": {

diff --git a/src/options/options.css b/src/options/options.css
@@ -3,12 +3,31 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  * Portions Copyright (C) Philipp Kewisch */
 
+@media (prefers-color-scheme: light) {
+  :root {
+    --menu-color: #18181b;
+    --menu-background-color: white;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --menu-color: #f4f4f5;
+    --menu-background-color: #18181b;
+  }
+}
+
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }
 
+html {
+  margin: 0;
+  padding: 0;
+}
+
 body {
     font-family: sans-serif;
     padding: 20px;
@@ -17,6 +36,8 @@ body {
     grid-template-columns: auto 1fr;
     align-items: center;
     gap: 1em 0.4em;
+    background-color: var(--menu-background-color);
+    color: var(--menu-color);
 }
 
 .preference {
@@ -63,3 +84,44 @@ select {
     border-radius: 5px;
     background: #fff;
 }
+
+folder-list {
+    max-height: 20em;
+}
+fieldset {
+    width: 100%;
+    min-height: 25em;
+    grid-column: span 2;
+    padding: 10px;
+}
+
+.overflow {
+  position: relative;
+  height: 3em;
+  width: 100%;
+}
+
+.overflow folder-list {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+#folder-picker {
+  width: 100%;
+  background-color: var(--menu-background-color);
+}
+
+
+.panel {
+  display: none;
+  margin-top: 10px;
+}
+.panel.selected {
+  display: block;
+}
+
+#defaultFolderSetting label {
+  margin-inline-end: 10px;
+}
diff --git a/src/options/options.html b/src/options/options.html
@@ -7,8 +7,9 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <script src="options.js"></script>
     <link rel="stylesheet" href="options.css" type="text/css">
+    <script type="module" src="../popup/folderlist.js"></script>
+    <script type="module" src="options.js"></script>
   </head>
   <body>
     <div class="preference">
@@ -35,15 +36,34 @@
       <input type="checkbox" id="useLegacyShortcuts">
       <label for="useLegacyShortcuts" data-l10n-id="useLegacyShortcuts"></label>
     </div>
-    <div class="preference">
-      <input type="number" min="0" id="maxRecentFolders">
-      <label for="maxRecentFolders" data-l10n-id="maxRecentFolders"></label>
-    </div>
     <div class="preference">
       <span></span>
       <div>
         <button id="onboarding">Show instructions</button>
       </div>
     </div>
+    <fieldset>
+      <legend>Default Folders</legend>
+      <div id="defaultFolderSetting" data-type="radio">
+        <input type="radio" name="defaultFolderSetting" id="defaultFolderSettingRecent" value="recent">
+        <label for="defaultFolderSettingRecent">Recent folders</label>
+        <input type="radio" name="defaultFolderSetting" id="defaultFolderSettingAll" value="all">
+        <label for="defaultFolderSettingAll">All folders</label>
+        <input type="radio" name="defaultFolderSetting" id="defaultFolderSettingSpecific" value="specific">
+        <label for="defaultFolderSettingSpecific">Specific folders</label>
+      </div>
+      <div class="panel" data-value="specific">
+        <div class="overflow">
+          <folder-list id="folder-picker" search="true" placeholder="Search for a folder to show" popup="true"></folder-list>
+        </div>
+        <folder-list id="default-folders" readonly="true" delete="true"></folder-list>
+      </div>
+      <div class="panel" data-value="recent">
+        <input type="number" min="0" id="maxRecentFolders">
+        <label for="maxRecentFolders" data-l10n-id="maxRecentFolders"></label>
+      </div>
+      <div class="panel" data-value="all">
+      </div>
+    </fieldset>
   </body>
 </html>
diff --git a/src/options/options.js b/src/options/options.js
@@ -3,14 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  * Portions Copyright (C) Philipp Kewisch */
 
-const DEFAULT_PREFERENCES = {
-  layout: "auto",
-  markAsRead: true,
-  maxRecentFolders: 15,
-  showFolderPath: false,
-  useLegacyShortcuts: false,
-  skipArchive: true
-};
+import { AccountNode } from "../common/foldernode.js";
+import { DEFAULT_PREFERENCES, getValidatedDefaultFolders } from "../common/util.js";
 
 async function restore_options() {
   let prefs = await browser.storage.local.get(DEFAULT_PREFERENCES);
@@ -21,11 +15,11 @@ async function restore_options() {
       continue;
     }
 
-    if (elem.type == "checkbox") {
-      elem.checked = prefs[key];
-    } else if (elem.getAttribute("type") == "radio") {
-      let item = document.querySelector(`input[type='radio'][name='${elem.id}'][value='${prefs[key]}']`);
+    if (!elem.type && elem.dataset.type == "radio") {
+      let item = document.querySelector(`input[type='radio'][name='${key}'][value='${prefs[key]}']`);
       item.checked = true;
+    } else if (elem.type == "checkbox") {
+      elem.checked = prefs[key];
     } else {
       elem.value = prefs[key];
     }
@@ -76,6 +70,55 @@ function setup_localization() {
   }
 }
 
-document.addEventListener("DOMContentLoaded", setup_localization);
-document.addEventListener("DOMContentLoaded", setup_listeners);
-document.addEventListener("DOMContentLoaded", restore_options);
+async function setup_defaultfolders() {
+  let accounts = await browser.accounts.list();
+  let accountNodes = accounts.map(account => new AccountNode(account, skipArchive));
+  let folders = accountNodes.reduce((acc, node) => acc.concat([...node]), []);
+  let defaultFolders = await getValidatedDefaultFolders(accountNodes);
+
+  let defaultFolderList = document.getElementById("default-folders");
+  defaultFolderList.accounts = accounts;
+  defaultFolderList.initItems(defaultFolders, null, true);
+
+  let defaultFolderSet = new Set(defaultFolders);
+
+  let folderPicker = document.getElementById("folder-picker");
+  folderPicker.accounts = accounts;
+  folderPicker.initItems(folders, [], true);
+
+  folderPicker.addEventListener("item-selected", (event) => {
+    defaultFolderSet.add(event.detail);
+    let allItems = [...defaultFolderSet];
+
+    defaultFolderList.allItems = allItems;
+    folderPicker.searchValue = "";
+
+    let storageData = allItems.map(item => ({ accountId: item.accountId, path: item.path }));
+    browser.storage.local.set({ defaultFolders: storageData });
+  });
+
+  defaultFolderList.addEventListener("item-deleted", (event) => {
+    defaultFolderSet.delete(event.detail);
+    let allItems = [...defaultFolderSet];
+
+    defaultFolderList.allItems = allItems;
+
+    let storageData = allItems.map(item => ({ accountId: item.accountId, path: item.path }));
+    browser.storage.local.set({ defaultFolders: storageData });
+  });
+
+  document.getElementById("defaultFolderSetting").addEventListener("change", (event) => {
+    document.querySelector(".panel.selected")?.classList.remove("selected");
+    document.querySelector(`.panel[data-value="${event.target.value}"]`).classList.add("selected");
+  });
+
+  let currentValue = document.querySelector("#defaultFolderSetting input:checked")?.value;
+  if (currentValue) {
+    document.querySelector(`.panel[data-value="${currentValue}"]`).classList.add("selected");
+  }
+}
+
+document.addEventListener("DOMContentLoaded", setup_localization, { once: true });
+document.addEventListener("DOMContentLoaded", setup_listeners, { once: true });
+document.addEventListener("DOMContentLoaded", restore_options, { once: true });
+document.addEventListener("DOMContentLoaded", setup_defaultfolders, { once: true });