danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Bootstrap saved appearance effects early

Browse source
This commit is contained in:
dev 2026-06-29 00:01:56 +02:00
parent 8149f35fae
commit 1382cb6117
3 changed files with 31 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web_server.py
View file

@ -363,6 +363,9 @@ def _initial_appearance_context():
preset = config_manager.get('ui_appearance.accent_preset', '#1db954') preset = config_manager.get('ui_appearance.accent_preset', '#1db954')
custom = config_manager.get('ui_appearance.accent_color', '#1db954') custom = config_manager.get('ui_appearance.accent_color', '#1db954')
accent = _valid_hex_color(custom if preset == 'custom' else preset) accent = _valid_hex_color(custom if preset == 'custom' else preset)
particles_enabled = config_manager.get('ui_appearance.particles_enabled', False) is True
worker_orbs_enabled = config_manager.get('ui_appearance.worker_orbs_enabled', True) is not False
reduce_effects = config_manager.get('ui_appearance.reduce_effects', False) is True
r, g, b = _hex_to_rgb(accent) r, g, b = _hex_to_rgb(accent)
hue, saturation, lightness = _rgb_to_hsl(r, g, b) hue, saturation, lightness = _rgb_to_hsl(r, g, b)
light = _hsl_to_rgb(hue, saturation, min(lightness + 0.16, 0.95)) light = _hsl_to_rgb(hue, saturation, min(lightness + 0.16, 0.95))
@ -372,6 +375,9 @@ def _initial_appearance_context():
'initial_accent_rgb': f'{r}, {g}, {b}', 'initial_accent_rgb': f'{r}, {g}, {b}',
'initial_accent_light_rgb': f'{light[0]}, {light[1]}, {light[2]}', 'initial_accent_light_rgb': f'{light[0]}, {light[1]}, {light[2]}',
'initial_accent_neon_rgb': f'{neon[0]}, {neon[1]}, {neon[2]}', 'initial_accent_neon_rgb': f'{neon[0]}, {neon[1]}, {neon[2]}',
'initial_particles_enabled': particles_enabled,
'initial_worker_orbs_enabled': worker_orbs_enabled,
'initial_reduce_effects': reduce_effects,
} }

9
webui/index.html
View file

@ -20,10 +20,15 @@
--accent-neon-rgb: {{ initial_accent_neon_rgb }}; --accent-neon-rgb: {{ initial_accent_neon_rgb }};
} }
</style> </style>
<script>
window._particlesEnabled = {{ initial_particles_enabled|tojson }};
window._workerOrbsEnabled = {{ initial_worker_orbs_enabled|tojson }};
window._reduceEffectsActive = {{ initial_reduce_effects|tojson }};
</script>
{{ vite_assets('head')|safe }} {{ vite_assets('head')|safe }}
</head> </head>
<body> <body{% if initial_reduce_effects %} class="reduce-effects"{% endif %}>
<!-- Setup Wizard Overlay --> <!-- Setup Wizard Overlay -->
<div id="setup-wizard-overlay" class="setup-wizard-overlay" style="display: none;"> <div id="setup-wizard-overlay" class="setup-wizard-overlay" style="display: none;">
<div class="setup-wizard-container"> <div class="setup-wizard-container">
@ -354,7 +359,7 @@
<!-- Main Content Area --> <!-- Main Content Area -->
<div class="main-content"> <div class="main-content">
<!-- Global particle canvas for page background animations --> <!-- Global particle canvas for page background animations -->
<canvas id="page-particles-canvas"></canvas> <canvas id="page-particles-canvas"{% if not initial_particles_enabled or initial_reduce_effects %} style="display: none;"{% endif %}></canvas>
<div id="webui-react-root" class="page" data-react-app="router"></div> <div id="webui-react-root" class="page" data-react-app="router"></div>
<!-- Dashboard Page --> <!-- Dashboard Page -->

20
webui/static/init.js
View file

@ -254,16 +254,28 @@ function applyReduceEffects(enabled) {
} }
} }
if (localStorage.getItem('soulsync-reduce-effects') === '1') { const reduceEffectsSaved = localStorage.getItem('soulsync-reduce-effects');
if (reduceEffectsSaved === '1') {
document.body.classList.add('reduce-effects'); document.body.classList.add('reduce-effects');
window._reduceEffectsActive = true; window._reduceEffectsActive = true;
} else if (reduceEffectsSaved === '0') {
document.body.classList.remove('reduce-effects');
window._reduceEffectsActive = false;
} else if (window._reduceEffectsActive) {
document.body.classList.add('reduce-effects');
} }
const saved = localStorage.getItem('soulsync-accent'); const saved = localStorage.getItem('soulsync-accent');
if (saved) applyAccentColor(saved); if (saved) applyAccentColor(saved);
// Bootstrap particles setting from localStorage — OFF by default (continuous // Bootstrap particles setting from localStorage — OFF by default (continuous
// full-page canvas = real GPU cost); only on when the user explicitly enabled it. // full-page canvas = real GPU cost); only on when the user explicitly enabled it.
const particlesSaved = localStorage.getItem('soulsync-particles'); const particlesSaved = localStorage.getItem('soulsync-particles');
window._particlesEnabled = (particlesSaved === 'true'); if (particlesSaved === 'true') {
window._particlesEnabled = true;
} else if (particlesSaved === 'false') {
window._particlesEnabled = false;
} else if (typeof window._particlesEnabled !== 'boolean') {
window._particlesEnabled = false;
}
if (!window._particlesEnabled) { if (!window._particlesEnabled) {
const canvas = document.getElementById('page-particles-canvas'); const canvas = document.getElementById('page-particles-canvas');
if (canvas) canvas.style.display = 'none'; if (canvas) canvas.style.display = 'none';
@ -272,6 +284,10 @@ function applyReduceEffects(enabled) {
const workerOrbsSaved = localStorage.getItem('soulsync-worker-orbs'); const workerOrbsSaved = localStorage.getItem('soulsync-worker-orbs');
if (workerOrbsSaved === 'false') { if (workerOrbsSaved === 'false') {
window._workerOrbsEnabled = false; window._workerOrbsEnabled = false;
} else if (workerOrbsSaved === 'true') {
window._workerOrbsEnabled = true;
} else if (typeof window._workerOrbsEnabled !== 'boolean') {
window._workerOrbsEnabled = true;
} }
})(); })();