Always apply saved full-width mode after auth (#1130)

This commit is contained in:
rcourtman
2026-03-25 11:40:34 +00:00
parent c8690a9a55
commit 6c3a2cd701
2 changed files with 28 additions and 17 deletions
+15 -9
View File
@@ -614,8 +614,7 @@ function App() {
}
}
setHasLoadedServerTheme(true);
// Also load full-width mode from server
layoutStore.loadFromServer();
layoutStore.applyServerMode(systemSettings.fullWidthMode);
} catch (error) {
logger.error('Failed to load theme from server', error);
// Ensure settings are marked as loaded so UI doesn't stay in loading state
@@ -625,7 +624,10 @@ function App() {
setHasLoadedServerTheme(true);
// Still load system settings for other features (Docker update actions, etc.)
SettingsAPI.getSystemSettings()
.then((settings) => updateSystemSettingsFromResponse(settings))
.then((settings) => {
updateSystemSettingsFromResponse(settings);
layoutStore.applyServerMode(settings.fullWidthMode);
})
.catch((error) => {
logger.warn('Failed to load system settings', error);
markSystemSettingsLoadedWithDefaults();
@@ -675,8 +677,7 @@ function App() {
}
}
setHasLoadedServerTheme(true);
// Also load full-width mode from server
layoutStore.loadFromServer();
layoutStore.applyServerMode(systemSettings.fullWidthMode);
} catch (error) {
logger.error('Failed to load theme from server', error);
// Ensure settings are marked as loaded so UI doesn't stay in loading state
@@ -686,7 +687,10 @@ function App() {
setHasLoadedServerTheme(true);
// Still load system settings for other features (Docker update actions, etc.)
SettingsAPI.getSystemSettings()
.then((settings) => updateSystemSettingsFromResponse(settings))
.then((settings) => {
updateSystemSettingsFromResponse(settings);
layoutStore.applyServerMode(settings.fullWidthMode);
})
.catch((error) => {
logger.warn('Failed to load system settings', error);
markSystemSettingsLoadedWithDefaults();
@@ -747,8 +751,7 @@ function App() {
}
}
setHasLoadedServerTheme(true);
// Also load full-width mode from server
layoutStore.loadFromServer();
layoutStore.applyServerMode(systemSettings.fullWidthMode);
} catch (error) {
logger.error('Failed to load theme from server', error);
// Ensure settings are marked as loaded so UI doesn't stay in loading state
@@ -759,7 +762,10 @@ function App() {
setHasLoadedServerTheme(true);
// Still load system settings for other features (Docker update actions, etc.)
SettingsAPI.getSystemSettings()
.then((settings) => updateSystemSettingsFromResponse(settings))
.then((settings) => {
updateSystemSettingsFromResponse(settings);
layoutStore.applyServerMode(settings.fullWidthMode);
})
.catch((error) => {
logger.warn('Failed to load system settings', error);
// Ensure settings are marked as loaded so UI doesn't stay in loading state
+13 -8
View File
@@ -12,7 +12,7 @@ export type LayoutMode = 'default' | 'full-width';
* Creates a reactive store for layout mode preference
* Syncs with both localStorage (for immediate access) and server (for persistence across updates)
*/
function createLayoutStore() {
export function createLayoutStore() {
const stored = localStorage.getItem(STORAGE_KEYS.FULL_WIDTH_MODE);
const initialMode: LayoutMode = stored === 'full-width' ? 'full-width' : 'default';
@@ -38,6 +38,16 @@ function createLayoutStore() {
const isFullWidth = () => mode() === 'full-width';
const applyServerMode = (serverFullWidthMode: boolean | undefined) => {
if (serverFullWidthMode !== undefined) {
const serverMode: LayoutMode = serverFullWidthMode ? 'full-width' : 'default';
localStorage.setItem(STORAGE_KEYS.FULL_WIDTH_MODE, serverMode);
setModeInternal(serverMode);
logger.debug('Applied full-width mode from server', { mode: serverMode });
}
setHasLoadedFromServer(true);
};
/**
* Load full-width preference from server (called after auth)
* Always uses server preference after auth to keep localStorage in sync
@@ -50,13 +60,7 @@ function createLayoutStore() {
try {
const settings = await SettingsAPI.getSystemSettings();
if (settings.fullWidthMode !== undefined) {
const serverMode: LayoutMode = settings.fullWidthMode ? 'full-width' : 'default';
localStorage.setItem(STORAGE_KEYS.FULL_WIDTH_MODE, serverMode);
setModeInternal(serverMode);
logger.debug('Loaded full-width mode from server', { mode: serverMode });
}
setHasLoadedFromServer(true);
applyServerMode(settings.fullWidthMode);
} catch (error) {
logger.warn('Failed to load full-width mode from server', error);
}
@@ -67,6 +71,7 @@ function createLayoutStore() {
setMode,
toggle,
isFullWidth,
applyServerMode,
loadFromServer,
};
}