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, Popper } from '../../../lib.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;
 +}