Tweak mobile nav

src/app/components/MenuSettings.svelte

@@ -28,42 +28,42 @@
           <Profile inert pubkey={$pubkey} />
         </Link>
       {/if}
-      <div class="grid grid-cols-2 gap-3 w-full">
+      <div class="grid grid-cols-3 gap-3 w-full">
         <Link
           replaceState
           href="/settings/alerts"
-          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-4 text-center">
-          <Icon icon={Bell} size={7} />
+          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
+          <Icon icon={Bell} size={5} />
           Alerts
         </Link>
         {#if Capacitor.getPlatform() !== "ios"}
           <Link
             replaceState
             href="/settings/wallet"
-            class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-4 text-center">
-            <Icon icon={Wallet} size={7} />
+            class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
+            <Icon icon={Wallet} size={5} />
             Wallet
           </Link>
         {/if}
         <Link
           replaceState
           href="/settings/relays"
-          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-4 text-center">
-          <Icon icon={Server} size={7} />
+          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
+          <Icon icon={Server} size={5} />
           Relays
         </Link>
         <Link
           replaceState
           href="/settings/content"
-          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-4 text-center">
-          <Icon icon={GalleryMinimalistic} size={7} />
+          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
+          <Icon icon={GalleryMinimalistic} size={5} />
           Content
         </Link>
         <Link
           replaceState
           href="/settings/privacy"
-          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-4 text-center">
-          <Icon icon={Shield} size={7} />
+          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
+          <Icon icon={Shield} size={5} />
           Privacy
         </Link>
       </div>

src/app/components/PrimaryNav.svelte

@@ -3,7 +3,6 @@
   import {userProfile} from "@welshman/app"
   import Letter from "@assets/icons/letter.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
-  import HomeSmile from "@assets/icons/home-smile.svg?dataurl"
   import Planet from "@assets/icons/planet-3.svg?dataurl"
   import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
   import Settings from "@assets/icons/settings.svg?dataurl"
@@ -71,11 +70,12 @@
   class="bottom-nav hide-on-keyboard border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
   <div class="content-padding-x content-sizing flex justify-between px-2">
     <div class="flex gap-2 sm:gap-6">
-      <PrimaryNavItem title="Home" href="/home">
-        <ImageIcon alt="Home" src={HomeSmile} size={8} />
+      <PrimaryNavItem title="Search" href="/people">
+        <ImageIcon alt="Search" src={Magnifier} size={8} />
       </PrimaryNavItem>
       <PrimaryNavItem
         title="Messages"
+        href="/chat"
         onclick={goToLastChat}
         notification={$notifications.has("/chat")}>
         <ImageIcon alt="Messages" src={Letter} size={8} />

src/lib/components/PrimaryNavItem.svelte

@@ -15,20 +15,7 @@
   const active = $derived($page.url?.pathname?.startsWith(prefix || href || "bogus"))
 </script>
 
-{#if href}
-  <a {href} class="relative z-nav-item flex h-14 w-14 items-center justify-center p-1">
-    <div
-      class="aspect-square flex-grow cursor-pointer rounded-full {restProps.class} flex items-center justify-center transition-colors hover:bg-base-300"
-      class:bg-base-300={active}
-      class:tooltip={title}
-      data-tip={title}>
-      {@render children?.()}
-      {#if !active && notification}
-        <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary"></div>
-      {/if}
-    </div>
-  </a>
-{:else}
+{#if onclick}
   <Button {onclick} class="relative z-nav-item flex h-14 w-14 items-center justify-center p-1">
     <div
       class="aspect-square flex-grow cursor-pointer rounded-full {restProps.class} flex items-center justify-center transition-colors hover:bg-base-300"
@@ -41,4 +28,17 @@
       {/if}
     </div>
   </Button>
+{:else}
+  <a {href} class="relative z-nav-item flex h-14 w-14 items-center justify-center p-1">
+    <div
+      class="aspect-square flex-grow cursor-pointer rounded-full {restProps.class} flex items-center justify-center transition-colors hover:bg-base-300"
+      class:bg-base-300={active}
+      class:tooltip={title}
+      data-tip={title}>
+      {@render children?.()}
+      {#if !active && notification}
+        <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary"></div>
+      {/if}
+    </div>
+  </a>
 {/if}