Fix message layout, fix uploads

src/routes/+layout.svelte

@@ -5,6 +5,7 @@
   import {get, derived} from "svelte/store"
   import {page} from "$app/stores"
   import {dev} from "$app/environment"
+  import {bytesToHex, hexToBytes} from "@noble/hashes/utils"
   import {identity, uniq, sleep, take, sortBy, ago, now, HOUR, WEEK, Worker} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {
@@ -76,6 +77,8 @@
     Object.assign(window, {
       get,
       nip19,
+      bytesToHex,
+      hexToBytes,
       ...lib,
       ...welshmanSigner,
       ...util,

src/routes/chat/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import {page} from "$app/stores"
   import {onDestroy} from "svelte"
-  import {isMobile} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ContentSearch from "@lib/components/ContentSearch.svelte"
@@ -40,13 +39,7 @@
   <div slot="input" class="row-2 min-w-0 flex-grow items-center">
     <label class="input input-bordered flex flex-grow items-center gap-2">
       <Icon icon="magnifer" />
-      <!-- svelte-ignore a11y-autofocus -->
-      <input
-        autofocus={!isMobile}
-        bind:value={term}
-        class="grow"
-        type="text"
-        placeholder="Search for conversations..." />
+      <input bind:value={term} class="grow" type="text" placeholder="Search for conversations..." />
     </label>
     <Button class="btn btn-primary" on:click={startChat}>
       <Icon icon="add-circle" />

src/routes/spaces/[relay]/+page.svelte

@@ -61,22 +61,28 @@
         {@const {software, version, supported_nips, limitation} = $relay.profile}
         <div class="flex flex-wrap gap-1">
           {#if limitation?.auth_required}
-            <p class="badge badge-neutral">Authentication Required</p>
+            <p class="badge badge-neutral">
+              <span class="ellipsize">Authentication Required</span>
+            </p>
           {/if}
           {#if limitation?.payment_required}
-            <p class="badge badge-neutral">Payment Required</p>
+            <p class="badge badge-neutral"><span class="ellipsize">Payment Required</span></p>
           {/if}
           {#if limitation?.min_pow_difficulty}
-            <p class="badge badge-neutral">Requires PoW {limitation?.min_pow_difficulty}</p>
+            <p class="badge badge-neutral">
+              <span class="ellipsize">Requires PoW {limitation?.min_pow_difficulty}</span>
+            </p>
           {/if}
           {#if supported_nips}
-            <p class="badge badge-neutral">NIPs: {supported_nips.join(", ")}</p>
+            <p class="badge badge-neutral">
+              <span class="ellipsize">NIPs: {supported_nips.join(", ")}</span>
+            </p>
           {/if}
           {#if software}
-            <p class="badge badge-neutral">Software: {software}</p>
+            <p class="badge badge-neutral"><span class="ellipsize">Software: {software}</span></p>
           {/if}
           {#if version}
-            <p class="badge badge-neutral">Version: {version}</p>
+            <p class="badge badge-neutral"><span class="ellipsize">Version: {version}</span></p>
           {/if}
         </div>
       {/if}