layout updates

5 files changed, 87 insertions, 68 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 51c70851..6b95725b 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -56,23 +56,13 @@
 					><Icon icon="numpad" style="mx-auto w-6 md:w-8" />
 				</button>
 			</a>
-			<a href={`/${user.username}/payments`}>
+			<a href={`/scan`}>
 				<button
 					class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
-						.url.pathname === `/${user.username}/payments`
+						.url.pathname === `/${user.username}/scan`
 						? 'opacity-100'
 						: 'opacity-70 hover:opacity-80'} relative"
-					><Icon icon="clock" style="mx-auto w-6 md:w-8" />
-					{#if $newPayment}
-						<span class="absolute top-0 right-0">
-							<span class="flex h-3 w-3">
-								<span
-									class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#F7931A] opacity-75"
-								/>
-								<span class="relative inline-flex rounded-full h-3 w-3 bg-[#F7931A]" />
-							</span>
-						</span>
-					{/if}
+					><Icon icon="scan" style="mx-auto w-6 md:w-8" />
 				</button>
 			</a>
 			<a href={`/send`}>
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 133930b1..cdf1dbf5 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { f, s, sats } from '$lib/utils';
+	import { f, s, copy, sats } from '$lib/utils';
 	import { animatedRate, selectedRate } from '$lib/store';
 	import { Icon } from '$comp';
 	import { t } from '$lib/translations';
@@ -8,18 +8,18 @@
 	export let data;
 	let events, user, subject, src, text;
 	$: ({ events, user, subject, src, text } = data);
-	$: ({ currency, username: n, display } = subject);
+	$: ({ currency, username: n, display, pubkey, npub } = subject);
 
 	$: username = n.length > 60 ? n.substr(0, 6) : display || n;
 
 	let follow = async () => {
-		user.follows.push(['p', subject.pubkey, 'wss://nostr.coinos.io', subject.username]);
+		user.follows.push(['p', pubkey, 'wss://nostr.coinos.io', subject.username]);
 		update();
 	};
 
 	let unfollow = async () => {
 		user.follows.splice(
-			user.follows.findIndex((t) => t[1] === subject.pubkey),
+			user.follows.findIndex((t) => t[1] === pubkey),
 			1
 		);
 		update();
@@ -40,7 +40,7 @@
 		user.follows = user.follows;
 	};
 
-	$: following = !!user?.follows.find((t) => t.includes(subject.pubkey));
+	$: following = !!user?.follows.find((t) => t.includes(pubkey));
 
 	let ease = (t) => (t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t);
 	let i;
@@ -71,18 +71,36 @@
 		</div>
 
 		<div class="flex justify-around">
-			<a href={`/${subject.pubkey}/follows`}
+			<a href={`/${pubkey}/follows`}
 				><b>{subject.follows.length}</b>
 				<span class="text-secondary">{$t('user.following')}</span></a
 			>
-			<a href={`/${subject.pubkey}/followers`}
+			<a href={`/${pubkey}/followers`}
 				><b>{subject.followers.length}</b>
 				<span class="text-secondary">{$t('user.followers')}</span></a
 			>
 		</div>
 
+		<div class="flex flex-wrap justify-center">
+			<a href={`/qr/${encodeURI(username + '@coinos.io')}`}>
+				<button class="justify-center font-bold flex rounded-full py-3 px-5 hover:opacity-80">
+					⚡️
+					<div class="my-auto ml-1">{username}@coinos.io</div>
+				</button>
+			</a>
+
+			<a href={`/qr/${encodeURI(npub)}`}>
+			<button
+				class="justify-center flex rounded-full py-3 px-5 hover:opacity-80"
+			>
+				<Icon icon="nostr" style="mr-1 w-6" />
+				<div class="font-bold my-auto">{npub.substr(0, 6)}...{npub.substr(-6)}</div>
+			</button>
+      </a>
+		</div>
+
 		<div class="flex flex-wrap gap-2 w-full">
-			{#if user && user.username !== subject.username && subject.pubkey}
+			{#if user && user.username !== subject.username && pubkey}
 				{#if following}
 					<div class="w-full flex">
 						<button
@@ -90,7 +108,6 @@
 							on:click={unfollow}
 						>
 							<div class="mx-auto flex">
-								<Icon icon={'profile'} style="my-auto h-6 mr-2 invert" />
 								<div class="my-auto mt-1">{$t('user.following')}</div>
 							</div>
 						</button>
@@ -102,49 +119,11 @@
 							on:click={follow}
 						>
 							<div class="mx-auto flex">
-								<Icon icon={'profile'} style="my-auto h-6 mr-2" />
 								<div class="my-auto mt-1">{$t('user.follow')}</div>
 							</div>
 						</button>
 					</div>
 				{/if}
-
-				<div class="w-full flex">
-					<a href={`/${subject.username}/messages`} class="mx-auto">
-						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
-							<div class="mx-auto flex">
-								<Icon icon="support" style="mr-2 my-auto" />
-								<div class="mt-1 my-auto">{$t('user.message')}</div>
-							</div>
-						</button>
-					</a>
-				</div>
-
-				<div class="w-full flex">
-					<a href={`/${subject.username}/request`} class="mx-auto">
-						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
-							<div class="mx-auto flex">
-								<Icon icon="numpad" style="mr-2 my-auto" />
-								<div class="mt-1 my-auto">{$t('payments.requestAnInvoice')}</div>
-							</div>
-						</button>
-					</a>
-				</div>
-			{/if}
-			{#if !subject.anon && subject.username !== user?.username}
-				<div class="w-full flex">
-					<a
-						href={user ? `/send/${subject.username}` : `/${subject.username}/receive`}
-						class="mx-auto"
-					>
-						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
-							<div class="mx-auto flex">
-								<Icon icon="send" style="mr-2" />
-								<div class="mt-1">{$t('user.pay')}</div>
-							</div>
-						</button>
-					</a>
-				</div>
 			{/if}
 		</div>
 	</div>
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 168556e4..4ef80356 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import { Icon, Avatar, Balance, Feed } from '$comp';
 	import { t } from '$lib/translations';
-	import { f, sat, sats } from '$lib/utils';
+	import { f, sat, copy, sats } from '$lib/utils';
 	import { sign, send, encrypt, decrypt } from '$lib/nostr';
 	import { event as e, password } from '$lib/store';
 	import { browser } from '$app/environment';
@@ -11,6 +11,7 @@
 	let { messages, notes, invoices, sent, received, subject, user } = data;
 	$: refresh(data);
 	let refresh = (d) => ({ messages, notes, invoices, sent, received, subject, user } = d);
+  let { pubkey, npub, username } = subject;
 
 	let keys = new Set();
 	let latest = [];
@@ -97,6 +98,23 @@
 				</div>
 			{/if}
 		</div>
+	{:else}
+		<div class="font-bold flex justify-around items-center border-b pb-3 text-secondary">
+			<a href={`/${username}/payments`}>
+        <button class="flex hover:opacity-80" class:text-black={false}>
+          <div>⚡️</div>
+            <div>Payments</div>
+        </button>
+			</a>
+			<a href={`/${username}/notes`}>
+        <button class="flex hover:opacity-80" class:text-black={true}>
+						<Icon icon="nostr" style="mr-1 w-6" />
+            <div>Notes</div>
+        </button>
+			</a>
+		</div>
+
+
 	{/if}
 
 	{#if invoices.length}
diff --git a/src/routes/(app)/qr/[text]/+page.svelte b/src/routes/(app)/qr/[text]/+page.svelte
index 555f919c..c3f29815 100644
--- a/src/routes/(app)/qr/[text]/+page.svelte
+++ b/src/routes/(app)/qr/[text]/+page.svelte
@@ -1,7 +1,43 @@
 <script>
-	import { Qr } from '$comp';
+	import { Icon, Qr } from '$comp';
+	import { back, copy } from '$lib/utils';
+
+	import { page } from '$app/stores';
 	export let data;
+
 	let { src } = data;
+
+	let qr;
+
+	let { text } = $page.params;
 </script>
 
-<Qr {src} />
+<div class="space-y-8 container px-4 mx-auto my-20">
+	<div class="relative flex">
+		<div class="flex mx-auto w-[360px] h-[360px]">
+			<img {src} class="w-[300px] h-[300px] mx-auto z-10 mt-[20px]" bind:this={qr} alt={text} />
+		</div>
+		<div
+			class="absolute m-auto left-0 right-0 w-[340px] h-[340px] rounded-full bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] z-0"
+		/>
+	</div>
+
+	<div class="w-full justify-center flex">
+		<button
+			class="text-left flex gap-2 rounded-full border py-3 px-5 hover:opacity-80"
+			on:click={() => copy(text)}
+		>
+			<div class="text-secondary break-all">{text}</div>
+			<Icon icon="copy" style="mr-1 my-auto" />
+		</button>
+	</div>
+
+	<div class="w-full justify-center flex">
+		<button
+			class="flex rounded-full border py-3 px-5 bg-black hover:opacity-80 font-semibold"
+			on:click={back}
+		>
+			<div class="text-white">Back</div>
+		</button>
+	</div>
+</div>
diff --git a/src/routes/(app)/scan/+page.svelte b/src/routes/(app)/scan/+page.svelte
index 8c5ea0a5..90d57fc3 100644
--- a/src/routes/(app)/scan/+page.svelte
+++ b/src/routes/(app)/scan/+page.svelte
@@ -17,11 +17,7 @@
 	onDestroy(() => scanner?.stop());
 </script>
 
-<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
-	<Icon icon="arrow-left" style="w-10" />
-</button>
-
-<div class="flex w-full mb-4 px-4">
+<div class="flex w-full mb-4 px-4 mt-20">
 	<div class="bg-black mx-auto rounded-3xl">
 		<video
 			bind:this={vid}