Connection Manager: quick-switch profile button in the chat bar Reviewed-by: auto-review

c0a14545a4616d74737976c6257fa95ac2a97504

permissionBRICK <permissionBRICK@gmail.com>

Parents: 61b7e8368dd7e9a28043ea22c8ad6180e1f0e00d

public/scripts/extensions/connection-manager/index.js+136 -2 Viewed

-import { DOMPurify, Fuse } from '../../../lib.js';
+import { DOMPurify, Fuse, Popper } from '../../../lib.js';
-import { activateSendButtons, deactivateSendButtons, event_types, eventSource, main_api, online_status, saveSettingsDebounced } from '../../../script.js';
+import { activateSendButtons, animation_duration, deactivateSendButtons, event_types, eventSource, main_api, online_status, saveSettingsDebounced } from '../../../script.js';
 import { extension_settings, getContext, renderExtensionTemplateAsync } from '../../extensions.js';
 import { callGenericPopup, Popup, POPUP_RESULT, POPUP_TYPE } from '../../popup.js';
 import { SlashCommand } from '../../slash-commands/SlashCommand.js';

+    }
+}
+/**
+ * Adds a quick-switch connection profile button to the bottom-left of the chat bar.
+ * Clicking it opens a small popup listing all saved connection profiles; clicking a
+ * profile switches to it by driving the Connection Manager's #connection_profiles select.
+ */
+function addQuickSwitchButton() {
+    const leftSendForm = document.getElementById('leftSendForm');
+    if (!leftSendForm) {
+        console.warn('[Connection Manager] #leftSendForm not found, skipping quick-switch button');
+        return;
+    }
+    // Avoid adding the button twice (e.g. on extension re-activation)
+    if (document.getElementById('connection_profile_switcher')) {
+        return;
+    }
+    const button = document.createElement('div');
+    button.id = 'connection_profile_switcher';
+    button.className = 'fa-solid fa-plug interactable';
+    button.tabIndex = 0;
+    button.title = t`Quick-switch connection profile`;
+    button.setAttribute('data-i18n', '[title]Quick-switch connection profile');
+    leftSendForm.appendChild(button);
+    const menu = document.createElement('div');
+    menu.id = 'connection_profile_switcher_menu';
+    menu.style.display = 'none';
+    const list = document.createElement('ul');
+    list.id = 'connection_profile_switcher_list';
+    list.className = 'list-group';
+    menu.appendChild(list);
+    document.body.appendChild(menu);
+    const $menu = $(menu);
+    const popper = Popper.createPopper(button, menu, {
+        placement: 'top-start',
+    });
+    /**
+     * Rebuilds the list of profiles from the current settings.
+     */
+    function rebuildList() {
+        list.innerHTML = '';
+        const profiles = extension_settings.connectionManager.profiles;
+        const selectedProfile = extension_settings.connectionManager.selectedProfile;
+        if (!Array.isArray(profiles) || profiles.length === 0) {
+            const emptyItem = document.createElement('li');
+            emptyItem.className = 'list-group-item disabled';
+            emptyItem.textContent = t`No connection profiles saved`;
+            emptyItem.setAttribute('data-i18n', 'No connection profiles saved');
+            list.appendChild(emptyItem);
+            return;
+        }
+        const sortedProfiles = profiles.slice().sort((a, b) => a.name.localeCompare(b.name));
+        for (const profile of sortedProfiles) {
+            const item = document.createElement('li');
+            item.className = 'list-group-item interactable';
+            item.dataset.profileId = profile.id;
+            if (profile.id === selectedProfile) {
+                item.classList.add('selected');
+            }
+            const icon = document.createElement('i');
+            icon.className = profile.id === selectedProfile ? 'fa-fw fa-solid fa-check' : 'fa-fw fa-solid';
+            const label = document.createElement('span');
+            label.textContent = profile.name;
+            item.appendChild(icon);
+            item.appendChild(label);
+            list.appendChild(item);
+        }
+    }
+    button.addEventListener('click', (e) => {
+        e.preventDefault();
+        if ($menu.is(':visible')) {
+            $menu.fadeOut(animation_duration);
+            return;
+        }
+        rebuildList();
+        $menu.fadeIn(animation_duration);
+        popper.update();
+    });
+    // Switch profile when a list item is clicked (event delegation).
+    list.addEventListener('click', (e) => {
+        const item = e.target instanceof Element ? e.target.closest('li[data-profile-id]') : null;
+        if (!item) {
+            return;
+        }
+        const profileId = item.dataset.profileId;
+        $menu.fadeOut(animation_duration);
+        if (!profileId) {
+            return;
+        }
+        /** @type {HTMLSelectElement} */
+        // @ts-ignore
+        const select = document.getElementById('connection_profiles');
+        if (!select) {
+            console.warn('[Connection Manager] #connection_profiles select not found');
+            return;
+        }
+        if (!Array.from(select.options).some(o => o.value === profileId)) {
+            console.warn(`[Connection Manager] Profile option not found in select: ${profileId}`);
+            return;
+        }
+        select.value = profileId;
+        select.dispatchEvent(new Event('change'));
+    });
+    // Close the menu when clicking outside of it or the button.
+    document.addEventListener('click', (e) => {
+        if (!$menu.is(':visible')) {
+            return;
+        }
+        const target = e.target;
+        if (target instanceof Node && (menu.contains(target) || button.contains(target) || button === target)) {
+            return;
+        }
+        $menu.fadeOut(animation_duration);
+    });
+    // Keep the highlighted item up to date while the menu is open.
+    eventSource.on(event_types.CONNECTION_PROFILE_LOADED, () => {
+        if ($menu.is(':visible')) {
+            rebuildList();
+            popper.update();
+        }
+    });
+}
 export async function init() {
     extension_settings.connectionManager = extension_settings.connectionManager || structuredClone(DEFAULT_SETTINGS);

     const profiles = document.getElementById('connection_profiles');
     renderConnectionProfiles(profiles);
+    addQuickSwitchButton();
     function toggleProfileSpecificButtons() {
         const profileId = extension_settings.connectionManager.selectedProfile;
         const profileSpecificButtons = ['update_connection_profile', 'reload_connection_profile', 'delete_connection_profile'];

public/scripts/extensions/connection-manager/style.css+26 -0 Viewed

 #connection_profile_spinner {
     margin-left: 5px;
+}
+#connection_profile_switcher {
+    font-size: var(--bottomFormIconSize);
+}
+#connection_profile_switcher_menu {
+    z-index: 30000;
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
+}
+#connection_profile_switcher_list {
+    max-height: calc(100vh - calc(2 * var(--bottomFormBlockSize) + 10px));
+    max-height: calc(100dvh - calc(2 * var(--bottomFormBlockSize) + 10px));
+    overflow-y: auto;
+    min-width: 150px;
+}
+#connection_profile_switcher_list .list-group-item.selected {
+    opacity: 1;
+}
+#connection_profile_switcher_list .list-group-item.disabled {
+    cursor: default;
+    opacity: 0.5;
+}