1 files changed, 72 insertions, 25 deletions
diff --git a/src/routes/(app)/invoices/+page.svelte b/src/routes/(app)/invoices/+page.svelte
index fbacb2df..cd1db52a 100644
--- a/src/routes/(app)/invoices/+page.svelte
+++ b/src/routes/(app)/invoices/+page.svelte
@@ -1,35 +1,82 @@
 <script>
+  import { copy, loc, s, types } from "$lib/utils";
+  import { t } from "$lib/translations";
+
   let { data } = $props();
-  let { invoices } = $derived(data);
-  let show = $state({});
-  let display = (id) => (show[id] = true);
+  let { invoices, user } = $derived(data);
+  let locale = $derived(loc(user));
+
+  let memoText = (memo) =>
+    memo?.startsWith("[") ? JSON.parse(memo)[0][1] : memo;
 </script>
 
-<div class="container w-full mx-auto text-lg px-2 space-y-2">
-  <div class="mx-auto flex justify-center w-full gap-1">
+<div class="container w-full mx-auto px-2 py-4 max-w-3xl">
+  <h1 class="text-2xl font-bold mb-4 px-2">{$t("invoice.invoice")}</h1>
+
+  <div
+    class="flex items-center gap-3 px-2 py-2 text-secondary text-sm font-medium border-b border-base-200"
+  >
+    <div class="w-24 sm:w-28 shrink-0">{$t("payments.type")}</div>
+    <div class="flex-1 min-w-0">{$t("invoice.invoice")}</div>
+    <div class="shrink-0 text-right">
+      {$t("payments.received")} / {$t("payments.amount")}
+    </div>
+  </div>
+
+  {#each invoices as i (i.id)}
     <div
-      class="grid md:grid-cols-12 w-full text-center text-lg break-all gap-x-2"
+      class="flex items-center gap-3 border-b border-base-200 hover:bg-base-200 px-2 py-3"
     >
-      {#each invoices as i}
-        <div class="md:col-span-2 whitespace-nowrap mt-8 md:mt-0">{i.type}</div>
-        {#if show[i.id]}
-          <div class="md:col-span-8">{i.hash}</div>
-        {:else}
-          <div
-            class="cursor-pointer grow md:col-span-6"
-            onclick={() => display(i.id)}
-          >
-            {i.hash.substr(0, 12)}
-            {#if !show[i.id]}...{/if}
+      <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}
+          <iconify-icon
+            noobserver
+            icon="ph:lightning-fill"
+            width="22"
+            class="text-yellow-300 shrink-0"
+          ></iconify-icon>
+        {:else if i.type === types.bitcoin}
+          <iconify-icon
+            noobserver
+            icon="logos:bitcoin"
+            width="22"
+            class="shrink-0"
+          ></iconify-icon>
+        {:else if i.type === types.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>
         {/if}
-        <div class="md:col-span-2 whitespace-nowrap">
-          {i.received} / {i.amount}
-        </div>
-        <div class="whitespace-nowrap">
-          {i.memo?.startsWith("[") ? JSON.parse(i.memo)[0][1] : i.memo}
-        </div>
-      {/each}
+      </button>
+
+      <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>
     </div>
-  </div>
+  {:else}
+    <p class="text-secondary text-lg text-center py-12">
+      {$t("payments.empty")}
+    </p>
+  {/each}
 </div>