98 lines
3.0 KiB
Svelte
98 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import '../app.css';
|
|
import { onMount } from 'svelte';
|
|
import { createSvelteAuthClient } from '@mmailaender/convex-better-auth-svelte/svelte';
|
|
import { authClient } from '$lib/auth';
|
|
// Importar polyfill ANTES de qualquer outro código que possa usar Jitsi
|
|
import '$lib/utils/jitsiPolyfill';
|
|
import { useQuery } from 'convex-svelte';
|
|
import { api } from '@sgse-app/backend/convex/_generated/api';
|
|
import { aplicarTema, aplicarTemaPadrao } from '$lib/utils/temas';
|
|
import { themeChange } from 'theme-change';
|
|
|
|
const { children } = $props();
|
|
|
|
createSvelteAuthClient({ authClient });
|
|
|
|
// Buscar usuário atual para aplicar tema
|
|
const currentUser = useQuery(api.auth.getCurrentUser, {});
|
|
|
|
function obterTemaPersistido(): string | null {
|
|
if (typeof window === 'undefined') return null;
|
|
try {
|
|
const tema = window.localStorage.getItem('theme');
|
|
return tema && tema.trim() ? tema : null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function aplicarTemaDaisyUI(tema: string): void {
|
|
if (typeof document === 'undefined') return;
|
|
const htmlElement = document.documentElement;
|
|
htmlElement.setAttribute('data-theme', tema);
|
|
// Evita que `body[data-theme]` sobrescreva o tema do `<html>`
|
|
if (document.body) document.body.removeAttribute('data-theme');
|
|
}
|
|
|
|
onMount(() => {
|
|
// Habilita `data-set-theme` e `data-choose-theme` e persiste em localStorage ("theme")
|
|
// Em Svelte, precisamos passar `false` para não depender de `DOMContentLoaded`
|
|
themeChange(false);
|
|
|
|
// Garante que o tema persistido no device tenha prioridade
|
|
const temaPersistido = obterTemaPersistido();
|
|
if (temaPersistido) {
|
|
aplicarTemaDaisyUI(temaPersistido);
|
|
}
|
|
});
|
|
|
|
// Aplicar tema quando o usuário for carregado
|
|
$effect(() => {
|
|
if (typeof document === 'undefined') return;
|
|
|
|
const htmlElement = document.documentElement;
|
|
|
|
// Aguardar um pouco para garantir que o DOM está pronto
|
|
const timeoutId = setTimeout(() => {
|
|
const temaPersistido = obterTemaPersistido();
|
|
if (temaPersistido) {
|
|
// Prioridade do device (localStorage) mesmo para usuários logados
|
|
aplicarTemaDaisyUI(temaPersistido);
|
|
return;
|
|
}
|
|
|
|
if (currentUser?.data?.temaPreferido) {
|
|
// Usuário logado com tema preferido - aplicar tema salvo
|
|
aplicarTema(currentUser.data.temaPreferido);
|
|
} else if (currentUser !== undefined) {
|
|
// Se a query terminou (mesmo que não haja usuário), aplicar tema padrão
|
|
if (!htmlElement.getAttribute('data-theme')) {
|
|
aplicarTemaPadrao();
|
|
}
|
|
}
|
|
}, 50);
|
|
|
|
return () => clearTimeout(timeoutId);
|
|
});
|
|
|
|
// Aplicar tema padrão imediatamente ao carregar (antes de verificar usuário)
|
|
$effect(() => {
|
|
if (typeof document !== 'undefined') {
|
|
const temaPersistido = obterTemaPersistido();
|
|
if (temaPersistido) {
|
|
aplicarTemaDaisyUI(temaPersistido);
|
|
return;
|
|
}
|
|
|
|
// Se não há tema aplicado ainda, aplicar o padrão imediatamente
|
|
const htmlElement = document.documentElement;
|
|
if (!htmlElement.getAttribute('data-theme')) {
|
|
aplicarTemaPadrao();
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{@render children()}
|