profile tweaks

7 files changed, 98 insertions, 61 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 32daca68..a30b6f38 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -6,9 +6,9 @@
 	export let data;
 	let events, user, subject, src, text;
 	$: ({ events, user, subject, src, text } = data);
-	$: ({ username: n } = subject);
+	$: ({ username: n, display } = subject);
 
-	$: username = n.length > 60 ? n.substr(0, 6) : n;
+	$: 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]);
@@ -44,15 +44,21 @@
 <div class="container mx-auto w-full px-4 mb-4 flex flex-wrap md:flex-nowrap">
 	<div class="hidden lg:block w-[240px] md:mr-10" />
 	<div class="w-[240px] lg:absolute pt-20 space-y-5 left-20 mx-auto md:mr-10">
-		<h1 class="text-3xl font-bold text-center mx-auto lg:text-left">{username}</h1>
+		<h1 class="text-3xl font-bold text-center mx-auto lg:text-left">{display || username}</h1>
 
 		<div class="text-secondary mx-auto text-center lg:text-left lg:mx-0">
 			{subject.address && subject.address !== 'null' ? subject.address : ''}
 		</div>
 
 		<div class="flex justify-around">
-			<a href={`/${subject.pubkey}/follows`}><b>{subject.follows.length}</b> Following</a>
-			<a href={`/${subject.pubkey}/followers`}><b>{subject.followers.length}</b> Followers</a>
+			<a href={`/${subject.pubkey}/follows`}
+				><b>{subject.follows.length}</b>
+				<span class="text-secondary">{$t('user.following')}</span></a
+			>
+			<a href={`/${subject.pubkey}/followers`}
+				><b>{subject.followers.length}</b>
+				<span class="text-secondary">{$t('user.followers')}</span></a
+			>
 		</div>
 
 		<div class="flex flex-wrap gap-2 w-full">
@@ -88,7 +94,7 @@
 						<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-1" />
-								<div>Message</div>
+								<div>{$t('user.message')}</div>
 							</div>
 						</button>
 					</a>
