From 5d7d501adff9b14a0f88622e1a9122fda64db162 Mon Sep 17 00:00:00 2001
From: SnowCait <SnowCait@users.noreply.github.com>
Date: Sat, 21 Oct 2023 19:09:46 +0900
Subject: [PATCH 1/5] Splash

---
 web/src/routes/(app)/Login.svelte | 18 +----------------
 web/src/routes/+layout.ts         |  9 +++++++--
 web/src/routes/+page.svelte       | 33 ++++++++++++++++++++++++++++++-
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/web/src/routes/(app)/Login.svelte b/web/src/routes/(app)/Login.svelte
index 6ab90007d..2fc840d63 100644
--- a/web/src/routes/(app)/Login.svelte
+++ b/web/src/routes/(app)/Login.svelte
@@ -99,7 +99,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 +227,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;
 	}
diff --git a/web/src/routes/+layout.ts b/web/src/routes/+layout.ts
index e1f2f788d..5a482bc07 100644
--- a/web/src/routes/+layout.ts
+++ b/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> {
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index b63a4928a..5a7074487 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,10 +1,41 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import type { LayoutData } from './$types';
 	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}
+	<main>
+		<img src="/nostter-logo.svg" alt="nostter" />
+	</main>
+{:else}
+	<Login />
+{/if}
+
+<style>
+	:global(html, body) {
+		height: 100%;
+	}
+
+	main {
+		height: 100%;
+		display: flex;
+		justify-content: center;
+	}
+
+	img {
+		width: 100%;
+		max-width: 360px;
+	}
+</style>

From 3563a09debd9a3b1b703ba5bc488db9148f26429 Mon Sep 17 00:00:00 2001
From: SnowCait <SnowCait@users.noreply.github.com>
Date: Sat, 21 Oct 2023 19:48:10 +0900
Subject: [PATCH 2/5] Extract splash screen

---
 web/src/routes/+page.svelte        | 22 ++--------------------
 web/src/routes/SplashScreen.svelte | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 20 deletions(-)
 create mode 100644 web/src/routes/SplashScreen.svelte

diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 5a7074487..f4ca968c8 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,6 +1,7 @@
 <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';
 
@@ -16,26 +17,7 @@
 </svelte:head>
 
 {#if data.splash}
-	<main>
-		<img src="/nostter-logo.svg" alt="nostter" />
-	</main>
+	<SplashScreen />
 {:else}
 	<Login />
 {/if}
-
-<style>
-	:global(html, body) {
-		height: 100%;
-	}
-
-	main {
-		height: 100%;
-		display: flex;
-		justify-content: center;
-	}
-
-	img {
-		width: 100%;
-		max-width: 360px;
-	}
-</style>
diff --git a/web/src/routes/SplashScreen.svelte b/web/src/routes/SplashScreen.svelte
new file mode 100644
index 000000000..53db1e8fe
--- /dev/null
+++ b/web/src/routes/SplashScreen.svelte
@@ -0,0 +1,20 @@
+<main>
+	<img src="/nostter-logo.svg" alt="nostter" />
+</main>
+
+<style>
+	:global(html, body) {
+		height: 100%;
+	}
+
+	main {
+		height: 100%;
+		display: flex;
+		justify-content: center;
+	}
+
+	img {
+		width: 100%;
+		max-width: 360px;
+	}
+</style>

From a21915c7218b4cb2739fa814baace1a217387ade Mon Sep 17 00:00:00 2001
From: SnowCait <SnowCait@users.noreply.github.com>
Date: Sun, 22 Oct 2023 02:59:42 +0900
Subject: [PATCH 3/5] Fix navigation

---
 web/src/routes/(app)/Login.svelte                   | 10 +++-------
 web/src/routes/(app)/editor/EmojiPickerSlide.svelte |  4 ++--
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/web/src/routes/(app)/Login.svelte b/web/src/routes/(app)/Login.svelte
index 2fc840d63..7348cf7c4 100644
--- a/web/src/routes/(app)/Login.svelte
+++ b/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 () => {
diff --git a/web/src/routes/(app)/editor/EmojiPickerSlide.svelte b/web/src/routes/(app)/editor/EmojiPickerSlide.svelte
index 5be8ccf9a..2ea88c801 100644
--- a/web/src/routes/(app)/editor/EmojiPickerSlide.svelte
+++ b/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;
 		}
 

From b2c11372e7e16a1ff02afc25a59aa8aad6e2dc6c Mon Sep 17 00:00:00 2001
From: SnowCait <SnowCait@users.noreply.github.com>
Date: Sun, 22 Oct 2023 03:06:44 +0900
Subject: [PATCH 4/5] Fix test

---
 web/tests/test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/tests/test.ts b/web/tests/test.ts
index e569c799c..e75ed738e 100644
--- a/web/tests/test.ts
+++ b/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();
 });

From 5224e78b0e9699b33d372284fc6a7319abf8c7ad Mon Sep 17 00:00:00 2001
From: SnowCait <SnowCait@users.noreply.github.com>
Date: Sun, 22 Oct 2023 21:30:16 +0900
Subject: [PATCH 5/5] Logo layout

---
 web/src/routes/SplashScreen.svelte | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/routes/SplashScreen.svelte b/web/src/routes/SplashScreen.svelte
index 53db1e8fe..42263e425 100644
--- a/web/src/routes/SplashScreen.svelte
+++ b/web/src/routes/SplashScreen.svelte
@@ -4,17 +4,18 @@
 
 <style>
 	:global(html, body) {
-		height: 100%;
+		width: 100vw;
+		height: 100vh;
 	}
 
 	main {
-		height: 100%;
+		height: 100vh;
 		display: flex;
 		justify-content: center;
 	}
 
 	img {
-		width: 100%;
+		width: 90vw;
 		max-width: 360px;
 	}
 </style>