Improve ios/mobile

CHANGELOG.md

@@ -7,6 +7,9 @@
 - [x] Add lists/custom feeds
 - [x] Refactor component hiararchy
 - [x] Re-work how modals stack
+- [x] Enqueue context requests to reduce number of concurrent subscriptions
+- [x] Use NIP-50 search to populate search results
+- [x] Persist settings to nostr using NIP-78
 
 ## 0.2.23
 

ROADMAP.md

@@ -1,6 +1,5 @@
 # Current
 
-- [ ] Fix iOS https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 - [ ] Remember message/chat status
 - [ ] Image classification
   - https://github.com/bhky/opennsfw2
@@ -14,9 +13,6 @@
   - nevent1qqszpjf3307ccam3cl957yc7k3h5c7vpt7gz2vdzgwkqszsyvdj6e0cpzfmhxue69uhk7enxvd5xz6tw9ec82csgdxq30
 - [ ] Nostr Wallet Connect https://nwc.getalby.com/
 - [ ] Abort all context subs when navigating
-- [ ] Add encrypted settings storage using nostr events
-  - [ ] github.com/nostr-protocol/nips/blob/master/78.md
-  - [ ] Save DM/chat read status in encrypted note
 - [ ] integrate media.nostr.band
 - [ ] Add webtorrent support
   - https://coracle.social/nevent1qqsxgxcsq5vevy4wdty5z5v88nhwp2fc5qgl0ws5rmamn6z72hwv3qcpyfmhxue69uhkummnw3ez6an9wf5kv6t9vsh8wetvd3hhyer9wghxuet5qk6c9q

src/app/TopNav.svelte

@@ -20,7 +20,7 @@
 <div
   class="fixed top-0 z-10 flex h-16 w-full items-center justify-between border-b
             border-gray-6 bg-gray-7 p-4 text-gray-3">
-  <div class="fa fa-bars fa-2xl cursor-pointer lg:hidden" on:click={toggleMenu} />
+  <div class="fa fa-bars fa-2xl -m-6 cursor-pointer p-6 lg:hidden" on:click={toggleMenu} />
   <div class="flex items-center gap-4">
     <Anchor
       external
@@ -30,7 +30,7 @@
       <img alt="Coracle Logo" src="/images/logo.png" class="w-8" />
       <h1 class="staatliches text-3xl">Coracle</h1>
     </Anchor>
