experimenting

8 files changed, 72 insertions, 57 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 02181c1b..ec37867c 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -4,6 +4,7 @@
 	import { Icon } from '$comp';
 	import { t } from '$lib/translations';
 	import { sign, send } from '$lib/nostr';
+	import { page } from '$app/stores';
 
 	export let data;
 	let events, user, subject, src, text;
@@ -59,12 +60,23 @@
 			t++;
 		}, 10);
 	};
+
+	$: paymentsTab = $page.url.pathname.includes('payments');
+	$: messagesTab = $page.url.pathname.includes('messages');
 </script>
 
 <div class="container mx-auto w-full px-4 flex flex-wrap lg:flex-nowrap">
 	<div class="hidden lg:block w-[240px] lg:mr-10" />
 	<div class="w-[240px] lg:absolute space-y-3 left-20 mx-auto lg:mr-10 mb-10">
-		<h1 class="text-3xl font-bold text-center mx-auto">{display || username}</h1>
+		<a href={`/${subject.username}/address`}>
+			<div>
+				<h1 class="text-3xl font-bold text-center mx-auto">{display || username}</h1>
+				<div class="text-center">
+					<div class="my-auto ml-1">{username}@coinos.io</div>
+				</div>
+			</div>
+		</a>
+
 		<div class="text-secondary mx-auto text-center lg:text-left lg:mx-0">
 			{subject.address && subject.address !== 'null' ? subject.address : ''}
 		</div>
@@ -80,15 +92,6 @@
 			>
 		</div>
 
