ui updates

6 files changed, 58 insertions, 132 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 168be9b2..df63051f 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -1,29 +1,19 @@
 <script lang="ts">
-  import { copy, f, loc, post, s, sats, success, fail } from "$lib/utils";
-  import { fiat } from "$lib/store";
-  import { t } from "$lib/translations";
-  import { bech32 } from "@scure/base";
-  import { page } from "$app/stores";
-  import { PUBLIC_DOMAIN } from "$env/static/public";
+  import { f, loc, post, s, sats, success, fail } from "$lib/utils";
 
   let { data, children } = $props();
 
-  let { encode, toWords } = bech32;
-
   let { rates, user, subject } = $derived(data);
   let rate = $derived(rates[subject.currency]);
   let { events, src, text } = $derived(data as any);
   let satsPerCurrency = $derived((1 * sats) / rate);
 
-  let { currency, npub, username: n, display } = $derived(subject);
+  let { currency, username: n, display } = $derived(subject);
   let locale = $derived(loc(user));
 
   let showBio = $state();
   let toggleBio = () => (showBio = !showBio);
 
-  let showDetails = $state();
-  let toggleDetails = () => (showDetails = !showDetails);
-
   let password = $state();
 
   let reset = async (e) => {
@@ -38,33 +28,19 @@
 
   let stripped = $derived(n.replace(/\s/g, ""));
   let username = $derived(n.length > 60 ? n.substr(0, 6) : display || stripped);
-  let lnaddr = $derived(subject?.anon ? subject.lud16 || undefined : `${stripped}@${$page.url.host}`);
-  let profile = $derived(`${$page.url.host}/${subject.anon ? npub : stripped}`);
-  let lnurl = $derived(
-    encode(
-      "lnurl",
-      toWords(
-        new TextEncoder().encode(`https://${PUBLIC_DOMAIN}/p/${subject.anon ? npub : stripped}`),
-      ),
-      20000,
-    ),
-  );
 </script>
 
 <div class="container mx-auto w-full px-4 flex flex-wrap lg:flex-nowrap">
   <div class="hidden lg:block lg:w-[280px] xl:w-[360px]"></div>
   <div class="w-full lg:w-[280px] xl:w-[360px] lg:absolute space-y-2 left-20 mx-auto">
-    <div class="flex text-3xl font-bold text-center mx-auto justify-center gap-1 items-center">
-      <button class="flex gap-1 items-center" onclick={toggleDetails}>
-        <div class="break-words">{display || username}</div>
-        <iconify-icon noobserver icon="ph:list-bold" width="32"></iconify-icon>
-      </button>
+    <div class="flex text-3xl font-bold text-center mx-auto justify-center gap-3 items-center">
+      <div class="break-words">{display || username}</div>
       {#if subject.id === user?.id}
-        <a href="/settings/profile" class="btn contents" aria-label="Edit profile">
-          <iconify-icon noobserver icon="ph:pencil-bold" width="32"></iconify-icon>
+        <a href="/settings/profile" class="flex items-center" aria-label="Profile settings">
+          <iconify-icon noobserver icon="ph:faders-bold" width="32"></iconify-icon>
         </a>
       {:else}
-        <a href="/dm?username={subject.username}" class="btn contents" aria-label="Direct Message">
+        <a href="/dm?username={subject.username}" aria-label="Direct Message">
           <iconify-icon noobserver icon="ph:chat-bold" width="32"></iconify-icon>
         </a>
       {/if}
@@ -92,100 +68,6 @@
       </div>
     {/if}
 
-    {#if showDetails}
-      <div class="space-y-5">
-        {#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
-                  type="button"
-                  class="my-auto"
-                  aria-label="Copy lightning address"
-                  onclick={() => copy(lnaddr)}
-                >
-                    <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
-                </button>
-                <a
-                  href={`/qr/${encodeURIComponent(lnaddr)}`}
-                  class="my-auto"
-                  aria-label="Show lightning address QR"
-                >
-                  <iconify-icon noobserver icon="ph:qr-code-bold" width="32"></iconify-icon>
-                </a>
-              </div>
-            </div>
-          </div>
-        {/if}
-        <div>
-          <div class="text-secondary">{$t("user.url")}</div>
-          <div class="flex gap-4">
-            <div class="break-all grow text-xl">{profile}</div>
-            <div class="flex mb-auto gap-1">
-              <button
-                type="button"
-                class="my-auto"
-                aria-label="Copy profile URL"
-                onclick={() => copy(profile)}
-              >
-                <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
-              </button>
-              <a
-                href={`/qr/${encodeURIComponent(`${$page.url.protocol}//${profile}`)}`}
-                class="my-auto"
-                aria-label="Show profile URL QR"
-              >
-                <iconify-icon noobserver icon="ph:qr-code-bold" width="32"></iconify-icon>
-              </a>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div class="text-secondary">{$t("user.lnurl")}</div>
-          <div class="flex gap-4">
-            <div class="break-all grow text-xl">{lnurl}</div>
-            <div class="flex mb-auto gap-1">
-              <button
-                type="button"
-                class="my-auto"
-                aria-label="Copy LNURL"
-                onclick={() => copy(`lightning:${lnurl}`)}
-              >
-                <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
-              </button>
-              <a
-                href={`/${n}/accepted/${encodeURIComponent(`lightning:${lnurl}`)}`}
-                class="my-auto"
-                aria-label="Show LNURL QR"
-              >
-                <iconify-icon noobserver icon="ph:qr-code-bold" width="32"></iconify-icon>
-              </a>
-            </div>
-          </div>
-        </div>
-        <!-- <div> -->
-        <!--   <div class="text-secondary">{$t("user.nostrPubkey")}</div> -->
-        <!--   <div class="flex gap-4"> -->
-        <!--     <div class="break-all grow text-xl"> -->
-        <!--       {npub} -->
-        <!--     </div> -->
-        <!--     <div class="flex my-auto gap-1"> -->
-        <!--       <button class="my-auto" onclick={() => copy(npub)} -->
-        <!--         ><iconify-icon noobserver icon="ph:copy-bold" width="32" -->
-        <!--         ></iconify-icon></button -->
-        <!--       > -->
-        <!--       <a href={`/qr/${encodeURIComponent(npub)}`} class="my-auto"> -->
-        <!--         <iconify-icon noobserver icon="ph:qr-code-bold" width="32" -->
-        <!--         ></iconify-icon> -->
-        <!--       </a> -->
-        <!--     </div> -->
-        <!--   </div> -->
-        <!-- </div> -->
-      </div>
-    {/if}
-
     <div class="flex flex-wrap gap-2 w-full text-lg">
       <!-- {#if user &#38;&#38; user.username !== subject.username &#38;&#38; subject.pubkey} -->
       <!--   {#if following} -->
diff --git a/src/routes/(app)/[username]/accepted/[text]/+page.svelte b/src/routes/(app)/[username]/accepted/[text]/+page.svelte
index 6b2c3a86..be4cfe55 100644
--- a/src/routes/(app)/[username]/accepted/[text]/+page.svelte
+++ b/src/routes/(app)/[username]/accepted/[text]/+page.svelte
@@ -1,6 +1,7 @@
 <script>
   import Qr from "$comp/Qr.svelte";
   import { back, copy } from "$lib/utils";
+  import { t } from "$lib/translations";
   import { bech32 } from "@scure/base";
   import { page } from "$app/stores";
   import { PUBLIC_DOMAIN } from "$env/static/public";
@@ -21,7 +22,7 @@
 </script>
 
 <div class="px-2">
-  <div class="border-8 border-black p-8 max-w-[580px] mx-auto mt-20 space-y-2 rounded-3xl relative">
+  <div class="border-8 border-black bg-white text-black p-8 max-w-[580px] mx-auto mt-20 space-y-2 rounded-3xl relative">
     <div class="flex gap-2 mx-auto justify-center">
       <!-- <img src="/images/bitcoin.png" class="w-16 h-16 my-auto" /> -->
       <img src="/images/bitcoin-logo.png" class="my-auto w-[400px]" alt="Bitcoin" />
@@ -43,6 +44,6 @@
 
   <button onclick={() => copy(lnurl)} class="flex gap-1 m-auto my-8">
     <iconify-icon icon="ph:copy-bold" width={32}></iconify-icon>
-    LNURL
+    {$t("user.copyLnurl")}
   </button>
 </div>
diff --git a/src/routes/(app)/settings/account/+page.svelte b/src/routes/(app)/settings/account/+page.svelte
index 8622553e..bb9ddbc6 100644
--- a/src/routes/(app)/settings/account/+page.svelte
+++ b/src/routes/(app)/settings/account/+page.svelte
@@ -146,7 +146,7 @@
 
 {#if connect !== "connected"}
   <a href={connect} class="btn flex">
-    <img src="/images/square.svg" class="w-12" alt="Square" />
+    <img src="/images/square.svg" class="w-12" class:invert={$theme === "dark"} alt="Square" />
     <div>{$t("user.settings.connectSquare")}</div>
   </a>
 {:else}
diff --git a/src/routes/(app)/settings/profile/+page.svelte b/src/routes/(app)/settings/profile/+page.svelte
index 201a9c30..a6e86d58 100644
--- a/src/routes/(app)/settings/profile/+page.svelte
+++ b/src/routes/(app)/settings/profile/+page.svelte
@@ -3,6 +3,9 @@
   import { avatar, banner as bannerStore } from "$lib/store";
   import { t } from "$lib/translations";
   import { page } from "$app/stores";
+  import { copy } from "$lib/utils";
+  import { bech32 } from "@scure/base";
+  import { PUBLIC_DOMAIN } from "$env/static/public";
   import PasswordInput from "$comp/PasswordInput.svelte";
 
   let { data } = $props();
@@ -60,6 +63,20 @@
   let full = $derived(`${$page.url.protocol}//${url}`);
   let addr = $derived(`${username}@${$page.url.host}`);
 
+  let { encode, toWords } = bech32;
+  let stripped = $derived((username as string)?.replace(/\s/g, ""));
+  let lnurl = $derived(
+    stripped
+      ? encode(
+          "lnurl",
+          toWords(
+            new TextEncoder().encode(`https://${PUBLIC_DOMAIN}/p/${user?.anon ? user.npub : stripped}`),
+          ),
+          20000,
+        )
+      : "",
+  );
+
   $effect(() => {
     if (!user) return;
     if (typeof about === "undefined") about = user.about;
@@ -179,3 +196,29 @@
   <textarea name="about" bind:value={about} placeholder={$t("user.settings.aboutPlaceholder")}
   ></textarea>
 </div>
+
+{#if lnurl}
+  <div>
+    <span class="font-bold">{$t("user.paymentCode")}</span>
+    <div class="flex gap-4">
+      <div class="break-all grow text-xl">{lnurl}</div>
+      <div class="flex mb-auto gap-1">
+        <button
+          type="button"
+          class="my-auto"
+          aria-label="Copy payment code"
+          onclick={() => copy(`lightning:${lnurl}`)}
+        >
+          <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
+        </button>
+        <a
+          href={`/${username}/accepted/${encodeURIComponent(`lightning:${lnurl}`)}`}
+          class="my-auto"
+          aria-label="Show payment code QR"
+        >
+          <iconify-icon noobserver icon="ph:qr-code-bold" width="32"></iconify-icon>
+        </a>
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/src/routes/(static)/register/+page.svelte b/src/routes/(static)/register/+page.svelte
index 8645356a..9c196011 100644
--- a/src/routes/(static)/register/+page.svelte
+++ b/src/routes/(static)/register/+page.svelte
@@ -115,14 +115,14 @@
         bind:value={username}
         onfocus={clear}
         autocapitalize="none"
-        placeholder="Your username"
+        placeholder={$t("login.usernamePlaceholder")}
         onkeydown={(e: KeyboardEvent) => e.key === "Enter" && continueToAuth()}
       />
       <span class="at-suffix font-bold whitespace-nowrap select-none self-stretch flex items-center px-3">@coinos.io</span>
     </label>
 
     <button class="btn btn-accent" onclick={continueToAuth}>
-      Continue
+      {$t("login.continue")}
     </button>
 
     <p class="text-secondary text-center font-medium">
diff --git a/src/routes/(static)/register/auth/+page.svelte b/src/routes/(static)/register/auth/+page.svelte
index 5809ef4b..80915108 100644
--- a/src/routes/(static)/register/auth/+page.svelte
+++ b/src/routes/(static)/register/auth/+page.svelte
@@ -363,7 +363,7 @@
       {:else}
         <iconify-icon noobserver icon="ph:fingerprint-bold" width="24"></iconify-icon>
       {/if}
-      <div class="my-auto">Register with Passkey</div>
+      <div class="my-auto">{$t("login.registerPasskey")}</div>
     </button>
 
     <button type="button" class="btn" onclick={nostrLogin}>
@@ -374,7 +374,7 @@
       {:else}
         <img src="/images/nostr.png" class="w-8" alt="Nostr" />
       {/if}
-      <div class="my-auto">Register with Nostr</div>
+      <div class="my-auto">{$t("login.registerNostr")}</div>
     </button>
 
     <p class="text-secondary text-center font-medium">