layout updates

6 files changed, 101 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}
diff --git a/static/icons/nostr.svg b/static/icons/nostr.svg
new file mode 100644
index 00000000..f5bba92d
--- /dev/null
+++ b/static/icons/nostr.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 875 875">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #a915ff;
+        stroke: #a915ff;
+        stroke-miterlimit: 10;
+        stroke-width: 6px;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="m684.72,485.57c.22,12.59-11.93,51.47-38.67,81.3-26.74,29.83-56.02,20.85-58.42,20.16s-3.09-4.46-7.89-3.77-9.6,6.17-18.86,7.2-17.49,1.71-26.06-1.37c-4.46.69-5.14.71-7.2,2.24s-17.83,10.79-21.6,11.47c0,7.2-1.37,44.57,0,55.89s3.77,25.71,7.54,36c3.77,10.29,2.74,10.63,7.54,9.94s13.37.34,15.77,4.11c2.4,3.77,1.37,6.51,5.49,8.23s60.69,17.14,99.43,19.2c26.74.69,42.86,2.74,52.12,19.54,1.37,7.89,7.54,13.03,11.31,14.06s8.23,2.06,12,5.83,1.03,8.23,5.49,11.66c4.46,3.43,14.74,8.57,25.37,13.71,10.63,5.14,15.09,13.37,15.77,16.11s1.71,10.97,1.71,10.97c0,0-8.91,0-10.97-2.06s-2.74-5.83-2.74-5.83c0,0-6.17,1.03-7.54,3.43s.69,2.74-7.89.69-11.66-3.77-18.17-8.57c-6.51-4.8-16.46-17.14-25.03-16.8,4.11,8.23,5.83,8.23,10.63,10.97s8.23,5.83,8.23,5.83l-7.2,4.46s-4.46,2.06-14.74-.69-11.66-4.46-12.69-10.63,0-9.26-2.74-14.4-4.11-15.77-22.29-21.26c-18.17-5.49-66.52-21.26-100.12-24.69s-22.63-2.74-28.11-1.37-15.77,4.46-26.4-1.37c-10.63-5.83-16.8-13.71-17.49-20.23s-1.71-10.97,0-19.2,3.43-19.89,1.71-26.74-14.06-55.89-19.89-64.12c-13.03,1.03-50.74-.69-50.74-.69,0,0-2.4-.69-17.49,5.83s-36.48,13.76-46.77,19.93-14.4,9.7-16.12,13.13c.12,3-1.23,7.72-2.79,9.06s-12.48,2.42-12.48,2.42c0,0-5.85,5.86-8.25,9.97-6.86,9.6-55.2,125.14-66.52,149.83-13.54,32.57-9.77,27.43-37.71,27.43s-8.06.3-8.06.3c0,0-12.34,5.88-16.8,5.88s-18.86-2.4-26.4,0-16.46,9.26-23.31,10.29-4.95-1.34-8.38-3.74c-4-.21-14.27-.12-14.27-.12,0,0,1.74-6.51,7.91-10.88,8.23-5.83,25.37-16.11,34.63-21.26s17.49-7.89,23.31-9.26,18.51-6.17,30.51-9.94,19.54-8.23,29.83-31.54c10.29-23.31,50.4-111.43,51.43-116.23.63-2.96,3.73-6.48,4.8-15.09.66-5.35-2.49-13.04,1.71-22.63,10.97-25.03,21.6-20.23,26.4-20.23s17.14.34,26.4-1.37,15.43-2.74,24.69-7.89,11.31-8.91,11.31-8.91l-19.89-3.43s-18.51.69-25.03-4.46-15.43-15.77-15.43-15.77l-7.54-7.2,1.03,8.57s-5.14-8.91-6.51-10.29-8.57-6.51-11.31-11.31-7.54-25.03-7.54-25.03l-6.17,13.03-1.71-18.86-5.14,7.2-2.74-16.11-4.8,8.23-3.43-14.4-5.83,4.46-2.4-10.29-5.83-3.43s-14.06-9.26-16.46-9.6-4.46,3.43-4.46,3.43l1.37,12-12.2-6.27-7-11.9s2.36,4.01-9.62,7.53c-20.55,0-21.89-2.28-24.93-3.94-1.31-6.56-5.57-10.11-5.57-10.11h-20.57l-.34-6.86-7.89,3.09.69-10.29h-14.06l1.03-11.31h-8.91s3.09-9.26,25.71-22.97,25.03-16.46,46.29-17.14c21.26-.69,32.91,2.74,46.29,8.23s38.74,13.71,43.89,17.49c11.31-9.94,28.46-19.89,34.29-19.89,1.03-2.4,6.19-12.33,17.96-17.6,35.31-15.81,108.13-34,131.53-35.54,31.2-2.06,7.89-1.37,39.09,2.06,31.2,3.43,54.17,7.54,69.6,12.69,12.58,4.19,25.03,9.6,34.29,2.06,4.33-1.81,11.81-1.34,17.83-5.14,30.69-25.09,34.72-32.35,43.63-41.95s20.14-24.91,22.54-45.14,4.46-58.29-10.63-88.12-28.8-45.26-34.63-69.26c-5.83-24-8.23-61.03-6.17-73.03,2.06-12,5.14-22.29,6.86-30.51s9.94-14.74,19.89-16.46c9.94-1.71,17.83,1.37,22.29,4.8,4.46,3.43,11.65,6.28,13.37,10.29.34,1.71-1.37,6.51,8.23,8.23,9.6,1.71,16.05,4.16,16.05,4.16,0,0,15.64,4.29,3.11,7.73-12.69,2.06-20.52-.71-24.29,1.69s-7.21,10.08-9.61,11.1-7.2.34-12,4.11-9.6,6.86-12.69,14.4-5.49,15.77-3.43,26.74,8.57,31.54,14.4,43.2c5.83,11.66,20.23,40.8,24.34,47.66s15.77,29.49,16.8,53.83,1.03,44.23,0,54.86-10.84,51.65-35.53,85.94c-8.16,14.14-23.21,31.9-24.67,35.03-1.45,3.13-3.02,4.88-1.61,7.65,4.62,9.05,12.87,22.13,14.71,29.22,2.29,6.64,6.99,16.13,7.22,28.72Z"/>
+</svg>
\ No newline at end of file