-    <i class="fa fa-lightbulb cursor-pointer text-lg" on:click={toggleTheme} />
+    <i class="fa fa-lightbulb -m-4 cursor-pointer p-4 text-lg" on:click={toggleTheme} />
   </div>
   {#if $newNotifications}
     <div class="absolute top-4 left-12 h-2 w-2 rounded bg-accent lg:hidden" />

src/app/shared/Note.svelte

@@ -5,7 +5,6 @@
   import {quantify} from "hurdak/lib/hurdak"
   import {findRootId, findReplyId, displayPerson} from "src/util/nostr"
   import {formatTimestamp} from "src/util/misc"
-  import {isMobile} from "src/util/html"
   import {modal} from "src/partials/state"
   import Popover from "src/partials/Popover.svelte"
   import Anchor from "src/partials/Anchor.svelte"
@@ -132,34 +131,22 @@
       </div>
       <div class="flex min-w-0 flex-grow flex-col gap-2">
         <div class="flex flex-col items-start justify-between sm:flex-row sm:items-center">
-          {#if isMobile}
-            <Anchor
-              type="unstyled"
-              class="flex items-center gap-2 pr-16 text-lg font-bold"
-              on:click={() => goToPerson($author.pubkey)}>
-              <span>{displayPerson($author)}</span>
-              {#if $author.verified_as}
-                <i class="fa fa-circle-check text-sm text-accent" />
-              {/if}
-            </Anchor>
-          {:else}
-            <Popover triggerType="mouseenter">
-              <div slot="trigger">
-                <Anchor
-                  type="unstyled"
-                  class="flex items-center gap-2 pr-16 text-lg font-bold"
-                  on:click={() => goToPerson($author.pubkey)}>
-                  <span>{displayPerson($author)}</span>
-                  {#if $author.verified_as}
-                    <i class="fa fa-circle-check text-sm text-accent" />
-                  {/if}
-                </Anchor>
-              </div>
-              <div slot="tooltip">
-                <PersonSummary pubkey={$author.pubkey} />
-              </div>
-            </Popover>
-          {/if}
+          <Popover triggerType="mouseenter">
+            <div slot="trigger">
+              <Anchor
+                type="unstyled"
+                class="flex items-center gap-2 pr-16 text-lg font-bold"
+                on:click={() => goToPerson($author.pubkey)}>
+                <span>{displayPerson($author)}</span>
+                {#if $author.verified_as}
+                  <i class="fa fa-circle-check text-sm text-accent" />
+                {/if}
+              </Anchor>
+            </div>
+            <div slot="tooltip">
+              <PersonSummary pubkey={$author.pubkey} />
+            </div>
+          </Popover>
           <Anchor
             href={"/" + nip19.neventEncode({id: note.id, relays: note.seen_on})}
             class="text-sm text-gray-1"

src/app/shared/NoteActions.svelte

@@ -2,7 +2,7 @@
   import cx from "classnames"
   import {nip19} from "nostr-tools"
   import {tweened} from "svelte/motion"
-  import {find, identity, propEq, pathEq, sum, pluck, sortBy} from "ramda"
+  import {find, reject, identity, propEq, pathEq, sum, pluck, sortBy} from "ramda"
   import {warn} from "src/util/logger"
   import {copyToClipboard} from "src/util/html"
   import {stringToHue, fetchJson, now, formatSats, hsl} from "src/util/misc"
@@ -62,6 +62,7 @@
     cmd.deleteEvent([e.id]).publish(getEventPublishRelays(note))
 
     like = null
+    likes = reject(propEq("id", e.id), likes)
   }
 
   const startZap = async () => {
@@ -139,6 +140,7 @@
   let draftZap = null
   let showDetails = false
 
+  $: disableActions = !$canPublish || muted
   $: likes = note.reactions.filter(n => isLike(n.content))
   $: like = like || find(propEq("pubkey", user.getPubkey()), likes)
   $: allLikes = like ? likes.filter(n => n.id !== like?.id).concat(like) : likes
@@ -177,17 +179,20 @@
 </script>
 
 <div class="flex justify-between text-gray-1" on:click|stopPropagation>
-  <div
-    class={cx("flex", {
-      "pointer-events-none opacity-75": !$canPublish || muted,
-    })}>
-    <button class="w-16 text-left" on:click={reply.start}>
+  <div class="flex">
+    <button
+      class={cx("w-14 text-left", {
+        "pointer-events-none opacity-50": disableActions,
+      })}
+      on:click={reply.start}>
       <i class="fa fa-reply cursor-pointer" />
       {$repliesCount}
     </button>
     <button
-      class="w-16 text-left"
-      class:text-accent={like}
+      class={cx("w-14 text-left", {
+        "pointer-events-none opacity-50": disableActions,
+        "text-accent": like,
+      })}
       on:click={() => (like ? deleteReaction(like) : react("+"))}>
       <i
         class={cx("fa fa-heart cursor-pointer", {
@@ -196,10 +201,10 @@
       {$likesCount}
     </button>
     <button
-      class={cx("w-20 text-left", {
-        "pointer-events-none opacity-50": !canZap,
+      class={cx("w-16 text-left", {
+        "pointer-events-none opacity-50": disableActions,
+        "text-accent": zap,
       })}
-      class:text-accent={zap}
       on:click={startZap}>
       <i class="fa fa-bolt cursor-pointer" />
       {formatSats($zapsTotal)}

src/app/views/NoteDetail.svelte

@@ -4,6 +4,7 @@
   import {fly} from "svelte/transition"
   import {first} from "hurdak/lib/hurdak"
   import {log} from "src/util/logger"
+  import {isMobile} from "src/util/html"
   import {asDisplayEvent} from "src/util/nostr"
   import Content from "src/partials/Content.svelte"
   import RelayFeed from "src/app/shared/RelayFeed.svelte"
@@ -43,7 +44,7 @@
       log("NoteDetail", nip19.noteEncode(note.id), note)
 
       sub = network.streamContext({
-        maxDepth: 6,
+        maxDepth: isMobile ? 3 : 6,
         notes: [note],
         onChunk: context => {
           note = first(network.applyContext([note], user.applyMutes(context)))

src/partials/Anchor.svelte

@@ -1,6 +1,5 @@
 <script>
   import cx from "classnames"
-  import {omit} from "ramda"
   import {navigate} from "svelte-routing"
   import {switcher} from "hurdak/lib/hurdak"
   import {createEventDispatcher} from "svelte"
@@ -13,6 +12,9 @@
 
   const dispatch = createEventDispatcher()
 
+  $: _href = external ? href : null
+  $: target = external ? "_blank" : null
+
   let className
 
   $: className = cx(
@@ -45,11 +47,6 @@
   }
 </script>
 
-<a
-  on:click={onClick}
-  {...omit(["href"], $$props)}
-  href={external ? $$props.href : null}
-  class={className}
-  target={external ? "_blank" : null}>
+<a class={className} on:click={onClick} href={_href} {target}>
   <slot />
 </a>

src/partials/Content.svelte

@@ -4,7 +4,7 @@
   export let gap = 6
   export let size = "2xl"
 
-  const className = `flex flex-col m-auto text-gray-3 gap-${gap}`
+  const className = `flex flex-col m-auto text-gray-3 gap-${gap} overflow-hidden`
 
   if (!["inherit", "lg", "2xl"].includes(size)) {
     throw new Error(`Invalid size: ${size}`)

src/partials/Popover.svelte

@@ -4,6 +4,7 @@
   import "tippy.js/animations/shift-away.css"
   import tippy from "tippy.js"
   import {onMount} from "svelte"
+  import {isMobile} from "src/util/html"
 
   export let theme = "dark"
   export let triggerType = "click"
@@ -19,6 +20,10 @@
   let instance
 
   onMount(() => {
+    if (!trigger) {
+      return
+    }
+
     instance = tippy(trigger, {
       ...opts,
       theme,
@@ -72,8 +77,12 @@
   <slot name="trigger" />
 </div>
 
-<div bind:this={tooltip} class="hidden">
-  <div>
-    <slot name="tooltip" {instance} />
+{#if isMobile && triggerType === "mouseenter"}
+  <!-- iOS interprets a tap as a mouse enter -->
+{:else}
+  <div bind:this={tooltip} class="hidden">
+    <div>
+      <slot name="tooltip" {instance} />
+    </div>
   </div>
-</div>
+{/if}