From cf9ccd673cbbf29d9c9d00c2d379382f0a9c06c0 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Tue, 27 Dec 2022 22:49:25 -0800
Subject: show follows and followers

---
 src/routes/(app)/+layout.svelte                    |   8 +-
 .../(app)/[username]/(profile)/+layout.server.js   |   6 +
 .../(app)/[username]/(profile)/+layout.svelte      | 130 +++++++++++++++++++++
 .../(app)/[username]/(profile)/+page.server.js     |  21 ++++
 src/routes/(app)/[username]/(profile)/+page.svelte |  18 +++
 .../[username]/(profile)/followers/+page.server.js |  10 ++
 .../[username]/(profile)/followers/+page.svelte    |  40 +++++++
 .../[username]/(profile)/follows/+page.server.js   |  11 ++
 .../[username]/(profile)/follows/+page.svelte      |  40 +++++++
 src/routes/(app)/[username]/+page.server.js        |  25 ----
 src/routes/(app)/[username]/+page.svelte           |  88 --------------
 .../[username]/settings/[...tab]/+page.svelte      |  25 +---
 12 files changed, 285 insertions(+), 137 deletions(-)
 create mode 100644 src/routes/(app)/[username]/(profile)/+layout.server.js
 create mode 100644 src/routes/(app)/[username]/(profile)/+layout.svelte
 create mode 100644 src/routes/(app)/[username]/(profile)/+page.server.js
 create mode 100644 src/routes/(app)/[username]/(profile)/+page.svelte
 create mode 100644 src/routes/(app)/[username]/(profile)/followers/+page.server.js
 create mode 100644 src/routes/(app)/[username]/(profile)/followers/+page.svelte
 create mode 100644 src/routes/(app)/[username]/(profile)/follows/+page.server.js
 create mode 100644 src/routes/(app)/[username]/(profile)/follows/+page.svelte
 delete mode 100644 src/routes/(app)/[username]/+page.server.js
 delete mode 100644 src/routes/(app)/[username]/+page.svelte

(limited to 'src/routes/(app)')

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 4cd08ab4..7178917a 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -2,11 +2,11 @@
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import { onDestroy, onMount } from 'svelte';
 	import { close, connect, send } from '$lib/socket';
-	import { last, selectedRate, invoice, rate, user, request } from '$lib/store';
+	import { last, selectedRate, invoice, rate, user, request, passwordPrompt } from '$lib/store';
 	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
 	import { goto } from '$app/navigation';
-	import { LoadingSplash, Invoice, Request } from '$comp';
+	import { LoadingSplash, Invoice, Password, Request } from '$comp';
 	import { warning, protectedRoutes } from '$lib/utils';
 	import { t, locale } from '$lib/translations';
 
@@ -58,6 +58,10 @@
 	onDestroy(() => browser && clearTimeout(timer));
 </script>
 
