Get rid of Button component

2024-09-15 17:53:36 +00:00 · 2023-06-28 12:24:15 -07:00 · 2023-06-28 12:24:15 -07:00 · 9c446263a6
commit 9c446263a6
parent 043ef6c33c
31 changed files with 63 additions and 72 deletions
--- a/src/app/shared/FeedControls.svelte
+++ b/src/app/shared/FeedControls.svelte
@ -222,7 +222,7 @@
            </MultiSelect>
          </div>
          <div class="flex justify-end">
-            <Anchor type="button-accent" on:click={submit}>Apply Filters</Anchor>
+            <Anchor theme="button-accent" on:click={submit}>Apply Filters</Anchor>
          </div>
        {/if}
      </Content>
--- a/src/app/shared/NoteContentEllipsis.svelte
+++ b/src/app/shared/NoteContentEllipsis.svelte
@ -1,7 +1,7 @@
 <script lang="ts">
-  import Anchor from 'src/partials/Anchor.svelte'
+  import Anchor from "src/partials/Anchor.svelte"
 </script>

-<div class="-ml-12 mt-8 mb-4 flex justify-center pointer-events-none">
-  <Anchor type="button">See more</Anchor>
+<div class="pointer-events-none -ml-12 mt-8 mb-4 flex justify-center">
+  <Anchor theme="button">See more</Anchor>
 </div>
