Fix anchor styling

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+# 0.2.34
+
+- [x] Fix mentions on Safari
+- [x] Fix quoted 30023 events
+- [x] Fix Safari performance issues
+- [x] Small note display bugfixes
+- [x] Fix inability to publish on first signup
+
 # 0.2.33
 
 - [x] Add rendering support for kind 1985 (labels and reviews)

src/agent/user.ts

@@ -6,7 +6,6 @@ import {
   without,
   reject,
   prop,
-  find,
   pipe,
   assoc,
   whereEq,
@@ -53,10 +52,7 @@ const relays = derived(profile, p =>
 const mutes = derived(profile, prop("mutes")) as Readable<Array<[string, string]>>
 const lists = derived(profile, prop("lists")) as Readable<Array<MyEvent>>
 
-const canPublish = derived(
+const canPublish = derived([keys.pubkey], ([$pubkey]) => keys.canSign())
-  [keys.pubkey, relays],
-  ([$pubkey, $relays]) => keys.canSign() && find(prop("write"), $relays)
-)
 
 // Keep a copy so we can avoid calling `get` all the time
 

src/app/shared/Note.svelte

@@ -151,13 +151,13 @@
             {#if findReplyId(note) && showParent}
               <small class="text-gray-1">
                 <i class="fa fa-code-merge" />
-                <Anchor on:click={goToParent}>View Parent</Anchor>
+                <Anchor class="underline" on:click={goToParent}>View Parent</Anchor>
               </small>
             {/if}
             {#if findRootId(note) && findRootId(note) !== findReplyId(note) && showParent}
               <small class="text-gray-1">
                 <i class="fa fa-code-pull-request" />
-                <Anchor on:click={goToRoot}>View Thread</Anchor>
+                <Anchor class="underline" on:click={goToRoot}>View Thread</Anchor>
               </small>
             {/if}
           </div>

src/app/shared/NoteContentEntity.svelte

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

src/app/shared/NoteContentKind1985.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {isNil} from "ramda"
   import {getLabelQuality} from "src/util/nostr"
   import NoteContentRating from "src/app/shared/NoteContentRating.svelte"
   import NoteContentKind1 from "src/app/shared/NoteContentKind1.svelte"
@@ -9,7 +10,7 @@
 </script>
 
 <div class="flex flex-col gap-2 overflow-hidden text-ellipsis">
-  {#if rating}
+  {#if !isNil(rating)}
     <NoteContentRating {note} {rating} />
   {/if}
   <NoteContentKind1 {note} {anchorId} {maxLength} {showEntire} />

src/app/shared/NoteContentLink.svelte

@@ -18,7 +18,7 @@
     <Media link={annotateMedia(value.url)} onClose={close} />
   </div>
 {:else}
-  <Anchor external href={value.url}>
+  <Anchor class="underline" external href={value.url}>
     {value.url.replace(/https?:\/\/(www\.)?/, "")}
   </Anchor>
 {/if}

src/app/shared/NoteContentPerson.svelte

@@ -9,6 +9,6 @@
   const openPerson = () => modal.push({type: "person/feed", pubkey: value.pubkey})
 </script>
 
-@<Anchor killEvent on:click={openPerson}>
+@<Anchor class="underline" killEvent on:click={openPerson}>
   {displayPerson(getPersonWithFallback(value.pubkey))}
 </Anchor>

src/app/shared/NoteContentQuote.svelte

@@ -59,7 +59,7 @@
       {#if muted}
         <p class="mb-1 py-24 text-center text-gray-5" in:fly={{y: 20}}>
           You have muted this note.
-          <Anchor on:click={unmute}>Show</Anchor>
+          <Anchor class="underline" on:click={unmute}>Show</Anchor>
         </p>
       {:else}
         {@const person = getPersonWithFallback(quote.pubkey)}

src/app/shared/NoteContentRating.svelte

@@ -29,7 +29,7 @@
 <div class="mb-4 flex items-center gap-2 border-l-2 border-solid border-gray-5 pl-2">
   Rated
   {#if action}
-    <Anchor on:click={action}>{display}</Anchor>
+    <Anchor class="underline" on:click={action}>{display}</Anchor>
   {:else}
     {display}
   {/if}

src/app/shared/NoteContentTopic.svelte

@@ -9,4 +9,4 @@
   }
 </script>
 
-<Anchor killEvent on:click={() => openTopic(value)}>#{value}</Anchor>
+<Anchor class="underline" killEvent on:click={() => openTopic(value)}>#{value}</Anchor>

src/app/shared/PersonAbout.svelte

@@ -19,11 +19,11 @@
         <br />
       {/each}
     {:else if type === "link"}
-      <Anchor external href={value.url}>
+      <Anchor class="underline" external href={value.url}>
         {value.url.replace(/https?:\/\/(www\.)?/, "")}
       </Anchor>
     {:else if type.startsWith("nostr:")}
-      <Anchor external href={"/" + value.entity}>
+      <Anchor class="underline" external href={"/" + value.entity}>
         {#if value.pubkey}
           {displayPerson(getPersonWithFallback(value.pubkey))}
         {:else if value.id}

src/app/shared/PersonInfo.svelte

@@ -9,7 +9,7 @@
   import {getPubkeyWriteRelays, sampleRelays} from "src/agent/relays"
   import user from "src/agent/user"
 
-  const {petnames} = user
+  const {petnames, canPublish} = user
 
   export let person
   export let hasPetname = null
@@ -45,12 +45,15 @@
             </div>
           {/if}
         </div>
-        {#if isFollowing}
+        {#if $canPublish}
-          <Anchor theme="button-accent" stopPropagation on:click={() => removePetname(person)}>
+          {#if isFollowing}
-            Following
+            <Anchor theme="button-accent" stopPropagation on:click={() => removePetname(person)}>
-          </Anchor>
+              Following
-        {:else}
+            </Anchor>
-          <Anchor theme="button" stopPropagation on:click={() => addPetname(person)}>Follow</Anchor>
+          {:else}
+            <Anchor theme="button" stopPropagation on:click={() => addPetname(person)}
+              >Follow</Anchor>
+          {/if}
         {/if}
       </div>
       <p class="overflow-hidden text-ellipsis">

src/app/shared/PersonSummary.svelte

@@ -34,7 +34,7 @@
 
 <div class="relative flex flex-col gap-4 py-2 px-3">
   <div class="flex justify-between gap-2">
-    <Anchor theme="unstyled" href={routes.person($person.pubkey)} class="flex gap-4">
+    <Anchor href={routes.person($person.pubkey)} class="flex gap-4">
       <PersonCircle size={14} person={$person} />
       <div class="flex flex-grow flex-col gap-2">
         <h2 class="text-lg">{displayPerson($person)}</h2>

src/app/shared/RelayCard.svelte

@@ -63,7 +63,7 @@
   <div class="flex items-center justify-between gap-2">
     <div class="flex items-center gap-2 text-xl">
       <i class={relay.url.startsWith("ws://") ? "fa fa-unlock" : "fa fa-lock"} />
-      <Anchor theme="unstyled" on:click={openModal}>{displayRelay(relay)}</Anchor>
+      <Anchor on:click={openModal}>{displayRelay(relay)}</Anchor>
       {#if showStatus}
         <span
           on:mouseout={() => {

src/app/views/ChatDetail.svelte

@@ -47,7 +47,7 @@
 <Channel {loadMessages} {listenForMessages} {sendMessage}>
   <div slot="header" class="flex items-start gap-4 p-4">
     <div class="flex items-center gap-4">
-      <Anchor theme="unstyled" class="fa fa-arrow-left cursor-pointer text-2xl" href="/chat" />
+      <Anchor class="fa fa-arrow-left cursor-pointer text-2xl" href="/chat" />
       <div
         class="h-12 w-12 shrink-0 overflow-hidden rounded-full border border-solid border-white bg-cover bg-center"
         style="background-image: url({$room.picture})" />

src/app/views/Feeds.svelte

@@ -57,7 +57,7 @@
     <Content size="lg" class="text-center">
       <p class="text-xl">Don't have an account?</p>
       <p>
-        Click <Anchor href="/login">here</Anchor> to join the nostr network.
+        Click <Anchor class="underline" href="/login">here</Anchor> to join the nostr network.
       </p>
     </Content>
   {/if}

src/app/views/ListList.svelte

@@ -48,7 +48,7 @@
           <strong>{meta.d}</strong>
           <ListSummary list={e} />
         </div>
-        <Anchor on:click={() => editList(e)}>Edit</Anchor>
+        <Anchor class="underline" on:click={() => editList(e)}>Edit</Anchor>
       </div>
     </div>
   {:else}

src/app/views/Login.svelte

@@ -46,16 +46,17 @@
       <p class="text-center">
         Click below to log in or create an account.
         {#if !Capacitor.isNativePlatform()}
-          If you have a <Anchor href={nip07} external>compatible browser extension</Anchor> installed,
+          If you have a <Anchor class="underline" href={nip07} external
-          we will use that.
+            >compatible browser extension</Anchor> installed, we will use that.
         {/if}
       </p>
       <div class="flex flex-col items-center gap-4">
         <div class="flex gap-4">
-          <Anchor class="w-32 text-center" type="button-accent" on:click={autoLogIn}>Log In</Anchor>
+          <Anchor class="w-32 text-center" theme="button-accent" on:click={autoLogIn}
-          <Anchor class="w-32 text-center" type="button" on:click={signUp}>Sign Up</Anchor>
+            >Log In</Anchor>
+          <Anchor class="w-32 text-center" theme="button" on:click={signUp}>Sign Up</Anchor>
         </div>
-        <Anchor theme="unstyled" on:click={pubkeyLogIn}>
+        <Anchor on:click={pubkeyLogIn}>
           <i class="fa fa-cogs" /> Advanced Login
         </Anchor>
       </div>

src/app/views/LoginConnect.svelte

@@ -150,8 +150,8 @@
         <div class="my-12 text-center">
           We didn't have any luck finding your profile data - you'll need to select your relays
           manually to continue. You can skip this step by clicking
-          <Anchor href="/relays">here</Anchor>, but be aware that any new relay selections will
+          <Anchor class="underline" href="/relays">here</Anchor>, but be aware that any new relay
-          replace your old ones.
+          selections will replace your old ones.
         </div>
       {:else if modal === "custom"}
         <div class="my-12 text-center">

src/app/views/MessagesDetail.svelte

@@ -82,7 +82,7 @@
     <div class="flex w-full flex-col gap-2">
       <div class="flex w-full items-center justify-between">
         <div class="flex items-center gap-4">
-          <Anchor theme="unstyled" href={routes.person(pubkey)} class="text-lg font-bold">
+          <Anchor href={routes.person(pubkey)} class="text-lg font-bold">
             {displayPerson($person)}
           </Anchor>
         </div>

src/app/views/NaddrDetail.svelte

@@ -2,7 +2,7 @@
   import {onMount} from "svelte"
   import {first, quantify} from "hurdak/lib/hurdak"
   import {displayPerson} from "src/util/nostr"
-  import {routes} from 'src/app/state'
+  import {routes} from "src/app/state"
   import Content from "src/partials/Content.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import NoteContent from "src/app/shared/NoteContent.svelte"
@@ -20,10 +20,12 @@
   let loading = true
 
   onMount(async () => {
-    note = first(await network.load({
+    note = first(
-      relays: sampleRelays(relays),
+      await network.load({
-      filter: {kinds: [kind], pubkey, '#d': [identifier]},
+        relays: sampleRelays(relays),
-    }))
+        filter: {kinds: [kind], pubkey, "#d": [identifier]},
+      })
+    )
 
     loading = false
   })
@@ -32,23 +34,26 @@
 <Content size="lg">
   <p>
     This is a kind {kind} event called "{identifier}", published by
-    <Anchor href={routes.person(pubkey)}>@{displayPerson(getPersonWithFallback(pubkey))}</Anchor>.
+    <Anchor class="underline" href={routes.person(pubkey)}
+      >@{displayPerson(getPersonWithFallback(pubkey))}</Anchor
+    >.
   </p>
   {#if note?.content}
     <NoteContent showEntire {note} />
   {/if}
   {#if note?.tags.length > 1}
-    <p>This note has {quantify(note.tags.length - 1, 'tag')}:</p>
+    <p>This note has {quantify(note.tags.length - 1, "tag")}:</p>
-    <ul class="list-disc list-inside">
+    <ul class="list-inside list-disc">
       {#each note.tags as [type, value, ...rest]}
         {#if type !== "d"}
           <li>
             {#if type === "p"}
-              <Anchor href={routes.person(value)}>@{displayPerson(getPersonWithFallback(value))}</Anchor>
+              <Anchor class="underline" href={routes.person(value)}
+                >@{displayPerson(getPersonWithFallback(value))}</Anchor>
             {:else if type === "e"}
-              <Anchor href={value}>Event {value}</Anchor>
+              <Anchor class="underline" href={value}>Event {value}</Anchor>
             {:else}
-              {type}: {value} {rest.length > 0 ? rest.join(', ') : ""}
+              {type}: {value} {rest.length > 0 ? rest.join(", ") : ""}
             {/if}
           </li>
         {/if}

src/app/views/NoteZap.svelte

@@ -112,7 +112,7 @@
         <i slot="before" class="fa fa-bolt" />
         <span slot="after" class="-mt-1">sats</span>
       </Input>
-      <Anchor loading={zap.loading} type="button-accent" on:click={loadZapInvoice}>Zap!</Anchor>
+      <Anchor loading={zap.loading} theme="button-accent" on:click={loadZapInvoice}>Zap!</Anchor>
     </div>
   {/if}
 </Content>

src/app/views/OnboardingFollows.svelte

@@ -38,7 +38,7 @@
       your follows list at any time.
     </p>
     <Anchor
-      type="button-accent"
+      theme="button-accent"
       on:click={() => modal.replace({type: "onboarding", stage: "note"})}>
       Continue
     </Anchor>

src/app/views/OnboardingIntro.svelte

@@ -11,8 +11,8 @@
 <Content size="lg" class="text-center">
   <Heading>Create an Account</Heading>
   <p>
-    New to Nostr? Click <Anchor external href={tutorialUrl}>here</Anchor> or watch the video below for
+    New to Nostr? Click <Anchor class="underline" external href={tutorialUrl}>here</Anchor> or watch
-    a crash course on what it is, and how to use it.
+    the video below for a crash course on what it is, and how to use it.
   </p>
   <video controls src={videoUrl} class="object-contain object-center" />
   <p>
@@ -20,7 +20,7 @@
     account.
   </p>
   <Anchor
-    type="button-accent"
+    theme="button-accent"
     on:click={() => modal.replace({type: "onboarding", stage: "profile"})}>
     Let's go!
   </Anchor>

src/app/views/OnboardingKey.svelte

@@ -31,7 +31,7 @@
       <button slot="after" class="fa fa-copy cursor-pointer" on:click={copyKey} />
     </Input>
     <Anchor
-      type="button-accent"
+      theme="button-accent"
       on:click={() => modal.replace({type: "onboarding", stage: nextStage})}>
       Got it
     </Anchor>

src/app/views/OnboardingNote.svelte

@@ -31,7 +31,7 @@
   </div>
   <Anchor theme="button-accent" class="flex-grow text-center" on:click={onSubmit}
     >Say Hello!</Anchor>
-  <Anchor theme="unstyled" class="text-center" on:click={skip}>
+  <Anchor class="text-center" on:click={skip}>
     Skip and see your feed <i class="fa fa-arrow-right" />
   </Anchor>
 </Content>

src/app/views/OnboardingProfile.svelte

@@ -38,7 +38,7 @@
     </div>
   </div>
   <Anchor
-    type="button-accent"
+    theme="button-accent"
     class="text-center"
     on:click={() => modal.replace({type: "onboarding", stage: "key"})}>
     Continue

src/app/views/OnboardingRelays.svelte

@@ -34,7 +34,7 @@
     </p>
   </div>
   <Anchor
-    type="button-accent"
+    theme="button-accent"
     class="text-center"
     on:click={() => modal.replace({type: "onboarding", stage: "follows"})}>
     Continue

src/app/views/PersonFeed.svelte

@@ -46,7 +46,7 @@
       <div class="flex items-start justify-between gap-4">
         <div class="flex flex-grow flex-col gap-2">
           <div class="flex items-center gap-2">
-            <Anchor theme="unstyled" href={routes.person(pubkey)}>
+            <Anchor href={routes.person(pubkey)}>
               <h1 class="text-2xl">
                 {displayPerson($person)}
               </h1>

src/app/views/UserProfile.svelte

@@ -43,7 +43,7 @@
       <p>
         Give people a friendly way to recognize you. We recommend you do not use your real name or
         share your personal information. The future of the internet is
-        <Anchor external href={pseudUrl}>pseudonymous</Anchor>.
+        <Anchor class="underline" external href={pseudUrl}>pseudonymous</Anchor>.
       </p>
     </div>
     <div class="flex w-full flex-col gap-8">
@@ -63,7 +63,8 @@
           <i slot="before" class="fa-solid fa-user-check" />
         </Input>
         <p class="text-sm text-gray-1">
-          Enter a <Anchor external href={nip05Url}>NIP-05</Anchor> address to verify your public key.
+          Enter a <Anchor class="underline" external href={nip05Url}>NIP-05</Anchor> address to verify
+          your public key.
         </p>
       </div>
       <div class="flex flex-col gap-1">
@@ -72,8 +73,8 @@
           <i slot="before" class="fa-solid fa-bolt" />
         </Input>
         <p class="text-sm text-gray-1">
-          Enter a <Anchor external href={lud16Url}>LUD-16</Anchor> address to enable sending and receiving
+          Enter a <Anchor class="underline" external href={lud16Url}>LUD-16</Anchor> address to enable
-          lightning tips (LUD-06 will also work).
+          sending and receiving lightning tips (LUD-06 will also work).
         </p>
       </div>
       <div class="flex flex-col gap-1">

src/partials/Anchor.svelte

@@ -9,7 +9,7 @@
   export let killEvent = false
   export let external = false
   export let loading = false
-  export let theme = "anchor"
+  export let theme = "unstyled"
   export let type = null
   export let href = null
   export let tag = "a"