Fix anchor styling

2024-09-05 04:43:40 +00:00 · 2023-06-28 13:33:54 -07:00 · 2023-06-28 13:33:54 -07:00 · 0a15170757
commit 0a15170757
parent 48dab22d9c
31 changed files with 77 additions and 62 deletions
--- a/CHANGELOG.md
+++ b/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)
--- a/src/agent/user.ts
+++ b/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(
-  [keys.pubkey, relays],
-  ([$pubkey, $relays]) => keys.canSign() && find(prop("write"), $relays)
-)
+const canPublish = derived([keys.pubkey], ([$pubkey]) => keys.canSign())

 // Keep a copy so we can avoid calling `get` all the time

--- a/src/app/shared/Note.svelte
+++ b/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>
--- a/src/app/shared/NoteContentEntity.svelte
+++ b/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>
--- a/src/app/shared/NoteContentKind1985.svelte
+++ b/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} />
--- a/src/app/shared/NoteContentLink.svelte
+++ b/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}
--- a/src/app/shared/NoteContentPerson.svelte
+++ b/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>
--- a/src/app/shared/NoteContentQuote.svelte
+++ b/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)}
--- a/src/app/shared/NoteContentRating.svelte
+++ b/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}
--- a/src/app/shared/NoteContentTopic.svelte
+++ b/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>
--- a/src/app/shared/PersonAbout.svelte
+++ b/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}
--- a/src/app/shared/PersonInfo.svelte
+++ b/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}
-          <Anchor theme="button-accent" stopPropagation on:click={() => removePetname(person)}>
-            Following
-          </Anchor>
-        {:else}
-          <Anchor theme="button" stopPropagation on:click={() => addPetname(person)}>Follow</Anchor>
+        {#if $canPublish}
+          {#if isFollowing}
+            <Anchor theme="button-accent" stopPropagation on:click={() => removePetname(person)}>
+              Following
+            </Anchor>
+          {:else}
+            <Anchor theme="button" stopPropagation on:click={() => addPetname(person)}
+              >Follow</Anchor>
+          {/if}
        {/if}
      </div>
      <p class="overflow-hidden text-ellipsis">
--- a/src/app/shared/PersonSummary.svelte
+++ b/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>
--- a/src/app/shared/RelayCard.svelte
+++ b/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={() => {
--- a/src/app/views/ChatDetail.svelte
+++ b/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})" />
--- a/src/app/views/Feeds.svelte
+++ b/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}
--- a/src/app/views/ListList.svelte
+++ b/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}
--- a/src/app/views/Login.svelte
+++ b/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,
-          we will use that.
+          If you have a <Anchor class="underline" href={nip07} external
+            >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" type="button" on:click={signUp}>Sign Up</Anchor>
+          <Anchor class="w-32 text-center" theme="button-accent" on:click={autoLogIn}
+            >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>
--- a/src/app/views/LoginConnect.svelte
+++ b/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
-          replace your old ones.
+          <Anchor class="underline" href="/relays">here</Anchor>, but be aware that any new relay
+          selections will replace your old ones.
        </div>
      {:else if modal === "custom"}
        <div class="my-12 text-center">
--- a/src/app/views/MessagesDetail.svelte
+++ b/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>
--- a/src/app/views/NaddrDetail.svelte
+++ b/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({
-      relays: sampleRelays(relays),
-      filter: {kinds: [kind], pubkey, '#d': [identifier]},
-    }))
+    note = first(
+      await network.load({
+        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>
-    <ul class="list-disc list-inside">
+    <p>This note has {quantify(note.tags.length - 1, "tag")}:</p>
+    <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}
--- a/src/app/views/NoteZap.svelte
+++ b/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>
--- a/src/app/views/OnboardingFollows.svelte
+++ b/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>
--- a/src/app/views/OnboardingIntro.svelte
+++ b/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
-    a crash course on what it is, and how to use it.
+    New to Nostr? Click <Anchor class="underline" external href={tutorialUrl}>here</Anchor> or watch
+    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>
--- a/src/app/views/OnboardingKey.svelte
+++ b/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>
--- a/src/app/views/OnboardingNote.svelte
+++ b/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>
--- a/src/app/views/OnboardingProfile.svelte
+++ b/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
--- a/src/app/views/OnboardingRelays.svelte
+++ b/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
--- a/src/app/views/PersonFeed.svelte
+++ b/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>
--- a/src/app/views/UserProfile.svelte
+++ b/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
-          lightning tips (LUD-06 will also work).
+          Enter a <Anchor class="underline" external href={lud16Url}>LUD-16</Anchor> address to enable
+          sending and receiving lightning tips (LUD-06 will also work).
        </p>
      </div>
      <div class="flex flex-col gap-1">
--- a/src/partials/Anchor.svelte
+++ b/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"