Rough out chat

src/routes/settings/+page.svelte

@@ -1,26 +1,17 @@
 <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 ProfileMultiSelect from '@app/components/ProfileMultiSelect.svelte'
-  import {entityLink} from '@app/state'
-  import {updateList} from '@app/commands'
-  import {pushToast} from '@app/toast'
+  import {always} from "@welshman/lib"
+  import {getListTags, getPubkeyTagValues, MUTES} from "@welshman/util"
+  import {userMutes, tagPubkey} from "@welshman/app"
+  import Field from "@lib/components/Field.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
+  import {updateList} from "@app/commands"
+  import {pushToast} from "@app/toast"
 
-  let mutedPubkeys = getListValues("p", $userMutes)
+  let mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
 
   const reset = () => {
-    mutedPubkeys = getListValues("p", $userMutes)
+    mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
   }
 
   const onSubmit = async () => {
@@ -38,13 +29,9 @@
         <ProfileMultiSelect bind:value={mutedPubkeys} />
       </div>
     </Field>
-    <div class="flex flex-row items-center justify-between gap-4 mt-4">
-      <Button class="btn btn-neutral" on:click={reset}>
-        Discard Changes
-      </Button>
-      <Button type="submit" class="btn btn-primary">
-        Save Changes
-      </Button>
+    <div class="mt-4 flex flex-row items-center justify-between gap-4">
+      <Button class="btn btn-neutral" on:click={reset}>Discard Changes</Button>
+      <Button type="submit" class="btn btn-primary">Save Changes</Button>
     </div>
   </div>
 </form>

src/routes/settings/about/+page.svelte

@@ -2,7 +2,7 @@
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import {entityLink} from '@app/state'
+  import {entityLink} from "@app/state"
 
   const nprofile =
     "nprofile1qqsf03c2gsmx5ef4c9zmxvlew04gdh7u94afnknp33qvv3c94kvwxgspz4mhxue69uhhyetvv9ujuerpd46hxtnfduhsz9rhwden5te0wfjkcctev93xcefwdaexwtcpzdmhxue69uhhqatjwpkx2urpvuhx2ue0vamm57"
@@ -22,7 +22,9 @@
         <div class="card2 bg-alt flex flex-col gap-2 text-center shadow-2xl">
           <h3 class="text-2xl sm:h-12">Get in touch</h3>
           <p class="sm:h-16">Having problems? Let us know by filing an issue.</p>
-          <Link class="btn btn-primary" href="/home/97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322">
+          <Link
+            class="btn btn-primary"
+            href="/home/97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322">
             Open an Issue
           </Link>
         </div>

src/routes/settings/profile/+page.svelte

@@ -1,26 +1,31 @@
 <script lang="ts">
-  import {nip19} from 'nostr-tools'
   import {last, ctx} from "@welshman/lib"
-  import {PROFILE, createEvent, displayPubkey, displayProfile, makeProfile, editProfile, createProfile, isPublishedProfile} from "@welshman/util"
-  import {pubkey, getProfile, displayHandle, makeThunk, publishThunk} from "@welshman/app"
-  import {slide} from '@lib/transition'
+  import {
+    createEvent,
+    displayPubkey,
+    displayProfile,
+    makeProfile,
+    editProfile,
+    createProfile,
+    isPublishedProfile,
+  } from "@welshman/util"
+  import {pubkey, profilesByPubkey, makeThunk, publishThunk} from "@welshman/app"
+  import {slide} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
-  import Field from '@lib/components/Field.svelte'
+  import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import InputProfilePicture from "@lib/components/InputProfilePicture.svelte"
-  import Content from '@app/components/Content.svelte'
-  import InfoHandle from '@app/components/InfoHandle.svelte'
+  import Content from "@app/components/Content.svelte"
+  import InfoHandle from "@app/components/InfoHandle.svelte"
   import {pushModal} from "@app/modal"
   import {pushToast} from "@app/toast"
 
-  const npub = nip19.npubEncode($pubkey!)
   const pubkeyDisplay = displayPubkey($pubkey!)
 
-  const displayNip05 = (nip05: string) =>
-    nip05?.startsWith("_@") ? last(nip05.split("@")) : nip05
+  const displayNip05 = (nip05: string) => (nip05?.startsWith("_@") ? last(nip05.split("@")) : nip05)
 
-  const cloneProfile = () => ({...(getProfile($pubkey!) || makeProfile())})
+  const cloneProfile = () => ({...($profilesByPubkey.get($pubkey!) || makeProfile())})
 
   const toggleEdit = () => {
     editing = !editing
@@ -52,23 +57,23 @@
 
 <div class="content column gap-4">
   <div class="card2 bg-alt shadow-xl">
-    <div class="flex gap-2 justify-between">
-      <div class="flex gap-3 max-w-full">
+    <div class="flex justify-between gap-2">
+      <div class="flex max-w-full gap-3">
         <div class="py-1">
           <Avatar src={profile?.picture} size={10} />
         </div>
-        <div class="flex flex-col min-w-0">
-          <div class="flex gap-2 items-center">
-            <div class="text-bold text-ellipsis overflow-hidden">
+        <div class="flex min-w-0 flex-col">
+          <div class="flex items-center gap-2">
+            <div class="text-bold overflow-hidden text-ellipsis">
               {displayProfile(profile, pubkeyDisplay)}
             </div>
           </div>
-          <div class="text-sm opacity-75 text-ellipsis overflow-hidden">
+          <div class="overflow-hidden text-ellipsis text-sm opacity-75">
             {profile?.nip05 ? displayNip05(profile.nip05) : pubkeyDisplay}
           </div>
         </div>
       </div>
-      <Button class="btn btn-neutral btn-circle w-12 h-12 center -mt-4 -mr-4" on:click={toggleEdit}>
+      <Button class="center btn btn-circle btn-neutral -mr-4 -mt-4 h-12 w-12" on:click={toggleEdit}>
         <Icon icon="pen-new-square" />
       </Button>
     </div>
@@ -90,7 +95,11 @@
       </Field>
       <Field>
         <p slot="label">About You</p>
-        <textarea class="textarea textarea-bordered leading-4" rows="3" bind:value={profile.about} slot="input" />
+        <textarea
+          class="textarea textarea-bordered leading-4"
+          rows="3"
+          bind:value={profile.about}
+          slot="input" />
       </Field>
       <Field>
         <p slot="label">Nostr Address</p>
@@ -99,16 +108,13 @@
           <input bind:value={profile.nip05} class="grow" type="text" />
         </label>
         <p slot="info">
-          <Button class="link" on:click={() => pushModal(InfoHandle)}>What is a nostr address?</Button>
+          <Button class="link" on:click={() => pushModal(InfoHandle)}
+            >What is a nostr address?</Button>
         </p>
       </Field>
-      <div class="flex flex-row items-center justify-between gap-4 mt-4">
-        <Button class="btn btn-neutral" on:click={stopEdit}>
-          Discard Changes
-        </Button>
-        <Button type="submit" class="btn btn-primary">
-          Save Changes
-        </Button>
+      <div class="mt-4 flex flex-row items-center justify-between gap-4">
+        <Button class="btn btn-neutral" on:click={stopEdit}>Discard Changes</Button>
+        <Button type="submit" class="btn btn-primary">Save Changes</Button>
       </div>
     </form>
   {/if}

src/routes/settings/relays/+page.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
   import {derived} from "svelte/store"
-  import type {Readable} from 'svelte/store'
-  import {relaySearch, getRelayUrls, userRelaySelections, userInboxRelaySelections, getReadRelayUrls, getWriteRelayUrls} from "@welshman/app"
+  import {
+    getRelayUrls,
+    userRelaySelections,
+    userInboxRelaySelections,
+    getReadRelayUrls,
+    getWriteRelayUrls,
+  } from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Collapse from "@lib/components/Collapse.svelte"
   import RelayItem from "@app/components/RelayItem.svelte"
   import RelayAdd from "@app/components/RelayAdd.svelte"
-  import {pushModal} from '@app/modal'
-  import {setRelayPolicy, setInboxRelayPolicy} from '@app/commands'
+  import {pushModal} from "@app/modal"
+  import {setRelayPolicy, setInboxRelayPolicy} from "@app/commands"
 
   const readRelayUrls = derived(userRelaySelections, getReadRelayUrls)
   const writeRelayUrls = derived(userRelaySelections, getWriteRelayUrls)
@@ -41,20 +46,20 @@
 
 <div class="content column gap-4">
   <Collapse class="card2 bg-alt column gap-4">
-    <h2 slot="title" class="text-xl flex items-center gap-3">
+    <h2 slot="title" class="flex items-center gap-3 text-xl">
       <Icon icon="earth" />
       Broadcast Relays
     </h2>
     <p slot="description" class="text-sm">
-      These relays will be advertised on your profile as places where you send your public
-      notes. Be sure to select relays that will accept your notes, and which will let people
-      who follow you read them.
+      These relays will be advertised on your profile as places where you send your public notes. Be
+      sure to select relays that will accept your notes, and which will let people who follow you
+      read them.
     </p>
     <div class="column gap-2">
       {#each $writeRelayUrls.sort() as url (url)}
         <RelayItem {url}>
           <Button
-            class="flex items-center tooltip"
+            class="tooltip flex items-center"
             data-tip="Stop using this relay"
             on:click={() => removeWriteRelay(url)}>
             <Icon icon="close-circle" />
@@ -70,20 +75,19 @@
     </div>
   </Collapse>
   <Collapse class="card2 bg-alt column gap-4">
-    <h2 slot="title" class="text-xl flex items-center gap-3">
+    <h2 slot="title" class="flex items-center gap-3 text-xl">
       <Icon icon="inbox" />
       Inbox Relays
     </h2>
     <p slot="description" class="text-sm">
-      These relays will be advertised on your profile as places where other people should
-      send notes intended for you. Be sure to select relays that will accept notes that
-      tag you.
+      These relays will be advertised on your profile as places where other people should send notes
+      intended for you. Be sure to select relays that will accept notes that tag you.
     </p>
     <div class="column gap-2">
       {#each $readRelayUrls.sort() as url (url)}
         <RelayItem {url}>
           <Button
-            class="flex items-center tooltip"
+            class="tooltip flex items-center"
             data-tip="Stop using this relay"
             on:click={() => removeReadRelay(url)}>
             <Icon icon="close-circle" />
@@ -99,20 +103,20 @@
     </div>
   </Collapse>
   <Collapse class="card2 bg-alt column gap-4">
-    <h2 slot="title" class="text-xl flex items-center gap-3">
+    <h2 slot="title" class="flex items-center gap-3 text-xl">
       <Icon icon="mailbox" />
       Messaging Relays
     </h2>
     <p slot="description" class="text-sm">
-      These relays will be advertised on your profile as places you use to send and
-      receive direct messages. Be sure to select relays that will accept your messages
-      and messages from people you'd like to be in contact with.
+      These relays will be advertised on your profile as places you use to send and receive direct
+      messages. Be sure to select relays that will accept your messages and messages from people
+      you'd like to be in contact with.
     </p>
     <div class="column gap-2">
       {#each $inboxRelayUrls.sort() as url (url)}
         <RelayItem {url}>
           <Button
-            class="flex items-center tooltip"
+            class="tooltip flex items-center"
             data-tip="Stop using this relay"
             on:click={() => removeInboxRelay(url)}>
             <Icon icon="close-circle" />