Switch to different navigation style

frontend/src/pages/Account.tsx

@@ -1,7 +1,8 @@
-import { createMemo, createResource, createSignal, For, Show } from "solid-js"
+import { createEffect, createMemo, createResource, createSignal, For, Show } from "solid-js"
 import { getTenant, listTenantInvoices, updateTenantBilling } from "../lib/api"
 import PageContainer from "../components/PageContainer"
-import ResourceState from "../components/ResourceState"
+import LoadingState from "../components/LoadingState"
+import useMinLoading from "../components/useMinLoading"
 
 export default function Account() {
   const [tenant, { refetch: refetchTenant }] = createResource(getTenant)
@@ -9,15 +10,24 @@ export default function Account() {
   const [nwcUrl, setNwcUrl] = createSignal("")
   const [saving, setSaving] = createSignal(false)
   const [error, setError] = createSignal("")
+  const invoicesLoading = useMinLoading(() => invoices.loading)
 
-  const recurringEnabled = createMemo(() => !!tenant()?.tenant_nwc_url?.trim())
+  const hasBillingChanges = createMemo(() => {
+    const current = tenant()?.tenant_nwc_url?.trim() ?? ""
+    const next = nwcUrl().trim()
+    return current !== next
+  })
+
+  createEffect(() => {
+    setNwcUrl(tenant()?.tenant_nwc_url ?? "")
+  })
 
   async function saveBilling() {
     setError("")
     setSaving(true)
     try {
-      await updateTenantBilling(nwcUrl().trim())
-      setNwcUrl("")
+      const next = nwcUrl().trim()
+      await updateTenantBilling(next)
       await refetchTenant()
     } catch (e) {
       setError(e instanceof Error ? e.message : "Failed to update billing")
@@ -28,7 +38,7 @@ export default function Account() {
 
   return (
     <PageContainer>
-      <h1 class="text-2xl font-bold text-gray-900 mb-6">My Account</h1>
+      <h1 class="text-2xl font-bold text-gray-900 mb-6 py-4">My Account</h1>
 
       <div class="space-y-6">
         <section class="bg-white border border-gray-200 rounded-xl p-6">
@@ -42,12 +52,6 @@ export default function Account() {
               )}
             </Show>
           </div>
-          <ResourceState
-            loading={tenant.loading}
-            error={undefined}
-            loadingText="Loading account..."
-            errorText=""
-          />
         </section>
 
         <section class="bg-white border border-gray-200 rounded-xl p-6">
@@ -66,22 +70,11 @@ export default function Account() {
             <button
               type="button"
               onClick={saveBilling}
-              disabled={saving()}
+              disabled={saving() || !hasBillingChanges()}
               class="py-2 px-4 bg-blue-600 text-white rounded-lg disabled:opacity-50"
             >
               {saving() ? "Saving..." : "Save"}
             </button>
-            <button
-              type="button"
-              onClick={() => {
-                setNwcUrl("")
-                void saveBilling()
-              }}
-              disabled={saving() || !recurringEnabled()}
-              class="py-2 px-4 border border-gray-300 rounded-lg disabled:opacity-50"
-            >
-              Disable
-            </button>
           </div>
           <Show when={error()}>
             <p class="mt-3 text-sm text-red-600">{error()}</p>
@@ -90,24 +83,26 @@ export default function Account() {
 
         <section class="bg-white border border-gray-200 rounded-xl p-6">
           <h2 class="text-lg font-semibold text-gray-900 mb-4">Invoice History</h2>
-          <Show when={invoices.loading}>
-            <p class="text-gray-500">Loading invoices...</p>
+          <Show when={invoicesLoading()}>
+            <LoadingState message="Loading invoices..." paddingClass="py-8" />
           </Show>
-          <Show when={(invoices()?.length ?? 0) > 0} fallback={<p class="text-gray-500">No invoices yet.</p>}>
-            <ul class="space-y-3">
-              <For each={invoices()}>
-                {(invoice) => (
-                  <li class="rounded-lg border border-gray-200 p-3 text-sm text-gray-700">
-                    <div class="flex items-center justify-between gap-3">
-                      <span class="font-medium">{invoice.amount.toLocaleString()} sats</span>
-                      <span class="uppercase text-xs tracking-wide text-gray-500">{invoice.status}</span>
-                    </div>
-                    <p class="text-xs text-gray-500 mt-1">{new Date(invoice.created_at).toLocaleString()}</p>
-                    <p class="text-xs mt-2 break-all">{invoice.invoice}</p>
-                  </li>
-                )}
-              </For>
-            </ul>
+          <Show when={!invoicesLoading()}>
+            <Show when={(invoices()?.length ?? 0) > 0} fallback={<p class="text-gray-500">No invoices yet.</p>}>
+              <ul class="space-y-3">
+                <For each={invoices()}>
+                  {(invoice) => (
+                    <li class="rounded-lg border border-gray-200 p-3 text-sm text-gray-700">
+                      <div class="flex items-center justify-between gap-3">
+                        <span class="font-medium">{invoice.amount.toLocaleString()} sats</span>
+                        <span class="uppercase text-xs tracking-wide text-gray-500">{invoice.status}</span>
+                      </div>
+                      <p class="text-xs text-gray-500 mt-1">{new Date(invoice.created_at).toLocaleString()}</p>
+                      <p class="text-xs mt-2 break-all">{invoice.invoice}</p>
+                    </li>
+                  )}
+                </For>
+              </ul>
+            </Show>
           </Show>
         </section>
       </div>