--- a/src/app/shared/PersonInfo.svelte
+++ b/src/app/shared/PersonInfo.svelte
@ -46,11 +46,11 @@
          {/if}
        </div>
        {#if isFollowing}
-          <Anchor type="button-accent" stopPropagation on:click={() => removePetname(person)}>
+          <Anchor theme="button-accent" stopPropagation on:click={() => removePetname(person)}>
            Following
          </Anchor>
        {:else}
-          <Anchor type="button" stopPropagation on:click={() => addPetname(person)}>Follow</Anchor>
+          <Anchor theme="button" stopPropagation on:click={() => addPetname(person)}>Follow</Anchor>
        {/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 type="unstyled" href={routes.person($person.pubkey)} class="flex gap-4">
+    <Anchor theme="unstyled" 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 type="unstyled" on:click={openModal}>{displayRelay(relay)}</Anchor>
+      <Anchor theme="unstyled" on:click={openModal}>{displayRelay(relay)}</Anchor>
      {#if showStatus}
        <span
          on:mouseout={() => {
--- a/src/app/views/ChatDetail.svelte
+++ b/src/app/views/ChatDetail.svelte
@ -28,8 +28,7 @@
      onChunk,
    })

-  const loadMessages = onChunk =>
-    cursor.loadPage({filter: {kinds: [42], "#e": [id]}, onChunk})
+  const loadMessages = onChunk => cursor.loadPage({filter: {kinds: [42], "#e": [id]}, onChunk})

  const edit = () => {
    modal.push({type: "room/edit", room: $room})
@ -48,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 type="unstyled" class="fa fa-arrow-left cursor-pointer text-2xl" href="/chat" />
+      <Anchor theme="unstyled" 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/ChatEdit.svelte
+++ b/src/app/views/ChatEdit.svelte
@ -6,7 +6,7 @@
  import Input from "src/partials/Input.svelte"
  import Content from "src/partials/Content.svelte"
  import Textarea from "src/partials/Textarea.svelte"
-  import Button from "src/partials/Button.svelte"
+  import Anchor from "src/partials/Anchor.svelte"
  import {toast, modal} from "src/partials/state"
  import {getUserWriteRelays} from "src/agent/relays"
  import user from "src/agent/user"
@ -78,7 +78,7 @@
        <input type="file" name="picture" />
        <p class="text-sm text-gray-1">A picture to help people remember your room.</p>
      </div>
-      <Button type="submit" class="text-center">Done</Button>
+      <Anchor tag="button" theme="button" type="submit" class="text-center">Done</Anchor>
    </div>
  </Content>
 </form>
--- a/src/app/views/ChatList.svelte
+++ b/src/app/views/ChatList.svelte
@ -49,7 +49,7 @@
        <i class="fa fa-server fa-lg" />
        <h2 class="staatliches text-2xl">Your rooms</h2>
      </div>
-      <Anchor type="button-accent" on:click={() => modal.push({type: "room/edit"})}>
+      <Anchor theme="button-accent" on:click={() => modal.push({type: "room/edit"})}>
        <i class="fa-solid fa-plus" /> Create Room
      </Anchor>
    </div>
--- a/src/app/views/ChatListItem.svelte
+++ b/src/app/views/ChatListItem.svelte
@ -30,12 +30,12 @@
        <h2 class="text-lg">{room.name || ""}</h2>
      </div>
      {#if joined}
-        <Anchor type="button" killEvent class="flex items-center gap-2" on:click={leave}>
+        <Anchor theme="button" killEvent class="flex items-center gap-2" on:click={leave}>
          <i class="fa fa-right-from-bracket" />
          <span>Leave</span>
        </Anchor>
      {:else if $canPublish}
-        <Anchor type="button" killEvent class="flex items-center gap-2" on:click={join}>
+        <Anchor theme="button" killEvent class="flex items-center gap-2" on:click={join}>
          <i class="fa fa-right-to-bracket" />
          <span>Join</span>
        </Anchor>
--- a/src/app/views/ListEdit.svelte
+++ b/src/app/views/ListEdit.svelte
@ -5,7 +5,7 @@
  import Heading from "src/partials/Heading.svelte"
  import PersonBadge from "src/app/shared/PersonBadge.svelte"
  import Content from "src/partials/Content.svelte"
-  import Button from "src/partials/Button.svelte"
+  import Anchor from "src/partials/Anchor.svelte"
  import Input from "src/partials/Input.svelte"
  import MultiSelect from "src/partials/MultiSelect.svelte"
  import {searchTopics, searchPeople, searchRelays, getPersonWithFallback} from "src/agent/db"
@ -92,7 +92,7 @@
          will be used.
        </p>
      </div>
-      <Button type="submit" class="text-center">Save</Button>
+      <Anchor tag="button" theme="button" type="submit" class="text-center">Save</Anchor>
    </div>
  </Content>
 </form>
--- a/src/app/views/ListList.svelte
+++ b/src/app/views/ListList.svelte
@ -28,7 +28,7 @@
 <Content>
  <div class="flex items-center justify-between">
    <Heading>Your Lists</Heading>
-    <Anchor type="button-accent" on:click={createFeed}>
+    <Anchor theme="button-accent" on:click={createFeed}>
      <i class="fa fa-plus" /> List
    </Anchor>
  </div>
--- a/src/app/views/ListSelect.svelte
+++ b/src/app/views/ListSelect.svelte
@ -24,7 +24,7 @@
 <Content size="lg">
  <div class="flex items-center justify-between">
    <Heading>Select a List</Heading>
-    <Anchor type="button-accent" on:click={() => selectlist({})}>
+    <Anchor theme="button-accent" on:click={() => selectlist({})}>
      <i class="fa fa-plus" /> List
    </Anchor>
  </div>
--- a/src/app/views/Login.svelte
+++ b/src/app/views/Login.svelte
@ -55,7 +55,7 @@
          <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>
        </div>
-        <Anchor type="unstyled" on:click={pubkeyLogIn}>
+        <Anchor theme="unstyled" on:click={pubkeyLogIn}>
          <i class="fa fa-cogs" /> Advanced Login
        </Anchor>
      </div>
--- a/src/app/views/LoginConnect.svelte
+++ b/src/app/views/LoginConnect.svelte
@ -165,7 +165,7 @@
          <Input bind:value={customRelayUrl} wrapperClass="flex-grow">
            <i slot="before" class="fa fa-search" />
          </Input>
-          <Anchor type="button" on:click={addCustomRelay}>Search relay</Anchor>
+          <Anchor theme="button" on:click={addCustomRelay}>Search relay</Anchor>
        </form>
      {/if}
    </Content>
--- a/src/app/views/LoginPrivKey.svelte
+++ b/src/app/views/LoginPrivKey.svelte
@ -36,7 +36,7 @@
        <i slot="before" class="fa fa-key" />
      </Input>
    </div>
-    <Anchor type="button" on:click={logIn}>Log In</Anchor>
+    <Anchor theme="button" on:click={logIn}>Log In</Anchor>
  </div>
  {#if !Capacitor.isNativePlatform()}
    <p class="rounded border-2 border-solid border-warning bg-gray-8 py-3 px-6">
--- a/src/app/views/LoginPubKey.svelte
+++ b/src/app/views/LoginPubKey.svelte
@ -37,6 +37,6 @@
        <i slot="before" class="fa fa-key" />
      </Input>
    </div>
-    <Anchor type="button" on:click={logIn}>Log In</Anchor>
+    <Anchor theme="button" on:click={logIn}>Log In</Anchor>
  </div>
 </Content>
--- a/src/app/views/Logout.svelte
+++ b/src/app/views/Logout.svelte
@ -30,7 +30,7 @@
  {:else}
    <div class="flex flex-col items-center gap-8" in:fly={{y: 20}}>
      <div>Are you sure you want to log out? All data will be cleared.</div>
-      <Anchor type="button" on:click={confirm}>Log out</Anchor>
+      <Anchor theme="button" on:click={confirm}>Log out</Anchor>
    </div>
  {/if}
 </Content>
--- 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 type="unstyled" href={routes.person(pubkey)} class="text-lg font-bold">
+          <Anchor theme="unstyled" href={routes.person(pubkey)} class="text-lg font-bold">
            {displayPerson($person)}
          </Anchor>
        </div>
--- a/src/app/views/NoteCreate.svelte
+++ b/src/app/views/NoteCreate.svelte
@ -6,7 +6,7 @@
  import {writable} from "svelte/store"
  import {annotateMedia} from "src/util/misc"
  import {displayPerson} from "src/util/nostr"
-  import Button from "src/partials/Button.svelte"
+  import Anchor from "src/partials/Anchor.svelte"
  import Compose from "src/partials/Compose.svelte"
  import ImageInput from "src/partials/ImageInput.svelte"
  import Media from "src/partials/Media.svelte"
@ -149,7 +149,8 @@
          }} />
      {/if}
      <div class="flex gap-2">
-        <Button type="submit" class="flex-grow text-center">Send</Button>
+        <Anchor tag="button" theme="button" type="submit" class="flex-grow text-center"
+          >Send</Anchor>
        <ImageInput bind:value={image} icon="image" hideInput />
      </div>
      <small
@ -202,7 +203,8 @@
            </RelayCard>
          </div>
          <div slot="footer">
-            <Button type="submit" class="w-full text-center">Done</Button>
+            <Anchor tag="button" theme="button" type="submit" class="w-full text-center"
+              >Done</Anchor>
          </div>
        </RelaySearch>
      </Content>
--- a/src/app/views/NoteDelete.svelte
+++ b/src/app/views/NoteDelete.svelte
@ -19,6 +19,6 @@
    note?
  </div>
  <div class="flex justify-center">
-    <Anchor type="button" on:click={confirm}>Confirm</Anchor>
+    <Anchor theme="button" on:click={confirm}>Confirm</Anchor>
  </div>
 </Content>
--- a/src/app/views/OnboardingNote.svelte
+++ b/src/app/views/OnboardingNote.svelte
@ -29,8 +29,9 @@
  <div class="border-l-2 border-solid border-gray-6 pl-4">
    <Compose bind:this={compose} {onSubmit} />
  </div>
-  <Anchor type="button-accent" class="flex-grow text-center" on:click={onSubmit}>Say Hello!</Anchor>
-  <Anchor type="unstyled" class="text-center" on:click={skip}>
+  <Anchor theme="button-accent" class="flex-grow text-center" on:click={onSubmit}
+    >Say Hello!</Anchor>
+  <Anchor theme="unstyled" class="text-center" on:click={skip}>
    Skip and see your feed <i class="fa fa-arrow-right" />
  </Anchor>
 </Content>
--- 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 type="unstyled" href={routes.person(pubkey)}>
+            <Anchor theme="unstyled" href={routes.person(pubkey)}>
              <h1 class="text-2xl">
                {displayPerson($person)}
              </h1>
--- a/src/app/views/RelayList.svelte
+++ b/src/app/views/RelayList.svelte
@ -18,7 +18,7 @@
        <i class="fa fa-server fa-lg" />
        <h2 class="staatliches text-2xl">Your relays</h2>
      </div>
-      <Anchor type="button-accent" on:click={() => modal.push({type: "relay/browse"})}>
+      <Anchor theme="button-accent" on:click={() => modal.push({type: "relay/browse"})}>
        <i class="fa-solid fa-compass" /> Browse Relays
      </Anchor>
    </div>
--- a/src/app/views/RelayReview.svelte
+++ b/src/app/views/RelayReview.svelte
@ -1,7 +1,7 @@
 <script lang="ts">
  import {fly} from "src/util/transition"
  import {modal} from "src/partials/state"
-  import Button from "src/partials/Button.svelte"
+  import Anchor from "src/partials/Anchor.svelte"
  import Content from "src/partials/Content.svelte"
  import Heading from "src/partials/Heading.svelte"
  import Compose from "src/partials/Compose.svelte"
@ -48,7 +48,7 @@
        class="shadow-inset rounded bg-input text-black"
        style="min-height: 6rem"
        bind:this={compose} />
-      <Button type="submit" class="flex-grow text-center">Send</Button>
+      <Anchor tag="button" theme="button" type="submit" class="flex-grow text-center">Send</Anchor>
    </div>
  </Content>
 </form>
--- a/src/app/views/UserProfile.svelte
+++ b/src/app/views/UserProfile.svelte
@ -6,7 +6,6 @@
  import ImageInput from "src/partials/ImageInput.svelte"
  import Textarea from "src/partials/Textarea.svelte"
  import Anchor from "src/partials/Anchor.svelte"
-  import Button from "src/partials/Button.svelte"
  import Content from "src/partials/Content.svelte"
  import Heading from "src/partials/Heading.svelte"
  import user from "src/agent/user"
@ -100,7 +99,7 @@
          In most clients, this image will be shown on your profile page.
        </p>
      </div>
-      <Button type="submit" class="text-center">Save</Button>
+      <Anchor tag="button" theme="button" type="submit" class="text-center">Save</Anchor>
    </div>
  </Content>
 </form>
--- a/src/app/views/UserSettings.svelte
+++ b/src/app/views/UserSettings.svelte
@ -2,9 +2,8 @@
  import {fly} from "src/util/transition"
  import {toast, appName} from "src/partials/state"
  import Toggle from "src/partials/Toggle.svelte"
-  import Anchor from "src/partials/Anchor.svelte"
  import Input from "src/partials/Input.svelte"
-  import Button from "src/partials/Button.svelte"
+  import Anchor from "src/partials/Anchor.svelte"
  import Content from "src/partials/Content.svelte"
  import Heading from "src/partials/Heading.svelte"
  import user from "src/agent/user"
@ -94,7 +93,7 @@
          and to diagnose and fix bugs.
        </p>
      </div>
-      <Button type="submit" class="text-center">Save</Button>
+      <Anchor tag="button" theme="button" type="submit" class="text-center">Save</Anchor>
    </div>
  </Content>
 </form>
--- a/src/partials/Anchor.svelte
+++ b/src/partials/Anchor.svelte
@ -9,8 +9,10 @@
  export let killEvent = false
  export let external = false
  export let loading = false
-  export let type = "anchor"
+  export let theme = "anchor"
+  export let type = null
  export let href = null
+  export let tag = "a"

  const dispatch = createEventDispatcher()

@ -23,7 +25,7 @@
    $$props.class,
    "cursor-pointer transition-all",
    {"opacity-50": loading},
-    switcher(type, {
+    switcher(theme, {
      anchor: "underline",
      button:
        "py-2 px-4 rounded-full bg-input text-accent whitespace-nowrap border border-solid border-gray-6 hover:bg-input-hover",
@ -55,6 +57,16 @@
  }
 </script>

-<a class={className} on:click={onClick} href={_href} {target}>
-  <slot />
-</a>
+{#if tag === "a"}
+  <a class={className} on:click={onClick} href={_href} {target}>
+    <slot />
+  </a>
+{:else if tag === "button"}
+  <button class={className} on:click={onClick} {type}>
+    <slot />
+  </button>
+{:else}
+  <svelte:element this={tag} class={className} on:click={onClick}>
+    <slot />
+  </svelte:element>
+{/if}
--- a/src/partials/Button.svelte
+++ b/src/partials/Button.svelte
@ -1,21 +0,0 @@
-<script>
-  import cx from "classnames"
-  import {switcher} from "hurdak/lib/hurdak"
-
-  export let theme = "default"
-  export let disabled = false
-
-  const className = cx(
-    $$props.class,
-    "py-2 px-4 rounded-full cursor-pointer border border-solid transition-all",
-    {"text-gray-5": disabled},
-    switcher(theme, {
-      default: "bg-input text-accent border-gray-6 hover:bg-input-hover",
-      accent: "text-white bg-accent border-accent-light hover:bg-accent-light",
-    })
-  )
-</script>
-
-<button on:click {...$$props} class={className}>
-  <slot />
-</button>
--- a/src/partials/ImageInput.svelte
+++ b/src/partials/ImageInput.svelte
@ -72,7 +72,7 @@
    }}>
    <slot name="button">
      <div class="flex">
-        <Anchor type="button">
+        <Anchor theme="button">
          <i class="fa fa-upload" />
        </Anchor>
      </div>
@ -87,8 +87,8 @@
      <p>Please accept the following terms:</p>
      <p>{quote.terms}</p>
      <div class="flex gap-2">
-        <Anchor type="button" on:click={decline} {loading}>Decline</Anchor>
-        <Anchor type="button-accent" on:click={accept} {loading}>Accept</Anchor>
+        <Anchor theme="button" on:click={decline} {loading}>Decline</Anchor>
+        <Anchor theme="button-accent" on:click={accept} {loading}>Accept</Anchor>
      </div>
    </Content>
  </Modal>
--- a/src/partials/MediaSet.svelte
+++ b/src/partials/MediaSet.svelte
@ -26,7 +26,7 @@
 </script>

 <div class="my-8 flex justify-center">
-  <Anchor type="button-minimal" on:click={openModal}>
+  <Anchor theme="button-minimal" on:click={openModal}>
    <i class="fa fa-plus" /> Show all {annotated.length} link previews
  </Anchor>
 </div>
--- a/src/partials/OverflowMenu.svelte
+++ b/src/partials/OverflowMenu.svelte
@ -31,7 +31,7 @@
        {#each actions as { label, icon, onClick }}
          <div class="relative z-10 cursor-pointer text-gray-2" on:click={onClick}>
            <span class="absolute right-0 mr-12 mt-2 whitespace-nowrap">{label}</span>
-            <Anchor type="button-circle"><i class={`fa fa-${icon}`} /></Anchor>
+            <Anchor theme="button-circle"><i class={`fa fa-${icon}`} /></Anchor>
          </div>
        {/each}
      </div>