Move space add buttons around

src/app.css

@@ -109,7 +109,7 @@
 }
 
 .ellipsize {
-  @apply text-ellipsis overflow-hidden;
+  @apply overflow-hidden text-ellipsis;
 }
 
 .content {

src/app/commands.ts

@@ -190,7 +190,7 @@ export const setInboxRelayPolicy = (url: string, enabled: boolean) => {
 // Relay access
 
 export const checkRelayAccess = async (url: string, claim = "") => {
-  const connection =  ctx.net.pool.get(url)
+  const connection = ctx.net.pool.get(url)
 
   await connection.auth.attemptIfRequested()
   await connection.auth.waitIfPending()

src/app/components/ChatMessage.svelte

@@ -70,10 +70,7 @@
       <div class="-mt-1 flex-grow pr-1">
         {#if showPubkey}
           <div class="flex items-center gap-2">
-            <Button
-              class="text-bold text-sm"
-              style="color: {colorValue}"
-              on:click={showProfile}>
+            <Button class="text-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
               {$profileDisplay}
             </Button>
             <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>

src/app/components/ChatStart.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {goto} from "$app/navigation"
-  import {pubkey} from '@welshman/app'
+  import {pubkey} from "@welshman/app"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"

src/app/components/ContentQuote.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {nip19} from 'nostr-tools'
+  import {nip19} from "nostr-tools"
   import {Address} from "@welshman/util"
   import Link from "@lib/components/Link.svelte"
   import Spinner from "@lib/components/Spinner.svelte"

src/app/components/InfoKeys.svelte

@@ -9,19 +9,21 @@
     <div slot="title">What is a private key?</div>
   </ModalHeader>
   <p>
-    Most software keeps track of users by giving them a username and password. This gives the service
-    <strong>total control</strong> over their users, allowing them to ban them at any time, or sell their activity.
+    Most software keeps track of users by giving them a username and password. This gives the
+    service
+    <strong>total control</strong> over their users, allowing them to ban them at any time, or sell their
+    activity.
   </p>
   <p>
-    On <Link external href="https://nostr.com/">Nostr</Link>, <strong>you</strong> control your own identity and
-    social data, through the magic of crytography. The basic idea is that you have a <strong>public key</strong>,
-    which acts as your user id, and a <strong>private key</strong> which allows you to authenticate any message
-    you send.
+    On <Link external href="https://nostr.com/">Nostr</Link>, <strong>you</strong> control your own
+    identity and social data, through the magic of crytography. The basic idea is that you have a
+    <strong>public key</strong>, which acts as your user id, and a <strong>private key</strong> which
+    allows you to authenticate any message you send.
   </p>
   <p>
-    It's very important to keep private keys safe, but this can sometimes be confusing for newcomers. This is why
-    flotilla supports <strong>remote signer</strong> login. These services can store your keys securely for you,
-    giving you access using a username and password.
+    It's very important to keep private keys safe, but this can sometimes be confusing for
+    newcomers. This is why flotilla supports <strong>remote signer</strong> login. These services can
+    store your keys securely for you, giving you access using a username and password.
   </p>
   <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
 </div>

src/app/components/LogIn.svelte

@@ -2,12 +2,10 @@
   import {makeSecret, getNip07, Nip46Broker} from "@welshman/signer"
   import {addSession, loadHandle, nip46Perms, type Session} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
-  import Field from "@lib/components/Field.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import Button from "@lib/components/Button.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
-  import SearchSelect from "@lib/components/SearchSelect.svelte"
   import SignUp from "@app/components/SignUp.svelte"
   import InfoNostr from "@app/components/InfoNostr.svelte"
   import LogInInfoRemoteSigner from "@app/components/LogInInfoRemoteSigner.svelte"
@@ -47,7 +45,7 @@
     }
 
     const secret = makeSecret()
-    const {pubkey, nip46, relays = []} = await loadHandle(`${username}@${domain}`) || {}
+    const {pubkey, nip46, relays = []} = (await loadHandle(`${username}@${domain}`)) || {}
 
     if (!pubkey) {
       return pushToast({
@@ -88,7 +86,7 @@
   })
 
   let username = ""
-  let domain = 'nsec.app'
+  let domain = "nsec.app"
   let loading = false
 </script>
 
@@ -99,19 +97,24 @@
     <Button class="link" on:click={() => pushModal(InfoNostr)}>nostr protocol</Button>, which allows
     you to own your social identity.
   </p>
-  <div class="grid grid-cols-3 gap-3 items-center">
+  <div class="grid grid-cols-3 items-center gap-3">
     <p class="font-bold">Username</p>
-    <label class="input input-bordered flex w-full items-center gap-2 col-span-2">
+    <label class="input input-bordered col-span-2 flex w-full items-center gap-2">
       <Icon icon="user-circle" />
-      <input bind:value={username} disabled={loading} class="grow" type="text" placeholder="username" />
+      <input
+        bind:value={username}
+        disabled={loading}
+        class="grow"
+        type="text"
+        placeholder="username" />
     </label>
     <Tippy component={LogInInfoRemoteSigner} params={{interactive: true}}>
-      <p class="font-bold cursor-pointer flex gap-2 items-center">
+      <p class="flex cursor-pointer items-center gap-2 font-bold">
         Remote Signer
         <Icon icon="info-circle" class="opacity-50" />
       </p>
     </Tippy>
-    <label class="input input-bordered flex w-full items-center gap-2 col-span-2">
+    <label class="input input-bordered col-span-2 flex w-full items-center gap-2">
       <Icon icon="key-minimalistic-square-3" />
       <input bind:value={domain} disabled={loading} class="grow" type="text" />
     </label>
@@ -122,7 +125,10 @@
   </Button>
   <Divider>Or</Divider>
   {#if getNip07()}
-    <Button disabled={loading} on:click={loginWithNip07} class="btn {username ? 'btn-neutral' : 'btn-primary'}">
+    <Button
+      disabled={loading}
+      on:click={loginWithNip07}
+      class="btn {username ? 'btn-neutral' : 'btn-primary'}">
       <Icon icon="widget" />
       Log in with Extension
     </Button>

src/app/components/LogInInfoRemoteSigner.svelte

@@ -4,7 +4,7 @@
   import {pushModal} from "@app/modal"
 </script>
 
-<p class="text-sm card2 bg-alt transition-all">
+<p class="card2 bg-alt text-sm transition-all">
   A remote signer is a simple way to protect your private key.
   <Button class="link" on:click={() => pushModal(InfoKeys)}>What is a private key?</Button>
 </p>

src/app/components/PeopleItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {nip19} from 'nostr-tools'
+  import {nip19} from "nostr-tools"
   import {onMount} from "svelte"
   import {ago, append, first, sortBy, WEEK, ctx} from "@welshman/lib"
   import {NOTE, getAncestorTags, getListTags, getPubkeyTagValues} from "@welshman/util"
@@ -59,10 +59,12 @@
       </div>
     </Link>
     <div class="flex gap-2">
-      <div class="badge badge-neutral bg-alt border-none">
+      <div class="bg-alt badge badge-neutral border-none">
         {roots.length} recent {roots.length === 1 ? "note" : "notes"}
       </div>
-      <div class="badge badge-neutral bg-alt border-none">Last posted {formatTimestampRelative(event.created_at)}</div>
+      <div class="bg-alt badge badge-neutral border-none">
+        Last posted {formatTimestampRelative(event.created_at)}
+      </div>
     </div>
   {/if}
 </Button>

src/app/components/RelayAdd.svelte

@@ -38,7 +38,7 @@
     <input bind:value={term} class="grow" type="text" placeholder="Search for relays..." />
   </label>
 </div>
-<div class="overflow-auto column gap-2 h-[50vh] mt-16" bind:this={element}>
+<div class="column mt-16 h-[50vh] gap-2 overflow-auto" bind:this={element}>
   {#each $relaySearch
     .searchValues(term)
     .filter(url => !$relays.includes(url))

src/app/components/RelayItem.svelte

@@ -13,8 +13,8 @@
 </script>
 
 <div class="card2 card2-sm bg-alt column gap-2">
-  <div class="flex items-center gap-4 justify-between">
-    <div class="flex items-center gap-2 ellipsize">
+  <div class="flex items-center justify-between gap-4">
+    <div class="ellipsize flex items-center gap-2">
       <Icon icon="remote-controller-minimalistic" />
       <p class="ellipsize">{displayRelayUrl(url)}</p>
     </div>
@@ -23,9 +23,9 @@
   {#if $relay?.profile?.description}
     <p class="ellipsize">{$relay?.profile.description}</p>
   {/if}
-  <span class="flex items-center gap-1 text-sm whitespace-nowrap">
+  <span class="flex items-center gap-1 whitespace-nowrap text-sm">
     {#if $relay?.profile?.contact}
-      <Link external class="underline ellipsize" href={$relay.profile.contact}
+      <Link external class="ellipsize underline" href={$relay.profile.contact}
         >{displayUrl($relay.profile.contact)}</Link>
       &bull;
     {/if}

src/app/components/SpaceAdd.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import CardButton from "@lib/components/CardButton.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
@@ -26,6 +27,13 @@
       <div slot="info">Enter an invite code or url to join an existing space.</div>
     </CardButton>
   </Button>
+  <Link href="/discover">
+    <CardButton>
+      <div slot="icon"><Icon icon="compass" size={7} /></div>
+      <div slot="title">Find a space</div>
+      <div slot="info">Browse spaces on the discover page.</div>
+    </CardButton>
+  </Link>
   <Button on:click={startCreate}>
     <CardButton>
       <div slot="icon"><Icon icon="add-circle" size={7} /></div>

src/app/components/SpaceInviteAccept.svelte

@@ -2,7 +2,6 @@
   import {goto} from "$app/navigation"
   import {ctx, tryCatch} from "@welshman/lib"
   import {isRelayUrl, normalizeRelayUrl} from "@welshman/util"
-  import CardButton from "@lib/components/CardButton.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
@@ -18,8 +17,6 @@
 
   const back = () => history.back()
 
-  const browse = () => goto("/discover")
-
   const confirm = async (url: string) => {
     await addSpaceMembership(url)
 
@@ -84,13 +81,6 @@
       <Button class="link" on:click={() => pushModal(InfoRelay)}>What is a relay?</Button>
     </p>
   </Field>
-  <Button on:click={browse}>
-    <CardButton>
-      <div slot="icon"><Icon icon="compass" size={7} /></div>
-      <div slot="title">Don't have an invite?</div>
-      <div slot="info">Browse other spaces on the discover page.</div>
-    </CardButton>
-  </Button>
   <ModalFooter>
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />

src/lib/components/Divider.svelte

@@ -1,4 +1,4 @@
-<div class="flex items-center gap-2 p-2 text-xs opacity-50 uppercase">
+<div class="flex items-center gap-2 p-2 text-xs uppercase opacity-50">
   <div class="h-px flex-grow bg-base-content opacity-25" />
   <p><slot /></p>
   <div class="h-px flex-grow bg-base-content opacity-25" />

src/lib/components/Icon.svelte

@@ -118,7 +118,7 @@
     "info-circle": InfoCircle,
     "info-square": InfoSquare,
     key: Key,
-    'key-minimalistic-square-3': KeyMinimalisticSquare3,
+    "key-minimalistic-square-3": KeyMinimalisticSquare3,
     "link-round": LinkRound,
     login: Login,
     "login-2": Login2,

src/lib/components/Link.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {goto} from '$app/navigation'
+  import {goto} from "$app/navigation"
 
   export let href
   export let external = false

src/lib/components/ModalBox.svelte

@@ -5,6 +5,6 @@
   export let props = {}
 </script>
 
-<div class="bg-alt modal-box overflow-y-auto overflow-visible" transition:fly={{duration: 100}}>
+<div class="bg-alt modal-box overflow-visible overflow-y-auto" transition:fly={{duration: 100}}>
   <svelte:component this={component} {...props} />
 </div>

src/lib/components/PrimaryNavItem.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
   import {page} from "$app/stores"
   import Button from "@lib/components/Button.svelte"
-  import {getPrimaryNavItem} from '@app/routes'
 
   export let title = ""
   export let href = ""
 
-  $: itemSegment = href.split('/')[1]
-  $: currentSegment = $page.route?.id?.split('/')[1]
+  $: itemSegment = href.split("/")[1]
+  $: currentSegment = $page.route?.id?.split("/")[1]
   $: active = itemSegment === currentSegment
 </script>
 

src/lib/components/SearchSelect.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import type {SvelteComponent} from "svelte"
-  import {readable} from 'svelte/store'
+  import {readable} from "svelte/store"
   import {type Instance} from "tippy.js"
-  import {append, identity, remove, uniq} from "@welshman/lib"
+  import {identity} from "@welshman/lib"
   import {createSearch} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
-  import Button from "@lib/components/Button.svelte"
   import Suggestions from "@lib/editor/Suggestions.svelte"
   import SuggestionString from "@lib/editor/SuggestionString.svelte"
 
@@ -22,7 +21,7 @@
     createSearch(options, {
       getValue: identity,
       fuseOptions: {keys: [""]},
-    })
+    }),
   )
 
   const select = (newValue: string) => {
@@ -48,7 +47,13 @@
 <div class={$$props.class}>
   <label class="input input-bordered flex w-full items-center gap-3" bind:this={input}>
     <slot name="before" />
-    <input class="grow" type="text" bind:value={value} on:keydown={onKeyDown} on:focus={onFocus} on:blur={onBlur} />
+    <input
+      class="grow"
+      type="text"
+      bind:value
+      on:keydown={onKeyDown}
+      on:focus={onFocus}
+      on:blur={onBlur} />
     <Icon icon="alt-arrow-down" class="cursor-pointer" />
   </label>
   <Tippy

src/lib/components/Tippy.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import 'tippy.js/animations/shift-away.css'
+  import "tippy.js/animations/shift-away.css"
 
   import {onMount} from "svelte"
   import type {SvelteComponent, ComponentType, ComponentProps} from "svelte"
@@ -19,7 +19,7 @@
     if (element) {
       const target = document.createElement("div")
 
-      popover = tippy(element, {content: target, animation: 'shift-away', ...params})
+      popover = tippy(element, {content: target, animation: "shift-away", ...params})
 
       instance = new component({target, props})
 

src/lib/editor/Suggestions.svelte

@@ -81,7 +81,7 @@
         on:mousedown|preventDefault
         on:click|preventDefault={() => select(value)}>
         {#if index === i}
-          <div transition:slide|local={{axis: "x"}} class="pr-2 flex items-center">
+          <div transition:slide|local={{axis: "x"}} class="flex items-center pr-2">
             <Icon icon="alt-arrow-right" />
           </div>
         {/if}

src/lib/editor/util.ts

@@ -61,11 +61,13 @@ export const getEditorTags = (editor: Editor) => {
     attrs.tag.replace(/^#/, "").toLowerCase(),
   ])
 
-  const naddrTags = findNodes("naddr", json).map(({attrs: {kind, pubkey, identifier, relays = []}}: any) => {
-    const address = new Address(kind, pubkey, identifier).toString()
+  const naddrTags = findNodes("naddr", json).map(
+    ({attrs: {kind, pubkey, identifier, relays = []}}: any) => {
+      const address = new Address(kind, pubkey, identifier).toString()
 
-    return ["q", address, ctx.app.router.fromRelays(relays).getUrl(), pubkey]
-  })
+      return ["q", address, ctx.app.router.fromRelays(relays).getUrl(), pubkey]
+    },
+  )
 
   const neventTags = findNodes("nevent", json).map(({attrs: {id, author, relays = []}}: any) => [
     "q",

src/lib/html.ts

@@ -62,4 +62,3 @@ export const createScroller = ({
     },
   }
 }
-

src/routes/home/+layout.svelte

@@ -69,7 +69,7 @@
     <input bind:value={term} class="grow" type="text" />
   </label>
   <div class="overflow-auto">
-    {#each chats as {id, pubkeys, messages} (id)}
+    {#each chats as { id, pubkeys, messages } (id)}
       <ChatItem {id} {pubkeys} {messages} />
     {/each}
   </div>

src/routes/home/[chat]/+page.svelte

@@ -109,7 +109,7 @@
         {#if others.length === 1}
           {@const pubkey = others[0]}
           {@const showProfile = () => pushModal(ProfileDetail, {pubkey})}
-          <Button on:click={showProfile}>
+          <Button on:click={showProfile} class="row-2">
             <ProfileCircle {pubkey} size={5} />
             <ProfileName {pubkey} />
           </Button>
@@ -119,16 +119,14 @@
             <ProfileName pubkey={others[0]} />
             and {others.length - 1}
             {others.length > 2 ? "others" : "other"}
-            <Button on:click={showMembers} class="btn btn-link">
-              Show all members
-            </Button>
+            <Button on:click={showMembers} class="btn btn-link">Show all members</Button>
           </p>
         {/if}
       </div>
       <div slot="action">
         {#if remove($pubkey, $missingInboxes).length > 0}
           {@const count = remove($pubkey, $missingInboxes).length}
-          {@const label = count > 0 ? 'inboxes are' : 'inbox is'}
+          {@const label = count > 1 ? "inboxes are" : "inbox is"}
           <div
             class="row-2 badge badge-error badge-lg tooltip tooltip-left cursor-pointer"
             data-tip="{count} {label} not configured.">

src/routes/home/chats/+page.svelte

@@ -31,7 +31,7 @@
     <input bind:value={term} class="grow" type="text" placeholder="Search for conversations..." />
   </label>
   <div class="column gap-2 overflow-auto">
-    {#each chats as {id, pubkeys, messages} (id)}
+    {#each chats as { id, pubkeys, messages } (id)}
       <ChatItem {id} {pubkeys} {messages} />
     {/each}
   </div>

src/routes/home/people/+page.svelte

@@ -10,7 +10,7 @@
 
   const defaultPubkeys = uniq([
     ...shuffle(getPubkeyTagValues(getListTags($userFollows))),
-    ...import.meta.env.VITE_DEFAULT_PUBKEYS.split(','),
+    ...import.meta.env.VITE_DEFAULT_PUBKEYS.split(","),
   ])
 
   let term = ""