Open inline images in-app, make search on people page fixed

src/app/components/ContentLinkInline.svelte

@@ -2,13 +2,25 @@
   import {displayUrl} from "@welshman/lib"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
+  import {pushModal} from "@app/modal"
 
   export let value
 
   const url = value.url.toString()
+
+  const expand = () => pushModal(ContentLinkDetail, {url}, {fullscreen: true})
 </script>
 
-<Link external href={url} class="link-content">
-  <Icon icon="link-round" size={3} class="inline-block" />
-  {displayUrl(url)}
-</Link>
+{#if url.match(/\.(jpe?g|png|gif|webp)$/)}
+  <Button class="link-content" on:click={expand}>
+    <Icon icon="link-round" size={3} class="inline-block" />
+    {displayUrl(url)}
+  </Button>
+{:else}
+  <Link external href={url} class="link-content">
+    <Icon icon="link-round" size={3} class="inline-block" />
+    {displayUrl(url)}
+  </Link>
+{/if}

src/app/components/PrimaryNav.svelte

@@ -52,7 +52,7 @@
 
 <slot />
 
-<div class="fixed bottom-0 left-0 right-0 z-nav h-14 bg-base-100 md:hidden">
+<div class="fixed bottom-0 left-0 right-0 z-nav h-14 bg-base-100 md:hidden border border-top border-base-200">
   <div class="m-auto flex max-w-sm justify-between px-2">
     <PrimaryNavItem title="Home" on:click={showHomeMenu}>
       <Avatar icon="home-smile" class="!h-10 !w-10" />

src/routes/home/people/+page.svelte

@@ -26,11 +26,13 @@
   })
 </script>
 
-<div class="content column gap-4" bind:this={element}>
+<div class="fixed flex bg-base-200 pt-8 left-8 top-0 right-8 z-feature">
   <label class="input input-bordered flex w-full items-center gap-2">
     <Icon icon="magnifer" />
     <input bind:value={term} class="grow" type="text" placeholder="Search for people..." />
   </label>
+</div>
+<div class="content column gap-4 !mt-14" bind:this={element}>
   <div class="flex flex-col gap-2">
     {#each pubkeys.slice(0, limit) as pubkey (pubkey)}
       <PeopleItem {pubkey} />