@@ -99,36 +105,25 @@
 					<a href={`/${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">
-								<div style="mr-1">⚡️</div>
-								<div>{$t('user.lightning')} {$t('user.invoice')}</div>
+								<Icon icon="send" style="mr-1" />
+								<div>{$t('user.pay')}</div>
 							</div>
 						</button>
 					</a>
 				</div>
 
-				<div class="w-full flex">
-					<a href={`/${subject.username}/receive/bitcoin`} 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">
-								<img src="/images/bitcoin.svg" class="w-5 my-auto mr-1" />
-								<div>{$t('user.bitcoin')} {$t('user.invoice')}</div>
-							</div>
-						</button>
-					</a>
-				</div>
-
-				{#if user?.username !== subject.username}
-					<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="support" style="mr-1" />
-									<div>{$t('transactions.requestAnInvoice')}</div>
-								</div>
-							</button>
-						</a>
-					</div>
-				{/if}
+				<!-- {#if user?.username !== subject.username} -->
+				<!-- 	<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="support" style="mr-1" /> -->
+				<!-- 					<div>{$t('transactions.requestAnInvoice')}</div> -->
+				<!-- 				</div> -->
+				<!-- 			</button> -->
+				<!-- 		</a> -->
+				<!-- 	</div> -->
+				<!-- {/if} -->
 			{/if}
 		</div>
 	</div>
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index f23a1753..f9ded033 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -6,4 +6,24 @@
 	let { events, subject, user } = data;
 </script>
 
-<Feed {events} user={subject?.username === user?.username && user} />
+<!-- <div class="font-bold flex justify-around items-center border-b pb-3 text-secondary mt-20"> -->
+<!-- 	<a href={`/${user.username}`}> -->
+<!-- 		<button class="hover:opacity-80 uppercase" class:text-black={true}> -->
+<!-- 			{$t(`user.notes`)} -->
+<!-- 		</button> -->
+<!-- 	</a> -->
+<!-- 	<a href={`/${user.username}`}> -->
+<!-- 		<button class="hover:opacity-80 uppercase"> -->
+<!-- 			{$t(`user.feed`)} -->
+<!-- 		</button> -->
+<!-- 	</a> -->
+<!-- 	<a href={`/${user.username}`}> -->
+<!-- 		<button class="hover:opacity-80 uppercase"> -->
+<!-- 			{$t(`user.messages`)} -->
+<!-- 		</button> -->
+<!-- 	</a> -->
+<!-- </div> -->
+
+<div class="mt-20">
+	<Feed {events} user={subject?.username === user?.username && user} />
+</div>
diff --git a/src/routes/(app)/[username]/(profile)/follows/+page.svelte b/src/routes/(app)/[username]/(profile)/follows/+page.svelte
index a9b65483..97269f45 100644
--- a/src/routes/(app)/[username]/(profile)/follows/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/follows/+page.svelte
@@ -13,7 +13,7 @@
 <svelte:window bind:innerWidth={w} />
 
 <div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
-	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">Follows</h1>
+	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">Following</h1>
 
 	{#if browser}
 		{#if follows.length}
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
index 6b9fb2c6..77e7ab73 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
@@ -53,21 +53,25 @@
 			$bannerUpload = { file, type, progress };
 		}
 	};
+
+	if (!user.display) user.display = user.username;
 </script>
 
-<!-- <div> -->
-<!-- 	<label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label> -->
-<!-- 	<input type="text" name="username" bind:value={user.username} /> -->
-<!-- </div> -->
+<div class="relative">
+	<div>
+		<label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label>
+		<input type="text" name="username" bind:value={user.username} />
+	</div>
+	<div
+		class="absolute right-[2px] top-[30px] text-gray-600 rounded-r-2xl p-4 h-[54px] my-auto border-l "
+	>
+		@coinos.io
+	</div>
+</div>
 
 <div>
-	<label for="address" class="font-bold mb-1 block">{$t('user.settings.about')}</label>
-	<textarea
-		type="text"
-		name="address"
-		bind:value={user.address}
-		placeholder={$t('user.settings.aboutPlaceholder')}
-	/>
+	<label for="display" class="font-bold mb-1 block">{$t('user.settings.displayName')}</label>
+	<input type="text" name="display" bind:value={user.display} />
 </div>
 
 <div>
@@ -182,3 +186,13 @@
 		<div class="text-red-600">Max file size 10MB</div>
 	{/if}
 </div>
+
+<div>
+	<label for="address" class="font-bold mb-1 block">{$t('user.settings.about')}</label>
+	<textarea
+		type="text"
+		name="address"
+		bind:value={user.address}
+		placeholder={$t('user.settings.aboutPlaceholder')}
+	/>
+</div>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
index bade7a99..e9fcc5ba 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Icon, LocaleSelector } from '$comp';
+	import { Icon, LocaleSelector, Toggle } from '$comp';
 	import { t } from '$lib/translations';
 	import { success, failure } from '$lib/utils';
 	import { page } from '$app/stores';
@@ -21,3 +21,13 @@
 		{/each}
 	</select>
 </div>
+
+<div>
+	<div class="flex justify-between items-center">
+		<span class="font-bold">{$t('user.settings.tipPrompt')}</span>
+		<Toggle id="sms-notify" />
+	</div>
+	<p class="text-secondary mt-1 w-9/12">
+		{$t('user.settings.tipPromptDescription')}
+	</p>
+</div>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
index 4d175025..cf969f1c 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
@@ -189,20 +189,6 @@
 </div>
 
 <div>
-	<label for="locktime" class="font-bold mb-1">{$t('user.settings.autoLock')}</label>
-	<p class="text-secondary mb-1">
-		{$t('user.settings.autoLockDescription')}
-	</p>
-	<select name="locktime" class="select-styles block py-3 w-full" value={parseInt(user.locktime)}>
-		<option value={5 * 60}>5 {$t('user.settings.minutes')}</option>
-		<option value={10 * 60}>10 {$t('user.settings.minutes')}</option>
-		<option value={30 * 60}>30 {$t('user.settings.minutes')}</option>
-		<option value={60 * 60}>1 {$t('user.settings.hour')}</option>
-		<option value={8 * 60 * 60}>8 {$t('user.settings.hours')}</option>
-	</select>
-</div>
-
-<div>
 	<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
 	<p class="text-secondary mb-4">
 		{$t('user.settings.twofaDescription')}
@@ -252,3 +238,17 @@
 		</button>
 	{/if}
 </div>
+
+<div>
+	<label for="locktime" class="font-bold mb-1">{$t('user.settings.autoLock')}</label>
+	<p class="text-secondary mb-1">
+		{$t('user.settings.autoLockDescription')}
+	</p>
+	<select name="locktime" class="select-styles block py-3 w-full" value={parseInt(user.locktime)}>
+		<option value={5 * 60}>5 {$t('user.settings.minutes')}</option>
+		<option value={10 * 60}>10 {$t('user.settings.minutes')}</option>
+		<option value={30 * 60}>30 {$t('user.settings.minutes')}</option>
+		<option value={60 * 60}>1 {$t('user.settings.hour')}</option>
+		<option value={8 * 60 * 60}>8 {$t('user.settings.hours')}</option>
+	</select>
+</div>
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 222cbb53..e99d6747 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -79,8 +79,6 @@
 
 <div class="container mx-auto max-w-lg px-4 space-y-2 sm:space-y-5">
 	<div>
-		<h1 class="text-secondary text-center text-xl">{$t('transactions.pleasePay')}</h1>
-
 		<div class="flex w-full">
 			<div class="mx-auto">
 				<a href="/{username}" class="text-black font-semibold hover:opacity-80 mx-auto">