feat: epic 7 (#58)

src/lib/components/icons/collaborate.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { IconProps } from '$lib/types'
+
+	type $$Props = IconProps
+
+	let cls: string | undefined = undefined
+	export { cls as class }
+	export let size = 20
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size} class={cls}>
+	<path d="M6,21V20H4v1a7,7,0,0,0,7,7h3V26H11A5,5,0,0,1,6,21Z" />
+	<path d="M24,11v1h2V11a7,7,0,0,0-7-7H16V6h3A5,5,0,0,1,24,11Z" />
+	<path d="M11,11H5a3,3,0,0,0-3,3v2H4V14a1,1,0,0,1,1-1h6a1,1,0,0,1,1,1v2h2V14A3,3,0,0,0,11,11Z" />
+	<path d="M8,10A4,4,0,1,0,4,6,4,4,0,0,0,8,10ZM8,4A2,2,0,1,1,6,6,2,2,0,0,1,8,4Z" />
+	<path d="M27,25H21a3,3,0,0,0-3,3v2h2V28a1,1,0,0,1,1-1h6a1,1,0,0,1,1,1v2h2V28A3,3,0,0,0,27,25Z" />
+	<path d="M20,20a4,4,0,1,0,4-4A4,4,0,0,0,20,20Zm6,0a2,2,0,1,1-2-2A2,2,0,0,1,26,20Z" />
+</svg>

src/lib/components/icons/send-alt-filled.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { IconProps } from '$lib/types'
+
+	type $$Props = IconProps
+
+	let cls: string | undefined = undefined
+	export { cls as class }
+	export let size = 20
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size} class={cls}>
+	<path
+		d="M27.71,4.29a1,1,0,0,0-1.05-.23l-22,8a1,1,0,0,0,0,1.87l8.59,3.43L19.59,11,21,12.41l-6.37,6.37,3.44,8.59A1,1,0,0,0,19,28h0a1,1,0,0,0,.92-.66l8-22A1,1,0,0,0,27.71,4.29Z"
+	/>
+</svg>

src/lib/stores/post.ts

@@ -18,7 +18,7 @@ function createPostStore(): PostStore {
 	return {
 		...store,
 		add: (post: Post) => {
-			store.update((posts) => [...posts, post])
+			store.update((posts) => [post, ...posts])
 		},
 		reset: () => {
 			store.set([])

src/lib/temp/index.svelte

@@ -110,7 +110,7 @@
 			user: {
 				name: 'CoyoteRide',
 				avatar: image1,
-				address: "We should forgive each other for stupid things we've said in the past.",
+				address: '0x2d37a46fad14c4fcaba66660da6a5d99af88bf71',
 			},
 		},
 	]

src/routes/+page.svelte

@@ -26,7 +26,7 @@
 				on:click={() => goto('/post/new')}
 			/>
 		</div>
-	{:else if $profile.key === false}
+	{:else if $profile.key === true}
 		<div>
 			<Button
 				variant="primary"

src/routes/post/new/+page.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import Avatar from '$lib/components/avatar.svelte'
+	import Button from '$lib/components/button.svelte'
+	import Close from '$lib/components/icons/close.svelte'
+	import SendAltFilled from '$lib/components/icons/send-alt-filled.svelte'
+	import InputString from '$lib/components/input-string.svelte'
+	import { profile } from '$lib/stores/profile'
+	import { posts } from '$lib/stores/post'
+	import { goto } from '$app/navigation'
+	import Collaborate from '$lib/components/icons/collaborate.svelte'
+
+	let postText = ''
+
+	function submit() {
+		if (!$profile.active) return
+
+		posts.add({
+			timestamp: Date.now(),
+			text: postText,
+			user: $profile.active,
+		})
+		goto('/')
+	}
+</script>
+
+<div>
+	<div>Create post</div>
+	<div>
+		<Button variant="secondary" label="Cancel" icon={Close} on:click={() => history.back()} />
+		<Button variant="primary" label="Post" icon={SendAltFilled} on:click={submit} />
+	</div>
+</div>
+
+<div>
+	<Avatar src={$profile.active?.avatar} on:click={() => goto('/profile')} />
+	<div>{$profile.active?.name}</div>
+	<div>{$profile.active?.address}</div>
+	<Button variant="secondary" icon={Collaborate} on:click={() => goto('/profile')} />
+</div>
+
+<InputString bind:value={postText} placeholder="Write here..." />
+
+<style lang="scss">
+</style>

src/routes/profile/+page.svelte

@@ -36,7 +36,6 @@
 			label="Generate new keypair"
 			on:click={() => {
 				$profile.key = true
-				goto('profile/new')
 			}}
 		/>
 		<span