From 211511570b447ad0256a992bf8e3b5dfa8a82fb7 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Thu, 26 Feb 2026 22:10:12 -0800
Subject: fix amount toggles

---
 .../(app)/ecash/[id]/[...version]/+layout.svelte   | 30 ++++++++------------
 src/routes/(app)/fund/[id]/withdraw/+page.svelte   |  7 ++---
 src/routes/(app)/invoice/[id]/tip/+page.svelte     | 32 ++++++++++------------
 src/routes/(app)/payment/[id]/+page.svelte         | 26 +++++++-----------
 src/routes/(app)/payment/[id]/plain/+page.svelte   | 21 ++++----------
 src/routes/(app)/payments/[...page]/+page.svelte   | 12 ++++----
 .../send/lightning/[payreq]/[...memo]/+page.svelte |  7 ++---
 src/routes/(app)/settings/nostr/+page.svelte       |  7 ++---
 8 files changed, 54 insertions(+), 88 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/(app)/ecash/[id]/[...version]/+layout.svelte b/src/routes/(app)/ecash/[id]/[...version]/+layout.svelte
index 5da0c1c3..217b9ced 100644
--- a/src/routes/(app)/ecash/[id]/[...version]/+layout.svelte
+++ b/src/routes/(app)/ecash/[id]/[...version]/+layout.svelte
@@ -27,13 +27,10 @@
 
   {#if amount > 0}
     <div class="text-center font-bold text-2xl">
-      {#if $fiat}
-        <div>{f(amountFiat, currency)}</div>
-      {:else}
-        <div>
-          <span class="text-secondary font-normal text-xl">⚡️{`${s(amount)}`}</span>
-        </div>
-      {/if}
+      <div class:hidden={!$fiat}>{f(amountFiat, currency)}</div>
+      <div class:hidden={$fiat}>
+        <span class="text-secondary font-normal text-xl">⚡️{`${s(amount)}`}</span>
+      </div>
     </div>
   {/if}
 
@@ -44,17 +41,14 @@
 
   {#if spent > 0}
     <div class="text-center font-bold text-2xl">
-      {#if $fiat}
-        <div>
-          {f(spentFiat, currency)}
-          <span class=" text-red-600">{$t("payments.spent")}</span>
-        </div>
-      {:else}
-        <div>
-          <span class="text-secondary font-normal text-xl">⚡️{`${s(spent)}`}</span>
-          <span class=" text-red-600">{$t("payments.spent")}</span>
-        </div>
-      {/if}
+      <div class:hidden={!$fiat}>
+        {f(spentFiat, currency)}
+        <span class=" text-red-600">{$t("payments.spent")}</span>
+      </div>
+      <div class:hidden={$fiat}>
+        <span class="text-secondary font-normal text-xl">⚡️{`${s(spent)}`}</span>
+        <span class=" text-red-600">{$t("payments.spent")}</span>
+      </div>
     </div>
   {/if}
 
diff --git a/src/routes/(app)/fund/[id]/withdraw/+page.svelte b/src/routes/(app)/fund/[id]/withdraw/+page.svelte
index 64597d53..4ef2ad62 100644
--- a/src/routes/(app)/fund/[id]/withdraw/+page.svelte
+++ b/src/routes/(app)/fund/[id]/withdraw/+page.svelte
@@ -56,11 +56,8 @@
         disabled={submitting}
         onkeydown={setMax}
       >
-        {#if $fiat}
-          Max {f((balance * rate) / sats, currency, locale)}
-        {:else}
-          Max ⚡️{s(balance)}
-        {/if}
+        <span class:hidden={!$fiat}>Max {f((balance * rate) / sats, currency, locale)}</span>
+        <span class:hidden={$fiat}>Max ⚡️{s(balance)}</span>
       </button>
 
       <button bind:this={submit} type="submit" class="btn btn-accent !w-auto grow" disabled={submitting || !amount}>
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index 54475f2f..475aac02 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -103,26 +103,22 @@
       <Slider handle={handleSlide} bind:value={tipPercent} />
 
       <div class="flex mb-8 text-lg">
-        {#if $fiat}
-          <div>
-            <span class="mr-1">
-              {f(amountFiat, currency, locale)}
-              <span class="font-semibold">+{f(tipAmount, currency, locale)}</span>
-            </span>
+        <div class:hidden={!$fiat}>
+          <span class="mr-1">
+            {f(amountFiat, currency, locale)}
+            <span class="font-semibold">+{f(tipAmount, currency, locale)}</span>
+          </span>
+        </div>
+        <div class="ml-auto text-lg flex gap-2" class:hidden={$fiat}>
+          <div class="flex items-center">
+            <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"
+            ></iconify-icon>
+            <div>{s(amount, locale)}</div>
           </div>
-        {:else}
-          <div class="ml-auto text-lg flex gap-2">
-            <div class="flex items-center">
-              <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"
-              ></iconify-icon>
-              <div>{s(amount, locale)}</div>
-            </div>
-
-            <div class="flex items-center">
-              <div class="font-semibold">+{s(tip, locale)}</div>
-            </div>
+          <div class="flex items-center">
+            <div class="font-semibold">+{s(tip, locale)}</div>
           </div>
-        {/if}
+        </div>
       </div>
 
       <div class="space-y-2">
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 80474a55..225baa69 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -82,14 +82,11 @@
       onclick={toggleFiat}
       aria-label="Toggle currency display"
     >
-      {#if $fiat}
-        <div>{f(toFiat(amount, rate), currency, userLocale)}</div>
-      {:else}
-        <div class="flex items-center">
-          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
-          {s(amount, userLocale)}
-        </div>
-      {/if}
+      <div class:hidden={!$fiat}>{f(toFiat(amount, rate), currency, userLocale)}</div>
+      <div class="flex items-center" class:hidden={$fiat}>
+        <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
+        {s(amount, userLocale)}
+      </div>
     </button>
   </div>
 {/snippet}
@@ -144,14 +141,11 @@
       onclick={toggleFiat}
       aria-label="Toggle currency display"
     >
-      {#if $fiat}
-        {f(toFiat(a, rate), currency, userLocale)}
-      {:else}
-        <span class="flex items-center">
-          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
-          {s(a, userLocale)}
-        </span>
-      {/if}
+      <span class:hidden={!$fiat}>{f(toFiat(a, rate), currency, userLocale)}</span>
+      <span class="flex items-center" class:hidden={$fiat}>
+        <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
+        {s(a, userLocale)}
+      </span>
     </button>
     <div class="text-secondary">
       {format(new Date(created), "MMM d, yyyy", { locale })}<span class="mx-3">{format(new Date(created), "h:mmaaa", { locale })}</span>
diff --git a/src/routes/(app)/payment/[id]/plain/+page.svelte b/src/routes/(app)/payment/[id]/plain/+page.svelte
index 41cdd25b..1efe2c32 100644
--- a/src/routes/(app)/payment/[id]/plain/+page.svelte
+++ b/src/routes/(app)/payment/[id]/plain/+page.svelte
@@ -40,11 +40,8 @@
   <div>
     <span class="text-lg text-secondary">Amount</span>
     <div>
-      {#if $fiat}
-        {f(toFiat(a, rate), currency)}
-      {:else}
-        {s(a)}
-      {/if}
+      <span class:hidden={!$fiat}>{f(toFiat(a, rate), currency)}</span>
+      <span class:hidden={$fiat}>{s(a)}</span>
     </div>
   </div>
 
@@ -52,11 +49,8 @@
     <div>
       <span class="text-lg text-secondary">Tip</span>
       <div>
-        {#if $fiat}
-          {f(toFiat(tip, rate), currency)}
-        {:else}
-          {s(tip)}
-        {/if}
+        <span class:hidden={!$fiat}>{f(toFiat(tip, rate), currency)}</span>
+        <span class:hidden={$fiat}>{s(tip)}</span>
         ({Math.round((tip * 100) / Math.abs(a))}%)
       </div>
     </div>
@@ -64,11 +58,8 @@
     <div>
       <span class="text-lg text-secondary">Total</span>
       <div>
-        {#if $fiat}
-          {f(toFiat(a + (tip || 0), rate), currency)}
-        {:else}
-          {s(a + (tip || 0))}
-        {/if}
+        <span class:hidden={!$fiat}>{f(toFiat(a + (tip || 0), rate), currency)}</span>
+        <span class:hidden={$fiat}>{s(a + (tip || 0))}</span>
       </div>
     </div>
   {/if}
diff --git a/src/routes/(app)/payments/[...page]/+page.svelte b/src/routes/(app)/payments/[...page]/+page.svelte
index bc207aad..1d5a0407 100644
--- a/src/routes/(app)/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/payments/[...page]/+page.svelte
@@ -151,11 +151,11 @@
   <h1 class="text-center text-3xl md:text-4xl font-semibold">{$t("payments.header")}</h1>
 
   <div class="container w-full mx-auto text-lg px-2 max-w-xl space-y-2">
-    <div class="mx-auto flex justify-center w-full gap-1">
+    <div class="flex w-full gap-1">
       {#each presets as { start, end, title }, i}
         <a
           href={`/payments/${getUnixTime(start)}/1`}
-          class="btn !w-auto"
+          class="btn !w-auto flex-1"
           class:!btn-active={selection === i}
         >
           {title}
@@ -163,17 +163,17 @@
       {/each}
     </div>
 
-    <div class="join flex flex-wrap justify-center">
+    <div class="join flex flex-wrap w-full">
       {#if pages.length > 1}
         {#each pages as _, i}
           {#if showPage(i)}
-            <a href={`${path}/${i + 1}`}>
-              <div class="join-item btn !btn-sm" class:btn-active={parseInt(p) === i + 1}>
+            <a href={`${path}/${i + 1}`} class="flex-1">
+              <div class="join-item btn !btn-sm w-full" class:btn-active={parseInt(p) === i + 1}>
                 {i + 1}
               </div>
             </a>
           {:else if isEllipsis(i)}
-            <div class="join-item btn !w-auto !btn-sm btn-disabled !bg-base-200">...</div>
+            <div class="join-item btn !w-auto !btn-sm btn-disabled !bg-base-200 flex-1">...</div>
           {/if}
         {/each}
       {/if}
diff --git a/src/routes/(app)/send/lightning/[payreq]/[...memo]/+page.svelte b/src/routes/(app)/send/lightning/[payreq]/[...memo]/+page.svelte
index 38407a0d..fc80e161 100644
--- a/src/routes/(app)/send/lightning/[payreq]/[...memo]/+page.svelte
+++ b/src/routes/(app)/send/lightning/[payreq]/[...memo]/+page.svelte
@@ -120,11 +120,8 @@
 
         <div class="flex flex-wrap gap-4 justify-center">
           <div class="my-auto">
-            {#if $fiat}
-              <h2 class="text-xl">{f(toFiat(ourfee as number, $rate as number), currency)}</h2>
-            {:else}
-              <h3 class="text-secondary">⚡️{s(ourfee)}</h3>
-            {/if}
+            <h2 class="text-xl" class:hidden={!$fiat}>{f(toFiat(ourfee as number, $rate as number), currency)}</h2>
+            <h3 class="text-secondary" class:hidden={$fiat}>⚡️{s(ourfee)}</h3>
           </div>
         </div>
       </div>
diff --git a/src/routes/(app)/settings/nostr/+page.svelte b/src/routes/(app)/settings/nostr/+page.svelte
index 844433c3..90c7bf1e 100644
--- a/src/routes/(app)/settings/nostr/+page.svelte
+++ b/src/routes/(app)/settings/nostr/+page.svelte
@@ -70,11 +70,8 @@
                 <div class="flex items-center">
                   <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"
                   ></iconify-icon>
-                  {#if $fiat && $rate}
-                    {f((app.spent * ($rate as number)) / sats, user.currency, locale)} / {f((app.max_amount * ($rate as number)) / sats, user.currency, locale)}
-                  {:else}
-                    {s(app.spent, locale)} / {s(app.max_amount, locale)}
-                  {/if}
+                  <span class:hidden={!($fiat && $rate)}>{f((app.spent * ($rate as number)) / sats, user.currency, locale)} / {f((app.max_amount * ($rate as number)) / sats, user.currency, locale)}</span>
+                  <span class:hidden={$fiat && $rate}>{s(app.spent, locale)} / {s(app.max_amount, locale)}</span>
                 </div>
 
                 {#if app.budget_renewal !== "never"}
-- 
cgit v1.2.3