Add mute settings

src/app/commands.ts

@@ -151,8 +151,6 @@ export const setRelayPolicy = (url: string, read: boolean, write: boolean) =>
       tags.push(["r", url, "write"])
     }
 
-    console.log(tags)
-
     return tags
   })
 

src/app/components/Name.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import {loadProfile, deriveProfileDisplay} from "@welshman/app"
+
+  export let pubkey
+
+  const profileDisplay = deriveProfileDisplay(pubkey)
+
+  loadProfile(pubkey)
+</script>
+
+{$profileDisplay}

src/app/components/PeopleItem.svelte

@@ -31,26 +31,24 @@
   })
 </script>
 
-<div class="card bg-base-100 shadow-xl">
+<div class="card2 bg-alt shadow-xl">
-  <div class="card-body">
+  <Profile {pubkey} />
-    <Profile {pubkey} />
+  <ProfileInfo {pubkey} />
-    <ProfileInfo {pubkey} />
+  {#if roots.length > 0}
-    {#if roots.length > 0}
+    {@const event = first(sortBy(e => -e.created_at, roots))}
-      {@const event = first(sortBy(e => -e.created_at, roots))}
+    {@const relays = ctx.app.router.Event(event).getUrls()}
-      {@const relays = ctx.app.router.Event(event).getUrls()}
+    {@const nevent = nip19.neventEncode({id: event.id, relays})}
-      {@const nevent = nip19.neventEncode({id: event.id, relays})}
+    {@const following = getListValues("p", $userFollows).includes(pubkey)}
-      {@const following = getListValues("p", $userFollows).includes(pubkey)}
+    <div class="divider" />
-      <div class="divider" />
+    <Link external class="chat chat-start" href={entityLink(nevent)}>
-      <Link external class="chat chat-start" href={entityLink(nevent)}>
+      <div class="chat-bubble">
-        <div class="chat-bubble">
+        <Content hideMedia={!following} {event} />
-          <Content hideMedia={!following} {event} />
+        <p class="text-xs text-right">{formatTimestamp(event.created_at)}</p>
-          <p class="text-xs text-right">{formatTimestamp(event.created_at)}</p>
-        </div>
-      </Link>
-      <div class="flex gap-2">
-        <div class="badge badge-neutral">{roots.length} recent {roots.length === 1 ? 'note' : 'notes'}</div>
-        <div class="badge badge-neutral">Last posted {formatTimestampRelative(event.created_at)}</div>
       </div>
-    {/if}
+    </Link>
-  </div>
+    <div class="flex gap-2">
+      <div class="badge badge-neutral">{roots.length} recent {roots.length === 1 ? 'note' : 'notes'}</div>
+      <div class="badge badge-neutral">Last posted {formatTimestampRelative(event.created_at)}</div>
+    </div>
+  {/if}
 </div>

src/lib/components/Tippy.svelte

@@ -27,4 +27,6 @@
   })
 </script>
 
-<div bind:this={element} />
+<div bind:this={element}>
+  <slot />
+</div>

src/lib/editor/Suggestions.svelte

@@ -2,8 +2,9 @@
 
 <script lang="ts">
   import {throttle} from "throttle-debounce"
-  import {slide} from "svelte/transition"
+  import {fly, slide} from "svelte/transition"
   import {clamp} from "@welshman/lib"
+  import Icon from '@lib/components/Icon.svelte'
   import {theme} from "@app/theme"
 
   export let term
