Use real links

CHANGELOG.md

@@ -17,6 +17,7 @@
 - [x] Tighten up note actions on mobile
 - [x] Don't show cached notes on relay-specific feeds
 - [x] Allow copying note text without opening the note
+- [x] Use real links so cmd+click works
 
 # 0.3.10
 

src/app/shared/Compose.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {nip19} from "nostr-tools"
-  import {debounce} from "throttle-debounce"
+  import {debounce, throttle} from "throttle-debounce"
   import {createEventDispatcher} from "svelte"
   import {last, partition, propEq} from "ramda"
   import PersonBadge from "src/app/shared/PersonBadge.svelte"
@@ -45,7 +45,7 @@
     }
   })
 
-  const applySearch = word => {
+  const applySearch = throttle(300, word => {
     let results = []
     if (word.length > 1 && word.startsWith("@")) {
       const [followed, notFollowed] = partition(
@@ -57,7 +57,7 @@
     }
 
     suggestions.setData(results.slice(0, 5))
-  }
+  })
 
   const getInfo = () => {
     const selection = window.getSelection()
@@ -128,7 +128,7 @@
     }
 
     // If we have suggestions, re-route keyboard commands
-    if (suggestions.get() && ["Enter", "ArrowUp", "ArrowDown"].includes(e.code)) {
+    if (["Enter", "ArrowUp", "ArrowDown"].includes(e.code) && suggestions.get()) {
       e.preventDefault()
     }
 

src/app/shared/FeedControls.svelte

@@ -213,7 +213,7 @@
     <div class="mb-2 mr-2 inline-block py-1">Showing notes:</div>
   {/if}
   {#each parts as { keys, label }}
-    <Chip class="mb-2 mr-2 inline-block" onClick={keys ? () => removePart(keys) : null}>
+    <Chip class="mb-2 mr-2 inline-block" onRemove={keys ? () => removePart(keys) : null}>
       {label}
     </Chip>
   {/each}

src/app/shared/NoteContentEntity.svelte

@@ -4,6 +4,6 @@
   export let value
 </script>
 
-<Anchor modal class="underline" killEvent href={value.entity}>
+<Anchor modal class="underline" href={value.entity}>
   {value.entity.slice(0, 16) + "..."}
 </Anchor>

src/app/shared/NoteContentKind30023.svelte

@@ -8,6 +8,7 @@
   import {Tags, fromNostrURI} from "src/util/nostr"
   import {urlIsMedia} from "src/util/notes"
   import Chip from "src/partials/Chip.svelte"
+  import Anchor from "src/partials/Anchor.svelte"
   import NoteContentLink from "src/app/shared/NoteContentLink.svelte"
   import {router} from "src/app/router"
   import {displayPubkey} from "src/engine"
@@ -26,8 +27,6 @@
   const regex = /(nostr:)?n(event|ote|pub|profile|addr)\w+/g
   const {title, summary, image} = tags.asMeta() as {[k: string]: string}
 
-  const openTopic = topic => router.at("topics").of(topic).open()
-
   const convertEntities = markdown => {
     for (const uri of markdown.match(regex) || []) {
       const entity = fromNostrURI(uri)
@@ -79,9 +78,9 @@
   {/if}
   <div>
     {#each tags.topics() as topic}
-      <Chip class="mb-2 mr-2 inline-block cursor-pointer" on:click={() => openTopic(topic)}>
-        #{topic}
-      </Chip>
+      <Anchor modal href={router.at("topics").of(topic).toString()}>
+        <Chip class="mb-2 mr-2 inline-block cursor-pointer">#{topic}</Chip>
+      </Anchor>
     {/each}
   </div>
 </div>

src/app/shared/NoteContentPerson.svelte

@@ -9,6 +9,6 @@
   const person = derivePerson(pubkey)
 </script>
 
-@<Anchor class="underline" killEvent href={router.at("people").of(pubkey).toString()}>
+@<Anchor modal class="underline" href={router.at("people").of(pubkey).toString()}>
   {displayPerson($person)}
 </Anchor>

src/app/shared/NoteContentTopic.svelte

@@ -5,6 +5,6 @@
   export let value
 </script>
 
-<Anchor class="underline" killEvent href={router.at("topics").of(value).toString()}>
+<Anchor modal class="underline" href={router.at("topics").of(value).toString()}>
   #{value}
 </Anchor>

src/app/shared/NoteReply.svelte

@@ -125,7 +125,7 @@
         </div>
         <div on:click|stopPropagation>
           {#each data.mentions as pubkey}
-            <Chip class="mb-1 mr-1" theme="dark" onClick={() => removeMention(pubkey)}>
+            <Chip class="mb-1 mr-1" theme="dark" onRemove={() => removeMention(pubkey)}>
               {displayPubkey(pubkey)}
             </Chip>
           {:else}

src/app/shared/PersonBadge.svelte

@@ -20,7 +20,6 @@
   </div>
 {:else}
   <Anchor
-    killEvent
     href={router.at("people").of(pubkey).toString()}
     class={cx($$props.class, "relative z-10 flex gap-4")}>
     <PersonCircle class="h-12 w-12" {pubkey} />

src/app/shared/PersonBadgeSmall.svelte

@@ -16,7 +16,6 @@
   </span>
 {:else}
   <Anchor
-    killEvent
     href={router.at("people").of(pubkey).toString()}
     class={cx($$props.class, "relative z-10 flex items-center gap-2")}>
     <PersonCircle {pubkey} />

src/app/views/Apps.svelte

@@ -128,18 +128,18 @@
               </Anchor>
             {/if}
             {#if app.profile.lud16}
-              <div class="mb-2 mr-2 inline-block cursor-pointer">
-                <Chip on:click={() => copy("Address", app.profile.lud16)}>
+              <Anchor class="mb-2 mr-2 inline-block cursor-pointer" on:click={() => copy("Address", app.profile.lud16)}>
+                <Chip>
                   <i class="fa fa-bolt" />{app.profile.lud16}
                 </Chip>
-              </div>
+              </Anchor>
             {/if}
             {#if app.profile.nip05}
-              <div class="mb-2 mr-2 inline-block cursor-pointer">
-                <Chip on:click={() => goToNip05(app.profile.nip05)}>
+              <Anchor class="mb-2 mr-2 inline-block cursor-pointer" on:click={() => goToNip05(app.profile.nip05)}>
+                <Chip>
                   <i class="fa fa-at" />{app.profile.nip05}
                 </Chip>
-              </div>
+              </Anchor>
             {/if}
           </div>
           {#if app.recs.length > 0}

src/partials/Anchor.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
   import cx from "classnames"
   import {switcher} from "hurdak"
-  import {killEvent as _killEvent} from "src/util/html"
   import {createEventDispatcher} from "svelte"
   import {router} from "src/app/router"
 
   export let stopPropagation = false
-  export let killEvent = false
   export let external = false
   export let loading = false
   export let modal = false
@@ -17,7 +15,6 @@
 
   const dispatch = createEventDispatcher()
 
-  $: _href = external ? href : null
   $: target = external ? "_blank" : null
 
   let className
@@ -45,15 +42,13 @@
   )
 
   const onClick = e => {
-    if (killEvent) {
-      _killEvent(e)
-    }
-
     if (stopPropagation) {
       e.stopPropagation()
     }
 
-    if (href && !external) {
+    if (href && !external && !e.metaKey && !e.ctrlKey) {
+      e.preventDefault()
+
       router.at(href).push({modal})
     }
 
@@ -62,7 +57,7 @@
 </script>
 
 {#if tag === "a"}
-  <a class={className} on:click={onClick} href={_href} {target}>
+  <a class={className} on:click={onClick} {href} {target}>
     <slot />
   </a>
 {:else if tag === "button"}

src/partials/Chip.svelte

@@ -2,7 +2,7 @@
   import cx from "classnames"
 
   export let theme = "dark"
-  export let onClick = null
+  export let onRemove = null
 
   const className = cx($$props.class, "inline-block rounded-full border border-solid py-1 px-2", {
     "border-gray-1": theme === "dark",
@@ -10,10 +10,10 @@
   })
 </script>
 
-<div class={className} on:click>
+<div class={className}>
   <div class="flex items-center gap-2 whitespace-nowrap">
-    {#if onClick}
-      <i class="fa fa-times cursor-pointer" on:click|preventDefault={onClick} />
+    {#if onRemove}
+      <i class="fa fa-times cursor-pointer" on:click|preventDefault={onRemove} />
     {/if}
     <slot />
   </div>

src/partials/MultiSelect.svelte

@@ -72,7 +72,7 @@
 
 <div class="text-sm">
   {#each value as item}
-    <Chip class="mb-1 mr-1" theme="dark" onClick={() => remove(item)}>
+    <Chip class="mb-1 mr-1" theme="dark" onRemove={() => remove(item)}>
       <slot name="item" context="value" {item}>
         {item}
       </slot>

src/util/html.ts

@@ -85,12 +85,6 @@ export const escapeHtml = html => {
   return div.innerHTML
 }
 
-export const killEvent = e => {
-  e.preventDefault()
-  e.stopPropagation()
-  e.stopImmediatePropagation()
-}
-
 export const isMobile =
   localStorage.mobile || window.navigator.maxTouchPoints > 1 || window.innerWidth < 400