From bfee8b9036b30c0824cb6c895560231dcd314624 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 17 Oct 2024 17:10:11 -0700
Subject: [PATCH] Open inline images in-app, make search on people page fixed

---
 src/app/components/ContentLinkInline.svelte | 20 ++++++++++++++++----
 src/app/components/PrimaryNav.svelte        |  2 +-
 src/routes/home/people/+page.svelte         |  4 +++-
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/app/components/ContentLinkInline.svelte b/src/app/components/ContentLinkInline.svelte
index 9e53ba06..ce8923ea 100644
--- a/src/app/components/ContentLinkInline.svelte
+++ b/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}
diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte
index 6122c45c..ff3bae51 100644
--- a/src/app/components/PrimaryNav.svelte
+++ b/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" />
diff --git a/src/routes/home/people/+page.svelte b/src/routes/home/people/+page.svelte
index 2f5181e7..08481813 100644
--- a/src/routes/home/people/+page.svelte
+++ b/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} />