From 756fe3c100f052452758b7a67f5cf192d67876cf Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Tue, 21 Jan 2025 23:26:32 -0800
Subject: notes

---
 src/components/Avatar.svelte                       |   4 +-
 src/components/Event.svelte                        | 125 +++++++++++++--------
 src/components/Media.svelte                        |  32 +++---
 src/lib/utils.ts                                   |  22 ++++
 src/locales/en.json                                |   4 +
 .../(app)/[username]/(profile)/+layout.svelte      |  11 +-
 .../[username]/(profile)/notes/+page.server.ts     |  13 +++
 .../(app)/[username]/(profile)/notes/+page.svelte  |  35 ++----
 .../[username]/(profile)/notes/new/+page.svelte    |  41 +++++++
 .../send/zap/[id]/[...amount]/+page.server.ts      |  43 +++++++
 .../(app)/send/zap/[id]/[...amount]/+page.svelte   |  71 ++++++++++++
 .../send/zap/[pubkey]/[...id]/+page.server.ts      |  41 -------
 .../(app)/send/zap/[pubkey]/[...id]/+page.svelte   |  69 ------------
 13 files changed, 312 insertions(+), 199 deletions(-)
 create mode 100644 src/routes/(app)/[username]/(profile)/notes/+page.server.ts
 create mode 100644 src/routes/(app)/[username]/(profile)/notes/new/+page.svelte
 create mode 100644 src/routes/(app)/send/zap/[id]/[...amount]/+page.server.ts
 create mode 100644 src/routes/(app)/send/zap/[id]/[...amount]/+page.svelte
 delete mode 100644 src/routes/(app)/send/zap/[pubkey]/[...id]/+page.server.ts
 delete mode 100644 src/routes/(app)/send/zap/[pubkey]/[...id]/+page.svelte

(limited to 'src')

diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
index f37f3e14..09b6c037 100644
--- a/src/components/Avatar.svelte
+++ b/src/components/Avatar.svelte
@@ -18,7 +18,7 @@
     user?.profile ? `${base}/${user.profile}.webp` : user?.picture,
   );
   let fallback = $derived(
-    `${base}/punks/` + punk(user.pubkey || user?.id || "aa"),
+    `${base}/punks/` + punk(user?.pubkey || user?.id || "aa"),
   );
   let tmp = $derived($avatar?.id && $avatar.id === user?.id && $avatar.src);
   let src = $derived(tmp || profile || fallback);
@@ -31,7 +31,7 @@
     <img
       {src}
       class="w-full h-full object-cover object-center overflow-hidden"
-      alt={user.username}
+      alt={user?.username}
     />
   </div>
 {/snippet}
diff --git a/src/components/Event.svelte b/src/components/Event.svelte
index 6b974915..b94443d2 100644
--- a/src/components/Event.svelte
+++ b/src/components/Event.svelte
@@ -2,56 +2,77 @@
   import Avatar from "$comp/Avatar.svelte";
   import Media from "$comp/Media.svelte";
   import { goto } from "$app/navigation";
+  import { fail, ago, post } from "$lib/utils";
+  import { sign } from "$lib/nostr";
+  import Pin from "$comp/Pin.svelte";
+  import { pin } from "$lib/store";
 
-  let { event, minimal } = $props();
-  let { author, parts, zaps, names } = $derived(event);
-  let go = () => goto(`/thread/${event.id}`);
-  console.log("AUTHOR", event.author);
+  let amount = 21;
+  let { event, minimal, heading = true } = $props();
+  let { author, parts, zaps, names, created_at } = $derived(event);
+  let { id } = event;
+
+  let zapping = $state();
+  let zap = async () => {
+    zapping = true;
+    try {
+      const body = new FormData();
+
+      let request = await post("/post/zapRequest", { amount, id });
+      let { pr: payreq } = await post("/post/zap", {
+        event: await sign(request),
+      });
+      await post("/post/payments", { amount, payreq });
+    } catch (e) {
+      fail(e.message);
+    }
+  };
 </script>
 
