From e2447dd0a7404f528ca17cfcc20af66718f1f0cf Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 27 Apr 2024 19:47:11 -0400
Subject: [PATCH] refac: better layout loading

---
 src/routes/(app)/+layout.svelte | 232 ++++++++++++++++----------------
 1 file changed, 116 insertions(+), 116 deletions(-)

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 390afb792..a426307b3 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -176,128 +176,128 @@
 	});
 </script>
 
-{#if loaded}
-	<div class=" hidden lg:flex fixed bottom-0 right-0 px-3 py-3 z-10">
-		<Tooltip content="Help" placement="left">
-			<button
-				id="show-shortcuts-button"
-				bind:this={showShortcutsButtonElement}
-				class="text-gray-600 dark:text-gray-300 bg-gray-300/20 w-6 h-6 flex items-center justify-center text-xs rounded-full"
-				on:click={() => {
-					showShortcuts = !showShortcuts;
-				}}
-			>
-				?
-			</button>
-		</Tooltip>
-	</div>
-
-	<ShortcutsModal bind:show={showShortcuts} />
-
-	<div class="app relative">
-		{#if !['user', 'admin'].includes($user.role)}
-			<div class="fixed w-full h-full flex z-50">
-				<div
-					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="max-w-md">
-							<div class="text-center dark:text-white text-2xl font-medium z-50">
-								Account Activation Pending<br /> Contact Admin for WebUI Access
-							</div>
-
-							<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
-								Your account status is currently pending activation. To access the WebUI, please
-								reach out to the administrator. Admins can manage user statuses from the Admin
-								Panel.
-							</div>
-
-							<div class=" mt-6 mx-auto relative group w-fit">
-								<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"
-									on:click={async () => {
-										location.href = '/';
-									}}
-								>
-									{$i18n.t('Check Again')}
-								</button>
-
-								<button
-									class="text-xs text-center w-full mt-2 text-gray-400 underline"
-									on:click={async () => {
-										localStorage.removeItem('token');
-										location.href = '/auth';
-									}}>{$i18n.t('Sign Out')}</button
-								>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		{:else if localDBChats.length > 0}
-			<div class="fixed w-full h-full flex z-50">
-				<div
-					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="max-w-md">
-							<div class="text-center dark:text-white text-2xl font-medium z-50">
-								Important Update<br /> Action Required for Chat Log Storage
-							</div>
-
-							<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
-								{$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"
-								)}
-								<span class="font-semibold dark:text-white"
-									>{$i18n.t('Settings')} > {$i18n.t('Chats')} > {$i18n.t('Import Chats')}</span
-								>. {$i18n.t(
-									'This ensures that your valuable conversations are securely saved to your backend database. Thank you!'
-								)}
-							</div>
-
-							<div class=" mt-6 mx-auto relative group w-fit">
-								<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"
-									on:click={async () => {
-										let blob = new Blob([JSON.stringify(localDBChats)], {
-											type: 'application/json'
-										});
-										saveAs(blob, `chat-export-${Date.now()}.json`);
-
-										const tx = DB.transaction('chats', 'readwrite');
-										await Promise.all([tx.store.clear(), tx.done]);
-										await deleteDB('Chats');
-
-										localDBChats = [];
-									}}
-								>
-									Download & Delete
-								</button>
-
-								<button
-									class="text-xs text-center w-full mt-2 text-gray-400 underline"
-									on:click={async () => {
-										localDBChats = [];
-									}}>{$i18n.t('Close')}</button
-								>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		{/if}
-
-		<div
-			class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 min-h-screen overflow-auto flex flex-row"
+<div class=" hidden lg:flex fixed bottom-0 right-0 px-3 py-3 z-10">
+	<Tooltip content="Help" placement="left">
+		<button
+			id="show-shortcuts-button"
+			bind:this={showShortcutsButtonElement}
+			class="text-gray-600 dark:text-gray-300 bg-gray-300/20 w-6 h-6 flex items-center justify-center text-xs rounded-full"
+			on:click={() => {
+				showShortcuts = !showShortcuts;
+			}}
 		>
+			?
+		</button>
+	</Tooltip>
+</div>
+
+<ShortcutsModal bind:show={showShortcuts} />
+
+<div class="app relative">
+	<div
+		class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 min-h-screen overflow-auto flex flex-row"
+	>
+		{#if loaded}
+			{#if !['user', 'admin'].includes($user.role)}
+				<div class="fixed w-full h-full flex z-50">
+					<div
+						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="max-w-md">
+								<div class="text-center dark:text-white text-2xl font-medium z-50">
+									Account Activation Pending<br /> Contact Admin for WebUI Access
+								</div>
+
+								<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
+									Your account status is currently pending activation. To access the WebUI, please
+									reach out to the administrator. Admins can manage user statuses from the Admin
+									Panel.
+								</div>
+
+								<div class=" mt-6 mx-auto relative group w-fit">
+									<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 text-gray-700 transition font-medium text-sm"
+										on:click={async () => {
+											location.href = '/';
+										}}
+									>
+										{$i18n.t('Check Again')}
+									</button>
+
+									<button
+										class="text-xs text-center w-full mt-2 text-gray-400 underline"
+										on:click={async () => {
+											localStorage.removeItem('token');
+											location.href = '/auth';
+										}}>{$i18n.t('Sign Out')}</button
+									>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			{:else if localDBChats.length > 0}
+				<div class="fixed w-full h-full flex z-50">
+					<div
+						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="max-w-md">
+								<div class="text-center dark:text-white text-2xl font-medium z-50">
+									Important Update<br /> Action Required for Chat Log Storage
+								</div>
+
+								<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
+									{$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"
+									)}
+									<span class="font-semibold dark:text-white"
+										>{$i18n.t('Settings')} > {$i18n.t('Chats')} > {$i18n.t('Import Chats')}</span
+									>. {$i18n.t(
+										'This ensures that your valuable conversations are securely saved to your backend database. Thank you!'
+									)}
+								</div>
+
+								<div class=" mt-6 mx-auto relative group w-fit">
+									<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"
+										on:click={async () => {
+											let blob = new Blob([JSON.stringify(localDBChats)], {
+												type: 'application/json'
+											});
+											saveAs(blob, `chat-export-${Date.now()}.json`);
+
+											const tx = DB.transaction('chats', 'readwrite');
+											await Promise.all([tx.store.clear(), tx.done]);
+											await deleteDB('Chats');
+
+											localDBChats = [];
+										}}
+									>
+										Download & Delete
+									</button>
+
+									<button
+										class="text-xs text-center w-full mt-2 text-gray-400 underline"
+										on:click={async () => {
+											localDBChats = [];
+										}}>{$i18n.t('Close')}</button
+									>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			{/if}
+
 			<Sidebar />
 			<SettingsModal bind:show={$showSettings} />
 			<ChangelogModal bind:show={$showChangelog} />
 			<slot />
-		</div>
+		{/if}
 	</div>
-{/if}
+</div>
 
 <style>
 	.loading {