use div for message input

11 files changed, 27 insertions, 24 deletions

diff --git a/src/app.css b/src/app.css
index 12fad732..3a722fb1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -35,7 +35,6 @@ button.primary {
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	background: transparent;
-	background-image: url('/icons/down.svg');
 	background-repeat: no-repeat;
 	background-position-x: 95%;
 	background-position-y: 1em;
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 6eb2a850..133930b1 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -4,7 +4,6 @@
 	import { Icon } from '$comp';
 	import { t } from '$lib/translations';
 	import { sign, send } from '$lib/nostr';
-	import { v4 } from 'uuid';
 
 	export let data;
 	let events, user, subject, src, text;
diff --git a/src/routes/(app)/[username]/dashboard/+page.svelte b/src/routes/(app)/[username]/dashboard/+page.svelte
index 499034e6..d8761ea9 100644
--- a/src/routes/(app)/[username]/dashboard/+page.svelte
+++ b/src/routes/(app)/[username]/dashboard/+page.svelte
@@ -7,7 +7,6 @@
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
 	import { events } from '$lib/store';
-	import { v4 } from 'uuid';
 
 	export let data;
 	$: ({ invoices, requests } = data);
diff --git a/src/routes/(app)/[username]/messages/+page.svelte b/src/routes/(app)/[username]/messages/+page.svelte
index 5de18c66..7a10d605 100644
--- a/src/routes/(app)/[username]/messages/+page.svelte
+++ b/src/routes/(app)/[username]/messages/+page.svelte
@@ -2,7 +2,7 @@
 	import { cubicInOut } from 'svelte/easing';
 	import { browser } from '$app/environment';
 	import { t } from '$lib/translations';
-	import { format, parseISO } from 'date-fns';
+	import { format } from 'date-fns';
 	import { scale, fade, fly } from 'svelte/transition';
 	import { enhance } from '$app/forms';
 	import { Avatar, Icon } from '$comp';
@@ -68,7 +68,6 @@
 		event.message = message;
 
 		message = '';
-		input.focus();
 
 		event.author = user;
 		event.recipient = subject;
@@ -92,9 +91,16 @@
 		message = '';
 		submitting = false;
 	};
+
+	let keydown = (e) => {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			submit();
+		}
+	};
 </script>
 
-<div class="container max-w-xl mx-auto px-4">
+<div class="container max-w-xl mx-auto px-4 space-y-5">
 	<div
 		class="h-[50vh] max-h-[50vh] overflow-y-scroll scrollbar-thin scrollbar-thumb-[#F2F6FC] scrollbar-track-white pr-8"
 		bind:this={pane}
@@ -133,22 +139,24 @@
 		{/each}
 	</div>
 
-	<form method="POST" class="space-y-5 relative" on:submit|preventDefault={submit}>
+	<form
+		method="POST"
+		class="w-full border rounded-xl outline-none gap-4 flex p-0 pr-2"
+		on:submit|preventDefault={submit}
+	>
 		<input type="hidden" name="requester_id" value={user.id} />
 		<input type="hidden" name="recipient" value={subject.username} />
 
-		<button type="submit" class="absolute right-2 bottom-2">
-			<Icon icon="send" style="w-10" />
-		</button>
-
-		<input
+		<div
 			use:focus
-			name="message"
-			placeholder={$t('payments.sendMessage')}
-			class="w-full p-4 border rounded-xl outline-none"
-			bind:value={message}
-			bind:this={input}
+			contenteditable
+			class="grow break-all py-4 outline-none mt-0 pl-4"
+			bind:innerHTML={message}
+			on:keydown={keydown}
 		/>
+		<button type="submit" class="my-auto shrink-0">
+			<Icon icon="send" style="w-8" />
+		</button>
 	</form>
 </div>
 
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
index aacba81e..a502f8c3 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { Avatar, Icon } from '$comp';
 	import { onMount } from 'svelte';
-	import { format, parseISO } from 'date-fns';
+	import { format } from 'date-fns';
 	import { newPayment, payments } from '$lib/store';
 	import { t } from '$lib/translations';
 	import { get, f, s, sat, sats } from '$lib/utils';
diff --git a/src/routes/(app)/launch/thanks/[asset]/+page.server.js b/src/routes/(app)/launch/thanks/[asset]/+page.server.js
deleted file mode 100644
index e9e01376..00000000
--- a/src/routes/(app)/launch/thanks/[asset]/+page.server.js
+++ /dev/null
@@ -1 +0,0 @@
-// export const load = ({ parent }) => parent();
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index 5f37cad5..3abc5a1a 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -7,7 +7,6 @@
 	import { t } from '$lib/translations';
 	import { AppHeader, Avatar, Icon, Spinner } from '$comp';
 	import { back, fail } from '$lib/utils';
-	import { format, parseISO } from 'date-fns';
 
 	export let data;
 	export let form;
diff --git a/src/routes/(app)/send/invoice/[id]/+page.server.js b/src/routes/(app)/send/invoice/[id]/+page.server.js
index dc0d3a3d..3db03123 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.server.js
+++ b/src/routes/(app)/send/invoice/[id]/+page.server.js
@@ -1,5 +1,5 @@
 import { error, fail, redirect } from '@sveltejs/kit';
-import { fd, btc as asset, auth, get, post } from '$lib/utils';
+import { fd, auth, get, post } from '$lib/utils';
 
 export async function load({ params: { id }, parent }) {
 	let { user } = await parent();
diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.server.js b/src/routes/(app)/send/lightning/[payreq]/+page.server.js
index 02511a8f..94231376 100644
--- a/src/routes/(app)/send/lightning/[payreq]/+page.server.js
+++ b/src/routes/(app)/send/lightning/[payreq]/+page.server.js
@@ -1,5 +1,5 @@
 import { fail, redirect } from '@sveltejs/kit';
-import { fd, btc as asset, auth, post } from '$lib/utils';
+import { fd, auth, post } from '$lib/utils';
 
 export async function load({ params }) {
 	return post('/parse', params);
diff --git a/src/routes/(app)/send/user/[username]/[...amount]/+page.server.js b/src/routes/(app)/send/user/[username]/[...amount]/+page.server.js
index ad0219e0..18eda839 100644
--- a/src/routes/(app)/send/user/[username]/[...amount]/+page.server.js
+++ b/src/routes/(app)/send/user/[username]/[...amount]/+page.server.js
@@ -1,5 +1,5 @@
 import { error, fail, redirect } from '@sveltejs/kit';
-import { fd, btc as asset, auth, get, post } from '$lib/utils';
+import { fd, auth, get, post } from '$lib/utils';
 
 export async function load({ params, parent }) {
 	let { user } = await parent();
diff --git a/src/routes/(static)/bounties/+page.svelte b/src/routes/(static)/bounties/+page.svelte
index d53a8edc..e3670e78 100644
--- a/src/routes/(static)/bounties/+page.svelte
+++ b/src/routes/(static)/bounties/+page.svelte
@@ -54,7 +54,7 @@
 	<p>
 		<b>⚡️750,000</b> will be awarded once the merchant has accepted bitcoin for 6 months. We'll be
 		sending
-		<a href="https://btcmap.org/leaderboard" class="text-black hover:underline" target="_blank"
+		<a href="https://btcmap.org/leaderboard" class="text-black hover:underline" target="_blank" rel="noreferrer"
 			>shadowy supertaggers</a
 		> to check up on them periodically.
 	</p>