From 4605d7fbd8b94db013b0e5058116e421150f2a47 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 9 Oct 2024 12:52:05 -0700
Subject: follows

---
 src/components/AppHeader.svelte                    |  9 ++-
 src/components/Avatar.svelte                       | 14 ++--
 .../(app)/[username]/(profile)/+layout.server.ts   | 15 ++--
 .../(app)/[username]/(profile)/+layout.svelte      | 79 ++++++++++++----------
 .../[username]/(profile)/follows/+page.svelte      | 25 +++++--
 src/routes/(app)/[username]/+layout.server.ts      |  4 +-
 6 files changed, 89 insertions(+), 57 deletions(-)

(limited to 'src')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 389e036b..3a14374f 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -36,7 +36,8 @@
     $banner?.id && $banner.id === subject.id
       ? `url(${$banner.src})`
       : subject?.banner
-      ? `url(/api/public/${subject.banner}.webp)`
+      ? subject.banner.includes(":") ? `url(${subject.banner})`
+      : `url(/api/public/${subject.banner}.webp)`
       : undefined;
 
   $: $page && (showMenu = false);
@@ -58,7 +59,11 @@
             ><Icon icon="home" style="mx-auto w-6 sm:w-8" />
           </button>
         </a>
-        <a href={`/invoice`} data-sveltekit-preload-data="tap" data-sveltekit-preload-code="eager">
+        <a
+          href={`/invoice`}
+          data-sveltekit-preload-data="tap"
+          data-sveltekit-preload-code="eager"
+        >
           <button
             class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page.url.pathname.includes(
               'invoice'
diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
index 4922c065..e91285da 100644
--- a/src/components/Avatar.svelte
+++ b/src/components/Avatar.svelte
@@ -10,12 +10,13 @@
   $: s = size.toString();
   $: link = user?.anon ? `/${user.pubkey}` : `/${user.username}`;
 
-  $: src =
-    ($avatar?.id && $avatar.id === user.id && $avatar.src) ||
-    "/api/public/" +
-      (user.profile
-        ? user.profile + ".webp"
-        : "punks/" + punk(user.pubkey || user.id || "aa"));
+  let base = "/api/public";
+  $: profile = user?.profile ? `${base}/${user.profile}.webp` : user?.picture;
+  $: fallback = `${base}/punks/` + punk(user.pubkey || user.id || "aa");
+  $: tmp = $avatar?.id && $avatar.id === user.id && $avatar.src;
+  $: src = tmp || profile || fallback;
+
+  let handle = () => (src = fallback);
 </script>
 
 <a href={link} class:pointer-events-none={disabled}>
@@ -26,6 +27,7 @@
       {src}
       class="w-full h-full object-cover object-center overflow-hidden"
       alt={user.username}
+      on:error={handle}
     />
   </div>
 </a>
diff --git a/src/routes/(app)/[username]/(profile)/+layout.server.ts b/src/routes/(app)/[username]/(profile)/+layout.server.ts
index a508de92..308422b3 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.server.ts
+++ b/src/routes/(app)/[username]/(profile)/+layout.server.ts
@@ -1,6 +1,8 @@
 import { get } from "$lib/utils";
 
-export async function load({ parent }) {
+export async function load({ depends, parent }) {
+  depends("app:user");
+
   let { subject, user } = await parent();
 
   subject.follows = [];
@@ -12,12 +14,13 @@ export async function load({ parent }) {
     console.log("problem fetching follows", e);
   }
 
-  try {
-    subject.followers = await get(`/${subject.pubkey}/followers`);
-  } catch (e) {
-    console.log("problem fetching followers", e);
-  }
+  // try {
+  //   subject.followers = await get(`/${subject.pubkey}/followers`);
+  // } catch (e) {
+  //   console.log("problem fetching followers", e);
+  // }
 
+  subject.followers = [];
   if (user) {
     user.follows = await get(`/${user.pubkey}/follows?tagsonly=true`);
   }
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 8259507e..eabaeeea 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -10,18 +10,22 @@
   export let data;
 
   let { encode, toWords } = bech32m;
-  let events, user, subject, src, text;
 
-  $: ({ events, user, subject, src, rates, text } = data);
-  $: ({ currency, username: n, display } = subject);
+  let { events, user, subject, src, rates, text } = data;
+  let { currency, npub, username: n, display } = subject;
+
+  $: refresh(data);
+  let refresh = (data) => {
+    ({ events, user, subject, src, rates, text } = data);
+    ({ currency, npub, username: n, display } = subject);
+  };
 
   $: stripped = n.replace(/\s/g, "");
   $: username = n.length > 60 ? n.substr(0, 6) : display || stripped;
-  $: npub =
-    subject.pubkey &&
-    bech32m.encode("npub", toWords(hexToUint8Array(subject.pubkey)), 180);
-  $: lnaddr = `${stripped}@${$page.url.host}`;
-  $: profile = `${$page.url.host}/${stripped}`;
+  $: lnaddr = subject?.anon
+    ? subject.lud16 || undefined
+    : `${stripped}@${$page.url.host}`;
+  $: profile = `${$page.url.host}/${subject.anon ? npub : stripped}`;
 
   let follow = async () => {
     user.follows.push(["p", subject.pubkey, "wss://nostr.coinos.io", stripped]);
@@ -96,37 +100,44 @@
       </div>
     {/if}
 
-    <!-- <div> -->
-    <!--   <div class="flex justify-center gap-2"> -->
-    <!--     <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> -->
+    <div>
+      <div class="flex justify-center gap-2">
+        <a href={`/${subject.pubkey}/follows`} data-sveltekit-preload-data="tap"
+          ><b>{subject.follows.length}</b>
+          <span class="text-secondary">{$t("user.following")}</span></a
+        >
+        <a
+          href={`/${subject.pubkey}/followers`}
+          data-sveltekit-preload-data="tap"
+          ><b>{subject.followers.length}</b>
+          <span class="text-secondary">{$t("user.followers")}</span></a
+        >
+      </div>
+    </div>
 
     {#if showDetails}
       <div class="space-y-5 pb-20">
-        <div>
-          <div class="text-secondary">{$t("user.lightningAddress")}</div>
-          <div class="flex gap-4">
-            <div class="break-all grow text-xl">
-              {lnaddr}
-            </div>
-            <div class="flex mb-auto gap-1">
-              <button class="my-auto" on:click={() => copy(lnaddr)}
-                ><Icon icon="copy" style="max-w-max w-8 min-w-[32px]" /></button
-              >
-              <a href={`/qr/${encodeURIComponent(lnaddr)}`} class="my-auto">
-                <Icon icon="qr" style="invert max-w-max min-w-[32px]" />
-              </a>
+        {#if lnaddr}
+          <div>
+            <div class="text-secondary">{$t("user.lightningAddress")}</div>
+            <div class="flex gap-4">
+              <div class="break-all grow text-xl">
+                {lnaddr}
+              </div>
+              <div class="flex mb-auto gap-1">
+                <button class="my-auto" on:click={() => copy(lnaddr)}
+                  ><Icon
+                    icon="copy"
+                    style="max-w-max w-8 min-w-[32px]"
+                  /></button
+                >
+                <a href={`/qr/${encodeURIComponent(lnaddr)}`} class="my-auto">
+                  <Icon icon="qr" style="invert max-w-max min-w-[32px]" />
+                </a>
+              </div>
             </div>
           </div>
-        </div>
+        {/if}
         <div>
           <div class="text-secondary">{$t("user.url")}</div>
           <div class="flex gap-4">
diff --git a/src/routes/(app)/[username]/(profile)/follows/+page.svelte b/src/routes/(app)/[username]/(profile)/follows/+page.svelte
index e4363796..ff0bdb93 100644
--- a/src/routes/(app)/[username]/(profile)/follows/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/follows/+page.svelte
@@ -1,13 +1,24 @@
 <script>
+  import { onMount } from "svelte";
   import { t } from "$lib/translations";
   import Avatar from "$comp/Avatar.svelte";
   import { browser } from "$app/environment";
   import VirtualScroll from "svelte-virtual-scroll-list";
+  import { invalidate } from "$app/navigation";
 
   export let data;
+
   let {
     subject: { follows },
   } = data;
+
+  $: refresh(data);
+  let refresh = (data) => {
+    ({
+      subject: { follows },
+    } = data);
+  };
+
   let w;
 </script>
 
@@ -18,10 +29,10 @@
     {$t("user.following")}
   </h1>
 
-  {#if browser}
-    {#if follows.length}
+  {#if follows.length}
+    {#if browser}
       <VirtualScroll data={follows} key="pubkey" let:data pageMode={true}>
-        <a href={`/${data.pubkey}`}>
+        <a href={`/${data.pubkey}/follows`} data-sveltekit-preload-data="tap">
           <div
             class="flex py-4 text-sm lg:text-lg text-secondary"
             :key={data.pubkey}
@@ -37,15 +48,15 @@
 
             <div class="w-full flex pb-1 text-black my-auto">
               <div>
-                {data.display_name || ""}
-                <span class="text-secondary">@{data.username}</span>
+                <div>{data.display_name || ""}</div>
+                <div class="text-secondary text-base">@{data.name}</div>
               </div>
             </div>
           </div>
         </a>
       </VirtualScroll>
-    {:else}
-      <div>No follows</div>
     {/if}
+  {:else}
+    <div>No follows</div>
   {/if}
 </div>
diff --git a/src/routes/(app)/[username]/+layout.server.ts b/src/routes/(app)/[username]/+layout.server.ts
index 284501a2..1b95bdd0 100644
--- a/src/routes/(app)/[username]/+layout.server.ts
+++ b/src/routes/(app)/[username]/+layout.server.ts
@@ -9,13 +9,13 @@ export let load = async ({
 }) => {
   depends("app:user");
 
-  try {
+  try  {
     let subject = await get(`/users/${username}`);
     let { user } = await parent();
 
     let expires = new Date();
     expires.setSeconds(expires.getSeconds() + 380 * 24 * 60 * 60);
-      cookies.set("username", username, { path: "/", expires });
+    cookies.set("username", username, { path: "/", expires });
 
     return { subject, user };
   } catch (e) {
-- 
cgit v1.2.3