@@ -244,18 +338,19 @@ class BannerService {
${actionsHtml}
+ ${pagerHtml}
${dismissButtonHtml}
`;
- this.container.appendChild(bannerElement);
+ bannerElement.querySelectorAll('.banner-pager-btn').forEach(button => {
+ button.addEventListener('click', (event) => {
+ event.preventDefault();
+ this.showAdjacentBanner(button.getAttribute('data-pager') === 'next' ? 1 : -1);
+ });
+ });
- this.recordBannerAppearance(banner);
-
- // Call onRegister callback if provided
- if (typeof banner.onRegister === 'function') {
- banner.onRegister(bannerElement);
- }
+ return bannerElement;
}
/**
@@ -458,17 +553,18 @@ class BannerService {
* @param {string} bannerId - Banner ID to remove
*/
removeBannerElement(bannerId) {
+ // Also remove from banners map
+ this.banners.delete(bannerId);
+
const bannerElement = document.querySelector(`[data-banner-id="${bannerId}"]`);
if (bannerElement) {
bannerElement.style.animation = 'banner-slide-up 0.3s ease-in-out forwards';
setTimeout(() => {
- bannerElement.remove();
- this.updateContainerVisibility();
+ this.renderCurrentBanner();
}, 300);
+ } else {
+ this.renderCurrentBanner();
}
-
- // Also remove from banners map
- this.banners.delete(bannerId);
}
prepareCommunitySupportBanner() {
diff --git a/static/js/managers/SettingsManager.js b/static/js/managers/SettingsManager.js
index fc746b07..b5bb0cbd 100644
--- a/static/js/managers/SettingsManager.js
+++ b/static/js/managers/SettingsManager.js
@@ -2405,6 +2405,17 @@ export class SettingsManager {
try {
await this.saveSetting('folder_paths', folderPaths);
+
+ // The "model folders need setup" startup banner is obsolete once
+ // at least one folder path is configured.
+ const hasAnyPath = Object.values(folderPaths).some(value => {
+ const list = Array.isArray(value) ? value : [value];
+ return list.some(path => typeof path === 'string' && path.trim());
+ });
+ if (hasAnyPath) {
+ bannerService.removeBannerElement('startup-missing-model-paths');
+ }
+
this._markModelPathsDirty();
showToast('settings.modelPaths.saveSuccessRestart', {}, 'success');
@@ -2451,7 +2462,9 @@ export class SettingsManager {
title: translate('settings.modelPaths.pendingRestartBannerTitle', {}, 'Restart required to apply path changes'),
content: translate('settings.modelPaths.pendingRestartBannerMessage', {}, 'Model library paths were updated. Restart the LoRA Manager server to scan the new folders.'),
dismissible: true,
- priority: 60,
+ // Above startup warnings (60), below startup errors (90): a pending
+ // restart is the most actionable state and should preempt prompts.
+ priority: 80,
});
}
diff --git a/tests/frontend/managers/BannerService.test.js b/tests/frontend/managers/BannerService.test.js
index 527da151..d2e5955c 100644
--- a/tests/frontend/managers/BannerService.test.js
+++ b/tests/frontend/managers/BannerService.test.js
@@ -43,6 +43,7 @@ describe('BannerService', () => {
// Reset banner service state
bannerService.banners.clear();
bannerService.initialized = false;
+ bannerService.currentBannerIndex = 0;
bannerService.recentHistory = []; // Clear history for each test
// Clear DOM
@@ -331,6 +332,116 @@ describe('BannerService', () => {
});
});
+ describe('Banner Rotation', () => {
+ const registerTestBanner = (id, priority) => {
+ bannerService.registerBanner(id, {
+ id,
+ title: `Banner ${id}`,
+ content: `Content ${id}`,
+ dismissible: true,
+ priority
+ });
+ };
+
+ const displayedBannerId = () =>
+ document.querySelector('#banner-container .banner-item')
+ ?.getAttribute('data-banner-id');
+
+ let dismissedStore;
+
+ beforeEach(() => {
+ dismissedStore = [];
+ storageHelpers.getStorageItem.mockImplementation((key, defaultValue) => {
+ if (key === 'dismissed_banners') {
+ return dismissedStore;
+ }
+ return defaultValue;
+ });
+ storageHelpers.setStorageItem.mockImplementation((key, value) => {
+ if (key === 'dismissed_banners') {
+ dismissedStore = value;
+ }
+ });
+ bannerService.container = document.getElementById('banner-container');
+ bannerService.initialized = true;
+ });
+
+ it('renders only the highest priority banner when multiple are active', () => {
+ registerTestBanner('low', 1);
+ registerTestBanner('high', 10);
+
+ const rendered = document.querySelectorAll('#banner-container .banner-item');
+ expect(rendered).toHaveLength(1);
+ expect(displayedBannerId()).toBe('high');
+ });
+
+ it('shows a pager with position indicator when multiple banners are active', () => {
+ registerTestBanner('a', 1);
+ registerTestBanner('b', 2);
+
+ const pager = document.querySelector('.banner-pager');
+ expect(pager).not.toBeNull();
+ expect(pager.querySelector('.banner-pager-indicator').textContent.trim())
+ .toBe('1 / 2');
+ });
+
+ it('does not show a pager for a single banner', () => {
+ registerTestBanner('only', 1);
+
+ expect(document.querySelector('.banner-pager')).toBeNull();
+ });
+
+ it('cycles to the next banner and wraps around', () => {
+ registerTestBanner('a', 1);
+ registerTestBanner('b', 2);
+
+ document.querySelector('[data-pager="next"]')
+ .dispatchEvent(new MouseEvent('click', { bubbles: true }));
+ expect(displayedBannerId()).toBe('a');
+ expect(document.querySelector('.banner-pager-indicator').textContent.trim())
+ .toBe('2 / 2');
+
+ document.querySelector('[data-pager="next"]')
+ .dispatchEvent(new MouseEvent('click', { bubbles: true }));
+ expect(displayedBannerId()).toBe('b');
+ expect(document.querySelector('.banner-pager-indicator').textContent.trim())
+ .toBe('1 / 2');
+ });
+
+ it('cycles backwards with the previous button', () => {
+ registerTestBanner('a', 1);
+ registerTestBanner('b', 2);
+
+ document.querySelector('[data-pager="prev"]')
+ .dispatchEvent(new MouseEvent('click', { bubbles: true }));
+ expect(displayedBannerId()).toBe('a');
+ });
+
+ it('shows the next banner after the displayed one is dismissed', async () => {
+ vi.useFakeTimers();
+ try {
+ registerTestBanner('a', 1);
+ registerTestBanner('b', 2);
+ expect(displayedBannerId()).toBe('b');
+
+ await bannerService.dismissBanner('b');
+ vi.advanceTimersByTime(300);
+
+ expect(displayedBannerId()).toBe('a');
+ } finally {
+ vi.useRealTimers();
+ }
+ });
+
+ it('records all active banners in history, not just the displayed one', () => {
+ registerTestBanner('a', 1);
+ registerTestBanner('b', 2);
+
+ const historyIds = bannerService.recentHistory.map(entry => entry.id);
+ expect(historyIds).toEqual(expect.arrayContaining(['a', 'b']));
+ });
+ });
+
describe('Banner History', () => {
const testBanner = {
id: 'test-banner',
diff --git a/tests/frontend/managers/settingsManager.modelPaths.test.js b/tests/frontend/managers/settingsManager.modelPaths.test.js
index a3e77a81..c25cb9e3 100644
--- a/tests/frontend/managers/settingsManager.modelPaths.test.js
+++ b/tests/frontend/managers/settingsManager.modelPaths.test.js
@@ -415,4 +415,75 @@ describe('SettingsManager Model Paths section', () => {
.filter((id) => id.startsWith('model-paths-restart-'));
expect(restartBanners).toHaveLength(1);
});
+
+ it('gives the restart banner a higher priority than startup warnings', async () => {
+ buildModalDom();
+ setStandaloneSettings();
+
+ const manager = createManager();
+ manager.saveSetting = vi.fn().mockResolvedValue();
+ manager.setupModelPathsSection();
+ manager.loadModelPaths();
+
+ manager.addModelFolderPathRow('loras');
+ document.querySelector('#modelFolderPaths-loras .extra-folder-path-input').value = '/data/loras';
+ await manager.updateModelFolderPaths('loras');
+
+ const restartBanner = Array.from(bannerService.banners.values())
+ .find((banner) => banner.id.startsWith('model-paths-restart-'));
+ // Startup warnings map to 60; the restart cue must outrank them so it
+ // preempts the "model folders need setup" prompt in the banner pager.
+ expect(restartBanner.priority).toBeGreaterThan(60);
+ });
+
+ it('removes the "model folders need setup" startup banner once a path is saved', async () => {
+ buildModalDom();
+ setStandaloneSettings();
+
+ bannerService.registerBanner('startup-missing-model-paths', {
+ id: 'startup-missing-model-paths',
+ title: 'Model folders need setup',
+ content: 'stub',
+ dismissible: false,
+ priority: 60,
+ });
+
+ const manager = createManager();
+ manager.saveSetting = vi.fn().mockResolvedValue();
+ manager.setupModelPathsSection();
+ manager.loadModelPaths();
+
+ manager.addModelFolderPathRow('loras');
+ document.querySelector('#modelFolderPaths-loras .extra-folder-path-input').value = '/data/loras';
+ await manager.updateModelFolderPaths('loras');
+
+ expect(bannerService.banners.has('startup-missing-model-paths')).toBe(false);
+ });
+
+ it('keeps the setup banner when the saved paths are all empty', async () => {
+ buildModalDom();
+ setStandaloneSettings({ folder_paths: { loras: ['/data/loras'] } });
+
+ const manager = createManager();
+ manager.saveSetting = vi.fn().mockResolvedValue();
+ manager.setupModelPathsSection();
+ manager.loadModelPaths();
+
+ bannerService.registerBanner('startup-missing-model-paths', {
+ id: 'startup-missing-model-paths',
+ title: 'Model folders need setup',
+ content: 'stub',
+ dismissible: false,
+ priority: 60,
+ });
+
+ // Clear every row and save: an all-empty path set must not retire the
+ // setup prompt.
+ document.querySelectorAll('#modelFolderPaths-loras .extra-folder-path-input')
+ .forEach((input) => { input.value = ''; });
+ await manager.updateModelFolderPaths('loras');
+
+ expect(manager.saveSetting).toHaveBeenCalled();
+ expect(bannerService.banners.has('startup-missing-model-paths')).toBe(true);
+ });
});