-<div class="space-y-5">
-  <div class="flex gap-2 items-center">
-    <Avatar user={author} size={16} />
-    <a href={`/${author.pubkey}/notes`} class="contents">
-      <div>
-        <div class="font-bold">
-          {author.display} &mdash; {author.username}
-        </div>
-        {#if author.lud16}
-          <div class="flex items-center">
-            <iconify-icon
-              noobserver
-              icon="ph:lightning-fill"
-              class="text-yellow-300"
-            ></iconify-icon>
-            {author.lud16}
+<div class="space-y-2 border-b-8 dark:border-primary py-8">
+  {#if heading}
+    <div class="flex">
+      <a href={`/${author.pubkey}/notes`} class="contents">
+        <div class="flex gap-2 items-center">
+          <Avatar user={author} size={16} disabled={true} />
+          <div>
+            <div>
+              <span class="font-bold">{author.display}</span>
+              <span class="text-secondary">@{author.username}</span>
+              <span class="text-secondary">&#x2022; {ago(created_at)}</span>
+            </div>
+            {#if author.lud16}
+              <div class="flex items-center">
+                <iconify-icon
+                  noobserver
+                  icon="ph:lightning-fill"
+                  class="text-yellow-300"
+                ></iconify-icon>
+                {author.lud16}
+              </div>
+            {/if}
           </div>
-        {/if}
-      </div>
-    </a>
-  </div>
-
-  <div class="text-2xl space-y-5 break-words" onclick={go}>
-    {#each parts as { type, value }, i}
-      {#if type === "text"}
-        {value}
-      {:else if type === "link" && !minimal}
-        <Media {value} />
-      {:else if type.match(/^nostr:np(rofile|ub)$/)}
-        <a href={`/${value.pubkey}`} class="font-bold">@{names[value.pubkey]}</a
-        >
-      {/if}
-    {/each}
-  </div>
-</div>
+        </div>
+      </a>
+    </div>
+  {/if}
 
-{#if !minimal}
-  <a href={`/send/zap/${event.pubkey}/${event.id}`} class="btn btn-accent">
-    <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"
-    ></iconify-icon>
-    Zap
+  <a href={`/e/${id}`} class="contents">
+    <div class="text-2xl space-y-2 break-words">
+      {#each parts as { type, value }, i}
+        {#if type === "text"}
+          {value}
+        {:else if type === "link"}
+          <Media {value} {minimal} />
+        {:else if type.match(/^nostr:np(rofile|ub)$/)}
+          <a href={`/${value.pubkey}`} class="font-bold"
+            >@{names[value.pubkey]}</a
+          >
+        {/if}
+      {/each}
+    </div>
   </a>
-{/if}
+</div>
 
 {#if zaps?.length}
   <div class="flex flex-wrap gap-2">
@@ -65,3 +86,19 @@
     {/each}
   </div>
 {/if}
+
+{#if !minimal}
+  <div class="justify-center flex">
+    <btn onclick={zap} class="btn btn-accent items-center">
+      <div class="flex gap-1 items-center">
+        <iconify-icon
+          noobserver
+          icon="ph:lightning-fill"
+          class="text-yellow-300"
+          width={32}
+        ></iconify-icon>
+        <div>Zap</div>
+      </div>
+    </btn>
+  </div>
+{/if}
diff --git a/src/components/Media.svelte b/src/components/Media.svelte
index d24dd12d..aff4cf39 100644
--- a/src/components/Media.svelte
+++ b/src/components/Media.svelte
@@ -6,20 +6,22 @@
   export const isAudio = (url: string) => url?.match(/^.*\.(ogg|mp3|wav)/gi);
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  export let value: any;
+  let { value, minimal } = $props();
 </script>
 
-{#if !!isImage(value.url)}
-  <img src={value.url} alt={""} />
-{:else if isVideo(value.url)}
-  <!-- svelte-ignore a11y-media-has-caption -->
-  <video src={value.url} controls />
-{:else if isAudio(value.url)}
-  <audio src={value.url} controls>
-    <a href={value.url}>{value.url.replace(/https?:\/\/(www\.)?/, "")}</a>
-  </audio>
-{:else}
-  <a href={value.url}>
-    {value.url.replace(/https?:\/\/(www\.)?/, "")}
-  </a>
-{/if}
+<div class="pt-2">
+  {#if !!isImage(value.url)}
+    <img src={value.url} alt={""} class:w-48={minimal} />
+  {:else if isVideo(value.url)}
+    <!-- svelte-ignore a11y-media-has-caption -->
+    <video src={value.url} controls />
+  {:else if isAudio(value.url)}
+    <audio src={value.url} controls>
+      <a href={value.url}>{value.url.replace(/https?:\/\/(www\.)?/, "")}</a>
+    </audio>
+  {:else}
+    <a href={value.url}>
+      {value.url.replace(/https?:\/\/(www\.)?/, "")}
+    </a>
+  {/if}
+</div>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index e2e19b05..2e1bb840 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,6 +4,12 @@ import { page } from "$app/stores";
 import { PUBLIC_COINOS_NETWORK, PUBLIC_COINOS_URL } from "$env/static/public";
 import { bytesToHex } from "@noble/hashes/utils";
 import { toast } from "@zerodevx/svelte-toast";
+import {
+	differenceInDays,
+	differenceInHours,
+	differenceInMinutes,
+	differenceInSeconds,
+} from "date-fns";
 import { decrypt } from "nostr-tools/nip49";
 import { get as getStore } from "svelte/store";
 
@@ -434,3 +440,19 @@ export const versions = {
 }[PUBLIC_COINOS_NETWORK];
 
 export const str = (s) => s.toString();
+
+export const ago = (t) => {
+	const now = new Date();
+	const date = new Date(t * 1000);
+	const seconds = differenceInSeconds(now, date);
+	if (seconds < 60) return `${seconds}s`;
+
+	const minutes = differenceInMinutes(now, date);
+	if (minutes < 60) return `${minutes}m`;
+
+	const hours = differenceInHours(now, date);
+	if (hours < 24) return `${hours}h`;
+
+	const days = differenceInDays(now, date);
+	return `${days}d`;
+};
diff --git a/src/locales/en.json b/src/locales/en.json
index 1bf17580..8b07832e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,4 +1,8 @@
 {
+	"notes": {
+		"contents": "Note contents",
+		"notFound": "We didn't find any notes"
+	},
 	"accounts": {
 		"showQR": "Show QR",
 		"revealNwc": "Reveal connection string",
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index d364a840..a219a487 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -118,11 +118,16 @@
   >
     <button
       type="button"
-      onclick={toggleDetails}
       class="flex text-3xl font-bold text-center mx-auto justify-center gap-2"
     >
-      <div class="my-auto break-words">{display || username}</div>
-      <iconify-icon noobserver icon="ph:qr-code-bold" width="32"></iconify-icon>
+      <div class="flex gap-1" onclick={toggleDetails}>
+        <div class="my-auto break-words">{display || username}</div>
+        <iconify-icon noobserver icon="ph:qr-code-bold" width="32"
+        ></iconify-icon>
+      </div>
+      <a href={`/${n}/notes`}>
+        <iconify-icon noobserver icon="ph:note-bold" width="32"></iconify-icon>
+      </a>
     </button>
 
     {#if subject.about}
diff --git a/src/routes/(app)/[username]/(profile)/notes/+page.server.ts b/src/routes/(app)/[username]/(profile)/notes/+page.server.ts
new file mode 100644
index 00000000..b7186bc0
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/notes/+page.server.ts
@@ -0,0 +1,13 @@
+import { get } from "$lib/utils";
+import { error } from "@sveltejs/kit";
+
+export async function load({ parent }) {
+	try {
+		const { subject } = await parent();
+		const events = await get(`/${subject.pubkey}/events`);
+		return { events };
+	} catch (e) {
+		console.log(e);
+		error(500, { message: "Failed to get events" });
+	}
+}
diff --git a/src/routes/(app)/[username]/(profile)/notes/+page.svelte b/src/routes/(app)/[username]/(profile)/notes/+page.svelte
index 0591a881..e4261483 100644
--- a/src/routes/(app)/[username]/(profile)/notes/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/notes/+page.svelte
@@ -1,39 +1,24 @@
 <script lang="ts">
+  import { t } from "$lib/translations";
   import Event from "$comp/Event.svelte";
   import { get, post } from "$lib/utils";
   import { onMount } from "svelte";
-  import { Relay } from "nostr-tools/relay";
   import { ignore } from "$lib/store";
 
   let { data } = $props();
-  let { subject } = $derived(data);
-  let events = $state([]);
-  onMount(async () => {
-    const relay = await Relay.connect("wss://relay.primal.net");
-    const subscription = relay.subscribe(
-      [{ kinds: [1], authors: [subject.pubkey], limit: 20 }],
-      {
-        async onevent(event) {
-          // console.log(event);
-          const { parts, names } = await post("/post/parseEvent", { event });
-          event.author = await get(`/api/users/${event.pubkey}`);
-          event.parts = parts;
-          event.names = names;
-          let { content, pubkey } = event;
-          events.push(event);
-          if (events.length > 20) events.shift();
-        },
-      },
-    );
-  });
+  let { events, subject, user } = $derived(data);
 </script>
 
 <div class="container px-4 max-w-xl mx-auto space-y-5">
-  <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
-    Events
-  </h1>
-
+  {#if user?.id === subject.id}
+    <a href={`/${user.username}/notes/new`} class="btn">
+      <iconify-icon noobserver icon="ph:note-bold" width="32"></iconify-icon>
+      <div>Post a note</div>
+    </a>
+  {/if}
   {#each events as event}
     <Event {event} minimal={true} />
+  {:else}
+    <div class="text-2xl">{$t("notes.notFound")}</div>
   {/each}
 </div>
diff --git a/src/routes/(app)/[username]/(profile)/notes/new/+page.svelte b/src/routes/(app)/[username]/(profile)/notes/new/+page.svelte
new file mode 100644
index 00000000..8957034d
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/notes/new/+page.svelte
@@ -0,0 +1,41 @@
+<script>
+  import { goto } from "$app/navigation";
+  import { send, sign } from "$lib/nostr";
+  import { t } from "$lib/translations";
+  import { focus } from "$lib/utils";
+
+  let { data } = $props();
+  let { user } = $derived(data);
+  let { pubkey } = $derived(user);
+  let content = $state();
+
+  let submit = async (e) => {
+    try {
+      e.preventDefault();
+
+      let event = {
+        kind: 1,
+        content,
+        created_at: Math.round(Date.now() / 1000),
+        tags: [],
+      };
+
+      event = await sign(event);
+      await send(event);
+
+      goto(`/${user.username}/notes`);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+</script>
+
+<div class="container px-4 max-w-xl mx-auto space-y-5">
+  <form method="POST" class="space-y-2 text-xl" onsubmit={submit}>
+    <textarea use:focus bind:value={content} placeholder={$t("notes.contents")}
+    ></textarea>
+    <button type="submit" class="btn btn-accent">
+      {$t("payments.submit")}</button
+    >
+  </form>
+</div>
diff --git a/src/routes/(app)/send/zap/[id]/[...amount]/+page.server.ts b/src/routes/(app)/send/zap/[id]/[...amount]/+page.server.ts
new file mode 100644
index 00000000..2219c370
--- /dev/null
+++ b/src/routes/(app)/send/zap/[id]/[...amount]/+page.server.ts
@@ -0,0 +1,43 @@
+import getRates from "$lib/rates";
+import { auth, fd, post } from "$lib/utils";
+import { fail, redirect } from "@sveltejs/kit";
+
+export async function load({ cookies, params, parent }) {
+	const { user } = await parent();
+	const { amount, id } = params;
+	const rates = await getRates();
+
+	let request;
+	if (amount)
+		request = await post("/zapRequest", { amount, id }, auth(cookies));
+
+	const rate = rates[user.currency];
+	return { amount, id, rates, rate, request };
+}
+
+export const actions = {
+	setAmount: async ({ cookies, params, request }) => {
+		const data = await fd(request);
+		const { id } = params;
+		const { amount } = data;
+
+		data.request = await post("/zapRequest", { amount, id }, auth(cookies));
+
+		return data;
+	},
+
+	send: async ({ cookies, request }) => {
+		let p;
+		try {
+			const body = await fd(request);
+
+			p = await post("/payments", body, auth(cookies));
+			console.log("P", p);
+		} catch (_) {
+			console.log("WHAT", _);
+			return fail(400, { message: "payments.failedToRoute" });
+		}
+
+		redirect(307, `/sent/${p.id}`);
+	},
+};
diff --git a/src/routes/(app)/send/zap/[id]/[...amount]/+page.svelte b/src/routes/(app)/send/zap/[id]/[...amount]/+page.svelte
new file mode 100644
index 00000000..e6dd1384
--- /dev/null
+++ b/src/routes/(app)/send/zap/[id]/[...amount]/+page.svelte
@@ -0,0 +1,71 @@
+<script>
+  import { tick } from "svelte";
+  import { goto } from "$app/navigation";
+  import { untrack } from "svelte";
+  import { t } from "$lib/translations";
+  import { enhance } from "$app/forms";
+  import Amount from "$comp/Amount.svelte";
+  import Numpad from "$comp/Numpad.svelte";
+  import Spinner from "$comp/Spinner.svelte";
+  import { page } from "$app/stores";
+  import { loc, back, fail, post, toFiat, f, s, focus } from "$lib/utils";
+  import { sign, send } from "$lib/nostr";
+  import { rate, pin } from "$lib/store";
+
+  let { data, form } = $props();
+
+  let { id, request, user } = $derived({ ...data, ...form });
+  let a = $state(data.amount);
+  let { currency } = $derived(user);
+  let locale = loc(user);
+  let event = $state();
+
+  $effect(() => ($rate ||= data.rate));
+  $effect(async () => {
+    if (form || request) {
+      try {
+        loading = false;
+        event = await sign(request);
+        let { pr: payreq } = await post("/post/zap", { event });
+        await post("/post/payments", { amount, payreq, pin: $pin });
+        goto(`/e/${id}`);
+      } catch (e) {
+        console.log(e);
+        fail(e.message);
+      }
+    }
+  });
+
+  let showMax = $state();
+
+  let loading = $state();
+  let submit = () => (loading = true);
+
+  let next = $state();
+  let toggle = () => (show = !show);
+  let amount = $derived(form?.amount || data.amount);
+  let maxfee = $state(Math.max(5, Math.round(untrack(() => amount) * 0.005)));
+</script>
+
+<div class="container px-4 max-w-xl mx-auto text-center space-y-2">
+  {#if form?.message}
+    <div class="text-red-600 text-center">
+      {$t(form.message)}
+    </div>
+  {/if}
+  <form method="POST" action="?/setAmount" class="space-y-2" use:enhance>
+    <input type="hidden" value={a} name="amount" />
+    <input name="rate" value={$rate} type="hidden" />
+
+    <Numpad
+      bind:amount={a}
+      {currency}
+      {locale}
+      bind:rate={$rate}
+      submit={next}
+    />
+    <button type="submit" class="btn" bind:this={next}
+      >{$t("payments.next")}</button
+    >
+  </form>
+</div>
diff --git a/src/routes/(app)/send/zap/[pubkey]/[...id]/+page.server.ts b/src/routes/(app)/send/zap/[pubkey]/[...id]/+page.server.ts
deleted file mode 100644
index 1dd80d20..00000000
--- a/src/routes/(app)/send/zap/[pubkey]/[...id]/+page.server.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import getRates from "$lib/rates";
-import { auth, fd, post } from "$lib/utils";
-import { fail, redirect } from "@sveltejs/kit";
-
-export async function load({ params, parent }) {
-	const { user } = await parent();
-	const data = { ...params };
-	const rates = await getRates();
-
-	data.rate = rates[user.currency];
-	return data;
-}
-
-export const actions = {
-	setAmount: async ({ cookies, params, request }) => {
-		const data = await fd(request);
-		const { id, pubkey } = params;
-		const { amount } = data;
-
-		data.request = await post(
-			"/zapRequest",
-			{ id, amount, pubkey },
-			auth(cookies),
-		);
-
-		return data;
-	},
-
-	send: async ({ cookies, request }) => {
-		let p;
-		try {
-			const body = await fd(request);
-
-			p = await post("/payments", body, auth(cookies));
-		} catch (_) {
-			return fail(400, { message: "payments.failedToRoute" });
-		}
-
-		redirect(307, `/sent/${p.id}`);
-	},
-};
diff --git a/src/routes/(app)/send/zap/[pubkey]/[...id]/+page.svelte b/src/routes/(app)/send/zap/[pubkey]/[...id]/+page.svelte
deleted file mode 100644
index eb0be4c8..00000000
--- a/src/routes/(app)/send/zap/[pubkey]/[...id]/+page.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script>
-  import { goto } from "$app/navigation";
-  import { untrack } from "svelte";
-  import { t } from "$lib/translations";
-  import { enhance } from "$app/forms";
-  import Amount from "$comp/Amount.svelte";
-  import Numpad from "$comp/Numpad.svelte";
-  import Spinner from "$comp/Spinner.svelte";
-  import { page } from "$app/stores";
-  import { loc, back, fail, post, toFiat, f, s, focus } from "$lib/utils";
-  import { sign, send } from "$lib/nostr";
-  import { rate, pin } from "$lib/store";
-
-  let { data, form } = $props();
-
-  let { id, request, user } = $derived({ ...data, ...form });
-  let a = $state();
-  let { currency } = $derived(user);
-  let locale = loc(user);
-  let event = $state();
-
-  $effect(() => ($rate ||= data.rate));
-  $effect(async () => {
-    if (form) {
-      try {
-        loading = false;
-        event = await sign(request);
-        let { pr: payreq } = await post("/post/zap", { event });
-        await post("/post/payments", { amount, payreq, pin: $pin });
-        goto(`/e/${id}`);
-      } catch (e) {
-        fail(e.message);
-      }
-    }
-  });
-
-  let showMax = $state();
-
-  let loading = $state();
-  let submit = () => (loading = true);
-
-  let next = $state();
-  let toggle = () => (show = !show);
-  let amount = $derived(form?.amount || data.amount);
-  let maxfee = $state(Math.max(5, Math.round(untrack(() => amount) * 0.005)));
-</script>
-
-<div class="container px-4 max-w-xl mx-auto text-center space-y-2">
-  {#if form?.message}
-    <div class="text-red-600 text-center">
-      {$t(form.message)}
-    </div>
-  {/if}
-  <form method="POST" action="?/setAmount" class="space-y-2" use:enhance>
-    <input type="hidden" value={a} name="amount" />
-    <input name="rate" value={$rate} type="hidden" />
-
-    <Numpad
-      bind:amount={a}
-      {currency}
-      {locale}
-      bind:rate={$rate}
-      submit={next}
-    />
-    <button type="submit" class="btn" bind:this={next}
-      >{$t("payments.next")}</button
-    >
-  </form>
-</div>
-- 
cgit v1.2.3