Update observer when changing settings

web/js/favorite.js

@@ -5,6 +5,7 @@ import { api } from "../../../scripts/api.js";
 
 const menuCache = new Map();
 const settingsHelper = new SettingsHelper("SyntaxHighlighter");
+let contextMenuObserver = null;
 
 async function toggleFavourite(
     existingList,
@@ -94,7 +95,8 @@ app.registerExtension({
             return options;
         };
 
-        observeContextMenu(existingList);
+        initializeContextMenuObserver();
+        settingsHelper.addReloadSettingsListener(initializeContextMenuObserver);
     },
 });
 
@@ -245,15 +247,32 @@ async function addStarsToFavourited(
         }
     });
 
-    // Remove all entries
-    menuEntries.forEach((entry) => entry.remove());
+    if (settings["Favorite On Top"]) {
+        // Remove all entries
+        menuEntries.forEach((entry) => entry.remove());
 
-    // Add entries in order: none (if exists), starred, unstarred
-    if (noneEntry) {
-        menuContainer.appendChild(noneEntry);
+        // Add entries in order: none (if exists), starred, unstarred
+        if (noneEntry) {
+            menuContainer.appendChild(noneEntry);
+        }
+        starredEntries.forEach((entry) => menuContainer.appendChild(entry));
+        unstarredEntries.forEach((entry) => menuContainer.appendChild(entry));
     }
-    starredEntries.forEach((entry) => menuContainer.appendChild(entry));
-    unstarredEntries.forEach((entry) => menuContainer.appendChild(entry));
+}
+
+async function initializeContextMenuObserver() {
+    let existingList = await settingsHelper.getSettingById(
+        "SyntaxHighlighter.favorites"
+    );
+    if (!Array.isArray(existingList)) {
+        existingList = [];
+    }
+
+    if (contextMenuObserver) {
+        contextMenuObserver.disconnect();
+    }
+
+    contextMenuObserver = await observeContextMenu(existingList);
 }
 
 async function observeContextMenu(existingList) {
@@ -262,7 +281,8 @@ async function observeContextMenu(existingList) {
         "Preview Image Padding",
         "Preview Image Side",
         "Preview Image Size",
-        "Preview Image Delay"
+        "Preview Image Delay",
+        "Favorite On Top"
     );
     const favoriteColor = settings["Combo Highlight Color"];
     const brighterFavoriteColor = brightenColor(favoriteColor);
@@ -355,6 +375,8 @@ async function observeContextMenu(existingList) {
         characterData: false,
         subtree: true,
     });
+
+    return observer;
 }
 
 async function addPreviewImage(entry, path, settings) {

web/js/settings.js

@@ -23,6 +23,14 @@ const settingsDefinitions = [
         ),
         onChange: () => SettingsHelper.PresetOnChange.reloadSettings(),
     },
+    {
+        name: "Favorite On Top",
+        category: ["SyntaxHighlighter", "Combo", "FavoriteOnTop"],
+        defaultValue: true,
+        tooltip: "Put favorite items over all other items.",
+        type: SettingsHelper.ST.BOOLEAN,
+        onChange: () => SettingsHelper.PresetOnChange.reloadSettings(),
+    },
     {
         name: "Combo Highlight Color",
         category: ["SyntaxHighlighter", "Combo", "ComboHighlightColor"],
@@ -35,12 +43,14 @@ const settingsDefinitions = [
         category: ["SyntaxHighlighter", "Preview Image", "PreviewImageDelay"],
         defaultValue: 200,
         type: SettingsHelper.ST.SLIDER(0, 1000, 1),
+        onChange: () => SettingsHelper.PresetOnChange.reloadSettings(),
     },
     {
         name: "Preview Image Padding",
         category: ["SyntaxHighlighter", "Preview Image", "PreviewImagePadding"],
         defaultValue: 20,
         type: SettingsHelper.ST.SLIDER(0, 100, 1),
+        onChange: () => SettingsHelper.PresetOnChange.reloadSettings(),
     },
     {
         name: "Preview Image Side",
@@ -50,12 +60,14 @@ const settingsDefinitions = [
             { text: "Left", value: "left" },
             { text: "Right", value: "right" }
         ),
+        onChange: () => SettingsHelper.PresetOnChange.reloadSettings(),
     },
     {
         name: "Preview Image Size",
         category: ["SyntaxHighlighter", "Preview Image", "PreviewImageSize"],
         defaultValue: 300,
         type: SettingsHelper.ST.SLIDER(100, 1000, 10),
+        onChange: () => SettingsHelper.PresetOnChange.reloadSettings(),
     },
 ];
 settingsHelper.addSettings(settingsDefinitions);