profile tweaks

11 files changed, 116 insertions, 66 deletions

diff --git a/src/components/Feed.svelte b/src/components/Feed.svelte
index 4869ab0c..d969f8dd 100644
--- a/src/components/Feed.svelte
+++ b/src/components/Feed.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { t } from '$lib/translations';
 	import { onMount } from 'svelte';
 	import { Avatar } from '$comp';
 	import { browser } from '$app/environment';
@@ -108,6 +109,8 @@
 			</div>
 		</VirtualScroll>
 	{:else}
-		<div>Nothing here yet</div>
+		<div class="flex w-full">
+			<div class="mx-auto text-secondary">{$t('user.noNotes')}</div>
+		</div>
 	{/if}
 {/if}
diff --git a/src/components/Toggle.svelte b/src/components/Toggle.svelte
index 85fd08d5..7f3db2f5 100644
--- a/src/components/Toggle.svelte
+++ b/src/components/Toggle.svelte
@@ -7,6 +7,6 @@
 <label for={id} class="inline-flex relative items-center mr-5 cursor-pointer">
 	<input type="checkbox" {value} {checked} {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-green-300 dark:peer-focus:ring-green-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-green-600"
+		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"
 	/>
 </label>
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 77ed93bd..2b425626 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -11,7 +11,7 @@ export function scroll(section) {
 
 const base = browser ? '' : PUBLIC_COINOS_URL;
 export const punk = (k) => {
-	return Math.floor((parseInt(k.substr(0, 2), 16) / 256) * 64) + 1 + '.webp';
+	return Math.floor((parseInt(k.slice(-2), 16) / 256) * 64) + 1 + '.webp';
 };
 
 export const g = (url, fetch, headers) =>
diff --git a/src/locales/en.json b/src/locales/en.json
index 9b24935e..5714adff 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -166,7 +166,14 @@
 		"unfollow": "Unfollow",
 		"following": "Following",
 		"follow": "Follow",
+		"followers": "Followers",
 		"remove": "Remove",
+		"noNotes": "No notes yet",
+		"message": "Message",
+		"messages": "Messages",
+		"feed": "Feed",
+		"notes": "Notes",
+		"pay": "Pay",
 		"scanToPayBTC": "Scan to pay with bitcoin",
 		"this": "This",
 		"lightningAddress": "lightning address",
@@ -204,7 +211,7 @@
 			"accountId": "Account Secret",
 			"header": "Settings",
 			"ACCOUNT": "ACCOUNT",
-			"POINT_OF_SALE": "POINT OF SALE",
+			"POINT_OF_SALE": "PREFERENCES",
 			"SECURITY": "SECURITY",
 			"locale": "Language",
 			"username": "Username",
@@ -217,6 +224,9 @@
 			"smsNotifications": "SMS Notifications",
 			"smsNotificationsDescription": "Coinos will send you text notifications when this is enabled.",
 			"theme": "Color Theme",
+			"tipPrompt": "Prompt for tips",
+			"tipPromptDescription": "Ask people if they want to add a tip before paying their invoices",
+			"displayName": "Display name",
 			"themeDescription": "Select from the default color themes.",
 			"localCurrency": "Currency",
 			"btcUnit": "Display bitcoin in:",
@@ -229,7 +239,7 @@
 			"securityPINDescription": "Set a security pin that will be used to unlock your settings and to send outgoing payments.",
 			"setPIN": "Set PIN",
 			"autoLock": "Auto-Lock Timer",
-			"autoLockDescription": "Your account will go into a secure mode automatically after a specified time:",
+			"autoLockDescription": "Your account will go into a secure mode, requiring you to re-enter your credentials after a specified time:",
 			"twofa": "2-Factor Authentication",
 			"twofaDescription": "Add an extra level of security to your device by enableing 2-factor authentication.",
 			"twofaSetup": "Set up 2FA",
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">