refac: layout load

This commit is contained in:
Timothy Jaeryang Baek 2025-04-10 09:15:08 -07:00
parent a3e477e100
commit 0611eb8ac7

View File

@ -45,6 +45,7 @@
import AccountPending from '$lib/components/layout/Overlay/AccountPending.svelte'; import AccountPending from '$lib/components/layout/Overlay/AccountPending.svelte';
import UpdateInfoToast from '$lib/components/layout/UpdateInfoToast.svelte'; import UpdateInfoToast from '$lib/components/layout/UpdateInfoToast.svelte';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
import Spinner from '$lib/components/common/Spinner.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -254,65 +255,70 @@
<div <div
class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 h-screen max-h-[100dvh] overflow-auto flex flex-row justify-end" class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 h-screen max-h-[100dvh] overflow-auto flex flex-row justify-end"
> >
{#if loaded} {#if !['user', 'admin'].includes($user?.role)}
{#if !['user', 'admin'].includes($user?.role)} <AccountPending />
<AccountPending /> {:else if localDBChats.length > 0}
{:else if localDBChats.length > 0} <div class="fixed w-full h-full flex z-50">
<div class="fixed w-full h-full flex z-50"> <div
<div class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center" >
> <div class="m-auto pb-44 flex flex-col justify-center">
<div class="m-auto pb-44 flex flex-col justify-center"> <div class="max-w-md">
<div class="max-w-md"> <div class="text-center dark:text-white text-2xl font-medium z-50">
<div class="text-center dark:text-white text-2xl font-medium z-50"> Important Update<br /> Action Required for Chat Log Storage
Important Update<br /> Action Required for Chat Log Storage </div>
</div>
<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full"> <div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
{$i18n.t( {$i18n.t(
"Saving chat logs directly to your browser's storage is no longer supported. Please take a moment to download and delete your chat logs by clicking the button below. Don't worry, you can easily re-import your chat logs to the backend through" "Saving chat logs directly to your browser's storage is no longer supported. Please take a moment to download and delete your chat logs by clicking the button below. Don't worry, you can easily re-import your chat logs to the backend through"
)} )}
<span class="font-semibold dark:text-white" <span class="font-semibold dark:text-white"
>{$i18n.t('Settings')} > {$i18n.t('Chats')} > {$i18n.t('Import Chats')}</span >{$i18n.t('Settings')} > {$i18n.t('Chats')} > {$i18n.t('Import Chats')}</span
>. {$i18n.t( >. {$i18n.t(
'This ensures that your valuable conversations are securely saved to your backend database. Thank you!' 'This ensures that your valuable conversations are securely saved to your backend database. Thank you!'
)} )}
</div> </div>
<div class=" mt-6 mx-auto relative group w-fit"> <div class=" mt-6 mx-auto relative group w-fit">
<button <button
class="relative z-20 flex px-5 py-2 rounded-full bg-white border border-gray-100 dark:border-none hover:bg-gray-100 transition font-medium text-sm" class="relative z-20 flex px-5 py-2 rounded-full bg-white border border-gray-100 dark:border-none hover:bg-gray-100 transition font-medium text-sm"
on:click={async () => { on:click={async () => {
let blob = new Blob([JSON.stringify(localDBChats)], { let blob = new Blob([JSON.stringify(localDBChats)], {
type: 'application/json' type: 'application/json'
}); });
saveAs(blob, `chat-export-${Date.now()}.json`); saveAs(blob, `chat-export-${Date.now()}.json`);
const tx = DB.transaction('chats', 'readwrite'); const tx = DB.transaction('chats', 'readwrite');
await Promise.all([tx.store.clear(), tx.done]); await Promise.all([tx.store.clear(), tx.done]);
await deleteDB('Chats'); await deleteDB('Chats');
localDBChats = []; localDBChats = [];
}} }}
> >
Download & Delete Download & Delete
</button> </button>
<button <button
class="text-xs text-center w-full mt-2 text-gray-400 underline" class="text-xs text-center w-full mt-2 text-gray-400 underline"
on:click={async () => { on:click={async () => {
localDBChats = []; localDBChats = [];
}}>{$i18n.t('Close')}</button }}>{$i18n.t('Close')}</button
> >
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/if} </div>
{/if}
<Sidebar /> <Sidebar />
{#if loaded}
<slot /> <slot />
{:else}
<div class="w-full flex-1 h-full flex items-center justify-center">
<Spinner />
</div>
{/if} {/if}
</div> </div>
</div> </div>