ui tweaks

6 files changed, 39 insertions, 24 deletions

diff --git a/src/app.html b/src/app.html
index e3206d6f..e82ad055 100644
--- a/src/app.html
+++ b/src/app.html
@@ -15,6 +15,12 @@
     <link rel="apple-touch-icon" href="/images/icon-160.png" />
     <link rel="manifest" href="/manifest.webmanifest" />
     %sveltekit.head%
+    <script>
+      window.addEventListener("beforeinstallprompt", (e) => {
+        e.preventDefault();
+        window.__installPrompt = e;
+      });
+    </script>
   </head>
   <body data-sveltekit-preload-data="hover">
     <div style="display: contents">%sveltekit.body%</div>
diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 2ea7c9c0..ab788eb2 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -175,7 +175,7 @@
 </script>
 
 <div
-  class="space-y-4 p-4 cursor-pointer hover:bg-base-200"
+  class="space-y-4 cursor-pointer hover:bg-base-200"
   aria-label="Payments"
   data-testid="account-card"
   data-account-type={accountType}
@@ -184,7 +184,7 @@
   onclick={goPayments}
   onkeydown={(e) => (e.key === "Enter" || e.key === " ") && goPayments(e)}
 >
-  <div class="flex items-start justify-between gap-4">
+  <div class="flex items-start justify-between gap-4 md:p-4">
     <div>
       <div class="text-lg text-gray-400">{displayName}</div>
       {#if $importing.has(id)}
@@ -198,7 +198,7 @@
         {/if}
       {/if}
     </div>
-    <div class="flex items-center gap-1 shrink-0 text-black">
+    <div class="flex items-center gap-1 shrink-0 text-base-content">
       <a
         href="/payments"
         class="hover:text-gray-800 w-10 h-10 flex items-center justify-center"
@@ -226,7 +226,7 @@
           noobserver
           icon="ph:gear-bold"
           width="20"
-          class="absolute -bottom-1 -right-1 text-black bg-base-100 rounded-full"
+          class="absolute -bottom-1 -right-1 text-base-content bg-base-100 rounded-full"
         ></iconify-icon>
       </a>
     </div>
@@ -237,14 +237,14 @@
       <button class="btn !w-auto flex-1" data-testid="account-receive">
         <iconify-icon noobserver icon="ph:hand-coins-bold" width="32" flip="horizontal"
         ></iconify-icon>
-        <div class="my-auto hidden sm:block">{$t("user.dashboard.receive")}</div>
+        <div class="my-auto">{$t("user.dashboard.receive")}</div>
       </button>
     </a>
 
     <a href={`/send`} class="contents" onclick={(e) => setAccount(e, "/send")}>
       <button type="button" class="btn btn-accent !w-auto flex-1">
         <iconify-icon noobserver icon="ph:paper-plane-right-bold" width="32"></iconify-icon>
-        <div class="my-auto hidden sm:block">{$t("user.dashboard.send")}</div>
+        <div class="my-auto">{$t("user.dashboard.send")}</div>
       </button>
     </a>
   </div>
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index ca196cdf..27698a77 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -21,12 +21,18 @@
         : undefined,
   );
 
+  let isHome = $derived($page.url.pathname === `/${user?.username}`);
+
   const links = $derived([
-    {
-      href: `/${user?.username}`,
-      icon: "ph:house-bold",
-      label: "Home",
-    },
+    ...(!isHome
+      ? [
+          {
+            href: `/${user?.username}`,
+            icon: "ph:house-bold",
+            label: "Home",
+          },
+        ]
+      : []),
     // {
     //   href: `/scan`,
     //   icon: "ph:camera-bold",
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 39aca251..168be9b2 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -234,7 +234,7 @@
   </div>
 
   <div class="w-full">
-    <div class="mx-auto space-y-5 lg:max-w-xl xl:max-w-2xl lg:pl-10 mt-5 lg:mt-0">
+    <div class="mx-auto space-y-5 lg:max-w-xl xl:max-w-2xl lg:pl-10 mt-5 lg:mt-0 pb-12">
       {@render children?.()}
     </div>
   </div>
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 7f6f4036..50048e15 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -107,7 +107,7 @@
     </a>
   {/if}
   {#if user?.id && user.id === subject.id}
-    <div class="space-y-10 pb-8" data-sveltekit-preload-data="false">
+    <div class="space-y-4" data-sveltekit-preload-data="false">
       {#each accounts as account}
         <Account {user} {rates} {account} />
       {/each}
@@ -119,18 +119,18 @@
           {$t("accounts.addAccount")}
         {/if}
       </button>
-    </div>
 
-    {#if locked}
-      <div class="text-sm">{$t("incident")}</div>
-    {/if}
+      {#if locked}
+        <div class="text-sm">{$t("incident")}</div>
+      {/if}
 
-    {#if $installPrompt}
-      <button class="btn btn-accent lg:hidden" onclick={install}>
-        <iconify-icon noobserver icon="ph:floppy-disk-bold" width="32"></iconify-icon>
-        {$t("user.install")}
-      </button>
-    {/if}
+      {#if $installPrompt}
+        <button class="btn btn-accent w-full lg:hidden" onclick={install}>
+          <iconify-icon noobserver icon="ph:floppy-disk-bold" width="32"></iconify-icon>
+          {$t("user.install")}
+        </button>
+      {/if}
+    </div>
   {/if}
 </div>
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f1091c2f..c68934b2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -40,7 +40,10 @@
   onMount(() => {
     if (!browser) return;
 
-    // Handle install prompt
+    // Pick up install prompt captured early in app.html
+    if (window.__installPrompt) {
+      $installPrompt = window.__installPrompt;
+    }
     window.addEventListener("beforeinstallprompt", (event) => {
       event.preventDefault();
       $installPrompt = event;