@@ -25,7 +26,6 @@
 
   const setIndex = (newIndex: number, block: any) => {
     index = clamp([0, items.length - 1], newIndex)
-    element.querySelector(`button:nth-child(${index})`)?.scrollIntoView({block})
   }
 
   export const onKeyDown = (e: any) => {
@@ -64,11 +64,12 @@
   <div
     data-theme={$theme}
     bind:this={element}
-    transition:slide|local={{duration: 100}}
+    transition:fly
-    class="mt-2 max-h-[350px] overflow-y-auto overflow-x-hidden shadow-xl">
+    class="mt-2 max-h-[350px] overflow-y-auto overflow-x-hidden shadow-xl {$$props.class}"
+    style={$$props.style}>
     {#if term && allowCreate}
       <button
-        class="white-space-nowrap block w-full min-w-0 cursor-pointer overflow-x-hidden text-ellipsis px-4 py-2 text-left transition-colors hover:bg-primary hover:text-primary-content"
+        class="white-space-nowrap block w-full min-w-0 cursor-pointer overflow-x-hidden text-ellipsis px-4 py-2 text-left transition-all hover:brightness-150"
         on:mousedown|preventDefault
         on:click|preventDefault={() => select(term)}>
         Use "<svelte:component this={component} value={term} />"
@@ -76,17 +77,20 @@
     {/if}
     {#each items as value, i (value)}
       <button
-        class="white-space-nowrap block w-full min-w-0 cursor-pointer overflow-x-hidden text-ellipsis px-4 py-2 text-left transition-colors hover:bg-primary hover:text-primary-content"
+        class="white-space-nowrap block w-full min-w-0 cursor-pointer overflow-x-hidden text-ellipsis px-4 py-2 text-left transition-all hover:brightness-150 flex items-center"
-        class:bg-primary={index === i}
-        class:text-primary-content={index === i}
         on:mousedown|preventDefault
         on:click|preventDefault={() => select(value)}>
+        {#if index === i}
+          <div transition:slide={{axis: 'x'}} class="pr-2">
+            <Icon icon="alt-arrow-right" />
+          </div>
+        {/if}
         <svelte:component this={component} {value} />
       </button>
     {/each}
   </div>
   {#if loading}
-    <div transition:slide|local class="bg-tinted-700 flex gap-2 px-4 py-2 text-neutral-200">
+    <div transition:slide|local class="flex gap-2 px-4 py-2">
       <div>
         <i class="fa fa-circle-notch fa-spin" />
       </div>

src/routes/discover/+page.svelte

@@ -47,7 +47,7 @@
     let:item={relay}>
     <a
       href={makeSpacePath(relay.url)}
-      class="card bg-base-100 shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]">
+      class="card2 bg-alt shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]">
       <div class="center avatar mt-8">
         <div
           class="center relative !flex w-20 rounded-full border-2 border-solid border-base-300 bg-base-300">
@@ -67,12 +67,10 @@
           </div>
         </div>
       {/if}
-      <div class="card-body">
+      <h2 class="text-center">{displayRelayUrl(relay.url)}</h2>
-        <h2 class="card-title justify-center">{displayRelayUrl(relay.url)}</h2>
+      {#if relay.profile?.description}
-        {#if relay.profile?.description}
+        <p class="py-4 text-center text-sm">{relay.profile.description}</p>
-          <p class="py-4 text-center text-sm">{relay.profile.description}</p>
+      {/if}
-        {/if}
-      </div>
     </a>
   </Masonry>
 </div>

src/routes/discover/themes/+page.svelte

@@ -19,14 +19,10 @@
   </label>
   <div class="grid grid-cols-2 gap-4 md:grid-cols-2">
     {#each searchThemes.searchValues(term) as name}
-      <div class="card bg-base-100 shadow-xl" data-theme={name}>
+      <div class="card2 bg-alt shadow-xl flex flex-col justify-center gap-4" data-theme={name}>
-        <div class="card-body">
+        <h2 class="card2 bg-alt text-center capitalize">{name}</h2>
-          <h2 class="card2 card-title justify-center capitalize">{name}</h2>
+        <button class="btn btn-primary w-full" on:click={() => theme.set(name)}
-          <div class="card-actions">
+          >Use Theme</button>
-            <button class="btn btn-primary w-full" on:click={() => theme.set(name)}
-              >Use Theme</button>
-          </div>
-        </div>
       </div>
     {/each}
   </div>

src/routes/settings/+page.svelte

@@ -1 +1,112 @@
-Settings: who needs em?
+<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'
+
+  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)
+  }
+
+  const onSubmit = async () => {
+    await updateList(MUTES, always(mutedPubkeys.map(tagPubkey)))
+
+    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>
+    </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>
+  </div>
+</form>

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

@@ -51,68 +51,64 @@
 </script>
 
 <div class="content column gap-4">
-  <div class="card bg-base-100 shadow-xl">
+  <div class="card2 bg-alt shadow-xl">
-    <div class="card-body">
+    <div class="flex gap-2 justify-between">
-      <div class="flex gap-2 justify-between">
+      <div class="flex gap-3 max-w-full">
-        <div class="flex gap-3 max-w-full">
+        <div class="py-1">
-          <div class="py-1">
+          <Avatar src={profile?.picture} size={10} />
-            <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">
+              {displayProfile(profile, pubkeyDisplay)}
+            </div>
           </div>
-          <div class="flex flex-col min-w-0">
+          <div class="text-sm opacity-75 text-ellipsis overflow-hidden">
-            <div class="flex gap-2 items-center">
+            {profile?.nip05 ? displayNip05(profile.nip05) : pubkeyDisplay}
-              <div class="text-bold text-ellipsis overflow-hidden">
-                {displayProfile(profile, pubkeyDisplay)}
-              </div>
-            </div>
-            <div class="text-sm opacity-75 text-ellipsis overflow-hidden">
-              {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}>
-          <Icon icon="pen-new-square" />
-        </Button>
       </div>
-      {#key profile.about}
+      <Button class="btn btn-neutral btn-circle w-12 h-12 center -mt-4 -mr-4" on:click={toggleEdit}>
-        <Content event={{content: profile.about, tags: []}} hideMedia />
+        <Icon icon="pen-new-square" />
-      {/key}
+      </Button>
     </div>
+    {#key profile.about}
+      <Content event={{content: profile.about, tags: []}} hideMedia />
+    {/key}
   </div>
   {#if editing}
-    <form class="card bg-base-100 shadow-xl" transition:slide on:submit|preventDefault={saveEdit}>
+    <form class="card2 bg-alt shadow-xl" transition:slide on:submit|preventDefault={saveEdit}>
-      <div class="card-body">
+      <div class="flex justify-center py-2">
-        <div class="flex justify-center py-2">
+        <InputProfilePicture bind:file bind:url={profile.picture} />
-          <InputProfilePicture bind:file bind:url={profile.picture} />
+      </div>
-        </div>
+      <Field>
-        <Field>
+        <p slot="label">Username</p>
-          <p slot="label">Username</p>
+        <label class="input input-bordered flex w-full items-center gap-2" slot="input">
-          <label class="input input-bordered flex w-full items-center gap-2" slot="input">
+          <Icon icon="user-circle" />
-            <Icon icon="user-circle" />
+          <input bind:value={profile.name} class="grow" type="text" />
-            <input bind:value={profile.name} class="grow" type="text" />
+        </label>
-          </label>
+      </Field>
-        </Field>
+      <Field>
-        <Field>
+        <p slot="label">About You</p>
-          <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>
+      <Field>
-        <Field>
+        <p slot="label">Nostr Address</p>
-          <p slot="label">Address</p>
+        <label class="input input-bordered flex w-full items-center gap-2" slot="input">
-          <label class="input input-bordered flex w-full items-center gap-2" slot="input">
+          <Icon icon="remote-controller-minimalistic" />
-            <Icon icon="remote-controller-minimalistic" />
+          <input bind:value={profile.nip05} class="grow" type="text" />
-            <input bind:value={profile.nip05} class="grow" type="text" />
+        </label>
-          </label>
+        <p slot="info">
-          <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>
-          </p>
+      </Field>
-        </Field>
+      <div class="flex flex-row items-center justify-between gap-4 mt-4">
-        <div class="flex flex-row items-center justify-between gap-4 mt-4">
+        <Button class="btn btn-neutral" on:click={stopEdit}>
-          <Button class="btn btn-neutral" on:click={stopEdit}>
+          Discard Changes
-            Discard Changes
+        </Button>
-          </Button>
+        <Button type="submit" class="btn btn-primary">
-          <Button type="submit" class="btn btn-primary">
+          Save Changes
-            Save Changes
+        </Button>
-          </Button>
-        </div>
       </div>
     </form>
   {/if}