split todo backend and frontend

src_old/components/Header.svelte

@@ -0,0 +1,49 @@
+<script>
+	import './header.css';
+	import Button from './Button.svelte';
+	import Image from '../../src/lib/image/Image.svelte';
+	import { hasSession } from '../utils/stores.js';
+	import { onMount } from 'svelte';
+
+	import { createEventDispatcher } from 'svelte';
+
+	let user = null;
+	onMount(async () => {
+		user = hasSession();
+	});
+
+	const dispatch = createEventDispatcher();
+
+	let avatarUrl = '';
+
+	function onLogin(event) {
+		dispatch('login', event);
+	}
+	function onLogout(event) {
+		dispatch('logout', event);
+	}
+
+	function redirect(url) {
+		return () => {
+			window.location.pathname = url;
+		};
+	}
+</script>
+
+<header>
+	<div class="wrapper">
+		<div>
+			<Image src="./clipboard.svg" on:click={redirect('/')} />
+			<h1>Todo</h1>
+		</div>
+		<div>
+			{#if user}
+				<Image src={avatarUrl} alt="user profile picture" on:click={redirect('/settings')} />
+				<Button size="small" on:click={onLogout} label="Log out" />
+			{/if}
+			{#if !user}
+				<Button size="small" on:click={onLogin} label="Log in" />
+			{/if}
+		</div>
+	</div>
+</header>

src_old/components/header.css

@@ -0,0 +1,26 @@
+.wrapper {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+h1 {
+  font-weight: 900;
+  font-size: 20px;
+  line-height: 1;
+  margin: 6px 0 6px 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+button + button {
+  margin-left: 10px;
+}