+{#if $passwordPrompt}
+	<Password {user} />
+{/if}
+
 <svelte:head>
 	{#if subject}
 		<title>coinos - {subject.username}</title>
diff --git a/src/routes/(app)/[username]/(profile)/+layout.server.js b/src/routes/(app)/[username]/(profile)/+layout.server.js
new file mode 100644
index 00000000..c97c7bdb
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/+layout.server.js
@@ -0,0 +1,6 @@
+export async function load({ depends, parent }) {
+	depends('app:user');
+	let { subject } = await parent();
+	console.log('SUBJ', subject);
+	return { subject };
+}
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
new file mode 100644
index 00000000..3fc01721
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -0,0 +1,130 @@
+<script>
+	import { Icon } from '$comp';
+	import { t } from '$lib/translations';
+	import { sign, send } from '$lib/nostr';
+
+	export let data;
+	let events, user, subject, src, text;
+	$: ({ events, user, subject, src, text } = data);
+	$: ({ username: n } = subject);
+
+	$: username = n.length > 60 ? n.substr(0, 6) : n;
+
+	let follow = async () => {
+		user.follows.push(['p', subject.pubkey, 'wss://nostr.coinos.io', subject.username]);
+		update();
+	};
+
+	let unfollow = async () => {
+		user.follows.splice(
+			user.follows.findIndex((t) => t[1] === subject.pubkey),
+			1
+		);
+		update();
+	};
+
+	let update = async () => {
+		let event = {
+			pubkey: user.pubkey,
+			created_at: Math.floor(Date.now() / 1000),
+			kind: 3,
+			content: '',
+			tags: user.follows
+		};
+
+		user.follows = user.follows;
+
+		await sign({ event, user });
+		await send(event);
+	};
+
+	$: following = user?.follows.find((t) => t.includes(subject.pubkey));
+</script>
+
+<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>
+
+		<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.username}/follows`}><b>{subject.follows.length}</b> Following</a>
+			<a href={`/${subject.username}/followers`}><b>{subject.followers.length}</b> Followers</a>
+		</div>
+
+		<div class="flex flex-wrap gap-2 w-full">
+			{#if user && user.username !== subject.username}
+				{#if following}
+					<div class="w-full flex">
+						<button
+							class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"
+							on:click={unfollow}
+						>
+							<div class="mx-auto flex">
+								<Icon icon={'profile'} style="my-auto" />
+								<div>{$t('user.unfollow')}</div>
+							</div>
+						</button>
+					</div>
+				{:else}
+					<div class="w-full flex">
+						<button
+							class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"
+							on:click={follow}
+						>
+							<div class="mx-auto flex">
+								<Icon icon={'profile'} style="my-auto" />
+								<div>{$t('user.follow')}</div>
+							</div>
+						</button>
+					</div>
+				{/if}
+			{/if}
+			{#if !subject.anon}
+				<div class="w-full flex">
+					<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>
+							</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}
+		</div>
+	</div>
+
+	<div class="w-full md:pt-12 lg:pt-0">
+		<div class="mx-auto space-y-5 mt-5 lg:max-w-lg xl:max-w-2xl">
+			<slot />
+		</div>
+	</div>
+</div>
diff --git a/src/routes/(app)/[username]/(profile)/+page.server.js b/src/routes/(app)/[username]/(profile)/+page.server.js
new file mode 100644
index 00000000..9c91efae
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/+page.server.js
@@ -0,0 +1,21 @@
+import { get } from '$lib/utils';
+
+export async function load({ params, parent, url }) {
+	let { subject } = await parent();
+	let { pubkey } = subject;
+	if (!pubkey) pubkey = params.username;
+
+	let events = [];
+
+	try {
+		events = await get(`/nostr/${pubkey}`);
+	} catch (e) {
+		console.log(`failed to fetch nostr events for ${pubkey}`, e);
+	}
+
+	events.map((e) => {
+		e.seen = e.created_at;
+	});
+
+	return { events };
+}
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
new file mode 100644
index 00000000..19687ed0
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { Feed } from '$comp';
+	import { t } from '$lib/translations';
+
+	export let data;
+	let { events, user } = data;
+</script>
+
+{#if events.length}
+	<Feed {events} {user} />
+{:else}
+	<div class="text-center text-2xl mt-20">
+		Nothing here yet. Post your first <a
+			href="https://github.com/nostr-protocol/nostr#nostr---notes-and-other-stuff-transmitted-by-relays"
+			class="underline">nostr</a
+		> note!
+	</div>
+{/if}
diff --git a/src/routes/(app)/[username]/(profile)/followers/+page.server.js b/src/routes/(app)/[username]/(profile)/followers/+page.server.js
new file mode 100644
index 00000000..a05d324d
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/followers/+page.server.js
@@ -0,0 +1,10 @@
+import { get } from '$lib/utils';
+
+export async function load({ params, parent, url }) {
+	let { subject } = await parent();
+	let { pubkey } = subject;
+
+	let followers = await get(`/${pubkey}/followers`);
+
+	return { followers };
+}
diff --git a/src/routes/(app)/[username]/(profile)/followers/+page.svelte b/src/routes/(app)/[username]/(profile)/followers/+page.svelte
new file mode 100644
index 00000000..a718ff15
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/followers/+page.svelte
@@ -0,0 +1,40 @@
+<script>
+	import { Avatar } from '$comp';
+	import { browser } from '$app/environment';
+	import VirtualScroll from 'svelte-virtual-scroll-list';
+
+	export let data;
+	let { followers } = data;
+	let w;
+</script>
+
+<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">
+	{#if browser}
+		{#if followers.length}
+			<VirtualScroll data={followers} key="username" let:data pageMode={true}>
+				<a href={`/${data.username}`}>
+					<div class="flex border-b py-4 text-sm lg:text-lg text-secondary" :key={data.username}>
+						<div class="mb-auto mr-2">
+							<div class="md:hidden">
+								<Avatar size={12} user={data} disabled={true} />
+							</div>
+							<div class="hidden md:block">
+								<Avatar size={20} user={data} disabled={true} />
+							</div>
+						</div>
+
+						<div class="w-full flex pb-1 text-black my-auto">
+							<div>
+								{data.display_name || ''} <span class="text-secondary">@{data.username}</span>
+							</div>
+						</div>
+					</div>
+				</a>
+			</VirtualScroll>
+		{:else}
+			<div>No followers</div>
+		{/if}
+	{/if}
+</div>
diff --git a/src/routes/(app)/[username]/(profile)/follows/+page.server.js b/src/routes/(app)/[username]/(profile)/follows/+page.server.js
new file mode 100644
index 00000000..60b95636
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/follows/+page.server.js
@@ -0,0 +1,11 @@
+import { get } from '$lib/utils';
+
+export async function load({ params, parent, url }) {
+	let { subject } = await parent();
+	let { pubkey } = subject;
+
+	let follows = await get(`/${pubkey}/follows`);
+
+	console.log('GOT', follows);
+	return { follows };
+}
diff --git a/src/routes/(app)/[username]/(profile)/follows/+page.svelte b/src/routes/(app)/[username]/(profile)/follows/+page.svelte
new file mode 100644
index 00000000..87e34501
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/follows/+page.svelte
@@ -0,0 +1,40 @@
+<script>
+	import { Avatar } from '$comp';
+	import { browser } from '$app/environment';
+	import VirtualScroll from 'svelte-virtual-scroll-list';
+
+	export let data;
+	let { follows } = data;
+	let w;
+</script>
+
+<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">
+	{#if browser}
+		{#if follows.length}
+			<VirtualScroll data={follows} key="username" let:data pageMode={true}>
+				<a href={`/${data.username}`}>
+					<div class="flex border-b py-4 text-sm lg:text-lg text-secondary" :key={data.username}>
+						<div class="mb-auto mr-2">
+							<div class="md:hidden">
+								<Avatar size={12} user={data} disabled={true} />
+							</div>
+							<div class="hidden md:block">
+								<Avatar size={20} user={data} disabled={true} />
+							</div>
+						</div>
+
+						<div class="w-full flex pb-1 text-black my-auto">
+							<div>
+								{data.display_name || ''} <span class="text-secondary">@{data.username}</span>
+							</div>
+						</div>
+					</div>
+				</a>
+			</VirtualScroll>
+		{:else}
+			<div>No follows</div>
+		{/if}
+	{/if}
+</div>
diff --git a/src/routes/(app)/[username]/+page.server.js b/src/routes/(app)/[username]/+page.server.js
deleted file mode 100644
index e406253f..00000000
--- a/src/routes/(app)/[username]/+page.server.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { get } from '$lib/utils';
-import Qr from 'qrcode-base64';
-
-export async function load({ params, parent, url }) {
-	let { subject } = await parent();
-	let { pubkey } = subject;
-	if (!pubkey) pubkey = params.username;
-
-	let { username } = params;
-	let text = `${encodeURI(username)}@${url.hostname}`;
-	let src = Qr.drawImg(text, { size: 300 });
-	let events = [];
-
-	try {
-		events = await get(`/${pubkey}/events`);
-	} catch (e) {
-		console.log(e);
-	}
-
-	events.map((e) => {
-		e.seen = e.created_at;
-	});
-
-	return { events, src, text };
-}
diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
deleted file mode 100644
index f4598e6f..00000000
--- a/src/routes/(app)/[username]/+page.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script>
-	import { Feed, Icon, PageNotFound } from '$comp';
-	import { t } from '$lib/translations';
-
-	export let data;
-
-	let { events, user, subject, src, text } = data;
-	let followed = false;
-
-	let { username: n } = subject;
-
-	$: username = n.length > 60 ? n.substr(0, 6) : n;
-</script>
-
-<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>
-
-		<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 flex-wrap gap-2 w-full">
-			{#if !subject.anon}
-				<div class="w-full flex">
-					<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>
-							</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}
-			<!-- <div class="w-full flex"> -->
-			<!-- 	<a href={`/${subject.username}/message`} 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.sendMessage')}</div> -->
-			<!-- 			</div> -->
-			<!-- 		</button> -->
-			<!-- 	</a> -->
-			<!-- </div> -->
-		</div>
-	</div>
-
-	<div class="w-full md:pt-12 lg:pt-0">
-		<div class="mx-auto space-y-5 mt-5 lg:max-w-lg xl:max-w-2xl">
-			{#if events.length}
-				<Feed {events} {user} />
-			{:else}
-				<div class="text-center text-2xl mt-20">
-					Nothing here yet. Post your first <a
-						href="https://github.com/nostr-protocol/nostr#nostr---notes-and-other-stuff-transmitted-by-relays"
-						class="underline">nostr</a
-					> note!
-				</div>
-			{/if}
-		</div>
-	</div>
-</div>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
index 55963105..b02ddca4 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
@@ -3,10 +3,10 @@
 	import { fly } from 'svelte/transition';
 	import { applyAction, deserialize } from '$app/forms';
 
-	import { Icon, Spinner, Pin, Password } from '$comp';
+	import { Icon, Spinner, Pin } from '$comp';
 	import { t } from '$lib/translations';
 	import { failure, post, success } from '$lib/utils';
-	import { avatarUpload, bannerUpload, passwordPrompt, password, pin } from '$lib/store';
+	import { avatarUpload, bannerUpload, pin } from '$lib/store';
 	import { upload } from '$lib/upload';
 	import { page } from '$app/stores';
 	import { sign, send } from '$lib/nostr';
@@ -66,19 +66,6 @@
 			failure('Something went wrong');
 		}
 
-		if (!$password) {
-			$passwordPrompt = true;
-			return;
-		}
-
-		try {
-			await post('/password', { password: $password });
-		} catch (e) {
-			console.log(e);
-			$passwordPrompt = true;
-			return;
-		}
-
 		let event = {
 			pubkey: user.pubkey,
 			created_at: Math.floor(Date.now() / 1000),
@@ -91,7 +78,7 @@
 			tags: []
 		};
 
-		await sign(event, user, $password);
+		await sign({ event, user });
 		await send(event);
 
 		const response = await fetch(formElement.action, {
@@ -111,18 +98,12 @@
 
 	let loaded;
 	onMount(() => setTimeout(() => (loaded = true), 50));
-
-	$: loading && $password && handleSubmit();
 </script>
 
 {#if loaded && user.haspin && $pin?.length !== 6}
 	<Pin />
 {/if}
 
-{#if $passwordPrompt}
-	<Password {user} />
-{/if}
-
 <form
 	method="POST"
 	class="mb-[154px]"
-- 
cgit v1.2.3