💄 Add splash animation within web index file

[xendke]

Is this something we're interested in? Any concerns or improvements? we could support more themes if needed!

splash.mp4

[JMicheli]

I actually think that rocks!

[aaronleopold]

I think I can dig it! I left a few comments I'd like to resolve before giving my ✅, but otherwise I think we can give this UI a try

[aaronleopold]

I think I originally wrote something like this for the desktop app back when there were only two themes. To make this work with the current system, it should be something like:

Suggested change

	try {
	const zustandState = JSON.parse(
	localStorage.getItem('stump-user-store') || '{"state": {}}',
	).state
	if (zustandState.userPreferences && zustandState.userPreferences.app_theme === 'dark') {
	document.querySelector('html').classList.add('dark')
	}
	} catch {}
	try {
	const zustandState = JSON.parse(
	localStorage.getItem('stump-user-store') || '{"state": {}}',
	).state
	const appTheme = zustandState.userPreferences?.app_theme || ''
	const alreadyHasTheme =
	!appTheme || document.querySelector('html').classList.contains(appTheme)
	if (!alreadyHasTheme) {
	document.querySelector('html').classList.add(appTheme)
	}
	} catch {}

[aaronleopold]

I'm sure you already know where to find them since you pulled this value, but I'd want to make sure we cover each supported theme before merging this in.

A note for the future is that custom themes won't quite work using this method, since the CSS isn't loaded until the app mounts and this splash is present before that point