invoices fix

1 files changed, 56 insertions, 20 deletions

diff --git a/src/routes/(app)/invoices/+page.svelte b/src/routes/(app)/invoices/+page.svelte
index cd1db52a..40cf337a 100644
--- a/src/routes/(app)/invoices/+page.svelte
+++ b/src/routes/(app)/invoices/+page.svelte
@@ -6,8 +6,17 @@
   let { invoices, user } = $derived(data);
   let locale = $derived(loc(user));
 
-  let memoText = (memo) =>
-    memo?.startsWith("[") ? JSON.parse(memo)[0][1] : memo;
+  let open = $state({});
+  let toggle = (idx) => (open[idx] = !open[idx]);
+
+  let memoText = (memo) => {
+    if (!memo?.startsWith("[")) return memo;
+    try {
+      return JSON.parse(memo)[0][1];
+    } catch {
+      return memo;
+    }
+  };
 </script>
 
 <div class="container w-full mx-auto px-2 py-4 max-w-3xl">
@@ -21,11 +30,16 @@
     <div class="shrink-0 text-right">
       {$t("payments.received")} / {$t("payments.amount")}
     </div>
+    <div class="w-[18px] shrink-0"></div>
   </div>
 
-  {#each invoices as i (i.id)}
+  {#each invoices as i, idx}
+    {@const memo = memoText(i.memo)}
     <div
-      class="flex items-center gap-3 border-b border-base-200 hover:bg-base-200 px-2 py-3"
+      class="flex gap-3 border-b border-base-200 hover:bg-base-200 px-2 py-3 cursor-pointer select-none"
+      class:items-center={!open[idx]}
+      class:items-start={open[idx]}
+      onclick={() => toggle(idx)}
     >
       <div class="w-24 sm:w-28 shrink-0 flex items-center gap-2 min-w-0">
         {#if i.type === types.lightning || i.type === types.bolt12}
@@ -43,36 +57,58 @@
             class="shrink-0"
           ></iconify-icon>
         {:else if i.type === types.liquid}
-          <img
-            src="/images/liquid.svg"
-            class="w-[22px] shrink-0"
-            alt="Liquid"
-          />
+          <img src="/images/liquid.svg" class="w-[22px] shrink-0" alt="Liquid" />
         {:else if i.type === types.ecash}
           <img src="/images/cash.png" class="w-[22px] shrink-0" alt="Ecash" />
         {/if}
         <span class="truncate text-sm">{i.type}</span>
       </div>
 
-      <button
-        type="button"
-        class="flex-1 min-w-0 text-left cursor-pointer"
-        onclick={() => copy(i.hash)}
-        title={i.hash}
-      >
-        <div class="truncate font-mono text-sm">{i.hash}</div>
-        {#if memoText(i.memo)}
-          <div class="truncate text-secondary text-xs mt-0.5">
-            {memoText(i.memo)}
+      <div class="flex-1 min-w-0">
+        <div
+          class="font-mono text-sm"
+          class:truncate={!open[idx]}
+          class:break-all={open[idx]}
+        >
+          {i.hash}
+        </div>
+        {#if memo}
+          <div
+            class="text-secondary text-xs mt-0.5"
+            class:truncate={!open[idx]}
+            class:break-all={open[idx]}
+          >
+            {memo}
           </div>
         {/if}
-      </button>
+        {#if open[idx]}
+          <button
+            type="button"
+            class="mt-2 inline-flex items-center gap-1 text-primary text-xs font-medium hover:underline"
+            onclick={(e) => {
+              e.stopPropagation();
+              copy(i.hash);
+            }}
+          >
+            <iconify-icon noobserver icon="ph:copy" width="16"></iconify-icon>
+            {$t("payments.copy")}
+          </button>
+        {/if}
+      </div>
 
       <div class="shrink-0 text-right whitespace-nowrap tabular-nums">
         <span class="text-secondary">{s(i.received, locale)}</span>
         <span class="text-secondary"> / </span>
         {s(i.amount, locale)}
       </div>
+
+      <iconify-icon
+        noobserver
+        icon="ph:caret-down"
+        width="18"
+        class="shrink-0 text-secondary transition-transform"
+        class:rotate-180={open[idx]}
+      ></iconify-icon>
     </div>
   {:else}
     <p class="text-secondary text-lg text-center py-12">