Rough out chat

2024-10-08 11:39:16 -07:00
parent 7ffd02b736
commit 8698dcc359
59 changed files with 833 additions and 437 deletions
@@ -13,7 +13,7 @@
    style={`width: ${size * 4}px; height: ${size * 4}px; min-width: ${size * 4}px; background-image: url(${src}); ${$$props.style || ""}`} />
 {:else}
  <div
-    class={cx($$props.class, "rounded-full !flex center")}
+    class={cx($$props.class, "center !flex rounded-full")}
    style={`width: ${size * 4}px; height: ${size * 4}px; min-width: ${size * 4}px; ${$$props.style || ""}`}>
    <Icon {icon} size={Math.round(size * 0.8)} />
  </div>
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import {slide} from '@lib/transition'
-  import Icon from '@lib/components/Icon.svelte'
+  import {slide} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"

  const toggle = () => {
    isOpen = !isOpen
@@ -9,10 +9,10 @@
  let isOpen = false
 </script>

-<div class="flex flex-col gap-4 relative {$$props.class}">
+<div class="relative flex flex-col gap-4 {$$props.class}">
  <button
    type="button"
-    class="absolute top-8 right-8 cursor-pointer w-4 h-4 transition-all"
+    class="absolute right-8 top-8 h-4 w-4 cursor-pointer transition-all"
    class:rotate-90={!isOpen}
    on:click={toggle}>
    <Icon icon="alt-arrow-down" />
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {randomId} from '@welshman/lib'
-  import Icon from '@lib/components/Icon.svelte'
+  import {randomId} from "@welshman/lib"

  const id = randomId()

@@ -31,8 +30,8 @@
  </div>
  <div class="drawer-side z-modal">
    <label for={id} aria-label="close sidebar" class="drawer-overlay"></label>
-    <div class="menu bg-base-200 text-base-content min-h-full w-80 p-0">
+    <div class="menu min-h-full w-80 bg-base-200 p-0 text-base-content">
      <slot />
-  </div>
+    </div>
  </div>
 </div>
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import 'emoji-picker-element'
-  import type {Emoji} from 'emoji-picker-element/shared'
-  import {onMount} from 'svelte'
+  import "emoji-picker-element"
+  import type {Emoji} from "emoji-picker-element/shared"
+  import {onMount} from "svelte"

  export let onClick: (emoji: Emoji) => void

  let element: Element

  onMount(() => {
-    element.addEventListener('emoji-click', (event: any) => onClick(event.detail as Emoji))
+    element.addEventListener("emoji-click", (event: any) => onClick(event.detail as Emoji))
  })
 </script>

@@ -84,7 +84,7 @@
    document: Document,
    earth: Earth,
    pen: Pen,
-    'pen-new-square': PenNewSquare,
+    "pen-new-square": PenNewSquare,
    "headphones-round": HeadphonesRound,
    "add-circle": AddCircle,
    "alt-arrow-down": AltArrowDown,
@@ -112,7 +112,7 @@
    hashtag: Hashtag,
    "hand-pills": HandPills,
    "home-smile": HomeSmile,
-    "inbox": Inbox,
+    inbox: Inbox,
    "info-circle": InfoCircle,
    "info-square": InfoSquare,
    key: Key,
@@ -5,6 +5,6 @@
  export let props = {}
 </script>

-<div class="modal-box bg-alt overflow-visible" transition:fly={{duration: 100}}>
+<div class="bg-alt modal-box overflow-visible" transition:fly={{duration: 100}}>
  <svelte:component this={component} {...props} />
 </div>
@@ -1,3 +1,3 @@
-<div class="flex w-60 flex-shrink-0 flex-col gap-1 bg-base-300 max-h-screen">
+<div class="flex max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300">
  <slot />
 </div>
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import {onMount} from 'svelte'
-  import type {SvelteComponent, ComponentType, ComponentProps} from 'svelte'
+  import {onMount} from "svelte"
+  import type {SvelteComponent, ComponentType, ComponentProps} from "svelte"
  import tippy, {type Instance, type Props} from "tippy.js"

  export let component: ComponentType
@@ -14,15 +14,17 @@
  $: instance?.$set(props)

  onMount(() => {
-    const target = document.createElement("div")
+    if (element) {
+      const target = document.createElement("div")

-    popover = tippy(element, {content: target, ...params})
+      popover = tippy(element, {content: target, ...params})

-    instance = new component({target, props})
+      instance = new component({target, props})

-    return () => {
-      popover?.destroy()
-      instance?.$destroy()
+      return () => {
+        popover?.destroy()
+        instance?.$destroy()
+      }
    }
  })
 </script>
@@ -14,7 +14,7 @@
 </style>

 <script lang="ts">
-  import {clamp} from '@welshman/lib'
+  import {clamp} from "@welshman/lib"

  export let score
  export let max = 100
@@ -26,7 +26,7 @@
  $: normalizedScore = clamp([0, max], score) / max
  $: dashOffset = 100 - 44 * normalizedScore
  $: style = `transform: rotate(${135 - normalizedScore * 180}deg)`
-  $: stroke = active ? 'var(--primary)' : 'var(--base-content)'
+  $: stroke = active ? "var(--primary)" : "var(--base-content)"
 </script>

 <div class="relative h-[14px] w-[14px]">
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import cx from 'classnames'
+  import cx from "classnames"
  import type {NodeViewProps} from "@tiptap/core"
  import {NodeViewWrapper} from "svelte-tiptap"
  import {ellipsize, nthEq} from "@welshman/lib"
@@ -11,9 +11,11 @@
  export let selected: NodeViewProps["selected"]

  const displayEvent = (e: TrustedEvent) => {
-    const content = e?.tags.find(nthEq(0, 'alt'))?.[1] || e?.content
+    const content = e?.tags.find(nthEq(0, "alt"))?.[1] || e?.content

-    return content.length > 1 ? ellipsize(content, 30) : fromNostrURI(nevent || naddr).slice(0, 16) + "..."
+    return content.length > 1
+      ? ellipsize(content, 30)
+      : fromNostrURI(nevent || naddr).slice(0, 16) + "..."
  }

  $: ({identifier, pubkey, kind, id, relays = [], nevent, naddr} = node.attrs)
@@ -21,7 +23,10 @@
 </script>

 <NodeViewWrapper class="inline">
-  <Link external href={entityLink(node.attrs.nevent)} class={cx("link-content", {"link-content-selected": selected})}>
+  <Link
+    external
+    href={entityLink(node.attrs.nevent)}
+    class={cx("link-content", {"link-content-selected": selected})}>
    {displayEvent($event)}
  </Link>
 </NodeViewWrapper>
@@ -5,7 +5,7 @@
  import {displayProfile} from "@welshman/util"
  import {deriveProfile} from "@welshman/app"
  import Link from "@lib/components/Link.svelte"
-  import {entityLink} from '@app/state'
+  import {entityLink} from "@app/state"

  export let node: NodeViewProps["node"]
  export let selected: NodeViewProps["selected"]
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Profile from '@app/components/Profile.svelte'
+  import Profile from "@app/components/Profile.svelte"

  export let value
 </script>
@@ -4,7 +4,7 @@
  import {throttle} from "throttle-debounce"
  import {fly, slide} from "svelte/transition"
  import {clamp} from "@welshman/lib"
-  import Icon from '@lib/components/Icon.svelte'
+  import Icon from "@lib/components/Icon.svelte"
  import {theme} from "@app/theme"

  export let term
@@ -77,11 +77,11 @@
    {/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-all hover:brightness-150 flex items-center"
+        class="white-space-nowrap block flex w-full min-w-0 cursor-pointer items-center overflow-x-hidden text-ellipsis px-4 py-2 text-left transition-all hover:brightness-150"
        on:mousedown|preventDefault
        on:click|preventDefault={() => select(value)}>
        {#if index === i}
-          <div transition:slide|local={{axis: 'x'}} class="pr-2">
+          <div transition:slide|local={{axis: "x"}} class="pr-2">
            <Icon icon="alt-arrow-right" />
          </div>
        {/if}
@@ -56,29 +56,37 @@ export const findMarks = (type: string, json: JSONContent) => {
 export const getEditorTags = (editor: Editor) => {
  const json = editor.getJSON()

-  const topicTags = findMarks("tag", json).map(
-    ({attrs}: any) => ["t", attrs.tag.replace(/^#/, '').toLowerCase()],
-  )
+  const topicTags = findMarks("tag", json).map(({attrs}: any) => [
+    "t",
+    attrs.tag.replace(/^#/, "").toLowerCase(),
+  ])

-  const naddrTags = findNodes("naddr", json).map(
-    ({kind, pubkey, identifier, relays}: any) => {
-      const address = new Address(kind, pubkey, identifier).toString()
+  const naddrTags = findNodes("naddr", json).map(({kind, pubkey, identifier, relays}: any) => {
+    const address = new Address(kind, pubkey, identifier).toString()

-      return ["q", address, choice(relays) || "", pubkey]
-    },
-  )
+    return ["q", address, choice(relays) || "", pubkey]
+  })

-  const neventTags = findNodes("nevent", json).map(
-    ({id, author, relays}: any) => ["q", id, choice(relays) || "", author || ""],
-  )
+  const neventTags = findNodes("nevent", json).map(({id, author, relays}: any) => [
+    "q",
+    id,
+    choice(relays) || "",
+    author || "",
+  ])

-  const mentionTags = findNodes("nprofile", json).map(
-    ({pubkey, relays}: any) => ["p", pubkey, choice(relays) || "", ""],
-  )
+  const mentionTags = findNodes("nprofile", json).map(({pubkey, relays}: any) => [
+    "p",
+    pubkey,
+    choice(relays) || "",
+    "",
+  ])

-  const imetaTags = findNodes("image", json).map(
-    ({src, sha256}: any) => ["imeta", `url ${src}`, `x ${sha256}`, `ox ${sha256}`],
-  )
+  const imetaTags = findNodes("image", json).map(({src, sha256}: any) => [
+    "imeta",
+    `url ${src}`,
+    `x ${sha256}`,
+    `ox ${sha256}`,
+  ])

  return [...topicTags, ...naddrTags, ...neventTags, ...mentionTags, ...imetaTags]
 }