move invoices, combine profile and dashboard

5 files changed, 23 insertions, 4 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 83571e62..29e96ce1 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -34,7 +34,7 @@
 </script>
 
 <header
-	class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative bg-cover"
+	class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative bg-cover mb-20"
 	style:background-image={bg}
 >
 	<nav class="flex justify-end items-center space-x-4 p-5">
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
new file mode 100644
index 00000000..5d72bd45
--- /dev/null
+++ b/src/components/Balance.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { f, s, sat, sats } from '$lib/utils';
+	import { animatedRate } from '$lib/store';
+	import { t } from '$lib/translations';
+
+	export let user;
+</script>
+
+<div class="space-y-2">
+	<div class="text-5xl font-bold tabular-nums">
+		{$animatedRate
+			? f((user.balance * $animatedRate) / sats, user.currency)
+			: $t('user.dashboard.fetchingRate')}
+	</div>
+
+	<div class="text-secondary text-2xl">
+		⚡️{s(user.balance)}
+	</div>
+</div>
diff --git a/src/components/Invoice.svelte b/src/components/Invoice.svelte
index a8d9cfc6..b0cd58a2 100644
--- a/src/components/Invoice.svelte
+++ b/src/components/Invoice.svelte
@@ -21,7 +21,7 @@
 				</div>
 			</div>
 			<div class="mx-auto my-auto flex gap-2">
-				<a href={`/invoice/${$invoice.id}/tip`}>
+				<a href={`/${invoice.user.username}/invoice/${$invoice.id}/tip`}>
 					<button class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-32">
 						{$t('payments.pay')}
 					</button>
diff --git a/src/components/Toggle.svelte b/src/components/Toggle.svelte
index 7f3db2f5..3516e48b 100644
--- a/src/components/Toggle.svelte
+++ b/src/components/Toggle.svelte
@@ -1,11 +1,10 @@
 <script>
 	export let id;
-	export let checked;
 	export let value;
 </script>
 
 <label for={id} class="inline-flex relative items-center mr-5 cursor-pointer">
-	<input type="checkbox" {value} {checked} {id} class="sr-only peer" />
+	<input type="checkbox" bind:checked={value} {id} name={id} class="sr-only peer" />
 	<div
 		class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-gray-600"
 	/>
diff --git a/src/components/index.js b/src/components/index.js
index ea44c7d9..18a821ff 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
+export { default as Balance } from './Balance.svelte';
 export { default as Lnurlp } from './Lnurlp.svelte';
 export { default as Lnurlw } from './Lnurlw.svelte';
 export { default as Event } from './Event.svelte';