Add chat start dialog

src/app/components/ChatStart.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import {goto} from "$app/navigation"
+  import {displayRelayUrl} from "@welshman/util"
+  import Field from "@lib/components/Field.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
+  import {makeChatPath} from "@app/routes"
+
+  const back = () => history.back()
+
+  const onSubmit = async () => {
+    goto(makeChatPath(pubkeys))
+  }
+
+  let pubkeys: string[] = []
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={onSubmit}>
+  <h1 class="heading">Start a Chat</h1>
+  <p class="text-center">
+    Create an encrypted chat room for private conversations.
+  </p>
+  <Field>
+    <p slot="label">Members</p>
+    <div slot="input">
+      <ProfileMultiSelect bind:value={pubkeys} />
+    </div>
+  </Field>
+  <div class="flex flex-row items-center justify-between gap-4">
+    <Button class="btn btn-link" on:click={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary" disabled={pubkeys.length === 0}>
+      Create Chat
+      <Icon icon="alt-arrow-right" />
+    </Button>
+  </div>
+</form>

src/app/components/ProfileMultiSelect.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import {nip19} from 'nostr-tools'
+  import type {SvelteComponent} from 'svelte'
+  import tippy, {type Instance} from "tippy.js"
+  import {append, always, remove, uniq} from '@welshman/lib'
+  import {getListValues, MUTES} from '@welshman/util'
+  import {userMutes, profileSearch, tagPubkey} 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 Link from '@lib/components/Link.svelte'
+  import Button from '@lib/components/Button.svelte'
+  import Suggestions from '@lib/editor/Suggestions.svelte'
+  import SuggestionProfile from '@lib/editor/SuggestionProfile.svelte'
+  import Name from '@app/components/Name.svelte'
+  import {entityLink} from '@app/state'
+  import {updateList} from '@app/commands'
+  import {pushToast} from '@app/toast'
+
+  export let value: string[]
+
+  let term = ""
+  let input: Element
+  let popover: Instance
+  let instance: SvelteComponent
+
+  const selectPubkey = (pubkey: string) => {
+    term = ""
+    popover.hide()
+    value = uniq(append(pubkey, value))
+  }
+
+  const removePubkey = (pubkey: string) => {
+    value = remove(pubkey, value)
+  }
+
+  const onKeyDown = (e: Event) => {
+    if (instance.onKeyDown(e)) {
+      e.preventDefault()
+    }
+  }
+
+  $: {
+    if (term) {
+      popover?.show()
+    } else {
+      popover?.hide()
+    }
+  }
+</script>
+
+<div class="flex flex-col gap-2">
+  <div>
+    {#each value as pubkey (pubkey)}
+      <div class="badge badge-neutral mr-1 flex-inline gap-1">
+        <Button class="flex items-center" on:click={() => removePubkey(pubkey)}>
+          <Icon icon="close-circle" size={4} class="-ml-1 mt-px" />
+        </Button>
+        <Link href={entityLink(nip19.npubEncode(pubkey))}>
+          <Name {pubkey} />
+        </Link>
+      </div>
+    {/each}
+  </div>
+  <label class="input input-bordered flex w-full items-center gap-2" bind:this={input}>
+    <Icon icon="magnifer" />
+    <input class="grow" type="text" placeholder="Search for profiles..." bind:value={term} on:keydown={onKeyDown} />
+  </label>
+  <Tippy
+    bind:popover
+    bind:instance
+    component={Suggestions}
+    props={{
+      term,
+      select: selectPubkey,
+      search: profileSearch,
+      component: SuggestionProfile,
+      class: 'rounded-box',
+      style: `left: 4px; width: ${input?.clientWidth + 12}px`,
+    }}
+    params={{
+      trigger: "manual",
+      interactive: true,
+      maxWidth: 'none',
+      getReferenceClientRect: () => input.getBoundingClientRect(),
+    }}
+  />
+</div>

src/app/routes.ts

@@ -1,6 +1,6 @@
 import {nip19} from "nostr-tools"
 import type {Page} from "@sveltejs/kit"
-import {userMembership, decodeNRelay} from "@app/state"
+import {userMembership, makeChatId, decodeNRelay} from "@app/state"
 
 export const makeSpacePath = (url: string, extra = "") => {
   let path = `/spaces/${nip19.nrelayEncode(url)}`
@@ -12,6 +12,8 @@ export const makeSpacePath = (url: string, extra = "") => {
   return path
 }
 
+export const makeChatPath = (pubkeys: string[]) => `/home/${makeChatId(pubkeys)}`
+
 export const getPrimaryNavItem = ($page: Page) => $page.route?.id?.split("/")[1]
 
 export const getPrimaryNavItemIndex = ($page: Page) => {

src/app/state.ts

@@ -223,7 +223,7 @@ export const {
   },
 })
 
-// Encrypted Chats
+// Chats
 
 export const chatMessages = deriveEvents(repository, {filters: [{kinds: [DIRECT_MESSAGE]}]})
 

src/lib/components/ModalBox.svelte

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

src/lib/editor/Suggestions.svelte

@@ -60,12 +60,12 @@
   }
 </script>
 
-{#if items.length > 0 || (term && allowCreate)}
+{#if term}
   <div
     data-theme={$theme}
     bind:this={element}
-    transition:fly
-    class="mt-2 max-h-[350px] overflow-y-auto overflow-x-hidden shadow-xl {$$props.class}"
+    transition:fly|local={{duration: 200}}
+    class="mt-2 max-h-[350px] overflow-y-auto overflow-x-hidden shadow-xl {$$props.class} bg-alt"
     style={$$props.style}>
     {#if term && allowCreate}
       <button
@@ -81,7 +81,7 @@
         on:mousedown|preventDefault
         on:click|preventDefault={() => select(value)}>
         {#if index === i}
-          <div transition:slide={{axis: 'x'}} class="pr-2">
+          <div transition:slide|local={{axis: 'x'}} class="pr-2">
             <Icon icon="alt-arrow-right" />
           </div>
         {/if}

src/routes/home/+layout.svelte

@@ -2,11 +2,16 @@
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
+  import Button from "@lib/components/Button.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
   import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
   import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
   import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
+  import ChatStart from "@app/components/ChatStart.svelte"
   import {chats} from '@app/state'
+  import {pushModal} from '@app/modal'
+
+  const startChat = () => pushModal(ChatStart)
 </script>
 
 <SecondaryNav>
@@ -29,9 +34,9 @@
     <div in:fly={{delay: 150}}>
       <SecondaryNavHeader>
         Chats
-        <div class="cursor-pointer">
+        <Button on:click={startChat}>
           <Icon icon="add-circle" />
-        </div>
+        </Button>
       </SecondaryNavHeader>
     </div>
     {#each $chats as {id, pubkeys}, i (id)}

src/routes/settings/+page.svelte

@@ -12,33 +12,13 @@
   import Button from '@lib/components/Button.svelte'
   import Suggestions from '@lib/editor/Suggestions.svelte'
   import SuggestionProfile from '@lib/editor/SuggestionProfile.svelte'
-  import Name from '@app/components/Name.svelte'
+  import ProfileMultiSelect from '@app/components/ProfileMultiSelect.svelte'
   import {entityLink} from '@app/state'
   import {updateList} from '@app/commands'
   import {pushToast} from '@app/toast'
 
-  let term = ""
-  let input: Element
-  let popover: Instance
-  let instance: SvelteComponent
   let mutedPubkeys = getListValues("p", $userMutes)
 
-  const addMute = (pubkey: string) => {
-    term = ""
-    popover.hide()
-    mutedPubkeys = uniq(append(pubkey, mutedPubkeys))
-  }
-
-  const removeMute = (pubkey: string) => {
-    mutedPubkeys = remove(pubkey, mutedPubkeys)
-  }
-
-  const onKeyDown = (e: Event) => {
-    if (instance.onKeyDown(e)) {
-      e.preventDefault()
-    }
-  }
-
   const reset = () => {
     mutedPubkeys = getListValues("p", $userMutes)
   }
@@ -48,56 +28,14 @@
 
     pushToast({message: "Your settings have been saved!"})
   }
-
-  $: {
-    if (term) {
-      popover?.show()
-    } else {
-      popover?.hide()
-    }
-  }
 </script>
 
 <form class="content column gap-4" on:submit|preventDefault={onSubmit}>
   <div class="card2 bg-alt shadow-xl">
     <Field>
       <p slot="label">Muted Accounts</p>
-      <div slot="input" class="flex flex-col gap-2">
-        <div>
-          {#each mutedPubkeys as pubkey (pubkey)}
-            <div class="badge badge-neutral mr-1 flex-inline gap-1">
-              <Button on:click={() => removeMute(pubkey)}>
-                <Icon icon="close-circle" size={4} class="-ml-1 mt-px" />
-              </Button>
-              <Link href={entityLink(nip19.npubEncode(pubkey))}>
-                <Name {pubkey} />
-              </Link>
-            </div>
-          {/each}
-        </div>
-        <label class="input input-bordered flex w-full items-center gap-2" bind:this={input}>
-          <Icon icon="magnifer" />
-          <input class="grow" type="text" bind:value={term} on:keydown={onKeyDown} />
-        </label>
-        <Tippy
-          bind:popover
-          bind:instance
-          component={Suggestions}
-          props={{
-            term,
-            select: addMute,
-            search: profileSearch,
-            component: SuggestionProfile,
-            class: 'rounded-box',
-            style: `left: 4px; width: ${input?.clientWidth + 12}px`,
-          }}
-          params={{
-            trigger: "manual",
-            interactive: true,
-            maxWidth: 'none',
-            getReferenceClientRect: () => input.getBoundingClientRect(),
-          }}
-        />
+      <div slot="input">
+        <ProfileMultiSelect bind:value={mutedPubkeys} />
       </div>
     </Field>
     <div class="flex flex-row items-center justify-between gap-4 mt-4">