Merge pull request #3775 from SillyTavern/feat/ext-manager-toolbar Move extension buttons to a separate toolbar

26d0f01d6925923f06258b6fb1fc3366a49bf38a

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

Parents: 469c731ff469d74b29a83050ed21d000e3c6085a 572b60d0c13dbf3ba4a2ab47c0a80f6905d3c8d1

public/css/extensions-panel.css+12 -0 Viewed

 .extensions_info .extension_actions {
     flex-wrap: nowrap;
+}
+.extensions_toolbar {
+    top: 0;
+    position: sticky;
+    display: flex;
+    flex-direction: row;
+    background-color: var(--SmartThemeBlurTintColor);
+    gap: 5px;
+    z-index: 1;
+    margin-bottom: 10px;
+    padding: 5px;
+}

public/scripts/extensions.js+28 -22 Viewed

             .append(htmlExternal)
             .append(getModuleInformation());
-        /** @type {import('./popup.js').CustomPopupButton} */
+        {
-        const updateAllButton = {
+            const updateAction = async (force) => {
-            text: t`Update all`,
-            action: async () => {
                 requiresReload = true;
-                await autoUpdateExtensions(true);
+                await autoUpdateExtensions(force);
                 await popup.complete(POPUP_RESULT.AFFIRMATIVE);
-            },
             };
-        /** @type {import('./popup.js').CustomPopupButton} */
+            const toolbar = document.createElement('div');
-        const updateEnabledOnlyButton = {
+            toolbar.classList.add('extensions_toolbar');
-            text: t`Update enabled only`,
-            action: async () => {
-                requiresReload = true;
-                await autoUpdateExtensions(false);
-                await popup.complete(POPUP_RESULT.AFFIRMATIVE);
-            },
-        };
-        /** @type {import('./popup.js').CustomPopupButton} */
+            const updateAllButton = document.createElement('button');
-        const sortOrderButton = {
+            updateAllButton.classList.add('menu_button', 'menu_button_icon');
-            text: sortByName ? t`Sort: Display Name` : t`Sort: Loading Order`,
+            updateAllButton.textContent = t`Update all`;
-            action: async () => {
+            updateAllButton.addEventListener('click', () => updateAction(true));
+            const updateEnabledOnlyButton = document.createElement('button');
+            updateEnabledOnlyButton.classList.add('menu_button', 'menu_button_icon');
+            updateEnabledOnlyButton.textContent = t`Update enabled`;
+            updateEnabledOnlyButton.addEventListener('click', () => updateAction(false));
+            const flexExpander = document.createElement('div');
+            flexExpander.classList.add('expander');
+            const sortOrderButton = document.createElement('button');
+            sortOrderButton.classList.add('menu_button', 'menu_button_icon');
+            sortOrderButton.textContent = sortByName ? t`Sort: Display Name` : t`Sort: Loading Order`;
+            sortOrderButton.addEventListener('click', async () => {
                 abortController.abort();
                 accountStorage.setItem(sortOrderKey, sortByName ? 'false' : 'true');
                 await showExtensionsDetails();
-            },
+            });
-        };
+            toolbar.append(updateAllButton, updateEnabledOnlyButton, flexExpander, sortOrderButton);
+            html.prepend(toolbar);
+        }
         let waitingForSave = false;

             okButton: t`Close`,
             wide: true,
             large: true,
-            customButtons: [sortOrderButton, updateEnabledOnlyButton, updateAllButton],
+            customButtons: [],
             allowVerticalScrolling: true,
             onClosing: async () => {
                 if (waitingForSave) {