Splash

web/src/routes/(app)/Login.svelte

@@ -6,7 +6,7 @@
 	import { Login } from '$lib/Login';
 	import { loginType } from '../../stores/Author';
 	import { page } from '$app/stores';
-	import { afterNavigate } from '$app/navigation';
+	import { afterNavigate, goto } from '$app/navigation';
 	import { authorProfile } from '../../stores/Author';
 	import { WebStorage } from '$lib/WebStorage';
 	import ModalDialog from '$lib/components/ModalDialog.svelte';
@@ -35,7 +35,7 @@
 	}
 
 	async function loginWithDemo() {
-		location.pathname = '/home';
+		await goto('/home');
 	}
 
 	function createAccount(): void {
@@ -66,10 +66,6 @@
 			const { waitNostr } = await import('nip07-awaiter');
 			waitNostr(10000).then((n) => (nostr = n));
 		}
-
-		if ($authorProfile) {
-			gotoHome();
-		}
 	});
 
 	async function gotoHome() {
@@ -81,7 +77,7 @@
 
 		const url = '/home';
 		console.log(`Redirect to ${url}`);
-		location.pathname = url;
+		await goto(url);
 	}
 
 	afterNavigate(async () => {
@@ -99,7 +95,7 @@
 
 <div class="login-wrapper">
 	<div class="login">
-		<img src="/nostter-logo.svg" alt="nostter-logo" />
+		<img src="/nostter-logo.svg" alt="nostter" />
 		<div class="messages-and-actions">
 			<p class="hero-message">
 				{$_('login.hero-message')}
@@ -227,22 +223,6 @@
 </footer>
 
 <style>
-	:global(header) {
-		display: none;
-	}
-
-	:global(.app) {
-		max-width: 100% !important;
-		margin: 0 !important;
-		padding: 0 !important;
-		display: block !important;
-	}
-
-	:global(main) {
-		margin: 0 !important;
-		max-width: 100% !important;
-	}
-
 	h2 {
 		font-size: 2rem;
 	}

web/src/routes/(app)/editor/EmojiPickerSlide.svelte

@@ -7,7 +7,7 @@
 	import { customEmojiTags } from '../../../stores/CustomEmojis';
 	import IconMoodSmile from '@tabler/icons-svelte/dist/svelte/icons/IconMoodSmile.svelte';
 
-	let emojiPicker: HTMLElement | undefined;
+	let emojiPicker: HTMLElement | null = null;
 	let hidden = true;
 
 	const dispatch = createEventDispatcher();
@@ -19,7 +19,7 @@
 	}
 
 	function updatePicker() {
-		if (emojiPicker === undefined) {
+		if (emojiPicker === null) {
 			return;
 		}
 

web/src/routes/+layout.ts

@@ -8,14 +8,19 @@ import { defaultRelays } from '$lib/Constants';
 
 export const load = async () => {
 	console.log('[layout load]');
+	let authenticated = false;
 	if (browser) {
 		locale.set(window.navigator.language);
-		const success = await tryLogin();
-		if (!success) {
+		authenticated = await tryLogin();
+		if (!authenticated) {
 			await rxNostr.switchRelays(defaultRelays);
 		}
 	}
 	await waitLocale();
+	return {
+		splash: !browser || authenticated,
+		authenticated
+	};
 };
 
 async function tryLogin(): Promise<boolean> {

web/src/routes/+page.svelte

@@ -1,10 +1,23 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import type { LayoutData } from './$types';
+	import SplashScreen from './SplashScreen.svelte';
 	import Login from './(app)/Login.svelte';
 	import '../app.css';
+
+	export let data: LayoutData;
+
+	$: if (data.authenticated) {
+		goto('/home');
+	}
 </script>
 
 <svelte:head>
 	<title>nostter</title>
 </svelte:head>
 
-<Login />
+{#if data.splash}
+	<SplashScreen />
+{:else}
+	<Login />
+{/if}

web/src/routes/SplashScreen.svelte

@@ -0,0 +1,21 @@
+<main>
+	<img src="/nostter-logo.svg" alt="nostter" />
+</main>
+
+<style>
+	:global(html, body) {
+		width: 100vw;
+		height: 100vh;
+	}
+
+	main {
+		height: 100vh;
+		display: flex;
+		justify-content: center;
+	}
+
+	img {
+		width: 90vw;
+		max-width: 360px;
+	}
+</style>

web/tests/test.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-test('index page has expected h1', async ({ page }) => {
+test('index page has expected logo', async ({ page }) => {
 	await page.goto('/');
-	await expect(page.getByRole('heading', { name: 'nostter' })).toBeVisible();
+	await expect(page.getByRole('img', { name: 'nostter' })).toBeVisible();
 });