-		<div class="flex flex-wrap justify-center">
-			<a href={`/${subject.username}/address`}>
-				<button class="justify-center font-bold flex rounded-full py-3 px-5 hover:opacity-80">
-					<div>⚡️</div>
-					<div class="my-auto ml-1">{username}@coinos.io</div>
-				</button>
-			</a>
-		</div>
-
 		<div class="flex flex-wrap gap-2 w-full">
 			{#if user && user.username !== subject.username && pubkey}
 				{#if following}
@@ -120,6 +123,41 @@
 
 	<div class="w-full">
 		<div class="mx-auto space-y-5 lg:max-w-lg xl:max-w-2xl">
+			<div class="font-bold flex justify-center items-center border-b pb-3 text-secondary">
+				<a href={`/${username}/payments`} class="w-full">
+					<div class="relative">
+						<button class="mx-auto flex hover:opacity-80" class:text-black={paymentsTab}>
+							Feed
+						</button>
+						<div
+							class="absolute w-full border-b-4 border-black -bottom-3"
+							class:hidden={!paymentsTab}
+						/>
+					</div>
+				</a>
+				<a href={`/${username}/payments`} class="w-full">
+					<div class="relative">
+						<button class="mx-auto flex hover:opacity-80" class:text-black={paymentsTab}>
+							Payments
+						</button>
+						<div
+							class="absolute w-full border-b-4 border-black -bottom-3"
+							class:hidden={!paymentsTab}
+						/>
+					</div>
+				</a>
+				<a href={`/${username}/messages`} class="w-full">
+					<div class="relative">
+						<button class="mx-auto flex hover:opacity-80 relative" class:text-black={messagesTab}>
+							Messages
+						</button>
+						<div
+							class="absolute w-full border-b-4 border-black -bottom-3"
+							class:hidden={!messagesTab}
+						/>
+					</div>
+				</a>
+			</div>
 			<slot />
 		</div>
 	</div>
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 570029dd..a0be8a0d 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -11,7 +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 { pubkey, npub, username } = subject;
 
 	let keys = new Set();
 	let latest = [];
@@ -56,7 +56,7 @@
 <div class="space-y-5">
 	{#if user?.id === subject.id}
 		<div>
-			<div class="flex justify-center lg:justify-start">
+			<div class="flex justify-center lg:justify-start my-10">
 				<Balance {user} />
 			</div>
 			{#if !user.balance}
@@ -98,23 +98,6 @@
 				</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}
@@ -186,26 +169,6 @@
 		</div>
 	{/if}
 
-	{#if latest.length && user?.id === subject.id}
-		<div class="relative">
-			{#each latest as { content, pubkey, author, recipient }}
-				{@const user = author.id === user.id ? recipient : author}
-				<a href={`/${user.username}/messages`}>
-					<div class="flex hover:bg-gray-100 p-4 rounded-2xl">
-						<div class="my-auto">
-							<Avatar {user} size={'20'} disabled={true} />
-						</div>
-						<div class="my-auto truncate">
-							<div class="my-auto ml-1 text-lg font-bold">{user.username}</div>
-							<div class="my-auto ml-1 text-secondary text-lg truncate">
-								{content}
-							</div>
-						</div>
-					</div>
-				</a>
-			{/each}
-		</div>
-	{/if}
 </div>
 
 <style>
diff --git a/src/routes/(app)/[username]/messages/+page.server.js b/src/routes/(app)/[username]/(profile)/messages/+page.server.js
index 7b651389..7b651389 100644
--- a/src/routes/(app)/[username]/messages/+page.server.js
+++ b/src/routes/(app)/[username]/(profile)/messages/+page.server.js
diff --git a/src/routes/(app)/[username]/messages/+page.svelte b/src/routes/(app)/[username]/(profile)/messages/+page.svelte
index 7a10d605..9ab95433 100644
--- a/src/routes/(app)/[username]/messages/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/messages/+page.svelte
@@ -30,6 +30,7 @@
 		};
 	}
 
+	let latest = [];
 	let { messages, subject, user } = data;
 	let input, pane;
 
@@ -101,6 +102,26 @@
 </script>
 
 <div class="container max-w-xl mx-auto px-4 space-y-5">
+	{#if latest.length && user?.id === subject.id}
+		<div class="relative">
+			{#each latest as { content, pubkey, author, recipient }}
+				{@const user = author.id === user.id ? recipient : author}
+				<a href={`/${user.username}/messages`}>
+					<div class="flex hover:bg-gray-100 p-4 rounded-2xl">
+						<div class="my-auto">
+							<Avatar {user} size={'20'} disabled={true} />
+						</div>
+						<div class="my-auto truncate">
+							<div class="my-auto ml-1 text-lg font-bold">{user.username}</div>
+							<div class="my-auto ml-1 text-secondary text-lg truncate">
+								{content}
+							</div>
+						</div>
+					</div>
+				</a>
+			{/each}
+		</div>
+	{/if}
 	<div
 		class="h-[50vh] max-h-[50vh] overflow-y-scroll scrollbar-thin scrollbar-thumb-[#F2F6FC] scrollbar-track-white pr-8"
 		bind:this={pane}
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.server.js b/src/routes/(app)/[username]/(profile)/payments/[...page]/+page.server.js
index adc6dac8..adc6dac8 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.server.js
+++ b/src/routes/(app)/[username]/(profile)/payments/[...page]/+page.server.js
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/(profile)/payments/[...page]/+page.svelte
index a502f8c3..95a3f99c 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/payments/[...page]/+page.svelte
@@ -104,10 +104,6 @@
 </script>
 
 <div class="mt-24 mb-20">
-	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
-		{$t('payments.header')}
-	</h1>
-
 	<div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
 		<div class="flex text-md text-secondary relative">
 			<div class="mx-auto flex justify-center w-full gap-1">
diff --git a/src/routes/(app)/[username]/payments/[...page]/+server.js b/src/routes/(app)/[username]/(profile)/payments/[...page]/+server.js
index c7c5222d..c7c5222d 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+server.js
+++ b/src/routes/(app)/[username]/(profile)/payments/[...page]/+server.js
diff --git a/src/routes/(app)/[username]/address/+page.svelte b/src/routes/(app)/[username]/address/+page.svelte
index fa4d8303..39a5254c 100644
--- a/src/routes/(app)/[username]/address/+page.svelte
+++ b/src/routes/(app)/[username]/address/+page.svelte
@@ -12,7 +12,6 @@
 
 <div class="space-y-8 container px-4 mx-auto my-20">
 	<p class="text-secondary text-lg text-center">
-		This
 		<a class="font-bold" href="https://lightningaddress.com/" target="_blank" rel="noreferrer">
 			⚡️ lightning address
 		</a>
@@ -27,12 +26,10 @@
 			nostr
       identifier
 		</a>
-     
-      can receive both money and messages
 	</p>
 	<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} />
+      <img {src} class="w-[300px] h-[300px] mx-auto cursor-pointer z-10 mt-[20px]" bind:this={qr} alt={text} on:click={() => copy(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"