fix: safari layout

app/app.nix

@@ -9,7 +9,7 @@
     {
       packages = {
         app = unstablePkgs.buildNpmPackage {
-          npmDepsHash = "sha256-UzHgLY3bW4DFkjM1du2sx/oJAGn4dZIKn1RsYLyrcl0=";
+          npmDepsHash = "sha256-F4cS2bKYmSlLJRXDjsP1jVwY3Vzz/cDlUMNp1PZjTLg=";
           src = ./.;
           sourceRoot = "app";
           npmFlags = [ "--legacy-peer-deps" ];

app/src/lib/components/footer.svelte

@@ -1,30 +1,27 @@
 <script lang="ts">
-import { navigating } from "$app/stores"
+import { page } from "$app/stores"
 import { cn } from "$lib/utilities/shadcn.ts"
 import HomeIcon from "virtual:icons/lucide/home"
-import MenuIcon from "virtual:icons/lucide/menu"
-import WalletMinimalIcon from "virtual:icons/lucide/wallet"
+import TelescopeIcon from "virtual:icons/lucide/telescope"
 import { Button } from "$lib/components/ui/button/index.ts"
+import WalletMinimalIcon from "virtual:icons/lucide/wallet"
 import ArrowDownUpIcon from "virtual:icons/lucide/arrow-up-down"
-import TelescopeIcon from "virtual:icons/lucide/telescope"
 import FaucetDripIcon from "virtual:icons/fa6-solid/faucet-drip"
-import { Navigation } from "$lib/components/navigation/index.ts"
 
 const onWalletClick = () => document.querySelector("button[data-dialog-trigger]")?.click()
 
-let navigationDrawerOpen = false
-$: if ($navigating) navigationDrawerOpen = false
-
 const navigationIconStyle = "size-7 min-w-6 dark:hover:text-white text-zinc-accent"
+
+const isCurrentPage = (route: string) => $page.route.id === route
 </script>
 
 <footer
   class={cn(
     'overflow-hidden fixed left-0 bottom-0 right-0 w-screen h-16',
-    'border-t-[1px] border-solid border-[#fafafa25] border-opacity-90 backdrop-blur-lg',
+    'border-t-[1px] border-solid border-secondary border-opacity-90 backdrop-blur-lg',
     'grid lg:hidden grid-cols-5 place-content-center items-center',
     // styling children
-    '*:flex *:hover:bg-transparent *:text-xs *:gap-px *:flex-col *:h-16 *:w-full *:rounded-none *:border-solid *:border-t-0',
+    '*:flex *:hover:bg-transparent *:text-xs *:gap-px *:decoration-primary/75 *:flex-col *:h-16 *:w-full *:rounded-none *:border-solid *:border-t-0',
   )}
 >
   <Button
@@ -33,47 +30,45 @@ const navigationIconStyle = "size-7 min-w-6 dark:hover:text-white text-zinc-acce
     name="home"
     variant="link"
     aria-label="Home page link"
+    class={cn(isCurrentPage('/') ? 'bg-secondary/30' : 'bg-transparent')}
   >
     <HomeIcon class={navigationIconStyle} />
     <div>Home</div>
   </Button>
   <Button
     size="icon"
-    name="send"
-    href="/transfer"
     variant="link"
+    name="transfer"
+    href="/transfer"
     aria-label="send page link"
+    class={cn(isCurrentPage('/transfer') ? 'bg-secondary/30' : 'bg-transparent')}
   >
     <ArrowDownUpIcon class={navigationIconStyle} />
     Transfer
   </Button>
   <Button
     size="icon"
-    name="send"
-    href="/explorer"
     variant="link"
+    name="explorer"
+    href="/explorer"
     aria-label="send page link"
+    class={cn(isCurrentPage('/explorer') ? 'bg-secondary/30' : 'bg-transparent')}
   >
     <TelescopeIcon class={navigationIconStyle} />
     Explorer
   </Button>
   <Button
     size="icon"
-    name="send"
+    name="faucet"
     href="/faucet"
     variant="link"
     aria-label="send page link"
+    class={cn(isCurrentPage('/faucet') ? 'bg-secondary/30' : 'bg-transparent')}
   >
     <FaucetDripIcon class={navigationIconStyle} />
     Faucet
   </Button>
-  <Button
-    size="icon"
-    name="wallet"
-    type="button"
-    variant="ghost"
-    on:click={() => onWalletClick()}
-  >
+  <Button size="icon" name="wallet" type="button" variant="ghost" on:click={() => onWalletClick()}>
     <WalletMinimalIcon class={navigationIconStyle} />
     Wallet
   </Button>

app/src/lib/components/header/header.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Shine } from "svelte-ux"
 import { page } from "$app/stores"
 import { cn } from "$lib/utilities/shadcn.ts"
 import SearchBar from "$lib/components/search-bar.svelte"
@@ -22,10 +21,10 @@ import { routes } from "$lib/components/navigation/index.ts"
     <img
       src="/images/logo/union-logo-wide-transparent.svg"
       alt="Union Logo"
-      class="size-full select-none"
+      class="size-full max-w-26 select-none"
     />
   </Button>
-  <div class="flex-1 p-0 m-0">
+  <div class="flex-1 p-0 m-0 w-full">
     <SearchBar />
   </div>
   <div class="hidden sm:flex flex-row space-x-0 my-auto">

app/src/lib/components/search-bar.svelte

@@ -21,7 +21,12 @@ function handleKeyDown(event: KeyboardEvent) {
 }
 
 let windowSize = { width: window.innerWidth, height: window.innerHeight }
-const handleResize = () => (windowSize = { width: window.innerWidth, height: window.innerHeight })
+
+const handleResize = () => {
+  requestAnimationFrame(() => {
+    windowSize = { width: window.innerWidth, height: window.innerHeight }
+  })
+}
 
 onMount(() => {
   window.addEventListener("resize", handleResize)
@@ -39,7 +44,7 @@ const onInputChange = (event: InputEvent) =>
   }, 1_000)(event)
 </script>
 
-<div class="relative mr-auto flex-1 w-full max-w-[485px]">
+<div class="relative mr-auto flex-1 w-full max-w-[490px]">
   <Search class="absolute left-2.5 top-3 size-4 text-muted-foreground" />
   <Input
     type="search"
@@ -54,8 +59,8 @@ const onInputChange = (event: InputEvent) =>
     bind:value={searchInput}
     on:input={onInputChange}
     class={cn(
-      "w-full rounded-md bg-background pl-8 self-stretch lowercase border-[1px] border-input focus-visible:border-secondary",
-      'shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
+      'w-full rounded-md bg-background pl-8 self-stretch lowercase border-[1px] border-input focus-visible:border-secondary',
+      'shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
     )}
   />
   <kbd

app/src/routes/+layout.svelte

@@ -5,6 +5,7 @@ import { onMount } from "svelte"
 import { ModeWatcher } from "mode-watcher"
 import { browser } from "$app/environment"
 import { Toaster } from "svelte-french-toast"
+import { onNavigate } from "$app/navigation"
 import { page, navigating } from "$app/stores"
 import { shortcut } from "@svelte-put/shortcut"
 import { cosmosStore } from "$lib/wallet/cosmos"
@@ -66,7 +67,7 @@ const localStoragePersister = createSyncStoragePersister({
   storage: browser ? window.localStorage : undefined // or window.sessionStorage
 })
 
-$: if ($navigating) console.log("Navigating to", $page.url.pathname)
+onNavigate(navigation => console.info("Navigating to", navigation.to?.route.id))
 </script>
 
 <svelte:head>

app/src/routes/explorer/+layout.svelte

@@ -10,7 +10,12 @@ import { ScrollArea } from "$lib/components/ui/scroll-area/index.ts"
 export let data: LayoutData
 
 let windowSize = { width: window.innerWidth, height: window.innerHeight }
-const handleResize = () => (windowSize = { width: window.innerWidth, height: window.innerHeight })
+
+const handleResize = () => {
+  requestAnimationFrame(() => {
+    windowSize = { width: window.innerWidth, height: window.innerHeight }
+  })
+}
 
 onMount(() => {
   window.addEventListener("resize", handleResize)

app/src/routes/explorer/blocks/+page.svelte

@@ -14,11 +14,11 @@ import { writable } from "svelte/store"
 import { cn } from "$lib/utilities/shadcn.ts"
 import { CHAIN_MAP } from "$lib/constants/chains"
 import * as Table from "$lib/components/ui/table"
+import { Duration, DurationUnits } from "svelte-ux"
 import { createQuery } from "@tanstack/svelte-query"
 import CellText from "../(components)/cell-text.svelte"
 import { removeArrayDuplicates } from "$lib/utilities"
 import type { Override } from "$lib/utilities/types.ts"
-import { Shine, Duration, DurationUnits } from "svelte-ux"
 import { createVirtualizer } from "@tanstack/svelte-virtual"
 import Button from "$lib/components/ui/button/button.svelte"
 import { cosmosBlocksQuery } from "$lib/graphql/documents/cosmos-blocks.ts"

app/src/routes/transfer/(components)/chain-dialog.svelte

@@ -12,9 +12,6 @@ export let handleChainSearch: (event: InputEvent) => void
 export let handleChainSelect: (name: string, target: "fromChain" | "toChain") => void
 export let queryParams: any
 
-$: {
-  console.log(queryParams)
-}
 $: {
   if (dialogOpen) document.body.style.overflow = "hidden"
   else document.body.style.overflow = "auto"

app/src/routes/transfer/+layout.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { onMount } from "svelte"
+import { page } from "$app/stores"
+
+/**
+ * Clear all search params from the URL when navigating away from /transfer
+ * aka when component is unmounted
+ */
+onMount(() => {
+  return () => {
+    $page.url.searchParams.forEach(searchParam => $page.url.searchParams.delete(searchParam))
+  }
+})
+</script>
+
+<slot />

app/src/routes/transfer/+page.svelte

@@ -124,7 +124,6 @@ $: selectedToChain = chains.find(
 // console.log(JSON.stringify({ selectedFromChain, selectedToChain }, undefined, 2))
 
 let [tokenSearch, assetSearchResults] = ["", assets]
-// console.log(JSON.stringify(assets, undefined, 2))
 
 function handleAssetSearch(event: InputEvent) {
   const target = event.target
@@ -133,7 +132,6 @@ function handleAssetSearch(event: InputEvent) {
   assetSearchResults = assets.filter(asset =>
     asset.id.toLowerCase().includes(tokenSearch.toLowerCase())
   )
-  // console.log(JSON.stringify(assetSearchResults, undefined, 2))
 }
 
 let availableAssets = assets.filter(
@@ -148,7 +146,6 @@ $: availableAssets = assets.filter(
 )
 
 let selectedAsset = assets[0]
-// $: console.log(JSON.stringify({ selectedAsset }, undefined, 2))
 
 function handleAssetSelect(id: string) {
   console.log({ id }, availableAssets.find(asset => asset.id === id)?.id)

app/src/styles/index.css

@@ -8,6 +8,9 @@
   /* --background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e2fcfc' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); */
 }
 
+html {
+}
+
 .dark {
   --background-color: #09090B;
   /* --background-image:  url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23a0ecfd' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); */